Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Espace Codage — 3 Colonnes</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-slate-950 text-slate-100 min-h-screen"> | |
| <div class="min-h-screen grid" style="grid-template-columns: 280px 1fr 360px;"> | |
| <!-- COL 1 --> | |
| <aside class="border-r border-slate-800 bg-gradient-to-b from-slate-900/80 to-slate-950/80 p-4 flex flex-col gap-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-slate-900/60 border border-slate-800 flex items-center justify-center text-xl">🚀</div> | |
| <div> | |
| <div class="font-extrabold text-slate-100">DeepSeed</div> | |
| <div class="text-xs text-slate-400">Interface</div> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 rounded-xl bg-rose-500 hover:bg-rose-600 text-white font-bold transition">+ Nouvelle tâche</button> | |
| <div class="flex flex-col gap-2"> | |
| <button class="w-full text-left py-3 rounded-xl bg-slate-900/60 border border-slate-800 hover:bg-slate-900 transition">🔍 Rechercher</button> | |
| <button class="w-full text-left py-3 rounded-xl bg-slate-900/60 border border-slate-800 hover:bg-slate-900 transition">📚 Bibliothèque</button> | |
| </div> | |
| <div class="mt-2 text-xs tracking-widest font-extrabold uppercase text-rose-400">Projets</div> | |
| <div class="flex flex-col gap-2"> | |
| <button class="project-item"> | |
| <span>API Utilisateurs</span> | |
| <span class="pill green">TERMINÉ</span> | |
| </button> | |
| <button class="project-item active"> | |
| <span>Composant React</span> | |
| <span class="pill orange">EN COURS</span> | |
| </button> | |
| <button class="project-item"> | |
| <span>Base de données</span> | |
| <span class="pill blue">BROUILLON</span> | |
| </button> | |
| <button class="project-item"> | |
| <span>API REST</span> | |
| <span class="pill purple">NOUVEAU</span> | |
| </button> | |
| </div> | |
| <div class="mt-auto text-xs text-slate-400"> | |
| <div class="hint">✅ Colonne 1 fixe</div> | |
| </div> | |
| </aside> | |
| <!-- COL 2 --> | |
| <main class="p-6 flex flex-col gap-4 min-w-0"> | |
| <header> | |
| <h1 id="appTitle" class="text-2xl font-black">Espace Codage</h1> | |
| <p id="appSubtitle" class="text-slate-400 mt-1 text-sm">Génération de code IA (mode simple)</p> | |
| </header> | |
| <section class="rounded-2xl border border-slate-800 bg-slate-950/80 p-4"> | |
| <div class="flex items-center justify-between gap-3 mb-3"> | |
| <h2 class="text-rose-300 font-bold">Code généré</h2> | |
| <div class="flex gap-2"> | |
| <button id="copyBtn" class="px-3 py-2 rounded-xl bg-slate-900/60 border border-slate-800 hover:bg-slate-900 transition">📄 Copier</button> | |
| <button id="clearBtn" class="px-3 py-2 rounded-xl bg-rose-500/15 border border-rose-500/40 text-rose-200 hover:bg-rose-500/25 transition">🗑️ Effacer</button> | |
| </div> | |
| </div> | |
| <pre id="codeOutput" class="text-slate-200 leading-relaxed whitespace-pre-wrap text-sm">// Le code généré apparaîtra ici…</pre> | |
| </section> | |
| <section class="rounded-2xl border border-slate-800 bg-slate-900/30 p-4"> | |
| <div class="font-extrabold text-rose-300 mb-2">Exemples de demandes :</div> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="chip" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button> | |
| <button class="chip" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button> | |
| <button class="chip" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button> | |
| <button class="chip" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button> | |
| </div> | |
| </section> | |
| <!-- Barre en bas --> | |
| <section class="mt-auto rounded-2xl border border-slate-800 bg-slate-900/30 p-4"> | |
| <div class="flex items-center gap-3"> | |
| <button id="generateBtn" class="px-4 py-3 rounded-xl bg-rose-500 hover:bg-rose-600 text-white font-black transition">Générer ✨</button> | |
| <button id="micBtn" class="px-4 py-3 rounded-xl border border-slate-800 bg-slate-900/60 hover:bg-slate-900 transition" title="Parler">🎤</button> | |
| <input id="promptInput" class="flex-1 px-4 py-3 rounded-xl bg-slate-900/60 border border-slate-800 focus:outline-none focus:ring-2 focus:ring-rose-500/40" type="text" placeholder="Écrivez ici… (ex: bonjour)" /> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- COL 3 --> | |
| <aside id="colRight" class="border-l border-slate-800 bg-transparent p-4"> | |
| <div id="stage" style="padding:16px;"></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> |