168 lines
5.9 KiB
HTML
168 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>BridgeSwarm – Settings</title>
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
padding: 1.5rem;
|
||
background: #1a1b26;
|
||
color: #c0caf5;
|
||
min-height: 100vh;
|
||
}
|
||
h1 { font-size: 1.35rem; margin: 0 0 0.5rem; color: #7aa2f7; }
|
||
.sub { font-size: 0.9rem; color: #565f89; margin-bottom: 1.5rem; }
|
||
section { margin-bottom: 1.5rem; }
|
||
section h2 {
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
color: #a9b1d6;
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
.field { margin-bottom: 1rem; }
|
||
.field label {
|
||
display: block;
|
||
font-size: 0.9rem;
|
||
color: #c0caf5;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.field .hint { font-size: 0.8rem; color: #565f89; margin-top: 0.25rem; }
|
||
input[type="text"],
|
||
input[type="number"] {
|
||
width: 100%;
|
||
max-width: 280px;
|
||
padding: 0.5rem 0.75rem;
|
||
border: 1px solid #3b4261;
|
||
border-radius: 6px;
|
||
background: #24283b;
|
||
color: #c0caf5;
|
||
font-size: 0.95rem;
|
||
}
|
||
input::placeholder { color: #565f89; }
|
||
input[type="number"]:invalid { border-color: #f7768e; }
|
||
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
|
||
input[type="checkbox"] {
|
||
width: 1.1rem;
|
||
height: 1.1rem;
|
||
accent-color: #7aa2f7;
|
||
cursor: pointer;
|
||
}
|
||
.checkbox-row label { margin-bottom: 0; cursor: pointer; }
|
||
.actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
|
||
button {
|
||
padding: 0.5rem 1rem;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
button.primary { background: #7aa2f7; color: #1a1b26; }
|
||
button.primary:hover { background: #89b4fa; }
|
||
button.secondary { background: #3b4261; color: #c0caf5; }
|
||
button.secondary:hover { background: #414868; }
|
||
.toast {
|
||
font-size: 0.9rem;
|
||
color: #9ece6a;
|
||
margin-left: 0.5rem;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.toast.show { opacity: 1; }
|
||
.toast.err { color: #f7768e; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>BridgeSwarm</h1>
|
||
<p class="sub">Extension settings. Changes apply to new swarms and requests.</p>
|
||
|
||
<p style="margin-bottom: 1.5rem;">
|
||
<a href="dashboard.html" target="_blank" style="color: #7aa2f7; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem;">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
|
||
<rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
|
||
</svg>
|
||
Open Dashboard →
|
||
</a>
|
||
</p>
|
||
|
||
<section>
|
||
<h2>Swarm defaults</h2>
|
||
<div class="field">
|
||
<label for="defaultAppName">Default app name</label>
|
||
<input type="text" id="defaultAppName" placeholder="bridge-swarm">
|
||
<p class="hint">Used when a page creates <code>new BridgeSwarm({})</code> without passing <code>appName</code>. Passed to Hyperswarm on the host.</p>
|
||
</div>
|
||
<div class="field">
|
||
<label for="defaultMaxPeers">Default max peers</label>
|
||
<input type="number" id="defaultMaxPeers" min="0" placeholder="0">
|
||
<p class="hint">Max peer connections per swarm when not set by the page. Use 0 for no limit.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Requests</h2>
|
||
<div class="field">
|
||
<label for="defaultRequestTimeoutMs">Default request timeout (ms)</label>
|
||
<input type="number" id="defaultRequestTimeoutMs" min="0" max="300000" step="1000" placeholder="0">
|
||
<p class="hint">If > 0, applied to <code>BridgeSwarm.request()</code> when the page doesn't pass <code>options.timeoutMs</code>. Use 0 for no default. Max 300000 (5 min).</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>API</h2>
|
||
<div class="field">
|
||
<label for="readyTimeoutMs">Default ready timeout (ms)</label>
|
||
<input type="number" id="readyTimeoutMs" min="0" max="60000" step="1000" placeholder="0">
|
||
<p class="hint">When <code>BridgeSwarm.ready()</code> is called, reject after this many ms if the API is not available. Use 0 to wait forever.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Injection</h2>
|
||
<div class="field">
|
||
<div class="checkbox-row">
|
||
<input type="checkbox" id="disableOnFileUrls" aria-describedby="fileUrlsHint">
|
||
<label for="disableOnFileUrls">Do not inject on file:// URLs</label>
|
||
</div>
|
||
<p class="hint" id="fileUrlsHint">Skip injecting BridgeSwarm on local HTML files. Turn on if you never use file:// or want to avoid extension prompts there.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Notifications</h2>
|
||
<div class="field">
|
||
<div class="checkbox-row">
|
||
<input type="checkbox" id="notifyOnDisconnect" aria-describedby="notifyHint">
|
||
<label for="notifyOnDisconnect">Show notification when host disconnects</label>
|
||
</div>
|
||
<p class="hint" id="notifyHint">When the native host disconnects, show a browser notification. Enabling may trigger a permission prompt.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Debug</h2>
|
||
<div class="field">
|
||
<div class="checkbox-row">
|
||
<input type="checkbox" id="debug" aria-describedby="debugHint">
|
||
<label for="debug">Debug mode</label>
|
||
</div>
|
||
<p class="hint" id="debugHint">When enabled, bridge-related events (e.g. host disconnect) are logged to the console for troubleshooting.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="actions">
|
||
<button type="button" class="primary" id="btnSave">Save</button>
|
||
<button type="button" class="secondary" id="btnReset">Reset to defaults</button>
|
||
<span class="toast" id="toast"></span>
|
||
</div>
|
||
|
||
<script src="options.js"></script>
|
||
</body>
|
||
</html>
|