Hugging Face's logo

Spaces:
AhmedStohy
/
anycoder-bc4f7c42
Running

App Files Community
AhmedStohy commited on
Commit
ac3bb2c
·
verified ·
1 Parent(s): 903ef17

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +554 -19
index.html CHANGED
@@ -1,19 +1,554 @@
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>Hello World - Modern Experience</title>
7
+
8
+ <!-- Google Fonts for 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=Outfit:wght@300;500;700;900&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- FontAwesome for Icons -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+
16
+ <style>
17
+ /* =========================================
18
+ CSS VARIABLES & RESET
19
+ ========================================= */
20
+ :root {
21
+ --bg-deep: #050505;
22
+ --bg-surface: #121212;
23
+ --accent-primary: #6C63FF;
24
+ --accent-secondary: #00E5FF;
25
+ --accent-tertiary: #FF0055;
26
+ --text-main: #FFFFFF;
27
+ --text-muted: #A0A0A0;
28
+ --glass-bg: rgba(255, 255, 255, 0.03);
29
+ --glass-border: rgba(255, 255, 255, 0.1);
30
+ --card-radius: 24px;
31
+ --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
32
+ }
33
+
34
+ * {
35
+ margin: 0;
36
+ padding: 0;
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ body {
41
+ font-family: 'Outfit', sans-serif;
42
+ background-color: var(--bg-deep);
43
+ color: var(--text-main);
44
+ overflow-x: hidden;
45
+ line-height: 1.6;
46
+ min-height: 100vh;
47
+ display: flex;
48
+ flex-direction: column;
49
+ }
50
+
51
+ /* =========================================
52
+ BACKGROUND ANIMATION
53
+ ========================================= */
54
+ .ambient-bg {
55
+ position: fixed;
56
+ top: 0;
57
+ left: 0;
58
+ width: 100vw;
59
+ height: 100vh;
60
+ z-index: -1;
61
+ background:
62
+ radial-gradient(circle at 15% 50%, rgba(108, 99, 255, 0.15), transparent 25%),
63
+ radial-gradient(circle at 85% 30%, rgba(0, 229, 255, 0.15), transparent 25%);
64
+ animation: pulseBg 10s ease-in-out infinite alternate;
65
+ }
66
+
67
+ .grid-overlay {
68
+ position: fixed;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100%;
72
+ height: 100%;
73
+ background-image:
74
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
75
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
76
+ background-size: 50px 50px;
77
+ mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
78
+ z-index: -1;
79
+ pointer-events: none;
80
+ }
81
+
82
+ @keyframes pulseBg {
83
+ 0% { transform: scale(1); opacity: 0.8; }
84
+ 100% { transform: scale(1.1); opacity: 1; }
85
+ }
86
+
87
+ /* =========================================
88
+ HEADER & NAVIGATION
89
+ ========================================= */
90
+ header {
91
+ display: flex;
92
+ justify-content: space-between;
93
+ align-items: center;
94
+ padding: 1.5rem 5%;
95
+ position: fixed;
96
+ top: 0;
97
+ width: 100%;
98
+ z-index: 100;
99
+ backdrop-filter: blur(10px);
100
+ border-bottom: 1px solid var(--glass-border);
101
+ background: rgba(5, 5, 5, 0.5);
102
+ }
103
+
104
+ .logo {
105
+ font-family: 'Space Grotesk', sans-serif;
106
+ font-weight: 700;
107
+ font-size: 1.5rem;
108
+ letter-spacing: -0.02em;
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 10px;
112
+ }
113
+
114
+ .logo i {
115
+ color: var(--accent-primary);
116
+ }
117
+
118
+ .nav-links {
119
+ display: flex;
120
+ gap: 2rem;
121
+ list-style: none;
122
+ }
123
+
124
+ .nav-links a {
125
+ text-decoration: none;
126
+ color: var(--text-muted);
127
+ font-weight: 500;
128
+ transition: var(--transition-smooth);
129
+ font-size: 0.95rem;
130
+ position: relative;
131
+ }
132
+
133
+ .nav-links a:hover, .nav-links a.active {
134
+ color: var(--text-main);
135
+ }
136
+
137
+ .nav-links a::after {
138
+ content: '';
139
+ position: absolute;
140
+ bottom: -5px;
141
+ left: 0;
142
+ width: 0;
143
+ height: 2px;
144
+ background: var(--accent-secondary);
145
+ transition: var(--transition-smooth);
146
+ }
147
+
148
+ .nav-links a:hover::after {
149
+ width: 100%;
150
+ }
151
+
152
+ .btn-cta {
153
+ padding: 0.8rem 1.5rem;
154
+ background: linear-gradient(135deg, var(--accent-primary), #5a52d5);
155
+ border: none;
156
+ border-radius: 50px;
157
+ color: white;
158
+ font-weight: 600;
159
+ cursor: pointer;
160
+ transition: var(--transition-smooth);
161
+ box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
162
+ text-decoration: none;
163
+ display: flex;
164
+ align-items: center;
165
+ gap: 8px;
166
+ }
167
+
168
+ .btn-cta:hover {
169
+ transform: translateY(-2px);
170
+ box-shadow: 0 8px 25px rgba(108, 99, 255, 0.5);
171
+ }
172
+
173
+ /* =========================================
174
+ HERO SECTION
175
+ ========================================= */
176
+ main {
177
+ flex: 1;
178
+ display: flex;
179
+ flex-direction: column;
180
+ align-items: center;
181
+ justify-content: center;
182
+ padding: 8rem 2rem 4rem;
183
+ text-align: center;
184
+ position: relative;
185
+ }
186
+
187
+ .hero-badge {
188
+ display: inline-flex;
189
+ align-items: center;
190
+ gap: 8px;
191
+ padding: 0.5rem 1rem;
192
+ background: var(--glass-bg);
193
+ border: 1px solid var(--glass-border);
194
+ border-radius: 50px;
195
+ font-size: 0.85rem;
196
+ color: var(--accent-secondary);
197
+ margin-bottom: 2rem;
198
+ backdrop-filter: blur(5px);
199
+ animation: fadeInDown 0.8s ease-out;
200
+ }
201
+
202
+ h1 {
203
+ font-size: clamp(3rem, 8vw, 6rem);
204
+ line-height: 1.1;
205
+ margin-bottom: 1.5rem;
206
+ background: linear-gradient(to right, #fff, #a0a0a0);
207
+ -webkit-background-clip: text;
208
+ -webkit-text-fill-color: transparent;
209
+ animation: fadeInUp 0.8s ease-out 0.2s backwards;
210
+ }
211
+
212
+ .highlight {
213
+ color: var(--accent-primary);
214
+ -webkit-text-fill-color: var(--accent-primary);
215
+ position: relative;
216
+ display: inline-block;
217
+ }
218
+
219
+ .highlight::before {
220
+ content: '';
221
+ position: absolute;
222
+ bottom: 5px;
223
+ left: 0;
224
+ width: 100%;
225
+ height: 15px;
226
+ background: rgba(108, 99, 255, 0.2);
227
+ z-index: -1;
228
+ border-radius: 4px;
229
+ }
230
+
231
+ p.hero-desc {
232
+ font-size: clamp(1rem, 2vw, 1.25rem);
233
+ color: var(--text-muted);
234
+ max-width: 600px;
235
+ margin: 0 auto 3rem;
236
+ animation: fadeInUp 0.8s ease-out 0.4s backwards;
237
+ }
238
+
239
+ .hero-actions {
240
+ display: flex;
241
+ gap: 1rem;
242
+ justify-content: center;
243
+ flex-wrap: wrap;
244
+ animation: fadeInUp 0.8s ease-out 0.6s backwards;
245
+ }
246
+
247
+ .btn-outline {
248
+ padding: 0.8rem 1.5rem;
249
+ background: transparent;
250
+ border: 1px solid var(--glass-border);
251
+ border-radius: 50px;
252
+ color: var(--text-main);
253
+ font-weight: 500;
254
+ cursor: pointer;
255
+ transition: var(--transition-smooth);
256
+ display: flex;
257
+ align-items: center;
258
+ gap: 8px;
259
+ }
260
+
261
+ .btn-outline:hover {
262
+ border-color: var(--text-main);
263
+ background: rgba(255, 255, 255, 0.05);
264
+ }
265
+
266
+ /* =========================================
267
+ 3D FLOATING CARDS (CSS ONLY)
268
+ ========================================= */
269
+ .cards-container {
270
+ display: flex;
271
+ gap: 2rem;
272
+ margin-top: 4rem;
273
+ perspective: 1000px;
274
+ flex-wrap: wrap;
275
+ justify-content: center;
276
+ }
277
+
278
+ .card {
279
+ width: 300px;
280
+ height: 400px;
281
+ background: var(--glass-bg);
282
+ border: 1px solid var(--glass-border);
283
+ border-radius: var(--card-radius);
284
+ padding: 2rem;
285
+ display: flex;
286
+ flex-direction: column;
287
+ justify-content: space-between;
288
+ transition: var(--transition-smooth);
289
+ transform-style: preserve-3d;
290
+ position: relative;
291
+ overflow: hidden;
292
+ }
293
+
294
+ .card::before {
295
+ content: '';
296
+ position: absolute;
297
+ top: 0;
298
+ left: 0;
299
+ width: 100%;
300
+ height: 100%;
301
+ background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
302
+ z-index: 2;
303
+ opacity: 0;
304
+ transition: opacity 0.5s;
305
+ pointer-events: none;
306
+ }
307
+
308
+ .card:hover::before {
309
+ opacity: 1;
310
+ }
311
+
312
+ .card:hover {
313
+ transform: translateY(-10px) scale(1.02);
314
+ border-color: rgba(255, 255, 255, 0.3);
315
+ box-shadow: 0 20px 40px rgba(0,0,0,0.4);
316
+ }
317
+
318
+ .card-icon {
319
+ width: 60px;
320
+ height: 60px;
321
+ border-radius: 16px;
322
+ background: rgba(255, 255, 255, 0.05);
323
+ display: flex;
324
+ align-items: center;
325
+ justify-content: center;
326
+ font-size: 1.5rem;
327
+ color: var(--accent-secondary);
328
+ margin-bottom: 1.5rem;
329
+ transform: translateZ(20px); /* 3D effect */
330
+ }
331
+
332
+ .card h3 {
333
+ font-size: 1.5rem;
334
+ margin-bottom: 0.5rem;
335
+ transform: translateZ(30px);
336
+ }
337
+
338
+ .card p {
339
+ color: var(--text-muted);
340
+ font-size: 0.95rem;
341
+ transform: translateZ(20px);
342
+ }
343
+
344
+ .card-visual {
345
+ height: 150px;
346
+ width: 100%;
347
+ background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent);
348
+ border-radius: 12px;
349
+ margin-top: auto;
350
+ position: relative;
351
+ overflow: hidden;
352
+ transform: translateZ(20px);
353
+ }
354
+
355
+ .card-visual i {
356
+ position: absolute;
357
+ top: 50%;
358
+ left: 50%;
359
+ transform: translate(-50%, -50%);
360
+ font-size: 4rem;
361
+ color: rgba(255,255,255,0.1);
362
+ }
363
+
364
+ /* =========================================
365
+ FOOTER
366
+ ========================================= */
367
+ footer {
368
+ text-align: center;
369
+ padding: 2rem;
370
+ color: var(--text-muted);
371
+ font-size: 0.9rem;
372
+ border-top: 1px solid var(--glass-border);
373
+ background: rgba(5, 5, 5, 0.8);
374
+ }
375
+
376
+ .footer-link {
377
+ color: var(--accent-primary);
378
+ text-decoration: none;
379
+ font-weight: 700;
380
+ transition: 0.3s;
381
+ }
382
+
383
+ .footer-link:hover {
384
+ color: var(--accent-secondary);
385
+ text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
386
+ }
387
+
388
+ /* =========================================
389
+ ANIMATIONS & RESPONSIVE
390
+ ========================================= */
391
+ @keyframes fadeInUp {
392
+ from { opacity: 0; transform: translateY(30px); }
393
+ to { opacity: 1; transform: translateY(0); }
394
+ }
395
+
396
+ @keyframes fadeInDown {
397
+ from { opacity: 0; transform: translateY(-30px); }
398
+ to { opacity: 1; transform: translateY(0); }
399
+ }
400
+
401
+ @media (max-width: 768px) {
402
+ h1 { font-size: 3rem; }
403
+ .nav-links { display: none; } /* Simplified mobile view */
404
+ .cards-container { flex-direction: column; align-items: center; }
405
+ .card { width: 100%; max-width: 320px; }
406
+ }
407
+ </style>
408
+ </head>
409
+ <body>
410
+
411
+ <!-- Ambient Background -->
412
+ <div class="ambient-bg"></div>
413
+ <div class="grid-overlay"></div>
414
+
415
+ <!-- Header -->
416
+ <header>
417
+ <div class="logo">
418
+ <i class="fa-solid fa-cube"></i> HELLO.WORLD
419
+ </div>
420
+ <nav>
421
+ <ul class="nav-links">
422
+ <li><a href="#" class="active">Home</a></li>
423
+ <li><a href="#">Features</a></li>
424
+ <li><a href="#">About</a></li>
425
+ <li><a href="#">Contact</a></li>
426
+ </ul>
427
+ </nav>
428
+ <a href="#" class="btn-cta">
429
+ Get Started <i class="fa-solid fa-arrow-right"></i>
430
+ </a>
431
+ </header>
432
+
433
+ <!-- Main Content -->
434
+ <main>
435
+ <div class="hero-badge">
436
+ <i class="fa-solid fa-bolt"></i> Version 2.0 Now Live
437
+ </div>
438
+
439
+ <h1>
440
+ Welcome to the <br>
441
+ <span class="highlight">Future</span> of Web
442
+ </h1>
443
+
444
+ <p class="hero-desc">
445
+ Experience the next generation of digital interfaces. Built with modern HTML, CSS, and JavaScript, designed for speed, accessibility, and visual impact.
446
+ </p>
447
+
448
+ <div class="hero-actions">
449
+ <button class="btn-cta" onclick="alert('Welcome to the future!')">
450
+ Explore Now
451
+ </button>
452
+ <button class="btn-outline">
453
+ <i class="fa-brands fa-github"></i> View Source
454
+ </button>
455
+ </div>
456
+
457
+ <!-- 3D Interactive Cards -->
458
+ <div class="cards-container">
459
+ <div class="card" data-tilt>
460
+ <div class="card-icon">
461
+ <i class="fa-solid fa-rocket"></i>
462
+ </div>
463
+ <div>
464
+ <h3>Fast Performance</h3>
465
+ <p>Optimized rendering with zero bloat. Experience smooth 60fps animations.</p>
466
+ </div>
467
+ <div class="card-visual">
468
+ <i class="fa-solid fa-bolt"></i>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="card" data-tilt>
473
+ <div class="card-icon" style="color: var(--accent-tertiary);">
474
+ <i class="fa-solid fa-shield-halved"></i>
475
+ </div>
476
+ <div>
477
+ <h3>Secure & Private</h3>
478
+ <p>Your data stays on your device. Local-first architecture with no tracking.</p>
479
+ </div>
480
+ <div class="card-visual">
481
+ <i class="fa-solid fa-lock"></i>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="card" data-tilt>
486
+ <div class="card-icon" style="color: var(--accent-secondary);">
487
+ <i class="fa-solid fa-wand-magic-sparkles"></i>
488
+ </div>
489
+ <div>
490
+ <h3>Modern Design</h3>
491
+ <p>Built with Glassmorphism and CSS Grid. A responsive layout for all devices.</p>
492
+ </div>
493
+ <div class="card-visual">
494
+ <i class="fa-solid fa-layer-group"></i>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </main>
499
+
500
+ <!-- Footer -->
501
+ <footer>
502
+ <p>&copy; 2023 Hello World Application. All rights reserved.</p>
503
+ <p style="margin-top: 0.5rem;">
504
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="footer-link">anycoder</a>
505
+ </p>
506
+ </footer>
507
+
508
+ <!-- JavaScript for Interactions -->
509
+ <script>
510
+ document.addEventListener('DOMContentLoaded', () => {
511
+
512
+ // 1. Dynamic Mouse Follow Effect for Cards
513
+ const cards = document.querySelectorAll('.card');
514
+
515
+ cards.forEach(card => {
516
+ card.addEventListener('mousemove', (e) => {
517
+ const rect = card.getBoundingClientRect();
518
+ const x = e.clientX - rect.left;
519
+ const y = e.clientY - rect.top;
520
+
521
+ // Update CSS variable for gradient
522
+ card.style.setProperty('--mouse-x', `${x}px`);
523
+ card.style.setProperty('--mouse-y', `${y}px`);
524
+ });
525
+ });
526
+
527
+ // 2. Simple Intersection Observer for Scroll Animations
528
+ const observerOptions = {
529
+ threshold: 0.1,
530
+ rootMargin: "0px 0px -50px 0px"
531
+ };
532
+
533
+ const observer = new IntersectionObserver((entries) => {
534
+ entries.forEach(entry => {
535
+ if (entry.isIntersecting) {
536
+ entry.target.style.opacity = '1';
537
+ entry.target.style.transform = 'translateY(0)';
538
+ observer.unobserve(entry.target);
539
+ }
540
+ });
541
+ }, observerOptions);
542
+
543
+ // Select elements to animate on scroll
544
+ const animatedElements = document.querySelectorAll('.card');
545
+ animatedElements.forEach(el => {
546
+ el.style.opacity = '0';
547
+ el.style.transform = 'translateY(50px)';
548
+ el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
549
+ observer.observe(el);
550
+ });
551
+ });
552
+ </script>
553
+ </body>
554
+ </html>