Spaces:

Mousco
/

anycoder-00b39016

Running

App Files Files Community

Mousco commited on about 1 month ago

Commit

42c3ca2

verified ·

1 Parent(s): def7567

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +831 -19

index.html CHANGED Viewed

@@ -1,19 +1,831 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>&copy; 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>