Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AutoMaster | Guide Complet des Pièces Auto</title> | |
| <!-- Importation de la police Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <!-- Importation de l'icône FontAwesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- VARIABLES CSS & RESET --- */ | |
| :root { | |
| --primary-color: #3b82f6; /* Bleu Automobile */ | |
| --primary-dark: #1d4ed8; | |
| --accent-color: #ef4444; /* Rouge Action */ | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --text-light: #f8fafc; | |
| --text-gray: #94a3b8; | |
| --border-color: #334155; | |
| --transition-speed: 0.3s; | |
| --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-light); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Exo 2', sans-serif; | |
| font-weight: 700; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| transition: var(--transition-speed); | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| /* --- HEADER --- */ | |
| header { | |
| background-color: rgba(15, 23, 42, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border-color); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo i { | |
| font-size: 1.8rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .anycoder-link { | |
| font-size: 0.85rem; | |
| color: var(--text-gray); | |
| border: 1px solid var(--border-color); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| } | |
| .anycoder-link:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| /* --- HERO SECTION --- */ | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 1rem; | |
| background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%); | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(to right, #fff, #94a3b8); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero p { | |
| color: var(--text-gray); | |
| max-width: 600px; | |
| margin: 0 auto 2rem auto; | |
| font-size: 1.1rem; | |
| } | |
| /* --- MAIN APP LAYOUT --- */ | |
| .app-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem 1rem; | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr; | |
| gap: 2rem; | |
| min-height: 80vh; | |
| } | |
| /* --- LEFT: VISUAL EXPLORER --- */ | |
| .visual-explorer { | |
| background-color: var(--bg-card); | |
| border-radius: 16px; | |
| padding: 1rem; | |
| border: 1px solid var(--border-color); | |
| position: relative; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .car-image-container { | |
| width: 100%; | |
| height: 400px; /* Ajusté pour l'image */ | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| background-color: #000; | |
| } | |
| .car-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| opacity: 0.8; | |
| transition: transform 0.5s ease; | |
| } | |
| .car-image-container:hover .car-image { | |
| transform: scale(1.05); | |
| opacity: 1; | |
| } | |
| /* Hotspots (Points interactifs) */ | |
| .hotspot { | |
| position: absolute; | |
| width: 24px; | |
| height: 24px; | |
| background-color: var(--primary-color); | |
| border: 2px solid #fff; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: 0 0 10px var(--primary-color); | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .hotspot::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| border: 2px solid var(--primary-color); | |
| animation: pulse 2s infinite; | |
| } | |
| .hotspot.active { | |
| background-color: var(--accent-color); | |
| box-shadow: 0 0 15px var(--accent-color); | |
| transform: scale(1.1); | |
| } | |
| .hotspot.active::after { | |
| border-color: var(--accent-color); | |
| } | |
| .hotspot i { | |
| font-size: 10px; | |
| color: white; | |
| pointer-events: none; | |
| } | |
| .hotspot-tooltip { | |
| position: absolute; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: rgba(0,0,0,0.8); | |
| color: white; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| pointer-events: none; | |
| } | |
| .hotspot:hover .hotspot-tooltip { | |
| opacity: 1; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(2.5); opacity: 0; } | |
| } | |
| /* --- RIGHT: DETAILS PANEL --- */ | |
| .details-panel { | |
| background-color: var(--bg-card); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow); | |
| height: fit-content; | |
| position: sticky; | |
| top: 100px; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| color: var(--text-gray); | |
| padding: 2rem 0; | |
| } | |
| .empty-state i { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| opacity: 0.5; | |
| } | |
| .part-content { | |
| display: none; /* Masqué par défaut */ | |
| animation: slideIn 0.4s ease-out; | |
| } | |
| .part-content.active { | |
| display: block; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .part-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 1rem; | |
| } | |
| .part-icon { | |
| width: 50px; | |
| height: 50px; | |
| background-color: rgba(59, 130, 246, 0.1); | |
| color: var(--primary-color); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| } | |
| .part-title h2 { | |
| font-size: 1.5rem; | |
| } | |
| .part-title span { | |
| color: var(--text-gray); | |
| font-size: 0.9rem; | |
| } | |
| .section-label { | |
| color: var(--primary-color); | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 700; | |
| margin: 1.5rem 0 0.5rem 0; | |
| display: block; | |
| } | |
| .tutorial-steps { | |
| counter-reset: step; | |
| } | |
| .step-item { | |
| position: relative; | |
| padding-left: 2rem; | |
| margin-bottom: 1rem; | |
| color: #cbd5e1; | |
| } | |
| .step-item::before { | |
| counter-increment: step; | |
| content: counter(step); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 24px; | |
| height: 24px; | |
| background-color: var(--border-color); | |
| color: white; | |
| border-radius: 50%; | |
| font-size: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| .tools-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .tool-tag { | |
| background-color: #334155; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| } | |
| .action-btn { | |
| display: inline-block; | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 8px; | |
| margin-top: 2rem; | |
| width: 100%; | |
| text-align: center; | |
| font-weight: 600; | |
| } | |
| .action-btn:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| /* --- TUTORIALS GRID SECTION --- */ | |
| .tutorials-section { | |
| background-color: #0f172a; | |
| padding: 4rem 1rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .section-header { | |
| max-width: 1200px; | |
| margin: 0 auto 2rem auto; | |
| } | |
| .grid-cards { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .card { | |
| background-color: var(--bg-card); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| border: 1px solid var(--border-color); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| border-color: var(--primary-color); | |
| } | |
| .card-thumb { | |
| height: 160px; | |
| background-color: #334155; | |
| position: relative; | |
| } | |
| .card-thumb img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .play-icon { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(0,0,0,0.6); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| backdrop-filter: blur(4px); | |
| } | |
| .card-content { | |
| padding: 1.5rem; | |
| } | |
| .card-content h3 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .card-content p { | |
| font-size: 0.9rem; | |
| color: var(--text-gray); | |
| margin-bottom: 1rem; | |
| } | |
| .card-link { | |
| color: var(--primary-color); | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| background-color: #020617; | |
| padding: 2rem; | |
| text-align: center; | |
| color: var(--text-gray); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 900px) { | |
| .app-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .details-panel { | |
| order: 2; /* Mettre les détails en dessous sur mobile */ | |
| position: static; | |
| } | |
| .visual-explorer { | |
| order: 1; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .hero h1 { | |
| font-size: 1.8rem; | |
| } | |
| .nav-links { | |
| display: none; /* Simplification pour mobile */ | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-car-side"></i> | |
| <span>AutoMaster</span> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="#explorer">Explorateur</a> | |
| <a href="#tutorials">Tutoriels</a> | |
| <a href="#about">À propos</a> | |
| </nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <h1>La Mécanique Autrement</h1> | |
| <p>Explorez chaque composant de votre véhicule, visualisez son emplacement et suivez nos guides de montage pas-à-pas.</p> | |
| </section> | |
| <!-- Main Application Area --> | |
| <main class="app-container" id="explorer"> | |
| <!-- Left: Interactive Car Image --> | |
| <section class="visual-explorer"> | |
| <div class="car-image-container"> | |
| <!-- Image générique de voiture style sport --> | |
| <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1000&auto=format&fit=crop" alt="Voiture Sport" class="car-image"> | |
| <!-- Hotspots (Points cliquables) - Positionnés en % pour la responsivité --> | |
| <!-- Moteur --> | |
| <div class="hotspot" style="top: 40%; left: 35%;" data-part="engine" title="Moteur"> | |
| <i class="fa-solid fa-wrench"></i> | |
| <div class="hotspot-tooltip">Moteur</div> | |
| </div> | |
| <!-- Roue Avant --> | |
| <div class="hotspot" style="top: 65%; left: 20%;" data-part="wheels" title="Roues"> | |
| <i class="fa-solid fa-circle-notch"></i> | |
| <div class="hotspot-tooltip">Roues & Freins</div> | |
| </div> | |
| <!-- Échappement --> | |
| <div class="hotspot" style="top: 75%; left: 85%;" data-part="exhaust" title="Échappement"> | |
| <i class="fa-solid fa-wind"></i> | |
| <div class="hotspot-tooltip">Échappement</div> | |
| </div> | |
| <!-- Batterie --> | |
| <div class="hotspot" style="top: 45%; left: 55%;" data-part="battery" title="Batterie"> | |
| <i class="fa-solid fa-car-battery"></i> | |
| <div class="hotspot-tooltip">Batterie</div> | |
| </div> | |
| <!-- Transmission --> | |
| <div class="hotspot" style="top: 70%; left: 45%;" data-part="transmission" title="Transmission"> | |
| <i class="fa-solid fa-gears"></i> | |
| <div class="hotspot-tooltip">Transmission</div> | |
| </div> | |
| </div> | |
| <div style="margin-top: 1rem; color: var(--text-gray); font-size: 0.9rem; text-align: center;"> | |
| <i class="fa-solid fa-computer-mouse"></i> Cliquez sur les points bleus pour voir les détails | |
| </div> | |
| </section> | |
| <!-- Right: Dynamic Details Panel --> | |
| <section class="details-panel"> | |
| <!-- État vide (initial) --> | |
| <div id="empty-state" class="empty-state"> | |
| <i class="fa-solid fa-hand-pointer"></i> | |
| <h3>Sélectionnez une pièce</h3> | |
| <p>Cliquez sur un point de la carte interactive pour afficher le tutoriel de montage et les spécifications.</p> | |
| </div> | |
| <!-- Contenu dynamique injecté par JS --> | |
| <div id="part-content-container"></div> | |
| <!-- Template caché pour la structure JS --> | |
| <template id="details-template"> | |
| <div class="part-content"> | |
| <div class="part-header"> | |
| <div class="part-icon"> | |
| <i class="icon-class"></i> | |
| </div> | |
| <div class="part-title"> | |
| <h2 class="part-name">Nom de la pièce</h2> | |
| <span class="part-category">Catégorie</span> | |
| </div> | |
| </div> | |
| <p class="part-description">Description détaillée...</p> | |
| <span class="section-label"><i class="fa-solid fa-screwdriver-wrench"></i> Outils nécessaires</span> | |
| <div class="tools-list"> | |
| <!-- Outils injectés ici --> | |
| </div> | |
| <span class="section-label"><i class="fa-solid fa-list-check"></i> Tutoriel de Montage</span> | |
| <div class="tutorial-steps"> | |
| <!-- Étapes injectées ici --> | |
| </div> | |
| <a href="#" class="action-btn"> | |
| <i class="fa-solid fa-play"></i> Voir la vidéo complète | |
| </a> | |
| </div> | |
| </template> | |
| </section> | |
| </main> | |
| <!-- Tutorials Grid Section --> | |
| <section class="tutorials-section" id="tutorials"> | |
| <div class="section-header"> | |
| <h2>Tutoriels Populaires</h2> | |
| <p style="color: var(--text-gray);">Les guides d'entretien les plus consultés par la communauté.</p> | |
| </div> | |
| <div class="grid-cards"> | |
| <!-- Card 1 --> | |
| <article class="card"> | |
| <div class="card-thumb"> | |
| <img src="https://picsum.photos/seed/oil/400/250" alt="Vidéo Huile"> | |
| <div class="play-icon"><i class="fa-solid fa-play"></i></div> | |
| </div> | |
| <div class="card-content"> | |
| <h3>Changement d'huile moteur</h3> | |
| <p>Comment vidanger et remplacer le filtre à huile en 15 minutes.</p> | |
| <a href="#" class="card-link">Regarder le tutoriel <i class="fa-solid fa-arrow-right"></i></a> | |
| </div> | |
| </article> | |
| <!-- Card 2 --> | |
| <article class="card"> | |
| <div class="card-thumb"> | |
| <img src="https://picsum.photos/seed/brakes/400/250" alt="Vidéo Freins"> | |
| <div class="play-icon"><i class="fa-solid fa-play"></i></div> | |
| </div> | |
| <div class="card-content"> | |
| <h3>Changer ses plaquettes de frein</h3> | |
| <p>Le guide complet pour changer les plaquettes avant en toute sécurité.</p> | |
| <a href="#" class="card-link">Regarder le tutoriel <i class="fa-solid fa-arrow-right"></i></a> | |
| </div> | |
| </article> | |
| <!-- Card 3 --> | |
| <article class="card"> | |
| <div class="card-thumb"> | |
| <img src="https://picsum.photos/seed/spark/400/250" alt="Vidéo Bougies"> | |
| <div class="play-icon"><i class="fa-solid fa-play"></i></div> | |
| </div> | |
| <div class="card-content"> | |
| <h3>Remplacement des bougies</h3> | |
| <p>Optimisez votre combustion et accélérez en changeant vos bougies.</p> | |
| <a href="#" class="card-link">Regarder le tutoriel <i class="fa-solid fa-arrow-right"></i></a> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2023 AutoMaster. Tous droits réservés. Conçu pour les passionnés.</p> | |
| </footer> | |
| <!-- JavaScript Logic --> | |
| <script> | |
| // Base de données des pièces (Simulation Backend) | |
| const partsData = { | |
| engine: { | |
| name: "Moteur Thermique", | |
| category: "Groupe Moto-propulseur", | |
| icon: "fa-solid fa-engine-warning", // Note: fa-engine-warning might not exist in all packs, using fa-car-battery as fallback or generic | |
| iconClass: "fa-solid fa-gear", | |
| description: "Le moteur est le cœur de la voiture. Il transforme l'énergie chimique du carburant en énergie mécanique. Il est composé de pistons, de bielles et d'un vilebrequin.", | |
| tools: ["Clé à bougie", "Clé dynamométrique", "Jeu de joints"], | |
| steps: [ | |
| "Débrancher la batterie pour éviter tout court-circuit.", | |
| "Retirer les câbles d'allumage et le couvre-culasse.", | |
| "Dévisser les bougies d'allumage avec une clé adaptée.", | |
| "Vérifier l'écartement des électrodes des nouvelles bougies.", | |
| "Visser les nouvelles bougies à la main puis serrer au couple prescrit.", | |
| "Rebrancher les câbles et la batterie, puis démarrer le moteur." | |
| ] | |
| }, | |
| wheels: { | |
| name: "Système de Freinage", | |
| category: "Châssis & Sécurité", | |
| iconClass: "fa-solid fa-compact-disc", | |
| description: "Le système de freinage permet de ralentir ou d'arrêter le véhicule. Il est composé de disques, d'étriers et de plaquettes qui frottent contre le disque.", | |
| tools: ["Cric", "Béquilles", "Clé à pipe", "Pince à déplier"], | |
| steps: [ | |
| "Desserrer les écrous de roue alors que la voiture est au sol.", | |
| "Lever la voiture à l'aide du cric et la sécuriser avec des béquilles.", | |
| "Retirer la roue.", | |
| "Retirer les deux goupilles de l'étrier de frein.", | |
| "Sortir l'ancienne plaquette et pousser le piston vers l'arrière avec la pince.", | |
| "Insérer les nouvelles plaquettes et remonter l'étrier.", | |
| "Remonter la roue et serrer les écrous en étoile." | |
| ] | |
| }, | |
| exhaust: { | |
| name: "Ligne d'échappement", | |
| category: "Évacuation des gaz", | |
| iconClass: "fa-solid fa-wind", | |
| description: "La ligne d'échappement évacue les gaz brûlés du moteur vers l'extérieur. Elle comprend le collecteur, le catalyseur et le silencieux.", | |
| tools: ["Lubrifiant dégrippant", "Clé à molette", "Support de ligne"], | |
| steps: [ | |
| "Pulvériser du dégrippant sur les vis du collecteur 24h avant.", | |
| "Lever la voiture et accéder à la ligne d'échappement.", | |
| "Démonter les colliers de fixation et les joints.", | |
| "Retirer l'ancien pot ou le silencieux défectueux.", | |
| "Positionner la nouvelle pièce avec des joints neufs.", | |
| "Serrer les colliers et vérifier les fixations." | |
| ] | |
| }, | |
| battery: { | |
| name: "Batterie 12V", | |
| category: "Électrique", | |
| iconClass: "fa-solid fa-car-battery", | |
| description: "La batterie fournit l'énergie électrique nécessaire au démarrage et à l'alimentation des accessoires (lumières, radio) lorsque le moteur est éteint.", | |
| tools: ["Clé de 10", "Brosse à batterie", "Gants de protection"], | |
| steps: [ | |
| "Identifier la borne positive (+) rouge et négative (-) noire.", | |
| "Toujours débrancher la borne négative en premier pour éviter l'étincelle.", | |
| "Retirer les câbles et nettoyer les bornes avec la brosse.", | |
| "Placer la nouvelle batterie dans le logement.", | |
| "Rebrancher la borne positive (+) en premier.", | |
| "Rebrancher la borne négative (-) en dernier." | |
| ] | |
| }, | |
| transmission: { | |
| name: "Boîte de Vitesses", | |
| category: "Transmission", | |
| iconClass: "fa-solid fa-gears", | |
| description: "La boîte de vitesses adapte le couple moteur et la vitesse de rotation aux roues. Elle permet de reculer et de changer le rapport de démultiplication.", | |
| tools: ["Jauge de niveau", "Clé Allen", "Bac de récupération"], | |
| steps: [ | |
| "Localiser le bouchon de remplissage et de vidange sur le carter.", | |
| "Vidanger l'ancienne huile en dévissant le bouchon du bas.", | |
| "Revisser le bouchon de vidange avec un joint neuf.", | |
| "Remplir par le haut avec la nouvelle huile de transmission.", | |
| "Contrôler le niveau avec la jauge jusqu'au débordement.", | |
| "Revisser le bouchon de remplissage proprement." | |
| ] | |
| } | |
| }; | |
| // DOM Elements | |
| const hotspots = document.querySelectorAll('.hotspot'); | |
| const emptyState = document.getElementById('empty-state'); | |
| const contentContainer = document.getElementById('part-content-container'); | |
| const template = document.getElementById('details-template'); | |
| // Fonction d'affichage des détails | |
| function showPartDetails(partId) { | |
| const data = partsData[partId]; | |
| if (!data) return; | |
| // Masquer l'état vide | |
| emptyState.style.display = 'none'; | |
| // Nettoyer le conteneur | |
| contentContainer.innerHTML = ''; | |
| // Cloner le template | |
| const clone = template.content.cloneNode(true); | |
| // Remplir les données | |
| clone.querySelector('.part-name').textContent = data.name; | |
| clone.querySelector('.part-category').textContent = data.category; | |
| clone.querySelector('.part-description').textContent = data.description; | |
| clone.querySelector('.icon-class').className = `${data.iconClass}`; | |
| // Remplir les outils | |
| const toolsContainer = clone.querySelector('.tools-list'); | |
| data.tools.forEach(tool => { | |
| const span = document.createElement('span'); | |
| span.className = 'tool-tag'; | |
| span.innerHTML = `<i class="fa-solid fa-check"></i> ${tool}`; | |
| toolsContainer.appendChild(span); | |
| }); | |
| // Remplir les étapes | |
| const stepsContainer = clone.querySelector('.tutorial-steps'); | |
| data.steps.forEach(step => { | |
| const p = document.createElement('p'); | |
| p.className = 'step-item'; | |
| p.textContent = step; | |
| stepsContainer.appendChild(p); | |
| }); | |
| // Ajouter l'animation et l'afficher | |
| const newContent = clone.querySelector('.part-content'); | |
| newContent.classList.add('active'); | |
| contentContainer.appendChild(newContent); | |
| // Gérer l'état actif des points | |
| hotspots.forEach(h => h.classList.remove('active')); | |
| document.querySelector(`.hotspot[data-part="${partId}"]`).classList.add('active'); | |
| } | |
| // Event Listeners pour les hotspots | |
| hotspots.forEach(spot => { | |
| spot.addEventListener('click', () => { | |
| const partId = spot.getAttribute('data-part'); | |
| showPartDetails(partId); | |
| }); | |
| }); | |
| // Interaction optionnelle : Scroll automatique vers les détails sur mobile | |
| if (window.innerWidth < 900) { | |
| hotspots.forEach(spot => { | |
| spot.addEventListener('click', () => { | |
| document.querySelector('.details-panel').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |