62 lines
2.6 KiB
HTML
62 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Swyx Tab Bridge – Einstellungen</title>
|
||
<style>
|
||
:root { color-scheme: light dark; }
|
||
body { font: 13px/1.5 system-ui, sans-serif; margin: 0; padding: 16px; max-width: 420px; }
|
||
label { display: block; margin: 12px 0 4px; font-weight: 600; }
|
||
input[type="text"] { width: 100%; padding: 5px 6px; font: inherit; box-sizing: border-box; }
|
||
.hint { font-size: 11px; opacity: .75; margin-top: 3px; }
|
||
.check { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
|
||
.check label { margin: 0; font-weight: 400; }
|
||
button { font: inherit; padding: 5px 12px; margin-top: 16px; cursor: pointer; }
|
||
#saved { margin-left: 8px; color: #2ea043; font-size: 12px; }
|
||
|
||
/* Verbindungsanzeige – gleiche Farbgebung wie das Popup und das Badge */
|
||
.status {
|
||
border: 1px solid rgba(128, 128, 128, .35);
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
}
|
||
.status .head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
|
||
.dot { width: 10px; height: 10px; border-radius: 50%; background: #d1242f; flex: none; }
|
||
.dot.connected { background: #2ea043; }
|
||
.dot.connecting { background: #d29922; }
|
||
.status dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; }
|
||
.status dt { opacity: .7; }
|
||
.status dd { margin: 0; font-family: ui-monospace, monospace; word-break: break-all; }
|
||
.status .err { color: #d1242f; margin-top: 6px; min-height: 1em; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="status">
|
||
<div class="head"><span id="dot" class="dot"></span><span id="state">–</span></div>
|
||
<dl>
|
||
<dt>Server</dt><dd id="statusUrl">–</dd>
|
||
<dt>seit</dt><dd id="since">–</dd>
|
||
</dl>
|
||
<div class="err" id="statusErr"></div>
|
||
</div>
|
||
|
||
<label for="url">WebSocket-Server</label>
|
||
<input type="text" id="url" placeholder="ws://127.0.0.1:17655" spellcheck="false">
|
||
<div class="hint">Adresse des Swyx-Servers, zu dem sich das Add-on verbindet (ws:// oder wss://).</div>
|
||
|
||
<label for="token">Token (optional)</label>
|
||
<input type="text" id="token" placeholder="Shared Secret" spellcheck="false">
|
||
<div class="hint">Das Add-on meldet sich nach dem Verbindungsaufbau immer mit einer
|
||
<code>hello</code>-Nachricht an; ist hier ein Shared Secret gesetzt, geht es darin mit.</div>
|
||
|
||
<div class="check">
|
||
<input type="checkbox" id="autoConnect">
|
||
<label for="autoConnect">Automatisch verbinden und erneut versuchen</label>
|
||
</div>
|
||
|
||
<button id="save">Speichern</button><span id="saved"></span>
|
||
|
||
<script src="options.js"></script>
|
||
</body>
|
||
</html>
|