mirror of https://github.com/ospab/ostp.git
310 lines
14 KiB
HTML
310 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>OSTP</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-root">
|
|
|
|
<!-- Ambient light blobs -->
|
|
<div class="ambient" aria-hidden="true">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
</div>
|
|
|
|
<!-- ── HOME SCREEN ──────────────────────────────────────────── -->
|
|
<div id="home-screen" class="screen active">
|
|
|
|
<!-- Top bar -->
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<div class="brand-dot" id="brand-dot"></div>
|
|
<span class="brand-name">OSTP</span>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<button id="btn-go-settings" class="icon-btn" aria-label="Settings">
|
|
<!-- Gear icon -->
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Center stage -->
|
|
<main class="stage">
|
|
|
|
<!-- Orbit rings -->
|
|
<div class="orbit-wrap" id="orbit-wrap">
|
|
<div class="orbit orbit-1"></div>
|
|
<div class="orbit orbit-2"></div>
|
|
|
|
<!-- Power button -->
|
|
<button id="btn-connect" class="power-btn" aria-label="Connect">
|
|
<div class="power-icon">
|
|
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18.36 6.64a9 9 0 1 1-12.73 0"/>
|
|
<line x1="12" y1="2" x2="12" y2="12"/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Status block -->
|
|
<div class="status-block">
|
|
<div id="status-text" class="status-label" data-i18n="status_disconnected">Disconnected</div>
|
|
<div id="uptime-text" class="status-sub" data-i18n="hint_tap">Tap to protect your traffic</div>
|
|
</div>
|
|
|
|
<!-- Connection info (shown when connected) -->
|
|
<div id="connection-info" class="connection-info hidden">
|
|
<div class="server-badge">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="8" rx="2"/>
|
|
<rect x="2" y="14" width="20" height="8" rx="2"/>
|
|
<line x1="6" y1="6" x2="6.01" y2="6"/>
|
|
<line x1="6" y1="18" x2="6.01" y2="18"/>
|
|
</svg>
|
|
<span id="server-badge-text">—</span>
|
|
</div>
|
|
|
|
<div class="ping-test-box">
|
|
<div class="ping-test-left">
|
|
<span class="ping-test-title">CONNECTION TEST</span>
|
|
<span id="ping-text-value" class="ping-test-value">Target Ping: -- ms</span>
|
|
</div>
|
|
<button id="btn-test-ping" class="ping-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
|
</svg>
|
|
<span>Test Ping</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Traffic metrics bar -->
|
|
<footer class="metrics-bar">
|
|
<div class="metric">
|
|
<div class="metric-icon down-icon">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 5v14M19 12l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
<div class="metric-body">
|
|
<span class="metric-label" data-i18n="download">Download</span>
|
|
<span id="metric-down" class="metric-value">0 B</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-sep"></div>
|
|
|
|
<div class="metric">
|
|
<div class="metric-icon up-icon">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 19V5M5 12l7-7 7 7"/>
|
|
</svg>
|
|
</div>
|
|
<div class="metric-body">
|
|
<span class="metric-label" data-i18n="upload">Upload</span>
|
|
<span id="metric-up" class="metric-value">0 B</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- ── SETTINGS SCREEN ──────────────────────────────────────── -->
|
|
<div id="settings-screen" class="screen">
|
|
|
|
<header class="topbar">
|
|
<button id="btn-back" class="icon-btn" aria-label="Back">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
</svg>
|
|
</button>
|
|
<span class="topbar-title" data-i18n="settings_title">Configuration</span>
|
|
<div style="width:36px"></div>
|
|
</header>
|
|
|
|
<div class="settings-body">
|
|
|
|
<!-- Quick import -->
|
|
<div class="import-row">
|
|
<input id="in-import-url"
|
|
class="import-input"
|
|
type="text"
|
|
data-i18n-placeholder="import_placeholder"
|
|
placeholder="Paste ostp:// share link..." />
|
|
<button id="btn-import-url" class="accent-btn" data-i18n="import_btn">Import</button>
|
|
</div>
|
|
|
|
<!-- Form card -->
|
|
<div class="card scrollable">
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-server" data-i18n="label_server">Server Address</label>
|
|
<input id="in-server" class="field-input" type="text" placeholder="host:port" spellcheck="false" />
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-key" data-i18n="label_key">Access Key</label>
|
|
<div class="input-wrap">
|
|
<input id="in-key" class="field-input has-icon" type="password" data-i18n-placeholder="ph_key" placeholder="Secure access key" spellcheck="false" />
|
|
<button class="peek-btn" id="btn-peek-key" tabindex="-1" aria-label="Show key">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-socks" data-i18n="label_socks">Local Proxy</label>
|
|
<input id="in-socks" class="field-input" type="text" placeholder="127.0.0.1:1088" />
|
|
</div>
|
|
|
|
<!-- Built-in DNS toggle -->
|
|
<div class="toggle-row">
|
|
<div class="toggle-text">
|
|
<span class="toggle-name" data-i18n="label_owndns">Built-in Server DNS</span>
|
|
<span class="toggle-hint" data-i18n="owndns_hint">Route DNS through the VPN server (10.1.0.1)</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="in-owndns" />
|
|
<span class="toggle-track">
|
|
<span class="toggle-thumb"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Custom DNS (hidden when built-in is ON) -->
|
|
<div class="field-group" id="group-custom-dns">
|
|
<label class="field-label" for="in-dns" data-i18n="label_dns">Custom DNS Server</label>
|
|
<input id="in-dns" class="field-input" type="text" placeholder="1.1.1.1" />
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-transport" data-i18n="label_transport">Transport Protocol</label>
|
|
<select id="in-transport" class="field-input">
|
|
<option value="udp">UDP (Default)</option>
|
|
<option value="uot">TCP (UoT)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-stealth-sni" data-i18n="label_sni">Stealth SNI</label>
|
|
<input id="in-stealth-sni" class="field-input" type="text" placeholder="www.microsoft.com" spellcheck="false" />
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-pbk" data-i18n="label_pbk">Reality PublicKey (pbk)</label>
|
|
<input id="in-pbk" class="field-input" type="text" placeholder="Leave empty to disable Reality" spellcheck="false" />
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-sid" data-i18n="label_sid">Reality ShortId (sid)</label>
|
|
<input id="in-sid" class="field-input" type="text" placeholder="Optional" spellcheck="false" />
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-mtu" data-i18n="label_mtu">MTU Size</label>
|
|
<input id="in-mtu" class="field-input" type="number" placeholder="1350" />
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-mux-sessions" data-i18n="label_mux_sessions">Mux Sessions</label>
|
|
<input id="in-mux-sessions" class="field-input" type="number" placeholder="1" />
|
|
</div>
|
|
|
|
<!-- Toggles -->
|
|
<div class="toggle-row">
|
|
<div class="toggle-text">
|
|
<span class="toggle-name" data-i18n="label_tun">TUN Mode</span>
|
|
<span class="toggle-hint" data-i18n="tun_hint">Route all system traffic</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="in-tun-mode" />
|
|
<span class="toggle-track">
|
|
<span class="toggle-thumb"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field-group" id="group-tun-stack">
|
|
<label class="field-label" for="in-tun-stack" data-i18n="label_tun_stack">TUN Stack</label>
|
|
<select id="in-tun-stack" class="field-input">
|
|
<option value="system">System (tun2socks)</option>
|
|
<option value="ostp">OSTP (Native)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="toggle-row">
|
|
<div class="toggle-text">
|
|
<span class="toggle-name" data-i18n="label_mux">Multiplexing (Mux)</span>
|
|
<span class="toggle-hint" data-i18n="mux_hint">Run multiple streams over one connection</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="in-mux-mode" />
|
|
<span class="toggle-track">
|
|
<span class="toggle-thumb"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="toggle-row">
|
|
<div class="toggle-text">
|
|
<span class="toggle-name" data-i18n="label_debug">Debug Logs</span>
|
|
<span class="toggle-hint" data-i18n="debug_hint">Verbose output</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="in-debug" />
|
|
<span class="toggle-track">
|
|
<span class="toggle-thumb"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Exclusions -->
|
|
<div class="section-head">
|
|
<span data-i18n="excl_title">Exclusions</span>
|
|
<span class="section-hint" data-i18n="excl_hint">one per line</span>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-ex-domains" data-i18n="excl_domains">Bypass Domains</label>
|
|
<textarea id="in-ex-domains" class="field-input mono" placeholder="example.com *.google.com" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-ex-ips" data-i18n="excl_ips">Bypass IPs / CIDR</label>
|
|
<textarea id="in-ex-ips" class="field-input mono" placeholder="192.168.1.0/24 10.0.0.1" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="in-ex-processes" data-i18n="excl_processes">Bypass Processes</label>
|
|
<textarea id="in-ex-processes" class="field-input mono" placeholder="chrome.exe firefox.exe" rows="2"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
|
|
</div>
|
|
<script type="module" src="main.js"></script>
|
|
</body>
|
|
</html>
|