494 lines
19 KiB
HTML
494 lines
19 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'; connect-src 'none'; img-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'none'">
|
||
<title>
|
||
S Browser
|
||
</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body data-theme="auto" data-tab-mode="separate">
|
||
|
||
<!-- Trusted browser chrome: native layout uses this measured height. -->
|
||
<header id="chrome">
|
||
<div class="toolbar">
|
||
<div class="toolbar-leading">
|
||
<div class="traffic-lights" aria-label="Window controls">
|
||
<button id="window-close" class="traffic close" aria-label="Close window" title="Close">
|
||
<img src="icons/x.svg" alt="">
|
||
</button>
|
||
<button id="window-minimize" class="traffic minimize" aria-label="Minimize window" title="Minimize">
|
||
<img src="icons/minus.svg" alt="">
|
||
</button>
|
||
<button id="window-maximize" class="traffic maximize" aria-label="Maximize or restore window" title="Maximize">
|
||
<img src="icons/maximize-2.svg" alt="">
|
||
</button>
|
||
</div>
|
||
<button id="sidebar-toggle" class="icon-button" title="Show sidebar" aria-label="Toggle sidebar" aria-expanded="false">
|
||
<img src="icons/panel-left.svg" alt="">
|
||
</button>
|
||
<button type="button" id="back" class="icon-button" aria-label="Back" title="Back">
|
||
<img src="icons/chevron-left.svg" alt="">
|
||
</button>
|
||
<button type="button" id="forward" class="icon-button" aria-label="Forward" title="Forward">
|
||
<img src="icons/chevron-right.svg" alt="">
|
||
</button>
|
||
</div>
|
||
<form id="address-form">
|
||
<img class="address-lock" src="icons/globe.svg" alt="">
|
||
<input id="address" aria-label="Website address" aria-describedby="managed" placeholder="Enter website name or address" autocomplete="off" spellcheck="false">
|
||
<button type="button" id="reload" class="icon-button" aria-label="Reload" title="Reload">
|
||
<img src="icons/rotate-cw.svg" alt="">
|
||
</button>
|
||
<button type="submit" class="visually-hidden">
|
||
Go
|
||
</button>
|
||
</form>
|
||
<div class="toolbar-trailing">
|
||
<button id="share-url" class="icon-button" title="Share page link" aria-label="Share page link">
|
||
<img src="icons/share.svg" alt="">
|
||
</button>
|
||
<button id="new-tab" class="icon-button" title="New tab" aria-label="New tab">
|
||
<img src="icons/plus.svg" alt="">
|
||
</button>
|
||
<button id="tab-overview" class="icon-button" title="Tab overview" aria-label="Tab overview" aria-expanded="false">
|
||
<img src="icons/squares-unite.svg" alt="">
|
||
</button>
|
||
<button id="quick-ai" class="icon-button" hidden disabled title="AI workspace" aria-label="AI workspace"><img src="icons/sparkles.svg" alt=""></button>
|
||
<button id="quick-passwords" class="icon-button" hidden disabled title="Passwords" aria-label="Passwords"><img src="icons/key-round.svg" alt=""></button>
|
||
<button id="quick-inspect" class="icon-button" hidden disabled title="Inspect document locally" aria-label="Inspect document locally"><img src="icons/scan-text.svg" alt=""></button>
|
||
<button id="quick-agents" class="icon-button" hidden disabled title="Local agents" aria-label="Local agents"><img src="icons/bot.svg" alt=""></button>
|
||
<button id="tools-toggle" hidden disabled class="icon-button" title="Browser tools and appearance" aria-label="Browser tools and appearance" aria-expanded="false" aria-controls="tools-menu">
|
||
<img src="icons/ellipsis.svg" alt="">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="tab-row">
|
||
<div id="tab-strip" aria-label="Saved browsing tabs">
|
||
<button class="browser-tab active">
|
||
Start Page
|
||
</button>
|
||
</div>
|
||
<div class="security-state">
|
||
<img src="icons/shield-check.svg" alt="">
|
||
<span id="managed">
|
||
Enrollment required
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div id="tools-menu" class="glass-popover" hidden>
|
||
<p class="menu-caption">
|
||
WORKSPACE TOOLS
|
||
</p>
|
||
<button id="ai-toggle" class="menu-item" aria-expanded="false">
|
||
<img src="icons/sparkles.svg" alt="">
|
||
AI workspace
|
||
</button>
|
||
<button id="sidebar" class="menu-item" aria-expanded="false">
|
||
<img src="icons/panel-right.svg" alt="">
|
||
Toggle AI sidebar
|
||
</button>
|
||
<button id="passwords" class="menu-item" aria-expanded="false">
|
||
<img src="icons/key-round.svg" alt="">
|
||
Passwords
|
||
</button>
|
||
<button id="inspect" class="menu-item" title="Inspect document locally">
|
||
<img src="icons/scan-text.svg" alt="">
|
||
Inspect document / media
|
||
</button>
|
||
<button id="agents" class="menu-item">
|
||
<img src="icons/bot.svg" alt="">
|
||
Local agents
|
||
</button>
|
||
<button id="bookmark" class="menu-item">
|
||
<img src="icons/bookmark-plus.svg" alt="">
|
||
Bookmark this page
|
||
</button>
|
||
<button id="bookmark-manager-open" class="menu-item"><img src="icons/bookmark.svg" alt="">Manage bookmarks</button>
|
||
<button id="reading-add" class="menu-item">
|
||
<img src="icons/book-open.svg" alt="">
|
||
Save to Reading List
|
||
</button>
|
||
<section id="appearance-section" hidden>
|
||
<div class="menu-divider">
|
||
</div>
|
||
<p class="menu-caption">APPEARANCE</p>
|
||
<div id="settings">
|
||
<label for="theme-mode">
|
||
Theme
|
||
</label>
|
||
<select id="theme-mode">
|
||
<option value="auto">
|
||
System
|
||
</option>
|
||
<option value="light">
|
||
Light
|
||
</option>
|
||
<option value="dark">
|
||
Dark
|
||
</option>
|
||
</select>
|
||
<label for="accent-mode">Accent</label>
|
||
<select id="accent-mode">
|
||
<option value="blue">Blue</option>
|
||
<option value="teal">Teal</option>
|
||
<option value="violet">Violet</option>
|
||
</select>
|
||
<label for="tab-mode">
|
||
Tab layout
|
||
</label>
|
||
<select id="tab-mode">
|
||
<option value="separate">
|
||
Separate
|
||
</option>
|
||
<option value="compact">
|
||
Compact
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<p id="settings-managed" class="appearance-status" hidden>Appearance is set by your administrator.</p>
|
||
<p id="theme-status" class="appearance-status" aria-live="polite">Follows your system appearance.</p>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Local sidebar metadata; remote website content is a separate native view. -->
|
||
<aside id="library" hidden>
|
||
<div class="library-brand">
|
||
<div class="brand-monogram">
|
||
S
|
||
</div>
|
||
<div>
|
||
<strong id="brand">
|
||
S Browser
|
||
</strong>
|
||
<span>
|
||
Managed workspace
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<nav aria-label="Browser library">
|
||
<details class="library-section" open>
|
||
<summary class="library-item">
|
||
<img src="icons/star.svg" alt="">
|
||
Favorites
|
||
</summary>
|
||
<div id="library-favorites" class="library-links">
|
||
</div>
|
||
</details>
|
||
<details class="library-section">
|
||
<summary class="library-item">
|
||
<img src="icons/bookmark.svg" alt="">
|
||
Bookmarks
|
||
</summary>
|
||
<div id="library-bookmarks" class="library-links">
|
||
</div>
|
||
</details>
|
||
<details class="library-section">
|
||
<summary class="library-item">
|
||
<img src="icons/book-open.svg" alt="">
|
||
Reading List
|
||
</summary>
|
||
<div id="library-reading" class="library-links">
|
||
</div>
|
||
</details>
|
||
<div class="library-heading">
|
||
<span>
|
||
TAB GROUPS
|
||
</span>
|
||
</div>
|
||
<div class="group-controls">
|
||
<input id="group-name" placeholder="New group name" aria-label="New tab group name" maxlength="80" autocomplete="off">
|
||
<button id="group-add" class="icon-button" aria-label="Add tab group">
|
||
<img src="icons/plus.svg" alt="">
|
||
</button>
|
||
</div>
|
||
<div id="library-groups">
|
||
</div>
|
||
<div class="library-heading">
|
||
<span>
|
||
OPEN TABS
|
||
</span>
|
||
</div>
|
||
<div id="library-tabs">
|
||
</div>
|
||
</nav>
|
||
<div class="library-footer">
|
||
<img src="icons/shield-check.svg" alt="">
|
||
<span>
|
||
Managed browser workspace
|
||
</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Trusted start page, shown only while the native website view is hidden. -->
|
||
<main id="start-page" hidden>
|
||
<div class="start-content">
|
||
<img id="start-company-logo" class="company-logo start-company-logo" alt="" hidden>
|
||
<p id="start-brand-name" class="start-eyebrow">
|
||
S BROWSER
|
||
</p>
|
||
<h1 id="start-title">
|
||
Your space to explore.
|
||
</h1>
|
||
<p id="start-subtitle" class="start-subtitle" hidden></p>
|
||
<section id="company-news" class="start-section" hidden aria-labelledby="company-news-title">
|
||
<div class="section-title"><h2 id="company-news-title">Company news</h2></div>
|
||
<div id="company-news-items" class="company-news-items"></div>
|
||
<p id="company-news-empty" class="company-news-empty">Company news is currently unavailable.</p>
|
||
</section>
|
||
<section class="start-section">
|
||
<div class="section-title">
|
||
<h2>
|
||
Favorites
|
||
</h2>
|
||
<button id="favorites-manage" class="text-button">Manage bookmarks</button>
|
||
</div>
|
||
<div id="favorites-grid" class="favorites-grid">
|
||
</div>
|
||
<p id="favorites-empty" hidden>
|
||
Bookmark a page to add it to your favorites.
|
||
</p>
|
||
</section>
|
||
<section class="start-section">
|
||
<div class="section-title">
|
||
<h2>
|
||
Recently visited
|
||
</h2>
|
||
</div>
|
||
<div id="recent-list" class="recent-list">
|
||
</div>
|
||
</section>
|
||
<div class="privacy-card">
|
||
<div class="privacy-icon">
|
||
<img src="icons/shield-check.svg" alt="">
|
||
</div>
|
||
<div>
|
||
<strong>
|
||
A protected workspace.
|
||
</strong>
|
||
<p>
|
||
Your organization's rules follow you as you browse.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<p class="session-note">
|
||
Each tab keeps its own managed browsing context.
|
||
</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Navigation-record overview; inactive records are not running isolated pages. -->
|
||
<section id="overview" hidden aria-label="Tab overview">
|
||
<div class="overview-heading">
|
||
<h1>
|
||
Your tabs
|
||
</h1>
|
||
<button id="overview-close" class="icon-button" aria-label="Close tab overview">
|
||
<img src="icons/x.svg" alt="">
|
||
</button>
|
||
</div>
|
||
<p class="overview-note">
|
||
Pick up where you left off.
|
||
</p>
|
||
<div id="overview-grid">
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Enterprise enrollment and paused-access state. -->
|
||
<main id="welcome">
|
||
<div class="card">
|
||
<div class="welcome-mark">
|
||
<img src="icons/shield-check.svg" alt="">
|
||
</div>
|
||
<p class="eyebrow">
|
||
YOUR MANAGED WORKSPACE
|
||
</p>
|
||
<h1>
|
||
A safer place to work.
|
||
</h1>
|
||
<p id="message">
|
||
Connect to your organization for secure browsing and approved AI.
|
||
</p>
|
||
<div id="enrollment">
|
||
<label>
|
||
Management server
|
||
<input id="server" value="http://127.0.0.1:4310" type="url">
|
||
</label>
|
||
<label>
|
||
Enrollment code
|
||
<input id="code" type="password" autocomplete="off" placeholder="Provided by your administrator">
|
||
</label>
|
||
<div class="actions">
|
||
<button id="enroll">
|
||
Connect browser
|
||
</button>
|
||
<button id="sso" class="secondary">
|
||
Enterprise SSO
|
||
</button>
|
||
</div>
|
||
<small>
|
||
Your organization's management server supplies the security policy for this browser.
|
||
</small>
|
||
</div>
|
||
<p id="error" role="status" aria-live="polite">
|
||
</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Approved AI sidebar; retains existing security and inspection controls. -->
|
||
<aside id="ai" hidden>
|
||
<div class="panel-title">
|
||
<div>
|
||
<p class="eyebrow">
|
||
APPROVED BY YOUR ORGANIZATION
|
||
</p>
|
||
<h2>
|
||
AI workspace
|
||
</h2>
|
||
</div>
|
||
<button id="ai-close" class="icon-button" aria-label="Close AI panel">
|
||
<img src="icons/x.svg" alt="">
|
||
</button>
|
||
</div>
|
||
<p class="panel-description">
|
||
Prompts are inspected before reaching your approved model. Page content is shared only when you choose.
|
||
</p>
|
||
<div id="conversation" aria-live="polite">
|
||
<div class="empty-chat">
|
||
<img src="icons/sparkles.svg" alt="">
|
||
<h3>
|
||
Make room for better work.
|
||
</h3>
|
||
<p>
|
||
Ask a question, draft an idea, or inspect a document locally.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<form id="ai-form">
|
||
<label class="visually-hidden" for="prompt">
|
||
Prompt
|
||
</label>
|
||
<textarea id="prompt" placeholder="Ask your company AI…" maxlength="100000">
|
||
</textarea>
|
||
<div class="composer-footer">
|
||
<span>
|
||
Policy checked
|
||
</span>
|
||
<button id="send" type="submit">
|
||
Send
|
||
<img src="icons/arrow-up.svg" alt="">
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</aside>
|
||
|
||
<!-- Local password-vault UI: passwords remain masked and never rendered in lists. -->
|
||
<aside id="vault" hidden>
|
||
<div class="panel-title">
|
||
<div>
|
||
<p class="eyebrow">
|
||
PRIVATE TO THIS DEVICE
|
||
</p>
|
||
<h2>
|
||
Passwords
|
||
</h2>
|
||
</div>
|
||
<button id="vault-close" class="icon-button" aria-label="Close passwords">
|
||
<img src="icons/x.svg" alt="">
|
||
</button>
|
||
</div>
|
||
<p id="vault-description" class="panel-description">
|
||
Unlock your encrypted vault to use a saved login.
|
||
</p>
|
||
<p id="vault-error" role="status" aria-live="polite">
|
||
</p>
|
||
<form id="vault-access">
|
||
<label id="master-label" for="vault-master">
|
||
Master password
|
||
</label>
|
||
<input id="vault-master" type="password" autocomplete="current-password" minlength="16" maxlength="1024" required>
|
||
<label id="vault-confirm-label" for="vault-confirm" hidden>
|
||
Confirm master password
|
||
</label>
|
||
<input id="vault-confirm" type="password" autocomplete="new-password" minlength="16" maxlength="1024" hidden>
|
||
<button id="vault-access-submit" type="submit">
|
||
Unlock vault
|
||
</button>
|
||
<small id="vault-access-note">
|
||
Use at least 16 characters. Your master password is never saved.
|
||
</small>
|
||
</form>
|
||
<div id="vault-open" hidden>
|
||
<div class="vault-actions">
|
||
<span id="vault-state">
|
||
Unlocked
|
||
</span>
|
||
<button id="vault-lock" class="secondary">
|
||
Lock
|
||
</button>
|
||
</div>
|
||
<div id="vault-list">
|
||
</div>
|
||
<details id="vault-add">
|
||
<summary>
|
||
Add a login
|
||
</summary>
|
||
<form id="vault-save">
|
||
<label>
|
||
Website origin
|
||
<input id="vault-origin" type="url" placeholder="https://company.example" required autocomplete="off" maxlength="4096">
|
||
</label>
|
||
<label>
|
||
Label
|
||
<input id="vault-label" placeholder="Work account" maxlength="100" autocomplete="off">
|
||
</label>
|
||
<label>
|
||
Username
|
||
<input id="vault-username" autocomplete="off" maxlength="512">
|
||
</label>
|
||
<label>
|
||
Password
|
||
<input id="vault-password" type="password" autocomplete="new-password" maxlength="1024" required>
|
||
</label>
|
||
<div class="actions">
|
||
<button id="vault-generate" type="button" class="secondary">
|
||
Generate
|
||
</button>
|
||
<button id="vault-save-submit" type="submit">
|
||
Save login
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</details>
|
||
<small>
|
||
Fill login fills only. Prepare approved login also permits one approved POST for 15 seconds. Neither button submits the form.
|
||
</small>
|
||
</div>
|
||
</aside>
|
||
<dialog id="bookmark-editor" aria-labelledby="bookmark-editor-title">
|
||
<form id="bookmark-form">
|
||
<h2 id="bookmark-editor-title">Add bookmark</h2>
|
||
<p class="bookmark-notice">Bookmarks are managed by your company. Administrators may access them when enabled by policy.</p>
|
||
<label>Title<input id="bookmark-title" maxlength="120" required autocomplete="off"></label>
|
||
<label>Website URL<input id="bookmark-url" type="url" maxlength="2048" required autocomplete="off"></label>
|
||
<label>Folder<input id="bookmark-folder" maxlength="80" autocomplete="off"></label>
|
||
<p id="bookmark-editor-error" role="alert"></p>
|
||
<div class="actions"><button id="bookmark-cancel" type="button" class="secondary">Cancel</button><button id="bookmark-save" type="submit">Save bookmark</button></div>
|
||
</form>
|
||
</dialog>
|
||
<script defer src="renderer.js">
|
||
</script>
|
||
<dialog id="bookmark-manager" aria-labelledby="bookmark-manager-title">
|
||
<header class="manager-header"><div><p class="manager-eyebrow">YOUR LIBRARY</p><h2 id="bookmark-manager-title">Bookmarks</h2></div><button id="bookmark-manager-close" class="icon-button" aria-label="Close bookmark manager">×</button></header>
|
||
<div class="manager-toolbar"><input id="bookmark-search" type="search" placeholder="Search titles, websites or folders" aria-label="Search bookmarks"><button id="manager-add">Add bookmark</button><button id="manager-ai" disabled>Organize with AI</button></div>
|
||
<p id="manager-policy" class="bookmark-notice"></p><div id="manager-list" class="manager-list"></div><p id="manager-empty" hidden>No matching bookmarks.</p><p id="manager-error" role="alert"></p>
|
||
<section id="manager-proposal" hidden aria-label="Organization preview"><h3>Review suggested changes</h3><p>Only your selected bookmarks change. Company bookmarks are managed centrally. Your approved model receives only personal titles and website domains.</p><div id="manager-diff"></div><button id="manager-apply">Apply changes</button><button id="manager-discard">Discard</button></section>
|
||
</dialog>
|
||
</body>
|
||
</html>
|
||
|
||
|