<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Espace Codage - Thème</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
height: 100vh;
background: #f5f5f7;
}
/* Barre latérale */
.sidebar {
width: 280px;
background: #fff;
border-right: 1px solid #ddd;
display: flex;
flex-direction: column;
padding: 20px;
}
.sidebar h2 {
margin: 0 0 20px 0;
font-weight: 700;
font-size: 1.5em;
color: #333;
}
.sidebar button, .sidebar input[type="search"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1em;
}
.sidebar nav {
flex-grow: 1;
}
.sidebar nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar nav ul li {
margin-bottom: 12px;
}
.sidebar nav ul li a {
text-decoration: none;
color: #555;
font-weight: 600;
display: flex;
align-items: center;
}
.sidebar nav ul li a:hover {
color: #0078d7;
}
/* Contenu principal */
.main-content {
flex-grow: 1;
background: #fff;
padding: 20px;
overflow-y: auto;
}
.main-header {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 20px;
}
.main-header button {
padding: 8px 16px;
border: none;
background: #0078d7;
color: white;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.main-header button:hover {
background: #005a9e;
}
.content-area {
border: 1px solid #ddd;
border-radius: 8px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
color: #999;
font-size: 1.2em;
}
</style>
</head>
<body>
<aside class="sidebar">
<h2>Espace Codage</h2>
<button>Nouvelle tâche</button>
<input type="search" placeholder="Rechercher" />
<nav>
<ul>
<li><a href="#">Bibliothèque</a></li>
<li><a href="#">Projet 1</a></li>
<li><a href="#">Projet 2</a></li>
<li><a href="#">Projet 3</a></li>
</ul>
</nav>
</aside>
<main class="main-content">
<div class="main-header">
<button>Modifier</button>
<button>Publié</button>
</div>
<div class="content-area">
Échec du chargement de l'aperçu.
</div>
</main>
</body>
</html>

index.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="fr" class="light">
+<html lang="fr">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>CodeNook Studio 🌌</title>
-<!-- Tailwind CSS via CDN -->
+  <title>Espace Codage - Thème</title>
+
+  <!-- Tailwind CSS via CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
 
   <!-- Icons (Feather) -->
@@ -17,12 +18,13 @@
   <div class="flex h-screen">
     <!-- Sidebar -->
     <aside class="w-72 bg-white border-r border-gray-200 flex flex-col p-5">
-      <h2 class="text-xl font-bold mb-5 text-gray-800">CodeNook Studio 🌌</h2>
+      <h2 class="text-xl font-bold mb-5 text-gray-800">Espace Codage</h2>
 
       <button type="button" class="w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition">
         Nouvelle tâche
       </button>
-<div class="mt-4 relative">
+
+      <div class="mt-4 relative">
         <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
           <i data-feather="search" class="w-4 h-4"></i>
         </span>
@@ -75,16 +77,17 @@
           Publié
         </button>
       </div>
-      <div class="h-[600px] w-full border border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-500 text-lg">
-        Aperçu prêt. Cliquez pour charger.
+
+      <div class="content-area h-[600px] w-full border border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-500 text-lg">
+        Échec du chargement de l'aperçu.
       </div>
-</main>
+    </main>
   </div>
 
   <script src="script.js"></script>
   <script>
     feather.replace();
   </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>