Hugging Face's logo

Spaces:
samirerty
/
anycoder-636e1289
Running

App Files Community
samirerty commited on
Commit
cef74c0
·
verified ·
1 Parent(s): d18159e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +398 -19
index.html CHANGED
@@ -1,19 +1,398 @@
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>Glass Dashboard</title>
7
+
8
+ <!-- Import Inter Font for 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
+ <!-- Import Phosphor Icons for minimal iconography -->
14
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
15
+
16
+ <style>
17
+ :root {
18
+ /* Color Palette - Dark, Muted, Premium */
19
+ --bg-gradient-start: #1a1c23;
20
+ --bg-gradient-end: #121418;
21
+
22
+ --glass-bg: rgba(255, 255, 255, 0.03);
23
+ --glass-border: rgba(255, 255, 255, 0.06);
24
+ --glass-highlight: rgba(255, 255, 255, 0.08);
25
+ --glass-blur: 20px;
26
+
27
+ --text-primary: rgba(255, 255, 255, 0.9);
28
+ --text-secondary: rgba(255, 255, 255, 0.45);
29
+ --text-muted: rgba(255, 255, 255, 0.3);
30
+
31
+ --accent-subtle: rgba(255, 255, 255, 0.05);
32
+
33
+ /* Spacing */
34
+ --space-xs: 8px;
35
+ --space-sm: 16px;
36
+ --space-md: 24px;
37
+ --space-lg: 32px;
38
+ --space-xl: 64px;
39
+
40
+ /* Typography */
41
+ --font-family: 'Inter', sans-serif;
42
+ }
43
+
44
+ * {
45
+ margin: 0;
46
+ padding: 0;
47
+ box-sizing: border-box;
48
+ }
49
+
50
+ body {
51
+ font-family: var(--font-family);
52
+ background: radial-gradient(circle at 50% 0%, #232730 0%, var(--bg-gradient-end) 100%);
53
+ color: var(--text-primary);
54
+ min-height: 100vh;
55
+ display: flex;
56
+ flex-direction: column;
57
+ overflow-x: hidden;
58
+ -webkit-font-smoothing: antialiased;
59
+ }
60
+
61
+ /* --- Header --- */
62
+ header {
63
+ position: fixed;
64
+ top: 0;
65
+ left: 0;
66
+ right: 0;
67
+ height: 70px;
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: space-between;
71
+ padding: 0 var(--space-lg);
72
+ z-index: 100;
73
+
74
+ /* Glass Header Effect */
75
+ background: rgba(18, 20, 24, 0.7);
76
+ backdrop-filter: blur(var(--glass-blur));
77
+ border-bottom: 1px solid var(--glass-border);
78
+ }
79
+
80
+ .logo {
81
+ font-weight: 500;
82
+ font-size: 1.1rem;
83
+ letter-spacing: -0.02em;
84
+ color: var(--text-primary);
85
+ display: flex;
86
+ align-items: center;
87
+ gap: 10px;
88
+ text-decoration: none;
89
+ }
90
+
91
+ .logo i {
92
+ font-size: 1.2rem;
93
+ color: var(--text-secondary);
94
+ }
95
+
96
+ .branding-link {
97
+ font-size: 0.8rem;
98
+ color: var(--text-muted);
99
+ text-decoration: none;
100
+ transition: color 0.3s ease;
101
+ }
102
+
103
+ .branding-link:hover {
104
+ color: var(--text-primary);
105
+ }
106
+
107
+ /* --- Main Layout --- */
108
+ main {
109
+ flex: 1;
110
+ display: flex;
111
+ justify-content: center;
112
+ align-items: center; /* Center vertically */
113
+ padding: 100px var(--space-md) var(--space-xl); /* Top padding for fixed header */
114
+ width: 100%;
115
+ max-width: 1200px;
116
+ margin: 0 auto;
117
+ }
118
+
119
+ .dashboard-grid {
120
+ display: grid;
121
+ grid-template-columns: 1fr 1fr; /* Two equal columns */
122
+ gap: var(--space-lg);
123
+ width: 100%;
124
+ }
125
+
126
+ /* --- Glass Panels --- */
127
+ .glass-panel {
128
+ background: var(--glass-bg);
129
+ backdrop-filter: blur(var(--glass-blur));
130
+ -webkit-backdrop-filter: blur(var(--glass-blur));
131
+ border: 1px solid var(--glass-border);
132
+ border-radius: 24px;
133
+ padding: var(--space-lg);
134
+ box-shadow: 0 4px 40px rgba(0, 0, 0, 0.2);
135
+ display: flex;
136
+ flex-direction: column;
137
+ height: 500px; /* Fixed height for consistent look */
138
+ transition: border-color 0.3s ease;
139
+ }
140
+
141
+ .glass-panel:hover {
142
+ border-color: rgba(255, 255, 255, 0.1);
143
+ }
144
+
145
+ .panel-header {
146
+ margin-bottom: var(--space-md);
147
+ padding-bottom: var(--space-sm);
148
+ border-bottom: 1px solid var(--glass-border);
149
+ }
150
+
151
+ .panel-title {
152
+ font-size: 1rem;
153
+ font-weight: 500;
154
+ color: var(--text-primary);
155
+ text-transform: uppercase;
156
+ letter-spacing: 0.05em;
157
+ margin-bottom: 4px;
158
+ }
159
+
160
+ .panel-subtitle {
161
+ font-size: 0.85rem;
162
+ color: var(--text-muted);
163
+ font-weight: 300;
164
+ }
165
+
166
+ /* --- Lists --- */
167
+ .chat-list {
168
+ list-style: none;
169
+ overflow-y: auto;
170
+ flex: 1;
171
+ /* Custom scrollbar styling */
172
+ scrollbar-width: thin;
173
+ scrollbar-color: var(--glass-border) transparent;
174
+ }
175
+
176
+ .chat-list::-webkit-scrollbar {
177
+ width: 4px;
178
+ }
179
+ .chat-list::-webkit-scrollbar-thumb {
180
+ background-color: var(--glass-border);
181
+ border-radius: 4px;
182
+ }
183
+
184
+ .chat-item {
185
+ display: flex;
186
+ align-items: center;
187
+ padding: 14px 10px;
188
+ margin-bottom: 4px;
189
+ border-radius: 12px;
190
+ color: var(--text-secondary);
191
+ text-decoration: none;
192
+ transition: all 0.25s ease;
193
+ cursor: pointer;
194
+ font-size: 0.95rem;
195
+ font-weight: 400;
196
+ }
197
+
198
+ .chat-item i {
199
+ margin-right: 12px;
200
+ font-size: 1.1rem;
201
+ color: var(--text-muted);
202
+ transition: color 0.25s ease;
203
+ }
204
+
205
+ /* Hover Interaction */
206
+ .chat-item:hover {
207
+ background: var(--accent-subtle);
208
+ color: var(--text-primary);
209
+ transform: translateX(2px);
210
+ }
211
+
212
+ .chat-item:hover i {
213
+ color: var(--text-primary);
214
+ }
215
+
216
+ /* Specific styles for Public Area (Broadcast) */
217
+ .broadcast-item {
218
+ flex-direction: column;
219
+ align-items: flex-start;
220
+ }
221
+
222
+ .broadcast-header {
223
+ display: flex;
224
+ align-items: center;
225
+ width: 100%;
226
+ margin-bottom: 4px;
227
+ }
228
+
229
+ .broadcast-meta {
230
+ font-size: 0.75rem;
231
+ color: var(--text-muted);
232
+ margin-top: 2px;
233
+ font-weight: 300;
234
+ }
235
+
236
+ /* --- Responsive Design --- */
237
+ @media (max-width: 900px) {
238
+ .dashboard-grid {
239
+ grid-template-columns: 1fr; /* Stack on tablet/mobile */
240
+ max-width: 600px;
241
+ }
242
+
243
+ .glass-panel {
244
+ height: 400px;
245
+ }
246
+
247
+ main {
248
+ padding-top: 90px;
249
+ }
250
+ }
251
+
252
+ @media (max-width: 600px) {
253
+ header {
254
+ padding: 0 var(--space-md);
255
+ }
256
+
257
+ main {
258
+ padding: 90px var(--space-sm) var(--space-lg);
259
+ align-items: flex-start; /* Align top on mobile for easier scrolling */
260
+ }
261
+
262
+ .glass-panel {
263
+ height: auto;
264
+ min-height: 300px;
265
+ }
266
+ }
267
+ </style>
268
+ </head>
269
+ <body>
270
+
271
+ <header>
272
+ <a href="#" class="logo">
273
+ <i class="ph ph-hexagon"></i>
274
+ <span>Nexus</span>
275
+ </a>
276
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="branding-link">
277
+ Built with anycoder
278
+ </a>
279
+ </header>
280
+
281
+ <main>
282
+ <div class="dashboard-grid">
283
+
284
+ <!-- Public Area Section -->
285
+ <section class="glass-panel" id="public-section">
286
+ <div class="panel-header">
287
+ <h2 class="panel-title">Public Channels</h2>
288
+ <p class="panel-subtitle">Announcements & Community</p>
289
+ </div>
290
+
291
+ <ul class="chat-list">
292
+ <li>
293
+ <a href="#chat/announcements" class="chat-item broadcast-item">
294
+ <div class="broadcast-header">
295
+ <i class="ph ph-megaphone-simple"></i>
296
+ <span>System Announcements</span>
297
+ </div>
298
+ <span class="broadcast-meta">Admin • Updates & Maintenance</span>
299
+ </a>
300
+ </li>
301
+ <li>
302
+ <a href="#chat/general" class="chat-item broadcast-item">
303
+ <div class="broadcast-header">
304
+ <i class="ph ph-globe"></i>
305
+ <span>General Discussion</span>
306
+ </div>
307
+ <span class="broadcast-meta">Public • Open to everyone</span>
308
+ </a>
309
+ </li>
310
+ <li>
311
+ <a href="#chat/design" class="chat-item broadcast-item">
312
+ <div class="broadcast-header">
313
+ <i class="ph ph-paint-brush-broad"></i>
314
+ <span>Design Resources</span>
315
+ </div>
316
+ <span class="broadcast-meta">Community • Share Inspiration</span>
317
+ </a>
318
+ </li>
319
+ <li>
320
+ <a href="#chat/feedback" class="chat-item broadcast-item">
321
+ <div class="broadcast-header">
322
+ <i class="ph ph-chat-text"></i>
323
+ <span>Product Feedback</span>
324
+ </div>
325
+ <span class="broadcast-meta">Moderated • Help us improve</span>
326
+ </a>
327
+ </li>
328
+ </ul>
329
+ </section>
330
+
331
+ <!-- Private Chats / Rooms Section -->
332
+ <section class="glass-panel" id="private-section">
333
+ <div class="panel-header">
334
+ <h2 class="panel-title">Your Rooms</h2>
335
+ <p class="panel-subtitle">Private Conversations</p>
336
+ </div>
337
+
338
+ <ul class="chat-list">
339
+ <li>
340
+ <a href="#chat/project-alpha" class="chat-item">
341
+ <i class="ph ph-lock-key"></i>
342
+ <span>Project Alpha</span>
343
+ </a>
344
+ </li>
345
+ <li>
346
+ <a href="#chat/design-team" class="chat-item">
347
+ <i class="ph ph-users-three"></i>
348
+ <span>Design Team Sync</span>
349
+ </a>
350
+ </li>
351
+ <li>
352
+ <a href="#chat/sarah-connor" class="chat-item">
353
+ <i class="ph ph-user"></i>
354
+ <span>Sarah Connor</span>
355
+ </a>
356
+ </li>
357
+ <li>
358
+ <a href="#chat/marketing-q4" class="chat-item">
359
+ <i class="ph ph-chart-line-up"></i>
360
+ <span>Marketing Q4 Strategy</span>
361
+ </a>
362
+ </li>
363
+ <li>
364
+ <a href="#chat/development" class="chat-item">
365
+ <i class="ph ph-code"></i>
366
+ <span>Development Log</span>
367
+ </a>
368
+ </li>
369
+ </ul>
370
+ </section>
371
+
372
+ </div>
373
+ </main>
374
+
375
+ <script>
376
+ // Simple interaction handler to simulate navigation
377
+ document.addEventListener('DOMContentLoaded', () => {
378
+ const links = document.querySelectorAll('.chat-item');
379
+
380
+ links.forEach(link => {
381
+ link.addEventListener('click', (e) => {
382
+ e.preventDefault();
383
+
384
+ // Extract the room name for the log
385
+ const roomName = link.querySelector('span').innerText;
386
+ const targetUrl = link.getAttribute('href');
387
+
388
+ console.log(`Navigating to: ${targetUrl} (${roomName})`);
389
+
390
+ // Visual feedback - subtle fade out effect could go here
391
+ // For now, we just log it as requested for a static page
392
+ // In a real app, this would be: window.location.href = targetUrl;
393
+ });
394
+ });
395
+ });
396
+ </script>
397
+ </body>
398
+ </html>