Spaces:
Running
Running
rajouter une ombre légère sur les textes pour les rendre plus visite. - Initial Deployment
f325927
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nahstudio.ch - Mastering, Mixage & Services Audio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for smooth scrolling and audio player */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| .audio-player { | |
| background: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%); | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.2); | |
| } | |
| .nav-link.active { | |
| color: #2dd4bf; | |
| border-bottom: 2px solid #2dd4bf; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-blue-50 text-gray-800 font-sans"> | |
| <!-- Header with Logo --> | |
| <header class="sticky top-0 z-50 bg-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6 flex flex-col items-center"> | |
| <div class="mb-4"> | |
| <h1 class="text-3xl font-bold text-teal-400">NAHSTUDIO</h1> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="w-full"> | |
| <ul class="flex justify-center space-x-8"> | |
| <li><a href="#intro" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Introduction</a></li> | |
| <li><a href="#services" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Services Audio</a></li> | |
| <li><a href="#portfolio" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Portfolio</a></li> | |
| <li><a href="#contact" class="nav-link px-3 py-2 text-lg font-medium hover:text-teal-500 transition">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gradient-to-b from-blue-100 to-teal-100"> | |
| <div class="absolute inset-0 opacity-20 bg-black"> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-70"></div> | |
| </div> | |
| <div class="container mx-auto px-4 z-10 text-center"> | |
| <h2 class="text-5xl md:text-7xl font-bold mb-6 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_40%)]">NAHSTUDIO.CH</h2> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 [text-shadow:_0_2px_4px_rgb(0_0_0_/_30%)]">Excellence en Mastering, Mixage et Production Audio Professionnelle</p> | |
| <a href="#intro" class="bg-teal-500 hover:bg-teal-600 text-gray-900 font-bold py-3 px-8 rounded-full transition duration-300 inline-flex items-center"> | |
| Découvrir <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Introduction Section --> | |
| <section id="intro" class="py-20 bg-amber-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">INTRODUCTION</h2> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="rounded-xl overflow-hidden shadow-2xl"> | |
| <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Studio Nahstudio" class="w-full h-auto object-cover brightness-75"> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-3xl font-bold mb-6">Bienvenue chez Nahstudio</h3> | |
| <p class="text-lg mb-4">Fondé en 2023, Nahstudio est un studio audio professionnel spécialisé dans le mastering, le mixage et la production sonore de haute qualité.</p> | |
| <p class="text-lg mb-4">Notre approche allie expertise technique et sensibilité artistique pour donner vie à vos projets musicaux. Nous travaillons avec des artistes de tous genres, des labels indépendants aux grandes productions.</p> | |
| <p class="text-lg mb-6">Basé en Suisse, notre studio est équipé des dernières technologies et d'un équipement haut de gamme pour garantir des résultats exceptionnels.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-500 mr-2"></i> | |
| <span>Matériel professionnel</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-500 mr-2"></i> | |
| <span>Expérience confirmée</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-500 mr-2"></i> | |
| <span>Approche personnalisée</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-amber-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">SERVICES AUDIO</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Mastering --> | |
| <div class="service-card bg-white rounded-xl p-8 shadow-lg transition duration-300"> | |
| <div class="text-teal-500 mb-4"> | |
| <i class="fas fa-sliders-h text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Mastering</h3> | |
| <p class="mb-4">Finalisation professionnelle de vos pistes pour une diffusion optimale sur toutes les plateformes (streaming, vinyl, CD).</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Équilibre spectral précis</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Optimisation du volume</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Correction des problèmes</span> | |
| </li> | |
| </ul> | |
| <div class="text-yellow-500 font-medium">À partir de CHF 50.- / piste</div> | |
| </div> | |
| <!-- Mixage --> | |
| <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300"> | |
| <div class="text-yellow-500 mb-4"> | |
| <i class="fas fa-wave-square text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Mixage</h3> | |
| <p class="mb-4">Harmonisation et équilibrage de vos pistes pour un rendu professionnel et cohérent.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Équilibre des instruments</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Traitement dynamique</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Spatialisation 3D</span> | |
| </li> | |
| </ul> | |
| <div class="text-yellow-500 font-medium">À partir de CHF 80.- / piste</div> | |
| </div> | |
| <!-- Création audio --> | |
| <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300"> | |
| <div class="text-yellow-500 mb-4"> | |
| <i class="fas fa-music text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Création Audio</h3> | |
| <p class="mb-4">Composition et production musicale sur mesure pour vos projets.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Composition originale</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Sound design</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Jingles et identités sonores</span> | |
| </li> | |
| </ul> | |
| <div class="text-yellow-500 font-medium">Sur devis</div> | |
| </div> | |
| <!-- Traitement audio --> | |
| <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300"> | |
| <div class="text-yellow-500 mb-4"> | |
| <i class="fas fa-microphone-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Traitement Audio</h3> | |
| <p class="mb-4">Amélioration et restauration de vos enregistrements.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Nettoyage de pistes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Correction de problèmes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Optimisation vocale</span> | |
| </li> | |
| </ul> | |
| <div class="text-yellow-500 font-medium">À partir de CHF 40.- / heure</div> | |
| </div> | |
| <!-- Cours --> | |
| <div class="service-card bg-gray-800 rounded-xl p-8 shadow-lg transition duration-300"> | |
| <div class="text-yellow-500 mb-4"> | |
| <i class="fas fa-chalkboard-teacher text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Cours Audio</h3> | |
| <p class="mb-4">Formation personnalisée en production musicale et techniques audio.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>DAW (Ableton, Logic, Pro Tools)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Systèmes modulaires</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Hardware analogique</span> | |
| </li> | |
| </ul> | |
| <div class="text-yellow-500 font-medium">CHF 80.- / heure</div> | |
| </div> | |
| <!-- Custom Service --> | |
| <div class="service-card bg-amber-800 rounded-xl p-8 shadow-lg transition duration-300 border-2 border-dashed border-orange-600 flex flex-col items-center justify-center"> | |
| <div class="text-yellow-500 mb-4"> | |
| <i class="fas fa-lightbulb text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-center">Service Personnalisé</h3> | |
| <p class="mb-6 text-center">Vous avez un projet spécifique? Parlons-en et créons une solution sur mesure.</p> | |
| <a href="#contact" class="bg-teal-400 hover:bg-teal-500 text-gray-900 font-bold py-2 px-6 rounded-full transition duration-300"> | |
| Nous contacter | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-amber-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">PORTFOLIO</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Audio Player 1 --> | |
| <div class="audio-player p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-yellow-500">Projet 1 - Mastering</h3> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>0:00</span> | |
| <span>3:45</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-yellow-500 hover:text-yellow-400 text-2xl"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="text-yellow-500 hover:text-yellow-400 text-4xl"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="text-yellow-500 hover:text-yellow-400 text-2xl"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe> | |
| </div> | |
| </div> | |
| <!-- Audio Player 2 --> | |
| <div class="audio-player p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-yellow-500">Projet 2 - Mixage</h3> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>0:00</span> | |
| <span>4:22</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-yellow-500 hover:text-yellow-400 text-2xl"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="text-yellow-500 hover:text-yellow-400 text-4xl"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="text-yellow-500 hover:text-yellow-400 text-2xl"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1095455338&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Portfolio --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Démonstration YouTube</h3> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe class="w-full h-64 md:h-80 rounded-lg shadow-xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Témoignage Client</h3> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe class="w-full h-64 md:h-80 rounded-lg shadow-xl" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-amber-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 text-teal-400 [text-shadow:_0_2px_4px_rgb(0_0_0_/_20%)]">CONTACT</h2> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-6">Envoyez-nous un message</h3> | |
| <form id="contactForm" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium">Votre nom</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium">Votre email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| </div> | |
| <div> | |
| <label for="service" class="block mb-2 font-medium">Service concerné</label> | |
| <select id="service" name="service" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <option value="">Sélectionnez un service</option> | |
| <option value="mastering">Mastering</option> | |
| <option value="mixing">Mixage</option> | |
| <option value="creation">Création audio</option> | |
| <option value="treatment">Traitement audio</option> | |
| <option value="courses">Cours</option> | |
| <option value="other">Autre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2 font-medium">Votre message</label> | |
| <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| Envoyer le message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-6">Nos coordonnées</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-yellow-500 mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">Adresse</h4> | |
| <p>Rue du Studio 42<br>1000 Lausanne, Suisse</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-yellow-500 mr-4 mt-1"> | |
| <i class="fas fa-envelope text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">Email</h4> | |
| <p>contact@nahstudio.ch</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-yellow-500 mr-4 mt-1"> | |
| <i class="fas fa-phone-alt text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">Téléphone</h4> | |
| <p>+41 79 123 45 67</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-yellow-500 mr-4 mt-1"> | |
| <i class="fas fa-clock text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">Horaires</h4> | |
| <p>Lundi - Vendredi: 10h - 18h<br>Samedi: Sur rendez-vous</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h4 class="text-xl font-bold mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl"> | |
| <i class="fab fa-soundcloud"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300 text-2xl"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-teal-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-headphones text-xl text-gray-900"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-teal-500">NAHSTUDIO</h2> | |
| </div> | |
| <p class="mt-2 text-gray-400">Excellence audio depuis 2023</p> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-gray-400 mb-2">© 2023 Nahstudio.ch. Tous droits réservés.</p> | |
| <div class="flex justify-center md:justify-end space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition">Mentions légales</a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-500 transition">Politique de confidentialité</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scroll for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Update active nav link | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active'); | |
| }); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Form submission | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const service = document.getElementById('service').value; | |
| const message = document.getElementById('message').value; | |
| // Here you would normally send the data to a server | |
| // For demo purposes, we'll just show an alert | |
| alert(`Merci ${name} pour votre message concernant ${service}! Nous vous répondrons à ${email} dès que possible.`); | |
| // Reset form | |
| this.reset(); | |
| }); | |
| // Update active nav link on scroll | |
| window.addEventListener('scroll', function() { | |
| const sections = document.querySelectorAll('section'); | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - 300)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| // Simple audio player functionality | |
| document.querySelectorAll('.audio-player button.fa-play').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| if (icon.classList.contains('fa-play')) { | |
| icon.classList.remove('fa-play'); | |
| icon.classList.add('fa-pause'); | |
| } else { | |
| icon.classList.remove('fa-pause'); | |
| icon.classList.add('fa-play'); | |
| } | |
| }); | |
| }); | |
| </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=nahsteoner/nahstudio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |