Hugging Face's logo

Spaces:
massaro24
/
anycoder-1c91b6bd
Running

App Files Community
massaro24 commited on
Commit
49e5dc7
·
verified ·
1 Parent(s): 9b41a99

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1113 -19
index.html CHANGED
@@ -1,19 +1,1113 @@
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="it">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cosa Sono in Grado di Fare</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary: #6366f1;
17
+ --primary-dark: #4f46e5;
18
+ --secondary: #8b5cf6;
19
+ --accent: #ec4899;
20
+ --bg: #0f172a;
21
+ --surface: #1e293b;
22
+ --surface-light: #334155;
23
+ --text: #e2e8f0;
24
+ --text-dim: #94a3b8;
25
+ --success: #10b981;
26
+ --warning: #f59e0b;
27
+ --danger: #ef4444;
28
+ --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
29
+ }
30
+
31
+ body {
32
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
33
+ background: var(--bg);
34
+ color: var(--text);
35
+ overflow-x: hidden;
36
+ position: relative;
37
+ }
38
+
39
+ body.light-mode {
40
+ --bg: #ffffff;
41
+ --surface: #f8fafc;
42
+ --surface-light: #e2e8f0;
43
+ --text: #1e293b;
44
+ --text-dim: #64748b;
45
+ }
46
+
47
+ /* Animated Background */
48
+ .bg-animation {
49
+ position: fixed;
50
+ width: 100%;
51
+ height: 100%;
52
+ top: 0;
53
+ left: 0;
54
+ z-index: -1;
55
+ background: linear-gradient(45deg, #0f172a, #1e293b, #0f172a);
56
+ background-size: 400% 400%;
57
+ animation: gradientShift 15s ease infinite;
58
+ }
59
+
60
+ body.light-mode .bg-animation {
61
+ background: linear-gradient(45deg, #f8fafc, #e2e8f0, #f8fafc);
62
+ }
63
+
64
+ @keyframes gradientShift {
65
+ 0% { background-position: 0% 50%; }
66
+ 50% { background-position: 100% 50%; }
67
+ 100% { background-position: 0% 50%; }
68
+ }
69
+
70
+ .floating-shapes {
71
+ position: fixed;
72
+ width: 100%;
73
+ height: 100%;
74
+ overflow: hidden;
75
+ z-index: -1;
76
+ }
77
+
78
+ .shape {
79
+ position: absolute;
80
+ border-radius: 50%;
81
+ background: var(--gradient);
82
+ opacity: 0.1;
83
+ animation: float 20s infinite ease-in-out;
84
+ }
85
+
86
+ @keyframes float {
87
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
88
+ 33% { transform: translateY(-100px) rotate(120deg); }
89
+ 66% { transform: translateY(100px) rotate(240deg); }
90
+ }
91
+
92
+ /* Header */
93
+ header {
94
+ padding: 1.5rem 2rem;
95
+ background: rgba(30, 41, 59, 0.8);
96
+ backdrop-filter: blur(10px);
97
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
98
+ position: sticky;
99
+ top: 0;
100
+ z-index: 100;
101
+ transition: all 0.3s ease;
102
+ }
103
+
104
+ body.light-mode header {
105
+ background: rgba(248, 250, 252, 0.9);
106
+ border-bottom: 1px solid rgba(148, 163, 184, 0.2);
107
+ }
108
+
109
+ nav {
110
+ max-width: 1400px;
111
+ margin: 0 auto;
112
+ display: flex;
113
+ justify-content: space-between;
114
+ align-items: center;
115
+ }
116
+
117
+ .logo {
118
+ font-size: 1.5rem;
119
+ font-weight: bold;
120
+ background: var(--gradient);
121
+ -webkit-background-clip: text;
122
+ -webkit-text-fill-color: transparent;
123
+ animation: pulse 2s ease-in-out infinite;
124
+ }
125
+
126
+ @keyframes pulse {
127
+ 0%, 100% { transform: scale(1); }
128
+ 50% { transform: scale(1.05); }
129
+ }
130
+
131
+ .nav-links {
132
+ display: flex;
133
+ gap: 2rem;
134
+ align-items: center;
135
+ }
136
+
137
+ .nav-links a {
138
+ color: var(--text-dim);
139
+ text-decoration: none;
140
+ transition: all 0.3s ease;
141
+ position: relative;
142
+ }
143
+
144
+ .nav-links a:hover {
145
+ color: var(--primary);
146
+ }
147
+
148
+ .nav-links a::after {
149
+ content: '';
150
+ position: absolute;
151
+ bottom: -5px;
152
+ left: 0;
153
+ width: 0;
154
+ height: 2px;
155
+ background: var(--gradient);
156
+ transition: width 0.3s ease;
157
+ }
158
+
159
+ .nav-links a:hover::after {
160
+ width: 100%;
161
+ }
162
+
163
+ .theme-toggle {
164
+ background: var(--surface-light);
165
+ border: none;
166
+ color: var(--text);
167
+ width: 50px;
168
+ height: 50px;
169
+ border-radius: 50%;
170
+ cursor: pointer;
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ transition: all 0.3s ease;
175
+ }
176
+
177
+ .theme-toggle:hover {
178
+ transform: rotate(180deg);
179
+ background: var(--primary);
180
+ }
181
+
182
+ /* Hero Section */
183
+ .hero {
184
+ min-height: 100vh;
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ padding: 4rem 2rem;
189
+ position: relative;
190
+ }
191
+
192
+ .hero-content {
193
+ text-align: center;
194
+ max-width: 900px;
195
+ animation: fadeInUp 1s ease;
196
+ }
197
+
198
+ @keyframes fadeInUp {
199
+ from {
200
+ opacity: 0;
201
+ transform: translateY(30px);
202
+ }
203
+ to {
204
+ opacity: 1;
205
+ transform: translateY(0);
206
+ }
207
+ }
208
+
209
+ .hero h1 {
210
+ font-size: clamp(2.5rem, 8vw, 5rem);
211
+ margin-bottom: 1.5rem;
212
+ background: var(--gradient);
213
+ -webkit-background-clip: text;
214
+ -webkit-text-fill-color: transparent;
215
+ animation: gradientText 3s ease infinite;
216
+ }
217
+
218
+ @keyframes gradientText {
219
+ 0%, 100% { filter: hue-rotate(0deg); }
220
+ 50% { filter: hue-rotate(30deg); }
221
+ }
222
+
223
+ .hero p {
224
+ font-size: 1.25rem;
225
+ color: var(--text-dim);
226
+ margin-bottom: 3rem;
227
+ line-height: 1.8;
228
+ }
229
+
230
+ .cta-buttons {
231
+ display: flex;
232
+ gap: 1rem;
233
+ justify-content: center;
234
+ flex-wrap: wrap;
235
+ }
236
+
237
+ .btn {
238
+ padding: 1rem 2rem;
239
+ border: none;
240
+ border-radius: 50px;
241
+ font-size: 1rem;
242
+ cursor: pointer;
243
+ transition: all 0.3s ease;
244
+ text-decoration: none;
245
+ display: inline-flex;
246
+ align-items: center;
247
+ gap: 0.5rem;
248
+ position: relative;
249
+ overflow: hidden;
250
+ }
251
+
252
+ .btn-primary {
253
+ background: var(--gradient);
254
+ color: white;
255
+ }
256
+
257
+ .btn-secondary {
258
+ background: transparent;
259
+ color: var(--text);
260
+ border: 2px solid var(--surface-light);
261
+ }
262
+
263
+ .btn:hover {
264
+ transform: translateY(-2px);
265
+ box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
266
+ }
267
+
268
+ .btn::before {
269
+ content: '';
270
+ position: absolute;
271
+ top: 50%;
272
+ left: 50%;
273
+ width: 0;
274
+ height: 0;
275
+ border-radius: 50%;
276
+ background: rgba(255, 255, 255, 0.3);
277
+ transform: translate(-50%, -50%);
278
+ transition: width 0.6s, height 0.6s;
279
+ }
280
+
281
+ .btn:active::before {
282
+ width: 300px;
283
+ height: 300px;
284
+ }
285
+
286
+ /* Skills Section */
287
+ .skills {
288
+ padding: 5rem 2rem;
289
+ max-width: 1400px;
290
+ margin: 0 auto;
291
+ }
292
+
293
+ .section-title {
294
+ text-align: center;
295
+ font-size: 3rem;
296
+ margin-bottom: 3rem;
297
+ background: var(--gradient);
298
+ -webkit-background-clip: text;
299
+ -webkit-text-fill-color: transparent;
300
+ }
301
+
302
+ .skills-grid {
303
+ display: grid;
304
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
305
+ gap: 2rem;
306
+ margin-top: 3rem;
307
+ }
308
+
309
+ .skill-card {
310
+ background: var(--surface);
311
+ border-radius: 20px;
312
+ padding: 2rem;
313
+ position: relative;
314
+ overflow: hidden;
315
+ transition: all 0.3s ease;
316
+ border: 1px solid rgba(148, 163, 184, 0.1);
317
+ }
318
+
319
+ body.light-mode .skill-card {
320
+ background: white;
321
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
322
+ }
323
+
324
+ .skill-card:hover {
325
+ transform: translateY(-10px);
326
+ box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
327
+ border-color: var(--primary);
328
+ }
329
+
330
+ .skill-icon {
331
+ width: 60px;
332
+ height: 60px;
333
+ background: var(--gradient);
334
+ border-radius: 15px;
335
+ display: flex;
336
+ align-items: center;
337
+ justify-content: center;
338
+ font-size: 1.5rem;
339
+ margin-bottom: 1.5rem;
340
+ animation: iconPulse 2s ease infinite;
341
+ }
342
+
343
+ @keyframes iconPulse {
344
+ 0%, 100% { transform: scale(1); }
345
+ 50% { transform: scale(1.1); }
346
+ }
347
+
348
+ .skill-card h3 {
349
+ font-size: 1.5rem;
350
+ margin-bottom: 1rem;
351
+ color: var(--text);
352
+ }
353
+
354
+ .skill-card p {
355
+ color: var(--text-dim);
356
+ line-height: 1.6;
357
+ margin-bottom: 1.5rem;
358
+ }
359
+
360
+ .skill-progress {
361
+ height: 8px;
362
+ background: var(--surface-light);
363
+ border-radius: 10px;
364
+ overflow: hidden;
365
+ position: relative;
366
+ }
367
+
368
+ .progress-bar {
369
+ height: 100%;
370
+ background: var(--gradient);
371
+ border-radius: 10px;
372
+ animation: progressAnimation 2s ease;
373
+ position: relative;
374
+ overflow: hidden;
375
+ }
376
+
377
+ .progress-bar::after {
378
+ content: '';
379
+ position: absolute;
380
+ top: 0;
381
+ left: 0;
382
+ right: 0;
383
+ bottom: 0;
384
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
385
+ animation: shimmer 2s infinite;
386
+ }
387
+
388
+ @keyframes shimmer {
389
+ 0% { transform: translateX(-100%); }
390
+ 100% { transform: translateX(100%); }
391
+ }
392
+
393
+ @keyframes progressAnimation {
394
+ from { width: 0; }
395
+ }
396
+
397
+ /* Interactive Demo Section */
398
+ .demo {
399
+ padding: 5rem 2rem;
400
+ background: var(--surface);
401
+ margin: 2rem 0;
402
+ }
403
+
404
+ body.light-mode .demo {
405
+ background: #f8fafc;
406
+ }
407
+
408
+ .demo-container {
409
+ max-width: 1200px;
410
+ margin: 0 auto;
411
+ }
412
+
413
+ .demo-grid {
414
+ display: grid;
415
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
416
+ gap: 2rem;
417
+ margin-top: 3rem;
418
+ }
419
+
420
+ .demo-card {
421
+ background: var(--bg);
422
+ border-radius: 15px;
423
+ padding: 2rem;
424
+ text-align: center;
425
+ transition: all 0.3s ease;
426
+ cursor: pointer;
427
+ position: relative;
428
+ overflow: hidden;
429
+ }
430
+
431
+ body.light-mode .demo-card {
432
+ background: white;
433
+ }
434
+
435
+ .demo-card:hover {
436
+ transform: scale(1.05);
437
+ box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
438
+ }
439
+
440
+ .demo-icon {
441
+ font-size: 3rem;
442
+ margin-bottom: 1rem;
443
+ background: var(--gradient);
444
+ -webkit-background-clip: text;
445
+ -webkit-text-fill-color: transparent;
446
+ }
447
+
448
+ .demo-card h3 {
449
+ margin-bottom: 1rem;
450
+ color: var(--text);
451
+ }
452
+
453
+ .demo-card p {
454
+ color: var(--text-dim);
455
+ font-size: 0.9rem;
456
+ }
457
+
458
+ .ripple {
459
+ position: absolute;
460
+ border-radius: 50%;
461
+ background: rgba(99, 102, 241, 0.3);
462
+ transform: scale(0);
463
+ animation: rippleEffect 0.6s ease-out;
464
+ }
465
+
466
+ @keyframes rippleEffect {
467
+ to {
468
+ transform: scale(4);
469
+ opacity: 0;
470
+ }
471
+ }
472
+
473
+ /* Features Section */
474
+ .features {
475
+ padding: 5rem 2rem;
476
+ max-width: 1400px;
477
+ margin: 0 auto;
478
+ }
479
+
480
+ .feature-list {
481
+ display: grid;
482
+ gap: 2rem;
483
+ margin-top: 3rem;
484
+ }
485
+
486
+ .feature-item {
487
+ display: flex;
488
+ gap: 2rem;
489
+ align-items: center;
490
+ padding: 2rem;
491
+ background: var(--surface);
492
+ border-radius: 20px;
493
+ transition: all 0.3s ease;
494
+ position: relative;
495
+ overflow: hidden;
496
+ }
497
+
498
+ body.light-mode .feature-item {
499
+ background: white;
500
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
501
+ }
502
+
503
+ .feature-item:hover {
504
+ transform: translateX(10px);
505
+ box-shadow: -10px 10px 30px rgba(99, 102, 241, 0.2);
506
+ }
507
+
508
+ .feature-number {
509
+ font-size: 3rem;
510
+ font-weight: bold;
511
+ background: var(--gradient);
512
+ -webkit-background-clip: text;
513
+ -webkit-text-fill-color: transparent;
514
+ min-width: 80px;
515
+ }
516
+
517
+ .feature-content h3 {
518
+ font-size: 1.5rem;
519
+ margin-bottom: 0.5rem;
520
+ color: var(--text);
521
+ }
522
+
523
+ .feature-content p {
524
+ color: var(--text-dim);
525
+ line-height: 1.6;
526
+ }
527
+
528
+ /* Stats Counter */
529
+ .stats {
530
+ padding: 4rem 2rem;
531
+ background: var(--gradient);
532
+ margin: 4rem 0;
533
+ }
534
+
535
+ .stats-container {
536
+ max-width: 1200px;
537
+ margin: 0 auto;
538
+ display: grid;
539
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
540
+ gap: 2rem;
541
+ text-align: center;
542
+ }
543
+
544
+ .stat-item {
545
+ color: white;
546
+ }
547
+
548
+ .stat-number {
549
+ font-size: 3rem;
550
+ font-weight: bold;
551
+ margin-bottom: 0.5rem;
552
+ }
553
+
554
+ .stat-label {
555
+ font-size: 1.1rem;
556
+ opacity: 0.9;
557
+ }
558
+
559
+ /* Footer */
560
+ footer {
561
+ padding: 3rem 2rem;
562
+ text-align: center;
563
+ background: var(--surface);
564
+ border-top: 1px solid rgba(148, 163, 184, 0.1);
565
+ }
566
+
567
+ .footer-links {
568
+ display: flex;
569
+ justify-content: center;
570
+ gap: 2rem;
571
+ margin-bottom: 2rem;
572
+ flex-wrap: wrap;
573
+ }
574
+
575
+ .footer-links a {
576
+ color: var(--text-dim);
577
+ text-decoration: none;
578
+ transition: all 0.3s ease;
579
+ }
580
+
581
+ .footer-links a:hover {
582
+ color: var(--primary);
583
+ transform: translateY(-2px);
584
+ }
585
+
586
+ .social-links {
587
+ display: flex;
588
+ justify-content: center;
589
+ gap: 1rem;
590
+ margin-top: 2rem;
591
+ }
592
+
593
+ .social-links a {
594
+ width: 40px;
595
+ height: 40px;
596
+ background: var(--surface-light);
597
+ border-radius: 50%;
598
+ display: flex;
599
+ align-items: center;
600
+ justify-content: center;
601
+ color: var(--text);
602
+ transition: all 0.3s ease;
603
+ }
604
+
605
+ .social-links a:hover {
606
+ background: var(--primary);
607
+ transform: translateY(-5px);
608
+ }
609
+
610
+ /* Responsive Design */
611
+ @media (max-width: 768px) {
612
+ .nav-links {
613
+ display: none;
614
+ }
615
+
616
+ .hero h1 {
617
+ font-size: 2.5rem;
618
+ }
619
+
620
+ .skills-grid {
621
+ grid-template-columns: 1fr;
622
+ }
623
+
624
+ .feature-item {
625
+ flex-direction: column;
626
+ text-align: center;
627
+ }
628
+
629
+ .stats-container {
630
+ grid-template-columns: repeat(2, 1fr);
631
+ }
632
+ }
633
+
634
+ /* Scroll Animations */
635
+ .scroll-animate {
636
+ opacity: 0;
637
+ transform: translateY(30px);
638
+ transition: all 0.8s ease;
639
+ }
640
+
641
+ .scroll-animate.visible {
642
+ opacity: 1;
643
+ transform: translateY(0);
644
+ }
645
+
646
+ /* Loading Animation */
647
+ .loader {
648
+ position: fixed;
649
+ top: 0;
650
+ left: 0;
651
+ width: 100%;
652
+ height: 100%;
653
+ background: var(--bg);
654
+ display: flex;
655
+ justify-content: center;
656
+ align-items: center;
657
+ z-index: 9999;
658
+ transition: opacity 0.5s ease;
659
+ }
660
+
661
+ .loader.hidden {
662
+ opacity: 0;
663
+ pointer-events: none;
664
+ }
665
+
666
+ .loader-circle {
667
+ width: 50px;
668
+ height: 50px;
669
+ border: 3px solid var(--surface-light);
670
+ border-top-color: var(--primary);
671
+ border-radius: 50%;
672
+ animation: spin 1s linear infinite;
673
+ }
674
+
675
+ @keyframes spin {
676
+ to { transform: rotate(360deg); }
677
+ }
678
+
679
+ /* Notification Toast */
680
+ .toast {
681
+ position: fixed;
682
+ bottom: 2rem;
683
+ right: 2rem;
684
+ background: var(--surface);
685
+ color: var(--text);
686
+ padding: 1rem 1.5rem;
687
+ border-radius: 10px;
688
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
689
+ transform: translateX(400px);
690
+ transition: transform 0.3s ease;
691
+ z-index: 1000;
692
+ display: flex;
693
+ align-items: center;
694
+ gap: 1rem;
695
+ }
696
+
697
+ .toast.show {
698
+ transform: translateX(0);
699
+ }
700
+
701
+ .toast-icon {
702
+ font-size: 1.5rem;
703
+ }
704
+
705
+ .toast.success .toast-icon {
706
+ color: var(--success);
707
+ }
708
+
709
+ .toast.error .toast-icon {
710
+ color: var(--danger);
711
+ }
712
+
713
+ .toast.info .toast-icon {
714
+ color: var(--primary);
715
+ }
716
+ </style>
717
+ </head>
718
+ <body>
719
+ <!-- Loading Screen -->
720
+ <div class="loader" id="loader">
721
+ <div class="loader-circle"></div>
722
+ </div>
723
+
724
+ <!-- Animated Background -->
725
+ <div class="bg-animation"></div>
726
+ <div class="floating-shapes">
727
+ <div class="shape" style="width: 200px; height: 200px; top: 10%; left: 10%;"></div>
728
+ <div class="shape" style="width: 150px; height: 150px; top: 60%; right: 10%; animation-delay: 5s;"></div>
729
+ <div class="shape" style="width: 100px; height: 100px; bottom: 10%; left: 30%; animation-delay: 10s;"></div>
730
+ <div class="shape" style="width: 250px; height: 250px; top: 30%; right: 30%; animation-delay: 15s;"></div>
731
+ </div>
732
+
733
+ <!-- Header -->
734
+ <header>
735
+ <nav>
736
+ <div class="logo">
737
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="text-decoration: none; color: inherit;">
738
+ Built with anycoder
739
+ </a>
740
+ </div>
741
+ <div class="nav-links">
742
+ <a href="#home">Home</a>
743
+ <a href="#skills">Abilità</a>
744
+ <a href="#demo">Demo</a>
745
+ <a href="#features">Funzionalità</a>
746
+ <a href="#contact">Contatti</a>
747
+ <button class="theme-toggle" id="themeToggle">
748
+ <i class="fas fa-moon"></i>
749
+ </button>
750
+ </div>
751
+ </nav>
752
+ </header>
753
+
754
+ <!-- Hero Section -->
755
+ <section class="hero" id="home">
756
+ <div class="hero-content">
757
+ <h1>Cosa Sono in Grado di Fare</h1>
758
+ <p>Scopri le infinite possibilità che posso offrirti. Dalla creazione di contenuti interattivi allo sviluppo di soluzioni innovative, il mio potenziale è limitato solo dalla tua immaginazione.</p>
759
+ <div class="cta-buttons">
760
+ <button class="btn btn-primary" onclick="exploreCapabilities()">
761
+ <i class="fas fa-rocket"></i> Esplora Ora
762
+ </button>
763
+ <button class="btn btn-secondary" onclick="showDemo()">
764
+ <i class="fas fa-play"></i> Guarda Demo
765
+ </button>
766
+ </div>
767
+ </div>
768
+ </section>
769
+
770
+ <!-- Skills Section -->
771
+ <section class="skills scroll-animate" id="skills">
772
+ <h2 class="section-title">Le Mie Abilità Principali</h2>
773
+ <div class="skills-grid">
774
+ <div class="skill-card">
775
+ <div class="skill-icon">
776
+ <i class="fas fa-code"></i>
777
+ </div>
778
+ <h3>Sviluppo Web</h3>
779
+ <p>Creazione di siti web moderni e responsive con HTML, CSS e JavaScript puro, senza dipendenze esterne.</p>
780
+ <div class="skill-progress">
781
+ <div class="progress-bar" style="width: 95%;"></div>
782
+ </div>
783
+ </div>
784
+ <div class="skill-card">
785
+ <div class="skill-icon">
786
+ <i class="fas fa-paint-brush"></i>
787
+ </div>
788
+ <h3>Design UI/UX</h3>
789
+ <p>Progettazione di interfacce utente intuitive e coinvolgenti con animazioni fluide e micro-interazioni.</p>
790
+ <div class="skill-progress">
791
+ <div class="progress-bar" style="width: 90%;"></div>
792
+ </div>
793
+ </div>
794
+ <div class="skill-card">
795
+ <div class="skill-icon">
796
+ <i class="fas fa-mobile-alt"></i>
797
+ </div>
798
+ <h3>Design Responsive</h3>
799
+ <p>Adattamento perfetto a ogni dispositivo, dal desktop al mobile, con CSS Grid e Flexbox moderni.</p>
800
+ <div class="skill-progress">
801
+ <div class="progress-bar" style="width: 92%;"></div>
802
+ </div>
803
+ </div>
804
+ <div class="skill-card">
805
+ <div class="skill-icon">
806
+ <i class="fas fa-rocket"></i>
807
+ </div>
808
+ <h3>Performance</h3>
809
+ <p>Ottimizzazione delle prestazioni per caricamenti rapidi e animazioni fluide a 60fps.</p>
810
+ <div class="skill-progress">
811
+ <div class="progress-bar" style="width: 88%;"></div>
812
+ </div>
813
+ </div>
814
+ <div class="skill-card">
815
+ <div class="skill-icon">
816
+ <i class="fas fa-puzzle-piece"></i>
817
+ </div>
818
+ <h3>Interattività</h3>
819
+ <p>Creazione di esperienze interattive coinvolgenti con JavaScript vanilla e API moderne.</p>
820
+ <div class="skill-progress">
821
+ <div class="progress-bar" style="width: 93%;"></div>
822
+ </div>
823
+ </div>
824
+ <div class="skill-card">
825
+ <div class="skill-icon">
826
+ <i class="fas fa-shield-alt"></i>
827
+ </div>
828
+ <h3>Sicurezza</h3>
829
+ <p>Implementazione delle migliori pratiche di sicurezza per proteggere i dati utenti.</p>
830
+ <div class="skill-progress">
831
+ <div class="progress-bar" style="width: 85%;"></div>
832
+ </div>
833
+ </div>
834
+ </div>
835
+ </section>
836
+
837
+ <!-- Demo Section -->
838
+ <section class="demo scroll-animate" id="demo">
839
+ <div class="demo-container">
840
+ <h2 class="section-title">Demo Interattive</h2>
841
+ <div class="demo-grid">
842
+ <div class="demo-card" onclick="createRipple(event, this)">
843
+ <div class="demo-icon">
844
+ <i class="fas fa-calculator"></i>
845
+ </div>
846
+ <h3>Calcolatrice Avanzata</h3>
847
+ <p>Calcoli matematici complessi con interfaccia moderna</p>
848
+ </div>
849
+ <div class="demo-card" onclick="createRipple(event, this)">
850
+ <div class="demo-icon">
851
+ <i class="fas fa-palette"></i>
852
+ </div>
853
+ <h3>Generatore Colori</h3>
854
+ <p>Crea e personalizza palette di colori uniche</p>
855
+ </div>
856
+ <div class="demo-card" onclick="createRipple(event, this)">
857
+ <div class="demo-icon">
858
+ <i class="fas fa-chart-line"></i>
859
+ </div>
860
+ <h3>Dashboard Analytics</h3>
861
+ <p>Visualizzazione dati in tempo reale con grafici dinamici</p>
862
+ </div>
863
+ <div class="demo-card" onclick="createRipple(event, this)">
864
+ <div class="demo-icon">
865
+ <i class="fas fa-gamepad"></i>
866
+ </div>
867
+ <h3>Mini Giochi</h3>
868
+ <p>Giochi interattivi sviluppati con JavaScript</p>
869
+ </div>
870
+ <div class="demo-card" onclick="createRipple(event, this)">
871
+ <div class="demo-icon">
872
+ <i class="fas fa-camera"></i>
873
+ </div>
874
+ <h3>Editor Foto</h3>
875
+ <p>Modifica e filtra immagini direttamente nel browser</p>
876
+ </div>
877
+ <div class="demo-card" onclick="createRipple(event, this)">
878
+ <div class="demo-icon">
879
+ <i class="fas fa-music"></i>
880
+ </div>
881
+ <h3>Player Musicale</h3>
882
+ <p>Riproduci e gestisci la tua musica con stile</p>
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </section>
887
+
888
+ <!-- Features Section -->
889
+ <section class="features scroll-animate" id="features">
890
+ <h2 class="section-title">Cosa Posso Fare Per Te</h2>
891
+ <div class="feature-list">
892
+ <div class="feature-item">
893
+ <div class="feature-number">01</div>
894
+ <div class="feature-content">
895
+ <h3>Siti Web Dinamici</h3>
896
+ <p>Creo siti web completamente funzionali con animazioni, transizioni e interazioni avanzate, tutto utilizzando solo HTML, CSS e JavaScript.</p>
897
+ </div>
898
+ </div>
899
+ <div class="feature-item">
900
+ <div class="feature-number">02</div>
901
+ <div class="feature-content">
902
+ <h3>Applicazioni Web Progressive</h3>
903
+ <p>Sviluppo PWA che funzionano offline, con notifiche push e esperienza simile a un'app nativa.</p>
904
+ </div>
905
+ </div>
906
+ <div class="feature-item">
907
+ <div class="feature-number">03</div>
908
+ <div class="feature-content">
909
+ <h3>Dashboard Interattive</h3>
910
+ <p>Visualizzazioni dati complesse con grafici animati, filtri dinamici e aggiornamenti in tempo reale.</p>
911
+ </div>
912
+ </div>
913
+ <div class="feature-item">
914
+ <div class="feature-number">04</div>
915
+ <div class="feature-content">
916
+ <h3>E-commerce Completi</h3>
917
+ <p>Carrelli della spesa, sistemi di pagamento, gestione inventario e checkout process.</p>
918
+ </div>
919
+ </div>
920
+ <div class="feature-item">
921
+ <div class="feature-number">05</div>
922
+ <div class="feature-content">
923
+ <h3>Sistemi di Autenticazione</h3>
924
+ <p>Login, registrazione, recupero password e gestione profili utente con sicurezza avanzata.</p>
925
+ </div>
926
+ </div>
927
+ <div class="feature-item">
928
+ <div class="feature-number">06</div>
929
+ <div class="feature-content">
930
+ <h3>API Restful</h3>
931
+ <p>Integrazione con API esterne, gestione dati JSON, chiamate asincrone e gestione errori.</p>
932
+ </div>
933
+ </div>
934
+ </div>
935
+ </section>
936
+
937
+ <!-- Stats Section -->
938
+ <section class="stats scroll-animate">
939
+ <div class="stats-container">
940
+ <div class="stat-item">
941
+ <div class="stat-number" data-target="100">0</div>
942
+ <div class="stat-label">Progetti Completati</div>
943
+ </div>
944
+ <div class="stat-item">
945
+ <div class="stat-number" data-target="50">0</div>
946
+ <div class="stat-label">Clienti Soddisfatti</div>
947
+ </div>
948
+ <div class="stat-item">
949
+ <div class="stat-number" data-target="1000">0</div>
950
+ <div class="stat-label">Ore di Sviluppo</div>
951
+ </div>
952
+ <div class="stat-item">
953
+ <div class="stat-number" data-target="99">0</div>
954
+ <div class="stat-label">% Performance</div>
955
+ </div>
956
+ </div>
957
+ </section>
958
+
959
+ <!-- Footer -->
960
+ <footer id="contact">
961
+ <div class="footer-links">
962
+ <a href="#home">Home</a>
963
+ <a href="#skills">Abilità</a>
964
+ <a href="#demo">Demo</a>
965
+ <a href="#features">Funzionalità</a>
966
+ <a href="#" onclick="showPrivacy()">Privacy</a>
967
+ <a href="#" onclick="showTerms()">Termini</a>
968
+ </div>
969
+ <p style="color: var(--text-dim); margin-bottom: 1rem;">
970
+ © 2024 Creato con Passione e Tecnologia
971
+ </p>
972
+ <div class="social-links">
973
+ <a href="#"><i class="fab fa-github"></i></a>
974
+ <a href="#"><i class="fab fa-twitter"></i></a>
975
+ <a href="#"><i class="fab fa-linkedin"></i></a>
976
+ <a href="#"><i class="fab fa-instagram"></i></a>
977
+ </div>
978
+ </footer>
979
+
980
+ <!-- Toast Notification -->
981
+ <div class="toast" id="toast">
982
+ <i class="toast-icon fas fa-info-circle"></i>
983
+ <span id="toastMessage">Messaggio</span>
984
+ </div>
985
+
986
+ <script>
987
+ // Loader
988
+ window.addEventListener('load', () => {
989
+ setTimeout(() => {
990
+ document.getElementById('loader').classList.add('hidden');
991
+ }, 1000);
992
+ });
993
+
994
+ // Theme Toggle
995
+ const themeToggle = document.getElementById('themeToggle');
996
+ const body = document.body;
997
+ const icon = themeToggle.querySelector('i');
998
+
999
+ themeToggle.addEventListener('click', () => {
1000
+ body.classList.toggle('light-mode');
1001
+ if (body.classList.contains('light-mode')) {
1002
+ icon.classList.remove('fa-moon');
1003
+ icon.classList.add('fa-sun');
1004
+ localStorage.setItem('theme', 'light');
1005
+ } else {
1006
+ icon.classList.remove('fa-sun');
1007
+ icon.classList.add('fa-moon');
1008
+ localStorage.setItem('theme', 'dark');
1009
+ }
1010
+ });
1011
+
1012
+ // Load saved theme
1013
+ if (localStorage.getItem('theme') === 'light') {
1014
+ body.classList.add('light-mode');
1015
+ icon.classList.remove('fa-moon');
1016
+ icon.classList.add('fa-sun');
1017
+ }
1018
+
1019
+ // Smooth Scrolling
1020
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1021
+ anchor.addEventListener('click', function (e) {
1022
+ e.preventDefault();
1023
+ const target = document.querySelector(this.getAttribute('href'));
1024
+ if (target) {
1025
+ target.scrollIntoView({
1026
+ behavior: 'smooth',
1027
+ block: 'start'
1028
+ });
1029
+ }
1030
+ });
1031
+ });
1032
+
1033
+ // Scroll Animation
1034
+ const observerOptions = {
1035
+ threshold: 0.1,
1036
+ rootMargin: '0px 0px -50px 0px'
1037
+ };
1038
+
1039
+ const observer = new IntersectionObserver((entries) => {
1040
+ entries.forEach(entry => {
1041
+ if (entry.isIntersecting) {
1042
+ entry.target.classList.add('visible');
1043
+ }
1044
+ });
1045
+ }, observerOptions);
1046
+
1047
+ document.querySelectorAll('.scroll-animate').forEach(el => {
1048
+ observer.observe(el);
1049
+ });
1050
+
1051
+ // Counter Animation
1052
+ const counters = document.querySelectorAll('.stat-number');
1053
+ const speed = 200;
1054
+
1055
+ const countUp = (counter) => {
1056
+ const target = +counter.getAttribute('data-target');
1057
+ const count = +counter.innerText;
1058
+ const increment = target / speed;
1059
+
1060
+ if (count < target) {
1061
+ counter.innerText = Math.ceil(count + increment);
1062
+ setTimeout(() => countUp(counter), 10);
1063
+ } else {
1064
+ counter.innerText = target;
1065
+ }
1066
+ };
1067
+
1068
+ const counterObserver = new IntersectionObserver((entries) => {
1069
+ entries.forEach(entry => {
1070
+ if (entry.isIntersecting && entry.target.innerText === '0') {
1071
+ countUp(entry.target);
1072
+ }
1073
+ });
1074
+ }, { threshold: 0.5 });
1075
+
1076
+ counters.forEach(counter => {
1077
+ counterObserver.observe(counter);
1078
+ });
1079
+
1080
+ // Ripple Effect
1081
+ function createRipple(event, element) {
1082
+ const ripple = document.createElement('span');
1083
+ ripple.classList.add('ripple');
1084
+
1085
+ const rect = element.getBoundingClientRect();
1086
+ const size = Math.max(rect.width, rect.height);
1087
+ const x = event.clientX - rect.left - size / 2;
1088
+ const y = event.clientY - rect.top - size / 2;
1089
+
1090
+ ripple.style.width = ripple.style.height = size + 'px';
1091
+ ripple.style.left = x + 'px';
1092
+ ripple.style.top = y + 'px';
1093
+
1094
+ element.appendChild(ripple);
1095
+
1096
+ setTimeout(() => {
1097
+ ripple.remove();
1098
+ }, 600);
1099
+
1100
+ // Show toast
1101
+ showToast('Demo in arrivo presto!', 'info');
1102
+ }
1103
+
1104
+ // Toast Notification
1105
+ function showToast(message, type = 'info') {
1106
+ const toast = document.getElementById('toast');
1107
+ const toastMessage = document.getElementById('toastMessage');
1108
+ const toastIcon = toast.querySelector('.toast-icon');
1109
+
1110
+ toastMessage.textContent = message;
1111
+ toast.className = `toast ${type}`;
1112
+
1113
+ if (type ===