Download index.html from Abmacode12/espace-codage-builder-pattern: direct link, hf CLI and curl.
- Browser
- Download file 40.4 kB
-
https://huggingface.co/spaces/Abmacode12/espace-codage-builder-pattern/resolve/main/index.html
- Command line
-
hf download hf://spaces/Abmacode12/espace-codage-builder-pattern/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Abmacode12/espace-codage-builder-pattern/resolve/main/index.html
40.4 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Espace Codage - IA Interactive</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <aside class="sidebar"> | |
| <h2>Espace Codage</h2> | |
| <ul> | |
| <li><a href="#">Accueil</a></li> | |
| <li><a href="#">Projets</a></li> | |
| <li><a href="#">Tâches</a></li> | |
| </ul> | |
| </aside> | |
| <main class="main-content"> | |
| <h1>Mes Tâches</h1> | |
| <p>Gérez les tâches de développement ici.</p> | |
| <ul> | |
| <li>Configurer IA</li> | |
| <li>Créer interface</li> | |
| <li>Générer vidéo depuis code</li> | |
| </ul> | |
| </main> | |
| <section class="ia-panel"> | |
| <h3>IA Génératrice (Rosalinda)</h3> | |
| <div class="ia-output" id="output"> | |
| <p>L’aperçu apparaîtra ici...</p> | |
| </div> | |
| <textarea id="codeInput" placeholder="Écris ton code ici..."></textarea> | |
| <button onclick="sendCode()">Envoyer à l’IA</button> | |
| </section> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Espace Codage – Modèle Constructeur (Builder Pattern)</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <!-- Tailwind CSS CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| DEFAULT: '#4f46e5', // indigo-600 | |
| fg: '#ffffff', | |
| soft: 'rgba(79,70,229,0.2)', | |
| }, | |
| secondary: { | |
| DEFAULT: '#64748b', // slate-500 | |
| fg: '#ffffff', | |
| soft: 'rgba(100,116,139,0.2)', | |
| }, | |
| accent: { | |
| DEFAULT: '#22d3ee', // cyan-400 | |
| soft: 'rgba(34,211,238,0.2)', | |
| }, | |
| success: '#22c55e', | |
| danger: '#ef4444', | |
| warning: '#f59e0b', | |
| surface: { | |
| DEFAULT: '#0b1020', | |
| soft: '#0f172a', | |
| }, | |
| card: { | |
| DEFAULT: '#0f172a', | |
| soft: '#111827', | |
| }, | |
| code: '#0b132b', | |
| grid: 'rgba(255,255,255,0.06)', | |
| border: 'rgba(255,255,255,0.12)', | |
| }, | |
| boxShadow: { | |
| soft: '0 18px 45px rgba(0,0,0,0.6)', | |
| }, | |
| borderRadius: { | |
| xl: '1rem', | |
| '2xl': '1.25rem', | |
| }, | |
| fontFamily: { | |
| mono: ['JetBrains Mono','ui-monospace','SFMono-Regular','Menlo','Monaco','Consolas','Liberation Mono','Courier New','monospace'], | |
| display: ['Inter','ui-sans-serif','system-ui','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto','Helvetica Neue','Arial','Noto Sans','sans-serif','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'], | |
| }, | |
| }, | |
| }, | |
| darkMode: 'class', | |
| } | |
| </script> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { color-scheme: dark; } | |
| body { background-color: #050714; } | |
| /* subtle grid background */ | |
| .grid-bg { | |
| background-image: | |
| linear-gradient(to bottom, var(--tw-colors-grid) 1px, transparent 1px), | |
| linear-gradient(to right, var(--tw-colors-grid) 1px, transparent 1px); | |
| background-size: 40px 40px, 40px 40px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-surface text-slate-100 font-display antialiased selection:bg-primary/30 selection:text-white"> | |
| <main class="max-w-7xl mx-auto px-5 py-8 md:px-8 md:py-10"> | |
| <!-- Header --> | |
| <header class="relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-card to-surface shadow-soft p-5 md:p-7" data-animate="1"> | |
| <div class="absolute inset-0 pointer-events-none opacity-30"> | |
| <div class="absolute -top-24 -left-20 w-72 h-72 rounded-full bg-primary/20 blur-3xl"></div> | |
| <div class="absolute -bottom-24 -right-20 w-72 h-72 rounded-full bg-accent/20 blur-3xl"></div> | |
| </div> | |
| <div class="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent animate-spin-slow"></div> | |
| <div> | |
| <div class="text-xs uppercase tracking-[0.2em] text-slate-400">Espace Codage</div> | |
| <h1 class="text-xl md:text-2xl font-bold tracking-wide">Modèle Constructeur · Builder Pattern</h1> | |
| </div> | |
| </div> | |
| <p class="text-sm text-slate-400 max-w-2xl"> | |
| Visualisation de l'espace de codage et implémentation du pattern | |
| <span class="text-white font-semibold">Builder</span> pour créer un | |
| <span class="text-white font-semibold">ProjetEspaceCodage</span> étape par étape. | |
| </p> | |
| </div> | |
| </header> | |
| <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Diagramme Espace Codage --> | |
| <section class="relative rounded-2xl border border-border bg-gradient-to-br from-card to-surface shadow-soft p-5" data-animate="2" aria-label="Schéma Espace Codage"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div> | |
| <h2 class="text-sm uppercase tracking-[0.2em] text-accent">Espace Codage</h2> | |
| <p class="text-xs text-slate-400">Vue conceptuelle des outils : éditeur, terminal, build, tests, déploiement…</p> | |
| </div> | |
| <span class="text-[10px] uppercase tracking-[0.25em] text-slate-500">SCHEMA</span> | |
| </div> | |
| <div class="relative grid-bg rounded-xl border border-border p-4 md:p-5 min-h-[420px]"> | |
| <!-- Overlay SVG pour les flèches --> | |
| <svg class="absolute inset-0 w-full h-full pointer-events-none" id="arrowLayer" style="z-index: 0;"></svg> | |
| <div class="relative grid grid-rows-[auto,1fr,auto] gap-4 h-full" id="schemaRoot" style="z-index: 1;"> | |
| <!-- Ligne du haut : Documentation --> | |
| <div class="flex justify-center"> | |
| <button class="node-btn" data-id="documentation" data-name="Documentation" title="Documentation"> | |
| Documentation | |
| </button> | |
| </div> | |
| <!-- Ligne centrale --> | |
| <div class="grid grid-cols-3 gap-3 md:gap-4 items-center"> | |
| <!-- Version Control (gauche) --> | |
| <div class="flex justify-center"> | |
| <button class="node-btn" data-id="version" data-name="Version Control" title="Version Control"> | |
| Version Control | |
| </button> | |
| </div> | |
| <!-- Colonne centrale --> | |
| <div class="flex flex-col items-center gap-3"> | |
| <!-- Code Editor (centre principal) --> | |
| <button class="node-btn node-main" data-id="editor" data-name="Code Editor" title="Code Editor"> | |
| Code Editor | |
| </button> | |
| <!-- Terminal + Debugger --> | |
| <div class="flex gap-3"> | |
| <button class="node-btn" data-id="terminal" data-name="Terminal" title="Terminal"> | |
| Terminal | |
| </button> | |
| <button class="node-btn" data-id="debugger" data-name="Debugger" title="Debugger"> | |
| Debugger | |
| </button> | |
| </div> | |
| <!-- Testing Framework --> | |
| <button class="node-btn" data-id="testing" data-name="Testing Framework" title="Testing Framework"> | |
| Testing Framework | |
| </button> | |
| </div> | |
| <!-- Build System (droite) --> | |
| <div class="flex justify-center"> | |
| <button class="node-btn" data-id="build" data-name="Build System" title="Build System"> | |
| Build System | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Ligne du bas : Deployment --> | |
| <div class="flex justify-center"> | |
| <button class="node-btn" data-id="deploy" data-name="Deployment" title="Deployment"> | |
| Deployment | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-xs text-slate-400"> | |
| Cliquez sur un nœud pour voir une info rapide. Utilisez les boutons de démonstration ci-dessous pour simuler la construction. | |
| </div> | |
| </section> | |
| <!-- Code + Démonstration Builder --> | |
| <section class="rounded-2xl border border-border bg-gradient-to-br from-card to-surface shadow-soft p-5" data-animate="3" aria-label="Code Builder Pattern"> | |
| <div class="flex items-start justify-between gap-3"> | |
| <div> | |
| <h2 class="text-sm uppercase tracking-[0.2em] text-primary">Code · Builder Pattern</h2> | |
| <p class="text-xs text-slate-400"> | |
| Implémentation en <strong class="text-white">Python</strong> du pattern | |
| <strong class="text-white">Builder</strong> pour un <em>ProjetEspaceCodage</em> complexe. | |
| </p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="badge">Builder Pattern</span> | |
| <span class="badge">Objet complexe</span> | |
| <span class="badge">Python</span> | |
| <span class="badge">Espace Codage</span> | |
| </div> | |
| </div> | |
| <span class="text-[10px] uppercase tracking-[0.25em] text-slate-500">BUILDER</span> | |
| </div> | |
| <!-- Editeur simulé --> | |
| <div class="mt-4 rounded-xl border border-border bg-code shadow-soft overflow-hidden"> | |
| <div class="flex items-center justify-between px-3 py-2 border-b border-border bg-slate-900/50"> | |
| <div class="flex items-center gap-1.5"> | |
| <span class="w-2.5 h-2.5 rounded-full bg-danger"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-warning"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-success"></span> | |
| </div> | |
| <div class="flex items-center gap-2 text-[10px] uppercase tracking-[0.18em] text-slate-400"> | |
| espace_codage_builder.py · Python | |
| </div> | |
| <div></div> | |
| </div> | |
| <pre class="font-mono text-[11px] leading-5 p-3 md:p-4 overflow-auto max-h-[420px]"><code><span class="text-slate-400"># === ESPACE CODAGE · MODÈLE CONSTRUCTEUR (BUILDER) ===</span> | |
| <span class="text-slate-400"># Situation :</span> | |
| <span class="text-slate-400"># - on veut créer un "objet complexe" ProjetEspaceCodage</span> | |
| <span class="text-slate-400"># indépendamment de la manière dont chaque partie est construite.</span> | |
| <span class="text-slate-400"># - différents Builders produisent différentes représentations</span> | |
| <span class="text-slate-400"># (projet minimal, projet full‑stack, etc.).</span> | |
| <span class="text-primary">from</span> abc <span class="text-primary">import</span> ABC, abstractmethod | |
| <span class="text-primary">from</span> typing <span class="text-primary">import</span> List, Dict | |
| <span class="text-accent">class</span> <span class="text-white">ProjetEspaceCodage</span>: | |
| <span class="text-slate-400">"""Produit complexe : représente l'espace de codage complet."""</span> | |
| <span class="text-primary">def</span> <span class="text-accent">__init__</span>(<span class="text-white">self</span>, <span class="text-white">nom</span>: <span class="text-secondary">str</span> = <span class="text-warning">"Nouveau Projet"</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.nom = nom | |
| <span class="text-white">self</span>.composants: List[str] = [] | |
| <span class="text-white">self</span>.configurations: Dict[str, str] = {} | |
| <span class="text-white">self</span>.etapes: List[str] = [] | |
| <span class="text-primary">def</span> <span class="text-accent">ajouter_composant</span>(<span class="text-white">self</span>, <span class="text-white">description</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.composants.append(description) | |
| <span class="text-primary">def</span> <span class="text-accent">ajouter_configuration</span>(<span class="text-white">self</span>, <span class="text-white">cle</span>: <span class="text-secondary">str</span>, <span class="text-white">valeur</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.configurations[cle] = valeur | |
| <span class="text-primary">def</span> <span class="text-accent">ajouter_etape</span>(<span class="text-white">self</span>, <span class="text-white">etape</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.etapes.append(etape) | |
| <span class="text-primary">def</span> <span class="text-accent">decrire</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning">=== ESPACE CODAGE : {</span><span class="text-white">self</span>.nom<span class="text-warning">} ==="</span>) | |
| <span class="text-primary">print</span>(<span class="text-warning">"Composants :"</span>) | |
| <span class="text-primary">for</span> i, comp <span class="text-primary">in</span> <span class="text-primary">enumerate</span>(<span class="text-white">self</span>.composants, <span class="text-warning">1</span>): | |
| <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning"> {i}. {comp}"</span>) | |
| <span class="text-primary">if</span> <span class="text-white">self</span>.configurations: | |
| <span class="text-primary">print</span>(<span class="text-warning">"</span><span class="text-warning">Configurations :"</span>) | |
| <span class="text-primary">for</span> cle, val <span class="text-primary">in</span> <span class="text-white">self</span>.configurations.items(): | |
| <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning"> • {cle}: {val}"</span>) | |
| <span class="text-primary">if</span> <span class="text-white">self</span>.etapes: | |
| <span class="text-primary">print</span>(<span class="text-warning">"</span><span class="text-warning">Étapes de construction :"</span>) | |
| <span class="text-primary">for</span> etape <span class="text-primary">in</span> <span class="text-white">self</span>.etapes: | |
| <span class="text-primary">print</span>(<span class="text-warning">f"</span><span class="text-warning"> → {etape}"</span>) | |
| <span class="text-accent">class</span> <span class="text-white">ConstructeurEspaceCodage</span>(ABC): | |
| <span class="text-slate-400">"""Interface d'assemblage & construction."""</span> | |
| <span class="text-primary">def</span> <span class="text-accent">__init__</span>(<span class="text-white">self</span>, <span class="text-white">nom_projet</span>: <span class="text-secondary">str</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet = ProjetEspaceCodage(nom_projet) | |
| @abstractmethod | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_documentation</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span> | |
| @abstractmethod | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_editeur</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span> | |
| @abstractmethod | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_terminal_debugger</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span> | |
| @abstractmethod | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_build_system</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span> | |
| @abstractmethod | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_tests</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span> | |
| @abstractmethod | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_deploiement</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span> | |
| <span class="text-primary">def</span> <span class="text-accent">obtenir_projet</span>(<span class="text-white">self</span>) -> ProjetEspaceCodage: | |
| <span class="text-primary">return</span> <span class="text-white">self</span>.projet | |
| <span class="text-primary">def</span> <span class="text-accent">operation_optionnelle</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: <span class="text-primary">pass</span> | |
| <span class="text-accent">class</span> <span class="text-white">ConstructeurMinimal</span>(ConstructeurEspaceCodage): | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_documentation</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Documentation : README.md simple"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Documentation minimale configurée"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_editeur</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Code Editor : VS Code avec thème par défaut"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"editor.theme"</span>, <span class="text-warning">"default-dark"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Éditeur de code configuré"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_terminal_debugger</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Terminal intégré + debug minimal (print)"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Terminal et debugger basique configurés"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_build_system</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Build System : exécution directe du script"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Système de build minimal configuré"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_tests</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Tests : quelques tests manuels"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Tests manuels configurés"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_deploiement</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Déploiement : exécution locale seulement"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"deployment.target"</span>, <span class="text-warning">"local"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Déploiement local configuré"</span>) | |
| <span class="text-accent">class</span> <span class="text-white">ConstructeurFullStack</span>(ConstructeurEspaceCodage): | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_documentation</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Documentation : wiki, UML, API complète"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"docs.format"</span>, <span class="text-warning">"OpenAPI + Markdown"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Documentation complète configurée"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_editeur</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Code Editor : IDE complet + plugins"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"editor.plugins"</span>, <span class="text-warning">"lint, format, refactor, git, ..."</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Éditeur avancé configuré"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_terminal_debugger</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Terminal multi‑onglets + debugger graphique"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"debugger.features"</span>, <span class="text-warning">"breakpoints, watch, stack, step-by-step"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Terminal et debugger avancés configurés"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_build_system</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Build System : pipeline CI/CD automatisé"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"build.pipeline"</span>, <span class="text-warning">"tests → build → packaging → deployment"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Système de build avancé configuré"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_tests</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Testing Framework : unitaires, intégration, e2e"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"testing.coverage"</span>, <span class="text-warning">">= 90%"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Framework de tests complet configuré"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">configurer_deploiement</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Déploiement : CI/CD vers staging/production (cloud)"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"deployment.providers"</span>, <span class="text-warning">"AWS, Docker, Kubernetes"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Déploiement cloud configuré"</span>) | |
| <span class="text-primary">def</span> <span class="text-accent">operation_optionnelle</span>(<span class="text-white">self</span>) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>.projet.ajouter_composant(<span class="text-warning">"Analyse statique + métriques + revues automatisées"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_configuration(<span class="text-warning">"quality.metrics"</span>, <span class="text-warning">"complexité, dette technique, vulnérabilités"</span>) | |
| <span class="text-white">self</span>.projet.ajouter_etape(<span class="text-warning">"Analyses avancées configurées (optionnel)"</span>) | |
| <span class="text-accent">class</span> <span class="text-white">DirecteurEspaceCodage</span>: | |
| <span class="text-slate-400">"""Le Directeur orchestre les étapes de construction."""</span> | |
| <span class="text-primary">def</span> <span class="text-accent">__init__</span>(<span class="text-white">self</span>, <span class="text-white">builder</span>: ConstructeurEspaceCodage) -> <span class="text-primary">None</span>: | |
| <span class="text-white">self</span>._builder = builder | |
| <span class="text-primary">def</span> <span class="text-accent">construire_espace_codage</span>(<span class="text-white">self</span>) -> ProjetEspaceCodage: | |
| <span class="text-white">self</span>._builder.configurer_documentation() | |
| <span class="text-white">self</span>._builder.configurer_editeur() | |
| <span class="text-white">self</span>._builder.configurer_terminal_debugger() | |
| <span class="text-white">self</span>._builder.configurer_build_system() | |
| <span class="text-white">self</span>._builder.configurer_tests() | |
| <span class="text-white">self</span>._builder.configurer_deploiement() | |
| <span class="text-white">self</span>._builder.operation_optionnelle() | |
| <span class="text-primary">return</span> <span class="text-white">self</span>._builder.obtenir_projet() | |
| <span class="text-primary">if</span> __name__ == <span class="text-warning">"__main__"</span>: | |
| <span class="text-primary">print</span>(<span class="text-warning">"=== ESPACE CODAGE · PROJET MINIMAL ==="</span>) | |
| directeur = DirecteurEspaceCodage(ConstructeurMinimal(<span class="text-warning">"Script Python Simple"</span>)) | |
| projet_min = directeur.construire_espace_codage() | |
| projet_min.decrire() | |
| <span class="text-primary">print</span>(<span class="text-warning">"</span><span class="text-warning">=== ESPACE CODAGE · PROJET FULL‑STACK ==="</span>) | |
| directeur = DirecteurEspaceCodage(ConstructeurFullStack(<span class="text-warning">"Application Web Avancée"</span>)) | |
| projet_full = directeur.construire_espace_codage() | |
| projet_full.decrire() | |
| </code></pre> | |
| </div> | |
| <!-- Démonstration Builder --> | |
| <div class="mt-5 rounded-xl border border-border bg-slate-900/40 p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-xs uppercase tracking-[0.2em] text-accent">Démonstration du Builder Pattern</h3> | |
| <div class="text-[10px] uppercase tracking-[0.2em] text-slate-500">DEMO</div> | |
| </div> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <button class="btn-primary" id="btn-minimal">Construire Projet Minimal</button> | |
| <button class="btn-secondary" id="btn-fullstack">Construire Projet Full‑Stack</button> | |
| <button class="btn-ghost" id="btn-reset">Réinitialiser</button> | |
| </div> | |
| <div id="demoOutput" class="mt-4 rounded-lg border border-border bg-black/40 p-3 font-mono text-[12px] leading-5 max-h-56 overflow-auto text-accent"> | |
| <div>Prêt à construire un espace de codage…</div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-xs text-slate-400"> | |
| <strong class="text-white">Note :</strong> Le <strong>modèle Constructeur</strong> se concentre sur un seul | |
| <em>objet complexe</em> (ProjetEspaceCodage) construit étape par étape. Une | |
| <strong>Abstract Factory</strong> fournirait plusieurs familles d’objets (éditeur, terminal, debugger, …) | |
| sans orchestrer le processus de construction comme le fait le <code>DirecteurEspaceCodage</code>. | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Tooltip flottant --> | |
| <div id="nodeTooltip" class="hidden absolute z-50 max-w-[240px] rounded-lg border border-primary/40 bg-slate-900/95 px-3 py-2 text-[11px] leading-5 shadow-xl backdrop-blur"> | |
| <div class="text-primary font-semibold" id="nodeTitle"></div> | |
| <div class="text-slate-300" id="nodeDesc"></div> | |
| </div> | |
| <script> | |
| // Animation helpers | |
| const animateItems = document.querySelectorAll('[data-animate]'); | |
| animateItems.forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(10px)'; | |
| setTimeout(() => { | |
| el.style.transition = 'all .6s cubic-bezier(.2,.7,.2,1)'; | |
| el.style.opacity = '1'; | |
| el.style.transform = 'translateY(0)'; | |
| }, 120); | |
| }); | |
| // Node definitions and info | |
| const nodeInfo = { | |
| documentation: { | |
| title: 'Documentation', | |
| desc: 'Système de documentation intégré avec recherche et exemples (wiki, API, UML).' | |
| }, | |
| editor: { | |
| title: 'Code Editor', | |
| desc: 'Éditeur de code avec coloration syntaxique, auto-complétion, refactorisations.' | |
| }, | |
| terminal: { | |
| title: 'Terminal', | |
| desc: 'Terminal intégré multi‑onglets avec support de plusieurs shells et historique.' | |
| }, | |
| debugger: { | |
| title: 'Debugger', | |
| desc: 'Debugger graphique avec breakpoints, inspection, watch, step‑by‑step.' | |
| }, | |
| version: { | |
| title: 'Version Control', | |
| desc: 'Contrôle de version (Git) avec interface graphique, branches et historial.' | |
| }, | |
| testing: { | |
| title: 'Testing Framework', | |
| desc: 'Tests unitaires, d’intégration et end‑to‑end. Couverture de code et rapports.' | |
| }, | |
| build: { | |
| title: 'Build System', | |
| desc: 'Pipeline de build et CI/CD : compilation, packaging et déploiement automatisés.' | |
| }, | |
| deploy: { | |
| title: 'Deployment', | |
| desc: 'Déploiement vers staging/production (cloud), rollback et monitoring.' | |
| }, | |
| }; | |
| // Connections for arrows (visual only) | |
| const connections = [ | |
| { from: 'documentation', to: 'editor', label: 'docs' }, | |
| { from: 'editor', to: 'terminal', label: 'exec' }, | |
| { from: 'editor', to: 'debugger', label: 'debug' }, | |
| { from: 'editor', to: 'build', label: 'build' }, | |
| { from: 'version', to: 'editor', label: 'vcs' }, | |
| { from: 'terminal', to: 'testing', label: 'test' }, | |
| { from: 'debugger', to: 'testing', label: 'verify' }, | |
| { from: 'testing', to: 'deploy', label: 'deploy' }, | |
| { from: 'build', to: 'deploy', label: 'package' }, | |
| { from: 'deploy', to: 'version', label: 'release' }, | |
| ]; | |
| // Build arrows | |
| function drawArrows() { | |
| const svg = document.getElementById('arrowLayer'); | |
| if (!svg) return; | |
| svg.innerHTML = ''; | |
| const root = document.getElementById('schemaRoot'); | |
| const rootRect = root.getBoundingClientRect(); | |
| function centerOf(id) { | |
| const el = root.querySelector(`[data-id="${id}"]`); | |
| if (!el) return { x: 0, y: 0 }; | |
| const r = el.getBoundingClientRect(); | |
| return { | |
| x: r.left - rootRect.left + r.width / 2, | |
| y: r.top - rootRect.top + r.height / 2 | |
| }; | |
| } | |
| connections.forEach((c, idx) => { | |
| const from = centerOf(c.from); | |
| const to = centerOf(c.to); | |
| // Curved path | |
| const dx = to.x - from.x; | |
| const dy = to.y - from.y; | |
| const dist = Math.hypot(dx, dy); | |
| const curve = Math.min(80, Math.max(30, dist * 0.25)); | |
| const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | |
| const d = `M ${from.x} ${from.y} | |
| C ${from.x + curve} ${from.y} | |
| ${to.x - curve} ${to.y} | |
| ${to.x} ${to.y}`; | |
| path.setAttribute('d', d); | |
| path.setAttribute('fill', 'none'); | |
| path.setAttribute('stroke', 'rgba(148,163,184,0.55)'); | |
| path.setAttribute('stroke-width', '1.25'); | |
| path.setAttribute('marker-end', 'url(#arrowHead)'); | |
| svg.appendChild(path); | |
| }); | |
| // Marker | |
| let defs = svg.querySelector('defs'); | |
| if (!defs) { | |
| defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); | |
| svg.appendChild(defs); | |
| } | |
| let marker = svg.querySelector('#arrowHead'); | |
| if (!marker) { | |
| marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker'); | |
| marker.setAttribute('id', 'arrowHead'); | |
| marker.setAttribute('viewBox', '0 0 10 10'); | |
| marker.setAttribute('refX', '8'); | |
| marker.setAttribute('refY', '5'); | |
| marker.setAttribute('markerWidth', '6'); | |
| marker.setAttribute('markerHeight', '6'); | |
| marker.setAttribute('orient', 'auto-start-reverse'); | |
| const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | |
| path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z'); | |
| path.setAttribute('fill', 'rgba(148,163,184,0.9)'); | |
| marker.appendChild(path); | |
| defs.appendChild(marker); | |
| } | |
| } | |
| // Node interactions + tooltip | |
| function setupNodes() { | |
| const tooltip = document.getElementById('nodeTooltip'); | |
| const title = document.getElementById('nodeTitle'); | |
| const desc = document.getElementById('nodeDesc'); | |
| document.querySelectorAll('.node-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const id = btn.dataset.id; | |
| const info = nodeInfo[id]; | |
| if (!info) return; | |
| // Visual pulse | |
| btn.classList.add('ring-2', 'ring-primary/60'); | |
| setTimeout(() => btn.classList.remove('ring-2', 'ring-primary/60'), 600); | |
| // Tooltip content | |
| title.textContent = info.title; | |
| desc.textContent = info.desc; | |
| tooltip.classList.remove('hidden'); | |
| // Position near button | |
| const r = btn.getBoundingClientRect(); | |
| tooltip.style.left = `${Math.min(window.innerWidth - 260, r.right + 10)}px`; | |
| tooltip.style.top = `${r.top + window.scrollY}px`; | |
| setTimeout(() => tooltip.classList.add('hidden'), 2800); | |
| }); | |
| }); | |
| document.addEventListener('click', (e) => { | |
| if (!e.target.closest('.node-btn')) { | |
| tooltip.classList.add('hidden'); | |
| } | |
| }); | |
| } | |
| // Builder demo logic | |
| function setupBuilderDemo() { | |
| const output = document.getElementById('demoOutput'); | |
| const btnMinimal = document.getElementById('btn-minimal'); | |
| const btnFullstack = document.getElementById('btn-fullstack'); | |
| const btnReset = document.getElementById('btn-reset'); | |
| function clearOutput() { | |
| output.innerHTML = '<div>Prêt à construire un espace de codage…</div>'; | |
| } | |
| function addLine(text, kind = 'info') { | |
| const line = document.createElement('div'); | |
| line.className = 'mb-1'; | |
| if (kind === 'ok') line.classList.add('text-success'); | |
| if (kind === 'warn') line.classList.add('text-warning'); | |
| line.textContent = text; | |
| output.appendChild(line); | |
| output.scrollTop = output.scrollHeight; | |
| } | |
| function highlightNode(id) { | |
| const node = document.querySelector(`[data-id="${id}"]`); | |
| if (!node) return; | |
| node.classList.add('ring-2', 'ring-accent/70'); | |
| setTimeout(() => node.classList.remove('ring-2', 'ring-accent/70'), 900); | |
| } | |
| const minimalSteps = [ | |
| { id: 'documentation', msg: 'Configuration de la documentation simple (README).' }, | |
| { id: 'editor', msg: 'Configuration de l’éditeur VS Code (thème par défaut).' }, | |
| { id: 'terminal', msg: 'Configuration du terminal intégré et du debug minimal.' }, | |
| { id: 'build', msg: 'Configuration du système de build minimal (exécution directe).' }, | |
| { id: 'testing', msg: 'Configuration des tests manuels.' }, | |
| { id: 'deploy', msg: 'Configuration du déploiement local.' }, | |
| ]; | |
| const fullstackSteps = [ | |
| { id: 'documentation', msg: 'Configuration de la documentation complète (wiki, UML, API).' }, | |
| { id: 'editor', msg: 'Configuration de l’IDE avancé et des plugins.' }, | |
| { id: 'terminal', msg: 'Configuration du terminal multi‑onglets et debugger graphique.' }, | |
| { id: 'build', msg: 'Configuration du pipeline CI/CD automatisé.' }, | |
| { id: 'testing', msg: 'Configuration du framework de tests complet (unitaires, intégration, e2e).' }, | |
| { id: 'deploy', msg: 'Configuration du déploiement cloud (AWS, Docker, Kubernetes).' }, | |
| ]; | |
| function runDemo(type) { | |
| clearOutput(); | |
| const steps = type === 'minimal' ? minimalSteps : fullstackSteps; | |
| let delay = 0; | |
| steps.forEach((s, i) => { | |
| setTimeout(() => { | |
| addLine(`→ ${s.msg}`); | |
| highlightNode(s.id); | |
| }, delay); | |
| delay += 650; | |
| }); | |
| // Completion | |
| setTimeout(() => { | |
| addLine('✅ Projet ' + (type === 'minimal' ? 'minimal' : 'full‑stack') + ' construit avec succès.', 'ok'); | |
| }, delay + 200); | |
| } | |
| btnMinimal.addEventListener('click', () => runDemo('minimal')); | |
| btnFullstack.addEventListener('click', () => runDemo('fullstack')); | |
| btnReset.addEventListener('click', () => clearOutput()); | |
| } | |
| // Initial draw | |
| window.addEventListener('load', () => { | |
| drawArrows(); | |
| setupNodes(); | |
| setupBuilderDemo(); | |
| }); | |
| window.addEventListener('resize', () => { | |
| // Throttle redraw | |
| clearTimeout(window.__arrowTimer); | |
| window.__arrowTimer = setTimeout(drawArrows, 120); | |
| }); | |
| </script> | |
| <!-- Tailwind utilities via @apply --> | |
| <style type="text/tailwindcss"> | |
| @layer utilities { | |
| .animate-spin-slow { | |
| animation: spin 8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .node-btn { | |
| @apply inline-flex items-center justify-center px-4 py-2 text-[11px] tracking-[0.18em] uppercase rounded-full border border-border bg-slate-900/60 hover:bg-slate-800/70 transition; | |
| } | |
| .node-main { | |
| @apply border-primary/70 bg-gradient-to-br from-primary/15 to-accent/10 text-white; | |
| } | |
| .btn-primary { | |
| @apply inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/60 bg-primary/15 hover:bg-primary/25 text-primary transition; | |
| } | |
| .btn-secondary { | |
| @apply inline-flex items-center gap-2 px-4 py-2 rounded-full border border-secondary/60 bg-secondary/15 hover:bg-secondary/25 text-secondary transition; | |
| } | |
| .btn-ghost { | |
| @apply inline-flex items-center gap-2 px-4 py-2 rounded-full border border-border bg-transparent hover:bg-slate-800/50 text-slate-300 transition; | |
| } | |
| .badge { | |
| @apply text-[10px] uppercase tracking-[0.18em] rounded-full border border-border px-2 py-0.5 text-slate-300; | |
| } | |
| } | |
| </style> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |