Hugging Face's logo

Spaces:
matthewspring
/
anycoder-b0ac2538
Running

App Files Community
matthewspring commited on
Commit
a378f07
·
verified ·
1 Parent(s): 444f038

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +855 -19
index.html CHANGED
@@ -1,19 +1,855 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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: {
19
+ 850: '#1e293b',
20
+ 900: '#0f172a',
21
+ 950: '#020617',
22
+ },
23
+ primary: {
24
+ 400: '#818cf8',
25
+ 500: '#6366f1',
26
+ 600: '#4f46e5',
27
+ }
28
+ },
29
+ animation: {
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: {
36
+ '0%': { transform: 'translateY(-10px)', opacity: '0' },
37
+ '100%': { transform: 'translateY(0)', opacity: '1' },
38
+ },
39
+ fadeIn: {
40
+ '0%': { opacity: '0' },
41
+ '100%': { opacity: '1' },
42
+ }
43
+ }
44
+ }
45
+ }
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;
82
+ animation: drawLine 2s ease-out forwards;
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>
153
+ </div>
154
+ </aside>
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>
333
+ </div>
334
+ </div>
335
+ </div>
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>
430
+ </div>
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>
440
+ </main>
441
+ </div>
442
+
443
+ <!-- Toast Notification Container -->
444
+ <div id="toast-container" class="fixed bottom-6 right-6 z-50 flex flex-col gap-3 pointer-events-none"></div>
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>
461
+ </div>
462
+
463
+ <script>
464
+ // --- State Management ---
465
+ const state = {
466
+ tasks: [
467
+ { id: 1, text: "Review Q3 Analytics", completed: false },
468
+ { id: 2, text: "Update Server Config", completed: true },
469
+ { id: 3, text: "Team Meeting at 2 PM", completed: false }
470
+ ],
471
+ filter: 'all',
472
+ theme: 'indigo'
473
+ };
474
+
475
+ // --- Initialization ---
476
+ document.addEventListener('DOMContentLoaded', () => {
477
+ initCounters();
478
+ initChart();
479
+ renderTasks();
480
+ setupEventListeners();
481
+ startServerSimulation();
482
+ });
483
+
484
+ // --- Navigation ---
485
+ function switchTab(tabName) {
486
+ // Update Nav UI
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'));
497
+ const activeView = document.getElementById(`view-${tabName}`);
498
+ activeView.classList.remove('hidden');
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
506
+ const titles = {
507
+ 'dashboard': 'Dashboard Overview',
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>