Spaces:

iShares
/

test-apps

Running

App Files Files Community

iShares commited on Apr 7, 2025

Commit

3b5e170

verified ·

1 Parent(s): 1c67704

Add 1 files

Browse files

Files changed (1) hide show

index.html +250 -18

index.html CHANGED Viewed

@@ -31,6 +31,33 @@
         .bottom-navbar {
             box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
         }
     </style>
 </head>
 <body class="bg-gray-50 font-sans">
@@ -48,11 +75,21 @@
                         <i class="fas fa-bell text-xl"></i>
                         <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                     </button>
-                    <button>
                         <i class="fas fa-search text-xl"></i>
                     </button>
                 </div>
             </div>
         </header>
         <!-- Contenu principal (changé dynamiquement) -->
@@ -61,30 +98,22 @@
             <div id="home-page">
                 <!-- Bannière promotionnelle -->
                 <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-4 text-white mb-6 fade-in">
-                    <h2 class="text-xl font-bold mb-2">Promotions du mois</h2>
-                    <p class="text-sm mb-3">Jusqu'à -20% sur les véhicules neufs</p>
-                    <button class="bg-white text-blue-600 px-4 py-1 rounded-full text-sm font-semibold">Voir les offres</button>
                 </div>
                 <!-- Catégories -->
                 <h2 class="text-lg font-semibold mb-3">Catégories</h2>
                 <div class="grid grid-cols-2 gap-3 mb-6">
                     <div class="bg-gray-100 p-4 rounded-lg text-center fade-in" style="animation-delay: 0.1s;">
-                        <i class="fas fa-car text-3xl text-blue-500 mb-2"></i>
                         <p class="font-medium">Neuf</p>
                     </div>
                     <div class="bg-gray-100 p-4 rounded-lg text-center fade-in" style="animation-delay: 0.2s;">
                         <i class="fas fa-car-side text-3xl text-green-500 mb-2"></i>
                         <p class="font-medium">Occasion</p>
                     </div>
-                    <div class="bg-gray-100 p-4 rounded-lg text-center fade-in" style="animation-delay: 0.3s;">
-                        <i class="fas fa-truck-pickup text-3xl text-orange-500 mb-2"></i>
-                        <p class="font-medium">Utilitaires</p>
-                    </div>
-                    <div class="bg-gray-100 p-4 rounded-lg text-center fade-in" style="animation-delay: 0.4s;">
-                        <i class="fas fa-motorcycle text-3xl text-purple-500 mb-2"></i>
-                        <p class="font-medium">Motos</p>
-                    </div>
                 </div>
                 <!-- Véhicules récents -->
@@ -102,7 +131,7 @@
                             <div class="flex justify-between items-center mt-2">
                                 <div>
                                     <p class="text-gray-600 text-sm"><i class="fas fa-gas-pump mr-1"></i> Essence</p>
-                                    <p class="text-gray-600 text-sm"><i class="fas fa-tachometer-alt mr-1"></i> 15 000 km</p>
                                 </div>
                                 <p class="text-lg font-bold text-blue-600">18 990 €</p>
                             </div>
@@ -165,10 +194,10 @@
             <!-- Page favoris (cachée par défaut) -->
             <div id="favorites-page" class="hidden">
-                <h2 class="text-xl font-bold mb-4">Vos favoris</h2>
                 <div class="text-center py-10">
-                    <i class="fas fa-heart text-4xl text-gray-300 mb-2"></i>
-                    <p class="text-gray-500">Vous n'avez pas encore de favoris</p>
                     <button class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-full">Parcourir les véhicules</button>
                 </div>
             </div>
@@ -198,6 +227,10 @@
                         <p class="text-sm text-gray-600 mt-1"><i class="fas fa-moon mr-2"></i> Mode sombre</p>
                     </div>
                     <button class="w-full bg-red-100 text-red-600 p-3 rounded-lg font-medium">
                         <i class="fas fa-sign-out-alt mr-2"></i> Déconnexion
                     </button>
@@ -222,6 +255,119 @@
                 </button>
             </div>
         </nav>
     </div>
     <script>
@@ -252,6 +398,16 @@
             }
         }
         // Fonction pour charger les véhicules dans la page de liste
         function loadVehicles() {
             const vehicles = [
@@ -369,7 +525,7 @@
                     </button>
                     <!-- Carrousel d'images -->
-                    <div class="relative h-48 bg-gray-2 00 rounded-xl overflow-hidden mb-4">
                         <img src="${vehicle.images[0]}" alt="${vehicle.name}" class="w-full h-full object-cover">
                         <div class="absolute bottom-2 left-0 right-0 flex justify-center space-x-1">
                             ${vehicle.images.map((_, i) => `<div class="w-2 h-2 rounded-full ${i === 0 ? 'bg-blue-500' : 'bg-gray-300'}"></div>`).join('')}
@@ -477,6 +633,82 @@
             // Afficher la page de détails
             showPage('vehicle-details-page');
         }
     </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=iShares/test-apps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

         .bottom-navbar {
             box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
         }
+        /* Animation pour la barre de recherche */
+        @keyframes slideDown {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .search-bar {
+            animation: slideDown 0.3s ease-out forwards;
+        }
+        /* Style pour le modal */
+        .modal {
+            transition: all 0.3s ease;
+        }
+        .modal-hidden {
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(20px);
+        }
+        .modal-visible {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
     </style>
 </head>
 <body class="bg-gray-50 font-sans">
                         <i class="fas fa-bell text-xl"></i>
                         <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                     </button>
+                    <button id="search-button">
                         <i class="fas fa-search text-xl"></i>
                     </button>
                 </div>
             </div>
+            <!-- Barre de recherche (cachée par défaut) -->
+            <div id="search-bar" class="hidden search-bar mt-3">
+                <div class="relative">
+                    <input type="text" placeholder="Rechercher un véhicule..." class="w-full py-2 px-4 pr-10 rounded-full text-gray-800 focus:outline-none">
+                    <button class="absolute right-3 top-2 text-gray-500">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </div>
+            </div>
         </header>
         <!-- Contenu principal (changé dynamiquement) -->
             <div id="home-page">
                 <!-- Bannière promotionnelle -->
                 <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-4 text-white mb-6 fade-in">
+                    <h2 class="text-xl font-bold mb-2">Promotions de la semaine</h2>
+                    <p class="text-sm mb-3">Jusqu'à -33% sur les véhicules neufs</p>
+                    <button class="bg-white text-blue-600 px-4 py-1 rounded-full text-sm font-semibold">Voir toutes nos offres</button>
                 </div>
                 <!-- Catégories -->
                 <h2 class="text-lg font-semibold mb-3">Catégories</h2>
                 <div class="grid grid-cols-2 gap-3 mb-6">
                     <div class="bg-gray-100 p-4 rounded-lg text-center fade-in" style="animation-delay: 0.1s;">
+                        <i class="fas fa-car text-3xl text-yellow-500 mb-2"></i>
                         <p class="font-medium">Neuf</p>
                     </div>
                     <div class="bg-gray-100 p-4 rounded-lg text-center fade-in" style="animation-delay: 0.2s;">
                         <i class="fas fa-car-side text-3xl text-green-500 mb-2"></i>
                         <p class="font-medium">Occasion</p>
                     </div>
                 </div>
                 <!-- Véhicules récents -->
                             <div class="flex justify-between items-center mt-2">
                                 <div>
                                     <p class="text-gray-600 text-sm"><i class="fas fa-gas-pump mr-1"></i> Essence</p>
+                                    <p class="text-gray-600 text-sm"><i class="fas fa-tachometer-alt mr-1"></i> 16 845 km</p>
                                 </div>
                                 <p class="text-lg font-bold text-blue-600">18 990 €</p>
                             </div>
             <!-- Page favoris (cachée par défaut) -->
             <div id="favorites-page" class="hidden">
+                <h2 class="text-xl font-bold mb-4">Vos coup de coeur</h2>
                 <div class="text-center py-10">
+                    <i class="fas fa-heart text-4xl text-pink-200 mb-2"></i>
+                    <p class="text-gray-500">Vous n'avez pas encore trouvé le coup de coeur</p>
                     <button class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-full">Parcourir les véhicules</button>
                 </div>
             </div>
                         <p class="text-sm text-gray-600 mt-1"><i class="fas fa-moon mr-2"></i> Mode sombre</p>
                     </div>
+                    <button onclick="showAddVehicleModal()" class="w-full bg-blue-100 text-blue-600 p-3 rounded-lg font-medium">
+                        <i class="fas fa-plus-circle mr-2"></i> Ajouter un véhicule
+                    </button>
                     <button class="w-full bg-red-100 text-red-600 p-3 rounded-lg font-medium">
                         <i class="fas fa-sign-out-alt mr-2"></i> Déconnexion
                     </button>
                 </button>
             </div>
         </nav>
+        <!-- Modal pour ajouter un véhicule -->
+        <div id="add-vehicle-modal" class="modal modal-hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+            <div class="bg-white rounded-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
+                <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+                    <h3 class="text-lg font-semibold">Ajouter un véhicule</h3>
+                    <button onclick="hideAddVehicleModal()" class="text-gray-500">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="p-4">
+                    <form id="add-vehicle-form" onsubmit="addVehicle(event)">
+                        <div class="space-y-4">
+                            <!-- Type de véhicule -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Type de véhicule</label>
+                                <div class="flex space-x-2">
+                                    <label class="flex-1">
+                                        <input type="radio" name="type" value="Neuf" class="sr-only peer" checked>
+                                        <div class="p-3 border border-gray-300 rounded-lg text-center peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600">
+                                            <i class="fas fa-car text-xl mb-1"></i>
+                                            <p>Neuf</p>
+                                        </div>
+                                    </label>
+                                    <label class="flex-1">
+                                        <input type="radio" name="type" value="Occasion" class="sr-only peer">
+                                        <div class="p-3 border border-gray-300 rounded-lg text-center peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600">
+                                            <i class="fas fa-car-side text-xl mb-1"></i>
+                                            <p>Occasion</p>
+                                        </div>
+                                    </label>
+                                </div>
+                            </div>
+                            <!-- Marque et modèle -->
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label for="brand" class="block text-sm font-medium text-gray-700 mb-1">Marque</label>
+                                    <input type="text" id="brand" name="brand" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                </div>
+                                <div>
+                                    <label for="model" class="block text-sm font-medium text-gray-700 mb-1">Modèle</label>
+                                    <input type="text" id="model" name="model" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                </div>
+                            </div>
+                            <!-- Année et kilométrage -->
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label for="year" class="block text-sm font-medium text-gray-700 mb-1">Année</label>
+                                    <input type="number" id="year" name="year" min="1900" max="2023" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                </div>
+                                <div>
+                                    <label for="km" class="block text-sm font-medium text-gray-700 mb-1">Kilométrage</label>
+                                    <input type="number" id="km" name="km" min="0" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                </div>
+                            </div>
+                            <!-- Carburant et prix -->
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label for="fuel" class="block text-sm font-medium text-gray-700 mb-1">Carburant</label>
+                                    <select id="fuel" name="fuel" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                        <option value="Essence">Essence</option>
+                                        <option value="Diesel">Diesel</option>
+                                        <option value="Hybride">Hybride</option>
+                                        <option value="Électrique">Électrique</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label for="price" class="block text-sm font-medium text-gray-700 mb-1">Prix (€)</label>
+                                    <input type="number" id="price" name="price" min="0" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                </div>
+                            </div>
+                            <!-- Description -->
+                            <div>
+                                <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                                <textarea id="description" name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                            </div>
+                            <!-- Photos -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Photos du véhicule</label>
+                                <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
+                                    <i class="fas fa-camera text-3xl text-gray-400 mb-2"></i>
+                                    <p class="text-sm text-gray-500">Glissez-déposez vos photos ici ou cliquez pour sélectionner</p>
+                                    <input type="file" id="photos" name="photos" multiple accept="image/*" class="hidden">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-6 flex space-x-3">
+                            <button type="button" onclick="hideAddVehicleModal()" class="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md font-medium">
+                                Annuler
+                            </button>
+                            <button type="submit" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md font-medium">
+                                Ajouter le véhicule
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <!-- Notification de succès -->
+        <div id="success-notification" class="fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden z-50">
+            <div class="flex items-center">
+                <i class="fas fa-check-circle mr-2"></i>
+                <span>Véhicule ajouté avec succès!</span>
+            </div>
+        </div>
     </div>
     <script>
             }
         }
+        // Fonction pour activer/désactiver la barre de recherche
+        document.getElementById('search-button').addEventListener('click', function() {
+            const searchBar = document.getElementById('search-bar');
+            if (searchBar.classList.contains('hidden')) {
+                searchBar.classList.remove('hidden');
+            } else {
+                searchBar.classList.add('hidden');
+            }
+        });
         // Fonction pour charger les véhicules dans la page de liste
         function loadVehicles() {
             const vehicles = [
                     </button>
                     <!-- Carrousel d'images -->
+                    <div class="relative h-48 bg-gray-200 rounded-xl overflow-hidden mb-4">
                         <img src="${vehicle.images[0]}" alt="${vehicle.name}" class="w-full h-full object-cover">
                         <div class="absolute bottom-2 left-0 right-0 flex justify-center space-x-1">
                             ${vehicle.images.map((_, i) => `<div class="w-2 h-2 rounded-full ${i === 0 ? 'bg-blue-500' : 'bg-gray-300'}"></div>`).join('')}
             // Afficher la page de détails
             showPage('vehicle-details-page');
         }
+        // Fonctions pour le modal d'ajout de véhicule
+        function showAddVehicleModal() {
+            const modal = document.getElementById('add-vehicle-modal');
+            modal.classList.remove('modal-hidden');
+            modal.classList.add('modal-visible');
+        }
+        function hideAddVehicleModal() {
+            const modal = document.getElementById('add-vehicle-modal');
+            modal.classList.remove('modal-visible');
+            modal.classList.add('modal-hidden');
+        }
+        // Fonction pour ajouter un véhicule
+        function addVehicle(event) {
+            event.preventDefault();
+            // Récupérer les données du formulaire
+            const formData = new FormData(event.target);
+            const vehicleData = {
+                type: formData.get('type'),
+                brand: formData.get('brand'),
+                model: formData.get('model'),
+                year: formData.get('year'),
+                km: formData.get('km'),
+                fuel: formData.get('fuel'),
+                price: formData.get('price'),
+                description: formData.get('description')
+            };
+            // Ici, vous pourriez envoyer les données à un serveur
+            console.log('Nouveau véhicule ajouté:', vehicleData);
+            // Afficher une notification de succès
+            const notification = document.getElementById('success-notification');
+            notification.classList.remove('hidden');
+            // Masquer la notification après 3 secondes
+            setTimeout(() => {
+                notification.classList.add('hidden');
+            }, 3000);
+            // Fermer le modal
+            hideAddVehicleModal();
+            // Réinitialiser le formulaire
+            event.target.reset();
+            // Recharger la liste des véhicules
+            loadVehicles();
+        }
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', function() {
+            // Activer le drag and drop pour les photos
+            const dropZone = document.querySelector('div[class*="border-dashed"]');
+            const fileInput = document.getElementById('photos');
+            dropZone.addEventListener('click', () => fileInput.click());
+            dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropZone.classList.add('border-blue-500', 'bg-blue-50');
+            });
+            dropZone.addEventListener('dragleave', () => {
+                dropZone.classList.remove('border-blue-500', 'bg-blue-50');
+            });
+            dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropZone.classList.remove('border-blue-500', 'bg-blue-50');
+                fileInput.files = e.dataTransfer.files;
+            });
+        });
     </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=iShares/test-apps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>