Hugging Face's logo

Spaces:
matthewspring
/
anycoder-b0ac2538
Running

App Files Community
matthewspring commited on
Commit
a1ca9fc
·
verified ·
1 Parent(s): 5247e97

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +437 -570
index.html CHANGED
@@ -3,16 +3,17 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Nexus Task & Analytics Suite</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
  fontFamily: {
15
  sans: ['Inter', 'sans-serif'],
 
16
  },
17
  colors: {
18
  slate: {
@@ -30,6 +31,9 @@
30
  'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
31
  'slide-in': 'slideIn 0.3s ease-out forwards',
32
  'fade-in': 'fadeIn 0.5s ease-out forwards',
 
 
 
33
  },
34
  keyframes: {
35
  slideIn: {
@@ -39,6 +43,20 @@
39
  fadeIn: {
40
  '0%': { opacity: '0' },
41
  '100%': { opacity: '1' },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
  }
44
  }
@@ -46,36 +64,125 @@
46
  }
47
  </script>
48
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  /* Custom Scrollbar */
50
  ::-webkit-scrollbar {
51
  width: 8px;
52
  }
53
  ::-webkit-scrollbar-track {
54
- background: #0f172a;
55
  }
56
  ::-webkit-scrollbar-thumb {
57
- background: #334155;
58
  border-radius: 4px;
59
  }
60
  ::-webkit-scrollbar-thumb:hover {
61
- background: #475569;
62
  }
63
 
64
- /* Glassmorphism Utilities */
65
- .glass {
66
- background: rgba(30, 41, 59, 0.7);
67
- backdrop-filter: blur(12px);
68
- -webkit-backdrop-filter: blur(12px);
69
- border: 1px solid rgba(255, 255, 255, 0.05);
70
  }
71
-
72
- .glass-card {
73
- background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
74
- border: 1px solid rgba(148, 163, 184, 0.1);
75
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
76
  }
77
 
78
- /* Chart SVG Line Animation */
79
  .chart-line {
80
  stroke-dasharray: 1000;
81
  stroke-dashoffset: 1000;
@@ -83,70 +190,112 @@
83
  }
84
 
85
  @keyframes drawLine {
86
- to {
87
- stroke-dashoffset: 0;
88
- }
89
  }
90
 
91
- /* Toggle Switch */
92
- .toggle-checkbox:checked {
93
- right: 0;
94
- border-color: #6366f1;
95
- }
96
- .toggle-checkbox:checked + .toggle-label {
97
- background-color: #6366f1;
98
- }
99
-
100
  /* Confetti */
101
  .confetti {
102
  position: absolute;
103
  width: 10px;
104
  height: 10px;
105
- background-color: #f00;
106
  animation: fall linear forwards;
 
107
  }
 
108
  @keyframes fall {
109
  to { transform: translateY(100vh) rotate(720deg); }
110
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
111
  </style>
112
  </head>
113
- <body class="bg-slate-950 text-slate-200 font-sans antialiased overflow-hidden h-screen selection:bg-primary-500 selection:text-white">
 
 
 
 
 
 
 
 
 
114
 
115
  <!-- App Container -->
116
- <div class="flex h-full">
117
-
118
- <!-- Sidebar -->
119
- <aside class="w-20 lg:w-64 bg-slate-900 border-r border-slate-800 flex flex-col justify-between transition-all duration-300 z-20">
 
 
 
 
120
  <div>
121
- <div class="h-16 flex items-center justify-center lg:justify-start lg:px-6 border-b border-slate-800">
122
- <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center shadow-lg shadow-primary-500/20">
123
- <i class="fa-solid fa-layer-group text-white text-sm"></i>
 
 
 
124
  </div>
125
- <span class="ml-3 font-bold text-lg hidden lg:block tracking-tight">Nexus<span class="text-primary-400">OS</span></span>
126
  </div>
127
 
128
- <nav class="mt-6 px-2 lg:px-4 space-y-1">
129
- <button onclick="switchTab('dashboard')" id="nav-dashboard" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group active-nav bg-slate-800 text-white">
 
130
  <i class="fa-solid fa-chart-pie w-6 text-center group-hover:text-primary-400 transition-colors"></i>
131
  <span class="ml-3 hidden lg:block font-medium">Dashboard</span>
132
  </button>
133
- <button onclick="switchTab('tasks')" id="nav-tasks" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group">
 
134
  <i class="fa-solid fa-list-check w-6 text-center group-hover:text-primary-400 transition-colors"></i>
135
- <span class="ml-3 hidden lg:block font-medium">Task Manager</span>
136
  <span id="task-badge" class="ml-auto hidden lg:flex bg-primary-500 text-xs font-bold px-2 py-0.5 rounded-full text-white opacity-0 transition-opacity">0</span>
137
  </button>
138
- <button onclick="switchTab('settings')" id="nav-settings" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group">
 
139
  <i class="fa-solid fa-sliders w-6 text-center group-hover:text-primary-400 transition-colors"></i>
140
  <span class="ml-3 hidden lg:block font-medium">Settings</span>
141
  </button>
142
  </nav>
143
  </div>
144
 
145
- <div class="p-4 border-t border-slate-800">
146
  <div class="flex items-center gap-3">
147
- <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User" class="w-10 h-10 rounded-full bg-slate-700 border-2 border-slate-600">
 
 
 
148
  <div class="hidden lg:block">
149
- <p class="text-sm font-semibold text-white">Admin User</p>
150
  <p class="text-xs text-slate-500">Pro Plan</p>
151
  </div>
152
  </div>
@@ -155,178 +304,215 @@
155
 
156
  <!-- Main Content -->
157
  <main class="flex-1 flex flex-col relative overflow-hidden">
 
 
 
158
  <!-- Top Header -->
159
- <header class="h-16 glass border-b border-slate-800 flex items-center justify-between px-6 z-10">
160
- <h2 id="page-title" class="text-xl font-semibold text-white">Dashboard Overview</h2>
161
  <div class="flex items-center gap-4">
162
- <button id="btn-notification" class="relative p-2 text-slate-400 hover:text-white transition-colors">
 
 
 
 
 
 
 
163
  <i class="fa-regular fa-bell text-lg"></i>
164
- <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
165
  </button>
166
- <button class="bg-primary-600 hover:bg-primary-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors shadow-lg shadow-primary-600/20" onclick="alert('Quick Action Triggered')">
167
- <i class="fa-solid fa-plus mr-2"></i>New
 
168
  </button>
169
  </div>
170
  </header>
171
 
172
  <!-- Scrollable Content Area -->
173
  <div class="flex-1 overflow-y-auto p-6 relative" id="main-scroll">
174
-
175
  <!-- VIEW: DASHBOARD -->
176
- <div id="view-dashboard" class="space-y-6 animate-fade-in">
177
- <!-- Stats Grid -->
178
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
179
  <!-- Stat Card 1 -->
180
- <div class="glass-card p-6 rounded-2xl relative overflow-hidden group">
181
- <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
182
- <i class="fa-solid fa-users text-6xl text-primary-400"></i>
183
- </div>
184
- <p class="text-slate-400 text-sm font-medium uppercase tracking-wider">Total Visitors</p>
185
- <div class="flex items-end gap-3 mt-2">
186
- <h3 class="text-3xl font-bold text-white counter" data-target="8452">0</h3>
187
- <span class="text-emerald-400 text-sm font-medium mb-1"><i class="fa-solid fa-arrow-trend-up"></i> +12.5%</span>
188
- </div>
189
- <div class="w-full bg-slate-700 h-1 mt-4 rounded-full overflow-hidden">
190
- <div class="bg-primary-500 h-full rounded-full" style="width: 75%"></div>
 
 
191
  </div>
 
192
  </div>
193
 
194
  <!-- Stat Card 2 -->
195
- <div class="glass-card p-6 rounded-2xl relative overflow-hidden group">
196
- <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
197
- <i class="fa-solid fa-bolt text-6xl text-yellow-400"></i>
198
- </div>
199
- <p class="text-slate-400 text-sm font-medium uppercase tracking-wider">Server Load</p>
200
- <div class="flex items-end gap-3 mt-2">
201
- <h3 class="text-3xl font-bold text-white"><span id="server-load">42</span>%</h3>
202
- <span class="text-slate-400 text-sm font-medium mb-1">Stable</span>
203
- </div>
204
- <div class="w-full bg-slate-700 h-1 mt-4 rounded-full overflow-hidden">
205
- <div id="load-bar" class="bg-yellow-500 h-full rounded-full transition-all duration-1000" style="width: 42%"></div>
 
 
 
 
 
 
 
206
  </div>
207
  </div>
208
 
209
  <!-- Stat Card 3 -->
210
- <div class="glass-card p-6 rounded-2xl relative overflow-hidden group">
211
- <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
212
- <i class="fa-solid fa-wallet text-6xl text-emerald-400"></i>
213
- </div>
214
- <p class="text-slate-400 text-sm font-medium uppercase tracking-wider">Revenue</p>
215
- <div class="flex items-end gap-3 mt-2">
216
- <h3 class="text-3xl font-bold text-white">$<span class="counter" data-target="12450">0</span></h3>
217
- <span class="text-emerald-400 text-sm font-medium mb-1"><i class="fa-solid fa-arrow-trend-up"></i> +4.2%</span>
218
- </div>
219
- <div class="w-full bg-slate-700 h-1 mt-4 rounded-full overflow-hidden">
220
- <div class="bg-emerald-500 h-full rounded-full" style="width: 60%"></div>
 
 
221
  </div>
222
  </div>
223
  </div>
224
 
225
  <!-- Interactive Chart Section -->
226
- <div class="glass-card p-6 rounded-2xl">
227
- <div class="flex justify-between items-center mb-6">
228
- <h3 class="text-lg font-semibold text-white">Traffic Overview</h3>
229
- <div class="flex gap-2">
230
- <button class="px-3 py-1 text-xs rounded-md bg-slate-700 text-white hover:bg-slate-600 transition">Day</button>
231
- <button class="px-3 py-1 text-xs rounded-md bg-primary-600 text-white shadow-lg shadow-primary-500/30">Week</button>
232
- <button class="px-3 py-1 text-xs rounded-md bg-slate-700 text-white hover:bg-slate-600 transition">Month</button>
 
 
 
 
233
  </div>
234
  </div>
235
-
236
- <!-- SVG Chart -->
237
- <div class="relative h-64 w-full">
238
  <svg id="traffic-chart" class="w-full h-full overflow-visible" preserveAspectRatio="none">
239
  <!-- Grid Lines -->
240
- <line x1="0" y1="0" x2="100%" y2="0" stroke="#334155" stroke-width="1" stroke-dasharray="4" />
241
- <line x1="0" y1="25%" x2="100%" y2="25%" stroke="#334155" stroke-width="1" stroke-dasharray="4" />
242
- <line x1="0" y1="50%" x2="100%" y2="50%" stroke="#334155" stroke-width="1" stroke-dasharray="4" />
243
- <line x1="0" y1="75%" x2="100%" y2="75%" stroke="#334155" stroke-width="1" stroke-dasharray="4" />
244
- <line x1="0" y1="100%" x2="100%" y2="100%" stroke="#334155" stroke-width="1" stroke-dasharray="4" />
245
-
246
- <!-- Area Path (Gradient) -->
247
  <defs>
 
 
 
248
  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
249
- <stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.5" />
250
  <stop offset="100%" style="stop-color:#6366f1;stop-opacity:0" />
251
  </linearGradient>
252
  </defs>
253
- <path id="chart-area" d="" fill="url(#gradient)" />
254
 
255
- <!-- Line Path -->
 
256
  <path id="chart-line" d="" fill="none" stroke="#818cf8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="chart-line" />
257
 
258
- <!-- Data Points (Circles added via JS) -->
259
  <g id="chart-points"></g>
260
  </svg>
261
-
262
  <!-- Tooltip -->
263
- <div id="chart-tooltip" class="absolute pointer-events-none bg-slate-800 border border-slate-700 text-white text-xs rounded px-2 py-1 opacity-0 transition-opacity shadow-xl transform -translate-x-1/2 -translate-y-full mb-2">
264
  <span id="tooltip-value">0</span> Visits
 
265
  </div>
266
  </div>
267
  </div>
268
 
269
  <!-- Interactive Elements Row -->
270
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
271
- <!-- Interactive Card: System Status -->
272
- <div class="glass-card p-6 rounded-2xl flex flex-col justify-between">
273
- <div>
274
- <h3 class="text-lg font-semibold text-white mb-4">System Controls</h3>
275
- <div class="space-y-4">
276
- <div class="flex items-center justify-between">
277
- <div class="flex items-center gap-3">
278
- <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400">
279
- <i class="fa-solid fa-shield-halved"></i>
280
- </div>
281
- <span class="text-slate-300">Firewall</span>
 
 
282
  </div>
283
- <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
284
- <input type="checkbox" name="toggle" id="toggle-firewall" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0" checked/>
285
- <label for="toggle-firewall" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-700 cursor-pointer transition-colors duration-300"></label>
286
  </div>
287
  </div>
288
- <div class="flex items-center justify-between">
289
- <div class="flex items-center gap-3">
290
- <div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
291
- <i class="fa-solid fa-database"></i>
292
- </div>
293
- <span class="text-slate-300">Database Backup</span>
 
 
 
 
294
  </div>
295
- <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
296
- <input type="checkbox" name="toggle" id="toggle-db" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0"/>
297
- <label for="toggle-db" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-700 cursor-pointer transition-colors duration-300"></label>
298
  </div>
299
  </div>
 
 
 
 
300
  </div>
301
  </div>
302
- <div class="mt-6 pt-6 border-t border-slate-700">
303
- <button id="btn-optimize" class="w-full py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-all flex items-center justify-center gap-2 group">
304
- <i class="fa-solid fa-rocket group-hover:-translate-y-1 transition-transform"></i> Run Optimization
305
- </button>
306
- </div>
307
  </div>
308
 
309
- <!-- Interactive Card: Color Theme -->
310
- <div class="glass-card p-6 rounded-2xl">
311
- <h3 class="text-lg font-semibold text-white mb-4">Appearance</h3>
312
- <p class="text-sm text-slate-400 mb-6">Customize the accent color of the dashboard interface.</p>
313
-
314
- <div class="grid grid-cols-5 gap-4 mb-6">
315
- <button class="color-btn w-10 h-10 rounded-full bg-indigo-500 ring-2 ring-offset-2 ring-offset-slate-900 ring-white transition-all scale-110" data-color="indigo"></button>
316
- <button class="color-btn w-10 h-10 rounded-full bg-emerald-500 hover:scale-110 transition-all" data-color="emerald"></button>
317
- <button class="color-btn w-10 h-10 rounded-full bg-rose-500 hover:scale-110 transition-all" data-color="rose"></button>
318
- <button class="color-btn w-10 h-10 rounded-full bg-amber-500 hover:scale-110 transition-all" data-color="amber"></button>
319
- <button class="color-btn w-10 h-10 rounded-full bg-cyan-500 hover:scale-110 transition-all" data-color="cyan"></button>
 
320
  </div>
321
-
322
- <div class="p-4 bg-slate-800/50 rounded-xl border border-slate-700">
 
323
  <div class="flex items-center gap-4">
324
- <div class="w-12 h-12 rounded-lg bg-slate-700 flex items-center justify-center text-2xl" id="preview-icon-bg">
 
325
  <i class="fa-solid fa-paintbrush text-indigo-400" id="preview-icon"></i>
326
  </div>
327
  <div>
328
- <h4 class="text-white font-medium">Live Preview</h4>
329
- <p class="text-xs text-slate-400">Selected theme applied instantly.</p>
330
  </div>
331
  </div>
332
  </div>
@@ -336,94 +522,111 @@
336
 
337
  <!-- VIEW: TASKS -->
338
  <div id="view-tasks" class="hidden space-y-6 animate-slide-in max-w-4xl mx-auto">
339
- <div class="glass-card p-6 rounded-2xl">
340
- <h3 class="text-xl font-semibold text-white mb-4">Task Manager</h3>
341
-
 
 
 
 
 
 
 
 
 
342
  <!-- Input Area -->
343
  <div class="flex gap-3 mb-8">
344
- <input type="text" id="task-input" placeholder="What needs to be done?" class="flex-1 bg-slate-800 border border-slate-700 text-white rounded-lg px-4 py-3 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all">
345
- <button id="btn-add-task" class="bg-primary-600 hover:bg-primary-500 text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-lg shadow-primary-600/20 flex items-center gap-2">
346
- <i class="fa-solid fa-plus"></i> Add
 
 
 
 
 
347
  </button>
348
  </div>
349
 
350
  <!-- Filters -->
351
- <div class="flex gap-4 border-b border-slate-700 mb-6">
352
- <button class="task-filter pb-2 border-b-2 border-primary-500 text-white font-medium" data-filter="all">All</button>
353
- <button class="task-filter pb-2 border-b-2 border-transparent text-slate-400 hover:text-white transition-colors" data-filter="active">Active</button>
354
- <button class="task-filter pb-2 border-b-2 border-transparent text-slate-400 hover:text-white transition-colors" data-filter="completed">Completed</button>
355
  </div>
356
 
357
  <!-- Task List -->
358
  <ul id="task-list" class="space-y-3">
359
  <!-- Tasks injected via JS -->
360
  </ul>
361
-
362
  <!-- Empty State -->
363
- <div id="empty-state" class="hidden flex-col items-center justify-center py-12 text-center">
364
- <div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mb-4">
365
- <i class="fa-solid fa-clipboard-check text-2xl text-slate-500"></i>
366
  </div>
367
- <p class="text-slate-400">No tasks found. Enjoy your free time!</p>
368
  </div>
369
  </div>
370
  </div>
371
 
372
  <!-- VIEW: SETTINGS -->
373
  <div id="view-settings" class="hidden space-y-6 animate-slide-in max-w-3xl mx-auto">
374
- <div class="glass-card p-8 rounded-2xl">
375
- <h3 class="text-2xl font-bold text-white mb-6">Application Settings</h3>
376
 
377
- <div class="space-y-8">
378
- <!-- Profile Section -->
379
- <div class="flex items-center gap-6 pb-8 border-b border-slate-700">
380
- <div class="relative group cursor-pointer">
381
- <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="w-24 h-24 rounded-full bg-slate-700 border-4 border-slate-800 group-hover:opacity-75 transition-opacity">
382
- <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
383
- <i class="fa-solid fa-camera text-white text-xl drop-shadow-md"></i>
384
- </div>
385
- </div>
386
- <div>
387
- <h4 class="text-xl font-semibold text-white">Admin User</h4>
388
- <p class="text-slate-400 mb-4">admin@nexus.dev</p>
389
- <button class="text-sm bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg transition-colors">Edit Profile</button>
390
  </div>
391
  </div>
 
 
 
 
 
 
392
 
393
- <!-- General Settings -->
394
- <div class="space-y-4">
395
- <h5 class="text-sm font-bold text-slate-500 uppercase tracking-wider">General</h5>
396
-
397
- <div class="flex items-center justify-between py-2">
398
- <div>
399
- <p class="text-white font-medium">Email Notifications</p>
400
- <p class="text-sm text-slate-400">Receive daily summaries</p>
401
- </div>
402
- <div class="relative inline-block w-12 align-middle select-none">
403
- <input type="checkbox" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0"/>
404
- <label class="toggle-label block overflow-hidden h-6 rounded-full bg-primary-600 cursor-pointer"></label>
405
- </div>
406
  </div>
 
407
 
408
- <div class="flex items-center justify-between py-2">
409
- <div>
410
- <p class="text-white font-medium">Two-Factor Auth</p>
411
- <p class="text-sm text-slate-400">Secure your account</p>
412
- </div>
413
- <button class="text-primary-400 text-sm font-medium hover:text-primary-300">Enable</button>
414
  </div>
 
415
  </div>
 
416
 
417
- <!-- Danger Zone -->
418
- <div class="pt-8 border-t border-slate-700">
419
- <h5 class="text-sm font-bold text-red-500 uppercase tracking-wider mb-4">Danger Zone</h5>
420
- <div class="flex items-center justify-between bg-red-500/10 border border-red-500/20 p-4 rounded-xl">
421
- <div>
422
- <p class="text-red-400 font-medium">Delete Account</p>
423
- <p class="text-sm text-red-400/70">This action cannot be undone.</p>
424
- </div>
425
- <button id="btn-delete-account" class="bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Delete</button>
426
  </div>
 
 
 
427
  </div>
428
  </div>
429
  </div>
@@ -431,9 +634,12 @@
431
 
432
  <!-- Footer Credit -->
433
  <div class="mt-12 text-center pb-6">
434
- <p class="text-slate-600 text-sm">
435
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hover:text-primary-400 transition-colors">Built with anycoder</a>
436
- </p>
 
 
 
437
  </div>
438
 
439
  </div>
@@ -445,16 +651,16 @@
445
 
446
  <!-- Modal Overlay -->
447
  <div id="modal-overlay" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center opacity-0 transition-opacity duration-300">
448
- <div class="glass-card p-8 rounded-2xl max-w-md w-full mx-4 transform scale-95 transition-transform duration-300" id="modal-content">
449
  <div class="text-center">
450
- <div class="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
451
- <i class="fa-solid fa-triangle-exclamation text-2xl text-red-500"></i>
452
  </div>
453
- <h3 class="text-xl font-bold text-white mb-2">Are you sure?</h3>
454
- <p class="text-slate-400 mb-6">This action will permanently delete your account and all associated data.</p>
455
  <div class="flex gap-3 justify-center">
456
- <button id="btn-cancel-delete" class="px-4 py-2 rounded-lg bg-slate-700 text-white hover:bg-slate-600 transition-colors">Cancel</button>
457
- <button id="btn-confirm-delete" class="px-4 py-2 rounded-lg bg-red-600 text-white hover:bg-red-500 transition-colors">Yes, Delete</button>
458
  </div>
459
  </div>
460
  </div>
@@ -487,10 +693,15 @@
487
  document.querySelectorAll('nav button').forEach(btn => {
488
  btn.classList.remove('bg-slate-800', 'text-white');
489
  btn.classList.add('text-slate-400');
 
 
490
  });
 
491
  const activeBtn = document.getElementById(`nav-${tabName}`);
492
  activeBtn.classList.add('bg-slate-800', 'text-white');
493
  activeBtn.classList.remove('text-slate-400');
 
 
494
 
495
  // Update View
496
  document.querySelectorAll('[id^="view-"]').forEach(view => view.classList.add('hidden'));
@@ -499,7 +710,7 @@
499
 
500
  // Trigger animation reset
501
  activeView.classList.remove('animate-fade-in', 'animate-slide-in');
502
- void activeView.offsetWidth; // trigger reflow
503
  activeView.classList.add('animate-fade-in');
504
 
505
  // Update Title
@@ -508,348 +719,4 @@
508
  'tasks': 'Task Management',
509
  'settings': 'System Settings'
510
  };
511
- document.getElementById('page-title').innerText = titles[tabName];
512
- }
513
-
514
- // --- Dashboard: Counters ---
515
- function initCounters() {
516
- const counters = document.querySelectorAll('.counter');
517
- counters.forEach(counter => {
518
- const target = +counter.getAttribute('data-target');
519
- const duration = 2000;
520
- const increment = target / (duration / 16);
521
-
522
- let current = 0;
523
- const updateCounter = () => {
524
- current += increment;
525
- if (current < target) {
526
- counter.innerText = Math.ceil(current).toLocaleString();
527
- requestAnimationFrame(updateCounter);
528
- } else {
529
- counter.innerText = target.toLocaleString();
530
- }
531
- };
532
- updateCounter();
533
- });
534
- }
535
-
536
- // --- Dashboard: Chart ---
537
- function initChart() {
538
- const svg = document.getElementById('traffic-chart');
539
- const linePath = document.getElementById('chart-line');
540
- const areaPath = document.getElementById('chart-area');
541
- const pointsGroup = document.getElementById('chart-points');
542
- const tooltip = document.getElementById('chart-tooltip');
543
-
544
- // Mock Data
545
- const data = [20, 45, 30, 60, 55, 85, 70, 90, 75, 95, 80, 100];
546
- const width = svg.clientWidth || 800;
547
- const height = svg.clientHeight || 300;
548
- const padding = 20;
549
-
550
- const maxVal = Math.max(...data);
551
- const stepX = (width - padding * 2) / (data.length - 1);
552
-
553
- let pathD = `M ${padding} ${height - (data[0]/maxVal * (height - padding * 2)) - padding}`;
554
- let areaD = `M ${padding} ${height} L ${padding} ${height - (data[0]/maxVal * (height - padding * 2)) - padding}`;
555
-
556
- data.forEach((val, index) => {
557
- if (index === 0) return;
558
- const x = padding + index * stepX;
559
- const y = height - (val / maxVal * (height - padding * 2)) - padding;
560
- pathD += ` L ${x} ${y}`;
561
- areaD += ` L ${x} ${y}`;
562
-
563
- // Create interactive points
564
- const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
565
- circle.setAttribute("cx", x);
566
- circle.setAttribute("cy", y);
567
- circle.setAttribute("r", 4);
568
- circle.setAttribute("fill", "#818cf8");
569
- circle.setAttribute("class", "hover:r-6 transition-all cursor-pointer");
570
-
571
- // Hover events
572
- circle.addEventListener('mouseenter', (e) => {
573
- circle.setAttribute("r", 6);
574
- circle.setAttribute("fill", "#fff");
575
- tooltip.style.opacity = 1;
576
- tooltip.style.left = `${x}px`;
577
- tooltip.style.top = `${y}px`;
578
- document.getElementById('tooltip-value').innerText = val;
579
- });
580
-
581
- circle.addEventListener('mouseleave', () => {
582
- circle.setAttribute("r", 4);
583
- circle.setAttribute("fill", "#818cf8");
584
- tooltip.style.opacity = 0;
585
- });
586
-
587
- pointsGroup.appendChild(circle);
588
- });
589
-
590
- areaD += ` L ${width - padding} ${height} Z`;
591
-
592
- linePath.setAttribute("d", pathD);
593
- areaPath.setAttribute("d", areaD);
594
- }
595
-
596
- // --- Dashboard: Server Simulation ---
597
- function startServerSimulation() {
598
- const loadEl = document.getElementById('server-load');
599
- const barEl = document.getElementById('load-bar');
600
-
601
- setInterval(() => {
602
- const newLoad = Math.floor(Math.random() * 30) + 30; // 30-60%
603
- loadEl.innerText = newLoad;
604
- barEl.style.width = `${newLoad}%`;
605
-
606
- // Color change based on load
607
- if(newLoad > 55) {
608
- barEl.classList.remove('bg-yellow-500', 'bg-emerald-500');
609
- barEl.classList.add('bg-red-500');
610
- } else if (newLoad < 40) {
611
- barEl.classList.remove('bg-yellow-500', 'bg-red-500');
612
- barEl.classList.add('bg-emerald-500');
613
- } else {
614
- barEl.classList.remove('bg-red-500', 'bg-emerald-500');
615
- barEl.classList.add('bg-yellow-500');
616
- }
617
- }, 3000);
618
- }
619
-
620
- // --- Task Manager Logic ---
621
- function renderTasks() {
622
- const list = document.getElementById('task-list');
623
- const empty = document.getElementById('empty-state');
624
- const badge = document.getElementById('task-badge');
625
-
626
- list.innerHTML = '';
627
-
628
- const filteredTasks = state.tasks.filter(t => {
629
- if (state.filter === 'active') return !t.completed;
630
- if (state.filter === 'completed') return t.completed;
631
- return true;
632
- });
633
-
634
- // Update Badge
635
- const activeCount = state.tasks.filter(t => !t.completed).length;
636
- badge.innerText = activeCount;
637
- badge.style.opacity = activeCount > 0 ? 1 : 0;
638
-
639
- if (filteredTasks.length === 0) {
640
- empty.classList.remove('hidden');
641
- empty.classList.add('flex');
642
- } else {
643
- empty.classList.add('hidden');
644
- empty.classList.remove('flex');
645
-
646
- filteredTasks.forEach(task => {
647
- const li = document.createElement('li');
648
- li.className = `flex items-center justify-between p-4 rounded-xl border transition-all ${task.completed ? 'bg-slate-800/30 border-slate-800 opacity-60' : 'bg-slate-800 border-slate-700 hover:border-primary-500/50'}`;
649
-
650
- li.innerHTML = `
651
- <div class="flex items-center gap-4">
652
- <button onclick="toggleTask(${task.id})" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors ${task.completed ? 'bg-emerald-500 border-emerald-500' : 'border-slate-500 hover:border-primary-400'}">
653
- ${task.completed ? '<i class="fa-solid fa-check text-white text-xs"></i>' : ''}
654
- </button>
655
- <span class="${task.completed ? 'line-through text-slate-500' : 'text-slate-200'} font-medium">${task.text}</span>
656
- </div>
657
- <button onclick="deleteTask(${task.id})" class="text-slate-500 hover:text-red-400 transition-colors p-2">
658
- <i class="fa-solid fa-trash"></i>
659
- </button>
660
- `;
661
- list.appendChild(li);
662
- });
663
- }
664
- }
665
-
666
- function addTask() {
667
- const input = document.getElementById('task-input');
668
- const text = input.value.trim();
669
- if (text) {
670
- state.tasks.unshift({
671
- id: Date.now(),
672
- text: text,
673
- completed: false
674
- });
675
- input.value = '';
676
- renderTasks();
677
- showToast('Task added successfully', 'success');
678
- }
679
- }
680
-
681
- function toggleTask(id) {
682
- const task = state.tasks.find(t => t.id === id);
683
- if (task) {
684
- task.completed = !task.completed;
685
- renderTasks();
686
- if(task.completed) triggerConfetti();
687
- }
688
- }
689
-
690
- function deleteTask(id) {
691
- state.tasks = state.tasks.filter(t => t.id !== id);
692
- renderTasks();
693
- showToast('Task deleted', 'neutral');
694
- }
695
-
696
- // --- Settings: Theme Switcher ---
697
- function setTheme(color) {
698
- state.theme = color;
699
- const colors = {
700
- 'indigo': '#6366f1',
701
- 'emerald': '#10b981',
702
- 'rose': '#f43f5e',
703
- 'amber': '#f59e0b',
704
- 'cyan': '#06b6d4'
705
- };
706
-
707
- // Update CSS Variables or specific elements
708
- // Here we just update the preview icon and button rings for simplicity in this demo
709
- document.querySelectorAll('.color-btn').forEach(btn => {
710
- btn.classList.remove('ring-2', 'ring-offset-2', 'ring-offset-slate-900', 'ring-white', 'scale-110');
711
- if(btn.dataset.color === color) {
712
- btn.classList.add('ring-2', 'ring-offset-2', 'ring-offset-slate-900', 'ring-white', 'scale-110');
713
- }
714
- });
715
-
716
- document.getElementById('preview-icon').style.color = colors[color];
717
- showToast(`Theme changed to ${color}`, 'success');
718
- }
719
-
720
- // --- Global Event Listeners ---
721
- function setupEventListeners() {
722
- // Task Input
723
- document.getElementById('btn-add-task').addEventListener('click', addTask);
724
- document.getElementById('task-input').addEventListener('keypress', (e) => {
725
- if (e.key === 'Enter') addTask();
726
- });
727
-
728
- // Task Filters
729
- document.querySelectorAll('.task-filter').forEach(btn => {
730
- btn.addEventListener('click', (e) => {
731
- document.querySelectorAll('.task-filter').forEach(b => {
732
- b.classList.remove('border-primary-500', 'text-white');
733
- b.classList.add('border-transparent', 'text-slate-400');
734
- });
735
- e.target.classList.remove('border-transparent', 'text-slate-400');
736
- e.target.classList.add('border-primary-500', 'text-white');
737
- state.filter = e.target.dataset.filter;
738
- renderTasks();
739
- });
740
- });
741
-
742
- // Optimization Button
743
- document.getElementById('btn-optimize').addEventListener('click', function() {
744
- const originalText = this.innerHTML;
745
- this.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Optimizing...';
746
- this.disabled = true;
747
- this.classList.add('opacity-75');
748
-
749
- setTimeout(() => {
750
- this.innerHTML = '<i class="fa-solid fa-check"></i> Done!';
751
- this.classList.remove('bg-slate-700', 'hover:bg-slate-600');
752
- this.classList.add('bg-emerald-600', 'hover:bg-emerald-500');
753
- showToast('System Optimized! Performance increased by 15%.', 'success');
754
-
755
- setTimeout(() => {
756
- this.innerHTML = originalText;
757
- this.disabled = false;
758
- this.classList.remove('opacity-75', 'bg-emerald-600', 'hover:bg-emerald-500');
759
- this.classList.add('bg-slate-700', 'hover:bg-slate-600');
760
- }, 2000);
761
- }, 2000);
762
- });
763
-
764
- // Theme Buttons
765
- document.querySelectorAll('.color-btn').forEach(btn => {
766
- btn.addEventListener('click', () => setTheme(btn.dataset.color));
767
- });
768
-
769
- // Delete Account Modal Logic
770
- const modal = document.getElementById('modal-overlay');
771
- const modalContent = document.getElementById('modal-content');
772
-
773
- document.getElementById('btn-delete-account').addEventListener('click', () => {
774
- modal.classList.remove('hidden');
775
- // Small delay to allow display:block to apply before opacity transition
776
- setTimeout(() => {
777
- modal.classList.remove('opacity-0');
778
- modalContent.classList.remove('scale-95');
779
- modalContent.classList.add('scale-100');
780
- }, 10);
781
- });
782
-
783
- function closeModal() {
784
- modal.classList.add('opacity-0');
785
- modalContent.classList.remove('scale-100');
786
- modalContent.classList.add('scale-95');
787
- setTimeout(() => {
788
- modal.classList.add('hidden');
789
- }, 300);
790
- }
791
-
792
- document.getElementById('btn-cancel-delete').addEventListener('click', closeModal);
793
- document.getElementById('btn-confirm-delete').addEventListener('click', () => {
794
- showToast('Account deletion initiated...', 'error');
795
- closeModal();
796
- });
797
-
798
- // Close modal on outside click
799
- modal.addEventListener('click', (e) => {
800
- if (e.target === modal) closeModal();
801
- });
802
- }
803
-
804
- // --- Utilities ---
805
- function showToast(message, type = 'neutral') {
806
- const container = document.getElementById('toast-container');
807
- const toast = document.createElement('div');
808
-
809
- const colors = {
810
- success: 'bg-emerald-500',
811
- error: 'bg-red-500',
812
- neutral: 'bg-slate-700'
813
- };
814
-
815
- const icons = {
816
- success: 'fa-check-circle',
817
- error: 'fa-exclamation-circle',
818
- neutral: 'fa-info-circle'
819
- };
820
-
821
- toast.className = `${colors[type]} text-white px-6 py-3 rounded-xl shadow-2xl flex items-center gap-3 transform translate-y-10 opacity-0 transition-all duration-300 pointer-events-auto min-w-[300px]`;
822
- toast.innerHTML = `
823
- <i class="fa-solid ${icons[type]}"></i>
824
- <span class="font-medium">${message}</span>
825
- `;
826
-
827
- container.appendChild(toast);
828
-
829
- // Animate in
830
- requestAnimationFrame(() => {
831
- toast.classList.remove('translate-y-10', 'opacity-0');
832
- });
833
-
834
- // Remove after 3s
835
- setTimeout(() => {
836
- toast.classList.add('translate-y-10', 'opacity-0');
837
- setTimeout(() => toast.remove(), 300);
838
- }, 3000);
839
- }
840
-
841
- function triggerConfetti() {
842
- for(let i=0; i<30; i++) {
843
- const confetti = document.createElement('div');
844
- confetti.classList.add('confetti');
845
- confetti.style.left = Math.random() * 100 + 'vw';
846
- confetti.style.animationDuration = Math.random() * 2 + 1 + 's';
847
- confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
848
- document.body.appendChild(confetti);
849
-
850
- setTimeout(() => confetti.remove(), 3000);
851
- }
852
- }
853
- </script>
854
- </body>
855
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nexus Geometric Suite</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
  fontFamily: {
15
  sans: ['Inter', 'sans-serif'],
16
+ display: ['Space Grotesk', 'sans-serif'],
17
  },
18
  colors: {
19
  slate: {
 
31
  'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
32
  'slide-in': 'slideIn 0.3s ease-out forwards',
33
  'fade-in': 'fadeIn 0.5s ease-out forwards',
34
+ 'float': 'float 20s infinite ease-in-out',
35
+ 'rotate-slow': 'rotate 30s linear infinite',
36
+ 'morph': 'morph 8s ease-in-out infinite',
37
  },
38
  keyframes: {
39
  slideIn: {
 
43
  fadeIn: {
44
  '0%': { opacity: '0' },
45
  '100%': { opacity: '1' },
46
+ },
47
+ float: {
48
+ '0%, 100%': { transform: 'translate(0, 0) rotate(0deg)' },
49
+ '25%': { transform: 'translate(50px, -30px) rotate(5deg)' },
50
+ '50%': { transform: 'translate(-30px, 50px) rotate(-5deg)' },
51
+ '75%': { transform: 'translate(-50px, -20px) rotate(3deg)' },
52
+ },
53
+ rotate: {
54
+ '0%': { transform: 'rotate(0deg)' },
55
+ '100%': { transform: 'rotate(360deg)' },
56
+ },
57
+ morph: {
58
+ '0%, 100%': { borderRadius: '60% 40% 30% 70%/60% 30% 70% 40%' },
59
+ '50%': { borderRadius: '30% 60% 70% 40%/50% 60% 30% 60%' },
60
  }
61
  }
62
  }
 
64
  }
65
  </script>
66
  <style>
67
+ /* Geometric Background Patterns */
68
+ .geo-bg {
69
+ background-color: #020617;
70
+ background-image:
71
+ radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
72
+ radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
73
+ linear-gradient(45deg, rgba(15, 23, 42, 0.9) 0%, transparent 100%),
74
+ repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 11px),
75
+ repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 11px);
76
+ }
77
+
78
+ /* Geometric Shapes */
79
+ .geo-shape {
80
+ position: absolute;
81
+ pointer-events: none;
82
+ z-index: 0;
83
+ }
84
+
85
+ .geo-triangle {
86
+ width: 0;
87
+ height: 0;
88
+ border-left: 50px solid transparent;
89
+ border-right: 50px solid transparent;
90
+ border-bottom: 100px solid rgba(99, 102, 241, 0.1);
91
+ filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3));
92
+ }
93
+
94
+ .geo-circle {
95
+ border-radius: 50%;
96
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2));
97
+ backdrop-filter: blur(10px);
98
+ border: 1px solid rgba(255, 255, 255, 0.1);
99
+ }
100
+
101
+ .geo-hexagon {
102
+ width: 100px;
103
+ height: 57.74px;
104
+ background: rgba(255, 255, 255, 0.03);
105
+ position: relative;
106
+ margin: 28.87px 0;
107
+ border-left: 2px solid rgba(99, 102, 241, 0.3);
108
+ border-right: 2px solid rgba(99, 102, 241, 0.3);
109
+ }
110
+
111
+ .geo-hexagon:before,
112
+ .geo-hexagon:after {
113
+ content: "";
114
+ position: absolute;
115
+ width: 0;
116
+ border-left: 50px solid transparent;
117
+ border-right: 50px solid transparent;
118
+ }
119
+
120
+ .geo-hexagon:before {
121
+ bottom: 100%;
122
+ border-bottom: 28.87px solid rgba(255, 255, 255, 0.03);
123
+ border-bottom-color: rgba(255, 255, 255, 0.03);
124
+ }
125
+
126
+ .geo-hexagon:after {
127
+ top: 100%;
128
+ border-top: 28.87px solid rgba(255, 255, 255, 0.03);
129
+ }
130
+
131
+ /* Glass Cards with Geometric Borders */
132
+ .glass-card {
133
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
134
+ backdrop-filter: blur(20px);
135
+ border: 1px solid rgba(255, 255, 255, 0.1);
136
+ position: relative;
137
+ overflow: hidden;
138
+ }
139
+
140
+ .glass-card::before {
141
+ content: '';
142
+ position: absolute;
143
+ top: 0;
144
+ left: 0;
145
+ right: 0;
146
+ height: 2px;
147
+ background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
148
+ }
149
+
150
+ .glass-card::after {
151
+ content: '';
152
+ position: absolute;
153
+ bottom: 0;
154
+ right: 0;
155
+ width: 100px;
156
+ height: 100px;
157
+ background: linear-gradient(135deg, transparent 50%, rgba(99, 102, 241, 0.05) 50%);
158
+ pointer-events: none;
159
+ }
160
+
161
  /* Custom Scrollbar */
162
  ::-webkit-scrollbar {
163
  width: 8px;
164
  }
165
  ::-webkit-scrollbar-track {
166
+ background: #0f172a;
167
  }
168
  ::-webkit-scrollbar-thumb {
169
+ background: #334155;
170
  border-radius: 4px;
171
  }
172
  ::-webkit-scrollbar-thumb:hover {
173
+ background: #475569;
174
  }
175
 
176
+ /* Toggle Switch */
177
+ .toggle-checkbox:checked {
178
+ right: 0;
179
+ border-color: #6366f1;
 
 
180
  }
181
+ .toggle-checkbox:checked + .toggle-label {
182
+ background-color: #6366f1;
 
 
 
183
  }
184
 
185
+ /* Chart Animation */
186
  .chart-line {
187
  stroke-dasharray: 1000;
188
  stroke-dashoffset: 1000;
 
190
  }
191
 
192
  @keyframes drawLine {
193
+ to { stroke-dashoffset: 0; }
 
 
194
  }
195
 
 
 
 
 
 
 
 
 
 
196
  /* Confetti */
197
  .confetti {
198
  position: absolute;
199
  width: 10px;
200
  height: 10px;
 
201
  animation: fall linear forwards;
202
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
203
  }
204
+
205
  @keyframes fall {
206
  to { transform: translateY(100vh) rotate(720deg); }
207
  }
208
+
209
+ /* Geometric Button Hover */
210
+ .geo-btn {
211
+ position: relative;
212
+ overflow: hidden;
213
+ transition: all 0.3s ease;
214
+ }
215
+ .geo-btn::before {
216
+ content: '';
217
+ position: absolute;
218
+ top: 50%;
219
+ left: 50%;
220
+ width: 0;
221
+ height: 0;
222
+ background: rgba(255,255,255,0.1);
223
+ transform: translate(-50%, -50%) rotate(45deg);
224
+ transition: width 0.6s, height 0.6s;
225
+ }
226
+ .geo-btn:hover::before {
227
+ width: 300px;
228
+ height: 300px;
229
+ }
230
+
231
+ /* Grid Pattern Overlay */
232
+ .grid-pattern {
233
+ background-image:
234
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
235
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
236
+ background-size: 50px 50px;
237
+ }
238
  </style>
239
  </head>
240
+ <body class="geo-bg text-slate-200 font-sans antialiased overflow-hidden h-screen selection:bg-primary-500 selection:text-white">
241
+
242
+ <!-- Floating Geometric Background Elements -->
243
+ <div class="fixed inset-0 overflow-hidden pointer-events-none">
244
+ <div class="geo-shape geo-triangle top-20 left-10 animate-float" style="animation-delay: 0s; opacity: 0.3;"></div>
245
+ <div class="geo-shape geo-circle w-32 h-32 top-40 right-20 animate-morph" style="animation-delay: 2s;"></div>
246
+ <div class="geo-shape geo-hexagon bottom-40 left-20 animate-float" style="animation-delay: 4s; opacity: 0.2;"></div>
247
+ <div class="geo-shape geo-circle w-48 h-48 bottom-20 right-40 animate-rotate-slow" style="border: 2px solid rgba(99, 102, 241, 0.1); background: transparent;"></div>
248
+ <div class="geo-shape w-0 h-0 top-60 left-1/3 animate-float" style="border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 60px solid rgba(236, 72, 153, 0.1); animation-delay: 6s;"></div>
249
+ </div>
250
 
251
  <!-- App Container -->
252
+ <div class="flex h-full relative z-10">
253
+
254
+ <!-- Sidebar with Geometric Accent -->
255
+ <aside class="w-20 lg:w-64 bg-slate-900/90 backdrop-blur-xl border-r border-slate-800 flex flex-col justify-between relative overflow-hidden">
256
+ <!-- Geometric Corner Accent -->
257
+ <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-primary-500/20 to-transparent"></div>
258
+ <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-primary-500 via-purple-500 to-transparent"></div>
259
+
260
  <div>
261
+ <div class="h-20 flex items-center justify-center lg:justify-start lg:px-6 border-b border-slate-800 relative">
262
+ <div class="w-10 h-10 relative">
263
+ <div class="absolute inset-0 bg-primary-500 rotate-45 transform"></div>
264
+ <div class="absolute inset-1 bg-slate-900 rotate-45 transform flex items-center justify-center">
265
+ <i class="fa-solid fa-layer-group text-primary-400 text-sm"></i>
266
+ </div>
267
  </div>
268
+ <span class="ml-4 font-display font-bold text-xl hidden lg:block tracking-tight">NEXUS<span class="text-primary-400">.OS</span></span>
269
  </div>
270
 
271
+ <nav class="mt-8 px-2 lg:px-4 space-y-2">
272
+ <button onclick="switchTab('dashboard')" id="nav-dashboard" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group relative overflow-hidden active-nav bg-slate-800 text-white">
273
+ <div class="absolute left-0 top-0 bottom-0 w-1 bg-primary-500 rounded-r"></div>
274
  <i class="fa-solid fa-chart-pie w-6 text-center group-hover:text-primary-400 transition-colors"></i>
275
  <span class="ml-3 hidden lg:block font-medium">Dashboard</span>
276
  </button>
277
+ <button onclick="switchTab('tasks')" id="nav-tasks" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group relative overflow-hidden">
278
+ <div class="absolute left-0 top-0 bottom-0 w-1 bg-transparent group-hover:bg-primary-500 rounded-r transition-all"></div>
279
  <i class="fa-solid fa-list-check w-6 text-center group-hover:text-primary-400 transition-colors"></i>
280
+ <span class="ml-3 hidden lg:block font-medium">Tasks</span>
281
  <span id="task-badge" class="ml-auto hidden lg:flex bg-primary-500 text-xs font-bold px-2 py-0.5 rounded-full text-white opacity-0 transition-opacity">0</span>
282
  </button>
283
+ <button onclick="switchTab('settings')" id="nav-settings" class="w-full flex items-center p-3 rounded-xl text-slate-400 hover:bg-slate-800 hover:text-white transition-all group relative overflow-hidden">
284
+ <div class="absolute left-0 top-0 bottom-0 w-1 bg-transparent group-hover:bg-primary-500 rounded-r transition-all"></div>
285
  <i class="fa-solid fa-sliders w-6 text-center group-hover:text-primary-400 transition-colors"></i>
286
  <span class="ml-3 hidden lg:block font-medium">Settings</span>
287
  </button>
288
  </nav>
289
  </div>
290
 
291
+ <div class="p-4 border-t border-slate-800 relative">
292
  <div class="flex items-center gap-3">
293
+ <div class="relative">
294
+ <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User" class="w-10 h-10 rounded-lg bg-slate-700 border-2 border-slate-600 transform rotate-3 hover:rotate-0 transition-transform">
295
+ <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-emerald-500 border-2 border-slate-900 rounded-full"></div>
296
+ </div>
297
  <div class="hidden lg:block">
298
+ <p class="text-sm font-semibold text-white font-display">Admin User</p>
299
  <p class="text-xs text-slate-500">Pro Plan</p>
300
  </div>
301
  </div>
 
304
 
305
  <!-- Main Content -->
306
  <main class="flex-1 flex flex-col relative overflow-hidden">
307
+ <!-- Grid Pattern Overlay -->
308
+ <div class="absolute inset-0 grid-pattern opacity-50 pointer-events-none"></div>
309
+
310
  <!-- Top Header -->
311
+ <header class="h-20 glass border-b border-slate-800 flex items-center justify-between px-6 z-10 relative">
 
312
  <div class="flex items-center gap-4">
313
+ <h2 id="page-title" class="text-2xl font-display font-bold text-white tracking-tight">Dashboard Overview</h2>
314
+ <div class="hidden md:flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700 text-xs text-slate-400">
315
+ <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
316
+ System Online
317
+ </div>
318
+ </div>
319
+ <div class="flex items-center gap-4">
320
+ <button id="btn-notification" class="relative p-3 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-all geo-btn">
321
  <i class="fa-regular fa-bell text-lg"></i>
322
+ <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
323
  </button>
324
+ <button class="geo-btn bg-primary-600 hover:bg-primary-500 text-white px-6 py-3 rounded-xl text-sm font-medium transition-all shadow-lg shadow-primary-600/20 flex items-center gap-2 relative overflow-hidden" onclick="alert('Quick Action Triggered')">
325
+ <i class="fa-solid fa-plus"></i>
326
+ <span class="relative z-10">New Project</span>
327
  </button>
328
  </div>
329
  </header>
330
 
331
  <!-- Scrollable Content Area -->
332
  <div class="flex-1 overflow-y-auto p-6 relative" id="main-scroll">
333
+
334
  <!-- VIEW: DASHBOARD -->
335
+ <div id="view-dashboard" class="space-y-6 animate-fade-in max-w-7xl mx-auto">
336
+ <!-- Stats Grid with Geometric Cards -->
337
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
338
  <!-- Stat Card 1 -->
339
+ <div class="glass-card p-6 rounded-2xl relative overflow-hidden group hover:border-primary-500/30 transition-all duration-500">
340
+ <div class="absolute top-0 right-0 w-24 h-24 bg-primary-500/10 rotate-45 transform translate-x-12 -translate-y-12 group-hover:rotate-90 transition-transform duration-700"></div>
341
+ <div class="relative z-10">
342
+ <div class="flex items-center justify-between mb-4">
343
+ <div class="w-12 h-12 rounded-xl bg-primary-500/20 flex items-center justify-center border border-primary-500/30">
344
+ <i class="fa-solid fa-users text-primary-400 text-xl"></i>
345
+ </div>
346
+ <span class="text-emerald-400 text-sm font-medium flex items-center gap-1">
347
+ <i class="fa-solid fa-arrow-trend-up"></i> +12.5%
348
+ </span>
349
+ </div>
350
+ <p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-1">Total Visitors</p>
351
+ <h3 class="text-4xl font-display font-bold text-white counter" data-target="8452">0</h3>
352
  </div>
353
+ <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-500 to-purple-500"></div>
354
  </div>
355
 
356
  <!-- Stat Card 2 -->
357
+ <div class="glass-card p-6 rounded-2xl relative overflow-hidden group hover:border-yellow-500/30 transition-all duration-500">
358
+ <div class="absolute top-0 right-0 w-24 h-24 bg-yellow-500/10 rotate-12 transform translate-x-8 -translate-y-8 group-hover:rotate-45 transition-transform duration-700"></div>
359
+ <div class="relative z-10">
360
+ <div class="flex items-center justify-between mb-4">
361
+ <div class="w-12 h-12 rounded-full bg-yellow-500/20 flex items-center justify-center border border-yellow-500/30">
362
+ <i class="fa-solid fa-bolt text-yellow-400 text-xl"></i>
363
+ </div>
364
+ <span class="text-slate-400 text-sm font-medium">Live</span>
365
+ </div>
366
+ <p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-1">Server Load</p>
367
+ <div class="flex items-end gap-3">
368
+ <h3 class="text-4xl font-display font-bold text-white"><span id="server-load">42</span>%</h3>
369
+ <div class="flex-1 h-2 bg-slate-700 rounded-full mb-3 overflow-hidden">
370
+ <div id="load-bar" class="bg-yellow-500 h-full rounded-full transition-all duration-1000 relative" style="width: 42%">
371
+ <div class="absolute inset-0 bg-white/20 animate-pulse"></div>
372
+ </div>
373
+ </div>
374
+ </div>
375
  </div>
376
  </div>
377
 
378
  <!-- Stat Card 3 -->
379
+ <div class="glass-card p-6 rounded-2xl relative overflow-hidden group hover:border-emerald-500/30 transition-all duration-500">
380
+ <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-emerald-500/10 rounded-full group-hover:scale-150 transition-transform duration-700"></div>
381
+ <div class="relative z-10">
382
+ <div class="flex items-center justify-between mb-4">
383
+ <div class="w-12 h-12 rounded-lg bg-emerald-500/20 flex items-center justify-center border border-emerald-500/30 transform rotate-3">
384
+ <i class="fa-solid fa-wallet text-emerald-400 text-xl"></i>
385
+ </div>
386
+ <span class="text-emerald-400 text-sm font-medium flex items-center gap-1">
387
+ <i class="fa-solid fa-arrow-trend-up"></i> +4.2%
388
+ </span>
389
+ </div>
390
+ <p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-1">Revenue</p>
391
+ <h3 class="text-4xl font-display font-bold text-white">$<span class="counter" data-target="12450">0</span></h3>
392
  </div>
393
  </div>
394
  </div>
395
 
396
  <!-- Interactive Chart Section -->
397
+ <div class="glass-card p-8 rounded-2xl relative overflow-hidden">
398
+ <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary-500 via-purple-500 to-emerald-500 opacity-50"></div>
399
+ <div class="flex justify-between items-center mb-8">
400
+ <div>
401
+ <h3 class="text-xl font-display font-bold text-white mb-1">Traffic Overview</h3>
402
+ <p class="text-slate-400 text-sm">Real-time visitor analytics</p>
403
+ </div>
404
+ <div class="flex gap-2 bg-slate-800/50 p-1 rounded-xl border border-slate-700">
405
+ <button class="px-4 py-2 text-xs rounded-lg text-slate-400 hover:text-white transition-all">Day</button>
406
+ <button class="px-4 py-2 text-xs rounded-lg bg-primary-600 text-white shadow-lg shadow-primary-500/30">Week</button>
407
+ <button class="px-4 py-2 text-xs rounded-lg text-slate-400 hover:text-white transition-all">Month</button>
408
  </div>
409
  </div>
410
+
411
+ <!-- SVG Chart with Artistic Grid -->
412
+ <div class="relative h-80 w-full">
413
  <svg id="traffic-chart" class="w-full h-full overflow-visible" preserveAspectRatio="none">
414
  <!-- Grid Lines -->
 
 
 
 
 
 
 
415
  <defs>
416
+ <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
417
+ <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
418
+ </pattern>
419
  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
420
+ <stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.3" />
421
  <stop offset="100%" style="stop-color:#6366f1;stop-opacity:0" />
422
  </linearGradient>
423
  </defs>
424
+ <rect width="100%" height="100%" fill="url(#grid)" />
425
 
426
+ <!-- Chart Line -->
427
+ <path id="chart-area" d="" fill="url(#gradient)" />
428
  <path id="chart-line" d="" fill="none" stroke="#818cf8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="chart-line" />
429
 
430
+ <!-- Data Points -->
431
  <g id="chart-points"></g>
432
  </svg>
433
+
434
  <!-- Tooltip -->
435
+ <div id="chart-tooltip" class="absolute pointer-events-none bg-slate-800 border border-slate-600 text-white text-xs rounded-lg px-3 py-2 opacity-0 transition-all shadow-2xl transform -translate-x-1/2 -translate-y-full mb-2 font-mono">
436
  <span id="tooltip-value">0</span> Visits
437
+ <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 bg-slate-800 border-r border-b border-slate-600"></div>
438
  </div>
439
  </div>
440
  </div>
441
 
442
  <!-- Interactive Elements Row -->
443
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
444
+ <!-- System Controls -->
445
+ <div class="glass-card p-8 rounded-2xl relative">
446
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-blue-500/10 to-transparent rounded-bl-full"></div>
447
+ <h3 class="text-lg font-display font-bold text-white mb-6 flex items-center gap-2">
448
+ <i class="fa-solid fa-microchip text-primary-400"></i>
449
+ System Controls
450
+ </h3>
451
+
452
+ <div class="space-y-6">
453
+ <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-primary-500/30 transition-all group">
454
+ <div class="flex items-center gap-4">
455
+ <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform">
456
+ <i class="fa-solid fa-shield-halved"></i>
457
  </div>
458
+ <div>
459
+ <p class="text-white font-medium">Firewall Protection</p>
460
+ <p class="text-xs text-slate-400">Active monitoring</p>
461
  </div>
462
  </div>
463
+ <div class="relative inline-block w-12 align-middle select-none">
464
+ <input type="checkbox" id="toggle-firewall" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0 top-0" checked/>
465
+ <label for="toggle-firewall" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-700 cursor-pointer transition-colors duration-300"></label>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-purple-500/30 transition-all group">
470
+ <div class="flex items-center gap-4">
471
+ <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400 group-hover:scale-110 transition-transform">
472
+ <i class="fa-solid fa-database"></i>
473
  </div>
474
+ <div>
475
+ <p class="text-white font-medium">Database Backup</p>
476
+ <p class="text-xs text-slate-400">Auto-sync disabled</p>
477
  </div>
478
  </div>
479
+ <div class="relative inline-block w-12 align-middle select-none">
480
+ <input type="checkbox" id="toggle-db" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0 top-0"/>
481
+ <label for="toggle-db" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-700 cursor-pointer transition-colors duration-300"></label>
482
+ </div>
483
  </div>
484
  </div>
485
+
486
+ <button id="btn-optimize" class="mt-6 w-full py-4 bg-slate-700 hover:bg-slate-600 text-white rounded-xl transition-all flex items-center justify-center gap-2 geo-btn font-medium group">
487
+ <i class="fa-solid fa-rocket group-hover:-translate-y-1 transition-transform"></i>
488
+ <span>Run System Optimization</span>
489
+ </button>
490
  </div>
491
 
492
+ <!-- Appearance Settings -->
493
+ <div class="glass-card p-8 rounded-2xl relative overflow-hidden">
494
+ <div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-purple-500/10 to-transparent rounded-bl-full"></div>
495
+ <h3 class="text-lg font-display font-bold text-white mb-2">Appearance</h3>
496
+ <p class="text-sm text-slate-400 mb-8">Customize the accent color theme</p>
497
+
498
+ <div class="grid grid-cols-5 gap-4 mb-8">
499
+ <button class="color-btn w-12 h-12 rounded-xl bg-indigo-500 ring-2 ring-offset-2 ring-offset-slate-900 ring-white transition-all hover:scale-110 shadow-lg shadow-indigo-500/30" data-color="indigo"></button>
500
+ <button class="color-btn w-12 h-12 rounded-xl bg-emerald-500 hover:scale-110 transition-all shadow-lg shadow-emerald-500/30" data-color="emerald"></button>
501
+ <button class="color-btn w-12 h-12 rounded-xl bg-rose-500 hover:scale-110 transition-all shadow-lg shadow-rose-500/30" data-color="rose"></button>
502
+ <button class="color-btn w-12 h-12 rounded-xl bg-amber-500 hover:scale-110 transition-all shadow-lg shadow-amber-500/30" data-color="amber"></button>
503
+ <button class="color-btn w-12 h-12 rounded-xl bg-cyan-500 hover:scale-110 transition-all shadow-lg shadow-cyan-500/30" data-color="cyan"></button>
504
  </div>
505
+
506
+ <div class="p-6 bg-slate-800/50 rounded-xl border border-slate-700 relative overflow-hidden">
507
+ <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full hover:translate-x-full transition-transform duration-1000"></div>
508
  <div class="flex items-center gap-4">
509
+ <div class="w-14 h-14 rounded-xl bg-slate-700 flex items-center justify-center text-2xl relative overflow-hidden" id="preview-icon-bg">
510
+ <div class="absolute inset-0 bg-gradient-to-br from-transparent to-black/20"></div>
511
  <i class="fa-solid fa-paintbrush text-indigo-400" id="preview-icon"></i>
512
  </div>
513
  <div>
514
+ <h4 class="text-white font-medium font-display">Live Preview</h4>
515
+ <p class="text-xs text-slate-400">Selected theme applies instantly</p>
516
  </div>
517
  </div>
518
  </div>
 
522
 
523
  <!-- VIEW: TASKS -->
524
  <div id="view-tasks" class="hidden space-y-6 animate-slide-in max-w-4xl mx-auto">
525
+ <div class="glass-card p-8 rounded-2xl relative">
526
+ <div class="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-primary-500 to-purple-500"></div>
527
+ <div class="flex items-center justify-between mb-8">
528
+ <div>
529
+ <h3 class="text-2xl font-display font-bold text-white mb-1">Task Manager</h3>
530
+ <p class="text-slate-400 text-sm">Organize your workflow efficiently</p>
531
+ </div>
532
+ <div class="w-12 h-12 rounded-xl bg-primary-500/20 flex items-center justify-center border border-primary-500/30">
533
+ <i class="fa-solid fa-list-check text-primary-400 text-xl"></i>
534
+ </div>
535
+ </div>
536
+
537
  <!-- Input Area -->
538
  <div class="flex gap-3 mb-8">
539
+ <div class="flex-1 relative">
540
+ <input type="text" id="task-input" placeholder="What needs to be done?"
541
+ class="w-full bg-slate-800/50 border border-slate-700 text-white rounded-xl px-4 py-4 pl-12 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all placeholder-slate-500">
542
+ <i class="fa-solid fa-plus absolute left-4 top-1/2 -translate-y-1/2 text-slate-500"></i>
543
+ </div>
544
+ <button id="btn-add-task" class="geo-btn bg-primary-600 hover:bg-primary-500 text-white px-6 py-4 rounded-xl font-medium transition-all shadow-lg shadow-primary-600/20 flex items-center gap-2">
545
+ <span>Add Task</span>
546
+ <i class="fa-solid fa-arrow-right"></i>
547
  </button>
548
  </div>
549
 
550
  <!-- Filters -->
551
+ <div class="flex gap-6 border-b border-slate-700 mb-6">
552
+ <button class="task-filter pb-4 border-b-2 border-primary-500 text-white font-medium transition-all" data-filter="all">All Tasks</button>
553
+ <button class="task-filter pb-4 border-b-2 border-transparent text-slate-400 hover:text-white transition-all" data-filter="active">Active</button>
554
+ <button class="task-filter pb-4 border-b-2 border-transparent text-slate-400 hover:text-white transition-all" data-filter="completed">Completed</button>
555
  </div>
556
 
557
  <!-- Task List -->
558
  <ul id="task-list" class="space-y-3">
559
  <!-- Tasks injected via JS -->
560
  </ul>
561
+
562
  <!-- Empty State -->
563
+ <div id="empty-state" class="hidden flex-col items-center justify-center py-16 text-center">
564
+ <div class="w-24 h-24 rounded-2xl bg-slate-800/50 flex items-center justify-center mb-6 rotate-3 hover:rotate-0 transition-transform duration-500 border border-slate-700">
565
+ <i class="fa-solid fa-clipboard-check text-4xl text-slate-600"></i>
566
  </div>
567
+ <p class="text-slate-400 text-lg">No tasks found. Enjoy your free time!</p>
568
  </div>
569
  </div>
570
  </div>
571
 
572
  <!-- VIEW: SETTINGS -->
573
  <div id="view-settings" class="hidden space-y-6 animate-slide-in max-w-3xl mx-auto">
574
+ <div class="glass-card p-8 rounded-2xl relative">
575
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-slate-700/30 to-transparent rounded-bl-full"></div>
576
 
577
+ <h3 class="text-2xl font-display font-bold text-white mb-8">System Settings</h3>
578
+
579
+ <!-- Profile Section -->
580
+ <div class="flex items-center gap-6 pb-8 border-b border-slate-700 mb-8">
581
+ <div class="relative group cursor-pointer">
582
+ <div class="absolute inset-0 bg-gradient-to-r from-primary-500 to-purple-500 rounded-2xl rotate-3 group-hover:rotate-6 transition-transform"></div>
583
+ <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="relative w-24 h-24 rounded-2xl bg-slate-800 border-2 border-slate-700 group-hover:scale-105 transition-transform">
584
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/50 rounded-2xl">
585
+ <i class="fa-solid fa-camera text-white text-2xl"></i>
 
 
 
 
586
  </div>
587
  </div>
588
+ <div class="flex-1">
589
+ <h4 class="text-xl font-display font-bold text-white mb-1">Admin User</h4>
590
+ <p class="text-slate-400 mb-4">admin@nexus.dev</p>
591
+ <button class="geo-btn bg-slate-700 hover:bg-slate-600 text-white px-6 py-2 rounded-xl text-sm font-medium transition-all">Edit Profile</button>
592
+ </div>
593
+ </div>
594
 
595
+ <!-- General Settings -->
596
+ <div class="space-y-6 mb-8">
597
+ <h5 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">General</h5>
598
+
599
+ <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50">
600
+ <div>
601
+ <p class="text-white font-medium">Email Notifications</p>
602
+ <p class="text-sm text-slate-400">Receive daily summaries</p>
603
+ </div>
604
+ <div class="relative inline-block w-12 align-middle select-none">
605
+ <input type="checkbox" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0 top-0"/>
606
+ <label class="toggle-label block overflow-hidden h-6 rounded-full bg-primary-600 cursor-pointer transition-colors duration-300"></label>
 
607
  </div>
608
+ </div>
609
 
610
+ <div class="flex items-center justify-between p-4 rounded-xl bg-slate-800/30 border border-slate-700/50">
611
+ <div>
612
+ <p class="text-white font-medium">Two-Factor Authentication</p>
613
+ <p class="text-sm text-slate-400">Secure your account</p>
 
 
614
  </div>
615
+ <button class="text-primary-400 text-sm font-medium hover:text-primary-300 transition-colors">Enable</button>
616
  </div>
617
+ </div>
618
 
619
+ <!-- Danger Zone -->
620
+ <div class="pt-8 border-t border-slate-700">
621
+ <h5 class="text-sm font-bold text-red-500 uppercase tracking-wider mb-4">Danger Zone</h5>
622
+ <div class="flex items-center justify-between bg-red-500/10 border border-red-500/20 p-6 rounded-xl">
623
+ <div>
624
+ <p class="text-red-400 font-medium font-display text-lg">Delete Account</p>
625
+ <p class="text-sm text-red-400/70">This action cannot be undone.</p>
 
 
626
  </div>
627
+ <button id="btn-delete-account" class="geo-btn bg-red-600 hover:bg-red-500 text-white px-6 py-3 rounded-xl text-sm font-medium transition-all shadow-lg shadow-red-600/20">
628
+ Delete
629
+ </button>
630
  </div>
631
  </div>
632
  </div>
 
634
 
635
  <!-- Footer Credit -->
636
  <div class="mt-12 text-center pb-6">
637
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
638
+ class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-slate-800/50 border border-slate-700 text-slate-400 hover:text-white hover:border-primary-500/50 transition-all group">
639
+ <span class="w-2 h-2 rounded-full bg-primary-500 animate-pulse"></span>
640
+ Built with anycoder
641
+ <i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-0 group-hover:opacity-100 transition-opacity"></i>
642
+ </a>
643
  </div>
644
 
645
  </div>
 
651
 
652
  <!-- Modal Overlay -->
653
  <div id="modal-overlay" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center opacity-0 transition-opacity duration-300">
654
+ <div class="glass-card p-8 rounded-2xl max-w-md w-full mx-4 transform scale-95 transition-transform duration-300 border-red-500/30" id="modal-content">
655
  <div class="text-center">
656
+ <div class="w-20 h-20 bg-red-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6 rotate-3">
657
+ <i class="fa-solid fa-triangle-exclamation text-3xl text-red-500"></i>
658
  </div>
659
+ <h3 class="text-2xl font-display font-bold text-white mb-2">Are you sure?</h3>
660
+ <p class="text-slate-400 mb-8">This action will permanently delete your account and all associated data.</p>
661
  <div class="flex gap-3 justify-center">
662
+ <button id="btn-cancel-delete" class="geo-btn px-6 py-3 rounded-xl bg-slate-700 text-white hover:bg-slate-600 transition-all font-medium">Cancel</button>
663
+ <button id="btn-confirm-delete" class="geo-btn px-6 py-3 rounded-xl bg-red-600 text-white hover:bg-red-500 transition-all font-medium shadow-lg shadow-red-600/20">Yes, Delete</button>
664
  </div>
665
  </div>
666
  </div>
 
693
  document.querySelectorAll('nav button').forEach(btn => {
694
  btn.classList.remove('bg-slate-800', 'text-white');
695
  btn.classList.add('text-slate-400');
696
+ btn.querySelector('div.absolute')?.classList.remove('bg-primary-500');
697
+ btn.querySelector('div.absolute')?.classList.add('bg-transparent');
698
  });
699
+
700
  const activeBtn = document.getElementById(`nav-${tabName}`);
701
  activeBtn.classList.add('bg-slate-800', 'text-white');
702
  activeBtn.classList.remove('text-slate-400');
703
+ activeBtn.querySelector('div.absolute').classList.add('bg-primary-500');
704
+ activeBtn.querySelector('div.absolute').classList.remove('bg-transparent');
705
 
706
  // Update View
707
  document.querySelectorAll('[id^="view-"]').forEach(view => view.classList.add('hidden'));
 
710
 
711
  // Trigger animation reset
712
  activeView.classList.remove('animate-fade-in', 'animate-slide-in');
713
+ void activeView.offsetWidth;
714
  activeView.classList.add('animate-fade-in');
715
 
716
  // Update Title
 
719
  'tasks': 'Task Management',
720
  'settings': 'System Settings'
721
  };
722
+ document.getElementById('page-title