Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cosa Sono in Grado di Fare</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #8b5cf6; | |
| --accent: #ec4899; | |
| --bg: #0f172a; | |
| --surface: #1e293b; | |
| --surface-light: #334155; | |
| --text: #e2e8f0; | |
| --text-dim: #94a3b8; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| body.light-mode { | |
| --bg: #ffffff; | |
| --surface: #f8fafc; | |
| --surface-light: #e2e8f0; | |
| --text: #1e293b; | |
| --text-dim: #64748b; | |
| } | |
| /* Animated Background */ | |
| .bg-animation { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| background: linear-gradient(45deg, #0f172a, #1e293b, #0f172a); | |
| background-size: 400% 400%; | |
| animation: gradientShift 15s ease infinite; | |
| } | |
| body.light-mode .bg-animation { | |
| background: linear-gradient(45deg, #f8fafc, #e2e8f0, #f8fafc); | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .floating-shapes { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: -1; | |
| } | |
| .shape { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| opacity: 0.1; | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 33% { transform: translateY(-100px) rotate(120deg); } | |
| 66% { transform: translateY(100px) rotate(240deg); } | |
| } | |
| /* Header */ | |
| header { | |
| padding: 1.5rem 2rem; | |
| background: rgba(30, 41, 59, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(148, 163, 184, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| transition: all 0.3s ease; | |
| } | |
| body.light-mode header { | |
| background: rgba(248, 250, 252, 0.9); | |
| border-bottom: 1px solid rgba(148, 163, 184, 0.2); | |
| } | |
| nav { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| color: var(--text-dim); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--gradient); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .theme-toggle { | |
| background: var(--surface-light); | |
| border: none; | |
| color: var(--text); | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .theme-toggle:hover { | |
| transform: rotate(180deg); | |
| background: var(--primary); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 4rem 2rem; | |
| position: relative; | |
| } | |
| .hero-content { | |
| text-align: center; | |
| max-width: 900px; | |
| animation: fadeInUp 1s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 8vw, 5rem); | |
| margin-bottom: 1.5rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: gradientText 3s ease infinite; | |
| } | |
| @keyframes gradientText { | |
| 0%, 100% { filter: hue-rotate(0deg); } | |
| 50% { filter: hue-rotate(30deg); } | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: var(--text-dim); | |
| margin-bottom: 3rem; | |
| line-height: 1.8; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: white; | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--text); | |
| border: 2px solid var(--surface-light); | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .btn:active::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| /* Skills Section */ | |
| .skills { | |
| padding: 5rem 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 3rem; | |
| margin-bottom: 3rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .skills-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .skill-card { | |
| background: var(--surface); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(148, 163, 184, 0.1); | |
| } | |
| body.light-mode .skill-card { | |
| background: white; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .skill-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2); | |
| border-color: var(--primary); | |
| } | |
| .skill-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| animation: iconPulse 2s ease infinite; | |
| } | |
| @keyframes iconPulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| .skill-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--text); | |
| } | |
| .skill-card p { | |
| color: var(--text-dim); | |
| line-height: 1.6; | |
| margin-bottom: 1.5rem; | |
| } | |
| .skill-progress { | |
| height: 8px; | |
| background: var(--surface-light); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: var(--gradient); | |
| border-radius: 10px; | |
| animation: progressAnimation 2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-bar::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| @keyframes progressAnimation { | |
| from { width: 0; } | |
| } | |
| /* Interactive Demo Section */ | |
| .demo { | |
| padding: 5rem 2rem; | |
| background: var(--surface); | |
| margin: 2rem 0; | |
| } | |
| body.light-mode .demo { | |
| background: #f8fafc; | |
| } | |
| .demo-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .demo-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .demo-card { | |
| background: var(--bg); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| body.light-mode .demo-card { | |
| background: white; | |
| } | |
| .demo-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3); | |
| } | |
| .demo-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .demo-card h3 { | |
| margin-bottom: 1rem; | |
| color: var(--text); | |
| } | |
| .demo-card p { | |
| color: var(--text-dim); | |
| font-size: 0.9rem; | |
| } | |
| .ripple { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(99, 102, 241, 0.3); | |
| transform: scale(0); | |
| animation: rippleEffect 0.6s ease-out; | |
| } | |
| @keyframes rippleEffect { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 5rem 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .feature-list { | |
| display: grid; | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .feature-item { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| padding: 2rem; | |
| background: var(--surface); | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| body.light-mode .feature-item { | |
| background: white; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-item:hover { | |
| transform: translateX(10px); | |
| box-shadow: -10px 10px 30px rgba(99, 102, 241, 0.2); | |
| } | |
| .feature-number { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| min-width: 80px; | |
| } | |
| .feature-content h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| } | |
| .feature-content p { | |
| color: var(--text-dim); | |
| line-height: 1.6; | |
| } | |
| /* Stats Counter */ | |
| .stats { | |
| padding: 4rem 2rem; | |
| background: var(--gradient); | |
| margin: 4rem 0; | |
| } | |
| .stats-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| text-align: center; | |
| } | |
| .stat-item { | |
| color: white; | |
| } | |
| .stat-number { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| } | |
| /* Footer */ | |
| footer { | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| background: var(--surface); | |
| border-top: 1px solid rgba(148, 163, 184, 0.1); | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links a { | |
| color: var(--text-dim); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary); | |
| transform: translateY(-2px); | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--surface-light); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text); | |
| transition: all 0.3s ease; | |
| } | |
| .social-links a:hover { | |
| background: var(--primary); | |
| transform: translateY(-5px); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .skills-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .feature-item { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .stats-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* Scroll Animations */ | |
| .scroll-animate { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease; | |
| } | |
| .scroll-animate.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--bg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-circle { | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid var(--surface-light); | |
| border-top-color: var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Notification Toast */ | |
| .toast { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background: var(--surface); | |
| color: var(--text); | |
| padding: 1rem 1.5rem; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease; | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast-icon { | |
| font-size: 1.5rem; | |
| } | |
| .toast.success .toast-icon { | |
| color: var(--success); | |
| } | |
| .toast.error .toast-icon { | |
| color: var(--danger); | |
| } | |
| .toast.info .toast-icon { | |
| color: var(--primary); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-circle"></div> | |
| </div> | |
| <!-- Animated Background --> | |
| <div class="bg-animation"></div> | |
| <div class="floating-shapes"> | |
| <div class="shape" style="width: 200px; height: 200px; top: 10%; left: 10%;"></div> | |
| <div class="shape" style="width: 150px; height: 150px; top: 60%; right: 10%; animation-delay: 5s;"></div> | |
| <div class="shape" style="width: 100px; height: 100px; bottom: 10%; left: 30%; animation-delay: 10s;"></div> | |
| <div class="shape" style="width: 250px; height: 250px; top: 30%; right: 30%; animation-delay: 15s;"></div> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <nav> | |
| <div class="logo"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="text-decoration: none; color: inherit;"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#home">Home</a> | |
| <a href="#skills">Abilità</a> | |
| <a href="#demo">Demo</a> | |
| <a href="#features">Funzionalità</a> | |
| <a href="#contact">Contatti</a> | |
| <button class="theme-toggle" id="themeToggle"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <h1>Cosa Sono in Grado di Fare</h1> | |
| <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> | |
| <div class="cta-buttons"> | |
| <button class="btn btn-primary" onclick="exploreCapabilities()"> | |
| <i class="fas fa-rocket"></i> Esplora Ora | |
| </button> | |
| <button class="btn btn-secondary" onclick="showDemo()"> | |
| <i class="fas fa-play"></i> Guarda Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="skills scroll-animate" id="skills"> | |
| <h2 class="section-title">Le Mie Abilità Principali</h2> | |
| <div class="skills-grid"> | |
| <div class="skill-card"> | |
| <div class="skill-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3>Sviluppo Web</h3> | |
| <p>Creazione di siti web moderni e responsive con HTML, CSS e JavaScript puro, senza dipendenze esterne.</p> | |
| <div class="skill-progress"> | |
| <div class="progress-bar" style="width: 95%;"></div> | |
| </div> | |
| </div> | |
| <div class="skill-card"> | |
| <div class="skill-icon"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <h3>Design UI/UX</h3> | |
| <p>Progettazione di interfacce utente intuitive e coinvolgenti con animazioni fluide e micro-interazioni.</p> | |
| <div class="skill-progress"> | |
| <div class="progress-bar" style="width: 90%;"></div> | |
| </div> | |
| </div> | |
| <div class="skill-card"> | |
| <div class="skill-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3>Design Responsive</h3> | |
| <p>Adattamento perfetto a ogni dispositivo, dal desktop al mobile, con CSS Grid e Flexbox moderni.</p> | |
| <div class="skill-progress"> | |
| <div class="progress-bar" style="width: 92%;"></div> | |
| </div> | |
| </div> | |
| <div class="skill-card"> | |
| <div class="skill-icon"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3>Performance</h3> | |
| <p>Ottimizzazione delle prestazioni per caricamenti rapidi e animazioni fluide a 60fps.</p> | |
| <div class="skill-progress"> | |
| <div class="progress-bar" style="width: 88%;"></div> | |
| </div> | |
| </div> | |
| <div class="skill-card"> | |
| <div class="skill-icon"> | |
| <i class="fas fa-puzzle-piece"></i> | |
| </div> | |
| <h3>Interattività</h3> | |
| <p>Creazione di esperienze interattive coinvolgenti con JavaScript vanilla e API moderne.</p> | |
| <div class="skill-progress"> | |
| <div class="progress-bar" style="width: 93%;"></div> | |
| </div> | |
| </div> | |
| <div class="skill-card"> | |
| <div class="skill-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Sicurezza</h3> | |
| <p>Implementazione delle migliori pratiche di sicurezza per proteggere i dati utenti.</p> | |
| <div class="skill-progress"> | |
| <div class="progress-bar" style="width: 85%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section class="demo scroll-animate" id="demo"> | |
| <div class="demo-container"> | |
| <h2 class="section-title">Demo Interattive</h2> | |
| <div class="demo-grid"> | |
| <div class="demo-card" onclick="createRipple(event, this)"> | |
| <div class="demo-icon"> | |
| <i class="fas fa-calculator"></i> | |
| </div> | |
| <h3>Calcolatrice Avanzata</h3> | |
| <p>Calcoli matematici complessi con interfaccia moderna</p> | |
| </div> | |
| <div class="demo-card" onclick="createRipple(event, this)"> | |
| <div class="demo-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <h3>Generatore Colori</h3> | |
| <p>Crea e personalizza palette di colori uniche</p> | |
| </div> | |
| <div class="demo-card" onclick="createRipple(event, this)"> | |
| <div class="demo-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>Dashboard Analytics</h3> | |
| <p>Visualizzazione dati in tempo reale con grafici dinamici</p> | |
| </div> | |
| <div class="demo-card" onclick="createRipple(event, this)"> | |
| <div class="demo-icon"> | |
| <i class="fas fa-gamepad"></i> | |
| </div> | |
| <h3>Mini Giochi</h3> | |
| <p>Giochi interattivi sviluppati con JavaScript</p> | |
| </div> | |
| <div class="demo-card" onclick="createRipple(event, this)"> | |
| <div class="demo-icon"> | |
| <i class="fas fa-camera"></i> | |
| </div> | |
| <h3>Editor Foto</h3> | |
| <p>Modifica e filtra immagini direttamente nel browser</p> | |
| </div> | |
| <div class="demo-card" onclick="createRipple(event, this)"> | |
| <div class="demo-icon"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <h3>Player Musicale</h3> | |
| <p>Riproduci e gestisci la tua musica con stile</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features scroll-animate" id="features"> | |
| <h2 class="section-title">Cosa Posso Fare Per Te</h2> | |
| <div class="feature-list"> | |
| <div class="feature-item"> | |
| <div class="feature-number">01</div> | |
| <div class="feature-content"> | |
| <h3>Siti Web Dinamici</h3> | |
| <p>Creo siti web completamente funzionali con animazioni, transizioni e interazioni avanzate, tutto utilizzando solo HTML, CSS e JavaScript.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <div class="feature-number">02</div> | |
| <div class="feature-content"> | |
| <h3>Applicazioni Web Progressive</h3> | |
| <p>Sviluppo PWA che funzionano offline, con notifiche push e esperienza simile a un'app nativa.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <div class="feature-number">03</div> | |
| <div class="feature-content"> | |
| <h3>Dashboard Interattive</h3> | |
| <p>Visualizzazioni dati complesse con grafici animati, filtri dinamici e aggiornamenti in tempo reale.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <div class="feature-number">04</div> | |
| <div class="feature-content"> | |
| <h3>E-commerce Completi</h3> | |
| <p>Carrelli della spesa, sistemi di pagamento, gestione inventario e checkout process.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <div class="feature-number">05</div> | |
| <div class="feature-content"> | |
| <h3>Sistemi di Autenticazione</h3> | |
| <p>Login, registrazione, recupero password e gestione profili utente con sicurezza avanzata.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <div class="feature-number">06</div> | |
| <div class="feature-content"> | |
| <h3>API Restful</h3> | |
| <p>Integrazione con API esterne, gestione dati JSON, chiamate asincrone e gestione errori.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats scroll-animate"> | |
| <div class="stats-container"> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="100">0</div> | |
| <div class="stat-label">Progetti Completati</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="50">0</div> | |
| <div class="stat-label">Clienti Soddisfatti</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="1000">0</div> | |
| <div class="stat-label">Ore di Sviluppo</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="99">0</div> | |
| <div class="stat-label">% Performance</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="footer-links"> | |
| <a href="#home">Home</a> | |
| <a href="#skills">Abilità</a> | |
| <a href="#demo">Demo</a> | |
| <a href="#features">Funzionalità</a> | |
| <a href="#" onclick="showPrivacy()">Privacy</a> | |
| <a href="#" onclick="showTerms()">Termini</a> | |
| </div> | |
| <p style="color: var(--text-dim); margin-bottom: 1rem;"> | |
| © 2024 Creato con Passione e Tecnologia | |
| </p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <i class="toast-icon fas fa-info-circle"></i> | |
| <span id="toastMessage">Messaggio</span> | |
| </div> | |
| <script> | |
| // Loader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.getElementById('loader').classList.add('hidden'); | |
| }, 1000); | |
| }); | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const body = document.body; | |
| const icon = themeToggle.querySelector('i'); | |
| themeToggle.addEventListener('click', () => { | |
| body.classList.toggle('light-mode'); | |
| if (body.classList.contains('light-mode')) { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| localStorage.setItem('theme', 'light'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| localStorage.setItem('theme', 'dark'); | |
| } | |
| }); | |
| // Load saved theme | |
| if (localStorage.getItem('theme') === 'light') { | |
| body.classList.add('light-mode'); | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } | |
| // Smooth Scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Scroll Animation | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.scroll-animate').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Counter Animation | |
| const counters = document.querySelectorAll('.stat-number'); | |
| const speed = 200; | |
| const countUp = (counter) => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(() => countUp(counter), 10); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }; | |
| const counterObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting && entry.target.innerText === '0') { | |
| countUp(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| counters.forEach(counter => { | |
| counterObserver.observe(counter); | |
| }); | |
| // Ripple Effect | |
| function createRipple(event, element) { | |
| const ripple = document.createElement('span'); | |
| ripple.classList.add('ripple'); | |
| const rect = element.getBoundingClientRect(); | |
| const size = Math.max(rect.width, rect.height); | |
| const x = event.clientX - rect.left - size / 2; | |
| const y = event.clientY - rect.top - size / 2; | |
| ripple.style.width = ripple.style.height = size + 'px'; | |
| ripple.style.left = x + 'px'; | |
| ripple.style.top = y + 'px'; | |
| element.appendChild(ripple); | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| // Show toast | |
| showToast('Demo in arrivo presto!', 'info'); | |
| } | |
| // Toast Notification | |
| function showToast(message, type = 'info') { | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| const toastIcon = toast.querySelector('.toast-icon'); | |
| toastMessage.textContent = message; | |
| toast.className = `toast ${type}`; | |
| if (type === |