Spaces:

nicolaydef
/

Deep

Sleeping

App Files Files Community

nicolaydef commited on Dec 14, 2025

Commit

dceedb1

verified ·

1 Parent(s): db370a0

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +73 -107

static/index.html CHANGED Viewed

@@ -3,159 +3,125 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Zenith Platform | Beta</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">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
 </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-2 tracking-[0.2em] text-cyan-400">ZENITH</h1>
-            <p class="text-white/50 mb-8 text-xs uppercase tracking-widest">Secure Access Terminal</p>
             <form id="login-form" class="space-y-4">
-                <input type="text" id="login-user" placeholder="Username" autocomplete="off"
-                    class="w-full bg-white/5 border border-white/10 p-3 rounded text-white focus:outline-none focus:border-cyan-400 transition-colors placeholder-white/30">
-                <input type="password" id="login-pass" placeholder="Password"
-                    class="w-full bg-white/5 border border-white/10 p-3 rounded text-white focus:outline-none focus:border-cyan-400 transition-colors placeholder-white/30">
-                <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 tracking-wider transition-all hover:shadow-[0_0_15px_rgba(0,242,234,0.3)]">
-                    INITIALIZE LINK
-                </button>
             </form>
-            <p id="login-error" class="text-red-500 text-xs mt-4 font-mono hidden"></p>
         </div>
     </div>
-    <div id="admin-modal" class="modal-overlay">
-        <div class="modal-box relative overflow-hidden border-red-500/30">
-            <div class="absolute inset-0 border-2 border-red-500/20 pointer-events-none animate-pulse rounded-2xl"></div>
-            <h2 class="text-red-500 font-mono font-bold mb-6 tracking-widest text-center">/// ADMIN OVERRIDE ///</h2>
-            <div id="admin-step-1">
-                <p class="text-xs text-center text-red-500/50 mb-2 font-mono">ENTER SECURITY CLEARANCE CODE</p>
-                <input type="text" id="admin-code" placeholder="____" maxlength="4"
-                    class="w-full bg-black/50 border border-red-500/50 text-red-500 font-mono p-4 text-center tracking-[15px] text-2xl uppercase focus:outline-none focus:bg-red-900/10 focus:shadow-[0_0_20px_rgba(255,0,0,0.2)]">
             </div>
-            <form id="admin-create-form" class="hidden space-y-4 mt-2">
-                <div class="text-xs text-green-400 font-mono mb-2 text-center">> ACCESS GRANTED. CREATE ENTITY.</div>
-                <input type="text" id="new-user" placeholder="New Username"
-                    class="w-full bg-white/5 border border-white/10 p-2 text-white focus:border-red-500 focus:outline-none">
-                <input type="text" id="new-pass" placeholder="New Password"
-                    class="w-full bg-white/5 border border-white/10 p-2 text-white focus:border-red-500 focus:outline-none">
-                <button type="submit"
-                    class="w-full bg-red-500/20 text-red-500 border border-red-500/50 p-2 font-mono hover:bg-red-500/40 transition-all">
-                    EXECUTE CREATION
-                </button>
             </form>
         </div>
     </div>
     <div class="app-grid hidden" id="app-interface">
-        <aside class="sidebar">
-            <div class="p-4 border-b border-white/5 flex items-center justify-between">
-                <h2 class="font-bold tracking-widest text-white/80 text-sm">ZENITH</h2>
-                <div class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_5px_#22c55e]"></div>
-            </div>
-            <div class="channel-list custom-scrollbar" id="channel-list">
-                <div class="text-xs font-bold text-white/30 uppercase px-2 mb-2 mt-2">Text Channels</div>
                 <div class="channel-item active" onclick="switchChannel('general')">
-                    <span class="text-cyan-400 text-lg">#</span>
-                    <span class="text-sm">general</span>
                 </div>
-                <div class="mt-8 mb-2 text-xs font-bold text-white/30 uppercase px-2">Sector Users</div>
-                <div id="users-list" class="space-y-1">
                     </div>
             </div>
-            <div class="user-panel">
-                <div class="avatar relative shrink-0">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center font-bold text-lg">
-                        </div>
-                    <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-[#1a1a2e]"></div>
-                </div>
-                <div class="user-info flex flex-col overflow-hidden">
-                    <div id="current-username" class="username truncate">Loading...</div>
-                    <div class="user-tag" id="admin-trigger">⚡ ADMIN ACCESS</div>
                 </div>
-                <button id="voice-toggle" class="p-2 rounded-lg bg-white/5 hover:bg-white/10 transition border border-white/5 group">
-                    <svg id="mic-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white/50 group-hover:text-white transition" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
-                    </svg>
-                </button>
             </div>
         </aside>
-        <main class="chat-area">
             <header class="chat-header">
-                <div class="flex items-center gap-4">
-                    <div class="flex items-center gap-2 text-lg font-bold text-white/90">
-                        <span class="text-cyan-400 text-2xl">#</span> general
-                    </div>
-                    <div id="voice-ui" class="hidden flex items-center gap-3 px-3 py-1.5 rounded-full bg-black/40 border border-white/10 backdrop-blur-md">
-                        <div id="voice-dot" class="status-dot"></div>
-                        <span id="voice-text" class="text-xs font-bold uppercase tracking-wider text-white/80">Connecting</span>
-                        <div class="h-3 w-[1px] bg-white/20"></div>
-                        <span id="voice-ping" class="font-mono text-xs text-cyan-400">--- ms</span>
                     </div>
                 </div>
-                <div id="mood-indicator" class="text-2xl animate-bounce cursor-help" title="Current Atmosphere">✨</div>
             </header>
-            <div id="messages-container" class="messages-container custom-scrollbar">
-                </div>
             <form id="chat-form" class="p-4 bg-transparent shrink-0">
-                <div class="relative group">
-                    <div class="absolute left-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-white/10 cursor-pointer transition">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                        </svg>
-                    </div>
-                    <input type="text" id="msg-input" autocomplete="off"
-                        placeholder="Message #general"
-                        class="w-full bg-[#252535] border border-white/5 rounded-xl py-3.5 pl-14 pr-12 text-white placeholder-white/30 focus:outline-none focus:bg-[#2a2a3d] focus:border-white/10 transition-all shadow-inner">
-                    <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-lg text-white/40 hover:text-cyan-400 hover:bg-white/5 transition">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-                        </svg>
-                    </button>
-                </div>
             </form>
         </main>
     </div>
-    <audio id="pop-sound" src="/static/pop.mp3"></audio>
     <script src="/static/script.js"></script>
 </body>
 </html>

 <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>