55 lines
1.8 KiB
HTML
55 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Talkie</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Join screen -->
|
|
<div id="join-screen" class="screen active">
|
|
<div class="logo">📻 Talkie</div>
|
|
<p class="subtitle">Walkie-talkie nel browser, gratis</p>
|
|
<div class="form">
|
|
<input id="input-name" type="text" placeholder="Il tuo nome" maxlength="20" autocomplete="off" />
|
|
<input id="input-room" type="text" placeholder="Codice stanza (es. ALFA)" maxlength="12" autocomplete="off" />
|
|
<button id="btn-join">Entra nella stanza</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Talkie screen -->
|
|
<div id="talkie-screen" class="screen">
|
|
<div class="header">
|
|
<span id="room-label"></span>
|
|
<button id="btn-leave">Esci</button>
|
|
</div>
|
|
|
|
<div id="peers-list"></div>
|
|
|
|
<div class="ptt-area">
|
|
<div id="status-text">Rilascia per ascoltare</div>
|
|
<button id="ptt-btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
|
<line x1="12" y1="19" x2="12" y2="23"/>
|
|
<line x1="8" y1="23" x2="16" y2="23"/>
|
|
</svg>
|
|
<span>Tieni premuto per parlare</span>
|
|
</button>
|
|
<button id="btn-lock-mic">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
Microfono sempre attivo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|