Hugging Face's logo

Spaces:
Imaginephoenix
/
anycoder-9aa9bf93
Running

App Files Community
Imaginephoenix commited on
Commit
1864be7
·
verified ·
1 Parent(s): 800bb5a

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +581 -19
index.html CHANGED
@@ -1,19 +1,581 @@
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>Aether UI - Modern Design System</title>
7
+ <!-- Remix Icons for modern, clean icons -->
8
+ <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
9
+ <!-- Google Fonts: Inter -->
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com">
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght=300;400;600;800&display=swap" rel="stylesheet">
13
+
14
+ <style>
15
+ /* --- CSS VARIABLES & RESET --- */
16
+ :root {
17
+ --bg-body: #0f1115;
18
+ --bg-card: #16181d;
19
+ --bg-glass: rgba(22, 24, 29, 0.7);
20
+ --primary: #6c5ce7;
21
+ --primary-glow: rgba(108, 92, 231, 0.4);
22
+ --accent: #00f2c3;
23
+ --text-main: #ffffff;
24
+ --text-muted: #a0a0a0;
25
+ --border: rgba(255, 255, 255, 0.08);
26
+ --shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
27
+ --ease: cubic-bezier(0.23, 1, 0.32, 1);
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ }
35
+
36
+ body {
37
+ background-color: var(--bg-body);
38
+ color: var(--text-main);
39
+ font-family: 'Inter', sans-serif;
40
+ overflow-x: hidden;
41
+ min-height: 100vh;
42
+ display: flex;
43
+ flex-direction: column;
44
+ }
45
+
46
+ /* --- UTILITIES --- */
47
+ .glass {
48
+ background: var(--bg-glass);
49
+ backdrop-filter: blur(12px);
50
+ -webkit-backdrop-filter: blur(12px);
51
+ border: 1px solid var(--border);
52
+ }
53
+
54
+ .gradient-text {
55
+ background: linear-gradient(45deg, var(--primary), var(--accent));
56
+ -webkit-background-clip: text;
57
+ -webkit-text-fill-color: transparent;
58
+ display: inline-block;
59
+ }
60
+
61
+ /* --- HEADER --- */
62
+ header {
63
+ position: fixed;
64
+ top: 0;
65
+ left: 0;
66
+ width: 100%;
67
+ height: 70px;
68
+ z-index: 100;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: space-between;
72
+ padding: 0 2rem;
73
+ background: rgba(15, 17, 21, 0.8);
74
+ backdrop-filter: blur(10px);
75
+ border-bottom: 1px solid var(--border);
76
+ }
77
+
78
+ .brand {
79
+ font-weight: 800;
80
+ font-size: 1.2rem;
81
+ letter-spacing: -0.5px;
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 10px;
85
+ }
86
+
87
+ .brand i {
88
+ color: var(--primary);
89
+ font-size: 1.5rem;
90
+ }
91
+
92
+ .anycoder-link {
93
+ font-size: 0.8rem;
94
+ color: var(--text-muted);
95
+ text-decoration: none;
96
+ background: rgba(255,255,255,0.05);
97
+ padding: 4px 12px;
98
+ border-radius: 20px;
99
+ transition: all 0.3s ease;
100
+ border: 1px solid transparent;
101
+ }
102
+
103
+ .anycoder-link:hover {
104
+ color: var(--text-main);
105
+ border-color: var(--border);
106
+ background: rgba(255,255,255,0.1);
107
+ }
108
+
109
+ /* --- MAIN LAYOUT --- */
110
+ main {
111
+ padding-top: 70px;
112
+ display: grid;
113
+ grid-template-columns: 250px 1fr;
114
+ min-height: calc(100vh - 70px);
115
+ }
116
+
117
+ /* --- SIDEBAR --- */
118
+ .sidebar {
119
+ padding: 2rem;
120
+ border-right: 1px solid var(--border);
121
+ display: flex;
122
+ flex-direction: column;
123
+ gap: 1rem;
124
+ position: sticky;
125
+ top: 70px;
126
+ height: calc(100vh - 70px);
127
+ }
128
+
129
+ .nav-item {
130
+ display: flex;
131
+ align-items: center;
132
+ gap: 12px;
133
+ padding: 12px 16px;
134
+ color: var(--text-muted);
135
+ text-decoration: none;
136
+ border-radius: 12px;
137
+ transition: all 0.3s var(--ease);
138
+ font-weight: 500;
139
+ }
140
+
141
+ .nav-item:hover, .nav-item.active {
142
+ background: rgba(255,255,255,0.05);
143
+ color: var(--text-main);
144
+ transform: translateX(5px);
145
+ }
146
+
147
+ .nav-item.active i {
148
+ color: var(--primary);
149
+ }
150
+
151
+ /* --- CONTENT AREA --- */
152
+ .content {
153
+ padding: 3rem;
154
+ position: relative;
155
+ overflow-y: auto;
156
+ }
157
+
158
+ /* Ambient Background Glow */
159
+ .ambient-glow {
160
+ position: absolute;
161
+ top: -100px;
162
+ right: -100px;
163
+ width: 500px;
164
+ height: 500px;
165
+ background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
166
+ opacity: 0.5;
167
+ z-index: -1;
168
+ pointer-events: none;
169
+ }
170
+
171
+ .section-title {
172
+ font-size: 2.5rem;
173
+ font-weight: 700;
174
+ margin-bottom: 1rem;
175
+ line-height: 1.1;
176
+
177
+
178
+ }
179
+
180
+ .section-desc {
181
+ color: var(--text-muted);
182
+ max-width: 600px;
183
+ margin-bottom: 3rem;
184
+ font-size: 1.1rem;
185
+ line-height: 1.6;
186
+ }
187
+
188
+ /* --- UI COMPONENT GRID --- */
189
+ .ui-grid {
190
+ display: grid;
191
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
192
+ gap: 2rem;
193
+ }
194
+
195
+ .card {
196
+ background: var(--bg-card);
197
+ border: 1px solid var(--border);
198
+ border-radius: 20px;
199
+ padding: 2rem;
200
+ position: relative;
201
+ transition: all 0.4s var(--ease);
202
+ overflow: hidden;
203
+ display: flex;
204
+ flex-direction: column;
205
+ justify-content: space-between;
206
+ height: 350px;
207
+ }
208
+
209
+ .card:hover {
210
+ transform: translateY(-10px);
211
+ border-color: var(--primary);
212
+ box-shadow: 0 20px 40px -10px rgba(108, 92, 231, 0.2);
213
+ }
214
+
215
+ .card::before {
216
+ content: '';
217
+ position: absolute;
218
+ top: 0;
219
+ left: 0;
220
+ width: 100%;
221
+ height: 100%;
222
+ background: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.03) 100%);
223
+ opacity: 0;
224
+ transition: opacity 0.4s;
225
+ }
226
+
227
+ .card:hover::before {
228
+ opacity: 1;
229
+ }
230
+
231
+ .card-icon {
232
+ width: 50px;
233
+ height: 50px;
234
+ background: rgba(255,255,255,0.05);
235
+ border-radius: 12px;
236
+ display: flex;
237
+ align-items: center;
238
+ justify-content: center;
239
+ font-size: 1.5rem;
240
+ color: var(--text-main);
241
+ margin-bottom: 1.5rem;
242
+ }
243
+
244
+ .card-title {
245
+ font-size: 1.2rem;
246
+ font-weight: 600;
247
+ margin-bottom: 0.5rem;
248
+ }
249
+
250
+ .card-desc {
251
+ font-size: 0.9rem;
252
+ color: var(--text-muted);
253
+ line-height: 1.5;
254
+ }
255
+
256
+ .card-action {
257
+ margin-top: 2rem;
258
+ display: flex;
259
+ justify-content: flex-end;
260
+ }
261
+
262
+ /* --- BUTTONS --- */
263
+ .btn {
264
+ padding: 10px 20px;
265
+ border-radius: 8px;
266
+ font-weight: 600;
267
+ cursor: pointer;
268
+ border: none;
269
+ transition: all 0.3s ease;
270
+ font-size: 0.9rem;
271
+ display: inline-flex;
272
+ align-items: center;
273
+ gap: 8px;
274
+ }
275
+
276
+ .btn-primary {
277
+ background: var(--primary);
278
+ color: white;
279
+ box-shadow: 0 4px 15px var(--primary-glow);
280
+ }
281
+
282
+ .btn-primary:hover {
283
+ background: #7b69f0;
284
+ transform: scale(1.05);
285
+ }
286
+
287
+ .btn-glass {
288
+ background: rgba(255,255,255,0.1);
289
+ color: var(--text-main);
290
+ }
291
+
292
+ .btn-glass:hover {
293
+ background: rgba(255,255,255,0.2);
294
+ }
295
+
296
+ /* --- STATS SECTION --- */
297
+ .stats-row {
298
+ display: grid;
299
+ grid-template-columns: repeat(4, 1fr);
300
+ gap: 1rem;
301
+ margin-bottom: 4rem;
302
+ }
303
+
304
+ .stat-card {
305
+ background: rgba(255,255,255,0.03);
306
+ border: 1px solid var(--border);
307
+ padding: 1.5rem;
308
+ border-radius: 16px;
309
+ text-align: center;
310
+ }
311
+
312
+ .stat-value {
313
+ font-size: 2rem;
314
+ font-weight: 700;
315
+ color: var(--text-main);
316
+ }
317
+
318
+ .stat-label {
319
+ font-size: 0.8rem;
320
+ color: var(--text-muted);
321
+ text-transform: uppercase;
322
+ letter-spacing: 1px;
323
+ margin-top: 5px;
324
+ }
325
+
326
+ /* --- RESPONSIVE --- */
327
+ @media (max-width: 900px) {
328
+ main {
329
+ grid-template-columns: 1fr;
330
+ }
331
+ .sidebar {
332
+ display: none; /* Simplified for mobile example */
333
+ }
334
+ .stats-row {
335
+ grid-template-columns: 1fr 1fr;
336
+ }
337
+ .section-title {
338
+ font-size: 2rem;
339
+ }
340
+ }
341
+
342
+ @media (max-width: 600px) {
343
+ header { padding: 0 1rem; }
344
+ .stats-row { grid-template-columns: 1fr; }
345
+ .ui-grid { grid-template-columns: 1fr; }
346
+ }
347
+
348
+ /* --- ANIMATIONS --- */
349
+ @keyframes float {
350
+ 0% { transform: translateY(0px); }
351
+ 50% { transform: translateY(-10px); }
352
+ 100% { transform: translateY(0px); }
353
+ }
354
+
355
+ .floating-icon {
356
+ animation: float 4s ease-in-out infinite;
357
+ }
358
+
359
+ </style>
360
+ </head>
361
+ <body>
362
+
363
+ <!-- Header -->
364
+ <header>
365
+ <div class="brand">
366
+ <i class="ri-flashlight-fill"></i>
367
+ <span>Aether<span class="gradient-text">UI</span></span>
368
+ </div>
369
+ <!-- REQUIRED LINK -->
370
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
371
+ Built with anycoder
372
+ </a>
373
+ </header>
374
+
375
+ <main>
376
+ <!-- Sidebar Navigation -->
377
+ <aside class="sidebar">
378
+ <a href="#" class="nav-item active">
379
+ <i class="ri-dashboard-line"></i>
380
+ Dashboard
381
+ </a>
382
+ <a href="#" class="nav-item">
383
+ <i class="ri-layout-masonry-line"></i>
384
+ Components
385
+ </a>
386
+ <a href="#" class="nav-item">
387
+ <i class="ri-palette-line"></i>
388
+ Colors
389
+ </a>
390
+ <a href="#" class="nav-item">
391
+ <i class="ri-settings-3-line"></i>
392
+ Settings
393
+ </a>
394
+
395
+ <div style="margin-top: auto;">
396
+ <div class="card" style="height: auto; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, #6c5ce7, #00f2c3); border:none;">
397
+ <div style="color: white; font-weight: 600; font-size: 0.9rem;">Pro Version</div>
398
+ <div style="color: rgba(255,255,255,0.8); font-size: 0.8rem; margin-bottom: 10px;">Unlock advanced UI kits.</div>
399
+ <button style="width: 100%; padding: 8px; background: white; color: #6c5ce7; border:none; border-radius: 6px; font-weight: 700; cursor: pointer;">Upgrade</button>
400
+ </div>
401
+ </div>
402
+ </aside>
403
+
404
+ <!-- Main Content -->
405
+ <section class="content">
406
+ <div class="ambient-glow"></div>
407
+
408
+ <h1 class="section-title">Design System <br><span class="gradient-text">Components</span></h1>
409
+ <p class="section-desc">
410
+ Explore a curated collection of modern UI elements built with pure CSS and Vanilla JS.
411
+ Focus on glassmorphism, vibrant gradients, and responsive layouts.
412
+ </p>
413
+
414
+ <!-- Stats -->
415
+ <div class="stats-row">
416
+ <div class="stat-card">
417
+ <div class="stat-value">128</div>
418
+ <div class="stat-label">Components</div>
419
+ </div>
420
+ <div class="stat-card">
421
+ <div class="stat-value">4.8s</div>
422
+ <div class="stat-label">Render Time</div>
423
+ </div>
424
+ <div class="stat-card">
425
+ <div class="stat-value">100%</div>
426
+ <div class="stat-label">Responsive</div>
427
+ </div>
428
+ <div class="stat-card">
429
+ <div class="stat-value">v2.0</div>
430
+ <div class="stat-label">Current Version</div>
431
+ </div>
432
+ </div>
433
+
434
+ <!-- UI Grid -->
435
+ <div class="ui-grid">
436
+
437
+ <!-- Card 1 -->
438
+ <div class="card">
439
+ <div class="card-icon floating-icon">
440
+ <i class="ri-notification-3-line"></i>
441
+ </div>
442
+ <div>
443
+ <h3 class="card-title">Glassmorphism</h3>
444
+ <p class="card-desc">Utilizing backdrop-filter and semi-transparent backgrounds to create depth and hierarchy.</p>
445
+ </div>
446
+ <div class="card-action">
447
+ <button class="btn btn-glass">View Code</button>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Card 2 -->
452
+ <div class="card">
453
+ <div class="card-icon" style="color: var(--accent)">
454
+ <i class="ri-layout-grid-line"></i>
455
+ </div>
456
+ <div>
457
+ <h3 class="card-title">CSS Grid Layout</h3>
458
+ <p class="card-desc">Responsive grid systems using minmax and auto-fill for robust adaptability.</p>
459
+ </div>
460
+ <div class="card-action">
461
+ <button class="btn btn-glass">Inspect</button>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Card 3 -->
466
+ <div class="card">
467
+ <div class="card-icon" style="color: #ff005c">
468
+ <i class="ri-animation-line"></i>
469
+ </div>
470
+ <div>
471
+ <h3 class="card-title">Micro Interactions</h3>
472
+ <p class="card-desc">Smooth bezier curves and transform properties to enhance user feedback.</p>
473
+ </div>
474
+ <div class="card-action">
475
+ <button class="btn btn-primary">
476
+ <i class="ri-play-fill"></i> Play
477
+ </button>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Card 4 -->
482
+ <div class="card">
483
+ <div class="card-icon">
484
+ <i class="ri-terminal-line"></i>
485
+ </div>
486
+ <div>
487
+ <h3 class="card-title">No Frameworks</h3>
488
+ <p class="card-desc">Built entirely with vanilla HTML, CSS, and JS for maximum performance.</p>
489
+ </div>
490
+ <div class="card-action">
491
+ <button class="btn btn-glass">Learn More</button>
492
+ </div>
493
+ </div>
494
+
495
+ </div>
496
+
497
+ <!-- Interactive Section -->
498
+ <div style="margin-top: 4rem; padding: 2rem; border-radius: 20px; border: 1px solid var(--border); background: rgba(255,255,255,0.02);">
499
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
500
+ <h3 style="font-size: 1.5rem;">Interactive Playground</h3>
501
+ <div style="display: flex; gap: 10px;">
502
+ <button class="btn btn-primary" onclick="toggleTheme()">Toggle Theme</button>
503
+ </div>
504
+ </div>
505
+ <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
506
+ <button class="btn btn-primary">Primary Action</button>
507
+ <button class="btn btn-glass">Secondary Action</button>
508
+ <button class="btn" style="border: 1px solid var(--border);">Outline</button>
509
+ </div>
510
+ <div style="margin-top: 20px; height: 10px; width: 100%; background: rgba(255,255,255,0.1); border-radius: 5px; overflow: hidden;">
511
+ <div id="progress-bar" style="height: 100%; width: 0%; background: var(--accent); transition: width 0.5s ease;"></div>
512
+ </div>
513
+ <p style="margin-top: 10px; font-size: 0.8rem; color: var(--text-muted);">Click the button below to simulate loading.</p>
514
+ <button class="btn btn-glass" style="margin-top: 10px;" onclick="simulateLoad()">Run Simulation</button>
515
+ </div>
516
+
517
+ </section>
518
+ </main>
519
+
520
+ <script>
521
+ // --- Navigation Logic ---
522
+ const navItems = document.querySelectorAll('.nav-item');
523
+
524
+ navItems.forEach(item => {
525
+ item.addEventListener('click', (e) => {
526
+ e.preventDefault();
527
+ navItems.forEach(nav => nav.classList.remove('active'));
528
+ item.classList.add('active');
529
+ });
530
+ });
531
+
532
+ // --- Theme Toggle Logic ---
533
+ let isDark = true;
534
+
535
+ function toggleTheme() {
536
+ const root = document.documentElement;
537
+ if(isDark) {
538
+ // Switch to "Light" (simulated by changing vars slightly)
539
+ root.style.setProperty('--bg-body', '#1a1d23');
540
+ root.style.setProperty('--bg-card', '#22252b');
541
+ isDark = false;
542
+ } else {
543
+ root.style.setProperty('--bg-body', '#0f1115');
544
+ root.style.setProperty('--bg-card', '#16181d');
545
+ isDark = true;
546
+ }
547
+ }
548
+
549
+ // --- Simulation Logic ---
550
+ function simulateLoad() {
551
+ const bar = document.getElementById('progress-bar');
552
+ bar.style.width = '0%';
553
+
554
+ setTimeout(() => { bar.style.width = '30%'; }, 100);
555
+ setTimeout(() => { bar.style.width = '70%'; }, 600);
556
+ setTimeout(() => { bar.style.width = '100%'; }, 1200);
557
+
558
+ // Reset after 2 seconds
559
+ setTimeout(() => { bar.style.width = '0%'; }, 2500);
560
+ }
561
+
562
+ // --- Card Hover 3D Effect (Optional Enhancement) ---
563
+ const cards = document.querySelectorAll('.card');
564
+
565
+ cards.forEach(card => {
566
+ card.addEventListener('mousemove', (e) => {
567
+ const x = e.clientX - card.getBoundingClientRect().left;
568
+ const y = e.clientY - card.getBoundingClientRect().top;
569
+
570
+ // subtle gradient movement
571
+ card.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.05), var(--bg-card))`;
572
+ });
573
+
574
+ card.addEventListener('mouseleave', () => {
575
+ card.style.background = 'var(--bg-card)';
576
+ });
577
+ });
578
+
579
+ </script>
580
+ </body>
581
+ </html>