Spaces:

Abmacode12
/

espace-codage-theme

Running

App Files Files Community

Abmacode12 commited on Dec 17, 2025

Commit

5740c7d

verified ·

1 Parent(s): 23feeb3

import zipfile

Browse files

import os

# Créer un dossier pour le backend corrigé
output_dir = "/mnt/data/espace_codage_corrected_backend"
os.makedirs(output_dir, exist_ok=True)

# Exemple de fichier index.html modifié (chat input visible et mise en page corrigée)
index_html_content = """
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Espace Codage – Rosalinda</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.colonne1, .colonne2, .colonne3 {
height: 100%;
overflow-y: auto;
padding: 10px;
}
.colonne1 {
width: 20%;
background-color: #f0f0f0;
}
.colonne2 {
width: 40%;
background-color: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.colonne3 {
width: 40%;
background-color: #000;
color: #0f0;
}
.chat-input {
display: flex;
margin-top: 10px;
}
.chat-input input[type="text"] {
flex: 1;
padding: 10px;
color: #000;
background-color: #fff;
border: 1px solid #ccc;
}
.chat-input button {
padding: 10px;
}
</style>
</head>
<body>
<div class="colonne1">
<h2>Espace Codage</h2>
<button>Nouvelle tâche</button><br>
<button>Rechercher</button><br>
<button>Bibliothèque</button>
</div>
<div class="colonne2">
<h2>Rosalinda</h2>
<div id="chat-area">
<p>Bonjour ! Je suis Rosalinda, votre assistante IA.</p>
</div>
<div class="chat-input">
<input type="text" id="userInput" placeholder="Écrire à Rosalinda..." />
<button onclick="sendMessage()">Envoyer</button>
</div>
</div>
<div class="colonne3">
<h3>// Résultat pour: bonjour</h3>
<pre id="output">console.log("bonjour");</pre>
</div>

<script>
async function sendMessage() {
const input = document.getElementById("userInput").value;
document.getElementById("chat-area").innerHTML += "<p><strong>Vous :</strong> " + input + "</p>";
const response = await fetch("https://api.openai.com/v1/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_API_KEY_HERE"
},
body: JSON.stringify({
model: "text-davinci-003",
prompt: input,
max_tokens: 100
})
});
const data = await response.json();
const output = data.choices?.[0]?.text || "Erreur de réponse.";
document.getElementById("chat-area").innerHTML += "<p><strong>Rosalinda :</strong> " + output + "</p>";
document.getElementById("output").innerText = output;
}
</script>
</body>
</html>
"""

# Écrire le fichier dans le dossier
html_file_path = os.path.join(output_dir, "index.html")
with open(html_file_path, "w", encoding="utf-8") as f:
f.write(index_html_content)

# Créer un fichier ZIP à partir du dossier
zip_path = "/mnt/data/espace_codage_rosalinda_final.zip"
with zipfile.ZipFile(zip_path, 'w') as zipf:
zipf.write(html_file_path, arcname="index.html")

zip_path

Files changed (5) hide show

components/sidebar.js +86 -0
index.html +1 -1
script.js +73 -0
style.css +4 -3
styles.css +1 -3

components/sidebar.js ADDED Viewed

	@@ -0,0 +1,86 @@

+class CustomSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          padding: 16px;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-weight: 700;
+          font-size: 18px;
+          color: var(--text-color, rgb(15 23 42));
+          text-decoration: none;
+        }
+        .menu {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          margin: 16px 0;
+        }
+        .btn {
+          width: 100%;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 8px;
+          padding: 10px 12px;
+          background: var(--btn-bg, rgb(241 245 249));
+          color: var(--btn-text, rgb(15 23 42));
+          border: 1px solid var(--btn-border, rgb(226 232 240));
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        .btn:hover {
+          background: var(--btn-hover, rgb(226 232 240));
+        }
+        .projects h3 {
+          font-size: 14px;
+          color: var(--subtext-color, rgb(100 116 139));
+          margin-bottom: 8px;
+          text-transform: uppercase;
+          letter-spacing: 0.06em;
+        }
+        .project-list {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+        }
+      </style>
+      <div class="sidebar-content">
+        <div class="logo">
+          <i class="fa-solid fa-code"></i>
+          <span>Espace Codage</span>
+        </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"></ul>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('custom-sidebar', CustomSidebar);

index.html CHANGED Viewed

@@ -32,9 +32,9 @@
 </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 : Menu -->
     <aside class="sidebar">
 <div class="flex items-center justify-between mb-6">
         <a href="#" class="logo">
           <i class="fa-solid fa-code"></i>

 </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 : Menu -->
     <aside class="sidebar">
+      <custom-sidebar></custom-sidebar>
 <div class="flex items-center justify-between mb-6">
         <a href="#" class="logo">
           <i class="fa-solid fa-code"></i>

script.js CHANGED Viewed

@@ -1,5 +1,78 @@
 console.log("Interface Espace Codage chargée.");
 // ===== Thème (light/dark) =====
 const themeToggle = document.getElementById('themeToggle');
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

 console.log("Interface Espace Codage chargée.");
+// Create sidebar component
+class CustomSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-weight: 700;
+          font-size: 18px;
+          color: rgb(15 23 42);
+          text-decoration: none;
+        }
+        .menu {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          margin-top: 16px;
+        }
+        .btn {
+          width: 100%;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 8px;
+          padding: 10px 12px;
+          background: rgb(241 245 249);
+          color: rgb(15 23 42);
+          border: 1px solid rgb(226 232 240);
+          border-radius: 8px;
+          cursor: pointer;
+        }
+        .btn:hover {
+          background: rgb(226 232 240);
+        }
+      </style>
+      <div class="sidebar-content">
+        <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>
+        </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"></ul>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('custom-sidebar', CustomSidebar);
 // ===== Thème (light/dark) =====
 const themeToggle = document.getElementById('themeToggle');
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

style.css CHANGED Viewed

@@ -1,8 +1,9 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;

 body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;

styles.css CHANGED Viewed

@@ -24,11 +24,9 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 .sidebar {
   width: 100%;
   background: rgb(248 250 252); /* slate-50 */
-border-right: 1px solid rgb(226 232 240); /* slate-200 */
-  padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
 }
 .dark .sidebar {
   background: rgb(15 23 42); /* slate-900 */

 .sidebar {
   width: 100%;
   background: rgb(248 250 252); /* slate-50 */
+  border-right: 1px solid rgb(226 232 240); /* slate-200 */
   display: flex;
   flex-direction: column;
 }
 .dark .sidebar {
   background: rgb(15 23 42); /* slate-900 */