Spaces:
Running
Running
ajouter la section creation creation d'un petit boutique avec des option de la creation d'un petit boutique exemple: puisque a la creation de votre compte marchenou les autre information le site les a deja il doit maintenant te demander des ifos lier a la creation du petit boutique donc: votre surnom, le nom de la boutique sa taille [ puique je veut ca dans les autre grandeur de boutique aussi pas seulment petit boutique , donc son adresse ou emplacement , quelle categorie de boutique et ce que vous vendez vous etre exemple: chassure ,vetement, etc..... . et d'autre infos que tu pourrait me propose . - Initial Deployment
025d3b7
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Découvrez les Petites Boutiques Locales</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> | |
| .boutique-card { | |
| transition: all 0.3s ease; | |
| } | |
| .boutique-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .premium-badge { | |
| background: linear-gradient(45deg, #FFD700, #FFA500); | |
| } | |
| .vip-badge { | |
| background: linear-gradient(45deg, #C0C0C0, #A9A9A9); | |
| } | |
| .vvip-badge { | |
| background: linear-gradient(45deg, #FF69B4, #FF1493); | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-color: #f0f0f0; | |
| border-radius: 12px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .map-placeholder { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #e5e7eb; | |
| color: #6b7280; | |
| font-size: 1.2rem; | |
| } | |
| .search-filter { | |
| transition: all 0.3s ease; | |
| } | |
| .search-filter.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-store text-blue-500 text-3xl mr-3"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">PetitesBoutiques</h1> | |
| </div> | |
| <div class="relative w-full md:w-1/3"> | |
| <input type="text" placeholder="Rechercher une boutique, une ville..." | |
| class="w-full px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white p-2 rounded-full"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Filters Section --> | |
| <div class="w-full lg:w-1/4"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm sticky top-4"> | |
| <h2 class="text-lg font-semibold mb-4">Filtres</h2> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-2">Visibilité</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="search-filter active px-3 py-1 rounded-full border border-gray-300 text-sm">Toutes</button> | |
| <button class="search-filter px-3 py-1 rounded-full border border-gray-300 text-sm">Proximité</button> | |
| <button class="search-filter px-3 py-1 rounded-full border border-gray-300 text-sm">Premium</button> | |
| <button class="search-filter px-3 py-1 rounded-full border border-gray-300 text-sm">VIP</button> | |
| <button class="search-filter px-3 py-1 rounded-full border border-gray-300 text-sm">VVIP</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-2">Distance</h3> | |
| <input type="range" min="1" max="50" value="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>1 km</span> | |
| <span>10 km</span> | |
| <span>50 km</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-2">Catégories</h3> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-blue-500 mr-2"> | |
| <span>Mode</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-blue-500 mr-2"> | |
| <span>Alimentation</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-blue-500 mr-2"> | |
| <span>Artisanat</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-blue-500 mr-2"> | |
| <span>Décoration</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition"> | |
| Appliquer les filtres | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Boutiques List --> | |
| <div class="w-full lg:w-2/4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold">Boutiques près de chez vous</h2> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="mr-2">Trier par :</span> | |
| <select class="border border-gray-300 rounded px-2 py-1"> | |
| <option>Proximité</option> | |
| <option>Popularité</option> | |
| <option>Nouveauté</option> | |
| <option>Note</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Boutique Card - Standard --> | |
| <div class="boutique-card bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <div class="w-full sm:w-1/4"> | |
| <div class="bg-gray-200 h-40 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Boutique standard" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="w-full sm:w-3/4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-semibold">La Petite Échoppe</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">4.2</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-1">Mode & Accessoires</p> | |
| <p class="text-gray-600 mt-2 text-sm">Une charmante boutique proposant des vêtements et accessoires uniques faits main par des artisans locaux.</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>500m - Rue des Artisans, Paris</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Standard</span> | |
| </div> | |
| <button class="text-blue-500 text-sm font-medium hover:text-blue-700"> | |
| Voir la boutique <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Boutique Card - Premium --> | |
| <div class="boutique-card bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <div class="w-full sm:w-1/4 relative"> | |
| <div class="bg-gray-200 h-40 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80" | |
| alt="Boutique premium" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -top-2 -left-2 premium-badge text-white text-xs font-bold px-2 py-1 rounded-full shadow"> | |
| <i class="fas fa-crown mr-1"></i> PREMIUM | |
| </div> | |
| </div> | |
| <div class="w-full sm:w-3/4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-semibold">L'Atelier Gourmand</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-1">Alimentation Bio</p> | |
| <p class="text-gray-600 mt-2 text-sm">Produits bio et locaux sélectionnés avec soin. Notre boutique premium vous offre une expérience culinaire unique.</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>1.2km - Avenue des Gourmets, Paris</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="premium-badge text-white text-xs px-2 py-1 rounded">Premium</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded ml-2">Boosté</span> | |
| </div> | |
| <button class="text-blue-500 text-sm font-medium hover:text-blue-700"> | |
| Voir la boutique <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Boutique Card - VIP --> | |
| <div class="boutique-card bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <div class="w-full sm:w-1/4 relative"> | |
| <div class="bg-gray-200 h-40 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" | |
| alt="Boutique VIP" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -top-2 -left-2 vip-badge text-white text-xs font-bold px-2 py-1 rounded-full shadow"> | |
| <i class="fas fa-gem mr-1"></i> VIP | |
| </div> | |
| </div> | |
| <div class="w-full sm:w-3/4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-semibold">Le Cabinet de Curiosités</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">4.9</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-1">Art & Antiquités</p> | |
| <p class="text-gray-600 mt-2 text-sm">Une collection exceptionnelle d'objets rares et anciens. Notre statut VIP nous permet d'être visible dans toute la région.</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>2.5km - Rue des Antiquaires, Paris</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="vip-badge text-white text-xs px-2 py-1 rounded">VIP</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded ml-2">Boosté</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded ml-2">Tendance</span> | |
| </div> | |
| <button class="text-blue-500 text-sm font-medium hover:text-blue-700"> | |
| Voir la boutique <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Boutique Card - VVIP --> | |
| <div class="boutique-card bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <div class="w-full sm:w-1/4 relative"> | |
| <div class="bg-gray-200 h-40 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2015&q=80" | |
| alt="Boutique VVIP" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -top-2 -left-2 vvip-badge text-white text-xs font-bold px-2 py-1 rounded-full shadow"> | |
| <i class="fas fa-star mr-1"></i> VVIP | |
| </div> | |
| </div> | |
| <div class="w-full sm:w-3/4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-semibold">La Maison d'Exception</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">5.0</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-1">Luxe & Création</p> | |
| <p class="text-gray-600 mt-2 text-sm">Notre statut VVIP nous permet d'être visible dans toute la France. Découvrez des pièces uniques de créateurs renommés.</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>3km - Avenue Montaigne, Paris</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="vvip-badge text-white text-xs px-2 py-1 rounded">VVIP</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded ml-2">Boosté</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded ml-2">Tendance</span> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded ml-2">Nouveau</span> | |
| </div> | |
| <button class="text-blue-500 text-sm font-medium hover:text-blue-700"> | |
| Voir la boutique <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-center"> | |
| <button class="bg-white border border-gray-300 px-4 py-2 rounded-lg hover:bg-gray-50"> | |
| Charger plus de boutiques | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Map Section --> | |
| <div class="w-full lg:w-1/4"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm sticky top-4"> | |
| <h2 class="text-lg font-semibold mb-4">Localisation</h2> | |
| <div class="map-container"> | |
| <div class="map-placeholder"> | |
| <div class="text-center"> | |
| <i class="fas fa-map-marked-alt text-4xl mb-2 text-gray-400"></i> | |
| <p>Carte des boutiques</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-2">Améliorez votre visibilité</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start p-3 bg-blue-50 rounded-lg"> | |
| <div class="premium-badge p-2 rounded-full mr-3"> | |
| <i class="fas fa-crown text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Devenez Premium</h4> | |
| <p class="text-sm text-gray-600">Apparaissez dans plus de recherches et augmentez votre visibilité.</p> | |
| <button class="mt-1 text-blue-500 text-sm font-medium">En savoir plus</button> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 bg-gray-50 rounded-lg"> | |
| <div class="vip-badge p-2 rounded-full mr-3"> | |
| <i class="fas fa-gem text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Passez VIP</h4> | |
| <p class="text-sm text-gray-600">Visible dans tout votre département avec des fonctionnalités exclusives.</p> | |
| <button class="mt-1 text-blue-500 text-sm font-medium">En savoir plus</button> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 bg-pink-50 rounded-lg"> | |
| <div class="vvip-badge p-2 rounded-full mr-3"> | |
| <i class="fas fa-star text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Passez VVIP</h4> | |
| <p class="text-sm text-gray-600">Visibilité nationale et avantages exclusifs pour votre boutique.</p> | |
| <button class="mt-1 text-blue-500 text-sm font-medium">En savoir plus</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">PetitesBoutiques</h3> | |
| <p class="text-gray-400">Découvrez et soutenez les petites boutiques locales près de chez vous.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Pour les boutiques</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#creer-boutique" class="text-gray-400 hover:text-white modal-trigger">Créer une page boutique</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Solutions Premium</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Ressources</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Pour les visiteurs</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Trouver une boutique</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Applications mobiles</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Avis</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> [email protected]</li> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> 01 23 45 67 89</li> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> Paris, France</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 PetitesBoutiques. Tous droits réservés.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modal Création Boutique --> | |
| <div id="creer-boutique" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> | |
| <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Créer votre boutique</h2> | |
| <button class="modal-close text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Informations personnelles</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Votre surnom</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Ex: JeanDupont"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Numéro de téléphone</label> | |
| <input type="tel" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="+33 6 12 34 56 78"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Informations sur la boutique</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nom de la boutique*</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Ex: La Petite Échoppe" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Taille de la boutique*</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md" required> | |
| <option value="">Sélectionnez...</option> | |
| <option value="micro">Micro-boutique (moins de 10m²)</option> | |
| <option value="petite">Petite boutique (10-30m²)</option> | |
| <option value="moyenne">Boutique moyenne (30-100m²)</option> | |
| <option value="grande">Grande boutique (100-300m²)</option> | |
| <option value="very-large">Très grande boutique (+300m²)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Adresse complète*</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Numéro, rue, code postal, ville" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie principale*</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md" required> | |
| <option value="">Sélectionnez...</option> | |
| <option value="mode">Mode & Accessoires</option> | |
| <option value="alimentation">Alimentation</option> | |
| <option value="artisanat">Artisanat</option> | |
| <option value="decoration">Décoration</option> | |
| <option value="cosmetique">Cosmétiques</option> | |
| <option value="jouets">Jouets & Jeux</option> | |
| <option value="livres">Livres & Papeterie</option> | |
| <option value="autre">Autre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description de la boutique*</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="3" placeholder="Décrivez ce que vous vendez et ce qui rend votre boutique unique" required></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Horaires d'ouverture</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Ex: Lun-Ven 9h-19h, Sam 10h-18h"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Site web (optionnel)</label> | |
| <input type="url" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="https://www.votreboutique.com"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Visibilité</h3> | |
| <div class="space-y-3"> | |
| <label class="flex items-start"> | |
| <input type="radio" name="visibility" class="mt-1 mr-2" checked> | |
| <span class="text-sm text-gray-700">Standard (gratuit) - Visible dans un rayon de 10km</span> | |
| </label> | |
| <label class="flex items-start"> | |
| <input type="radio" name="visibility" class="mt-1 mr-2"> | |
| <span class="text-sm text-gray-700">Premium - Visible dans tout votre département</span> | |
| </label> | |
| <label class="flex items-start"> | |
| <input type="radio" name="visibility" class="mt-1 mr-2"> | |
| <span class="text-sm text-gray-700">VIP - Visible dans toute la région</span> | |
| </label> | |
| <label class="flex items-start"> | |
| <input type="radio" name="visibility" class="mt-1 mr-2"> | |
| <span class="text-sm text-gray-700">VVIP - Visible dans toute la France</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-medium"> | |
| Créer ma boutique | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Gestion du modal | |
| document.querySelectorAll('.modal-trigger').forEach(trigger => { | |
| trigger.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).classList.remove('hidden'); | |
| }); | |
| }); | |
| document.querySelectorAll('.modal-close').forEach(closeBtn => { | |
| closeBtn.addEventListener('click', function() { | |
| this.closest('.fixed').classList.add('hidden'); | |
| }); | |
| }); | |
| // Toggle active state for filter buttons | |
| document.querySelectorAll('.search-filter').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.search-filter').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Simulate boutique visibility based on filters | |
| document.querySelectorAll('.search-filter').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const filter = this.textContent.trim(); | |
| const boutiqueCards = document.querySelectorAll('.boutique-card'); | |
| boutiqueCards.forEach(card => { | |
| const badges = card.querySelectorAll('span:not(.bg-green-100):not(.bg-purple-100):not(.bg-red-100)'); | |
| let shouldShow = false; | |
| if (filter === 'Toutes') { | |
| shouldShow = true; | |
| } else { | |
| badges.forEach(badge => { | |
| if (badge.textContent === filter) { | |
| shouldShow = true; | |
| } | |
| }); | |
| if (filter === 'Proximité') { | |
| const distanceElement = card.querySelector('.fa-map-marker-alt').nextElementSibling; | |
| const distanceText = distanceElement.textContent; | |
| const distance = parseFloat(distanceText.split('km')[0]); | |
| if (distance <= 1) { | |
| shouldShow = true; | |
| } else { | |
| shouldShow = false; | |
| } | |
| } | |
| } | |
| card.style.display = shouldShow ? 'block' : 'none'; | |
| }); | |
| }); | |
| }); | |
| </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=boundlesss/marchenou" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |