Spaces:

Abmacode12
/

espace-codage

Configuration error

App Files Files Community

Abmacode12 commited on Dec 16, 2025

Commit

555bfe6

verified ·

1 Parent(s): f70edbb

html

Browse files

<!DOCTYPE html>
<html lang="fr" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interface d'Éditeur de Code Sombre</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<aside class="sidebar">
<h2>Projets</h2>
<ul>
<li>Fichier 1.html</li>
<li class="active">Fichier 2.css</li>
<li>Fichier 3.js</li>
</ul>
</aside>
<main class="main-content">
<div class="header">
<span>Fichier 2.css</span>
</div>
<textarea class="code-editor" readonly>
.container {
display: flex;
height: 100vh;
background-color: var(--bg-primary);
}

.sidebar {
width: 250px;
background-color: var(--bg-secondary);
color: var(--text-light);
padding: 20px;
border-right: 1px solid var(--border-color);
}

.code-editor {
background-color: var(--bg-primary);
color: var(--text-normal);
border: none;
width: 100%;
height: calc(100% - 40px); /* Adjust for header height */
padding: 20px;
font-family: monospace;
resize: none;
outline: none;
}
</textarea>
</main>
</div>
</body>
</html>
Utilisez le code avec précaution.

Code CSS (styles.css)
Ce code définit les variables de couleur pour un thème sombre professionnel, comme recommandé par les principes de Material Design pour les thèmes sombres.
css
:root {
--bg-primary: #121212; /* Couleur de fond principale sombre */
--bg-secondary: #1e1e1e; /* Couleur de fond latérale */
--text-normal: #e0e0e0; /* Texte principal clair */
--text-light: #b0b0b0; /* Texte secondaire/léger */
--border-color: #444; /* Ligne de séparation subtile */
--accent-color: #007acc; /* Couleur d'accentuation (bleu pour la sélection) */
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container {
display: flex;
height: 100vh;
background-color: var(--bg-primary);
}

.sidebar {
width: 250px;
background-color: var(--bg-secondary);
color: var(--text-light);
padding: 20px;
border-right: 1px solid var(--border-color);
}

.sidebar h2 {
color: var(--text-normal);
margin-bottom: 15px;
}

.sidebar ul {
list-style: none;
}

.sidebar li {
padding: 8px 0;
cursor: pointer;
border-radius: 4px;
padding-left: 10px;
}

.sidebar li.active, .sidebar li:hover {
background-color: var(--border-color);
color: var(--accent-color);
}

.main-content {
flex-grow: 1;
}

.header {
background-color: var(--bg-secondary);
color: var(--text-light);
padding: 10px 20px;
border-bottom: 1px solid var(--border-color);
font-family: sans-serif;
font-size: 0.9rem;
}

.code-editor {
background-color: var(--bg-primary);
color: var(--text-normal);
border: none;
width: 100%;
height: calc(100% - 40px);
padding: 20px;
font-family: monospace;
resize: none;
outline: none;
line-height: 1.5;
}

Files changed (6) hide show

components/chat.js +7 -4
components/header.js +4 -4
components/sidebar.js +15 -11
index.html +4 -2
script.js +37 -212
server/package.json +5 -1

components/chat.js CHANGED Viewed

@@ -19,14 +19,17 @@ connectedCallback() {
     this.shadowRoot.innerHTML = `
       <style>
         :host {
-          display: flex;
           flex-direction: column;
-          height: 100vh;
           background: #0b0f19;
           color: white;
           position: relative;
           width: 100%;
         }
         .chat-container {
           flex: 1;
           overflow-y: auto;
@@ -168,7 +171,7 @@ connectedCallback() {
               <path d="M6 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
             </svg>
           </button>
-          <input type="text" class="message-input" placeholder="Envoyer un message à Espace Codage" id="messageInput">
           <button class="action-button mic-button" title="Saisie vocale" id="micButton">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
               <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z" stroke="currentColor" stroke-width="2" />
@@ -187,7 +190,7 @@ connectedCallback() {
         </div>
         <div class="files-info" id="filesInfo"></div>
       </div>
-    `;
     this._setupEventListeners();
     this._startLogsSimulation();

     this.shadowRoot.innerHTML = `
       <style>
         :host {
+          display: none;
           flex-direction: column;
+          height: 100%;
           background: #0b0f19;
           color: white;
           position: relative;
           width: 100%;
         }
+        :host(.active) {
+          display: flex;
+        }
         .chat-container {
           flex: 1;
           overflow-y: auto;
               <path d="M6 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
             </svg>
           </button>
+          <input type="text" class="message-input" placeholder="Envoyer un message à Rosalinda" id="messageInput">
           <button class="action-button mic-button" title="Saisie vocale" id="micButton">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
               <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z" stroke="currentColor" stroke-width="2" />
         </div>
         <div class="files-info" id="filesInfo"></div>
       </div>
+`;
     this._setupEventListeners();
     this._startLogsSimulation();

components/header.js CHANGED Viewed

@@ -36,14 +36,14 @@ class CustomHeader extends HTMLElement {
         }
       </style>
       <div class="header-content">
-        <div class="logo">Mon Site Indépendant</div>
         <div class="nav-links">
           <a href="#" class="nav-link">Accueil</a>
-          <a href="#" class="nav-link">Projets</a>
-          <a href="#" class="nav-link">Rosalinda</a>
           <a href="#" class="nav-link">Contact</a>
         </div>
-      </div>
     `;
   }
 }

         }
       </style>
       <div class="header-content">
+        <div class="logo">Rosalinda IA</div>
         <div class="nav-links">
           <a href="#" class="nav-link">Accueil</a>
+          <a href="#" class="nav-link" data-target="code-editor">Éditeur</a>
+          <a href="#" class="nav-link" data-target="rosalinda-chat">Chat</a>
           <a href="#" class="nav-link">Contact</a>
         </div>
+</div>
     `;
   }
 }

components/sidebar.js CHANGED Viewed

@@ -81,24 +81,28 @@ class CustomSidebar extends HTMLElement {
         <i data-feather="book"></i>
         <span>📚 BIBLIOTHÈQUE</span>
       </div>
-      <div class="menu-item">
         <i data-feather="folder"></i>
         <span>📁 MES PROJETS</span>
       </div>
       <div class="submenu">
-        <div class="submenu-item">
-          <i data-feather="cpu"></i>
-          <span>🤖 ChatGPT Antibes</span>
         </div>
-        <div class="submenu-item">
-          <i data-feather="globe"></i>
-          <span>🌐 Intégration Sécurisée</span>
-</div>
-        <div class="submenu-item">
-          <i data-feather="video"></i>
-          <span>🎥 Génération Vidéo</span>
         </div>
       </div>
       <div class="menu-item">
         <i data-feather="check-square"></i>
         <span>✅ TOUTES LES TÂCHES</span>

         <i data-feather="book"></i>
         <span>📚 BIBLIOTHÈQUE</span>
       </div>
+      <div class="menu-item" data-target="code-editor">
         <i data-feather="folder"></i>
         <span>📁 MES PROJETS</span>
       </div>
       <div class="submenu">
+        <div class="submenu-item" data-target="code-editor">
+          <i data-feather="file-text"></i>
+          <span>Fichier 1.html</span>
+        </div>
+        <div class="submenu-item active" data-target="code-editor">
+          <i data-feather="file"></i>
+          <span>Fichier 2.css</span>
         </div>
+        <div class="submenu-item" data-target="code-editor">
+          <i data-feather="code"></i>
+          <span>Fichier 3.js</span>
         </div>
       </div>
+      <div class="menu-item" data-target="rosalinda-chat">
+        <i data-feather="message-circle"></i>
+        <span>💬 CHAT ROSALINDA</span>
+      </div>
       <div class="menu-item">
         <i data-feather="check-square"></i>
         <span>✅ TOUTES LES TÂCHES</span>

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mon Site Indépendant</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -17,10 +17,11 @@
             <custom-header></custom-header>
             <main class="flex-1 overflow-hidden">
                 <custom-chat id="rosalinda-chat"></custom-chat>
             </main>
             <custom-footer></custom-footer>
         </div>
-        <custom-code-preview></custom-code-preview>
     </div>
     <script>
@@ -30,6 +31,7 @@
     <script src="components/header.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/chat.js"></script>
     <script src="components/code-preview.js"></script>
     <script src="components/file-upload.js"></script>
     <script src="components/partnership-agreement.js"></script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rosalinda IA - Espace Codage Indépendant</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
             <custom-header></custom-header>
             <main class="flex-1 overflow-hidden">
                 <custom-chat id="rosalinda-chat"></custom-chat>
+                <custom-code-editor></custom-code-editor>
             </main>
             <custom-footer></custom-footer>
         </div>
+<custom-code-preview></custom-code-preview>
     </div>
     <script>
     <script src="components/header.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/chat.js"></script>
+    <script src="components/code-editor.js"></script>
     <script src="components/code-preview.js"></script>
     <script src="components/file-upload.js"></script>
     <script src="components/partnership-agreement.js"></script>

script.js CHANGED Viewed

@@ -21,225 +21,50 @@ document.addEventListener('DOMContentLoaded', function() {
     }, 2000);
   });
-// Rosalinda IA Chat Functionality
-  const chatElement = document.querySelector('custom-chat');
-  if (chatElement) {
-    const shadow = chatElement.shadowRoot;
-    const chatContainer = shadow.getElementById('chat');
-    const messageInput = shadow.getElementById('messageInput');
-    const sendButton = shadow.getElementById('sendButton');
-    const fileInput = shadow.getElementById('fileInput');
-    const fileButton = shadow.getElementById('fileButton');
-    // File upload modal
-    const fileButton = shadowRoot.getElementById('fileButton');
-    const fileUpload = document.createElement('custom-file-upload');
-    fileButton.addEventListener('click', () => {
-      document.body.appendChild(fileUpload);
-      setTimeout(() => {
-        document.addEventListener('click', (e) => {
-          if (!fileUpload.contains(e.target) && e.target !== fileButton) {
-            fileUpload.remove();
-          }
-        }, { once: true });
-      }, 0);
-      feather.replace();
-    });
-    // Connect apps
-    const connectButton = shadowRoot.getElementById('connectButton');
-    connectButton.addEventListener('click', () => {
-      alert('Connecter des applications - Cette fonctionnalité sera implémentée bientôt');
-    });
-    // Microphone
-    const micButton = shadowRoot.getElementById('micButton');
-    micButton.addEventListener('click', () => {
-      if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
-        micButton.classList.toggle('listening');
-        if (micButton.classList.contains('listening')) {
-          startSpeechRecognition();
         } else {
-          stopSpeechRecognition();
         }
-      } else {
-        alert('La reconnaissance vocale n\'est pas supportée par votre navigateur');
       }
     });
-    // Send message
-    function sendMessage() {
-const message = messageInput.value.trim();
-      if (message) {
-        addMessage('user', message);
-        messageInput.value = '';
-        // Simulate Rosalinda's response
-        setTimeout(() => {
-          const responses = [
-            "J'ai bien reçu votre message. Que souhaitez-vous créer aujourd'hui ?",
-            "Intéressant ! Voulez-vous que je génère quelque chose pour vous ?",
-            "Je peux vous aider avec des projets, des images ou des vidéos. Dites-moi ce dont vous avez besoin.",
-            "Message reçu. Je suis prête à vous assister dans vos créations."
-          ];
-          const randomResponse = responses[Math.floor(Math.random() * responses.length)];
-          addMessage('ai', randomResponse);
-        }, 1000);
-      }
-    }
-    sendButton.addEventListener('click', sendMessage);
-    messageInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter') sendMessage();
-    });
-    function addMessage(sender, text) {
-      const messageDiv = document.createElement('div');
-      messageDiv.className = `message ${sender}-message`;
-      messageDiv.textContent = text;
-      chatContainer.appendChild(messageDiv);
-      chatContainer.scrollTop = chatContainer.scrollHeight;
-    }
   }
-// Tab switching functionality for code preview
-    const tabs = document.querySelectorAll('custom-code-preview .tab');
-    tabs.forEach(tab => {
-        tab.addEventListener('click', function() {
-            tabs.forEach(t => t.classList.remove('active'));
-            this.classList.add('active');
-        });
-    });
-    // Chat functionality
-    const chat = document.querySelector('custom-chat');
-    if (chat) {
-        const shadowRoot = chat.shadowRoot;
-    // File upload modal
-    const fileButton = shadowRoot.getElementById('fileButton');
-    const fileUpload = document.createElement('custom-file-upload');
-    fileButton.addEventListener('click', () => {
-      document.body.appendChild(fileUpload);
-      setTimeout(() => {
-        document.addEventListener('click', (e) => {
-          if (!fileUpload.contains(e.target) && e.target !== fileButton) {
-            fileUpload.remove();
-          }
-        }, { once: true });
-      }, 0);
-      feather.replace();
-    });
-// Connect apps
-        const connectButton = shadowRoot.getElementById('connectButton');
-        connectButton.addEventListener('click', () => {
-            alert('Connecter des applications - Cette fonctionnalité sera implémentée bientôt');
-        });
-        // Microphone
-        const micButton = shadowRoot.getElementById('micButton');
-        micButton.addEventListener('click', () => {
-            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
-                micButton.classList.toggle('listening');
-                if (micButton.classList.contains('listening')) {
-                    startSpeechRecognition();
-                } else {
-                    stopSpeechRecognition();
-                }
-            } else {
-                alert('La reconnaissance vocale n\'est pas supportée par votre navigateur');
-            }
-        });
-        // Send message
-        const sendButton = shadowRoot.getElementById('sendButton');
-        const messageInput = shadowRoot.getElementById('messageInput');
-        sendButton.addEventListener('click', sendMessage);
-        messageInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') sendMessage();
-        });
-        // Logs simulation
-        const logsContainer = shadowRoot.querySelector('.logs-container');
-        setInterval(() => {
-            const timestamp = new Date().toLocaleTimeString();
-            const logLine = document.createElement('div');
-            logLine.className = 'log-line';
-            logLine.textContent = `Console • ${timestamp} • activité...`;
-            logsContainer.appendChild(logLine);
-            logsContainer.scrollTop = logsContainer.scrollHeight;
-        }, 1400);
-    }
-    let recognition;
-    function startSpeechRecognition() {
-        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        recognition = new SpeechRecognition();
-        recognition.lang = 'fr-FR';
-        recognition.interimResults = true;
-        recognition.continuous = true;
-        recognition.onresult = (event) => {
-            const transcript = Array.from(event.results)
-                .map(result => result[0])
-                .map(result => result.transcript)
-                .join(' ');
-            messageInput.value = transcript;
-        };
-        recognition.onerror = (event) => {
-            console.error('Speech recognition error', event.error);
-            micButton.classList.remove('listening');
-        };
-        recognition.onend = () => {
-            micButton.classList.remove('listening');
-        };
-        recognition.start();
     }
-    function stopSpeechRecognition() {
-        if (recognition) {
-            recognition.stop();
-        }
-    }
-async function sendMessage() {
-        const message = messageInput.value.trim();
-        if (message) {
-            try {
-                const response = await fetch('/api/chat', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        projectId: 'default',
-                        text: message
-                    })
-                });
-const data = await response.json();
-                if (data.ok) {
-                    const conversation = shadowRoot.querySelector('.conversation');
-                    const userMessage = document.createElement('div');
-                    userMessage.className = 'message';
-                    userMessage.textContent = message;
-                    conversation.appendChild(userMessage);
-                    const aiMessage = document.createElement('div');
-                    aiMessage.className = 'message';
-                    aiMessage.textContent = data.reply;
-                    conversation.appendChild(aiMessage);
-                    if (data.toolResult) {
-                        const toolResult = document.createElement('div');
-                        toolResult.className = 'message tool-result';
-                        toolResult.textContent = data.toolResult;
-                        conversation.appendChild(toolResult);
-                    }
-                    conversation.scrollTop = conversation.scrollHeight;
-                }
-            } catch (error) {
-                console.error('Error sending message:', error);
-            }
-            messageInput.value = '';
-        }
     }
 });

     }, 2000);
   });
+  // Navigation entre les vues
+  const views = {
+    'rosalinda-chat': document.querySelector('custom-chat'),
+    'code-editor': document.querySelector('custom-code-editor')
+  };
+  // Fonction pour changer de vue
+  function showView(targetId) {
+    Object.keys(views).forEach(id => {
+      if (views[id]) {
+        if (id === targetId) {
+          views[id].classList.add('active');
         } else {
+          views[id].classList.remove('active');
         }
       }
     });
   }
+  // Événements de navigation
+  document.addEventListener('click', (e) => {
+    const target = e.target.closest('[data-target]');
+    if (target) {
+      e.preventDefault();
+      const targetId = target.getAttribute('data-target');
+      showView(targetId);
     }
+  });
+  // Vue par défaut
+  showView('rosalinda-chat');
+  // Chargement des fichiers sauvegardés
+  const savedFiles = localStorage.getItem('rosalinda-files');
+  if (savedFiles) {
+    try {
+      const files = JSON.parse(savedFiles);
+      const editor = document.querySelector('custom-code-editor');
+      if (editor) {
+        editor._files = files;
+        editor._render();
+      }
+    } catch (e) {
+      console.log('Impossible de charger les fichiers sauvegardés');
     }
+  }
 });

server/package.json CHANGED Viewed

@@ -16,4 +16,8 @@
     "typescript": "^5.6.3"
   }
 }
-```

     "typescript": "^5.6.3"
   }
 }
+```
+```
+___METADATA_START___
+{"repoId":"Abmacode12/espace-codage","isNew":false,"userName":"Abmacode12"}
+___METADATA_END___