125 lines
5.2 KiB
HTML
125 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="popup.css" />
|
|
</head>
|
|
<body>
|
|
<header class="head">
|
|
<!--
|
|
The brand line owns its own row: mark plus title and nothing else, so
|
|
the title never has to compete with a display name for width and never
|
|
wraps, in any of the fifteen locales.
|
|
-->
|
|
<div class="brand">
|
|
<img class="mark" src="icons/icon-48.png" alt="" aria-hidden="true" />
|
|
<h1 data-i18n="extName">OpenPencil</h1>
|
|
</div>
|
|
<!--
|
|
The account row, on the line below. Signed out it is one quiet text
|
|
button; signed in it is an avatar, a name, a region badge and a
|
|
sign-out control. It is built by `popup.js` rather than written out
|
|
here because both states are data-driven and every string in them is
|
|
user- or server-supplied — assembling it with `textContent` is what
|
|
guarantees no remote value is ever parsed as markup. `hidden` until the
|
|
first render so a checkout with no core does not show an empty slot.
|
|
-->
|
|
<div id="account" class="account" hidden></div>
|
|
</header>
|
|
|
|
<div class="actions">
|
|
<button id="capture" class="btn btn-primary" type="button">
|
|
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M3 8V5a2 2 0 0 1 2-2h3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M8 21H5a2 2 0 0 1-2-2v-3"
|
|
/>
|
|
</svg>
|
|
<span data-i18n="captureButton">Capture full page</span>
|
|
</button>
|
|
|
|
<div class="actions-row">
|
|
<button id="pick" class="btn btn-quiet" type="button">
|
|
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M12.5 3H5a2 2 0 0 0-2 2v7.5M3 17.5V19a2 2 0 0 0 2 2h1.5M21 12.5V5a2 2 0 0 0-2-2h-1.5"
|
|
/>
|
|
<path d="m12 12 7.6 2.9-3.3 1.4-1.4 3.3z" />
|
|
</svg>
|
|
<span data-i18n="pickButton">Capture element</span>
|
|
</button>
|
|
<button id="download" class="btn btn-quiet" type="button">
|
|
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 3v11m0 0 4-4m-4 4-4-4M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
|
|
</svg>
|
|
<span data-i18n="downloadButton">Download .op</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="status" class="status" data-tone="idle" role="status" aria-live="polite">
|
|
<p id="status-message" class="status-message"></p>
|
|
<p id="status-detail" class="status-detail" hidden></p>
|
|
</section>
|
|
|
|
<details class="settings">
|
|
<summary>
|
|
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M4 7h9M19 7h1M4 17h5M15 17h5" />
|
|
<circle cx="16" cy="7" r="2.4" />
|
|
<circle cx="12" cy="17" r="2.4" />
|
|
</svg>
|
|
<span class="settings-label" data-i18n="endpointLabel">OpenPencil endpoint</span>
|
|
<span id="endpoint-summary" class="settings-value"></span>
|
|
<svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="m8 10 4 4 4-4" />
|
|
</svg>
|
|
</summary>
|
|
<div class="settings-body">
|
|
<input
|
|
id="endpoint"
|
|
type="text"
|
|
spellcheck="false"
|
|
autocomplete="off"
|
|
placeholder="127.0.0.1:3100"
|
|
data-i18n-aria="endpointLabel"
|
|
/>
|
|
<p class="hint" data-i18n="endpointHint">
|
|
Desktop app: Settings → MCP → start the server (default port 3100).
|
|
</p>
|
|
<!--
|
|
The language row. It lives beside the endpoint because both are
|
|
"set once and forget" settings, and neither belongs in the popup's
|
|
three-button main surface. Options are filled in by popup.js from
|
|
i18n.js's SUPPORTED_LOCALES so the list has exactly one definition.
|
|
-->
|
|
<div class="settings-row">
|
|
<label class="settings-row-label" for="locale" data-i18n="languageLabel">Language</label>
|
|
<select id="locale" class="select" data-i18n-aria="languageLabel"></select>
|
|
</div>
|
|
<!--
|
|
The account region. It decides which hub the sign-in tab and the
|
|
session probe address, mirroring the product's own built-in cn /
|
|
global pair. It lives beside the language for the same reason: set
|
|
once, then forgotten.
|
|
-->
|
|
<div class="settings-row">
|
|
<label class="settings-row-label" for="region" data-i18n="regionLabel">Region</label>
|
|
<select id="region" class="select" data-i18n-aria="regionLabel"></select>
|
|
</div>
|
|
<!--
|
|
Where a capture goes. Hidden until a session exists, because signed
|
|
out there is exactly one destination and a picker with one option
|
|
is noise. Signed in, both destinations are selectable: this
|
|
computer's OpenPencil, or the hub's per-user snapshot inbox.
|
|
-->
|
|
<div class="settings-row" id="delivery-row" hidden>
|
|
<label class="settings-row-label" for="delivery" data-i18n="deliveryLabel">Send to</label>
|
|
<select id="delivery" class="select" data-i18n-aria="deliveryLabel"></select>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<script type="module" src="popup.js"></script>
|
|
</body>
|
|
</html>
|