Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>DeepSeed — Interface 3 Colonnes</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#f43f5e', // rose-500 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="app h-screen grid grid-cols-[280px_1fr_360px]"> | |
| <!-- COLONNE 1 : SIDEBAR --> | |
| <aside class="sidebar bg-gradient-to-b from-slate-900 to-slate-950 border-r border-slate-700 p-4 flex flex-col gap-4" id="colLeft"> | |
| <div class="brand flex items-center gap-3"> | |
| <div class="logo w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🚀</div> | |
| <div class="brandText"> | |
| <div class="brandName font-extrabold text-lg text-primary">DeepSeed</div> | |
| <div class="brandSub text-xs text-slate-400">Interface</div> | |
| </div> | |
| </div> | |
| <button class="btnPrimary w-full py-3 px-3 border-none rounded-xl bg-gradient-to-r from-primary to-pink-500 text-white font-bold cursor-pointer">+ Nouvelle tâche</button> | |
| <div class="nav flex flex-col gap-3 mt-2"> | |
| <button class="navBtn w-full py-3 bg-slate-800 border border-slate-700 rounded-xl text-slate-100 text-left cursor-pointer">🔍 Rechercher</button> | |
| <button class="navBtn w-full py-3 bg-slate-800 border border-slate-700 rounded-xl text-slate-100 text-left cursor-pointer">📚 Bibliothèque</button> | |
| </div> | |
| <div class="sectionTitle mt-3 text-xs tracking-widest text-primary font-extrabold">PROJETS</div> | |
| <div class="projects flex flex-col gap-3"> | |
| <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer"> | |
| <span>API Utilisateurs</span> | |
| <span class="pill bg-emerald-500/15 text-emerald-400 text-xs px-2 py-1 rounded-full border border-emerald-500/20">TERMINÉ</span> | |
| </button> | |
| <button class="projectItem active w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer outline outline-2 outline-primary/20"> | |
| <span>Composant React</span> | |
| <span class="pill bg-orange-500/15 text-orange-400 text-xs px-2 py-1 rounded-full border border-orange-500/20">EN COURS</span> | |
| </button> | |
| <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer"> | |
| <span>Base de données</span> | |
| <span class="pill bg-blue-500/15 text-blue-400 text-xs px-2 py-1 rounded-full border border-blue-500/20">BROUILLON</span> | |
| </button> | |
| <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer"> | |
| <span>API REST</span> | |
| <span class="pill bg-purple-500/15 text-purple-400 text-xs px-2 py-1 rounded-full border border-purple-500/20">NOUVEAU</span> | |
| </button> | |
| </div> | |
| <div class="sidebarFooter mt-auto text-slate-400 text-xs"> | |
| <div class="hint">✅ Menu fixe — rien ne bouge</div> | |
| </div> | |
| </aside> | |
| <!-- COLONNE 2 : GÉNÉRATEUR (barre en bas) --> | |
| <main class="main p-6 flex flex-col gap-4 min-w-0" id="colCenter"> | |
| <header class="mainHeader smallHeader" id="mainHeader"> | |
| <h1 id="appTitle">Espace Codage</h1> | |
| <p id="appSubtitle">Génération de code IA (mode simple)</p> | |
| </header> | |
| <section class="codePanel bg-slate-900/85 border border-slate-700 rounded-2xl p-4 min-h-[280px]"> | |
| <div class="codeTop flex items-center justify-between gap-3 mb-3"> | |
| <h2 class="text-lg text-primary font-semibold">Code généré</h2> | |
| <div class="codeActions flex gap-3"> | |
| <button id="copyBtn" class="smallBtn py-2.5 px-3 bg-slate-800 border border-slate-700 text-slate-100 rounded-xl cursor-pointer">📄 Copier</button> | |
| <button id="clearBtn" class="smallBtn danger py-2.5 px-3 bg-primary/15 border border-primary/20 text-primary rounded-xl cursor-pointer">🗑️ Effacer</button> | |
| </div> | |
| </div> | |
| <pre id="codeOutput" class="codeOutput whitespace-pre-wrap leading-6 text-slate-200 text-sm">// Le code généré apparaîtra ici…</pre> | |
| </section> | |
| <section class="examples bg-slate-800/35 border border-slate-700 rounded-2xl p-4"> | |
| <div class="examplesTitle text-primary font-extrabold mb-3">Exemples de demandes :</div> | |
| <div class="chips flex gap-3 flex-wrap"> | |
| <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button> | |
| <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button> | |
| <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button> | |
| <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button> | |
| </div> | |
| </section> | |
| <!-- ✅ BARRE DÉPLACÉE EN BAS (zone flèche) --> | |
| <section class="promptDock mt-auto bg-slate-800/35 border border-slate-700 rounded-2xl p-4"> | |
| <div class="promptBar flex gap-3"> | |
| <input id="promptInput" type="text" placeholder="Décrivez votre idée ou thème..." class="flex-1 py-3.5 px-4 rounded-xl border border-slate-700 bg-slate-900 text-slate-100 outline-none" /> | |
| <button id="generateBtn" class="generateBtn py-3.5 px-4 rounded-xl border-none bg-gradient-to-r from-primary to-pink-400 text-slate-900 font-black cursor-pointer">Générer ✨</button> | |
| <button id="micBtn" class="micBtn py-3.5 px-4 rounded-xl border border-slate-700 bg-slate-800 text-slate-100 cursor-pointer" title="Parler">🎤</button> | |
| </div> | |
| <div class="dockHint mt-3 text-xs text-slate-400"> | |
| La barre est volontairement en bas (comme ta flèche rouge). | |
| </div> | |
| </section> | |
| </main> | |
| <!-- COLONNE 3 : VIDE + petit titre seulement --> | |
| <aside class="right emptyRight bg-gradient-to-b from-slate-900 to-slate-950 border-l border-slate-700 p-4 flex flex-col gap-4" id="colRight" aria-label="Colonne de droite"> | |
| <div class="rightHeader flex items-center gap-3 p-3 rounded-2xl border border-slate-700 bg-slate-900"> | |
| <div class="avatar w-11 h-11 rounded-2xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🤖</div> | |
| <div> | |
| <div class="rightTitle font-black">Générateur de Code IA</div> | |
| <div class="rightSub text-slate-400 text-xs">Rosalinda (zone vide)</div> | |
| </div> | |
| </div> | |
| <!-- ✅ vide (future grande image/vidéo/preview) --> | |
| <div class="emptyStage flex-1 rounded-2xl border-2 border-dashed border-primary/25 bg-slate-900/35 flex items-center justify-center text-center p-5" id="stage"> | |
| <div class="emptyText text-slate-300/60"> | |
| Zone vide (future image / vidéo / preview) | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <div id="toast" class="toast" hidden></div> | |
| <script src="./script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |