wehub-resource-sync
82 lines
4.7 KiB
HTML
82 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'">
|
|
<title>Zero Browser</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="browser-shell">
|
|
<div class="toolbar" id="toolbar">
|
|
<div class="toolbar-row">
|
|
<div class="nav-group">
|
|
<button class="nav-btn" id="back" type="button" aria-label="Back" disabled>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<button class="nav-btn" id="forward" type="button" aria-label="Forward" disabled>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 3l5 5-5 5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form class="address-bar-wrapper" id="browser-form">
|
|
<div class="address-bar" id="address-bar">
|
|
<div class="address-icon" id="address-icon">
|
|
<svg class="icon-lock" width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<rect x="2.5" y="6" width="9" height="6.5" rx="1.5" stroke="currentColor" stroke-width="1.3"/>
|
|
<path d="M4.5 6V4.5a2.5 2.5 0 015 0V6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
|
</svg>
|
|
<svg class="icon-globe" width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
|
|
<ellipse cx="7" cy="7" rx="2.8" ry="5.5" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M1.5 7h11M2 4.5h10M2 9.5h10" stroke="currentColor" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
<input id="url-input" type="text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="none" enterkeyhint="go" value="https://example.com" aria-label="Address" placeholder="Search or enter address">
|
|
<button class="reload-btn" id="reload" type="button" aria-label="Reload">
|
|
<svg class="icon-reload" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.5 7a4.5 4.5 0 1 1-1.26-3.12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M10.5 1v3.25h-3.25" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<svg class="icon-stop" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M4 4l6 6M10 4l-6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
</button>
|
|
<div class="loading-bar" id="loading-bar"></div>
|
|
</div>
|
|
<div class="suggestions" id="suggestions" hidden></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="page-stage" aria-label="Browser page WebView">
|
|
<div class="empty-state" id="empty-state">
|
|
<div class="empty-icon">
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
|
<circle cx="24" cy="24" r="20" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
|
|
<circle cx="24" cy="24" r="12" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
|
|
<circle cx="24" cy="24" r="4" fill="currentColor" opacity="0.15"/>
|
|
</svg>
|
|
</div>
|
|
<p class="empty-title">Loading page</p>
|
|
<p class="empty-sub">A native page WebView will appear here</p>
|
|
</div>
|
|
|
|
<div class="error-state" id="error-state" hidden>
|
|
<div class="error-icon">
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
|
<circle cx="24" cy="24" r="20" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M24 16v10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="24" cy="32" r="1.5" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
<p class="error-title" id="error-title">Can't connect to the server</p>
|
|
<p class="error-detail" id="error-detail">The site could not be reached.</p>
|
|
<button class="error-retry" id="error-retry" type="button">Try again</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="status-bar hidden" id="status" role="status" aria-live="polite">
|
|
<span class="status-text" id="status-text">Ready</span>
|
|
</div>
|
|
</main>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|