Spaces:
Configuration error
Configuration error
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TRM Next Generation - La Squadra del Futuro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap'); | |
| :root { | |
| --primary: #1a237e; | |
| --secondary: #ffc107; | |
| --accent: #e53935; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #f5f5f5; | |
| overflow-x: hidden; | |
| } | |
| .team-title { | |
| font-family: 'Bebas Neue', sans-serif; | |
| letter-spacing: 3px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .player-card { | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .player-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(26,35,126,0.1) 0%, rgba(255,193,7,0.1) 100%); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .player-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.2); | |
| } | |
| .player-card:hover::before { | |
| opacity: 1; | |
| } | |
| .logo-container { | |
| position: relative; | |
| width: 150px; | |
| height: 150px; | |
| margin: 0 auto; | |
| filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2)); | |
| } | |
| .logo-circle { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), #303f9f); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 36px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .logo-circle:hover { | |
| transform: rotate(15deg) scale(1.05); | |
| } | |
| .position-badge { | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 18px; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.2); | |
| border: 3px solid white; | |
| } | |
| .goalkeeper { | |
| background: linear-gradient(135deg, #e53935, #c62828); | |
| } | |
| .defender { | |
| background: linear-gradient(135deg, #43a047, #2e7d32); | |
| } | |
| .midfielder { | |
| background: linear-gradient(135deg, #1e88e5, #1565c0); | |
| } | |
| .forward { | |
| background: linear-gradient(135deg, #fb8c00, #f57c00); | |
| } | |
| .winger { | |
| background: linear-gradient(135deg, #8e24aa, #6a1b9a); | |
| } | |
| .contact-card { | |
| background: linear-gradient(135deg, var(--primary), #303f9f); | |
| color: white; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .contact-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255,255,255,0.3) 0%, | |
| rgba(255,255,255,0) 60% | |
| ); | |
| transform: rotate(30deg); | |
| transition: all 0.5s ease; | |
| } | |
| .contact-card:hover::before { | |
| animation: shine 1.5s infinite; | |
| } | |
| @keyframes shine { | |
| 0% { | |
| left: -50%; | |
| } | |
| 100% { | |
| left: 150%; | |
| } | |
| } | |
| .header-bg { | |
| background: linear-gradient(135deg, var(--primary), #303f9f); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('https://images.unsplash.com/photo-1579952363871-0d0e47a0ffec?q=80&w=1000') no-repeat center center; | |
| background-size: cover; | |
| opacity: 0.15; | |
| } | |
| .goal-card { | |
| background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%); | |
| border-radius: 15px; | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.1); | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .goal-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); | |
| } | |
| .goal-card::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 5px; | |
| background: linear-gradient(90deg, var(--secondary), var(--accent)); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(255,193,7,0.4); | |
| } | |
| 70% { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 0 15px rgba(255,193,7,0); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(255,193,7,0); | |
| } | |
| } | |
| .bg-pattern { | |
| background: url('https://www.transparenttextures.com/patterns/concrete-wall-2.png'); | |
| opacity: 0.05; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-5px) scale(1.1); | |
| } | |
| .player-image { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 5px solid white; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header with Logo --> | |
| <header class="header-bg text-white py-12 relative"> | |
| <div class="bg-pattern"></div> | |
| <div class="container mx-auto px-4 text-center relative z-10"> | |
| <div class="logo-container mb-8" data-aos="zoom-in" data-aos-duration="800"> | |
| <div class="logo-circle pulse floating"> | |
| TRM | |
| </div> | |
| </div> | |
| <h1 class="team-title text-5xl md:text-6xl font-bold mb-4" data-aos="fade-up" data-aos-delay="200">TRM NEXT GENERATION</h1> | |
| <p class="text-xl md:text-2xl mb-2" data-aos="fade-up" data-aos-delay="300">La squadra del futuro</p> | |
| <p class="text-lg text-yellow-300 font-bold" data-aos="fade-up" data-aos-delay="400">Nati nel 2025</p> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-16 relative"> | |
| <!-- Team Objective --> | |
| <section class="mb-20 text-center" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-8 text-blue-900 relative inline-block"> | |
| <span class="relative z-10">Il Nostro Obiettivo</span> | |
| <span class="absolute bottom-0 left-0 w-full h-2 bg-yellow-400 z-0" style="opacity: 0.5; bottom: 5px;"></span> | |
| </h2> | |
| <div class="goal-card max-w-4xl mx-auto p-8 md:p-12 transform transition-all duration-500 hover:shadow-xl"> | |
| <div class="text-6xl text-yellow-500 mb-6 floating" style="animation-delay: 0.5s;"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| <h3 class="text-3xl font-bold mb-6 text-blue-800" style="text-shadow: 1px 1px 3px rgba(0,0,0,0.1);">VINCERE LA SUMMER CUP 2023</h3> | |
| <p class="text-gray-700 text-lg md:text-xl leading-relaxed"> | |
| Siamo determinati a dimostrare il nostro valore e portare a casa il trofeo più ambito. | |
| Con impegno, sacrificio e lavoro di squadra, raggiungeremo questo traguardo storico per il nostro club! | |
| </p> | |
| <div class="mt-8"> | |
| <div class="inline-block px-6 py-3 bg-gradient-to-r from-yellow-400 to-yellow-500 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105"> | |
| Tifaci anche tu! | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Players Section --> | |
| <section class="mb-24"> | |
| <h2 class="text-4xl font-bold mb-12 text-center text-blue-900 relative" data-aos="fade-up"> | |
| <span class="relative z-10">La Nostra Squadra</span> | |
| <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-blue-200 z-0"></span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"> | |
| <!-- Goalkeeper --> | |
| <div class="player-card" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="p-6 text-center"> | |
| <div class="relative mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="HAMID" class="player-image mx-auto"> | |
| <div class="position-badge goalkeeper"> | |
| <i class="fas fa-tshirt"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">HAMID</h3> | |
| <p class="text-gray-600 mb-3 font-semibold">Portiere</p> | |
| <p class="text-gray-700 text-sm"> | |
| Il nostro muro invalicabile, sempre pronto a sacrificarsi per la squadra. Parate spettacolari e leadership indiscussa. | |
| </p> | |
| <div class="mt-4 flex justify-center space-x-2"> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Reflex</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Coraggio</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Leadership</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Defender --> | |
| <div class="player-card" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="p-6 text-center"> | |
| <div class="relative mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="FEZ" class="player-image mx-auto"> | |
| <div class="position-badge defender"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">FEZ</h3> | |
| <p class="text-gray-600 mb-3 font-semibold">Difensore</p> | |
| <p class="text-gray-700 text-sm"> | |
| La roccia della difesa, implacabile nei contrasti e preciso nei passaggi. Nessun attaccante passa dalla sua parte. | |
| </p> | |
| <div class="mt-4 flex justify-center space-x-2"> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Forza</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Tecnica</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Posizione</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Midfielder --> | |
| <div class="player-card" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="p-6 text-center"> | |
| <div class="relative mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="CAMA" class="player-image mx-auto"> | |
| <div class="position-badge midfielder"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">CAMA</h3> | |
| <p class="text-gray-600 mb-3 font-semibold">Centrocampista & Presidente</p> | |
| <p class="text-gray-700 text-sm"> | |
| Il regista della squadra, visionario in campo e fuori. Leader naturale che guida il gruppo con esempio e determinazione. | |
| </p> | |
| <div class="mt-4 flex justify-center space-x-2"> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Visione</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Leadership</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Tecnica</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Forward --> | |
| <div class="player-card" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="p-6 text-center"> | |
| <div class="relative mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/18.jpg" alt="SAMBU" class="player-image mx-auto"> | |
| <div class="position-badge forward"> | |
| <i class="fas fa-bullseye"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">SAMBU</h3> | |
| <p class="text-gray-600 mb-3 font-semibold">Punta</p> | |
| <p class="text-gray-700 text-sm"> | |
| Il nostro cannoniere, freddo sotto porta e sempre pericoloso. Istinto del gol e movimenti impeccabili. | |
| </p> | |
| <div class="mt-4 flex justify-center space-x-2"> | |
| <span class="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">Finalizzazione</span> | |
| <span class="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">Velocità</span> | |
| <span class="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">Istinto</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Winger --> | |
| <div class="player-card" data-aos="fade-up" data-aos-delay="500"> | |
| <div class="p-6 text-center"> | |
| <div class="relative mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="FRANCESCO" class="player-image mx-auto"> | |
| <div class="position-badge winger"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">FRANCESCO</h3> | |
| <p class="text-gray-600 mb-3 font-semibold">Esterno</p> | |
| <p class="text-gray-700 text-sm"> | |
| Velocità pura e cross millimetrici. Un incubo per le difese avversarie con le sue progressioni sulla fascia. | |
| </p> | |
| <div class="mt-4 flex justify-center space-x-2"> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Velocità</span> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Cross</span> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Dribbling</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Info --> | |
| <section class="mb-20" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-gradient-to-br from-blue-50 to-blue-100 p-10 flex items-center relative"> | |
| <div class="bg-pattern"></div> | |
| <div class="relative z-10"> | |
| <h2 class="text-3xl font-bold mb-6 text-blue-900">La Nostra Storia</h2> | |
| <p class="text-gray-700 mb-6 text-lg leading-relaxed"> | |
| <span class="text-blue-800 font-semibold">Nati nel 2025</span>, TRM Next Generation rappresenta l'evoluzione del calcio giovanile veronese. | |
| Un progetto ambizioso che unisce talento, disciplina e voglia di emergere nel panorama calcistico nazionale. | |
| </p> | |
| <p class="text-gray-700 text-lg leading-relaxed"> | |
| Sotto la guida del nostro presidente <span class="text-blue-800 font-semibold">Cama</span>, stiamo scrivendo una nuova pagina del calcio locale, | |
| con l'obiettivo di diventare un punto di riferimento per i giovani talenti della nostra città e non solo. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105"> | |
| <i class="fas fa-history mr-2"></i> Scopri la nostra storia | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="h-full bg-gray-50 flex items-center justify-center p-10 relative"> | |
| <div class="bg-pattern"></div> | |
| <div class="text-center relative z-10"> | |
| <div class="text-6xl text-blue-600 mb-6 floating" style="animation-delay: 0.3s;"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-blue-900">DOVE CI TROVI</h3> | |
| <p class="text-gray-700 mb-6 text-xl font-semibold"> | |
| <i class="fas fa-city text-blue-500 mr-2"></i> Verona, Italia | |
| </p> | |
| <div class="contact-card p-8 max-w-xs mx-auto transform transition-all duration-500 hover:shadow-2xl"> | |
| <div class="text-4xl mb-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <h4 class="font-bold mb-3 text-xl">CONTATTACI</h4> | |
| <p class="text-xl font-bold mb-2">+39 123 456 7890</p> | |
| <p class="text-sm opacity-80"> | |
| Disponibili per informazioni, collaborazioni e provini | |
| </p> | |
| <div class="mt-6"> | |
| <div class="inline-flex items-center px-4 py-2 bg-white text-blue-600 text-sm font-bold rounded-full shadow"> | |
| <i class="fas fa-envelope mr-2"></i> Email | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Preview --> | |
| <section class="mb-16" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-10 text-center text-blue-900">Momenti di Gloria</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="relative overflow-hidden rounded-xl shadow-lg h-48 transform transition-all duration-500 hover:scale-105"> | |
| <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Team training" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <span class="text-white font-bold">Allenamento</span> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-xl shadow-lg h-48 transform transition-all duration-500 hover:scale-105"> | |
| <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Match action" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <span class="text-white font-bold">Partita</span> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-xl shadow-lg h-48 transform transition-all duration-500 hover:scale-105"> | |
| <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Celebration" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <span class="text-white font-bold">Celebrazione</span> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-xl shadow-lg h-48 transform transition-all duration-500 hover:scale-105"> | |
| <img src="https://images.unsplash.com/photo-1579952363871-0d0e47a0ffec?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Team spirit" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <span class="text-white font-bold">Spirito di squadra</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-800 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl"> | |
| <i class="fas fa-images mr-2"></i> Vedi tutta la galleria | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Newsletter --> | |
| <section class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-16" data-aos="fade-up"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Rimani Aggiornato</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| Iscriviti alla nostra newsletter per ricevere notizie esclusive, anticipazioni e promozioni speciali! | |
| </p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="La tua email" class="flex-grow px-6 py-4 rounded-l-full focus:outline-none text-gray-900"> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-8 py-4 rounded-r-full transition-all duration-300"> | |
| Iscriviti <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="logo-container"> | |
| <div class="logo-circle"> | |
| TRM | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-yellow-400"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-yellow-400"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-yellow-400"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white text-2xl hover:text-yellow-400"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-lg font-bold mb-2">TRM NEXT GENERATION</p> | |
| <p class="text-gray-400">Verona, Italia</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="mb-4 md:mb-0">© 2023 TRM Next Generation - Tutti i diritti riservati</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Termini e Condizioni</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://unpkg.com/aos@next/dist/aos.js"></script> | |
| <script> | |
| // Initialize animations | |
| AOS.init({ | |
| duration: 800, | |
| once: true, | |
| easing: 'ease-out-quad' | |
| }); | |
| // Floating animation for multiple elements | |
| document.querySelectorAll('.floating').forEach((el, index) => { | |
| el.style.animationDelay = `${index * 0.3}s`; | |
| }); | |
| // Interactive player cards | |
| document.querySelectorAll('.player-card').forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const x = e.pageX - card.getBoundingClientRect().left; | |
| const y = e.pageY - card.getBoundingClientRect().top; | |
| const centerX = card.offsetWidth / 2; | |
| const centerY = card.offsetHeight / 2; | |
| const angleX = (y - centerY) / 20; | |
| const angleY = (centerX - x) / 20; | |
| card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.03)`; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| // Phone number animation | |
| const phoneNumber = document.querySelector('.contact-card'); | |
| phoneNumber.addEventListener('click', () => { | |
| phoneNumber.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| phoneNumber.classList.remove('animate-pulse'); | |
| }, 1000); | |
| // In a real implementation, this would copy the number to clipboard | |
| alert('Numero copiato negli appunti: +39 123 456 7890'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hamid-2900/trm-next-generation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |