153 lines
6.9 KiB
HTML
153 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>kettuRay</title>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<!-- Custom title bar -->
|
|
<div class="titlebar" data-wails-drag>
|
|
<span class="titlebar-title">kettuRay <span class="titlebar-sub">by @khton</span></span>
|
|
<div class="titlebar-actions">
|
|
<button class="icon-btn" id="minimizeBtn" title="Minimize to tray">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
|
|
<line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content column -->
|
|
<div id="mainCol">
|
|
|
|
<!-- Status card -->
|
|
<div class="status-card">
|
|
<div class="status-top">
|
|
<span id="stateDot" class="state-dot disconnected"></span>
|
|
<span id="stateText" class="state-text">Disconnected</span>
|
|
</div>
|
|
<div id="selectedName" class="status-name">not selected</div>
|
|
<div class="status-meta">
|
|
<span id="protoBadgeStatus" class="proto-badge" style="display:none"></span>
|
|
<span id="pingStatus" class="ping-status"></span>
|
|
<span id="latencyStatus" class="latency-status"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configs header -->
|
|
<div class="section-header" style="margin-top:18px">
|
|
<span class="section-title">Configurations</span>
|
|
<div class="header-actions">
|
|
<button class="icon-btn" id="pingAllBtn" title="Ping all">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="10" cy="12" r="2"/><path d="M13.4 10.6 L19 5"/><path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-btn" id="addLinkBtn" title="Add manually">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M15 7h2a5 5 0 0 1 0 10h-2m-6 0H7A5 5 0 0 1 7 7h2"/>
|
|
<line x1="8" y1="12" x2="16" y2="12"/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-btn" id="addClipboardBtn" title="Add from clipboard">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
|
|
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Link input panel (hidden by default) -->
|
|
<div id="linkInputPanel" class="link-input-panel hidden">
|
|
<input type="text" id="linkInputBox" placeholder="vless:// or trojan://..." spellcheck="false" autocomplete="off" />
|
|
<button id="submitLinkBtn" class="add-btn">+</button>
|
|
</div>
|
|
|
|
<!-- Config list -->
|
|
<div id="configList" class="config-list">
|
|
<div id="emptyState" class="empty-state">
|
|
No configurations.<br>Copy a link and add it from the clipboard.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom controls -->
|
|
<div class="bottom-bar">
|
|
<div class="bottom-left">
|
|
<button class="icon-btn" id="settingsBtn" title="Settings">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path id="settingsChevron" d="M2,1 L7,6 L2,11"/>
|
|
</svg>
|
|
</button>
|
|
<button id="connectBtn" class="solid-btn green" style="display:none">Start</button>
|
|
<button id="disconnectBtn" class="solid-btn red" style="display:none">Stop</button>
|
|
<button id="logBtn" class="solid-btn gray">Log</button>
|
|
</div>
|
|
<div class="bottom-right">
|
|
<button id="exitBtn" class="exit-btn">Exit</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings panel (hidden by default) -->
|
|
<div id="settingsPanel" class="settings-panel hidden">
|
|
<div class="settings-card">
|
|
<label class="toggle-row">
|
|
<span class="toggle-wrap">
|
|
<input type="checkbox" id="runOnStartup" />
|
|
<span class="toggle-track"><span class="toggle-knob"></span></span>
|
|
</span>
|
|
<span class="toggle-label">Run on startup</span>
|
|
</label>
|
|
<label class="toggle-row">
|
|
<span class="toggle-wrap">
|
|
<input type="checkbox" id="autoConnect" />
|
|
<span class="toggle-track"><span class="toggle-knob"></span></span>
|
|
</span>
|
|
<span class="toggle-label">Auto-connect VPN</span>
|
|
</label>
|
|
<label class="toggle-row" style="margin-bottom:0">
|
|
<span class="toggle-wrap">
|
|
<input type="checkbox" id="autoReconnect" />
|
|
<span class="toggle-track"><span class="toggle-knob"></span></span>
|
|
</span>
|
|
<span class="toggle-label">Auto-reconnect</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log sidebar -->
|
|
<div id="logCol" class="log-col hidden">
|
|
<div class="log-header">
|
|
<span class="section-title">Logs</span>
|
|
<div class="header-actions">
|
|
<button class="icon-btn small" id="copyLogsBtn">Copy</button>
|
|
<button class="icon-btn small" id="clearLogsBtn">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div id="logArea" class="log-area"></div>
|
|
</div>
|
|
|
|
<!-- Toast notification -->
|
|
<div id="toast" class="toast hidden"></div>
|
|
|
|
<!-- Context menu -->
|
|
<div id="ctxMenu" class="ctx-menu hidden">
|
|
<div class="ctx-item" id="ctxCopyLink">Copy Link</div>
|
|
<div class="ctx-separator"></div>
|
|
<div class="ctx-item danger" id="ctxDelete">Delete</div>
|
|
</div>
|
|
|
|
<!-- Notification stack -->
|
|
<div id="notifStack" class="notif-stack"></div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|