Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Le Chalet Suisse | Restaurant traditionnel à Genève</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%); | |
| } | |
| .ticket-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .stadium-bg { | |
| background-image: url('https://images.unsplash.com/photo-1555861496-0666cf8982b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| position: relative; | |
| } | |
| .stadium-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.6); | |
| } | |
| .countdown-item { | |
| @apply bg-white bg-opacity-20 rounded-lg p-2 text-center; | |
| min-width: 60px; | |
| } | |
| .seat-selected { | |
| background-color: #1a936f ; | |
| border-color: #0c4b33 ; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-100"> | |
| <!-- Header --> | |
| <header class="bg-red-700 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-utensils text-2xl"></i> | |
| <h1 class="text-2xl font-bold">Le Chalet Suisse</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-red-200 font-medium">Accueil</a> | |
| <a href="#" class="hover:text-red-200 font-medium">Menu</a> | |
| <a href="#" class="hover:text-red-200 font-medium">Réservations</a> | |
| <a href="#" class="hover:text-red-200 font-medium">À propos</a> | |
| <a href="#" class="hover:text-red-200 font-medium">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-white text-red-800 px-4 py-2 rounded-full font-medium hover:bg-red-100 transition"> | |
| Réserver | |
| </button> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-[url('https://images.unsplash.com/photo-1600891964599-f61ba0e24092?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center text-white py-20 relative"> | |
| <div class="absolute inset-0 bg-black opacity-50"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Cuisine suisse authentique</h1> | |
| <p class="text-xl mb-8">Découvrez les saveurs traditionnelles des Alpes dans notre restaurant au cœur de Genève.</p> | |
| <div class="flex gap-4"> | |
| <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-bold transition"> | |
| <i class="fas fa-book-open mr-2"></i> Voir le menu | |
| </button> | |
| <button class="bg-white text-red-800 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition"> | |
| <i class="fas fa-phone mr-2"></i> Réserver | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Specialties --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Nos spécialités</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Fondue" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Fondue moitié-moitié</h3> | |
| <p class="text-gray-600 mb-4">Notre célèbre fondue préparée avec un mélange de Gruyère et Vacherin fribourgeois.</p> | |
| <div class="text-red-600 font-bold">38 CHF</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1603105037880-8809544d5d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Rösti" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Rösti traditionnel</h3> | |
| <p class="text-gray-600 mb-4">Pommes de terre râpées et dorées à la perfection, accompagnées de jambon et fromage.</p> | |
| <div class="text-red-600 font-bold">28 CHF</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1601050690446-5f5a8a87351e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Raclette" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Raclette valaisanne</h3> | |
| <p class="text-gray-600 mb-4">Fromage raclette du Valais fondu à la perfection, servie avec pommes de terre et cornichons.</p> | |
| <div class="text-red-600 font-bold">35 CHF</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upcoming Matches --> | |
| <section class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Prochains matchs</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Match 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md ticket-hover transition duration-300"> | |
| <div class="p-4 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm text-gray-500">Ligue 1 - Jour 24</div> | |
| <div class="text-sm font-medium bg-green-100 text-green-800 px-2 py-1 rounded">Disponible</div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/fr/thumb/4/43/Olympique_de_Marseille_logo.svg/1200px-Olympique_de_Marseille_logo.svg.png" alt="OM" class="h-12 w-12 object-contain"> | |
| <div class="font-medium mt-2">OM</div> | |
| </div> | |
| <div class="text-lg font-bold mx-2">VS</div> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/fr/thumb/a/aa/Stade_rennais_logo.svg/1200px-Stade_rennais_logo.svg.png" alt="Rennes" class="h-12 w-12 object-contain"> | |
| <div class="font-medium mt-2">Rennes</div> | |
| </div> | |
| </div> | |
| <div class="text-center text-gray-600 mb-4"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Orange Vélodrome, Marseille | |
| </div> | |
| <div class="text-center font-medium mb-4"> | |
| <i class="far fa-calendar-alt mr-2"></i> 28 Septembre 2025 - 17:00 | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-green-600 font-bold">À partir de 35€</div> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition"> | |
| Réserver | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Match 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md ticket-hover transition duration-300"> | |
| <div class="p-4 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm text-gray-500">Ligue 1 - Jour 25</div> | |
| <div class="text-sm font-medium bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Bientôt</div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/fr/thumb/8/81/FC_Nantes_logo.svg/1200px-FC_Nantes_logo.svg.png" alt="Nantes" class="h-12 w-12 object-contain"> | |
| <div class="font-medium mt-2">Nantes</div> | |
| </div> | |
| <div class="text-lg font-bold mx-2">VS</div> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/fr/thumb/8/86/Paris_Saint-Germain_Logo.svg/1200px-Paris_Saint-Germain_Logo.svg.png" alt="PSG" class="h-12 w-12 object-contain"> | |
| <div class="font-medium mt-2">PSG</div> | |
| </div> | |
| </div> | |
| <div class="text-center text-gray-600 mb-4"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Stade de la Beaujoire, Nantes | |
| </div> | |
| <div class="text-center font-medium mb-4"> | |
| <i class="far fa-calendar-alt mr-2"></i> 5 Octobre 2025 - 20:45 | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-gray-400 font-bold">Bientôt en vente</div> | |
| <button class="bg-gray-300 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium cursor-not-allowed" disabled> | |
| Réserver | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Match 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md ticket-hover transition duration-300"> | |
| <div class="p-4 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm text-gray-500">Ligue 1 - Jour 24</div> | |
| <div class="text-sm font-medium bg-green-100 text-green-800 px-2 py-1 rounded">Disponible</div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/fr/thumb/d/d9/AS_Monaco_FC_logo.svg/1200px-AS_Monaco_FC_logo.svg.png" alt="Monaco" class="h-12 w-12 object-contain"> | |
| <div class="font-medium mt-2">Monaco</div> | |
| </div> | |
| <div class="text-lg font-bold mx-2">VS</div> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/fr/thumb/7/76/Olympique_lyonnais.svg/1200px-Olympique_lyonnais.svg.png" alt="Lyon" class="h-12 w-12 object-contain"> | |
| <div class="font-medium mt-2">Lyon</div> | |
| </div> | |
| </div> | |
| <div class="text-center text-gray-600 mb-4"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Stade Louis II, Monaco | |
| </div> | |
| <div class="text-center font-medium mb-4"> | |
| <i class="far fa-calendar-alt mr-2"></i> 29 Septembre 2025 - 20:45 | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-green-600 font-bold">À partir de 45€</div> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition"> | |
| Réserver | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white px-6 py-3 rounded-lg font-medium transition"> | |
| Voir tous les matchs | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stadiums Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Stades de Ligue 1</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Stadium 1 --> | |
| <div class="relative rounded-xl overflow-hidden shadow-lg h-64"> | |
| <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1893&q=80" alt="Parc des Princes" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> | |
| <div class="absolute bottom-0 left-0 p-6 text-white"> | |
| <h3 class="text-xl font-bold">Parc des Princes</h3> | |
| <p class="text-sm">Paris • Capacité: 47,929</p> | |
| <div class="flex items-center mt-2"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-sm">4.8 (12,345 avis)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stadium 2 --> | |
| <div class="relative rounded-xl overflow-hidden shadow-lg h-64"> | |
| <img src="https://images.unsplash.com/photo-1540746272351-b9df3082d4e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Orange Vélodrome" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> | |
| <div class="absolute bottom-0 left-0 p-6 text-white"> | |
| <h3 class="text-xl font-bold">Orange Vélodrome</h3> | |
| <p class="text-sm">Marseille • Capacité: 67,394</p> | |
| <div class="flex items-center mt-2"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-sm">4.7 (9,876 avis)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stadium 3 --> | |
| <div class="relative rounded-xl overflow-hidden shadow-lg h-64"> | |
| <img src="https://images.unsplash.com/photo-1575365345949-ef1fdee4a6a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Groupama Stadium" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> | |
| <div class="absolute bottom-0 left-0 p-6 text-white"> | |
| <h3 class="text-xl font-bold">Groupama Stadium</h3> | |
| <p class="text-sm">Lyon • Capacité: 59,186</p> | |
| <div class="flex items-center mt-2"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-sm">4.6 (8,543 avis)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ticket Purchase Modal (hidden by default) --> | |
| <div id="ticket-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold">Achat de places</h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="md:flex gap-6"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h4 class="text-lg font-bold mb-4">PSG vs OM</h4> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Date:</span> | |
| <span>18 Février 2024 - 20:45</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Stade:</span> | |
| <span>Parc des Princes, Paris</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Catégorie:</span> | |
| <span>Tribune A</span> | |
| </div> | |
| </div> | |
| <h4 class="text-lg font-bold mb-4">Plan du stade</h4> | |
| <div class="bg-gray-200 p-4 rounded-lg mb-4"> | |
| <div class="grid grid-cols-5 gap-2 mb-2"> | |
| <div class="col-span-5 bg-green-600 text-white text-center py-1 rounded">Terrain</div> | |
| </div> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| <div class="seat bg-gray-300 border border-gray-400 h-8 rounded cursor-pointer"></div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="w-4 h-4 bg-gray-300 border border-gray-400 mr-2"></div> | |
| <span class="text-sm">Disponible</span> | |
| <div class="w-4 h-4 bg-green-600 border border-green-800 mx-4 mr-2"></div> | |
| <span class="text-sm">Sélectionné</span> | |
| <div class="w-4 h-4 bg-gray-500 border border-gray-700 mx-4 mr-2"></div> | |
| <span class="text-sm">Occupé</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h4 class="text-lg font-bold mb-4">Votre sélection</h4> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <div class="flex justify-between mb-4"> | |
| <div> | |
| <div class="font-medium">Place Standard</div> | |
| <div class="text-sm text-gray-600">Tribune A - Rang 12 - Place 45</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-gray-300 px-2 py-1 rounded-l">-</button> | |
| <div class="bg-white px-4 py-1 border-t border-b border-gray-300">1</div> | |
| <button class="bg-gray-300 px-2 py-1 rounded-r">+</button> | |
| </div> | |
| <div class="font-bold">65€</div> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <div> | |
| <div class="font-medium">Place Standard</div> | |
| <div class="text-sm text-gray-600">Tribune A - Rang 12 - Place 46</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-gray-300 px-2 py-1 rounded-l">-</button> | |
| <div class="bg-white px-4 py-1 border-t border-b border-gray-300">1</div> | |
| <button class="bg-gray-300 px-2 py-1 rounded-r">+</button> | |
| </div> | |
| <div class="font-bold">65€</div> | |
| </div> | |
| <div class="border-t border-gray-300 pt-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Sous-total:</span> | |
| <span>130€</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span>Frais de service:</span> | |
| <span>5€</span> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total:</span> | |
| <span>135€</span> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="text-lg font-bold mb-4">Informations de paiement</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Nom complet</label> | |
| <input type="text" class="w-full px-4 py-2 border rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" class="w-full px-4 py-2 border rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Carte de crédit</label> | |
| <input type="text" placeholder="1234 5678 9012 3456" class="w-full px-4 py-2 border rounded-lg"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Date d'expiration</label> | |
| <input type="text" placeholder="MM/AA" class="w-full px-4 py-2 border rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">CVV</label> | |
| <input type="text" placeholder="123" class="w-full px-4 py-2 border rounded-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold mt-6 transition"> | |
| Payer maintenant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <section class="py-12 gradient-bg text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Ne manquez aucun match</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Abonnez-vous à notre newsletter pour recevoir les alertes de billetterie pour vos clubs favoris.</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-l-lg text-gray-900"> | |
| <button class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-r-lg font-bold transition"> | |
| S'abonner | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-futbol text-2xl"></i> | |
| <h3 class="text-xl font-bold">Ligue1Billetterie</h3> | |
| </div> | |
| <p class="text-gray-400">La plateforme officielle pour acheter vos places de Ligue 1 Uber Eats en toute sécurité.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Matchs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Stades</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mon compte</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Aide</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Modes de paiement</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions générales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 Ligue1Billetterie. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Countdown for next big match | |
| function updateCountdown() { | |
| const now = new Date(); | |
| const matchDate = new Date('2025-09-20T20:45:00'); | |
| const diff = matchDate - now; | |
| const days = Math.floor(diff / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| document.getElementById('countdown-days').textContent = days.toString().padStart(2, '0'); | |
| document.getElementById('countdown-hours').textContent = hours.toString().padStart(2, '0'); | |
| document.getElementById('countdown-minutes').textContent = minutes.toString().padStart(2, '0'); | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Ticket modal functionality | |
| const modal = document.getElementById('ticket-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const reserveButtons = document.querySelectorAll('.bg-green-600'); | |
| reserveButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| modal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Seat selection | |
| const seats = document.querySelectorAll('.seat'); | |
| seats.forEach(seat => { | |
| seat.addEventListener('click', function() { | |
| if (!this.classList.contains('bg-gray-500')) { | |
| this.classList.toggle('seat-selected'); | |
| this.classList.toggle('bg-gray-300'); | |
| } | |
| }); | |
| }); | |
| // Mobile menu toggle (placeholder) | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| alert('Menu mobile à implémenter'); | |
| }); | |
| </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=Zinedine94/restos-suisse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |