Hugging Face's logo

Spaces:
owensong
/
anycoder-2ed0fc62
Running

App Files Community
owensong commited on
Commit
208afe6
·
verified ·
1 Parent(s): 23f0786

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +849 -19
index.html CHANGED
@@ -1,19 +1,849 @@
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>Hi - Interactive Greeting Experience</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary: #6366f1;
12
+ --secondary: #ec4899;
13
+ --accent: #06b6d4;
14
+ --dark: #0f172a;
15
+ --light: #f8fafc;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ body {
25
+ font-family: 'Inter', sans-serif;
26
+ background: var(--dark);
27
+ color: var(--light);
28
+ overflow-x: hidden;
29
+ min-height: 100vh;
30
+ }
31
+
32
+ /* Animated Background */
33
+ .bg-mesh {
34
+ position: fixed;
35
+ inset: 0;
36
+ z-index: -1;
37
+ background:
38
+ radial-gradient(ellipse at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
39
+ radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
40
+ radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
41
+ animation: bgShift 20s ease-in-out infinite;
42
+ }
43
+
44
+ @keyframes bgShift {
45
+ 0%, 100% { transform: scale(1) rotate(0deg); }
46
+ 50% { transform: scale(1.1) rotate(2deg); }
47
+ }
48
+
49
+ /* Floating particles */
50
+ .particle {
51
+ position: fixed;
52
+ width: 4px;
53
+ height: 4px;
54
+ background: rgba(255, 255, 255, 0.3);
55
+ border-radius: 50%;
56
+ pointer-events: none;
57
+ animation: float 15s infinite ease-in-out;
58
+ }
59
+
60
+ @keyframes float {
61
+ 0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
62
+ 10% { opacity: 1; }
63
+ 90% { opacity: 1; }
64
+ 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
65
+ }
66
+
67
+ /* Glass morphism cards */
68
+ .glass {
69
+ background: rgba(255, 255, 255, 0.03);
70
+ backdrop-filter: blur(20px);
71
+ -webkit-backdrop-filter: blur(20px);
72
+ border: 1px solid rgba(255, 255, 255, 0.08);
73
+ }
74
+
75
+ .glass-strong {
76
+ background: rgba(15, 23, 42, 0.6);
77
+ backdrop-filter: blur(30px);
78
+ -webkit-backdrop-filter: blur(30px);
79
+ border: 1px solid rgba(255, 255, 255, 0.1);
80
+ }
81
+
82
+ /* Typography effects */
83
+ .gradient-text {
84
+ background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
85
+ -webkit-background-clip: text;
86
+ -webkit-text-fill-color: transparent;
87
+ background-clip: text;
88
+ }
89
+
90
+ .glow-text {
91
+ text-shadow: 0 0 40px rgba(99, 102, 241, 0.5), 0 0 80px rgba(236, 72, 153, 0.3);
92
+ }
93
+
94
+ /* Interactive elements */
95
+ .btn-magnetic {
96
+ position: relative;
97
+ overflow: hidden;
98
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
99
+ }
100
+
101
+ .btn-magnetic::before {
102
+ content: '';
103
+ position: absolute;
104
+ inset: 0;
105
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
106
+ opacity: 0;
107
+ transition: opacity 0.3s;
108
+ }
109
+
110
+ .btn-magnetic:hover::before {
111
+ opacity: 1;
112
+ }
113
+
114
+ .btn-magnetic:hover {
115
+ transform: translateY(-2px);
116
+ box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
117
+ }
118
+
119
+ /* Wave animation for greeting */
120
+ .wave-hand {
121
+ display: inline-block;
122
+ animation: wave 2s ease-in-out infinite;
123
+ transform-origin: 70% 70%;
124
+ }
125
+
126
+ @keyframes wave {
127
+ 0%, 100% { transform: rotate(0deg); }
128
+ 10% { transform: rotate(14deg); }
129
+ 20% { transform: rotate(-8deg); }
130
+ 30% { transform: rotate(14deg); }
131
+ 40% { transform: rotate(-4deg); }
132
+ 50% { transform: rotate(10deg); }
133
+ 60% { transform: rotate(0deg); }
134
+ }
135
+
136
+ /* Typing cursor */
137
+ .cursor-blink {
138
+ animation: blink 1s step-end infinite;
139
+ }
140
+
141
+ @keyframes blink {
142
+ 0%, 100% { opacity: 1; }
143
+ 50% { opacity: 0; }
144
+ }
145
+
146
+ /* Card hover effects */
147
+ .feature-card {
148
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
149
+ }
150
+
151
+ .feature-card:hover {
152
+ transform: translateY(-8px) scale(1.02);
153
+ border-color: rgba(99, 102, 241, 0.4);
154
+ box-shadow: 0 25px 50px rgba(99, 102, 241, 0.15);
155
+ }
156
+
157
+ /* Scroll reveal */
158
+ .reveal {
159
+ opacity: 0;
160
+ transform: translateY(30px);
161
+ transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
162
+ }
163
+
164
+ .reveal.active {
165
+ opacity: 1;
166
+ transform: translateY(0);
167
+ }
168
+
169
+ /* Custom scrollbar */
170
+ ::-webkit-scrollbar {
171
+ width: 8px;
172
+ }
173
+
174
+ ::-webkit-scrollbar-track {
175
+ background: var(--dark);
176
+ }
177
+
178
+ ::-webkit-scrollbar-thumb {
179
+ background: linear-gradient(var(--primary), var(--secondary));
180
+ border-radius: 4px;
181
+ }
182
+
183
+ /* Noise texture overlay */
184
+ .noise {
185
+ position: fixed;
186
+ inset: 0;
187
+ z-index: -1;
188
+ opacity: 0.03;
189
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
190
+ pointer-events: none;
191
+ }
192
+
193
+ /* Interactive canvas */
194
+ #interactiveCanvas {
195
+ position: fixed;
196
+ inset: 0;
197
+ z-index: -1;
198
+ pointer-events: none;
199
+ }
200
+
201
+ /* Morphing blob */
202
+ .blob {
203
+ position: absolute;
204
+ width: 500px;
205
+ height: 500px;
206
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
207
+ border-radius: 50%;
208
+ filter: blur(80px);
209
+ opacity: 0.3;
210
+ animation: morph 8s ease-in-out infinite;
211
+ }
212
+
213
+ @keyframes morph {
214
+ 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); }
215
+ 25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg) scale(1.1); }
216
+ 50% { border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%; transform: rotate(180deg) scale(1); }
217
+ 75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; transform: rotate(270deg) scale(1.1); }
218
+ }
219
+
220
+ /* Stagger children animation */
221
+ .stagger-children > * {
222
+ opacity: 0;
223
+ transform: translateY(20px);
224
+ animation: staggerIn 0.6s ease forwards;
225
+ }
226
+
227
+ .stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
228
+ .stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
229
+ .stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
230
+ .stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
231
+
232
+ @keyframes staggerIn {
233
+ to {
234
+ opacity: 1;
235
+ transform: translateY(0);
236
+ }
237
+ }
238
+
239
+ /* Input styling */
240
+ .fancy-input {
241
+ background: rgba(255, 255, 255, 0.05);
242
+ border: 1px solid rgba(255, 255, 255, 0.1);
243
+ transition: all 0.3s;
244
+ }
245
+
246
+ .fancy-input:focus {
247
+ outline: none;
248
+ border-color: var(--primary);
249
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
250
+ background: rgba(255, 255, 255, 0.08);
251
+ }
252
+
253
+ /* Terminal effect */
254
+ .terminal {
255
+ font-family: 'Space Mono', monospace;
256
+ }
257
+
258
+ .terminal-line {
259
+ position: relative;
260
+ padding-left: 1.5rem;
261
+ }
262
+
263
+ .terminal-line::before {
264
+ content: '>';
265
+ position: absolute;
266
+ left: 0;
267
+ color: var(--accent);
268
+ }
269
+
270
+ /* Pulse ring */
271
+ .pulse-ring {
272
+ position: relative;
273
+ }
274
+
275
+ .pulse-ring::after {
276
+ content: '';
277
+ position: absolute;
278
+ inset: -4px;
279
+ border-radius: inherit;
280
+ border: 2px solid var(--primary);
281
+ animation: pulseRing 2s ease-out infinite;
282
+ }
283
+
284
+ @keyframes pulseRing {
285
+ 0% { transform: scale(1); opacity: 1; }
286
+ 100% { transform: scale(1.2); opacity: 0; }
287
+ }
288
+
289
+ /* 3D tilt card */
290
+ .tilt-card {
291
+ transform-style: preserve-3d;
292
+ perspective: 1000px;
293
+ }
294
+
295
+ .tilt-inner {
296
+ transition: transform 0.1s ease-out;
297
+ transform-style: preserve-3d;
298
+ }
299
+
300
+ /* Loading shimmer */
301
+ .shimmer {
302
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
303
+ background-size: 200% 100%;
304
+ animation: shimmer 2s infinite;
305
+ }
306
+
307
+ @keyframes shimmer {
308
+ 0% { background-position: -200% 0; }
309
+ 100% { background-position: 200% 0; }
310
+ }
311
+ </style>
312
+ </head>
313
+ <body>
314
+ <!-- Background elements -->
315
+ <div class="bg-mesh"></div>
316
+ <div class="noise"></div>
317
+ <canvas id="interactiveCanvas"></canvas>
318
+
319
+ <!-- Floating particles container -->
320
+ <div id="particles"></div>
321
+
322
+ <!-- Navigation -->
323
+ <nav class="fixed top-0 left-0 right-0 z-50 glass-strong">
324
+ <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
325
+ <a href="#" class="text-xl font-bold gradient-text tracking-tight">hi.</a>
326
+ <div class="hidden md:flex items-center gap-8">
327
+ <a href="#experience" class="text-sm text-slate-400 hover:text-white transition-colors">Experience</a>
328
+ <a href="#features" class="text-sm text-slate-400 hover:text-white transition-colors">Features</a>
329
+ <a href="#connect" class="text-sm text-slate-400 hover:text-white transition-colors">Connect</a>
330
+ </div>
331
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-500 hover:text-slate-300 transition-colors">
332
+ Built with anycoder
333
+ </a>
334
+ </div>
335
+ </nav>
336
+
337
+ <!-- Hero Section -->
338
+ <section class="relative min-h-screen flex items-center justify-center px-6 overflow-hidden">
339
+ <div class="blob top-1/4 left-1/4"></div>
340
+ <div class="blob bottom-1/4 right-1/4" style="animation-delay: -4s; background: linear-gradient(135deg, var(--accent), var(--primary));"></div>
341
+
342
+ <div class="relative z-10 text-center max-w-4xl mx-auto">
343
+ <div class="mb-6 inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-slate-400">
344
+ <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
345
+ <span id="liveTime">Loading...</span>
346
+ </div>
347
+
348
+ <h1 class="text-6xl md:text-8xl lg:text-9xl font-black mb-6 tracking-tighter">
349
+ <span class="wave-hand">👋</span>
350
+ <span class="gradient-text glow-text">hi</span>
351
+ </h1>
352
+
353
+ <div class="h-16 md:h-20 flex items-center justify-center">
354
+ <p class="text-xl md:text-3xl text-slate-400 font-light">
355
+ <span id="typewriter"></span><span class="cursor-blink text-cyan-400">|</span>
356
+ </p>
357
+ </div>
358
+
359
+ <p class="text-slate-500 max-w-lg mx-auto mb-10 leading-relaxed">
360
+ An interactive greeting experience crafted with modern web technologies.
361
+ Type your name below and let's make it personal.
362
+ </p>
363
+
364
+ <div class="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-md mx-auto">
365
+ <input
366
+ type="text"
367
+ id="nameInput"
368
+ placeholder="Enter your name..."
369
+ class="fancy-input w-full px-6 py-4 rounded-2xl text-white placeholder-slate-500 text-center sm:text-left"
370
+ autocomplete="off"
371
+ >
372
+ <button
373
+ id="greetBtn"
374
+ class="btn-magnetic px-8 py-4 rounded-2xl font-semibold text-white whitespace-nowrap relative z-10"
375
+ >
376
+ Say Hi Back
377
+ </button>
378
+ </div>
379
+
380
+ <div id="greetingResult" class="mt-8 opacity-0 transition-all duration-500 transform translate-y-4"></div>
381
+ </div>
382
+
383
+ <div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
384
+ <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
385
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
386
+ </svg>
387
+ </div>
388
+ </section>
389
+
390
+ <!-- Experience Section -->
391
+ <section id="experience" class="py-24 px-6">
392
+ <div class="max-w-6xl mx-auto">
393
+ <div class="reveal text-center mb-16">
394
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">The <span class="gradient-text">Experience</span></h2>
395
+ <p class="text-slate-500 max-w-2xl mx-auto">Every interaction is designed to delight. Hover, click, and explore.</p>
396
+ </div>
397
+
398
+ <div class="grid md:grid-cols-3 gap-6 stagger-children">
399
+ <!-- Card 1: Interactive Terminal -->
400
+ <div class="feature-card glass rounded-3xl p-8 tilt-card" data-tilt>
401
+ <div class="tilt-inner">
402
+ <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6 text-2xl">
403
+ ⌨️
404
+ </div>
405
+ <h3 class="text-xl font-bold mb-3">Live Terminal</h3>
406
+ <div class="terminal text-sm text-slate-400 space-y-2" id="terminalOutput">
407
+ <div class="terminal-line">system.init()</div>
408
+ <div class="terminal-line">loading modules...</div>
409
+ <div class="terminal-line text-emerald-400">ready ✓</div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Card 2: Mood Detector -->
415
+ <div class="feature-card glass rounded-3xl p-8 tilt-card" data-tilt>
416
+ <div class="tilt-inner">
417
+ <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 text-2xl">
418
+ 😊
419
+ </div>
420
+ <h3 class="text-xl font-bold mb-3">Mood Visualizer</h3>
421
+ <p class="text-slate-400 text-sm mb-4">Move your mouse to paint emotions</p>
422
+ <div class="flex gap-2 flex-wrap" id="moodTags">
423
+ <span class="px-3 py-1 rounded-full text-xs bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">curious</span>
424
+ <span class="px-3 py-1 rounded-full text-xs bg-pink-500/20 text-pink-300 border border-pink-500/30">excited</span>
425
+ <span class="px-3 py-1 rounded-full text-xs bg-cyan-500/20 text-cyan-300 border border-cyan-500/30">creative</span>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Card 3: Time Capsule -->
431
+ <div class="feature-card glass rounded-3xl p-8 tilt-card" data-tilt>
432
+ <div class="tilt-inner">
433
+ <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center mb-6 text-2xl">
434
+ ⏰
435
+ </div>
436
+ <h3 class="text-xl font-bold mb-3">Time Capsule</h3>
437
+ <div class="space-y-3">
438
+ <div class="flex justify-between text-sm">
439
+ <span class="text-slate-500">Session duration</span>
440
+ <span class="text-cyan-400 font-mono" id="sessionTime">00:00</span>
441
+ </div>
442
+ <div class="flex justify-between text-sm">
443
+ <span class="text-slate-500">Interactions</span>
444
+ <span class="text-cyan-400 font-mono" id="interactionCount">0</span>
445
+ </div>
446
+ <div class="flex justify-between text-sm">
447
+ <span class="text-slate-500">Mouse distance</span>
448
+ <span class="text-cyan-400 font-mono" id="mouseDistance">0 px</span>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <!-- Features Grid -->
458
+ <section id="features" class="py-24 px-6 relative">
459
+ <div class="max-w-6xl mx-auto">
460
+ <div class="reveal text-center mb-16">
461
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">What Makes Us <span class="gradient-text">Different</span></h2>
462
+ </div>
463
+
464
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 reveal">
465
+ <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)">
466
+ <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">🎨</div>
467
+ <h4 class="font-semibold mb-1">Generative Art</h4>
468
+ <p class="text-sm text-slate-500">Every visit creates unique visual patterns</p>
469
+ </div>
470
+ <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)">
471
+ <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">⚡</div>
472
+ <h4 class="font-semibold mb-1">Lightning Fast</h4>
473
+ <p class="text-sm text-slate-500">Optimized for 60fps animations</p>
474
+ </div>
475
+ <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)">
476
+ <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">🔒</div>
477
+ <h4 class="font-semibold mb-1">Privacy First</h4>
478
+ <p class="text-sm text-slate-500">No data leaves your browser</p>
479
+ </div>
480
+ <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)">
481
+ <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">🌐</div>
482
+ <h4 class="font-semibold mb-1">Universal</h4>
483
+ <p class="text-sm text-slate-500">Works on every modern device</p>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </section>
488
+
489
+ <!-- Interactive Playground -->
490
+ <section class="py-24 px-6">
491
+ <div class="max-w-4xl mx-auto">
492
+ <div class="reveal glass rounded-3xl p-8 md:p-12">
493
+ <h2 class="text-3xl font-bold mb-8 text-center">Interactive <span class="gradient-text">Playground</span></h2>
494
+
495
+ <!-- Color Harmony -->
496
+ <div class="mb-10">
497
+ <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Color Harmony</h3>
498
+ <div class="flex gap-4 justify-center flex-wrap" id="colorPalette">
499
+ <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 hover:scale-110 transition-transform shadow-lg shadow-indigo-500/25" onclick="setTheme('indigo')"></button>
500
+ <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 hover:scale-110 transition-transform shadow-lg shadow-pink-500/25" onclick="setTheme('pink')"></button>
501
+ <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 hover:scale-110 transition-transform shadow-lg shadow-cyan-500/25" onclick="setTheme('cyan')"></button>
502
+ <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 hover:scale-110 transition-transform shadow-lg shadow-amber-500/25" onclick="setTheme('amber')"></button>
503
+ <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 hover:scale-110 transition-transform shadow-lg shadow-emerald-500/25" onclick="setTheme('emerald')"></button>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- Sound Visualizer (Visual Only) -->
508
+ <div class="mb-10">
509
+ <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Rhythm Visualizer</h3>
510
+ <div class="flex items-end justify-center gap-1 h-32" id="visualizer">
511
+ <!-- Bars generated by JS -->
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Emoji Reactions -->
516
+ <div class="text-center">
517
+ <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">How are you feeling?</h3>
518
+ <div class="flex gap-4 justify-center flex-wrap">
519
+ <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('🤩')">🤩</button>
520
+ <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('😎')">😎</button>
521
+ <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('🤔')">🤔</button>
522
+ <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('🥳')">🥳</button>
523
+ <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('😴')">😴</button>
524
+ </div>
525
+ <div id="reactionDisplay" class="mt-6 text-6xl animate-bounce hidden"></div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </section>
530
+
531
+ <!-- Connect Section -->
532
+ <section id="connect" class="py-24 px-6">
533
+ <div class="max-w-2xl mx-auto text-center reveal">
534
+ <h2 class="text-4xl font-bold mb-4">Let's <span class="gradient-text">Connect</span></h2>
535
+ <p class="text-slate-500 mb-10">Have an idea? Want to collaborate? Just want to say hi back?</p>
536
+
537
+ <form class="space-y-4" onsubmit="handleSubmit(event)">
538
+ <input type="email" placeholder="your@email.com" class="fancy-input w-full px-6 py-4 rounded-2xl text-white placeholder-slate-500" required>
539
+ <textarea placeholder="What's on your mind?" rows="4" class="fancy-input w-full px-6 py-4 rounded-2xl text-white placeholder-slate-500 resize-none" required></textarea>
540
+ <button type="submit" class="btn-magnetic w-full px-8 py-4 rounded-2xl font-semibold text-white relative z-10">
541
+ Send Message
542
+ </button>
543
+ </form>
544
+
545
+ <div class="mt-12 flex justify-center gap-6">
546
+ <a href="#" class="w-12 h-12 rounded-2xl glass flex items-center justify-center hover:scale-110 transition-transform text-slate-400 hover:text-white">
547
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
548
+ </a>
549
+ <a href="#" class="w-12 h-12 rounded-2xl glass flex items-center justify-center hover:scale-110 transition-transform text-slate-400 hover:text-white">
550
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
551
+ </a>
552
+ <a href="#" class="w-12 h-12 rounded-2xl glass flex items-center justify-center hover:scale-110 transition-transform text-slate-400 hover:text-white">
553
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
554
+ </a>
555
+ </div>
556
+ </div>
557
+ </section>
558
+
559
+ <!-- Footer -->
560
+ <footer class="py-12 px-6 border-t border-white/5">
561
+ <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
562
+ <p class="text-slate-600 text-sm"> Crafted with curiosity and code.</p>
563
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-sm text-slate-500 hover:text-slate-300 transition-colors">
564
+ Built with anycoder →
565
+ </a>
566
+ </div>
567
+ </footer>
568
+
569
+ <!-- Toast notification -->
570
+ <div id="toast" class="fixed bottom-6 right-6 glass-strong px-6 py-4 rounded-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 max-w-sm">
571
+ <p id="toastMessage" class="text-sm"></p>
572
+ </div>
573
+
574
+ <script>
575
+ // ========== PARTICLE SYSTEM ==========
576
+ function createParticles() {
577
+ const container = document.getElementById('particles');
578
+ for (let i = 0; i < 30; i++) {
579
+ const particle = document.createElement('div');
580
+ particle.className = 'particle';
581
+ particle.style.left = Math.random() * 100 + '%';
582
+ particle.style.animationDelay = Math.random() * 15 + 's';
583
+ particle.style.animationDuration = (10 + Math.random() * 10) + 's';
584
+ particle.style.width = (2 + Math.random() * 4) + 'px';
585
+ particle.style.height = particle.style.width;
586
+ container.appendChild(particle);
587
+ }
588
+ }
589
+ createParticles();
590
+
591
+ // ========== CANVAS INTERACTIVE BACKGROUND ==========
592
+ const canvas = document.getElementById('interactiveCanvas');
593
+ const ctx = canvas.getContext('2d');
594
+ let mouseX = 0, mouseY = 0;
595
+ let canvasDots = [];
596
+
597
+ function resizeCanvas() {
598
+ canvas.width = window.innerWidth;
599
+ canvas.height = window.innerHeight;
600
+ }
601
+ resizeCanvas();
602
+ window.addEventListener('resize', resizeCanvas);
603
+
604
+ class Dot {
605
+ constructor() {
606
+ this.x = Math.random() * canvas.width;
607
+ this.y = Math.random() * canvas.height;
608
+ this.vx = (Math.random() - 0.5) * 0.5;
609
+ this.vy = (Math.random() - 0.5) * 0.5;
610
+ this.radius = Math.random() * 2 + 1;
611
+ }
612
+
613
+ update() {
614
+ // Mouse attraction
615
+ const dx = mouseX - this.x;
616
+ const dy = mouseY - this.y;
617
+ const dist = Math.sqrt(dx * dx + dy * dy);
618
+ if (dist < 200) {
619
+ this.vx += dx * 0.0001;
620
+ this.vy += dy * 0.0001;
621
+ }
622
+
623
+ this.x += this.vx;
624
+ this.y += this.vy;
625
+
626
+ // Bounce
627
+ if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
628
+ if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
629
+
630
+ // Friction
631
+ this.vx *= 0.99;
632
+ this.vy *= 0.99;
633
+ }
634
+
635
+ draw() {
636
+ ctx.beginPath();
637
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
638
+ ctx.fillStyle = 'rgba(99, 102, 241, 0.5)';
639
+ ctx.fill();
640
+ }
641
+ }
642
+
643
+ for (let i = 0; i < 50; i++) {
644
+ canvasDots.push(new Dot());
645
+ }
646
+
647
+ function animateCanvas() {
648
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
649
+
650
+ // Draw connections
651
+ for (let i = 0; i < canvasDots.length; i++) {
652
+ for (let j = i + 1; j < canvasDots.length; j++) {
653
+ const dx = canvasDots[i].x - canvasDots[j].x;
654
+ const dy = canvasDots[i].y - canvasDots[j].y;
655
+ const dist = Math.sqrt(dx * dx + dy * dy);
656
+
657
+ if (dist < 150) {
658
+ ctx.beginPath();
659
+ ctx.moveTo(canvasDots[i].x, canvasDots[i].y);
660
+ ctx.lineTo(canvasDots[j].x, canvasDots[j].y);
661
+ ctx.strokeStyle = `rgba(99, 102, 241, ${0.2 * (1 - dist / 150)})`;
662
+ ctx.lineWidth = 0.5;
663
+ ctx.stroke();
664
+ }
665
+ }
666
+ }
667
+
668
+ canvasDots.forEach(dot => {
669
+ dot.update();
670
+ dot.draw();
671
+ });
672
+
673
+ requestAnimationFrame(animateCanvas);
674
+ }
675
+ animateCanvas();
676
+
677
+ // ========== MOUSE TRACKING ==========
678
+ let lastMouseX = 0, lastMouseY = 0, totalDistance = 0;
679
+ document.addEventListener('mousemove', (e) => {
680
+ mouseX = e.clientX;
681
+ mouseY = e.clientY;
682
+
683
+ const dx = e.clientX - lastMouseX;
684
+ const dy = e.clientY - lastMouseY;
685
+ totalDistance += Math.sqrt(dx * dx + dy * dy);
686
+ lastMouseX = e.clientX;
687
+ lastMouseY = e.clientY;
688
+
689
+ document.getElementById('mouseDistance').textContent = Math.floor(totalDistance) + ' px';
690
+ });
691
+
692
+ // ========== TYPEWRITER EFFECT ==========
693
+ const phrases = [
694
+ 'Nice to meet you.',
695
+ 'Welcome to my world.',
696
+ 'Let\'s create something amazing.',
697
+ 'What brings you here today?'
698
+ ];
699
+ let phraseIndex = 0;
700
+ let charIndex = 0;
701
+ let isDeleting = false;
702
+ const typewriter = document.getElementById('typewriter');
703
+
704
+ function typeEffect() {
705
+ const current = phrases[phraseIndex];
706
+
707
+ if (isDeleting) {
708
+ typewriter.textContent = current.substring(0, charIndex - 1);
709
+ charIndex--;
710
+ } else {
711
+ typewriter.textContent = current.substring(0, charIndex + 1);
712
+ charIndex++;
713
+ }
714
+
715
+ let typeSpeed = isDeleting ? 50 : 100;
716
+
717
+ if (!isDeleting && charIndex === current.length) {
718
+ typeSpeed = 2000;
719
+ isDeleting = true;
720
+ } else if (isDeleting && charIndex === 0) {
721
+ isDeleting = false;
722
+ phraseIndex = (phraseIndex + 1) % phrases.length;
723
+ typeSpeed = 500;
724
+ }
725
+
726
+ setTimeout(typeEffect, typeSpeed);
727
+ }
728
+ typeEffect();
729
+
730
+ // ========== LIVE TIME ==========
731
+ function updateTime() {
732
+ const now = new Date();
733
+ const timeStr = now.toLocaleTimeString('en-US', {
734
+ hour: '2-digit',
735
+ minute: '2-digit',
736
+ second: '2-digit',
737
+ hour12: true
738
+ });
739
+ document.getElementById('liveTime').textContent = timeStr;
740
+ }
741
+ setInterval(updateTime, 1000);
742
+ updateTime();
743
+
744
+ // ========== SESSION TIMER ==========
745
+ let sessionStart = Date.now();
746
+ let interactionCount = 0;
747
+
748
+ function updateSession() {
749
+ const elapsed = Math.floor((Date.now() - sessionStart) / 1000);
750
+ const mins = Math.floor(elapsed / 60).toString().padStart(2, '0');
751
+ const secs = (elapsed % 60).toString().padStart(2, '0');
752
+ document.getElementById('sessionTime').textContent = `${mins}:${secs}`;
753
+ }
754
+ setInterval(updateSession, 1000);
755
+
756
+ // Track interactions
757
+ document.addEventListener('click', () => {
758
+ interactionCount++;
759
+ document.getElementById('interactionCount').textContent = interactionCount;
760
+ });
761
+
762
+ // ========== GREETING SYSTEM ==========
763
+ const nameInput = document.getElementById('nameInput');
764
+ const greetBtn = document.getElementById('greetBtn');
765
+ const greetingResult = document.getElementById('greetingResult');
766
+
767
+ const greetings = {
768
+ morning: ['Good morning', 'Rise and shine', 'Top of the morning'],
769
+ afternoon: ['Good afternoon', 'Hope you\'re having a great day', 'Hello there'],
770
+ evening: ['Good evening', 'Hope you had a wonderful day', 'Nice to see you this evening'],
771
+ night: ['Working late', 'Night owl spotted', 'Can\'t sleep either']
772
+ };
773
+
774
+ function getGreeting() {
775
+ const hour = new Date().getHours();
776
+ if (hour < 12) return greetings.morning;
777
+ if (hour < 17) return greetings.afternoon;
778
+ if (hour < 21) return greetings.evening;
779
+ return greetings.night;
780
+ }
781
+
782
+ greetBtn.addEventListener('click', () => {
783
+ const name = nameInput.value.trim();
784
+ if (!name) {
785
+ showToast('Please enter your name first!');
786
+ nameInput.focus();
787
+ return;
788
+ }
789
+
790
+ const timeGreetings = getGreeting();
791
+ const randomGreeting = timeGreetings[Math.floor(Math.random() * timeGreetings.length)];
792
+
793
+ greetingResult.innerHTML = `
794
+ <div class="glass rounded-3xl p-8 inline-block">
795
+ <p class="text-2xl md:text-4xl font-bold gradient-text mb-2">${randomGreeting}, ${name}!</p>
796
+ <p class="text-slate-400">Thanks for saying hi back.</p>
797
+ <div class="mt-4 flex gap-2 justify-center">
798
+ ${Array(5).fill().map(() => '<span class="text-2xl animate-bounce" style="animation-delay: ' + Math.random() + 's">✨</span>').join('')}
799
+ </div>
800
+ </div>
801
+ `;
802
+ greetingResult.style.opacity = '1';
803
+ greetingResult.style.transform = 'translateY(0)';
804
+
805
+ // Add terminal line
806
+ addTerminalLine(`greeted user: ${name}`);
807
+ });
808
+
809
+ nameInput.addEventListener('keypress', (e) => {
810
+ if (e.key === 'Enter') greetBtn.click();
811
+ });
812
+
813
+ // ========== TERMINAL ==========
814
+ function addTerminalLine(text) {
815
+ const terminal = document.getElementById('terminalOutput');
816
+ const line = document.createElement('div');
817
+ line.className = 'terminal-line';
818
+ line.textContent = text;
819
+ terminal.appendChild(line);
820
+ terminal.scrollTop = terminal.scrollHeight;
821
+
822
+ // Keep only last 5 lines
823
+ while (terminal.children.length > 5) {
824
+ terminal.removeChild(terminal.firstChild);
825
+ }
826
+ }
827
+
828
+ // Terminal auto-updates
829
+ setInterval(() => {
830
+ const events = [
831
+ 'heartbeat: ' + Math.floor(Math.random() * 100) + 'ms',
832
+ 'mouse tracking: active',
833
+ 'particles: ' + document.querySelectorAll('.particle').length,
834
+ 'canvas fps: 60',
835
+ 'theme: ' + getComputedStyle(document.documentElement).getPropertyValue('--primary')
836
+ ];
837
+ addTerminalLine(events[Math.floor(Math.random() * events.length)]);
838
+ }, 3000);
839
+
840
+ // ========== 3D TILT CARDS ==========
841
+ document.querySelectorAll('[data-tilt]').forEach(card => {
842
+ const inner = card.querySelector('.tilt-inner');
843
+
844
+ card.addEventListener('mousemove', (e) => {
845
+ const rect = card.getBoundingClientRect();
846
+ const x = e.clientX - rect.left;
847
+ const y = e.clientY - rect.top;
848
+ const centerX = rect.width / 2;
849
+ const center