Ctrl+K
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
82935cf
verified