HTMLify
index.html
Views: 34 | Author: karbonsites
1 2 3 4 5 6 | <!DOCTYPE html><html lang="string" class="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WaveTalk - Wi-Fi Walkie-Talkie</title><link rel="stylesheet" href="style.css"><script src="script.js" defer></script></head><body><div class="app-container"><header class="app-header"><h1>WaveTalk</h1><div class="status-indicator"><span class="dot"></span><span id="connection-status">Online</span></div></header><main class="app-content"><section id="view-walkie" class="view active"><div class="target-user-card"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=120" alt="User" class="avatar"><div class="target-info"><h3>Sarah Jenkins</h3><p class="code-label">WT-89K2L1</p></div><div class="signal-strength"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/></svg></div></div><div class="walkie-stage"><div class="visualizer-ring"></div><div class="visualizer-ring delay"></div><button id="ptt-button" class="ptt-btn"><svg width="48" height="48" 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 10v1a7 7 0 0 1-14 0v-1"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg><span class="ptt-text">PRESS & HOLD</span></button><div class="state-display" id="ptt-state">READY</div></div><div class="walkie-controls"><button class="control-btn" id="btn-mute"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></button><div class="volume-slider-container"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg><input type="range" min="0" max="100" value="80" class="volume-slider"></div><button class="control-btn danger" id="btn-disconnect"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.33a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"/><line x1="23" y1="1" x2="1" y2="23"/></svg></button></div></section><section id="view-contacts" class="view"><div class="section-header"><h2>Contacts</h2><button class="primary-btn small" id="open-connect-modal">+ Add Code</button></div><div class="search-bar"><input type="text" placeholder="Search contacts..."></div><div class="contacts-list"><div class="contact-card"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=120" alt="Avatar" class="avatar"><div class="contact-info"><h4>Sarah Jenkins</h4><span class="code">WT-89K2L1</span><span class="status online">Online</span></div><button class="connect-action-btn active-call">Connect</button></div><div class="contact-card"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=120" alt="Avatar" class="avatar"><div class="contact-info"><h4>Alex Rivers</h4><span class="code">WT-33M9Q8</span><span class="status offline">Last seen 2h ago</span></div><button class="connect-action-btn">Connect</button></div></div></section><section id="view-activity" class="view"><div class="section-header"><h2>Activity Log</h2></div><div class="activity-list"><div class="activity-item"><div class="activity-icon incoming"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></div><div class="activity-details"><h4>Sarah Jenkins</h4><p>Voice transmission • 45s</p><span class="time">10:42 AM</span></div></div><div class="activity-item"><div class="activity-icon missed"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10 10 0 0 1 19 12.55"/><path d="M5 12.55a10 10 0 0 1 5.17-2.39"/><path d="M12 2v4"/></svg></div><div class="activity-details"><h4>Alex Rivers</h4><p>Missed call request</p><span class="time">Yesterday</span></div></div></div></section><section id="view-profile" class="view"><div class="profile-header"><img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&q=80&w=160" alt="Profile" class="avatar large"><h3>Marcus Vance</h3><p class="my-code">My Code: <strong>WT-7K4P92</strong></p><button class="secondary-btn small" id="copy-code-btn">Copy Code</button></div><div class="profile-settings"><div class="setting-item"><span>Dark Theme</span><label class="switch"><input type="checkbox" checked id="theme-toggle"><span class="slider round"></span></label></div><div class="setting-item"><span>Push Notifications</span><label class="switch"><input type="checkbox" checked><span class="slider round"></span></label></div><div class="setting-item"><span>High Quality Audio (Opus)</span><label class="switch"><input type="checkbox" checked><span class="slider round"></span></label></div><button class="danger-btn full" id="open-admin-btn">Open Admin Console</button></div></section></main><nav class="bottom-nav"><button class="nav-item active" data-target="view-walkie"><svg width="22" height="22" 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 10v1a7 7 0 0 1-14 0v-1"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg><span>Walkie</span></button><button class="nav-item" data-target="view-contacts"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg><span>Contacts</span></button><button class="nav-item" data-target="view-activity"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg><span>Activity</span></button><button class="nav-item" data-target="view-profile"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>Profile</span></button></nav><div id="connect-modal" class="modal"><div class="modal-content"><h3>Connect with User</h3><p>Enter the unique Walkie-Talkie code.</p><input type="text" id="code-input" placeholder="e.g. WT-89K2L1"><div class="modal-actions"><button class="secondary-btn" id="close-modal">Cancel</button><button class="primary-btn" id="send-request-btn">Send Request</button></div></div></div><div id="admin-modal" class="modal"><div class="modal-content wide"><h3>Admin Dashboard</h3><div class="admin-stats"><div class="stat-box"><h4>1,245</h4><p>Active Users</p></div><div class="stat-box"><h4>$0.00</h4><p>Server Costs</p></div></div><div class="admin-table-container"><table><thead><tr><th>User</th><th>Code</th><th>Status</th><th>Action</th></tr></thead><tbody><tr><td>Sarah Jenkins</td><td>WT-89K2L1</td><td><span class="status online">Online</span></td><td><button class="danger-btn small">Suspend</button></td></tr><tr><td>Alex Rivers</td><td>WT-33M9Q8</td><td><span class="status offline">Offline</span></td><td><button class="danger-btn small">Suspend</button></td></tr></tbody></table></div><div class="modal-actions"><button class="primary-btn" id="close-admin-btn">Close Console</button></div></div></div></div> <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner"> <span>✨</span> <div>Built with <b>Karbon Sites</b></div> </a> </body></html> |