Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Atelier Picking - Solutions de picking innovantes</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"> | |
| <!-- Firebase SDK --> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script> | |
| <style> | |
| .bg-orange-atelier { | |
| background-color: #F15A24; | |
| } | |
| .text-orange-atelier { | |
| color: #F15A24; | |
| } | |
| .border-orange-atelier { | |
| border-color: #F15A24; | |
| } | |
| .bg-blue-atelier { | |
| background-color: #005B82; | |
| } | |
| .text-blue-atelier { | |
| color: #005B82; | |
| } | |
| .hover-bg-orange:hover { | |
| background-color: #E04E1A; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #F15A24; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .cart-item { | |
| transition: all 0.3s ease; | |
| } | |
| .cart-item:hover { | |
| background-color: #f7fafc; | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/logo-atelier-picking.png" alt="Atelier Picking Logo" class="h-12"> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#accueil" class="nav-link text-blue-atelier font-medium">Accueil</a> | |
| <a href="#expertise" class="nav-link text-gray-600 hover:text-blue-atelier">Notre expertise</a> | |
| <a href="#solutions" class="nav-link text-gray-600 hover:text-blue-atelier">Nos solutions</a> | |
| <a href="#boutique" class="nav-link text-gray-600 hover:text-blue-atelier">Boutique</a> | |
| <a href="#references" class="nav-link text-gray-600 hover:text-blue-atelier">Nos références</a> | |
| <a href="#contact" class="nav-link text-gray-600 hover:text-blue-atelier">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="cart-button" class="text-gray-600 hover:text-blue-atelier transition"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-orange-atelier text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <!-- Panier dropdown --> | |
| <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 py-2"> | |
| <div class="px-4 py-2 border-b"> | |
| <h3 class="font-bold text-gray-700">Votre panier</h3> | |
| </div> | |
| <div id="cart-items" class="max-h-60 overflow-y-auto"> | |
| <p class="text-gray-500 text-center py-4">Votre panier est vide</p> | |
| </div> | |
| <div class="px-4 py-2 border-t"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-bold">Total:</span> | |
| <span id="cart-total" class="font-bold">0,00 €</span> | |
| </div> | |
| <a href="#boutique" class="block text-center bg-blue-atelier text-white py-2 px-4 rounded hover:bg-blue-700 transition">Commander</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-600 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> | |
| <a href="#accueil" class="text-blue-atelier font-medium py-2">Accueil</a> | |
| <a href="#expertise" class="text-gray-600 hover:text-blue-atelier py-2">Notre expertise</a> | |
| <a href="#solutions" class="text-gray-600 hover:text-blue-atelier py-2">Nos solutions</a> | |
| <a href="#boutique" class="text-gray-600 hover:text-blue-atelier py-2">Boutique</a> | |
| <a href="#references" class="text-gray-600 hover:text-blue-atelier py-2">Nos références</a> | |
| <a href="#contact" class="text-gray-600 hover:text-blue-atelier py-2">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="accueil" class="bg-blue-atelier text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-3xl md:text-4xl font-bold mb-6">Optimisez vos opérations de picking</h1> | |
| <p class="text-lg mb-8 opacity-90">Atelier Picking conçoit et intègre des solutions innovantes pour améliorer la productivité de vos préparations de commandes.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#contact" class="bg-orange-atelier text-white font-bold py-3 px-6 rounded hover-bg-orange transition duration-300 text-center">Demander un devis</a> | |
| <a href="#solutions" class="border-2 border-white text-white font-bold py-3 px-6 rounded hover:bg-white hover:bg-opacity-10 transition duration-300 text-center">Découvrir nos solutions</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/visuel-header.png" alt="Solutions de picking" class="max-w-md w-full"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Expertise Section --> | |
| <section id="expertise" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4 text-blue-atelier">Notre expertise</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Spécialistes des solutions de picking depuis plus de 15 ans</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="service-card bg-white p-6 rounded-lg border border-gray-200 transition duration-300"> | |
| <div class="bg-blue-50 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lightbulb text-blue-atelier text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-atelier">Conseil</h3> | |
| <p class="text-gray-600">Analyse de vos processus et recommandations pour optimiser vos opérations de picking.</p> | |
| </div> | |
| <div class="service-card bg-white p-6 rounded-lg border border-gray-200 transition duration-300"> | |
| <div class="bg-orange-50 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-cogs text-orange-atelier text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-atelier">Intégration</h3> | |
| <p class="text-gray-600">Déploiement de solutions sur mesure adaptées à vos besoins spécifiques.</p> | |
| </div> | |
| <div class="service-card bg-white p-6 rounded-lg border border-gray-200 transition duration-300"> | |
| <div class="bg-green-50 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-headset text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-atelier">Support</h3> | |
| <p class="text-gray-600">Accompagnement et maintenance pour garantir le bon fonctionnement de vos équipements.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4 text-blue-atelier">Nos solutions</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Des technologies innovantes pour améliorer votre productivité</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="service-card bg-white p-6 rounded-lg border border-gray-200 transition duration-300"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/icon-pick-to-light.png" alt="Pick-to-Light" class="h-16 mb-4 mx-auto"> | |
| <h3 class="text-xl font-bold mb-3 text-center text-blue-atelier">Pick-to-Light</h3> | |
| <p class="text-gray-600 text-center">Système visuel guidant les opérateurs vers les emplacements et indiquant les quantités à prélever.</p> | |
| </div> | |
| <div class="service-card bg-white p-6 rounded-lg border border-gray-200 transition duration-300"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/icon-voice-picking.png" alt="Voice Picking" class="h-16 mb-4 mx-auto"> | |
| <h3 class="text-xl font-bold mb-3 text-center text-blue-atelier">Voice Picking</h3> | |
| <p class="text-gray-600 text-center">Solution vocale permettant une préparation de commandes mains-libres.</p> | |
| </div> | |
| <div class="service-card bg-white p-6 rounded-lg border border-gray-200 transition duration-300"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/icon-rfid.png" alt="RFID" class="h-16 mb-4 mx-auto"> | |
| <h3 class="text-xl font-bold mb-3 text-center text-blue-atelier">RFID</h3> | |
| <p class="text-gray-600 text-center">Technologie sans contact pour le suivi et la traçabilité des marchandises.</p> | |
| </div> | |
| <div class="service-card bg-white p-6 rounded-lg border border-gray-200 transition duration-300"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/icon-mobile.png" alt="Solutions mobiles" class="h-16 mb-4 mx-auto"> | |
| <h3 class="text-xl font-bold mb-3 text-center text-blue-atelier">Solutions mobiles</h3> | |
| <p class="text-gray-600 text-center">Applications dédiées aux opérations logistiques sur terminaux mobiles.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Boutique Section --> | |
| <section id="boutique" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4 text-blue-atelier">Notre Boutique</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Découvrez nos solutions matérielles et logicielles</p> | |
| </div> | |
| <div class="mb-8 flex justify-between items-center"> | |
| <div class="relative w-full md:w-64"> | |
| <input type="text" id="search-products" placeholder="Rechercher un produit..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-atelier"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="hidden md:flex space-x-2"> | |
| <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="all">Tous</button> | |
| <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="hardware">Matériel</button> | |
| <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="software">Logiciel</button> | |
| <button class="category-filter px-4 py-2 rounded-lg border hover:bg-gray-50" data-category="service">Service</button> | |
| </div> | |
| </div> | |
| <div id="products-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Les produits seront chargés dynamiquement depuis Firebase --> | |
| <div class="text-center py-8"> | |
| <i class="fas fa-spinner fa-spin text-4xl text-blue-atelier"></i> | |
| <p class="mt-4">Chargement des produits...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- References Section --> | |
| <section id="references" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4 text-blue-atelier">Nos références</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Ils nous ont fait confiance pour optimiser leurs opérations</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="flex justify-center"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/logo-carrefour.png" alt="Carrefour" class="h-16 object-contain opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/logo-decathlon.png" alt="Decathlon" class="h-16 object-contain opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/logo-leroy-merlin.png" alt="Leroy Merlin" class="h-16 object-contain opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/logo-fnac.png" alt="Fnac" class="h-16 object-contain opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4 italic">"La solution Pick-to-Light a permis d'augmenter notre productivité de 30% tout en réduisant les erreurs de picking."</p> | |
| <div class="flex items-center"> | |
| <div> | |
| <h4 class="font-bold">Jean Dupont</h4> | |
| <p class="text-gray-500 text-sm">Responsable logistique</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4 italic">"L'équipe d'Atelier Picking a su comprendre nos besoins et proposer une solution parfaitement adaptée à notre activité."</p> | |
| <div class="flex items-center"> | |
| <div> | |
| <h4 class="font-bold">Marie Lambert</h4> | |
| <p class="text-gray-500 text-sm">Directrice d'entrepôt</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4 italic">"Le support technique réactif et compétent a été un vrai plus dans notre collaboration avec Atelier Picking."</p> | |
| <div class="flex items-center"> | |
| <div> | |
| <h4 class="font-bold">Thomas Martin</h4> | |
| <p class="text-gray-500 text-sm">Responsable supply chain</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-orange-atelier text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-6">Vous souhaitez optimiser vos opérations de picking ?</h2> | |
| <p class="text-lg mb-8 max-w-2xl mx-auto">Nos experts sont à votre disposition pour étudier votre projet.</p> | |
| <a href="#contact" class="bg-white text-orange-atelier font-bold py-3 px-8 rounded hover-bg-orange transition duration-300 inline-block">Contactez-nous</a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-6 text-blue-atelier">Contact</h2> | |
| <p class="text-gray-600 mb-8">Pour toute demande d'information ou de devis, n'hésitez pas à nous contacter.</p> | |
| <div class="mb-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-50 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-atelier"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1 text-blue-atelier">Adresse</h3> | |
| <p class="text-gray-600">12 rue de la Michodière<br>75002 Paris, France</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-orange-50 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-orange-atelier"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1 text-blue-atelier">Téléphone</h3> | |
| <p class="text-gray-600">+33 1 42 86 80 86</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-50 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1 text-blue-atelier">Email</h3> | |
| <p class="text-gray-600">contact@atelier-picking.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form id="contact-form" class="bg-gray-50 p-8 rounded-lg shadow-sm"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet*</label> | |
| <input type="text" id="name" required class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email*</label> | |
| <input type="email" id="email" required class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Téléphone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message*</label> | |
| <textarea id="message" rows="4" required class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-atelier"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-orange-atelier text-white font-bold py-3 px-6 rounded hover-bg-orange transition duration-300 flex items-center justify-center"> | |
| <span id="submit-text">Envoyer</span> | |
| <i id="submit-spinner" class="fas fa-spinner fa-spin ml-2 hidden"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-blue-atelier text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <img src="https://atelier-picking.com/wp-content/uploads/2022/02/logo-atelier-picking.png" alt="Atelier Picking Logo" class="h-12 mb-4"> | |
| <p class="text-gray-300">Solutions innovantes pour optimiser vos opérations de picking et de préparation de commandes.</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Solutions</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Pick-to-Light</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Voice Picking</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">RFID</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Solutions mobiles</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Entreprise</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Notre expertise</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Nos références</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Actualités</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Recrutement</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="text-gray-300">12 rue de la Michodière</li> | |
| <li class="text-gray-300">75002 Paris, France</li> | |
| <li class="text-gray-300">+33 1 42 86 80 86</li> | |
| <li class="text-gray-300">contact@atelier-picking.com</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-blue-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-300 mb-4 md:mb-0">© 2023 Atelier Picking. Tous droits réservés.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-300 hover:text-white transition">Mentions légales</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition">Politique de confidentialité</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition">CGV</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Product Modal --> | |
| <div id="product-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible"> | |
| <div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 id="modal-product-name" class="text-2xl font-bold text-blue-atelier"></h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/3"> | |
| <img id="modal-product-image" src="" alt="" class="w-full rounded-lg border border-gray-200"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <p id="modal-product-description" class="text-gray-600 mb-4"></p> | |
| <div class="mb-4"> | |
| <span class="text-2xl font-bold text-blue-atelier" id="modal-product-price"></span> | |
| <span class="text-gray-500 ml-1" id="modal-product-tax"></span> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <div class="mr-4"> | |
| <label for="product-quantity" class="block text-gray-700 mb-1">Quantité</label> | |
| <div class="flex border rounded-lg w-32"> | |
| <button class="quantity-btn px-3 py-1 border-r bg-gray-100 hover:bg-gray-200" data-action="decrease">-</button> | |
| <input type="number" id="product-quantity" value="1" min="1" class="w-12 text-center border-none focus:ring-0"> | |
| <button class="quantity-btn px-3 py-1 border-l bg-gray-100 hover:bg-gray-200" data-action="increase">+</button> | |
| </div> | |
| </div> | |
| <button id="add-to-cart-btn" class="bg-orange-atelier text-white font-bold py-2 px-6 rounded hover-bg-orange transition duration-300 mt-6"> | |
| Ajouter au panier | |
| </button> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-bold text-gray-700 mb-2">Caractéristiques</h4> | |
| <ul id="modal-product-features" class="list-disc pl-5 text-gray-600"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Confirmation Toast --> | |
| <div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 z-50 hidden"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span id="toast-message">Produit ajouté au panier</span> | |
| </div> | |
| </div> | |
| <script> | |
| // Configuration Firebase | |
| const firebaseConfig = { | |
| apiKey: "AIzaSyDv8Q4j1jJ8X7X9Q4Q2Q3Q4Q5Q6Q7Q8Q9", | |
| authDomain: "atelier-picking.firebaseapp.com", | |
| projectId: "atelier-picking", | |
| storageBucket: "atelier-picking.appspot.com", | |
| messagingSenderId: "123456789012", | |
| appId: "1:123456789012:web:abcdefghijklmnopqrstuv" | |
| }; | |
| // Initialisation Firebase | |
| firebase.initializeApp(firebaseConfig); | |
| const db = firebase.firestore(); | |
| const auth = firebase.auth(); | |
| // Variables globales | |
| let cart = JSON.parse(localStorage.getItem('cart')) || []; | |
| let currentProduct = null; | |
| // DOM Elements | |
| const cartButton = document.getElementById('cart-button'); | |
| const cartDropdown = document.getElementById('cart-dropdown'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartItems = document.getElementById('cart-items'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const productsContainer = document.getElementById('products-container'); | |
| const searchProducts = document.getElementById('search-products'); | |
| const categoryFilters = document.querySelectorAll('.category-filter'); | |
| const productModal = document.getElementById('product-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const quantityInput = document.getElementById('product-quantity'); | |
| const quantityButtons = document.querySelectorAll('.quantity-btn'); | |
| const addToCartBtn = document.getElementById('add-to-cart-btn'); | |
| const toast = document.getElementById('toast'); | |
| const contactForm = document.getElementById('contact-form'); | |
| const submitText = document.getElementById('submit-text'); | |
| const submitSpinner = document.getElementById('submit-spinner'); | |
| // Charger les produits depuis Firebase | |
| function loadProducts() { | |
| productsContainer.innerHTML = ` | |
| <div class="text-center py-8"> | |
| <i class="fas fa-spinner fa-spin text-4xl text-blue-atelier"></i> | |
| <p class="mt-4">Chargement des produits...</p> | |
| </div> | |
| `; | |
| db.collection("products").get().then((querySnapshot) => { | |
| productsContainer.innerHTML = ''; | |
| querySnapshot.forEach((doc) => { | |
| const product = doc.data(); | |
| productsContainer.appendChild(createProductCard(product)); | |
| }); | |
| }).catch((error) => { | |
| productsContainer.innerHTML = ` | |
| <div class="text-center py-8 text-red-500"> | |
| <i class="fas fa-exclamation-triangle text-4xl"></i> | |
| <p class="mt-4">Erreur lors du chargement des produits</p> | |
| </div> | |
| `; | |
| console.error("Error loading products: ", error); | |
| }); | |
| } | |
| // Créer une carte produit | |
| function createProductCard(product) { | |
| const card = document.createElement('div'); | |
| card.className = 'product-card bg-white rounded-lg border border-gray-200 overflow-hidden transition duration-300'; | |
| card.dataset.category = product.category; | |
| card.dataset.name = product.name.toLowerCase(); | |
| card.innerHTML = ` | |
| <div class="h-48 bg-gray-100 flex items-center justify-center p-4"> | |
| <img src="${product.image || 'https://via.placeholder.com/300x200?text=Produit'}" alt="${product.name}" class="h-full object-contain"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-atelier">${product.name}</h3> | |
| <p class="text-gray-600 mb-4 line-clamp-2">${product.description}</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-blue-atelier">${formatPrice(product.price)}</span> | |
| <button class="view-product-btn bg-blue-atelier text-white py-2 px-4 rounded hover:bg-blue-700 transition" data-id="${product.id}"> | |
| Voir le produit | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| return card; | |
| } | |
| // Formater le prix | |
| function formatPrice(price) { | |
| return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(price); | |
| } | |
| // Mettre à jour le panier | |
| function updateCart() { | |
| // Mettre à jour le compteur | |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| // Mettre à jour le dropdown | |
| if (cart.length === 0) { | |
| cartItems.innerHTML = '<p class="text-gray-500 text-center py-4">Votre panier est vide</p>'; | |
| cartTotal.textContent = '0,00 €'; | |
| } else { | |
| cartItems.innerHTML = ''; | |
| let total = 0; | |
| cart.forEach((item, index) => { | |
| const itemTotal = item.price * item.quantity; | |
| total += itemTotal; | |
| const cartItem = document.createElement('div'); | |
| cartItem.className = 'cart-item px-4 py-3 border-b flex justify-between items-center'; | |
| cartItem.innerHTML = ` | |
| <div> | |
| <h4 class="font-medium">${item.name}</h4> | |
| <p class="text-sm text-gray-500">${formatPrice(item.price)} x ${item.quantity}</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="font-bold mr-4">${formatPrice(itemTotal)}</span> | |
| <button class="remove-item text-red-500 hover:text-red-700" data-index="${index}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| cartItems.appendChild(cartItem); | |
| }); | |
| cartTotal.textContent = formatPrice(total); | |
| } | |
| // Sauvegarder dans localStorage | |
| localStorage.setItem('cart', JSON.stringify(cart)); | |
| } | |
| // Afficher le toast | |
| function showToast(message) { | |
| document.getElementById('toast-message').textContent = message; | |
| toast.classList.remove('hidden'); | |
| toast.classList.remove('opacity-0'); | |
| toast.classList.remove('translate-y-10'); | |
| toast.classList.add('opacity-100'); | |
| setTimeout(() => { | |
| toast.classList.remove('opacity-100'); | |
| toast.classList.add('opacity-0'); | |
| toast.classList.add('translate-y-10'); | |
| }, 3000); | |
| } | |
| // Ouvrir le modal produit | |
| function openProductModal(product) { | |
| currentProduct = product; | |
| document.getElementById('modal-product-name').textContent = product.name; | |
| document.getElementById('modal-product-image').src = product.image || 'https://via.placeholder.com/300x200?text=Produit'; | |
| document.getElementById('modal-product-image').alt = product.name; | |
| document.getElementById('modal-product-description').textContent = product.description; | |
| document.getElementById('modal-product-price').textContent = formatPrice(product.price); | |
| document.getElementById('modal-product-tax').textContent = 'HT'; | |
| const featuresList = document.getElementById('modal-product-features'); | |
| featuresList.innerHTML = ''; | |
| if (product.features && product.features.length > 0) { | |
| product.features.forEach(feature => { | |
| const li = document.createElement('li'); | |
| li.textContent = feature; | |
| featuresList.appendChild(li); | |
| }); | |
| } else { | |
| featuresList.innerHTML = '<li>Aucune caractéristique spécifiée</li>'; | |
| } | |
| quantityInput.value = 1; | |
| productModal.classList.remove('opacity-0'); | |
| productModal.classList.remove('invisible'); | |
| } | |
| // Fermer le modal produit | |
| function closeProductModal() { | |
| productModal.classList.add('opacity-0'); | |
| productModal.classList.add('invisible'); | |
| } | |
| // Filtrer les produits | |
| function filterProducts() { | |
| const searchTerm = searchProducts.value.toLowerCase(); | |
| const activeCategory = document.querySelector('.category-filter.active')?.dataset.category || 'all'; | |
| document.querySelectorAll('.product-card').forEach(card => { | |
| const matchesSearch = card.dataset.name.includes(searchTerm); | |
| const matchesCategory = activeCategory === 'all' || card.dataset.category === activeCategory; | |
| if (matchesSearch && matchesCategory) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| // Événements | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Charger les produits | |
| loadProducts(); | |
| updateCart(); | |
| // Panier dropdown | |
| cartButton.addEventListener('click', () => { | |
| cartDropdown.classList.toggle('hidden'); | |
| }); | |
| // Fermer le dropdown quand on clique ailleurs | |
| document.addEventListener('click', (e) => { | |
| if (!cartButton.contains(e.target) && !cartDropdown.contains(e.target)) { | |
| cartDropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Menu mobile | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Filtres de catégorie | |
| categoryFilters.forEach(button => { | |
| button.addEventListener('click', () => { | |
| categoryFilters.forEach(btn => btn.classList.remove('bg-blue-atelier', 'text-white')); | |
| button.classList.add('bg-blue-atelier', 'text-white'); | |
| filterProducts(); | |
| }); | |
| }); | |
| // Recherche de produits | |
| searchProducts.addEventListener('input', filterProducts); | |
| // Modal produit | |
| productsContainer.addEventListener('click', (e) => { | |
| if (e.target.closest('.view-product-btn')) { | |
| const productId = e.target.closest('.view-product-btn').dataset.id; | |
| db.collection("products").doc(productId).get().then((doc) => { | |
| if (doc.exists) { | |
| openProductModal({ id: doc.id, ...doc.data() }); | |
| } | |
| }).catch((error) => { | |
| console.error("Error loading product: ", error); | |
| }); | |
| } | |
| }); | |
| // Fermer le modal | |
| closeModal.addEventListener('click', closeProductModal); | |
| // Boutons quantité | |
| quantityButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| let value = parseInt(quantityInput.value); | |
| if (button.dataset.action === 'increase') { | |
| quantityInput.value = value + 1; | |
| } else if (button.dataset.action === 'decrease' && value > 1) { | |
| quantityInput.value = value - 1; | |
| } | |
| }); | |
| }); | |
| // Ajouter au panier | |
| addToCartBtn.addEventListener('click', () => { | |
| if (currentProduct) { | |
| const quantity = parseInt(quantityInput.value); | |
| const existingItemIndex = cart.findIndex(item => item.id === currentProduct.id); | |
| if (existingItemIndex >= 0) { | |
| cart[existingItemIndex].quantity += quantity; | |
| } else { | |
| cart.push({ | |
| id: currentProduct.id, | |
| name: currentProduct.name, | |
| price: currentProduct.price, | |
| quantity: quantity, | |
| image: currentProduct.image | |
| }); | |
| } | |
| updateCart(); | |
| showToast('Produit ajouté au panier'); | |
| closeProductModal(); | |
| } | |
| }); | |
| // Supprimer un article du panier | |
| cartItems.addEventListener('click', (e) => { | |
| if (e.target.closest('.remove-item')) { | |
| const index = e.target.closest('.remove-item').dataset.index; | |
| cart.splice(index, 1); | |
| updateCart(); | |
| showToast('Produit retiré du panier'); | |
| } | |
| }); | |
| // Formulaire de contact | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| submitText.classList.add('hidden'); | |
| submitSpinner.classList.remove('hidden'); | |
| // Simuler l'envoi du formulaire | |
| setTimeout(() => { | |
| submitText.classList.remove('hidden'); | |
| submitSpinner.classList.add('hidden'); | |
| showToast('Votre message a été envoyé avec succès'); | |
| contactForm.reset(); | |
| }, 1500); | |
| }); | |
| // Smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if(targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if(targetElement) { | |
| // Fermer le menu mobile si ouvert | |
| mobileMenu.classList.add('hidden'); | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Exemple de données pour Firebase (à remplacer par vos propres données) | |
| // Ces données seraient normalement ajoutées via l'interface Firebase | |
| const sampleProducts = [ | |
| { | |
| id: "pick-to-light-pro", | |
| name: "Système Pick-to-Light Pro", | |
| description: "Solution avancée de picking visuel avec indicateurs LED et connectivité IoT.", | |
| price: 2499, | |
| category: "hardware", | |
| features: [ | |
| "Indicateurs LED haute visibilité", | |
| "Connectivité WiFi et Ethernet", | |
| "Intégration avec les WMS", | |
| "Installation facile et rapide" | |
| ], | |
| image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-pick-to-light.png" | |
| }, | |
| { | |
| id: "voice-picking-software", | |
| name: "Logiciel Voice Picking", | |
| description: "Solution logicielle complète pour la préparation de commandes mains-libres.", | |
| price: 899, | |
| category: "software", | |
| features: [ | |
| "Reconnaissance vocale avancée", | |
| "Compatibilité avec tous les terminaux vocaux", | |
| "Interface d'administration intuitive", | |
| "Rapports de performance en temps réel" | |
| ], | |
| image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-voice-picking.png" | |
| }, | |
| { | |
| id: "rfid-gate", | |
| name: "Portique RFID", | |
| description: "Système de portique RFID pour la traçabilité des marchandises.", | |
| price: 3499, | |
| category: "hardware", | |
| features: [ | |
| "Détection à 360°", | |
| "Portée jusqu'à 6 mètres", | |
| "Intégration avec les ERP", | |
| "Résistant aux environnements industriels" | |
| ], | |
| image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-rfid.png" | |
| }, | |
| { | |
| id: "mobile-picking-app", | |
| name: "Application Mobile Picking", | |
| description: "Application dédiée aux opérations logistiques sur terminaux mobiles.", | |
| price: 599, | |
| category: "software", | |
| features: [ | |
| "Compatibilité Android et iOS", | |
| "Interface utilisateur intuitive", | |
| "Fonctionnement hors ligne", | |
| "Synchronisation automatique" | |
| ], | |
| image: "https://atelier-picking.com/wp-content/uploads/2022/02/icon-mobile.png" | |
| }, | |
| { | |
| id: "consulting-day", | |
| name: "Journée de consulting", | |
| description: "Audit et recommandations pour optimiser vos opérations de picking.", | |
| price: 990, | |
| category: "service", | |
| features: [ | |
| "Analyse complète des processus", | |
| "Rapport détaillé avec recommandations", | |
| "Plan d'action personnalisé", | |
| "Suivi post-audit" | |
| ], | |
| image: "https://via.placeholder.com/300x200?text=Consulting" | |
| } | |
| ]; | |
| // Pour initialiser votre base de données Firebase, vous pouvez exécuter cette fonction une fois | |
| // function initializeProducts() { | |
| // sampleProducts.forEach(product => { | |
| // db.collection("products").doc(product.id).set(product) | |
| // .then(() => console.log("Product added: ", product.id)) | |
| // .catch(error => console.error("Error adding product: ", error)); | |
| // }); | |
| // } | |
| // initializeProducts(); | |
| </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=supportATP/site-atp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |