aa0362f318
New IRC-style lobby layout: - Auto-connect on launch, drop into user list - User rows with identicon, name, fingerprint, voice status - Speaking indicator (green highlight + pulsing) - Join Voice FAB (green, toggles to Leave/red) - Incoming call banner (slides up from bottom) - User context menu (tap user → Call / Message) - Settings panel preserved from original The old connect-screen HTML is removed. The call-screen is kept intact. JS adaptation next. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
235 lines
11 KiB
HTML
235 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
|
/>
|
|
<title>WarzonePhone</title>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<!-- ═══════════════════════════════════════════════════════
|
|
LOBBY — default view, auto-connects signal on launch
|
|
═══════════════════════════════════════════════════════ -->
|
|
<div id="lobby-screen">
|
|
<header class="lobby-header">
|
|
<div class="lobby-title-row">
|
|
<h1>WarzonePhone</h1>
|
|
<button id="settings-btn" class="icon-btn" title="Settings">⚙</button>
|
|
</div>
|
|
<div class="lobby-status-row">
|
|
<span id="lobby-dot" class="dot"></span>
|
|
<span id="lobby-relay-label" class="lobby-relay">Connecting...</span>
|
|
<span id="lobby-room-label" class="lobby-room">general</span>
|
|
</div>
|
|
<div class="lobby-identity">
|
|
<span id="lobby-identicon"></span>
|
|
<span id="lobby-fp" class="fp-display"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- User list -->
|
|
<div class="lobby-users-section">
|
|
<div class="lobby-users-header">
|
|
<span>Online</span>
|
|
<span id="lobby-user-count" class="badge">0</span>
|
|
</div>
|
|
<div id="lobby-user-list" class="lobby-user-list">
|
|
<div class="lobby-empty">No one else is here yet</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voice join FAB -->
|
|
<div class="lobby-fab-row">
|
|
<button id="join-voice-btn" class="fab" title="Join Voice Chat">
|
|
<span class="fab-icon">🎧</span>
|
|
<span class="fab-label">Join Voice</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Incoming call banner -->
|
|
<div id="incoming-call-banner" class="incoming-banner hidden">
|
|
<div class="incoming-info">
|
|
<span id="incoming-identicon" class="incoming-identicon"></span>
|
|
<div>
|
|
<div id="incoming-caller-name" class="incoming-name">Unknown</div>
|
|
<div class="incoming-subtitle">Incoming call...</div>
|
|
</div>
|
|
</div>
|
|
<div class="incoming-actions">
|
|
<button id="accept-call-btn" class="btn-accept">Accept</button>
|
|
<button id="reject-call-btn" class="btn-reject">Reject</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════
|
|
IN-CALL — voice active (room or direct)
|
|
═══════════════════════════════════════════════════════ -->
|
|
<div id="call-screen" class="hidden">
|
|
<div class="call-header">
|
|
<div class="call-header-row">
|
|
<button id="back-to-lobby-btn" class="icon-btn small" title="Back to lobby">←</button>
|
|
<div id="room-name" class="room-name"></div>
|
|
<button id="settings-btn-call" class="icon-btn small" title="Settings">⚙</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>
|
|
<!-- Direct-call phone layout -->
|
|
<div id="direct-call-view" class="direct-call-view hidden">
|
|
<div id="dc-identicon" class="dc-identicon"></div>
|
|
<div id="dc-name" class="dc-name">Unknown</div>
|
|
<div id="dc-fp" class="dc-fp"></div>
|
|
<div id="dc-badge" class="dc-badge">Connecting...</div>
|
|
</div>
|
|
<!-- Room participants -->
|
|
<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>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════
|
|
USER CONTEXT MENU (tap on user in lobby)
|
|
═══════════════════════════════════════════════════════ -->
|
|
<div id="user-context-menu" class="context-menu hidden">
|
|
<div class="context-header">
|
|
<span id="ctx-identicon" class="ctx-identicon"></span>
|
|
<div>
|
|
<div id="ctx-name" class="ctx-name">User</div>
|
|
<div id="ctx-fp" class="ctx-fp"></div>
|
|
</div>
|
|
</div>
|
|
<button id="ctx-call-btn" class="context-action">
|
|
<span>📞</span> Direct Call
|
|
</button>
|
|
<button id="ctx-message-btn" class="context-action" disabled>
|
|
<span>💬</span> Message (coming soon)
|
|
</button>
|
|
<button id="ctx-close-btn" class="context-action dim">Close</button>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════
|
|
SETTINGS PANEL (overlay)
|
|
═══════════════════════════════════════════════════════ -->
|
|
<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>
|
|
<div class="quality-control">
|
|
<div class="quality-header">
|
|
<span class="setting-label">QUALITY</span>
|
|
<span id="s-quality-label" class="quality-value">Auto</span>
|
|
</div>
|
|
<input id="s-quality" type="range" min="0" max="6" step="1" value="6" />
|
|
<div class="quality-labels">
|
|
<span>Codec2 1.2k</span>
|
|
<span>Auto</span>
|
|
</div>
|
|
</div>
|
|
<label class="checkbox">
|
|
<input id="s-os-aec" type="checkbox" checked />
|
|
OS Echo Cancellation
|
|
</label>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Relays</h3>
|
|
<div id="s-relay-list"></div>
|
|
<div class="relay-add">
|
|
<input id="s-relay-name" type="text" placeholder="Name" style="flex:1" />
|
|
<input id="s-relay-addr" type="text" placeholder="host:port" style="flex:2" />
|
|
<button id="s-relay-add" class="secondary-btn small">Add</button>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Identity</h3>
|
|
<div>
|
|
<span class="setting-label">FINGERPRINT</span>
|
|
<div id="s-fingerprint" class="fp-display" style="margin-top:4px"></div>
|
|
</div>
|
|
<div style="margin-top:8px">
|
|
<span class="setting-label">IDENTITY FILE</span>
|
|
<div style="font-size:12px;opacity:0.6;margin-top:2px">~/.wzp/identity</div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Network</h3>
|
|
<div>
|
|
<span class="setting-label">PUBLIC ADDRESS</span>
|
|
<span id="s-public-addr" style="color:var(--green);font-size:13px;margin-left:8px"></span>
|
|
<button id="s-reflect-btn" class="secondary-btn small" style="margin-left:8px">Detect</button>
|
|
</div>
|
|
<div style="margin-top:8px">
|
|
<button id="s-nat-detect-btn" class="secondary-btn" style="width:100%">Detect NAT</button>
|
|
<div id="s-nat-result" style="font-size:11px;margin-top:4px;opacity:0.7;white-space:pre-wrap"></div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Debug</h3>
|
|
<label class="checkbox">
|
|
<input id="s-dred-debug" type="checkbox" />
|
|
DRED debug logs (verbose, dev only)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input id="s-call-debug" type="checkbox" />
|
|
Call flow debug logs (trace every step of a call)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input id="s-direct-only" type="checkbox" />
|
|
Direct-only mode (no relay fallback)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input id="s-birthday-attack" type="checkbox" />
|
|
Birthday attack (extra ports for hard NAT — adds ~3s)
|
|
</label>
|
|
</div>
|
|
<div class="settings-section" id="s-call-debug-section" style="display:none">
|
|
<h3>Call Debug Log</h3>
|
|
<div id="s-call-debug-log" style="max-height:220px;overflow-y:auto;background:#0a0a0a;color:#e0e0e0;font-family:ui-monospace,Menlo,Monaco,'Courier New',monospace;font-size:10px;padding:6px;border-radius:4px;line-height:1.4;white-space:pre-wrap"></div>
|
|
<div style="display:flex;gap:6px;margin-top:6px">
|
|
<button id="s-call-debug-copy" class="secondary-btn" style="flex:1">Copy log</button>
|
|
<button id="s-call-debug-share" class="secondary-btn" style="flex:1">Share</button>
|
|
<button id="s-call-debug-clear" class="secondary-btn" style="flex:1">Clear log</button>
|
|
</div>
|
|
<small id="s-call-debug-copy-status" style="display:block;margin-top:4px;color:var(--text-dim);font-size:10px"></small>
|
|
</div>
|
|
<button id="settings-save" class="primary" style="margin-top:12px">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|