482 lines
17 KiB
HTML
482 lines
17 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'; 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="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">
|
|
<p class="start-eyebrow">
|
|
S BROWSER
|
|
</p>
|
|
<h1>
|
|
Your space to explore.
|
|
</h1>
|
|
<section class="start-section">
|
|
<div class="section-title">
|
|
<h2>
|
|
Favorites
|
|
</h2>
|
|
<span>
|
|
Keep what matters close.
|
|
</span>
|
|
</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>
|
|
Logins fill only when you click Fill. Automatic page-load filling is disabled.
|
|
</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 src="renderer.js">
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|