|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Garage Deschamps Automobiles - Vente de véhicules</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> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.vehicle-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.vehicle-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.bottom-navbar { |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideDown { |
|
|
from { opacity: 0; transform: translateY(-20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.search-bar { |
|
|
animation: slideDown 0.3s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.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"> |
|
|
|
|
|
<div class="max-w-md mx-auto bg-white min-h-screen relative pb-16"> |
|
|
|
|
|
<header class="bg-blue-600 text-white p-4 shadow-md"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-car text-2xl"></i> |
|
|
<h1 class="text-xl font-bold">Garage Deschamps Automobiles</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="relative"> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<main id="app-content" class="p-4"> |
|
|
|
|
|
<div id="home-page"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<h2 class="text-lg font-semibold mb-3">Nos meilleures offres</h2> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="vehicle-card bg-white rounded-xl overflow-hidden shadow-md fade-in" style="animation-delay: 0.1s;" onclick="showVehicleDetails(1)"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Voiture" class="w-full h-40 object-cover"> |
|
|
<span class="absolute top-2 left-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">Neuf</span> |
|
|
<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">-15%</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-bold">Peugeot 208</h3> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vehicle-card bg-white rounded-xl overflow-hidden shadow-md fade-in" style="animation-delay: 0.2s;" onclick="showVehicleDetails(2)"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Voiture" class="w-full h-40 object-cover"> |
|
|
<span class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Occasion</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-bold">Audi A5 Sportback</h3> |
|
|
<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> Diesel</p> |
|
|
<p class="text-gray-600 text-sm"><i class="fas fa-tachometer-alt mr-1"></i> 45 000 km</p> |
|
|
</div> |
|
|
<p class="text-lg font-bold text-blue-600">32 500 €</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="vehicles-page" class="hidden"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Nos véhicules</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-200 p-2 rounded-lg"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
<button class="bg-gray-200 p-2 rounded-lg"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex overflow-x-auto space-x-2 pb-2"> |
|
|
<button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm whitespace-nowrap">Tous</button> |
|
|
<button class="bg-gray-200 px-4 py-1 rounded-full text-sm whitespace-nowrap">Neuf</button> |
|
|
<button class="bg-gray-200 px-4 py-1 rounded-full text-sm whitespace-nowrap">Occasion</button> |
|
|
<button class="bg-gray-200 px-4 py-1 rounded-full text-sm whitespace-nowrap">Petit budget</button> |
|
|
<button class="bg-gray-200 px-4 py-1 rounded-full text-sm whitespace-nowrap">Familiale</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4" id="vehicles-list"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="vehicle-details-page" class="hidden"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="account-page" class="hidden"> |
|
|
<div class="flex items-center space-x-4 mb-6"> |
|
|
<div class="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-user text-2xl text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="font-bold">Jean Dupont</h2> |
|
|
<p class="text-gray-600 text-sm">Membre depuis 2022</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="bg-gray-100 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold mb-2">Mes informations</h3> |
|
|
<p class="text-sm text-gray-600"><i class="fas fa-envelope mr-2"></i> jean.dupont@example.com</p> |
|
|
<p class="text-sm text-gray-600 mt-1"><i class="fas fa-phone mr-2"></i> +33 6 12 34 56 78</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-100 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold mb-2">Préférences</h3> |
|
|
<p class="text-sm text-gray-600"><i class="fas fa-bell mr-2"></i> Notifications activées</p> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="bottom-navbar fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 max-w-md mx-auto"> |
|
|
<div class="flex justify-around"> |
|
|
<button class="p-4 text-blue-600" onclick="showPage('home-page')"> |
|
|
<i class="fas fa-home text-xl"></i> |
|
|
</button> |
|
|
<button class="p-4 text-gray-500" onclick="showPage('vehicles-page'); loadVehicles()"> |
|
|
<i class="fas fa-car text-xl"></i> |
|
|
</button> |
|
|
<button class="p-4 text-gray-500" onclick="showPage('favorites-page')"> |
|
|
<i class="fas fa-heart text-xl"></i> |
|
|
</button> |
|
|
<button class="p-4 text-gray-500" onclick="showPage('account-page')"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 afficher une page et masquer les autres |
|
|
function showPage(pageId) { |
|
|
// Masquer toutes les pages |
|
|
document.querySelectorAll('#app-content > div').forEach(page => { |
|
|
page.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
// Afficher la page demandée |
|
|
document.getElementById(pageId).classList.remove('hidden'); |
|
|
|
|
|
// Mettre à jour la navigation active |
|
|
document.querySelectorAll('.bottom-navbar button').forEach(btn => { |
|
|
btn.classList.remove('text-blue-600'); |
|
|
btn.classList.add('text-gray-500'); |
|
|
}); |
|
|
|
|
|
// Trouver le bouton correspondant et le marquer comme actif |
|
|
const navButtons = document.querySelectorAll('.bottom-navbar button'); |
|
|
for (let i = 0; i < navButtons.length; i++) { |
|
|
if (navButtons[i].getAttribute('onclick').includes(pageId)) { |
|
|
navButtons[i].classList.remove('text-gray-500'); |
|
|
navButtons[i].classList.add('text-blue-600'); |
|
|
break; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 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 = [ |
|
|
{ |
|
|
id: 1, |
|
|
image: "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", |
|
|
type: "Neuf", |
|
|
promotion: "-15%", |
|
|
name: "Peugeot 208", |
|
|
fuel: "Essence", |
|
|
km: "15 000 km", |
|
|
price: "18 990 €" |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
image: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", |
|
|
type: "Occasion", |
|
|
promotion: null, |
|
|
name: "Audi A5 Sportback", |
|
|
fuel: "Diesel", |
|
|
km: "45 000 km", |
|
|
price: "32 500 €" |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
image: "https://images.unsplash.com/photo-1541899481282-d53b3e38e9a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", |
|
|
type: "Neuf", |
|
|
promotion: "-10%", |
|
|
name: "Renault Clio", |
|
|
fuel: "Essence", |
|
|
km: "5 000 km", |
|
|
price: "16 800 €" |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
image: "https://images.unsplash.com/photo-1550355291-bbee04a92027?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1136&q=80", |
|
|
type: "Occasion", |
|
|
promotion: null, |
|
|
name: "Volkswagen Golf", |
|
|
fuel: "Diesel", |
|
|
km: "80 000 km", |
|
|
price: "14 200 €" |
|
|
} |
|
|
]; |
|
|
|
|
|
const container = document.getElementById('vehicles-list'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
vehicles.forEach(vehicle => { |
|
|
const vehicleCard = document.createElement('div'); |
|
|
vehicleCard.className = 'vehicle-card bg-white rounded-xl overflow-hidden shadow-md'; |
|
|
vehicleCard.onclick = () => showVehicleDetails(vehicle.id); |
|
|
|
|
|
vehicleCard.innerHTML = ` |
|
|
<div class="relative"> |
|
|
<img src="${vehicle.image}" alt="Voiture" class="w-full h-40 object-cover"> |
|
|
<span class="absolute top-2 left-2 ${vehicle.type === 'Neuf' ? 'bg-blue-500' : 'bg-green-500'} text-white text-xs px-2 py-1 rounded-full">${vehicle.type}</span> |
|
|
${vehicle.promotion ? `<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">${vehicle.promotion}</span>` : ''} |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-bold">${vehicle.name}</h3> |
|
|
<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> ${vehicle.fuel}</p> |
|
|
<p class="text-gray-600 text-sm"><i class="fas fa-tachometer-alt mr-1"></i> ${vehicle.km}</p> |
|
|
</div> |
|
|
<p class="text-lg font-bold text-blue-600">${vehicle.price}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(vehicleCard); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Fonction pour afficher les détails d'un véhicule |
|
|
function showVehicleDetails(vehicleId) { |
|
|
// Simuler des données de véhicule |
|
|
const vehicle = { |
|
|
id: vehicleId, |
|
|
images: [ |
|
|
"https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", |
|
|
"https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80", |
|
|
"https://images.unsplash.com/photo-1502161254066-6c74afbf07aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" |
|
|
], |
|
|
name: vehicleId === 1 ? "Peugeot 208 GT Line" : "Audi A5 Sportback", |
|
|
year: vehicleId === 1 ? "2022" : "2020", |
|
|
price: vehicleId === 1 ? "18 990 €" : "32 500 €", |
|
|
originalPrice: vehicleId === 1 ? "22 300 €" : "34 000 €", |
|
|
type: vehicleId === 1 ? "Neuf" : "Occasion", |
|
|
fuel: vehicleId === 1 ? "Essence" : "Diesel", |
|
|
km: vehicleId === 1 ? "15 000 km" : "45 000 km", |
|
|
power: vehicleId === 1 ? "100 ch" : "190 ch", |
|
|
transmission: vehicleId === 1 ? "Manuelle" : "Automatique", |
|
|
color: vehicleId === 1 ? "Gris Nacré" : "Noir", |
|
|
description: vehicleId === 1 |
|
|
? "Peugeot 208 GT Line 1.2 PureTech 100ch BVM6, livrée avec de nombreux équipements : jantes alliage 17\", climatisation automatique, régulateur de vitesse, caméra de recul, écran tactile 7\", etc." |
|
|
: "Audi A5 Sportback 2.0 TDI 190ch S-tronic, finition S Line avec pack design, intérieur cuir, système de navigation MMI, phones LED, etc. Véhicule en excellent état.", |
|
|
seller: { |
|
|
name: vehicleId === 1 ? "Concessionnaire AutoPlus" : "Garage Prestige Auto", |
|
|
rating: vehicleId === 1 ? "4.8" : "4.6", |
|
|
reviews: vehicleId === 1 ? "124 avis" : "87 avis", |
|
|
phone: vehicleId === 1 ? "01 23 45 67 89" : "02 34 56 78 90" |
|
|
} |
|
|
}; |
|
|
|
|
|
const container = document.getElementById('vehicle-details-page'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
// Créer le contenu de la page de détails |
|
|
container.innerHTML = ` |
|
|
<div class="mb-4"> |
|
|
<button onclick="showPage('vehicles-page')" class="mb-4 text-blue-600"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Retour |
|
|
</button> |
|
|
|
|
|
|
|
|
<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('')} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h1 class="text-xl font-bold">${vehicle.name}</h1> |
|
|
<p class="text-gray-600">${vehicle.year} • ${vehicle.km} • ${vehicle.fuel}</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-xl font-bold text-blue-600">${vehicle.price}</p> |
|
|
${vehicle.originalPrice ? `<p class="text-sm text-gray-500 line-through">${vehicle.originalPrice}</p>` : ''} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">${vehicle.type}</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">${vehicle.power}</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">${vehicle.transmission}</span> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">${vehicle.color}</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="font-semibold mb-2">Description</h2> |
|
|
<p class="text-gray-700">${vehicle.description}</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="font-semibold mb-3">Caractéristiques</h2> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="bg-gray-100 p-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-600">Type</p> |
|
|
<p class="font-medium">${vehicle.type}</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-600">Année</p> |
|
|
<p class="font-medium">${vehicle.year}</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-600">Kilométrage</p> |
|
|
<p class="font-medium">${vehicle.km}</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-600">Carburant</p> |
|
|
<p class="font-medium">${vehicle.fuel}</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-600">Puissance</p> |
|
|
<p class="font-medium">${vehicle.power}</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-600">Transmission</p> |
|
|
<p class="font-medium">${vehicle.transmission}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="font-semibold mb-3">Vendeur</h2> |
|
|
<div class="bg-gray-100 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="h-10 w-10 bg-blue-500 rounded-full flex items-center justify-center text-white"> |
|
|
<i class="fas fa-store"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">${vehicle.seller.name}</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs"></i> |
|
|
<span class="text-xs ml-1">${vehicle.seller.rating} (${vehicle.seller.reviews})</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="tel:${vehicle.seller.phone}" class="bg-blue-600 text-white p-2 rounded-full"> |
|
|
<i class="fas fa-phone"></i> |
|
|
</a> |
|
|
</div> |
|
|
<button class="w-full bg-blue-600 text-white py-2 rounded-lg mt-2"> |
|
|
<i class="fas fa-envelope mr-2"></i> Contacter le vendeur |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-16 left-0 right-0 max-w-md mx-auto px-4"> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="flex-1 bg-white border border-blue-600 text-blue-600 py-3 rounded-lg font-medium"> |
|
|
<i class="far fa-heart mr-2"></i> Favoris |
|
|
</button> |
|
|
<button class="flex-1 bg-blue-600 text-white py-3 rounded-lg font-medium"> |
|
|
<i class="fas fa-euro-sign mr-2"></i> Financer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
// 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> |
