61b6e67610
Some checks failed
Build Release Binaries / build-amd64 (push) Failing after 3m38s
- Relay selector as dropdown with green/yellow/red status dots (green < 200ms, yellow > 200ms, red = offline, gray = unknown) - All relays pinged on startup, RTT shown next to each - "Manage Relays..." dialog: add/remove servers, see live status - Clicking a relay in dropdown selects it, fills connect form - Recent room chips auto-select matching relay - Migrates old single-relay settings format automatically - Prevents connecting to offline relays Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
147 lines
5.6 KiB
HTML
147 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>WarzonePhone</title>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Connect screen -->
|
|
<div id="connect-screen">
|
|
<h1>WarzonePhone</h1>
|
|
<p class="subtitle">Encrypted Voice</p>
|
|
<div class="form">
|
|
<label>Relay
|
|
<div class="relay-dropdown-wrap">
|
|
<button id="relay-selected" class="relay-selected" type="button">
|
|
<span id="relay-dot" class="dot"></span>
|
|
<span id="relay-label">Select relay...</span>
|
|
<span class="arrow">▾</span>
|
|
</button>
|
|
<div id="relay-menu" class="relay-menu hidden">
|
|
<div id="relay-list"></div>
|
|
<button id="relay-manage-btn" class="relay-manage-btn" type="button">Manage Relays...</button>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label>Room
|
|
<input id="room" type="text" value="android" />
|
|
</label>
|
|
<label>Alias
|
|
<input id="alias" type="text" placeholder="your name" />
|
|
</label>
|
|
<div class="form-row">
|
|
<label class="checkbox">
|
|
<input id="os-aec" type="checkbox" checked />
|
|
OS Echo Cancel
|
|
</label>
|
|
<button id="settings-btn-home" class="icon-btn" title="Settings (Cmd+,)">⚙</button>
|
|
</div>
|
|
<button id="connect-btn" class="primary">Connect</button>
|
|
<p id="connect-error" class="error"></p>
|
|
</div>
|
|
<div class="identity-info">
|
|
<span id="my-fingerprint" class="fp-display"></span>
|
|
</div>
|
|
<div class="recent-rooms" id="recent-rooms"></div>
|
|
</div>
|
|
|
|
<!-- In-call screen -->
|
|
<div id="call-screen" class="hidden">
|
|
<div class="call-header">
|
|
<div class="call-header-row">
|
|
<div id="room-name" class="room-name"></div>
|
|
<button id="settings-btn-call" class="icon-btn small" title="Settings (Cmd+,)">⚙</button>
|
|
</div>
|
|
<div class="call-meta">
|
|
<span id="call-status" class="status-dot"></span>
|
|
<span id="call-timer" class="call-timer">0:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="level-meter">
|
|
<div id="level-bar" class="level-bar-fill"></div>
|
|
</div>
|
|
<div id="participants" class="participants"></div>
|
|
<div class="controls">
|
|
<button id="mic-btn" class="control-btn" title="Toggle Mic (m)">
|
|
<span class="icon" id="mic-icon">Mic</span>
|
|
</button>
|
|
<button id="hangup-btn" class="control-btn hangup" title="Hang Up (q)">
|
|
<span class="icon">End</span>
|
|
</button>
|
|
<button id="spk-btn" class="control-btn" title="Toggle Speaker (s)">
|
|
<span class="icon" id="spk-icon">Spk</span>
|
|
</button>
|
|
</div>
|
|
<div id="stats" class="stats"></div>
|
|
</div>
|
|
|
|
<!-- Settings panel -->
|
|
<div id="settings-panel" class="hidden">
|
|
<div class="settings-card">
|
|
<div class="settings-header">
|
|
<h2>Settings</h2>
|
|
<button id="settings-close" class="icon-btn">×</button>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Connection</h3>
|
|
<label>Default Room
|
|
<input id="s-room" type="text" />
|
|
</label>
|
|
<label>Alias
|
|
<input id="s-alias" type="text" />
|
|
</label>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Audio</h3>
|
|
<label class="checkbox">
|
|
<input id="s-os-aec" type="checkbox" />
|
|
OS Echo Cancellation (macOS VoiceProcessingIO)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input id="s-agc" type="checkbox" checked />
|
|
Automatic Gain Control
|
|
</label>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Identity</h3>
|
|
<div class="setting-row">
|
|
<span class="setting-label">Fingerprint</span>
|
|
<span id="s-fingerprint" class="fp-display-large"></span>
|
|
</div>
|
|
<div class="setting-row">
|
|
<span class="setting-label">Identity file</span>
|
|
<span class="fp-display">~/.wzp/identity</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Recent Rooms</h3>
|
|
<div id="s-recent-rooms" class="recent-rooms-list"></div>
|
|
<button id="s-clear-recent" class="secondary-btn">Clear History</button>
|
|
</div>
|
|
<button id="settings-save" class="primary">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manage Relays dialog -->
|
|
<div id="relay-dialog" class="hidden">
|
|
<div class="settings-card relay-dialog-card">
|
|
<div class="settings-header">
|
|
<h2>Manage Relays</h2>
|
|
<button id="relay-dialog-close" class="icon-btn">×</button>
|
|
</div>
|
|
<div id="relay-dialog-list" class="relay-dialog-list"></div>
|
|
<div class="relay-add-row">
|
|
<input id="relay-add-name" type="text" placeholder="Name (e.g. EU-1)" />
|
|
<input id="relay-add-addr" type="text" placeholder="host:port" />
|
|
<button id="relay-add-btn" class="secondary-btn">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|