Spaces:
Running
Running
Voici une version améliorée de ton code avec plus de fonctionnalités et un meilleur design :
c00a577 verified | <html lang="fr" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Espace Codage</title> | |
| <!-- TailwindCSS (CDN) --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: 'var(--primary-500, #6366F1)', | |
| }, | |
| secondary: { | |
| 500: 'var(--secondary-500, #22C55E)', | |
| }, | |
| }, | |
| }, | |
| }, | |
| darkMode: 'class', | |
| } | |
| </script> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body class="h-full bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors"> | |
| <div class="container"> | |
| <!-- Colonne 1 : Navigation --> | |
| <aside class="sidebar"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <a href="#" class="logo"> | |
| <i class="fa-solid fa-code"></i> | |
| <span>Espace Codage</span> | |
| </a> | |
| <button id="themeToggle" class="theme-toggle" title="Basculer le thème"> | |
| <i class="fa-solid fa-moon"></i> | |
| </button> | |
| </div> | |
| <nav class="menu"> | |
| <button id="newTaskBtn" class="btn"> | |
| <i class="fa-solid fa-plus"></i> | |
| Nouvelle tâche | |
| </button> | |
| <button id="searchBtn" class="btn"> | |
| <i class="fa-solid fa-magnifying-glass"></i> | |
| Rechercher | |
| </button> | |
| <button id="libraryBtn" class="btn"> | |
| <i class="fa-solid fa-book"></i> | |
| Bibliothèque | |
| </button> | |
| </nav> | |
| <div class="projects"> | |
| <h3>Projets</h3> | |
| <ul id="projectList" class="project-list"> | |
| <!-- Projets ajoutés ici --> | |
| </ul> | |
| </div> | |
| </aside> | |
| <!-- Colonne 2 : Chat IA Rosalinda --> | |
| <main class="chat"> | |
| <div class="chat-header"> | |
| <h2>Espace Codage – Rosalinda</h2> | |
| <div class="activity-monitor"> | |
| <span id="aiActivityDot" class="dot"></span> | |
| <span id="aiActivityText">IA en veille</span> | |
| </div> | |
| </div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="msg msg-ai"> | |
| <div class="avatar"> | |
| <i class="fa-solid fa-robot"></i> | |
| </div> | |
| <div class="bubble"> | |
| Bonjour ! Je suis Rosalinda, votre assistante IA. Comment puis-je vous aider aujourd’hui ? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-input"> | |
| <button id="attachBtn" title="Ajouter un fichier"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <button id="connectBtn" title="Connexion"> | |
| <i class="fas fa-plug"></i> | |
| </button> | |
| <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." /> | |
| <button id="micBtn" title="Activer/Désactiver le micro (Ctrl+Espace)"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button id="sendBtn" title="Envoyer"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Colonne 3 : Résultat & Code --> | |
| <section class="output"> | |
| <div class="output-tabs"> | |
| <button class="tab-btn active" data-tab="code"> | |
| <i class="fas fa-code"></i> Code | |
| </button> | |
| <button class="tab-btn" data-tab="dashboard"> | |
| <i class="fas fa-chart-pie"></i> Tableau de bord | |
| </button> | |
| <button class="tab-btn" data-tab="db"> | |
| <i class="fas fa-database"></i> Base de données | |
| </button> | |
| <button class="tab-btn" data-tab="storage"> | |
| <i class="fas fa-folder"></i> Stockage | |
| </button> | |
| <button class="tab-btn" data-tab="settings"> | |
| <i class="fas fa-cog"></i> Paramètres | |
| </button> | |
| </div> | |
| <div class="code-output" id="codeOutput"> | |
| <pre><code>// Code généré s’affichera ici... | |
| </code></pre> | |
| </div> | |
| <div class="result-output"> | |
| <p id="resultat">Résultat final : (image, vidéo ou page)...</p> | |
| </div> | |
| </section> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |