Hugging Face's logo

Spaces:
samirerty
/
anycoder-9a2f5d64
Running

App Files Community
samirerty commited on
Commit
dfb998b
·
verified ·
1 Parent(s): adcbf56

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +572 -19
index.html CHANGED
@@ -1,19 +1,572 @@
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>Dashboard | Glass Interface</title>
7
+
8
+ <!-- Importing Inter font for clean, premium typography -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
12
+
13
+ <!-- Importing Phosphor Icons for modern, minimal icons -->
14
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
15
+
16
+ <style>
17
+ :root {
18
+ /* Color Palette - Dark Muted & Glass */
19
+ --bg-color-1: #1a1c20;
20
+ --bg-color-2: #252830;
21
+ --bg-color-3: #2e323c;
22
+
23
+ --glass-border: rgba(255, 255, 255, 0.06);
24
+ --glass-bg: rgba(30, 32, 40, 0.4);
25
+ --glass-highlight: rgba(255, 255, 255, 0.03);
26
+
27
+ --text-primary: #e2e4e9;
28
+ --text-secondary: #8b8f9e;
29
+ --text-tertiary: #5c6170;
30
+
31
+ --accent-glow: rgba(100, 116, 139, 0.15);
32
+
33
+ --spacing-xs: 8px;
34
+ --spacing-sm: 16px;
35
+ --spacing-md: 24px;
36
+ --spacing-lg: 32px;
37
+
38
+ --radius-sm: 8px;
39
+ --radius-md: 12px;
40
+ --radius-lg: 20px;
41
+
42
+ --font-main: 'Inter', sans-serif;
43
+ }
44
+
45
+ * {
46
+ box-sizing: border-box;
47
+ margin: 0;
48
+ padding: 0;
49
+ -webkit-font-smoothing: antialiased;
50
+ }
51
+
52
+ body {
53
+ font-family: var(--font-main);
54
+ background-color: var(--bg-color-1);
55
+ /* Muted dark gradient background */
56
+ background-image:
57
+ radial-gradient(circle at 15% 50%, rgba(50, 60, 80, 0.15) 0%, transparent 25%),
58
+ radial-gradient(circle at 85% 30%, rgba(30, 35, 45, 0.15) 0%, transparent 25%);
59
+ color: var(--text-primary);
60
+ height: 100vh;
61
+ overflow: hidden;
62
+ display: flex;
63
+ flex-direction: column;
64
+ }
65
+
66
+ /* --- Header --- */
67
+ header {
68
+ height: 60px;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: space-between;
72
+ padding: 0 var(--spacing-md);
73
+ border-bottom: 1px solid var(--glass-border);
74
+ background: rgba(20, 22, 28, 0.5);
75
+ backdrop-filter: blur(12px);
76
+ -webkit-backdrop-filter: blur(12px);
77
+ z-index: 10;
78
+ }
79
+
80
+ .brand {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 12px;
84
+ font-weight: 500;
85
+ letter-spacing: -0.01em;
86
+ color: var(--text-primary);
87
+ }
88
+
89
+ .brand-icon {
90
+ font-size: 24px;
91
+ color: var(--text-secondary);
92
+ }
93
+
94
+ .built-with {
95
+ font-size: 12px;
96
+ color: var(--text-tertiary);
97
+ text-decoration: none;
98
+ opacity: 0.6;
99
+ transition: opacity 0.2s;
100
+ }
101
+
102
+ .built-with:hover {
103
+ opacity: 1;
104
+ }
105
+
106
+ /* --- Main Layout --- */
107
+ main {
108
+ flex: 1;
109
+ display: flex;
110
+ padding: var(--spacing-md);
111
+ gap: var(--spacing-md);
112
+ overflow: hidden;
113
+ max-width: 1600px;
114
+ margin: 0 auto;
115
+ width: 100%;
116
+ }
117
+
118
+ /* --- Sidebar (Desktop) --- */
119
+ .sidebar {
120
+ width: 280px;
121
+ display: flex;
122
+ flex-direction: column;
123
+ gap: var(--spacing-md);
124
+ /* Glassmorphism Panel */
125
+ background: var(--glass-bg);
126
+ border: 1px solid var(--glass-border);
127
+ border-radius: var(--radius-md);
128
+ backdrop-filter: blur(20px);
129
+ -webkit-backdrop-filter: blur(20px);
130
+ padding: var(--spacing-md);
131
+ flex-shrink: 0;
132
+ }
133
+
134
+ .nav-label {
135
+ font-size: 11px;
136
+ text-transform: uppercase;
137
+ letter-spacing: 1px;
138
+ color: var(--text-tertiary);
139
+ margin-bottom: var(--spacing-xs);
140
+ font-weight: 600;
141
+ }
142
+
143
+ .nav-item {
144
+ display: flex;
145
+ align-items: center;
146
+ justify-content: space-between;
147
+ padding: 12px 16px;
148
+ border-radius: var(--radius-sm);
149
+ color: var(--text-secondary);
150
+ text-decoration: none;
151
+ font-size: 14px;
152
+ font-weight: 400;
153
+ transition: all 0.2s ease;
154
+ cursor: pointer;
155
+ }
156
+
157
+ .nav-item:hover {
158
+ background: var(--glass-highlight);
159
+ color: var(--text-primary);
160
+ }
161
+
162
+ .nav-item.active {
163
+ background: var(--accent-glow);
164
+ color: var(--text-primary);
165
+ border: 1px solid rgba(255, 255, 255, 0.05);
166
+ }
167
+
168
+ .nav-item i {
169
+ font-size: 18px;
170
+ margin-right: 12px;
171
+ }
172
+
173
+ /* --- Central Content --- */
174
+ .content-area {
175
+ flex: 1;
176
+ display: flex;
177
+ flex-direction: column;
178
+ gap: var(--spacing-md);
179
+ overflow-y: auto;
180
+ padding-right: 4px; /* For scrollbar */
181
+ }
182
+
183
+ /* Custom Scrollbar */
184
+ .content-area::-webkit-scrollbar {
185
+ width: 6px;
186
+ }
187
+ .content-area::-webkit-scrollbar-track {
188
+ background: transparent;
189
+ }
190
+ .content-area::-webkit-scrollbar-thumb {
191
+ background: rgba(255, 255, 255, 0.05);
192
+ border-radius: 3px;
193
+ }
194
+ .content-area::-webkit-scrollbar-thumb:hover {
195
+ background: rgba(255, 255, 255, 0.1);
196
+ }
197
+
198
+ /* --- Glass Panels --- */
199
+ .glass-panel {
200
+ background: var(--glass-bg);
201
+ border: 1px solid var(--glass-border);
202
+ border-radius: var(--radius-md);
203
+ backdrop-filter: blur(20px);
204
+ -webkit-backdrop-filter: blur(20px);
205
+ overflow: hidden;
206
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
207
+ }
208
+
209
+ /* Public Area */
210
+ .public-section {
211
+ flex: 1;
212
+ min-height: 300px;
213
+ display: flex;
214
+ flex-direction: column;
215
+ }
216
+
217
+ .section-header {
218
+ padding: var(--spacing-md);
219
+ border-bottom: 1px solid var(--glass-border);
220
+ display: flex;
221
+ justify-content: space-between;
222
+ align-items: center;
223
+ }
224
+
225
+ .section-title {
226
+ font-size: 16px;
227
+ font-weight: 500;
228
+ color: var(--text-primary);
229
+ }
230
+
231
+ .announcement-badge {
232
+ font-size: 10px;
233
+ background: rgba(255, 255, 255, 0.08);
234
+ padding: 4px 8px;
235
+ border-radius: 20px;
236
+ color: var(--text-secondary);
237
+ font-weight: 500;
238
+ }
239
+
240
+ .chat-list {
241
+ list-style: none;
242
+ overflow-y: auto;
243
+ flex: 1;
244
+ }
245
+
246
+ .chat-item {
247
+ display: flex;
248
+ align-items: center;
249
+ padding: 16px 20px;
250
+ border-bottom: 1px solid var(--glass-border);
251
+ cursor: pointer;
252
+ transition: background 0.2s ease;
253
+ text-decoration: none;
254
+ color: var(--text-primary);
255
+ }
256
+
257
+ .chat-item:last-child {
258
+ border-bottom: none;
259
+ }
260
+
261
+ .chat-item:hover {
262
+ background: rgba(255, 255, 255, 0.02);
263
+ }
264
+
265
+ .chat-info {
266
+ flex: 1;
267
+ padding-left: 16px;
268
+ }
269
+
270
+ .chat-name {
271
+ font-size: 14px;
272
+ font-weight: 500;
273
+ margin-bottom: 4px;
274
+ }
275
+
276
+ .chat-preview {
277
+ font-size: 12px;
278
+ color: var(--text-tertiary);
279
+ white-space: nowrap;
280
+ overflow: hidden;
281
+ text-overflow: ellipsis;
282
+ max-width: 300px;
283
+ }
284
+
285
+ .chat-meta {
286
+ display: flex;
287
+ align-items: center;
288
+ gap: 12px;
289
+ color: var(--text-tertiary);
290
+ font-size: 11px;
291
+ }
292
+
293
+ .divider {
294
+ height: 1px;
295
+ background: var(--glass-border);
296
+ margin: 0 var(--spacing-md);
297
+ }
298
+
299
+ /* Private Rooms */
300
+ .rooms-section {
301
+ height: 300px;
302
+ display: flex;
303
+ flex-direction: column;
304
+ }
305
+
306
+ .rooms-list {
307
+ list-style: none;
308
+ overflow-y: auto;
309
+ flex: 1;
310
+ }
311
+
312
+ .room-item {
313
+ display: flex;
314
+ align-items: center;
315
+ padding: 14px 20px;
316
+ cursor: pointer;
317
+ transition: background 0.2s ease;
318
+ text-decoration: none;
319
+ color: var(--text-primary);
320
+ border-left: 2px solid transparent;
321
+ }
322
+
323
+ .room-item:hover {
324
+ background: rgba(255, 255, 255, 0.02);
325
+ border-left: 2px solid rgba(255, 255, 255, 0.1);
326
+ }
327
+
328
+ .room-icon {
329
+ width: 32px;
330
+ height: 32px;
331
+ border-radius: 50%;
332
+ background: rgba(255, 255, 255, 0.05);
333
+ display: flex;
334
+ align-items: center;
335
+ justify-content: center;
336
+ margin-right: 16px;
337
+ color: var(--text-secondary);
338
+ font-size: 14px;
339
+ }
340
+
341
+ .room-name {
342
+ font-size: 14px;
343
+ font-weight: 500;
344
+ }
345
+
346
+ /* --- Responsive Design --- */
347
+ @media (max-width: 900px) {
348
+ main {
349
+ flex-direction: column;
350
+ padding: var(--spacing-sm);
351
+ }
352
+
353
+ .sidebar {
354
+ width: 100%;
355
+ flex-direction: row;
356
+ padding: var(--spacing-sm);
357
+ overflow-x: auto;
358
+ height: auto;
359
+ }
360
+
361
+ .nav-item {
362
+ white-space: nowrap;
363
+ padding: 8px 12px;
364
+ }
365
+
366
+ .nav-label {
367
+ display: none;
368
+ }
369
+
370
+ .nav-item i {
371
+ margin-right: 8px;
372
+ }
373
+ }
374
+
375
+ @media (max-width: 600px) {
376
+ .sidebar {
377
+ display: none; /* Hide sidebar on very small screens for minimalism */
378
+ }
379
+
380
+ .content-area {
381
+ padding: 0;
382
+ }
383
+
384
+ .glass-panel {
385
+ border-radius: 0;
386
+ border-left: none;
387
+ border-right: none;
388
+ border-bottom: 1px solid var(--glass-border);
389
+ }
390
+
391
+ header {
392
+ padding: 0 var(--spacing-sm);
393
+ }
394
+
395
+ .brand span {
396
+ display: none; /* Hide text on mobile header */
397
+ }
398
+ }
399
+ </style>
400
+ </head>
401
+ <body>
402
+
403
+ <!-- Header -->
404
+ <header>
405
+ <div class="brand">
406
+ <i class="ph-fill ph-hexagon brand-icon"></i>
407
+ <span>NexusGlass</span>
408
+ </div>
409
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
410
+ Built with anycoder
411
+ </a>
412
+ </header>
413
+
414
+ <!-- Main Layout -->
415
+ <main>
416
+ <!-- Sidebar Navigation -->
417
+ <aside class="sidebar">
418
+ <div class="nav-label">Menu</div>
419
+ <a href="#" class="nav-item active">
420
+ <i class="ph ph-squares-four"></i>
421
+ <span>Dashboard</span>
422
+ </a>
423
+ <a href="#" class="nav-item">
424
+ <i class="ph ph-chat-circle-dots"></i>
425
+ <span>Chats</span>
426
+ </a>
427
+ <a href="#" class="nav-item">
428
+ <i class="ph ph-users"></i>
429
+ <span>Contacts</span>
430
+ </a>
431
+ <a href="#" class="nav-item">
432
+ <i class="ph ph-gear"></i>
433
+ <span>Settings</span>
434
+ </a>
435
+
436
+ <div class="nav-label" style="margin-top: auto;">System</div>
437
+ <a href="#" class="nav-item">
438
+ <i class="ph ph-cloud-arrow-up"></i>
439
+ <span>Export</span>
440
+ </a>
441
+ <a href="#" class="nav-item">
442
+ <i class="ph ph-sign-out"></i>
443
+ <span>Logout</span>
444
+ </a>
445
+ </aside>
446
+
447
+ <!-- Central Content -->
448
+ <div class="content-area">
449
+
450
+ <!-- Public Area: Broadcast & Chats -->
451
+ <section class="glass-panel public-section">
452
+ <div class="section-header">
453
+ <h2 class="section-title">Public Broadcast</h2>
454
+ <span class="announcement-badge">Admin Update</span>
455
+ </div>
456
+ <ul class="chat-list">
457
+ <li class="chat-item">
458
+ <div class="chat-info">
459
+ <div class="chat-name">System Maintenance (Oct 24)</div>
460
+ <div class="chat-preview">Scheduled downtime for server upgrades between 2 AM and 4 AM UTC.</div>
461
+ </div>
462
+ <div class="chat-meta">
463
+ <span>2h ago</span>
464
+ </div>
465
+ </li>
466
+ <li class="chat-item">
467
+ <div class="chat-info">
468
+ <div class="chat-name">Welcome to NexusGlass</div>
469
+ <div class="chat-preview">Read our community guidelines and start exploring public channels.</div>
470
+ </div>
471
+ <div class="chat-meta">
472
+ <span>1d ago</span>
473
+ </div>
474
+ </li>
475
+ <li class="chat-item">
476
+ <div class="chat-info">
477
+ <div class="chat-name">Feature Request: Dark Mode</div>
478
+ <div class="chat-preview">Community feedback on the new visual direction.</div>
479
+ </div>
480
+ <div class="chat-meta">
481
+ <span>3d ago</span>
482
+ </div>
483
+ </li>
484
+ <li class="chat-item">
485
+ <div class="chat-info">
486
+ <div class="chat-name">Weekly Recap</div>
487
+ <div class="chat-preview">Top contributors and active discussions from the last week.</div>
488
+ </div>
489
+ <div class="chat-meta">
490
+ <span>5d ago</span>
491
+ </div>
492
+ </li>
493
+ </ul>
494
+ </section>
495
+
496
+ <div class="divider"></div>
497
+
498
+ <!-- Private Chats / Rooms -->
499
+ <section class="glass-panel rooms-section">
500
+ <div class="section-header">
501
+ <h2 class="section-title">Private Rooms</h2>
502
+ </div>
503
+ <ul class="rooms-list">
504
+ <a href="#" class="room-item">
505
+ <div class="room-icon">
506
+ <i class="ph ph-lock-key-open"></i>
507
+ </div>
508
+ <span class="room-name">Design Team Alpha</span>
509
+ </a>
510
+ <a href="#" class="room-item">
511
+ <div class="room-icon">
512
+ <i class="ph ph-lock-key-open"></i>
513
+ </div>
514
+ <span class="room-name">Backend Architecture</span>
515
+ </a>
516
+ <a href="#" class="room-item">
517
+ <div class="room-icon">
518
+ <i class="ph ph-lock-key-open"></i>
519
+ </div>
520
+ <span class="room-name">Project Phoenix</span>
521
+ </a>
522
+ <a href="#" class="room-item">
523
+ <div class="room-icon">
524
+ <i class="ph ph-lock-key-open"></i>
525
+ </div>
526
+ <span class="room-name">Random Dev Logs</span>
527
+ </a>
528
+ <a href="#" class="room-item">
529
+ <div class="room-icon">
530
+ <i class="ph ph-lock-key-open"></i>
531
+ </div>
532
+ <span class="room-name">UX Research Group</span>
533
+ </a>
534
+ </ul>
535
+ </section>
536
+
537
+ </div>
538
+ </main>
539
+
540
+ <!-- Interactive Logic -->
541
+ <script>
542
+ // Simple script to handle active state switching for navigation
543
+ document.addEventListener('DOMContentLoaded', () => {
544
+ const navItems = document.querySelectorAll('.nav-item');
545
+
546
+ navItems.forEach(item => {
547
+ item.addEventListener('click', (e) => {
548
+ e.preventDefault();
549
+
550
+ // Remove active class from all
551
+ navItems.forEach(nav => nav.classList.remove('active'));
552
+
553
+ // Add active class to clicked (if it's a link)
554
+ if(item.tagName === 'A') {
555
+ item.classList.add('active');
556
+ }
557
+ });
558
+ });
559
+
560
+ // Add subtle interaction to chat items
561
+ const chatItems = document.querySelectorAll('.chat-item, .room-item');
562
+
563
+ chatItems.forEach(item => {
564
+ item.addEventListener('click', () => {
565
+ // Visual feedback only
566
+ console.log('Navigating to:', item.querySelector('.chat-name')?.innerText || item.querySelector('.room-name')?.innerText);
567
+ });
568
+ });
569
+ });
570
+ </script>
571
+ </body>
572
+ </html>