Hugging Face's logo

Spaces:
Nesmaq
/
anycoder-e577b4c1
Running

App Files Community
Nesmaq commited on
Commit
a87f32c
·
verified ·
1 Parent(s): 163ec9e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +665 -19
index.html CHANGED
@@ -1,19 +1,665 @@
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>AI Capabilities Showcase</title>
7
+ <!-- Font Awesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ /* --- CSS VARIABLES & THEME --- */
12
+ :root {
13
+ --primary: #6366f1;
14
+ --primary-hover: #4f46e5;
15
+ --secondary: #ec4899;
16
+ --bg-dark: #0f172a;
17
+ --bg-card: rgba(30, 41, 59, 0.7);
18
+ --text-main: #f8fafc;
19
+ --text-muted: #94a3b8;
20
+ --glass-border: 1px solid rgba(255, 255, 255, 0.1);
21
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
22
+ --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
23
+ }
24
+
25
+ /* --- RESET & BASE STYLES --- */
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ html {
33
+ scroll-behavior: smooth;
34
+ }
35
+
36
+ body {
37
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
38
+ background-color: var(--bg-dark);
39
+ color: var(--text-main);
40
+ line-height: 1.6;
41
+ overflow-x: hidden;
42
+ background-image:
43
+ radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
44
+ radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 40%);
45
+ }
46
+
47
+ a { text-decoration: none; color: inherit; }
48
+ ul { list-style: none; }
49
+
50
+ /* --- LAYOUT UTILITIES --- */
51
+ .container {
52
+ max-width: 1200px;
53
+ margin: 0 auto;
54
+ padding: 0 2rem;
55
+ }
56
+
57
+ .section-title {
58
+ text-align: center;
59
+ font-size: clamp(2rem, 5vw, 3rem);
60
+ margin-bottom: 1rem;
61
+ background: linear-gradient(to right, var(--primary), var(--secondary));
62
+ -webkit-background-clip: text;
63
+ background-clip: text;
64
+ color: transparent;
65
+ font-weight: 800;
66
+ }
67
+
68
+ .section-subtitle {
69
+ text-align: center;
70
+ color: var(--text-muted);
71
+ margin-bottom: 4rem;
72
+ max-width: 600px;
73
+ margin-left: auto;
74
+ margin-right: auto;
75
+ }
76
+
77
+ /* --- HEADER & NAV --- */
78
+ header {
79
+ position: fixed;
80
+ top: 0;
81
+ width: 100%;
82
+ z-index: 1000;
83
+ padding: 1rem 0;
84
+ background: rgba(15, 23, 42, 0.8);
85
+ backdrop-filter: blur(12px);
86
+ border-bottom: var(--glass-border);
87
+ }
88
+
89
+ nav {
90
+ display: flex;
91
+ justify-content: space-between;
92
+ align-items: center;
93
+ }
94
+
95
+ .logo {
96
+ font-size: 1.5rem;
97
+ font-weight: 700;
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 0.5rem;
101
+ }
102
+
103
+ .logo i {
104
+ color: var(--primary);
105
+ }
106
+
107
+ .nav-links {
108
+ display: flex;
109
+ gap: 2rem;
110
+ }
111
+
112
+ .nav-links a {
113
+ font-weight: 500;
114
+ transition: var(--transition);
115
+ position: relative;
116
+ }
117
+
118
+ .nav-links a:hover {
119
+ color: var(--primary);
120
+ }
121
+
122
+ .nav-links a::after {
123
+ content: '';
124
+ position: absolute;
125
+ width: 0;
126
+ height: 2px;
127
+ bottom: -5px;
128
+ left: 0;
129
+ background: var(--primary);
130
+ transition: var(--transition);
131
+ }
132
+
133
+ .nav-links a:hover::after {
134
+ width: 100%;
135
+ }
136
+
137
+ .anycoder-link {
138
+ font-size: 0.85rem;
139
+ background: rgba(255,255,255,0.05);
140
+ padding: 0.5rem 1rem;
141
+ border-radius: 20px;
142
+ border: var(--glass-border);
143
+ transition: var(--transition);
144
+ }
145
+
146
+ .anycoder-link:hover {
147
+ background: var(--primary);
148
+ border-color: var(--primary);
149
+ }
150
+
151
+ /* --- HERO SECTION --- */
152
+ #hero {
153
+ min-height: 100vh;
154
+ display: flex;
155
+ align-items: center;
156
+ justify-content: center;
157
+ text-align: center;
158
+ padding-top: 80px; /* Offset for fixed header */
159
+ }
160
+
161
+ .hero-content h1 {
162
+ font-size: clamp(3rem, 8vw, 5rem);
163
+ line-height: 1.1;
164
+ margin-bottom: 1.5rem;
165
+ font-weight: 800;
166
+ }
167
+
168
+ .hero-content h1 span {
169
+ display: block;
170
+ background: linear-gradient(135deg, #fff 0%, var(--text-muted) 100%);
171
+ -webkit-background-clip: text;
172
+ background-clip: text;
173
+ color: transparent;
174
+ }
175
+
176
+ .hero-content p {
177
+ font-size: 1.25rem;
178
+ color: var(--text-muted);
179
+ margin-bottom: 2.5rem;
180
+ max-width: 700px;
181
+ margin-left: auto;
182
+ margin-right: auto;
183
+ }
184
+
185
+ .cta-group {
186
+ display: flex;
187
+ gap: 1rem;
188
+ justify-content: center;
189
+ }
190
+
191
+ .btn {
192
+ padding: 1rem 2rem;
193
+ border-radius: 50px;
194
+ font-weight: 600;
195
+ cursor: pointer;
196
+ transition: var(--transition);
197
+ border: none;
198
+ font-size: 1rem;
199
+ display: inline-flex;
200
+ align-items: center;
201
+ gap: 0.5rem;
202
+ }
203
+
204
+ .btn-primary {
205
+ background: linear-gradient(to right, var(--primary), var(--secondary));
206
+ color: white;
207
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
208
+ }
209
+
210
+ .btn-primary:hover {
211
+ transform: translateY(-2px);
212
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
213
+ }
214
+
215
+ .btn-outline {
216
+ background: transparent;
217
+ border: 2px solid rgba(255,255,255,0.2);
218
+ color: var(--text-main);
219
+ }
220
+
221
+ .btn-outline:hover {
222
+ border-color: var(--text-main);
223
+ background: rgba(255,255,255,0.05);
224
+ }
225
+
226
+ /* --- FEATURES GRID --- */
227
+ #features {
228
+ padding: 6rem 0;
229
+ }
230
+
231
+ .features-grid {
232
+ display: grid;
233
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
234
+ gap: 2rem;
235
+ }
236
+
237
+ .card {
238
+ background: var(--bg-card);
239
+ backdrop-filter: blur(10px);
240
+ border: var(--glass-border);
241
+ padding: 2.5rem;
242
+ border-radius: 20px;
243
+ transition: var(--transition);
244
+ position: relative;
245
+ overflow: hidden;
246
+ }
247
+
248
+ .card:hover {
249
+ transform: translateY(-10px);
250
+ border-color: var(--primary);
251
+ box-shadow: var(--shadow);
252
+ }
253
+
254
+ .card::before {
255
+ content: '';
256
+ position: absolute;
257
+ top: 0;
258
+ left: 0;
259
+ width: 100%;
260
+ height: 4px;
261
+ background: linear-gradient(to right, var(--primary), var(--secondary));
262
+ transform: scaleX(0);
263
+ transform-origin: left;
264
+ transition: transform 0.4s ease;
265
+ }
266
+
267
+ .card:hover::before {
268
+ transform: scaleX(1);
269
+ }
270
+
271
+ .card-icon {
272
+ font-size: 2.5rem;
273
+ color: var(--primary);
274
+ margin-bottom: 1.5rem;
275
+ }
276
+
277
+ .card h3 {
278
+ font-size: 1.5rem;
279
+ margin-bottom: 1rem;
280
+ }
281
+
282
+ .card p {
283
+ color: var(--text-muted);
284
+ }
285
+
286
+ /* --- INTERACTIVE DEMO SECTION --- */
287
+ #interactive {
288
+ padding: 6rem 0;
289
+ background: rgba(0,0,0,0.2);
290
+ }
291
+
292
+ .demo-container {
293
+ display: grid;
294
+ grid-template-columns: 1fr 1fr;
295
+ gap: 3rem;
296
+ align-items: center;
297
+ background: var(--bg-card);
298
+ border: var(--glass-border);
299
+ border-radius: 24px;
300
+ padding: 3rem;
301
+ }
302
+
303
+ .demo-controls h3 {
304
+ margin-bottom: 1.5rem;
305
+ }
306
+
307
+ .control-group {
308
+ margin-bottom: 1.5rem;
309
+ }
310
+
311
+ .control-group label {
312
+ display: block;
313
+ margin-bottom: 0.5rem;
314
+ font-size: 0.9rem;
315
+ color: var(--text-muted);
316
+ }
317
+
318
+ .input-wrapper {
319
+ display: flex;
320
+ align-items: center;
321
+ gap: 1rem;
322
+ }
323
+
324
+ input[type="text"] {
325
+ width: 100%;
326
+ padding: 0.8rem;
327
+ border-radius: 8px;
328
+ border: 1px solid rgba(255,255,255,0.2);
329
+ background: rgba(0,0,0,0.3);
330
+ color: white;
331
+ font-family: inherit;
332
+ }
333
+
334
+ input[type="range"] {
335
+ width: 100%;
336
+ accent-color: var(--primary);
337
+ }
338
+
339
+ input[type="color"] {
340
+ border: none;
341
+ width: 50px;
342
+ height: 50px;
343
+ cursor: pointer;
344
+ background: none;
345
+ }
346
+
347
+ .demo-preview {
348
+ background: rgba(0,0,0,0.3);
349
+ border-radius: 16px;
350
+ height: 400px;
351
+ display: flex;
352
+ align-items: center;
353
+ justify-content: center;
354
+ border: 2px dashed rgba(255,255,255,0.1);
355
+ position: relative;
356
+ }
357
+
358
+ .preview-box {
359
+ padding: 2rem 3rem;
360
+ border-radius: 12px;
361
+ transition: all 0.2s ease;
362
+ text-align: center;
363
+ box-shadow: 0 20px 50px rgba(0,0,0,0.5);
364
+ }
365
+
366
+ /* Responsive adjustments for demo */
367
+ @media (max-width: 768px) {
368
+ .demo-container {
369
+ grid-template-columns: 1fr;
370
+ }
371
+ }
372
+
373
+ /* --- FOOTER --- */
374
+ footer {
375
+ padding: 3rem 0;
376
+ text-align: center;
377
+ border-top: var(--glass-border);
378
+ margin-top: 4rem;
379
+ }
380
+
381
+ .social-links {
382
+ display: flex;
383
+ justify-content: center;
384
+ gap: 1.5rem;
385
+ margin-bottom: 1.5rem;
386
+ }
387
+
388
+ .social-links a {
389
+ font-size: 1.5rem;
390
+ color: var(--text-muted);
391
+ transition: var(--transition);
392
+ }
393
+
394
+ .social-links a:hover {
395
+ color: var(--primary);
396
+ transform: translateY(-3px);
397
+ }
398
+
399
+ /* --- ANIMATIONS --- */
400
+ @keyframes float {
401
+ 0% { transform: translateY(0px); }
402
+ 50% { transform: translateY(-20px); }
403
+ 100% { transform: translateY(0px); }
404
+ }
405
+
406
+ .floating {
407
+ animation: float 6s ease-in-out infinite;
408
+ }
409
+
410
+ .fade-in {
411
+ opacity: 0;
412
+ transform: translateY(30px);
413
+ transition: opacity 0.6s ease-out, transform 0.6s ease-out;
414
+ }
415
+
416
+ .fade-in.visible {
417
+ opacity: 1;
418
+ transform: translateY(0);
419
+ }
420
+ </style>
421
+ </head>
422
+ <body>
423
+
424
+ <!-- Header -->
425
+ <header>
426
+ <div class="container">
427
+ <nav>
428
+ <div class="logo">
429
+ <i class="fa-solid fa-robot"></i>
430
+ <span>FrontEnd AI</span>
431
+ </div>
432
+ <div class="nav-links">
433
+ <a href="#features">Skills</a>
434
+ <a href="#interactive">Demo</a>
435
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
436
+ Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square"></i>
437
+ </a>
438
+ </div>
439
+ </nav>
440
+ </div>
441
+ </header>
442
+
443
+ <!-- Hero Section -->
444
+ <section id="hero">
445
+ <div class="container hero-content">
446
+ <h1>
447
+ <span>Modern Web Design</span>
448
+ <span>Automated Intelligence</span>
449
+ </h1>
450
+ <p>
451
+ I generate clean, semantic HTML, advanced CSS, and interactive JavaScript.
452
+ Responsive, accessible, and styled to perfection without external frameworks.
453
+ </p>
454
+ <div class="cta-group">
455
+ <a href="#features" class="btn btn-primary">
456
+ <i class="fa-solid fa-layer-group"></i> Explore Capabilities
457
+ </a>
458
+ <a href="#interactive" class="btn btn-outline">
459
+ <i class="fa-solid fa-code"></i> Live Demo
460
+ </a>
461
+ </div>
462
+
463
+ <!-- Decorative animated element -->
464
+ <div style="margin-top: 4rem;" class="floating">
465
+ <i class="fa-solid fa-microchip" style="font-size: 3rem; color: var(--secondary); opacity: 0.8;"></i>
466
+ </div>
467
+ </div>
468
+ </section>
469
+
470
+ <!-- Features Section -->
471
+ <section id="features">
472
+ <div class="container">
473
+ <h2 class="section-title fade-in">What I Can Do</h2>
474
+ <p class="section-subtitle fade-in">Leveraging modern web standards to build robust interfaces.</p>
475
+
476
+ <div class="features-grid">
477
+ <!-- Card 1 -->
478
+ <article class="card fade-in">
479
+ <div class="card-icon"><i class="fa-brands fa-html5"></i></div>
480
+ <h3>Semantic HTML5</h3>
481
+ <p>Building the skeleton of the web with proper accessibility (a11y) in mind. Using correct tags like &lt;nav&gt;, &lt;article&gt;, and &lt;section&gt; for better SEO and screen reader support.</p>
482
+ </article>
483
+
484
+ <!-- Card 2 -->
485
+ <article class="card fade-in">
486
+ <div class="card-icon"><i class="fa-brands fa-css3-alt"></i></div>
487
+ <h3>Modern CSS3</h3>
488
+ <p>Mastering Flexbox, Grid, CSS Variables, and Animations. Creating glassmorphism effects, responsive layouts, and complex visual structures without preprocessors.</p>
489
+ </article>
490
+
491
+ <!-- Card 3 -->
492
+ <article class="card fade-in">
493
+ <div class="card-icon"><i class="fa-brands fa-js"></i></div>
494
+ <h3>Vanilla JavaScript</h3>
495
+ <p>Writing clean, performant logic. DOM manipulation, event handling, Fetch API for data, and interactive state management without relying on heavy libraries like jQuery.</p>
496
+ </article>
497
+
498
+ <!-- Card 4 -->
499
+ <article class="card fade-in">
500
+ <div class="card-icon"><i class="fa-solid fa-mobile-screen"></i></div>
501
+ <h3>Responsive Design</h3>
502
+ <p>Mobile-first approach. Using media queries, fluid typography (clamp), and relative units to ensure the application looks perfect on phones, tablets, and 4k desktops.</p>
503
+ </article>
504
+
505
+ <!-- Card 5 -->
506
+ <article class="card fade-in">
507
+ <div class="card-icon"><i class="fa-solid fa-universal-access"></i></div>
508
+ <h3>Accessibility</h3>
509
+ <p>Ensuring high contrast, focus states, and ARIA labels where necessary. Making the web usable for everyone, regardless of their ability or technology.</p>
510
+ </article>
511
+
512
+ <!-- Card 6 -->
513
+ <article class="card fade-in">
514
+ <div class="card-icon"><i class="fa-solid fa-palette"></i></div>
515
+ <h3>UI/UX Principles</h3>
516
+ <p>Understanding spacing, hierarchy, and color theory. Creating intuitive user flows and polished visual feedback for interactions.</p>
517
+ </article>
518
+ </div>
519
+ </div>
520
+ </section>
521
+
522
+ <!-- Interactive Demo Section -->
523
+ <section id="interactive">
524
+ <div class="container">
525
+ <h2 class="section-title fade-in">Interactive Playground</h2>
526
+ <p class="section-subtitle fade-in">See the code in action. Use the controls to manipulate the DOM in real-time.</p>
527
+
528
+ <div class="demo-container fade-in">
529
+ <!-- Controls -->
530
+ <div class="demo-controls">
531
+ <h3>Configuration</h3>
532
+
533
+ <div class="control-group">
534
+ <label>Box Content</label>
535
+ <div class="input-wrapper">
536
+ <i class="fa-solid fa-font" style="color: var(--text-muted)"></i>
537
+ <input type="text" id="textInput" placeholder="Type something..." value="Hello World">
538
+ </div>
539
+ </div>
540
+
541
+ <div class="control-group">
542
+ <label>Border Radius (Roundness)</label>
543
+ <div class="input-wrapper">
544
+ <i class="fa-solid fa-vector-square" style="color: var(--text-muted)"></i>
545
+ <input type="range" id="radiusInput" min="0" max="50" value="12">
546
+ </div>
547
+ </div>
548
+
549
+ <div class="control-group">
550
+ <label>Background Color</label>
551
+ <div class="input-wrapper">
552
+ <i class="fa-solid fa-eye-dropper" style="color: var(--text-muted)"></i>
553
+ <input type="color" id="colorInput" value="#6366f1">
554
+ <span id="colorValue" style="font-family: monospace; color: var(--text-muted);">#6366f1</span>
555
+ </div>
556
+ </div>
557
+
558
+ <div class="control-group">
559
+ <label>Scale (Size)</label>
560
+ <div class="input-wrapper">
561
+ <i class="fa-solid fa-up-right-and-down-left-from-center" style="color: var(--text-muted)"></i>
562
+ <input type="range" id="scaleInput" min="0.5" max="1.5" step="0.1" value="1">
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Live Preview -->
568
+ <div class="demo-preview">
569
+ <div id="liveBox" class="preview-box">
570
+ Hello World
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </section>
576
+
577
+ <!-- Footer -->
578
+ <footer>
579
+ <div class="container">
580
+ <div class="social-links">
581
+ <a href="#"><i class="fa-brands fa-github"></i></a>
582
+ <a href="#"><i class="fa-brands fa-twitter"></i></a>
583
+ <a href="#"><i class="fa-brands fa-linkedin"></i></a>
584
+ </div>
585
+ <p style="color: var(--text-muted); font-size: 0.9rem;">
586
+ &copy; 2023 AI Front-End Generator. Built with Semantic HTML5, CSS3, & Vanilla JS.
587
+ </p>
588
+ </div>
589
+ </footer>
590
+
591
+ <!-- JavaScript Logic -->
592
+ <script>
593
+ document.addEventListener('DOMContentLoaded', () => {
594
+
595
+ // --- 1. Interactive Demo Logic ---
596
+ const textInput = document.getElementById('textInput');
597
+ const radiusInput = document.getElementById('radiusInput');
598
+ const colorInput = document.getElementById('colorInput');
599
+ const scaleInput = document.getElementById('scaleInput');
600
+ const colorValue = document.getElementById('colorValue');
601
+ const liveBox = document.getElementById('liveBox');
602
+
603
+ // Event Listeners for real-time updates
604
+ textInput.addEventListener('input', (e) => {
605
+ liveBox.textContent = e.target.value || ' ';
606
+ });
607
+
608
+ radiusInput.addEventListener('input', (e) => {
609
+ liveBox.style.borderRadius = `${e.target.value}px`;
610
+ });
611
+
612
+ colorInput.addEventListener('input', (e) => {
613
+ const color = e.target.value;
614
+ liveBox.style.backgroundColor = color;
615
+ // Calculate luminance to decide text color (black or white)
616
+ const r = parseInt(color.substr(1,2), 16);
617
+ const g = parseInt(color.substr(3,2), 16);
618
+ const b = parseInt(color.substr(5,2), 16);
619
+ const yiq = ((r*299)+(g*587)+(b*114))/1000;
620
+ liveBox.style.color = (yiq >= 128) ? '#000' : '#fff';
621
+ colorValue.textContent = color;
622
+ });
623
+
624
+ scaleInput.addEventListener('input', (e) => {
625
+ liveBox.style.transform = `scale(${e.target.value})`;
626
+ });
627
+
628
+ // --- 2. Scroll Animations (Intersection Observer) ---
629
+ const observerOptions = {
630
+ threshold: 0.1,
631
+ rootMargin: "0px 0px -50px 0px"
632
+ };
633
+
634
+ const observer = new IntersectionObserver((entries) => {
635
+ entries.forEach(entry => {
636
+ if (entry.isIntersecting) {
637
+ entry.target.classList.add('visible');
638
+ observer.unobserve(entry.target); // Only animate once
639
+ }
640
+ });
641
+ }, observerOptions);
642
+
643
+ const fadeElements = document.querySelectorAll('.fade-in');
644
+ fadeElements.forEach(el => observer.observe(el));
645
+
646
+ // --- 3. Smooth Scroll for Nav Links ---
647
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
648
+ anchor.addEventListener('click', function (e) {
649
+ e.preventDefault();
650
+ const targetId = this.getAttribute('href');
651
+ const targetElement = document.querySelector(targetId);
652
+
653
+ if(targetElement){
654
+ window.scrollTo({
655
+ top: targetElement.offsetTop - 80, // Offset for sticky header
656
+ behavior: 'smooth'
657
+ });
658
+ }
659
+ });
660
+ });
661
+
662
+ });
663
+ </script>
664
+ </body>
665
+ </html>