131 lines
6.8 KiB
HTML
131 lines
6.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head><meta charset="utf-8"><title>Theseus — Settings</title>
|
||
|
|
<style>
|
||
|
|
:root{ color-scheme: dark; --bg:#0b0e14; --panel:#141a24; --panel2:#18202c; --line:rgba(255,255,255,.09);
|
||
|
|
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; }
|
||
|
|
*{box-sizing:border-box}
|
||
|
|
body{margin:0;min-height:100vh;background:radial-gradient(900px 480px at 50% -10%,#16202e,var(--bg));
|
||
|
|
color:var(--ink);font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
|
||
|
|
.wrap{max-width:720px;margin:0 auto;padding:2.6rem 1.4rem 4rem}
|
||
|
|
h1{font-size:1.6rem;margin:0 0 .2rem;letter-spacing:.3px}
|
||
|
|
h1 .g{color:var(--acid)}
|
||
|
|
.lede{color:var(--mut);margin:0 0 2rem;font-size:14px}
|
||
|
|
.group{margin:0 0 1.8rem}
|
||
|
|
.group h2{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 .7rem;padding-left:2px}
|
||
|
|
.row{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);
|
||
|
|
border-radius:12px;padding:15px 18px;margin-bottom:10px}
|
||
|
|
.row .txt{flex:1}
|
||
|
|
.row .t{font-weight:600;color:var(--ink)}
|
||
|
|
.row .d{color:var(--mut);font-size:13px;margin-top:2px}
|
||
|
|
.row.soon{opacity:.55}
|
||
|
|
/* toggle */
|
||
|
|
.sw{position:relative;width:46px;height:26px;flex:none;cursor:pointer}
|
||
|
|
.sw input{opacity:0;width:0;height:0}
|
||
|
|
.track{position:absolute;inset:0;background:#2b3444;border:1px solid var(--line);border-radius:999px;transition:.15s}
|
||
|
|
.knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8b98a9;transition:.15s}
|
||
|
|
.sw input:checked + .track{background:rgba(214,255,61,.25);border-color:#d6ff3d55}
|
||
|
|
.sw input:checked + .track .knob{transform:translateX(20px);background:var(--acid)}
|
||
|
|
.ctl{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
|
||
|
|
select,.ctl input{background:#1b2330;color:var(--ink);border:1px solid var(--line);border-radius:8px;
|
||
|
|
padding:7px 10px;font-size:13px;outline:none}
|
||
|
|
select:focus,.ctl input:focus{border-color:#4b7bec}
|
||
|
|
.ctl input{width:160px}
|
||
|
|
.note{color:var(--dim);font-size:12.5px;margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem}
|
||
|
|
.badge{display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
|
||
|
|
border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:8px}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div class="wrap">
|
||
|
|
<h1>⚙ Theseus <span class="g">Settings</span></h1>
|
||
|
|
<p class="lede">Changes apply immediately and are saved for next time.</p>
|
||
|
|
|
||
|
|
<div class="group">
|
||
|
|
<h2>Privacy</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">WebRTC leak protection</div>
|
||
|
|
<div class="d">Stops sites from discovering your real IP through WebRTC. Strongest with Tor on. On by default.</div></div>
|
||
|
|
<label class="sw"><input type="checkbox" id="webrtcProtect"><span class="track"><span class="knob"></span></span></label>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">Block camera</div>
|
||
|
|
<div class="d">Deny camera access by default — also hides your camera's name from fingerprinting.</div></div>
|
||
|
|
<label class="sw"><input type="checkbox" id="blockCamera"><span class="track"><span class="knob"></span></span></label>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">Block microphone</div>
|
||
|
|
<div class="d">Deny microphone access by default — also hides your mic's name from fingerprinting.</div></div>
|
||
|
|
<label class="sw"><input type="checkbox" id="blockMicrophone"><span class="track"><span class="knob"></span></span></label>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">Block location</div>
|
||
|
|
<div class="d">Deny geolocation requests by default.</div></div>
|
||
|
|
<label class="sw"><input type="checkbox" id="blockLocation"><span class="track"><span class="knob"></span></span></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="group">
|
||
|
|
<h2>General</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">Reopen tabs on launch</div>
|
||
|
|
<div class="d">Restore the tabs from your last session when Theseus starts.</div></div>
|
||
|
|
<label class="sw"><input type="checkbox" id="restoreSession"><span class="track"><span class="knob"></span></span></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="group">
|
||
|
|
<h2>Performance</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">Throttle inactive tabs</div>
|
||
|
|
<div class="d">Background and inactive tabs use far less CPU. Recommended.</div></div>
|
||
|
|
<label class="sw"><input type="checkbox" id="backgroundThrottle"><span class="track"><span class="knob"></span></span></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="group">
|
||
|
|
<h2>Anti-fingerprinting</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">Timezone</div>
|
||
|
|
<div class="d">What sites read via JavaScript (Intl / Date). <b>Hide</b> reports UTC; <b>Change</b> lets you set your own.</div></div>
|
||
|
|
<div class="ctl">
|
||
|
|
<select id="timezoneMode"><option value="show">Show real</option><option value="hide">Hide (UTC)</option><option value="change">Change…</option></select>
|
||
|
|
<input id="timezoneValue" placeholder="e.g. Europe/Berlin" hidden>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="txt"><div class="t">Language</div>
|
||
|
|
<div class="d">navigator.language and the Accept-Language header. <b>Hide</b> reports en-US; <b>Change</b> lets you set your own.</div></div>
|
||
|
|
<div class="ctl">
|
||
|
|
<select id="languageMode"><option value="show">Show real</option><option value="hide">Hide (en-US)</option><option value="change">Change…</option></select>
|
||
|
|
<input id="languageValue" placeholder="e.g. de-DE" hidden>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="note">Theseus is honest about its limits: these reduce tracking and hide your IP, but a custom
|
||
|
|
browser can still be fingerprinted. For maximum anonymity, use the Tor Browser.</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const C = window.cfg;
|
||
|
|
const KEYS = ["webrtcProtect", "blockCamera", "blockMicrophone", "blockLocation", "restoreSession", "backgroundThrottle"];
|
||
|
|
C.get().then((s) => {
|
||
|
|
for (const k of KEYS) {
|
||
|
|
const el = document.getElementById(k);
|
||
|
|
if (!el) continue;
|
||
|
|
el.checked = !!s[k];
|
||
|
|
el.addEventListener("change", () => C.set(k, el.checked));
|
||
|
|
}
|
||
|
|
// Show/Hide/Change selectors with a value field revealed on "change"
|
||
|
|
for (const [mode, val] of [["timezoneMode", "timezoneValue"], ["languageMode", "languageValue"]]) {
|
||
|
|
const m = document.getElementById(mode), v = document.getElementById(val);
|
||
|
|
m.value = s[mode] || "show";
|
||
|
|
v.value = s[val] || "";
|
||
|
|
v.hidden = m.value !== "change";
|
||
|
|
m.addEventListener("change", () => { C.set(mode, m.value); v.hidden = m.value !== "change"; });
|
||
|
|
v.addEventListener("change", () => C.set(val, v.value.trim()));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|