Hugging Face's logo

Spaces:
nicolaydef
/
Deep
Sleeping

App Files Community
nicolaydef commited on
Commit
5ba7d72
·
verified ·
1 Parent(s): b8671f3

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +95 -36
static/index.html CHANGED
@@ -4,99 +4,158 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Zenith Platform | Beta</title>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
 
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script>
 
10
  <link rel="stylesheet" href="/static/styles.css">
 
11
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
12
  </head>
13
  <body>
 
14
  <div class="blob blob-1"></div>
15
  <div class="blob blob-2"></div>
16
 
17
  <div id="login-modal" class="modal-overlay open">
18
  <div class="modal-box text-center">
19
- <h1 class="text-3xl font-bold mb-2 tracking-widest text-cyan-400">ZENITH</h1>
20
- <p class="text-white/50 mb-6 text-sm">ACCESS TERMINAL</p>
 
21
  <form id="login-form" class="space-y-4">
22
- <input type="text" id="login-user" placeholder="Username" class="w-full bg-white/5 border border-white/10 p-3 rounded text-white focus:outline-none focus:border-cyan-400">
23
- <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">
24
- <button type="submit" class="w-full bg-cyan-500/20 hover:bg-cyan-500/40 text-cyan-400 border border-cyan-500/50 p-3 rounded font-bold transition-all">INITIALIZE</button>
 
 
 
 
 
 
 
25
  </form>
26
- <p id="login-error" class="text-red-500 text-xs mt-4 hidden"></p>
27
  </div>
28
  </div>
29
 
30
  <div id="admin-modal" class="modal-overlay">
31
- <div class="modal-box relative overflow-hidden">
32
- <div class="absolute inset-0 border-2 border-red-500/30 pointer-events-none animate-pulse"></div>
33
- <h2 class="text-red-500 font-mono font-bold mb-4">/// ADMIN OVERRIDE ///</h2>
 
34
 
35
  <div id="admin-step-1">
36
- <input type="text" id="admin-code" placeholder="ENTER 4-CHAR SECRET" maxlength="4" class="w-full bg-black border border-red-500 text-red-500 font-mono p-4 text-center tracking-[10px] text-xl uppercase focus:outline-none">
 
 
37
  </div>
38
 
39
- <form id="admin-create-form" class="hidden space-y-4 mt-4">
40
- <input type="text" id="new-user" placeholder="New Username" class="w-full bg-white/5 border border-white/10 p-2 text-white">
41
- <input type="text" id="new-pass" placeholder="New Password" class="w-full bg-white/5 border border-white/10 p-2 text-white">
42
- <button type="submit" class="w-full bg-red-500/20 text-red-500 border border-red-500 p-2 font-mono hover:bg-red-500/40">CREATE ENTITY</button>
 
 
 
 
 
 
 
 
 
43
  </form>
44
  </div>
45
  </div>
46
 
47
  <div class="app-grid hidden" id="app-interface">
 
48
  <aside class="sidebar">
49
- <div class="p-4 border-b border-white/5">
50
- <h2 class="font-bold tracking-widest text-white/80">CHANNELS</h2>
 
51
  </div>
52
 
53
- <div class="channel-list" id="channel-list">
 
54
  <div class="channel-item active" onclick="switchChannel('general')">
55
- <span class="text-cyan-400">#</span> general
 
56
  </div>
57
- <div class="mt-6 mb-2 text-xs font-bold text-white/30 uppercase px-2">Online Users</div>
58
- <div id="users-list"></div>
 
 
59
  </div>
60
 
61
  <div class="user-panel">
62
- <div class="avatar relative">
63
- <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border border-black"></div>
 
 
64
  </div>
65
- <div class="user-info">
66
- <div id="current-username" class="username">Ghost</div>
67
- <div class="user-tag" id="admin-trigger">admin_console</div>
 
68
  </div>
69
- <button id="voice-toggle" class="p-2 rounded hover:bg-white/10 transition">
70
- <svg id="mic-icon" 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="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>
 
 
 
71
  </button>
72
  </div>
73
  </aside>
74
 
75
  <main class="chat-area">
 
76
  <header class="chat-header">
77
- <div class="flex items-center gap-3">
78
- <h3 class="font-bold text-lg"># general</h3>
79
- <div id="voice-ui" class="hidden voice-status bg-black/40 px-3 py-1 rounded-full border border-white/10">
 
 
 
80
  <div id="voice-dot" class="status-dot"></div>
81
- <span id="voice-text">Connecting...</span>
82
- <span id="voice-ping" class="ml-2 font-mono text-xs text-white/50"></span>
 
83
  </div>
84
  </div>
85
- <div id="mood-indicator" class="text-2xl">✨</div>
 
86
  </header>
87
 
88
  <div id="messages-container" class="messages-container custom-scrollbar">
89
  </div>
90
 
91
- <form id="chat-form" class="p-4 bg-transparent">
92
- <div class="relative">
93
- <input type="text" id="msg-input" autocomplete="off" placeholder="Message #general" class="w-full bg-white/5 border border-white/10 rounded-xl p-4 pr-12 text-white focus:outline-none focus:bg-white/10 transition-colors">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  </div>
95
  </form>
96
  </main>
97
  </div>
98
 
99
  <audio id="pop-sound" src="/static/pop.mp3"></audio>
 
100
  <script src="/static/script.js"></script>
101
  </body>
102
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Zenith Platform | Beta</title>
7
+
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+
10
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
11
+
12
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script>
13
+
14
  <link rel="stylesheet" href="/static/styles.css">
15
+
16
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
17
  </head>
18
  <body>
19
+
20
  <div class="blob blob-1"></div>
21
  <div class="blob blob-2"></div>
22
 
23
  <div id="login-modal" class="modal-overlay open">
24
  <div class="modal-box text-center">
25
+ <h1 class="text-3xl font-bold mb-2 tracking-[0.2em] text-cyan-400">ZENITH</h1>
26
+ <p class="text-white/50 mb-8 text-xs uppercase tracking-widest">Secure Access Terminal</p>
27
+
28
  <form id="login-form" class="space-y-4">
29
+ <input type="text" id="login-user" placeholder="Username" autocomplete="off"
30
+ 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">
31
+
32
+ <input type="password" id="login-pass" placeholder="Password"
33
+ 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">
34
+
35
+ <button type="submit"
36
+ 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)]">
37
+ INITIALIZE LINK
38
+ </button>
39
  </form>
40
+ <p id="login-error" class="text-red-500 text-xs mt-4 font-mono hidden"></p>
41
  </div>
42
  </div>
43
 
44
  <div id="admin-modal" class="modal-overlay">
45
+ <div class="modal-box relative overflow-hidden border-red-500/30">
46
+ <div class="absolute inset-0 border-2 border-red-500/20 pointer-events-none animate-pulse rounded-2xl"></div>
47
+
48
+ <h2 class="text-red-500 font-mono font-bold mb-6 tracking-widest text-center">/// ADMIN OVERRIDE ///</h2>
49
 
50
  <div id="admin-step-1">
51
+ <p class="text-xs text-center text-red-500/50 mb-2 font-mono">ENTER SECURITY CLEARANCE CODE</p>
52
+ <input type="text" id="admin-code" placeholder="____" maxlength="4"
53
+ 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)]">
54
  </div>
55
 
56
+ <form id="admin-create-form" class="hidden space-y-4 mt-2">
57
+ <div class="text-xs text-green-400 font-mono mb-2 text-center">> ACCESS GRANTED. CREATE ENTITY.</div>
58
+
59
+ <input type="text" id="new-user" placeholder="New Username"
60
+ class="w-full bg-white/5 border border-white/10 p-2 text-white focus:border-red-500 focus:outline-none">
61
+
62
+ <input type="text" id="new-pass" placeholder="New Password"
63
+ class="w-full bg-white/5 border border-white/10 p-2 text-white focus:border-red-500 focus:outline-none">
64
+
65
+ <button type="submit"
66
+ 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">
67
+ EXECUTE CREATION
68
+ </button>
69
  </form>
70
  </div>
71
  </div>
72
 
73
  <div class="app-grid hidden" id="app-interface">
74
+
75
  <aside class="sidebar">
76
+ <div class="p-4 border-b border-white/5 flex items-center justify-between">
77
+ <h2 class="font-bold tracking-widest text-white/80 text-sm">ZENITH</h2>
78
+ <div class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_5px_#22c55e]"></div>
79
  </div>
80
 
81
+ <div class="channel-list custom-scrollbar" id="channel-list">
82
+ <div class="text-xs font-bold text-white/30 uppercase px-2 mb-2 mt-2">Text Channels</div>
83
  <div class="channel-item active" onclick="switchChannel('general')">
84
+ <span class="text-cyan-400 text-lg">#</span>
85
+ <span class="text-sm">general</span>
86
  </div>
87
+
88
+ <div class="mt-8 mb-2 text-xs font-bold text-white/30 uppercase px-2">Sector Users</div>
89
+ <div id="users-list" class="space-y-1">
90
+ </div>
91
  </div>
92
 
93
  <div class="user-panel">
94
+ <div class="avatar relative shrink-0">
95
+ <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">
96
+ </div>
97
+ <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-[#1a1a2e]"></div>
98
  </div>
99
+
100
+ <div class="user-info flex flex-col overflow-hidden">
101
+ <div id="current-username" class="username truncate">Loading...</div>
102
+ <div class="user-tag" id="admin-trigger">⚡ ADMIN ACCESS</div>
103
  </div>
104
+
105
+ <button id="voice-toggle" class="p-2 rounded-lg bg-white/5 hover:bg-white/10 transition border border-white/5 group">
106
+ <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">
107
+ <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" />
108
+ </svg>
109
  </button>
110
  </div>
111
  </aside>
112
 
113
  <main class="chat-area">
114
+
115
  <header class="chat-header">
116
+ <div class="flex items-center gap-4">
117
+ <div class="flex items-center gap-2 text-lg font-bold text-white/90">
118
+ <span class="text-cyan-400 text-2xl">#</span> general
119
+ </div>
120
+
121
+ <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">
122
  <div id="voice-dot" class="status-dot"></div>
123
+ <span id="voice-text" class="text-xs font-bold uppercase tracking-wider text-white/80">Connecting</span>
124
+ <div class="h-3 w-[1px] bg-white/20"></div>
125
+ <span id="voice-ping" class="font-mono text-xs text-cyan-400">--- ms</span>
126
  </div>
127
  </div>
128
+
129
+ <div id="mood-indicator" class="text-2xl animate-bounce cursor-help" title="Current Atmosphere">✨</div>
130
  </header>
131
 
132
  <div id="messages-container" class="messages-container custom-scrollbar">
133
  </div>
134
 
135
+ <form id="chat-form" class="p-4 bg-transparent shrink-0">
136
+ <div class="relative group">
137
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-white/10 cursor-pointer transition">
138
+ <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">
139
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
140
+ </svg>
141
+ </div>
142
+
143
+ <input type="text" id="msg-input" autocomplete="off"
144
+ placeholder="Message #general"
145
+ 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">
146
+
147
+ <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">
148
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
149
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
150
+ </svg>
151
+ </button>
152
  </div>
153
  </form>
154
  </main>
155
  </div>
156
 
157
  <audio id="pop-sound" src="/static/pop.mp3"></audio>
158
+
159
  <script src="/static/script.js"></script>
160
  </body>
161
  </html>