Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Zenith | Social</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> | |
| </head> | |
| <body> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div id="login-modal" class="modal-overlay open"> | |
| <div class="modal-box text-center"> | |
| <h1 class="text-3xl font-bold mb-8 tracking-[0.2em] text-cyan-400">ZENITH</h1> | |
| <form id="login-form" class="space-y-4"> | |
| <input type="text" id="login-user" placeholder="Username" class="w-full bg-white/5 border border-white/10 p-3 rounded text-white focus:border-cyan-400 focus:outline-none"> | |
| <input type="password" id="login-pass" placeholder="Password" class="w-full bg-white/5 border border-white/10 p-3 rounded text-white focus:border-cyan-400 focus:outline-none"> | |
| <button type="submit" class="w-full bg-cyan-500/10 hover:bg-cyan-500/30 text-cyan-400 border border-cyan-500/50 p-3 rounded font-bold transition-all">ENTER SYSTEM</button> | |
| </form> | |
| <p id="login-error" class="text-red-500 text-xs mt-4 hidden"></p> | |
| </div> | |
| </div> | |
| <div id="settings-modal" class="modal-overlay"> | |
| <div class="modal-box"> | |
| <h2 class="text-xl font-bold mb-4 border-b border-white/10 pb-2">Profile Settings</h2> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <div class="font-bold">Discovery Mode</div> | |
| <div class="text-xs text-white/50">Allow others to find me in "Find Friends"</div> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="setting-discovery" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div> | |
| </label> | |
| </div> | |
| <button id="save-settings" class="w-full bg-white/10 hover:bg-white/20 p-2 rounded">Save & Close</button> | |
| </div> | |
| </div> | |
| <div id="admin-modal" class="modal-overlay"> | |
| <div class="modal-box relative border-red-500/30"> | |
| <h2 class="text-red-500 font-mono font-bold mb-6 text-center">/// ADMIN ///</h2> | |
| <input type="text" id="admin-code" placeholder="CODE" class="w-full bg-black/50 border border-red-500/50 text-red-500 p-3 text-center tracking-[5px] uppercase mb-4 focus:outline-none"> | |
| <form id="admin-create-form" class="hidden space-y-3"> | |
| <input type="text" id="new-user" placeholder="New User" class="w-full bg-white/5 border border-white/10 p-2 text-white"> | |
| <input type="text" id="new-pass" placeholder="New Pass" class="w-full bg-white/5 border border-white/10 p-2 text-white"> | |
| <button type="submit" class="w-full bg-red-500/20 text-red-500 border border-red-500/50 p-2">CREATE</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="app-grid hidden" id="app-interface"> | |
| <nav class="w-[70px] bg-black/40 border-r border-white/5 flex flex-col items-center py-4 gap-4 z-20 backdrop-blur-xl"> | |
| <button class="nav-btn active" data-tab="chats" title="My Chats"> | |
| <ion-icon name="chatbubbles-outline" class="text-2xl"></ion-icon> | |
| </button> | |
| <button class="nav-btn" data-tab="discovery" title="Find Friends"> | |
| <ion-icon name="planet-outline" class="text-2xl"></ion-icon> | |
| </button> | |
| <div class="flex-1"></div> | |
| <button id="open-settings" class="nav-btn" title="Settings"> | |
| <ion-icon name="settings-outline" class="text-2xl"></ion-icon> | |
| </button> | |
| </nav> | |
| <aside class="sidebar" style="width: 240px;"> | |
| <div class="p-4 border-b border-white/5 font-bold tracking-widest text-xs" id="sidebar-title">CHANNELS</div> | |
| <div id="view-chats" class="channel-list p-2"> | |
| <div class="channel-item active" onclick="switchChannel('general')"> | |
| <span class="text-cyan-400">#</span> general | |
| </div> | |
| </div> | |
| <div id="view-discovery" class="channel-list p-2 hidden"> | |
| <div class="text-xs text-white/30 mb-2 uppercase px-2">Looking for friends</div> | |
| <div id="discovery-list" class="space-y-2"> | |
| </div> | |
| </div> | |
| <div class="user-panel mt-auto"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600"></div> | |
| <div class="user-info ml-2 overflow-hidden"> | |
| <div id="current-username" class="text-sm font-bold truncate">...</div> | |
| <div class="user-tag" id="admin-trigger">⚡ ADMIN</div> | |
| </div> | |
| </div> | |
| </aside> | |
| <main class="chat-area flex-1 flex flex-col relative bg-black/20"> | |
| <header class="chat-header"> | |
| <div class="flex items-center gap-2"> | |
| <h3 class="font-bold text-lg" id="chat-title"># general</h3> | |
| <div id="voice-ui" class="hidden flex items-center gap-2 bg-black/40 px-2 py-1 rounded text-xs"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> | |
| <span id="voice-ping" class="font-mono text-cyan-400">0ms</span> | |
| </div> | |
| </div> | |
| <button id="voice-toggle" class="p-2 bg-white/5 rounded-full hover:bg-white/10"> | |
| <ion-icon name="mic-outline"></ion-icon> | |
| </button> | |
| </header> | |
| <div id="messages-container" class="messages-container custom-scrollbar"></div> | |
| <form id="chat-form" class="p-4 bg-transparent shrink-0"> | |
| <input type="text" id="msg-input" autocomplete="off" placeholder="Message..." | |
| class="w-full bg-[#252535] border border-white/5 rounded-xl p-3 text-white focus:outline-none focus:border-white/20 transition-all"> | |
| </form> | |
| </main> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |