| <!doctype html> |
| <html lang="fr"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>Espace Codage — 3 Colonnes</title> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#fff1f2', |
| 100: '#ffe4e6', |
| 200: '#fecdd3', |
| 300: '#fda4af', |
| 400: '#fb7185', |
| 500: '#f43f5e', |
| 600: '#e11d48', |
| 700: '#be123c', |
| 800: '#9f1239', |
| 900: '#881337', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body class="bg-slate-950 text-slate-100 antialiased"> |
| <div class="h-screen grid" style="grid-template-columns: 280px 1fr 360px;"> |
|
|
| |
| <aside class="bg-gradient-to-b from-slate-900 to-slate-950 border-r border-slate-800 p-5 flex flex-col gap-4"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center">🚀</div> |
| <div> |
| <div class="font-extrabold text-lg text-primary-500">DeepSeed</div> |
| <div class="text-xs text-slate-400">Interface</div> |
| </div> |
| </div> |
|
|
| <button class="w-full px-4 py-3 rounded-xl bg-gradient-to-r from-primary-500 to-rose-400 text-white font-bold shadow hover:opacity-95 transition"> |
| + Nouvelle tâche |
| </button> |
|
|
| <div class="flex flex-col gap-2"> |
| <button class="w-full px-3 py-3 rounded-xl bg-slate-800/70 border border-slate-700 text-left hover:bg-slate-800">🔍 Rechercher</button> |
| <button class="w-full px-3 py-3 rounded-xl bg-slate-800/70 border border-slate-700 text-left hover:bg-slate-800">📚 Bibliothèque</button> |
| </div> |
|
|
| <div class="mt-2 text-xs tracking-widest font-extrabold text-primary-500 uppercase">Projets</div> |
|
|
| <div class="flex flex-col gap-2"> |
| <button class="w-full px-3 py-3 rounded-xl bg-slate-800/70 border border-slate-700 flex items-center justify-between hover:bg-slate-800"> |
| <span>API Utilisateurs</span> |
| <span class="text-[11px] px-2 py-1 rounded-full border border-emerald-700/60 bg-emerald-500/10 text-emerald-300">TERMINÉ</span> |
| </button> |
|
|
| <button class="w-full px-3 py-3 rounded-xl bg-slate-800/70 border border-slate-700 flex items-center justify-between ring-2 ring-primary-500/25 hover:bg-slate-800"> |
| <span>Composant React</span> |
| <span class="text-[11px] px-2 py-1 rounded-full border border-orange-700/60 bg-orange-500/10 text-orange-300">EN COURS</span> |
| </button> |
|
|
| <button class="w-full px-3 py-3 rounded-xl bg-slate-800/70 border border-slate-700 flex items-center justify-between hover:bg-slate-800"> |
| <span>Base de données</span> |
| <span class="text-[11px] px-2 py-1 rounded-full border border-sky-700/60 bg-sky-500/10 text-sky-300">BROUILLON</span> |
| </button> |
|
|
| <button class="w-full px-3 py-3 rounded-xl bg-slate-800/70 border border-slate-700 flex items-center justify-between hover:bg-slate-800"> |
| <span>API REST</span> |
| <span class="text-[11px] px-2 py-1 rounded-full border border-fuchsia-700/60 bg-fuchsia-500/10 text-fuchsia-300">NOUVEAU</span> |
| </button> |
| </div> |
|
|
| <div class="mt-auto text-xs text-slate-400">✅ Colonne 1 fixe</div> |
| </aside> |
|
|
| |
| <main class="p-6 flex flex-col gap-5 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-900/60 p-4"> |
| <div class="flex items-center justify-between gap-3 mb-3"> |
| <h2 class="text-primary-500 font-extrabold">Code généré</h2> |
| <div class="flex gap-2"> |
| <button id="copyBtn" class="px-3 py-2 rounded-xl bg-slate-800 border border-slate-700 hover:bg-slate-700">📄 Copier</button> |
| <button id="clearBtn" class="px-3 py-2 rounded-xl bg-rose-500/10 border border-rose-600/40 text-rose-300 hover:bg-rose-500/20">🗑️ Effacer</button> |
| </div> |
| </div> |
| <pre id="codeOutput" class="whitespace-pre-wrap leading-6 text-slate-200 text-sm min-h-[260px]">// Le code généré apparaîtra ici…</pre> |
| </section> |
|
|
| <section class="rounded-2xl border border-slate-800 bg-slate-900/40 p-4"> |
| <div class="text-primary-500 font-extrabold mb-3">Exemples de demandes :</div> |
| <div class="flex gap-3 flex-wrap"> |
| <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> |
|
|
| |
| <section class="mt-auto rounded-2xl border border-slate-800 bg-slate-900/40 p-4"> |
| <div class="flex gap-3 items-center"> |
| <button id="generateBtn" class="px-4 py-3 rounded-xl bg-gradient-to-r from-primary-500 to-rose-400 text-white font-black shadow hover:opacity-95 transition"> |
| Générer ✨ |
| </button> |
| <button id="micBtn" class="px-4 py-3 rounded-xl border border-slate-700 bg-slate-800 hover:bg-slate-700" title="Parler">🎤</button> |
| <input id="promptInput" type="text" placeholder="Écrivez ici… (ex: bonjour)" |
| class="flex-1 px-4 py-3 rounded-xl border border-slate-700 bg-slate-900/70 outline-none focus:ring-2 focus:ring-primary-500/50" /> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <aside id="colRight" class="border-l border-slate-800 bg-transparent"></aside> |
| </div> |
|
|
| <div id="toast" class="fixed bottom-5 left-1/2 -translate-x-1/2 hidden rounded-xl border border-primary-500/30 bg-slate-900/90 text-slate-100 px-4 py-2 text-sm shadow-lg"> |
| ✅ Prêt |
| </div> |
|
|
| <script src="script.js"></script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
