Spaces:
Running
Running
File size: 4,382 Bytes
bbce725 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 200743c 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 3c0491c c00a577 3c0491c c00a577 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 3c0491c bbce725 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | <!DOCTYPE html>
<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> |