2026-09-21 23:39:32 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>VPN</title>
|
|
|
|
|
<style>
|
|
|
|
|
:root { color-scheme: light dark;
|
|
|
|
|
--bg:#0e131c; --panel:#141a24; --panel2:#191f2b; --line:rgba(255,255,255,.09);
|
|
|
|
|
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#0ac18e; --danger:#ff5b5b; }
|
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
|
|
|
:root { --bg:#f8faff; --panel:#ffffff; --panel2:#eff3fb; --line:rgba(0,0,0,.10);
|
|
|
|
|
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; }
|
|
|
|
|
}
|
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
|
html, body { margin: 0; height: 100%; }
|
|
|
|
|
body { background: var(--bg); color: var(--ink); font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; display: flex; flex-direction: column; }
|
|
|
|
|
header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
|
|
|
|
|
header h1 { margin: 0; font-size: 14px; font-weight: 600; }
|
|
|
|
|
header .plat { margin-left: auto; color: var(--dim); font-size: 11px; }
|
|
|
|
|
|
|
|
|
|
.body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
|
|
|
|
|
|
|
|
|
|
.big {
|
|
|
|
|
border: 1px solid var(--line); background: var(--panel); border-radius: 14px;
|
|
|
|
|
padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
|
|
|
|
|
font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
|
|
|
|
|
background: rgba(139,152,169,.14); color: var(--mut); }
|
|
|
|
|
.pill.on { color: #0b0e14; background: var(--acid); }
|
|
|
|
|
.pill.err { color: #fff; background: var(--danger); }
|
|
|
|
|
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
|
|
|
|
|
|
|
|
.toggle {
|
|
|
|
|
border: none; padding: 14px 28px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 15px;
|
|
|
|
|
cursor: pointer; letter-spacing: .04em;
|
|
|
|
|
background: var(--acid); color: #0b0e14; min-width: 190px;
|
|
|
|
|
}
|
|
|
|
|
.toggle:disabled { opacity: .5; cursor: default; }
|
|
|
|
|
.toggle.off { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
|
|
|
|
|
|
|
|
|
|
.progress { width: 100%; height: 4px; background: var(--panel2); border-radius: 999px; overflow: hidden; margin-top: 4px; }
|
|
|
|
|
.progress > span { display: block; height: 100%; background: var(--acid); width: 0%; transition: width .18s ease; }
|
|
|
|
|
.hint { color: var(--dim); font-size: 11.5px; text-align: center; }
|
|
|
|
|
.hint.err { color: var(--danger); }
|
|
|
|
|
|
|
|
|
|
.card { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
|
.card h2 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
|
|
|
|
|
.card p { margin: 0; color: var(--mut); font-size: 12px; }
|
|
|
|
|
|
|
|
|
|
.row { display: flex; gap: 8px; align-items: center; }
|
|
|
|
|
.row textarea, .row input[type=text] {
|
|
|
|
|
flex: 1; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
|
|
|
|
|
border-radius: 8px; padding: 8px 10px; font: 12px/1.5 ui-monospace, monospace; resize: vertical;
|
|
|
|
|
}
|
|
|
|
|
button.btn { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
|
|
|
|
border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 12px; cursor: pointer; }
|
|
|
|
|
button.btn:hover { border-color: rgb(from var(--acid) r g b / .55); }
|
|
|
|
|
button.btn.small { padding: 4px 9px; font-size: 11.5px; }
|
|
|
|
|
|
|
|
|
|
.opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
|
|
|
|
|
.opt label { color: var(--ink); font-size: 12.5px; }
|
|
|
|
|
.opt .sub { color: var(--dim); font-size: 11.5px; }
|
|
|
|
|
.opt input[type=checkbox] { transform: scale(1.15); accent-color: var(--acid); }
|
|
|
|
|
|
|
|
|
|
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 4px 12px; font-size: 11.5px; }
|
|
|
|
|
.kv b { font-weight: 600; color: var(--mut); }
|
|
|
|
|
.kv code { font: 11px ui-monospace, monospace; color: var(--ink); overflow-wrap: anywhere; }
|
|
|
|
|
|
|
|
|
|
.disclosure { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 10px 12px; font-size: 12px; }
|
|
|
|
|
.disclosure summary { cursor: pointer; color: var(--mut); font-weight: 500; list-style: none; }
|
|
|
|
|
.disclosure summary::-webkit-details-marker { display: none; }
|
|
|
|
|
.disclosure[open] { padding-bottom: 14px; }
|
|
|
|
|
.disclosure[open] > *:not(summary) { margin-top: 10px; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>VPN</h1>
|
|
|
|
|
<span class="plat" id="platform">—</span>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="body">
|
|
|
|
|
|
|
|
|
|
<div class="big">
|
|
|
|
|
<span class="pill" id="status"><span class="dot"></span><span id="statusText">loading…</span></span>
|
|
|
|
|
<button class="toggle off" id="toggle" disabled>Turn on</button>
|
|
|
|
|
<div class="progress" id="progressBar" hidden><span id="progress"></span></div>
|
|
|
|
|
<div class="hint" id="hint"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
2026-09-22 19:56:01 +02:00
|
|
|
<h2>Server</h2>
|
|
|
|
|
<p>Pick a Silent Mode endpoint, or point at your own. Server credentials stay on this device;
|
|
|
|
|
the panel only sees which one you picked.</p>
|
2026-09-21 23:39:32 +02:00
|
|
|
<div class="row">
|
2026-09-22 19:56:01 +02:00
|
|
|
<select id="serverSel" style="flex:1;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit"></select>
|
|
|
|
|
<button class="btn small" id="refreshServers" title="Fetch the latest server list">↻</button>
|
2026-09-21 23:39:32 +02:00
|
|
|
</div>
|
2026-09-22 19:56:01 +02:00
|
|
|
<div class="hint" id="serverHint" style="text-align:left"></div>
|
|
|
|
|
|
|
|
|
|
<div id="customBlock" hidden>
|
|
|
|
|
<div class="row" style="margin-top:8px">
|
|
|
|
|
<textarea id="vless" rows="3" placeholder="vless://uuid@host:443?type=tcp&security=reality&pbk=…&sni=…"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" style="justify-content:flex-end">
|
|
|
|
|
<button class="btn small" id="paste">Paste</button>
|
|
|
|
|
<button class="btn small" id="save">Save</button>
|
|
|
|
|
</div>
|
2026-09-21 23:39:32 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
vpn 0.1.2 → 0.1.3: subscription import + landing page mockup
Addon:
- Paste any https:// URL that returns a list of vless:// (either
newline-separated or base64) and the extension fetches, decodes,
parses, and adds every server to the dropdown. The full vless URL
never leaves the panel — the addon holds it in its own storage and
passes an opaque "sub-<hash>" id back for selection.
- Subscription CRUD on the addon side (listSubscriptions,
addSubscription, refreshSubscription, removeSubscription). A refresh
is a no-op inside the 6-hour TTL to avoid pounding the provider.
- Merges subscription servers with the baked-in three and gateway
overlay by id; the dropdown groups them under one banner.
Site:
- silentmode.st/vpn landing page: three-plan grid (Free, Pro at $1/mo
BCH, Max at $4/mo BCH), how-it-works four-step block, "the three
servers" strip with per-tier availability, why-this-VPN cards, FAQ.
Priced in USD, paid in BCH via the oracle at pay-time — same pattern
as the marketplace's USD-listing covenant, no reintroduction of
fiat/card processors.
2026-09-22 20:59:50 +02:00
|
|
|
<div class="card">
|
|
|
|
|
<h2>Subscription</h2>
|
|
|
|
|
<p>Paste an HTTPS URL that returns a list of <code>vless://</code> servers.
|
|
|
|
|
The URL and its servers stay on this device.</p>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<input id="subUrl" type="url" placeholder="https://provider.example/subscribe/…" style="flex:1;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:8px 10px;font:12px/1.5 ui-monospace,monospace"/>
|
|
|
|
|
<button class="btn small" id="subAdd">Add</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="subList" class="kv" style="grid-template-columns:1fr auto auto;gap:6px 8px;font-size:12px"></div>
|
|
|
|
|
<div class="hint" id="subHint" style="text-align:left"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-09-21 23:39:32 +02:00
|
|
|
<details class="disclosure">
|
|
|
|
|
<summary>Advanced</summary>
|
|
|
|
|
|
|
|
|
|
<div class="kv" id="details">
|
|
|
|
|
<b>Platform</b><code id="d-platform">—</code>
|
|
|
|
|
<b>Engine</b><code id="d-engine">sing-box</code>
|
|
|
|
|
<b>Binary</b><code id="d-binary">—</code>
|
|
|
|
|
<b>SOCKS5</b><code id="d-socks">—</code>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="opt" style="margin-top:10px">
|
|
|
|
|
<div>
|
|
|
|
|
<label for="autoOn">Turn on at browser start</label>
|
|
|
|
|
<div class="sub">Restore the VPN as soon as Theseus launches, if it was on when you last quit.</div>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="checkbox" id="autoOn">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row" style="justify-content:flex-end;margin-top:6px">
|
|
|
|
|
<button class="btn small" id="refreshBinary">Re-download binary</button>
|
|
|
|
|
<button class="btn small" id="clearCache">Clear cache</button>
|
|
|
|
|
</div>
|
|
|
|
|
</details>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const SM = () => window.silentmode;
|
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
|
|
|
|
|
|
const toggle = $("toggle");
|
|
|
|
|
const statusEl = $("status");
|
|
|
|
|
const statusTx = $("statusText");
|
|
|
|
|
const hint = $("hint");
|
|
|
|
|
const progress = $("progress");
|
|
|
|
|
const progressBar = $("progressBar");
|
|
|
|
|
const platEl = $("platform");
|
|
|
|
|
const dPlat = $("d-platform");
|
|
|
|
|
const dBinary = $("d-binary");
|
|
|
|
|
const dSocks = $("d-socks");
|
|
|
|
|
|
|
|
|
|
let pending = false;
|
|
|
|
|
let currentVless = "";
|
2026-09-22 19:56:01 +02:00
|
|
|
let selectedServerId = "";
|
|
|
|
|
let serverCatalog = [];
|
2026-09-21 23:39:32 +02:00
|
|
|
|
2026-09-22 19:56:01 +02:00
|
|
|
const CUSTOM_ID = "__custom";
|
|
|
|
|
|
|
|
|
|
async function loadSelection() {
|
|
|
|
|
try { selectedServerId = await SM().storage.get("serverId", "") || ""; } catch { selectedServerId = ""; }
|
|
|
|
|
try { currentVless = await SM().storage.get("vless", "") || ""; } catch { currentVless = ""; }
|
2026-09-21 23:39:32 +02:00
|
|
|
$("vless").value = currentVless;
|
|
|
|
|
}
|
2026-09-22 19:56:01 +02:00
|
|
|
async function saveSelection() {
|
|
|
|
|
try { await SM().storage.set("serverId", selectedServerId); } catch {}
|
|
|
|
|
}
|
2026-09-21 23:39:32 +02:00
|
|
|
async function saveEndpoint() {
|
|
|
|
|
currentVless = $("vless").value.trim();
|
|
|
|
|
try { await SM().storage.set("vless", currentVless); } catch {}
|
|
|
|
|
render(await SM().invoke("status", {}));
|
|
|
|
|
}
|
2026-09-22 19:56:01 +02:00
|
|
|
|
|
|
|
|
function renderServerDropdown(servers) {
|
|
|
|
|
serverCatalog = Array.isArray(servers) ? servers : [];
|
|
|
|
|
const sel = $("serverSel");
|
|
|
|
|
const prev = sel.value || selectedServerId;
|
|
|
|
|
sel.innerHTML = "";
|
|
|
|
|
if (serverCatalog.length) {
|
|
|
|
|
const group = document.createElement("optgroup");
|
|
|
|
|
group.label = "Silent Mode servers";
|
|
|
|
|
for (const s of serverCatalog) {
|
|
|
|
|
const opt = document.createElement("option");
|
|
|
|
|
opt.value = s.id;
|
|
|
|
|
opt.textContent = `${s.flag || "🌐"} ${s.label || s.id}${s.status === "ready" ? "" : " · " + s.status}`;
|
|
|
|
|
opt.disabled = s.status !== "ready";
|
|
|
|
|
group.appendChild(opt);
|
|
|
|
|
}
|
|
|
|
|
sel.appendChild(group);
|
|
|
|
|
}
|
|
|
|
|
const custom = document.createElement("option");
|
|
|
|
|
custom.value = CUSTOM_ID;
|
|
|
|
|
custom.textContent = "⚙️ Custom vless:// URL";
|
|
|
|
|
sel.appendChild(custom);
|
|
|
|
|
// Restore the previous selection if it survived the refresh.
|
|
|
|
|
if ([...sel.options].some((o) => o.value === prev)) sel.value = prev;
|
|
|
|
|
else if (currentVless) sel.value = CUSTOM_ID;
|
|
|
|
|
else if (serverCatalog.find((s) => s.status === "ready")) sel.value = serverCatalog.find((s) => s.status === "ready").id;
|
|
|
|
|
selectedServerId = sel.value;
|
|
|
|
|
onSelectionChanged();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onSelectionChanged() {
|
|
|
|
|
const isCustom = selectedServerId === CUSTOM_ID;
|
|
|
|
|
$("customBlock").hidden = !isCustom;
|
|
|
|
|
const hit = serverCatalog.find((s) => s.id === selectedServerId);
|
|
|
|
|
const hint = $("serverHint");
|
|
|
|
|
if (isCustom) {
|
|
|
|
|
hint.className = "hint"; hint.textContent = currentVless ? "" : "Paste a vless:// URL below.";
|
|
|
|
|
} else if (hit && hit.status !== "ready") {
|
|
|
|
|
hint.className = "hint err"; hint.textContent = `${hit.label || hit.id}: ${hit.status}`;
|
|
|
|
|
} else {
|
|
|
|
|
hint.className = "hint"; hint.textContent = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-09-21 23:39:32 +02:00
|
|
|
async function loadAuto() {
|
|
|
|
|
try { $("autoOn").checked = !!(await SM().storage.get("autoOn", false)); } catch {}
|
|
|
|
|
}
|
|
|
|
|
async function saveAuto() {
|
|
|
|
|
try { await SM().storage.set("autoOn", $("autoOn").checked); } catch {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function render(s) {
|
|
|
|
|
if (!s) return;
|
|
|
|
|
platEl.textContent = s.platform;
|
|
|
|
|
dPlat.textContent = s.platform;
|
|
|
|
|
dBinary.textContent = s.binaryReady
|
|
|
|
|
? `sing-box ${s.binaryVersion || "?"} (cached)`
|
|
|
|
|
: (s.binaryError || "not downloaded");
|
|
|
|
|
dSocks.textContent = s.running ? `127.0.0.1:${s.socksPort}` : "off";
|
2026-09-22 19:56:01 +02:00
|
|
|
// Refresh the dropdown from the latest catalog snapshot. renderServerDropdown
|
|
|
|
|
// is a no-op when the id list hasn't changed since the last paint.
|
|
|
|
|
if (Array.isArray(s.servers)) renderServerDropdown(s.servers);
|
2026-09-21 23:39:32 +02:00
|
|
|
|
|
|
|
|
if (s.running) {
|
|
|
|
|
statusEl.className = "pill on"; statusTx.textContent = "connected";
|
|
|
|
|
toggle.className = "toggle"; toggle.textContent = "Turn off"; toggle.disabled = pending;
|
|
|
|
|
hint.className = "hint"; hint.textContent = "";
|
|
|
|
|
progressBar.hidden = true;
|
|
|
|
|
} else if (s.downloadPct > 0 && s.downloadPct < 100 && pending) {
|
|
|
|
|
statusEl.className = "pill"; statusTx.textContent = "downloading";
|
|
|
|
|
toggle.textContent = "Preparing…"; toggle.disabled = true;
|
|
|
|
|
progressBar.hidden = false;
|
|
|
|
|
progress.style.width = `${s.downloadPct}%`;
|
|
|
|
|
hint.className = "hint"; hint.textContent = `sing-box · ${s.downloadPct}%`;
|
|
|
|
|
} else if (s.binaryError) {
|
|
|
|
|
statusEl.className = "pill err"; statusTx.textContent = "unavailable";
|
|
|
|
|
toggle.className = "toggle off"; toggle.textContent = "Turn on"; toggle.disabled = true;
|
|
|
|
|
hint.className = "hint err"; hint.textContent = s.binaryError;
|
|
|
|
|
progressBar.hidden = true;
|
|
|
|
|
} else {
|
|
|
|
|
statusEl.className = "pill"; statusTx.textContent = "off";
|
|
|
|
|
toggle.className = "toggle off"; toggle.textContent = "Turn on";
|
2026-09-22 19:56:01 +02:00
|
|
|
const readyServer = serverCatalog.find((sv) => sv.id === selectedServerId && sv.status === "ready");
|
|
|
|
|
const canRun = (selectedServerId === CUSTOM_ID && !!currentVless) || !!readyServer;
|
|
|
|
|
toggle.disabled = pending || !canRun;
|
2026-09-21 23:39:32 +02:00
|
|
|
hint.className = "hint";
|
2026-09-22 19:56:01 +02:00
|
|
|
if (!canRun) {
|
|
|
|
|
hint.textContent = selectedServerId === CUSTOM_ID
|
|
|
|
|
? "Paste a vless:// URL below to enable the toggle."
|
|
|
|
|
: "Pick a server (or Custom) to enable the toggle.";
|
|
|
|
|
} else {
|
|
|
|
|
hint.textContent = "";
|
|
|
|
|
}
|
2026-09-21 23:39:32 +02:00
|
|
|
progressBar.hidden = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (s.lastError && !s.running) {
|
|
|
|
|
hint.className = "hint err"; hint.textContent = s.lastError;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function tick() {
|
|
|
|
|
try { render(await SM().invoke("status", {})); } catch {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggle.addEventListener("click", async () => {
|
|
|
|
|
if (pending) return;
|
|
|
|
|
pending = true;
|
|
|
|
|
const s = await SM().invoke("status", {});
|
|
|
|
|
try {
|
|
|
|
|
if (s.running) {
|
|
|
|
|
render(await SM().invoke("turnOff", {}));
|
2026-09-22 19:56:01 +02:00
|
|
|
} else if (selectedServerId === CUSTOM_ID) {
|
|
|
|
|
if (!currentVless) throw new Error("paste a vless:// URL first");
|
2026-09-21 23:39:32 +02:00
|
|
|
render(await SM().invoke("turnOn", { vless: currentVless }));
|
2026-09-22 19:56:01 +02:00
|
|
|
} else {
|
|
|
|
|
render(await SM().invoke("turnOn", { serverId: selectedServerId }));
|
2026-09-21 23:39:32 +02:00
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
hint.className = "hint err"; hint.textContent = e?.message || String(e);
|
|
|
|
|
statusEl.className = "pill err"; statusTx.textContent = "failed";
|
|
|
|
|
progressBar.hidden = true; toggle.disabled = false;
|
|
|
|
|
toggle.className = "toggle off"; toggle.textContent = "Turn on";
|
|
|
|
|
} finally {
|
|
|
|
|
pending = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2026-09-22 19:56:01 +02:00
|
|
|
$("serverSel").addEventListener("change", async () => {
|
|
|
|
|
selectedServerId = $("serverSel").value;
|
|
|
|
|
onSelectionChanged();
|
|
|
|
|
await saveSelection();
|
|
|
|
|
render(await SM().invoke("status", {}));
|
|
|
|
|
});
|
|
|
|
|
$("refreshServers").addEventListener("click", async () => {
|
|
|
|
|
hint.className = "hint"; hint.textContent = "refreshing catalog…";
|
|
|
|
|
try { render(await SM().invoke("refreshServers", {})); }
|
|
|
|
|
catch (e) { hint.className = "hint err"; hint.textContent = e?.message || String(e); }
|
|
|
|
|
});
|
|
|
|
|
|
vpn 0.1.2 → 0.1.3: subscription import + landing page mockup
Addon:
- Paste any https:// URL that returns a list of vless:// (either
newline-separated or base64) and the extension fetches, decodes,
parses, and adds every server to the dropdown. The full vless URL
never leaves the panel — the addon holds it in its own storage and
passes an opaque "sub-<hash>" id back for selection.
- Subscription CRUD on the addon side (listSubscriptions,
addSubscription, refreshSubscription, removeSubscription). A refresh
is a no-op inside the 6-hour TTL to avoid pounding the provider.
- Merges subscription servers with the baked-in three and gateway
overlay by id; the dropdown groups them under one banner.
Site:
- silentmode.st/vpn landing page: three-plan grid (Free, Pro at $1/mo
BCH, Max at $4/mo BCH), how-it-works four-step block, "the three
servers" strip with per-tier availability, why-this-VPN cards, FAQ.
Priced in USD, paid in BCH via the oracle at pay-time — same pattern
as the marketplace's USD-listing covenant, no reintroduction of
fiat/card processors.
2026-09-22 20:59:50 +02:00
|
|
|
// ---- subscription import ----
|
|
|
|
|
async function renderSubList() {
|
|
|
|
|
const subs = await SM().invoke("listSubscriptions", {});
|
|
|
|
|
const host = document.getElementById("subList");
|
|
|
|
|
if (!subs.length) { host.innerHTML = ""; return; }
|
|
|
|
|
host.innerHTML = subs.map((s) => {
|
|
|
|
|
const url = s.url.replace(/"/g, """);
|
|
|
|
|
return `<div style="overflow-wrap:anywhere"><b style="color:var(--ink)">${s.label}</b><div style="color:var(--dim);font-size:11px">${s.count} servers · ${s.url}</div></div>
|
|
|
|
|
<button class="btn small" data-sub-refresh="${url}">↻</button>
|
|
|
|
|
<button class="btn small" data-sub-remove="${url}">✕</button>`;
|
|
|
|
|
}).join("");
|
|
|
|
|
host.querySelectorAll("[data-sub-refresh]").forEach((b) => b.addEventListener("click", async () => {
|
|
|
|
|
const subHint = document.getElementById("subHint");
|
|
|
|
|
subHint.className = "hint"; subHint.textContent = "refreshing…";
|
|
|
|
|
try {
|
|
|
|
|
const r = await SM().invoke("refreshSubscription", { url: b.dataset.subRefresh });
|
|
|
|
|
subHint.textContent = r.skipped ? "recent enough, skipped" : `${r.count} servers`;
|
|
|
|
|
render(r.snapshot);
|
|
|
|
|
renderSubList();
|
|
|
|
|
} catch (e) { subHint.className = "hint err"; subHint.textContent = e?.message || String(e); }
|
|
|
|
|
}));
|
|
|
|
|
host.querySelectorAll("[data-sub-remove]").forEach((b) => b.addEventListener("click", async () => {
|
|
|
|
|
const r = await SM().invoke("removeSubscription", { url: b.dataset.subRemove });
|
|
|
|
|
render(r.snapshot); renderSubList();
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
document.getElementById("subAdd").addEventListener("click", async () => {
|
|
|
|
|
const url = document.getElementById("subUrl").value.trim();
|
|
|
|
|
const subHint = document.getElementById("subHint");
|
|
|
|
|
if (!url) { subHint.className = "hint err"; subHint.textContent = "paste a URL first"; return; }
|
|
|
|
|
subHint.className = "hint"; subHint.textContent = "fetching…";
|
|
|
|
|
try {
|
|
|
|
|
const r = await SM().invoke("addSubscription", { url });
|
|
|
|
|
document.getElementById("subUrl").value = "";
|
|
|
|
|
subHint.className = "hint"; subHint.textContent = `added ${r.label} — ${r.count} servers`;
|
|
|
|
|
render(r.snapshot);
|
|
|
|
|
renderSubList();
|
|
|
|
|
} catch (e) { subHint.className = "hint err"; subHint.textContent = e?.message || String(e); }
|
|
|
|
|
});
|
|
|
|
|
|
2026-09-21 23:39:32 +02:00
|
|
|
$("save").addEventListener("click", saveEndpoint);
|
|
|
|
|
$("paste").addEventListener("click", async () => {
|
|
|
|
|
try { $("vless").value = await navigator.clipboard.readText(); } catch {}
|
|
|
|
|
});
|
|
|
|
|
$("autoOn").addEventListener("change", saveAuto);
|
|
|
|
|
|
|
|
|
|
$("refreshBinary").addEventListener("click", async () => {
|
|
|
|
|
pending = true;
|
|
|
|
|
try {
|
|
|
|
|
hint.className = "hint"; hint.textContent = "downloading…";
|
|
|
|
|
await SM().invoke("clearCache", {});
|
|
|
|
|
await SM().invoke("prepareBinary", {});
|
|
|
|
|
render(await SM().invoke("status", {}));
|
|
|
|
|
} catch (e) {
|
|
|
|
|
hint.className = "hint err"; hint.textContent = e?.message || String(e);
|
|
|
|
|
} finally { pending = false; }
|
|
|
|
|
});
|
|
|
|
|
$("clearCache").addEventListener("click", async () => {
|
|
|
|
|
render(await SM().invoke("clearCache", {}));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Live updates from index.js — download progress, spawn crashes, etc.
|
|
|
|
|
try {
|
|
|
|
|
window.silentmode.on?.("state", (s) => render(s));
|
|
|
|
|
} catch {}
|
|
|
|
|
|
|
|
|
|
(async () => {
|
2026-09-22 19:56:01 +02:00
|
|
|
await loadSelection();
|
2026-09-21 23:39:32 +02:00
|
|
|
await loadAuto();
|
|
|
|
|
render(await SM().invoke("status", {}));
|
vpn 0.1.2 → 0.1.3: subscription import + landing page mockup
Addon:
- Paste any https:// URL that returns a list of vless:// (either
newline-separated or base64) and the extension fetches, decodes,
parses, and adds every server to the dropdown. The full vless URL
never leaves the panel — the addon holds it in its own storage and
passes an opaque "sub-<hash>" id back for selection.
- Subscription CRUD on the addon side (listSubscriptions,
addSubscription, refreshSubscription, removeSubscription). A refresh
is a no-op inside the 6-hour TTL to avoid pounding the provider.
- Merges subscription servers with the baked-in three and gateway
overlay by id; the dropdown groups them under one banner.
Site:
- silentmode.st/vpn landing page: three-plan grid (Free, Pro at $1/mo
BCH, Max at $4/mo BCH), how-it-works four-step block, "the three
servers" strip with per-tier availability, why-this-VPN cards, FAQ.
Priced in USD, paid in BCH via the oracle at pay-time — same pattern
as the marketplace's USD-listing covenant, no reintroduction of
fiat/card processors.
2026-09-22 20:59:50 +02:00
|
|
|
renderSubList();
|
2026-09-22 19:56:01 +02:00
|
|
|
// Auto-on: if it was on before, try to bring it back with the last saved
|
|
|
|
|
// choice — server id if any, else custom vless. Silent failure is fine,
|
|
|
|
|
// the toggle stays in "off" and the hint carries the reason.
|
|
|
|
|
if ($("autoOn").checked) {
|
|
|
|
|
try {
|
|
|
|
|
if (selectedServerId === CUSTOM_ID && currentVless) {
|
|
|
|
|
render(await SM().invoke("turnOn", { vless: currentVless }));
|
|
|
|
|
} else if (selectedServerId && selectedServerId !== CUSTOM_ID) {
|
|
|
|
|
render(await SM().invoke("turnOn", { serverId: selectedServerId }));
|
|
|
|
|
}
|
|
|
|
|
} catch (e) { hint.className = "hint err"; hint.textContent = e?.message || String(e); }
|
2026-09-21 23:39:32 +02:00
|
|
|
}
|
|
|
|
|
// Periodic refresh for slow status changes (download bytes, unexpected
|
|
|
|
|
// sing-box exit). Cheap; runs only while the panel is visible.
|
|
|
|
|
setInterval(tick, 800);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|