Spaces:

Adam77
/

smatphone

Running

App Files Files Community

Adam77 commited on Jul 18

Commit

82935cf

verified ·

1 Parent(s): bca803a

Cahier des Charges Fonctionnel : "Chaîne de Production des Smartphones" Plateforme : DeepSite V2 Objectif : Page web interactive unique (one-page) illustrant le cycle complet de production d'un smartphone Modules Fonctionnels 1. Module d'Introduction Immersive text module: hero_section components: - type: 3d_model_viewer model: "smartphone_assembly.glb" interactions: - rotation: auto-rotate - zoom: true - material_highlight: true - type: text_overlay content: "Votre smartphone a parcouru 200 000 km avant d'arriver dans votre poche" animation: fade_in - type: scroll_cta text: "Explorer la chaîne" icon: arrow_down 2. Module Cartographique Dynamique text module: world_map data_source: "minerals_sources.csv" features: - layer: mining_sites style: icon: mine_icon.svg color: "#FF5722" popup_content: - "Pays: {{country}}" - "Minerai: {{mineral}}" - "Production: {{output}} tonnes/an" - layer: supply_paths type: animated_flow data: "supply_paths.geojson" parameters: speed: "0.5" color: "#2196F3" - control_panel: filters: - material_type - year basemap_selector: true 3. Module Chronologie Interactive text module: production_timeline layout: horizontal_scroller stages: - id: extraction title: Extraction minière visuals: - type: video_background source: "mining_process.mp4" loop: true - type: data_badge metric: "34 kg" label: Minerais extraits - id: refining title: Raffinage visuals: - type: process_diagram svg: "metal_refining.svg" hotspots: - id: furnace info: "Four à 1500°C" - id: chemical_bath info: "Traitement chimique" # [...] (5 étapes totales) interactions: - scroll_triggered_animation - stage_selector_menu 4. Module Data Visualisation text module: impact_dashboard layout: responsive_grid(2x2) widgets: - type: radial_gauge title: "Empreinte carbone" value: 85 unit: "kg CO2e" comparison: 55 comparison_label: "Moyenne secteur" - type: bar_chart title: "Consommation d'eau" data: "water_usage.csv" categories: ["Extraction", "Production", "Utilisation"] - type: material_breakdown title: "Composition matériaux" items: - material: Aluminium percentage: 24% - material: Cuivre percentage: 11% - type: live_counter title: "Déchets électroniques" source: "global_ewaste_api" update_interval: 10 5. Module Immersion 360° text module: factory_tour type: 360_video source: "assembly_line_360.mp4" hotspots: - position: [23.5, 15] content: type: worker_testimony text: "Nous assemblons 800 appareils par équipe" avatar: "factory_worker.jpg" - position: [45, 80] content: type: equipment_info title: "Machine SMT" description: "Place 1200 composants/heure" Spécifications Techniques DeepSite V2 text project: name: smartphone-supply-chain framework: react plugins: - three-js - d3-vis - leaflet-maps performance: lazy_loading: true image_optimization: format: webp max_size: 1920 integrations: - api: "https://ewaste.global/stats-api" endpoint: "/live-counter" - dataset: "minerals_sources.csv" format: "csv" accessibility: features: - color_contrast_toggle - text_scaler - keyboard_navigation Workflow DeepSite V2 Initialisation du projet : bash deepsite new --template supply-chain --name smartphone-journey Import des données : text # config/data_sources.yaml - name: mining_data type: csv path: data/minerals.csv fields: - name: country - name: mineral - name: output Génération des modules : bash deepsite generate module --name world_map --template animated_flow_map deepsite generate module --name impact_dashboard --layout grid_2x2 Personnalisation : text # styles/theme_config.yaml colors: primary: "#2F4858" secondary: "#33658A" accent: "#F26419" typography: headings: "Rajdhani, Bold" body: "Open Sans, Regular" Livrables Attendus Code source structuré : Composants React réutilisables Styles modulaires (CSS-in-JS) Hooks personnalisés pour interactions Assets optimisés : Modèles 3D compressés (.glb) Vidéos 360° encodées H.265 SVG animés pour illustrations Tableau de bord d'optimisation : text | Métrique | Cible | |--------------------|-------------| | Performance | > 90/100 | | Accessibilité | > 95/100 | | Taille totale | < 3 MB | | Temps d'interaction| < 2s | Workflow de Validation Étape Outil Critère de succès Intégration données DeepSite CLI 100% des sources connectées Responsive design Device Lab Compatibilité 98% appareils Performance Lighthouse Score ≥ 90/100 Accessibilité Axe DevTools 0 erreurs WCAG 2.1 AA Chargement média SpeedTracker LCP < 1.5s - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +539 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Smatphone
-emoji: 👁
-colorFrom: yellow
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: smatphone
+emoji: 🐳
+colorFrom: pink
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,539 @@
-<!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>Chaîne de Production des Smartphones</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Open Sans', sans-serif;
+            scroll-behavior: smooth;
+        }
+        h1, h2, h3 {
+            font-family: 'Rajdhani', sans-serif;
+        }
+        .hero-section {
+            background: linear-gradient(135deg, #2F4858 0%, #33658A 100%);
+        }
+        .map-container {
+            height: 600px;
+            background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=2&size=800x600&maptype=roadmap&style=feature:all|element:labels|visibility:off&key=YOUR_API_KEY');
+            background-size: cover;
+            background-position: center;
+        }
+        .timeline-stage {
+            min-width: 300px;
+            scroll-snap-align: start;
+        }
+        .timeline-container {
+            scroll-snap-type: x mandatory;
+        }
+        .gauge {
+            --percentage: 0;
+            --fill: #F26419;
+        }
+        .gauge::before {
+            content: "";
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            background: conic-gradient(var(--fill) calc(var(--percentage) * 1%), #ddd 0);
+            border-radius: 50%;
+            mask: radial-gradient(transparent 50%, #000 51%);
+        }
+        .video-container {
+            perspective: 1000px;
+        }
+        .video-container video {
+            transform: rotateY(-15deg);
+            box-shadow: 0 20px 30px rgba(0,0,0,0.3);
+        }
+        @media (max-width: 768px) {
+            .map-container {
+                height: 400px;
+            }
+            .dashboard-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800">
+    <!-- Hero Section -->
+    <section class="hero-section min-h-screen flex flex-col justify-center items-center text-white relative overflow-hidden">
+        <div class="absolute inset-0 bg-black/30 z-10"></div>
+        <div class="container mx-auto px-6 z-20 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in">Votre smartphone a parcouru 200 000 km avant d'arriver dans votre poche</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Découvrez le voyage extraordinaire des matériaux et composants qui composent votre appareil</p>
+            <!-- 3D Model Placeholder -->
+            <div class="w-full h-96 bg-gray-800/50 rounded-xl mb-12 flex items-center justify-center">
+                <div class="text-center">
+                    <svg class="w-20 h-20 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                    </svg>
+                    <p class="text-gray-300">Modèle 3D interactif du smartphone</p>
+                </div>
+            </div>
+            <button id="scrollDown" class="bg-[#F26419] hover:bg-[#e05c17] text-white font-bold py-3 px-6 rounded-full flex items-center mx-auto transition-all duration-300 transform hover:scale-105">
+                Explorer la chaîne
+                <svg class="w-5 h-5 ml-2 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+                </svg>
+            </button>
+        </div>
+    </section>
+    <!-- World Map Module -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-[#2F4858]">Origine des Matériaux</h2>
+            <div class="map-container rounded-xl shadow-xl relative overflow-hidden mb-8">
+                <!-- Map will be rendered here -->
+                <div class="absolute inset-0 flex items-center justify-center bg-black/20">
+                    <p class="text-white text-lg bg-black/50 p-4 rounded-lg">Carte interactive des sources de minéraux</p>
+                </div>
+                <!-- Control Panel -->
+                <div class="absolute bottom-4 left-4 bg-white p-4 rounded-lg shadow-lg z-10">
+                    <h3 class="font-bold mb-2">Filtres</h3>
+                    <div class="space-y-2">
+                        <div>
+                            <label class="block text-sm font-medium">Type de matériau</label>
+                            <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#33658A] focus:ring-[#33658A]">
+                                <option>Tous</option>
+                                <option>Cuivre</option>
+                                <option>Or</option>
+                                <option>Lithium</option>
+                                <option>Terre rare</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium">Année</label>
+                            <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#33658A] focus:ring-[#33658A]">
+                                <option>2023</option>
+                                <option>2022</option>
+                                <option>2021</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-gray-50 p-6 rounded-lg">
+                    <h3 class="font-bold text-lg mb-2 flex items-center">
+                        <span class="w-4 h-4 rounded-full bg-[#FF5722] mr-2"></span>
+                        Sites miniers
+                    </h3>
+                    <p class="text-gray-600">Plus de 120 mines à travers le monde fournissent les matériaux essentiels pour la production de smartphones.</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-lg">
+                    <h3 class="font-bold text-lg mb-2 flex items-center">
+                        <span class="w-4 h-4 rounded-full bg-[#2196F3] mr-2"></span>
+                        Chaîne d'approvisionnement
+                    </h3>
+                    <p class="text-gray-600">Un réseau complexe de transport maritime et aérien relie les mines aux usines de production.</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-lg">
+                    <h3 class="font-bold text-lg mb-2">Concentration géographique</h3>
+                    <p class="text-gray-600">80% des terres rares proviennent d'une seule région, créant des défis géopolitiques et logistiques.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Timeline Module -->
+    <section class="py-20 bg-gray-100">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-[#2F4858]">Processus de Production</h2>
+            <div class="mb-8 flex justify-center">
+                <div class="inline-flex rounded-md shadow-sm">
+                    <button data-stage="extraction" class="stage-btn px-4 py-2 text-sm font-medium rounded-l-lg bg-[#F26419] text-white">
+                        Extraction
+                    </button>
+                    <button data-stage="refining" class="stage-btn px-4 py-2 text-sm font-medium bg-gray-200 text-gray-800 hover:bg-gray-300">
+                        Raffinage
+                    </button>
+                    <button data-stage="components" class="stage-btn px-4 py-2 text-sm font-medium bg-gray-200 text-gray-800 hover:bg-gray-300">
+                        Composants
+                    </button>
+                    <button data-stage="assembly" class="stage-btn px-4 py-2 text-sm font-medium bg-gray-200 text-gray-800 hover:bg-gray-300">
+                        Assemblage
+                    </button>
+                    <button data-stage="distribution" class="stage-btn px-4 py-2 text-sm font-medium rounded-r-lg bg-gray-200 text-gray-800 hover:bg-gray-300">
+                        Distribution
+                    </button>
+                </div>
+            </div>
+            <div class="timeline-container flex overflow-x-auto pb-6 mb-8 scroll-smooth" style="scrollbar-width: none;">
+                <div class="timeline-stage flex-none mx-4 bg-white rounded-xl shadow-md overflow-hidden w-4/5 md:w-1/3">
+                    <div class="video-container h-48 bg-gray-800 relative">
+                        <div class="absolute inset-0 flex items-center justify-center text-white">
+                            <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-[#2F4858]">Extraction minière</h3>
+                        <p class="text-gray-600 mb-4">Les matières premières sont extraites de mines à ciel ouvert ou souterraines à travers le monde.</p>
+                        <div class="bg-gray-50 p-3 rounded-lg inline-flex items-center">
+                            <span class="font-bold text-[#F26419] mr-2">34 kg</span>
+                            <span class="text-sm">Minerais extraits par appareil</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="timeline-stage flex-none mx-4 bg-white rounded-xl shadow-md overflow-hidden w-4/5 md:w-1/3">
+                    <div class="h-48 bg-gray-800 relative flex items-center justify-center">
+                        <svg class="w-32 h-32 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-[#2F4858]">Raffinage</h3>
+                        <p class="text-gray-600 mb-4">Les minerais sont purifiés dans des usines spécialisées utilisant des procédés chimiques et thermiques.</p>
+                        <div class="space-y-2">
+                            <div class="flex items-center">
+                                <div class="w-2 h-2 rounded-full bg-[#F26419] mr-2"></div>
+                                <span class="text-sm">Four à 1500°C</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-2 h-2 rounded-full bg-[#F26419] mr-2"></div>
+                                <span class="text-sm">Traitement chimique</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="timeline-stage flex-none mx-4 bg-white rounded-xl shadow-md overflow-hidden w-4/5 md:w-1/3">
+                    <div class="h-48 bg-gray-800 relative flex items-center justify-center">
+                        <svg class="w-32 h-32 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-[#2F4858]">Fabrication des composants</h3>
+                        <p class="text-gray-600 mb-4">Les matériaux raffinés sont transformés en composants électroniques et mécaniques.</p>
+                        <div class="bg-gray-50 p-3 rounded-lg inline-flex items-center">
+                            <span class="font-bold text-[#F26419] mr-2">120+</span>
+                            <span class="text-sm">Composants par smartphone</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="timeline-stage flex-none mx-4 bg-white rounded-xl shadow-md overflow-hidden w-4/5 md:w-1/3">
+                    <div class="h-48 bg-gray-800 relative flex items-center justify-center">
+                        <svg class="w-32 h-32 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-[#2F4858]">Assemblage</h3>
+                        <p class="text-gray-600 mb-4">Les composants sont assemblés dans des usines hautement automatisées avec contrôle qualité.</p>
+                        <div class="bg-gray-50 p-3 rounded-lg inline-flex items-center">
+                            <span class="font-bold text-[#F26419] mr-2">800</span>
+                            <span class="text-sm">Appareils assemblés par équipe</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="timeline-stage flex-none mx-4 bg-white rounded-xl shadow-md overflow-hidden w-4/5 md:w-1/3">
+                    <div class="h-48 bg-gray-800 relative flex items-center justify-center">
+                        <svg class="w-32 h-32 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-[#2F4858]">Distribution</h3>
+                        <p class="text-gray-600 mb-4">Les appareils finis sont expédiés vers les centres de distribution mondiaux.</p>
+                        <div class="bg-gray-50 p-3 rounded-lg inline-flex items-center">
+                            <span class="font-bold text-[#F26419] mr-2">200,000 km</span>
+                            <span class="text-sm">Distance moyenne parcourue</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center">
+                <p class="text-gray-600 max-w-2xl mx-auto">Chaque étape du processus implique des centaines de travailleurs, des machines spécialisées et un contrôle qualité rigoureux pour garantir la fiabilité de votre appareil.</p>
+            </div>
+        </div>
+    </section>
+    <!-- Data Visualization Module -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-[#2F4858]">Impact Environnemental</h2>
+            <div class="dashboard-grid grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+                <!-- Carbon Footprint Gauge -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
+                    <h3 class="text-xl font-bold mb-4 text-[#2F4858]">Empreinte carbone</h3>
+                    <div class="flex flex-col md:flex-row items-center">
+                        <div class="gauge relative w-40 h-40 mb-4 md:mb-0 md:mr-6" style="--percentage: 85; --fill: #F26419;">
+                            <div class="absolute inset-0 flex flex-col items-center justify-center">
+                                <span class="text-3xl font-bold">85</span>
+                                <span class="text-sm">kg CO2e</span>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="text-gray-600 mb-2">Pour un smartphone moyen sur son cycle de vie complet</p>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 rounded-full bg-gray-300 mr-2"></div>
+                                <span class="text-sm">Moyenne secteur: 55 kg CO2e</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Water Usage Chart -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
+                    <h3 class="text-xl font-bold mb-4 text-[#2F4858]">Consommation d'eau</h3>
+                    <div class="h-48 flex items-center justify-center bg-white rounded-lg">
+                        <div class="text-center w-full">
+                            <div class="flex justify-between px-8 mb-2">
+                                <span class="text-xs">Extraction</span>
+                                <span class="text-xs">Production</span>
+                                <span class="text-xs">Utilisation</span>
+                            </div>
+                            <div class="flex h-32 items-end px-8 space-x-4">
+                                <div class="w-1/3 bg-[#33658A] rounded-t" style="height: 80%;"></div>
+                                <div class="w-1/3 bg-[#33658A] rounded-t" style="height: 50%;"></div>
+                                <div class="w-1/3 bg-[#33658A] rounded-t" style="height: 20%;"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Material Breakdown -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
+                    <h3 class="text-xl font-bold mb-4 text-[#2F4858]">Composition matériaux</h3>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 rounded-full bg-[#2F4858] mr-2"></div>
+                            <span class="text-sm">Aluminium: 24%</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 rounded-full bg-[#33658A] mr-2"></div>
+                            <span class="text-sm">Cuivre: 11%</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 rounded-full bg-[#F26419] mr-2"></div>
+                            <span class="text-sm">Plastique: 22%</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 rounded-full bg-[#86BBD8] mr-2"></div>
+                            <span class="text-sm">Verre: 17%</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 rounded-full bg-[#758E4F] mr-2"></div>
+                            <span class="text-sm">Lithium: 3%</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 rounded-full bg-[#6D597A] mr-2"></div>
+                            <span class="text-sm">Autres: 23%</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- E-Waste Counter -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
+                    <h3 class="text-xl font-bold mb-4 text-[#2F4858]">Déchets électroniques</h3>
+                    <div class="flex flex-col items-center justify-center h-full">
+                        <div class="text-4xl font-bold text-[#F26419] mb-2" id="ewasteCounter">53,624,189</div>
+                        <p class="text-gray-600 text-center">tonnes de déchets électroniques générés cette année</p>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center max-w-3xl mx-auto">
+                <p class="text-gray-600 mb-6">L'industrie électronique représente 70% des déchets toxiques dans les décharges, bien que ne constituant que 2% du volume total des déchets.</p>
+                <button class="bg-[#2F4858] hover:bg-[#1a2f3b] text-white font-bold py-3 px-6 rounded-full transition-all duration-300">
+                    En savoir plus sur le recyclage
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- 360° Factory Tour -->
+    <section class="py-20 bg-gray-900 text-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Visite Virtuelle de l'Usine</h2>
+            <div class="relative rounded-xl overflow-hidden mb-8 h-96 bg-gray-800 flex items-center justify-center">
+                <div class="text-center">
+                    <svg class="w-20 h-20 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                    </svg>
+                    <p class="text-gray-400">Expérience 360° interactive de la ligne d'assemblage</p>
+                </div>
+                <!-- Hotspot 1 -->
+                <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2">
+                    <div class="w-8 h-8 rounded-full bg-[#F26419] flex items-center justify-center cursor-pointer hover:scale-110 transition-transform">
+                        <span class="text-white font-bold">1</span>
+                    </div>
+                </div>
+                <!-- Hotspot 2 -->
+                <div class="absolute top-3/4 right-1/4 transform translate-x-1/2 -translate-y-1/2">
+                    <div class="w-8 h-8 rounded-full bg-[#F26419] flex items-center justify-center cursor-pointer hover:scale-110 transition-transform">
+                        <span class="text-white font-bold">2</span>
+                    </div>
+                </div>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="bg-gray-800/50 p-6 rounded-lg">
+                    <h3 class="text-xl font-bold mb-4 flex items-center">
+                        <span class="w-6 h-6 rounded-full bg-[#F26419] flex items-center justify-center text-white mr-3">1</span>
+                        Témoignage d'ouvrier
+                    </h3>
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0 mr-4">
+                            <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center">
+                                <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="text-gray-300">"Nous assemblons 800 appareils par équipe, avec une précision de 99,9%. Chaque smartphone est testé individuellement avant l'expédition."</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-800/50 p-6 rounded-lg">
+                    <h3 class="text-xl font-bold mb-4 flex items-center">
+                        <span class="w-6 h-6 rounded-full bg-[#F26419] flex items-center justify-center text-white mr-3">2</span>
+                        Machine SMT
+                    </h3>
+                    <p class="text-gray-300">Cette machine de placement en surface (SMT) peut placer jusqu'à 1200 composants électroniques par heure avec une précision de 20 microns.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-[#2F4858] text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <h3 class="text-2xl font-bold mb-2">Chaîne de Production des Smartphones</h3>
+                    <p class="text-gray-300">Une visualisation interactive du cycle de vie complet</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="w-10 h-10 rounded-full bg-[#33658A] flex items-center justify-center hover:bg-[#F26419] transition-colors">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/>
+                        </svg>
+                    </a>
+                    <a href="#" class="w-10 h-10 rounded-full bg-[#33658A] flex items-center justify-center hover:bg-[#F26419] transition-colors">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
+                        </svg>
+                    </a>
+                    <a href="#" class="w-10 h-10 rounded-full bg-[#33658A] flex items-center justify-center hover:bg-[#F26419] transition-colors">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between">
+                <div class="mb-4 md:mb-0">
+                    <p class="text-gray-300">© 2023 Chaîne de Production des Smartphones. Tous droits réservés.</p>
+                </div>
+                <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6">
+                    <a href="#" class="text-gray-300 hover:text-white">Politique de confidentialité</a>
+                    <a href="#" class="text-gray-300 hover:text-white">Conditions d'utilisation</a>
+                    <a href="#" class="text-gray-300 hover:text-white">Accessibilité</a>
+                    <a href="#" class="text-gray-300 hover:text-white">Contact</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Smooth scrolling
+        document.getElementById('scrollDown').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector('section:nth-of-type(2)').scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+        // Timeline stage selector
+        const stageButtons = document.querySelectorAll('.stage-btn');
+        stageButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                // Remove active class from all buttons
+                stageButtons.forEach(btn => {
+                    btn.classList.remove('bg-[#F26419]', 'text-white');
+                    btn.classList.add('bg-gray-200', 'text-gray-800', 'hover:bg-gray-300');
+                });
+                // Add active class to clicked button
+                this.classList.remove('bg-gray-200', 'text-gray-800', 'hover:bg-gray-300');
+                this.classList.add('bg-[#F26419]', 'text-white');
+                // Scroll to corresponding stage (simplified for this demo)
+                const stage = this.dataset.stage;
+                // In a real implementation, you would scroll to the corresponding timeline item
+            });
+        });
+        // E-waste counter animation
+        function animateCounter() {
+            const counter = document.getElementById('ewasteCounter');
+            const target = 53624189;
+            const duration = 2000;
+            const start = target - 100000;
+            const increment = (target - start) / (duration / 16);
+            let current = start;
+            const timer = setInterval(() => {
+                current += increment;
+                if (current >= target) {
+                    clearInterval(timer);
+                    current = target;
+                }
+                counter.textContent = Math.floor(current).toLocaleString();
+            }, 16);
+        }
+        // Intersection Observer for animations
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    if (entry.target.id === 'ewasteCounter') {
+                        animateCounter();
+                    }
+                    entry.target.classList.add('animate-fade-in');
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.1 });
+        // Observe elements that should animate when scrolled into view
+        document.querySelectorAll('.animate-fade-in').forEach(el => {
+            observer.observe(el);
+        });
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set first timeline button as active
+            stageButtons[0].classList.add('bg-[#F26419]', 'text-white');
+            stageButtons[0].classList.remove('bg-gray-200', 'text-gray-800', 'hover:bg-gray-300');
+        });
+    </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=Adam77/smatphone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>