Hugging Face's logo

Spaces:
Abmacode12
/
espace-codage-theme
Running

App Files Community
Abmacode12 commited on
Commit
200743c
·
verified ·
1 Parent(s): 5dcb2ce

<!DOCTYPE html>

Browse files

<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Espace Codage – Rosalinda</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">

<div class="grid grid-cols-12 h-screen">

<!-- Colonne 1 : Menu -->
<aside class="col-span-2 bg-white p-4 border-r">
<h1 class="text-xl font-bold mb-4">Espace Codage</h1>
<nav class="space-y-2">
<button class="w-full bg-gray-200 py-2 rounded">Nouvelle tâche</button>
<button class="w-full bg-gray-200 py-2 rounded">Rechercher</button>
<button class="w-full bg-gray-200 py-2 rounded">Bibliothèque</button>
</nav>
<div class="mt-6 text-sm text-gray-500">Projets</div>
</aside>

<!-- Colonne 2 : Chat Rosalinda -->
<main class="col-span-4 bg-gray-50 p-4 flex flex-col">
<div class="flex-1 overflow-y-auto">
<div class="mb-4">
<h2 class="text-lg font-semibold">Espace Codage – Rosalinda</h2>
<p class="text-sm text-gray-500">💬 IA en veille</p>
</div>

<div class="bg-white p-3 rounded shadow mb-2">
<p><strong>Rosalinda :</strong> Bonjour ! Je suis Rosalinda, votre assistante IA.<br>Comment puis-je vous aider aujourd’hui ?</p>
</div>

<div class="bg-gray-100 p-3 rounded shadow mb-2">
<p><strong>Vous :</strong> créer moi une image de chat</p>
</div>

<div class="bg-white p-3 rounded shadow mb-2">
<p><strong>Rosalinda :</strong><br>
Voici un exemple de code pour : <code>"créer moi une image de chat"</code><br><br>
<code>
function processInput(input) {<br>
  // Analyse syntaxique<br>
  const tokens = input.toLowerCase().split(' ');<br>
  return tokens.map(token =><br>
    token.length > 3 ? token.charAt(0).toUpperCase() + token.slice(1) : token).join(' ');<br>
}<br>
console.log(processInput("créer moi une image de chat"));<br>
</code>
</p>
</div>
</div>

<!-- Champ d'entrée -->
<div class="mt-4 flex">
<input type="text" placeholder="Écrire à Rosalinda..." class="flex-1 border rounded-l px-3 py-2" />
<button class="bg-blue-600 text-white px-4 py-2 rounded-r">Envoyer</button>
</div>
</main>

<!-- Colonne 3 : Résultat du code -->
<section class="col-span-6 bg-black text-green-400 font-mono p-4 overflow-y-auto">
<h2 class="text-white mb-2">💻 Résultat pour: créer moi une image de chat</h2>
<pre>
function processInput(input) {
// Analyse syntaxique
const tokens = input.toLowerCase().split(' ');

// Génération de réponse contextuelle
return tokens.map(token =>
token.length > 3 ? token.charAt(0).toUpperCase() + token.slice(1) : token
).join(' ');
}

console.log(processInput("créer moi une image de chat"));
</pre>
</section>
</div>

</body>
</html>

Files changed (3) hide show
  1. index.html +8 -19
  2. script.js +5 -13
  3. styles.css +8 -8
index.html CHANGED
@@ -67,14 +67,14 @@
67
  </aside>
68
  <!-- Colonne 2 : Chat -->
69
  <main class="chat">
70
- <div class="chat-header">
71
- <h2>Espace Codage – Rosalinda</h2>
72
  <div class="activity-monitor">
73
- <span id="aiActivityDot" class="dot"></span>
74
  <span id="aiActivityText">IA en veille</span>
75
  </div>
76
  </div>
77
- <div class="chat-messages" id="chatMessages">
78
  <div class="msg msg-ai">
79
  <div class="avatar">
80
  <i class="fa-solid fa-robot"></i>
@@ -84,22 +84,11 @@
84
  </div>
85
  </div>
86
  </div>
87
- <div class="chat-input">
88
- <button id="attachBtn" title="Ajouter un fichier">
89
- <i class="fas fa-plus"></i>
90
- </button>
91
- <button id="connectBtn" title="Connexion">
92
- <i class="fas fa-plug"></i>
93
- </button>
94
- <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." />
95
- <button id="micBtn" title="Micro">
96
- <i class="fas fa-microphone"></i>
97
- </button>
98
- <button id="sendBtn" title="Envoyer">
99
- <i class="fas fa-paper-plane"></i>
100
- </button>
101
  </div>
102
- </main>
103
  <!-- Colonne 3 : Code & Résultats -->
104
  <section class="output">
105
  <div class="output-tabs">
 
67
  </aside>
68
  <!-- Colonne 2 : Chat -->
69
  <main class="chat">
70
+ <div class="chat-header">
71
+ <h2 class="text-lg font-semibold">Espace Codage – Rosalinda</h2>
72
  <div class="activity-monitor">
73
+ <span id="aiActivityDot" class="dot">💬</span>
74
  <span id="aiActivityText">IA en veille</span>
75
  </div>
76
  </div>
77
+ <div class="chat-messages" id="chatMessages">
78
  <div class="msg msg-ai">
79
  <div class="avatar">
80
  <i class="fa-solid fa-robot"></i>
 
84
  </div>
85
  </div>
86
  </div>
87
+ <div class="chat-input mt-4 flex">
88
+ <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." class="flex-1 border rounded-l px-3 py-2" />
89
+ <button id="sendBtn" class="bg-blue-600 text-white px-4 py-2 rounded-r">Envoyer</button>
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
+ </main>
92
  <!-- Colonne 3 : Code & Résultats -->
93
  <section class="output">
94
  <div class="output-tabs">
script.js CHANGED
@@ -217,22 +217,14 @@ function setAIActivity(text, active = true) {
217
  }
218
  function addMessage(role, content) {
219
  const msg = document.createElement('div');
220
- msg.className = 'msg ' + (role === 'user' ? 'msg-user' : 'msg-ai');
 
221
  if (role === 'user') {
222
- msg.innerHTML = `
223
- <div class="bubble">${escapeHTML(content)}</div>
224
- <div class="avatar">
225
- <i class="fa-solid fa-user"></i>
226
- </div>
227
- `;
228
  } else {
229
- msg.innerHTML = `
230
- <div class="avatar">
231
- <i class="fa-solid fa-robot"></i>
232
- </div>
233
- <div class="bubble">${content}</div>
234
- `;
235
  }
 
236
  chatMessages.appendChild(msg);
237
  chatMessages.scrollTop = chatMessages.scrollHeight;
238
  }
 
217
  }
218
  function addMessage(role, content) {
219
  const msg = document.createElement('div');
220
+ msg.className = role === 'user' ? 'bg-gray-100 p-3 rounded shadow mb-2' : 'bg-white p-3 rounded shadow mb-2';
221
+
222
  if (role === 'user') {
223
+ msg.innerHTML = `<p><strong>Vous :</strong> ${escapeHTML(content)}</p>`;
 
 
 
 
 
224
  } else {
225
+ msg.innerHTML = `<p><strong>Rosalinda :</strong><br>${content}</p>`;
 
 
 
 
 
226
  }
227
+
228
  chatMessages.appendChild(msg);
229
  chatMessages.scrollTop = chatMessages.scrollHeight;
230
  }
styles.css CHANGED
@@ -8,13 +8,12 @@
8
  * { box-sizing: border-box; }
9
  html, body { height: 100%; }
10
  body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
11
-
12
  /* Container principal en 3 colonnes */
13
  .container {
14
  display: grid;
15
- grid-template-columns: 20% 30% 50%;
16
  height: 100vh;
17
- gap: 1px;
18
  background: rgb(226 232 240);
19
  }
20
  .dark .container {
@@ -87,13 +86,13 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
87
  padding: 4px 6px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); border-radius: 6px; cursor: pointer;
88
  }
89
  .dark .project-list button { background: rgb(15 23 42); border-color: rgb(51 65 85); }
90
-
91
  /* Colonne 2 : Chat */
92
  .chat {
93
- display: flex;
94
  flex-direction: column;
95
  padding: 16px;
96
  gap: 12px;
 
97
  }
98
  .chat-header h2 { font-size: 18px; margin: 0; }
99
  .activity-monitor {
@@ -180,16 +179,17 @@ display: flex;
180
  }
181
  .chat-input button:hover { background: rgb(241 245 249); }
182
  .dark .chat-input button:hover { background: rgb(30 41 59); }
183
-
184
  /* Colonne 3 : Output */
185
  .output {
186
  width: 100%;
187
- background: rgb(252 252 252);
188
- border-left: 1px solid rgb(226 232 240);
189
  display: flex;
190
  flex-direction: column;
191
  padding: 16px;
192
  gap: 12px;
 
 
193
  }
194
  .dark .output {
195
  background: rgb(12 16 24);
 
8
  * { box-sizing: border-box; }
9
  html, body { height: 100%; }
10
  body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
 
11
  /* Container principal en 3 colonnes */
12
  .container {
13
  display: grid;
14
+ grid-template-columns: 16.6667% 33.3333% 50%;
15
  height: 100vh;
16
+ gap: 0;
17
  background: rgb(226 232 240);
18
  }
19
  .dark .container {
 
86
  padding: 4px 6px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); border-radius: 6px; cursor: pointer;
87
  }
88
  .dark .project-list button { background: rgb(15 23 42); border-color: rgb(51 65 85); }
 
89
  /* Colonne 2 : Chat */
90
  .chat {
91
+ display: flex;
92
  flex-direction: column;
93
  padding: 16px;
94
  gap: 12px;
95
+ background: rgb(249 250 251);
96
  }
97
  .chat-header h2 { font-size: 18px; margin: 0; }
98
  .activity-monitor {
 
179
  }
180
  .chat-input button:hover { background: rgb(241 245 249); }
181
  .dark .chat-input button:hover { background: rgb(30 41 59); }
 
182
  /* Colonne 3 : Output */
183
  .output {
184
  width: 100%;
185
+ background: black;
186
+ border-left: 1px solid rgb(226 232 240);
187
  display: flex;
188
  flex-direction: column;
189
  padding: 16px;
190
  gap: 12px;
191
+ color: rgb(74 222 128);
192
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
193
  }
194
  .dark .output {
195
  background: rgb(12 16 24);