import React, { useState } from 'react';

import { Plus, Search, Library, Share2, Menu, X, Code2, Settings, LogOut, Home, FolderOpen, MessageSquare, Send, ChevronRight, Star, Clock, Zap, Copy, Download, Eye } from 'lucide-react';

export default function EspaceCodage() {
const [sidebarOpen, setSidebarOpen] = useState(true);
const [currentView, setCurrentView] = useState('home');
const [userInput, setUserInput] = useState('');
const [chatActive, setChatActive] = useState(false);
const [messages, setMessages] = useState([]);
const [generatedCode, setGeneratedCode] = useState(null);
const [selectedProject, setSelectedProject] = useState(null);
const [projects, setProjects] = useState([
{ id: 1, name: 'Portfolio Pro', status: 'active', timestamp: '2 jours', code: '' },
{ id: 2, name: 'E-shop Mode', status: 'active', timestamp: '5 jours', code: '' },
{ id: 3, name: 'App SaaS', status: 'archived', timestamp: '10 jours', code: '' }
]);

// Rosalinda - IA intelligente pour générer du code
const rosalinda = async (userText) => {
try {
// Appel à l'API Claude pour générer du code complet
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 2000,
system: `Tu es Rosalinda, une IA senior full-stack spécialisée dans la génération de code complet et professionnel.

Tu dois :
1. Comprendre exactement ce que l'utilisateur demande
2. Générer du code HTML/CSS/JavaScript complet et fonctionnel
3. Générer du code React moderne si demandé
4. Expliquer ton code clairement en français

Format de réponse :
- D'abord une explication courte
- Ensuite le code complet dans un bloc \`\`\`language
- Toujours du code prêt à l'emploi, sans placeholders

Sois créatif, professionnel et produis du vrai code !`,
messages: [
{ role: "user", content: userText }
],
})
});

const data = await response.json();
return data.content[0]?.text || "Erreur de génération";
} catch (error) {
return `Je vais générer du code pour: ${userText}. Voici une solution professionnelle !`;
}
};

const handleUserMessage = async (text) => {
if (!text.trim()) return;

// Ajouter le message de l'utilisateur
const newMessages = [...messages, {
id: Date.now(),
user: 'Vous',
type: 'user',
text: text,
time: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
}];
setMessages(newMessages);

// Rosalinda génère une réponse intelligente
let rosalindaResponse = '';

// Appel à Rosalinda pour générer du code ou répondre
if (text.toLowerCase().includes('site') ||
text.toLowerCase().includes('code') ||
text.toLowerCase().includes('html') ||
text.toLowerCase().includes('app') ||
text.toLowerCase().includes('portfolio') ||
text.toLowerCase().includes('e-shop') ||
text.toLowerCase().includes('landing')) {

rosalindaResponse = await rosalinda(text);

// Extraire le code généré si présent
const codeMatch = rosalindaResponse.match(/```(?:html|jsx?|css|javascript)?\n([\s\S]*?)```/);
if (codeMatch) {
setGeneratedCode({
language: text.includes('react') ? 'jsx' : 'html',
code: codeMatch[1],
description: text
});
}
} else {
// Réponse standard si pas de demande de code
rosalindaResponse = await rosalinda(`Réponds brièvement (2-3 phrases max) en français à: ${text}`);
}

// Ajouter la réponse de Rosalinda
setTimeout(() => {
setMessages(prev => [...prev, {
id: Date.now() + 1,
user: 'Rosalinda',
type: 'assistant',
text: rosalindaResponse,
time: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
}]);
}, 500);

setUserInput('');
};

const copyCode = (code) => {
navigator.clipboard.writeText(code);
alert('Code copié ! ✓');
};

const downloadCode = (code, filename = 'code.html') => {
const element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(code));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
};

const saveProjectCode = () => {
if (generatedCode && selectedProject) {
const updatedProjects = projects.map(p =>
p.id === selectedProject
? { ...p, code: generatedCode.code }
: p
);
setProjects(updatedProjects);
alert('Projet sauvegardé ! ✓');
}
};

return (
<div className="flex h-screen bg-gray-50">
{/* Sidebar */}
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white border-r border-gray-200 transition-all duration-300 flex flex-col`}>
{/* Logo */}
<div className="p-6 flex items-center justify-between border-b border-gray-200">
{sidebarOpen && (
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">
EC
</div>
<div>
<h1 className="font-bold text-gray-900">Espace Codage</h1>
<p className="text-xs text-gray-500">Workspace Rosalinda</p>
</div>
</div>
)}
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="p-2 hover:bg-gray-100 rounded-lg transition"
>
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
</button>
</div>

{/* New Task */}
{sidebarOpen && (
<div className="p-4 border-b border-gray-200">
<button className="w-full flex items-center justify-center space-x-2 bg-gray-900 text-white py-3 rounded-lg hover:bg-gray-800 transition font-semibold">
<Plus size={20} />
<span>Nouvelle tâche</span>
</button>
</div>
)}

{/* Search */}
{sidebarOpen && (
<div className="p-4 border-b border-gray-200">
<div className="relative">
<Search size={18} className="absolute left-3 top-3 text-gray-400" />
<input
type="text"
placeholder="Rechercher..."
className="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
/>
</div>
</div>
)}

{/* Navigation */}
<nav className="flex-1 p-4 space-y-2">
{[
{ id: 'home', icon: Home, label: 'Accueil' },
{ id: 'chat', icon: MessageSquare, label: 'Chat Rosalinda' },
{ id: 'projects', icon: FolderOpen, label: 'Mes Projets' },
{ id: 'code', icon: Code2, label: 'Code Généré' },
{ id: 'library', icon: Library, label: 'Bibliothèque' }
].map(item => (
<button
key={item.id}
onClick={() => {
setCurrentView(item.id);
if (item.id === 'chat') setChatActive(true);
}}
className={`w-full flex items-center space-x-3 p-3 rounded-lg transition ${
currentView === item.id
? 'bg-blue-100 text-blue-900'
: 'text-gray-600 hover:bg-gray-50'
}`}
>
<item.icon size={20} />
{sidebarOpen && <span>{item.label}</span>}
</button>
))}
</nav>

{/* Projects */}
{sidebarOpen && (
<div className="p-4 border-t border-gray-200">
<h3 className="font-semibold text-gray-900 mb-3 text-sm">Vos Projets</h3>
<div className="space-y-2">
{projects.map(project => (
<button
key={project.id}
onClick={() => setSelectedProject(project.id)}
className={`w-full text-left p-3 rounded-lg transition text-sm ${
selectedProject === project.id
? 'bg-green-100 border-l-4 border-green-500'
: 'hover:bg-gray-50'
}`}
>
<div className="flex items-center space-x-2">
<div className={`w-2 h-2 rounded-full ${project.status === 'active' ? 'bg-green-500' : 'bg-gray-300'}`}></div>
<span className="font-medium">{project.name}</span>
</div>
<p className="text-xs text-gray-500 mt-1">{project.timestamp}</p>
</button>
))}
</div>
</div>
)}

{/* Footer */}
{sidebarOpen && (
<div className="p-4 border-t border-gray-200 space-y-2">
<button className="w-full flex items-center space-x-3 p-3 text-gray-600 hover:bg-gray-50 rounded-lg transition text-sm">
<Settings size={18} />
<span>Paramètres</span>
</button>
<button className="w-full flex items-center space-x-3 p-3 text-gray-600 hover:bg-gray-50 rounded-lg transition text-sm">
<LogOut size={18} />
<span>Déconnexion</span>
</button>
</div>
)}
</div>

{/* Main Content */}
<div className="flex-1 flex flex-col">
{/* Header */}
<div className="bg-white border-b border-gray-200 p-6 sticky top-0 z-10">
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-bold text-gray-900">
{currentView === 'home' && '🚀 Bienvenue dans Espace C

README.md

@@ -1,10 +1,13 @@
 ---
-title: Rosalinda Code Wizard
-emoji: 🌖
-colorFrom: red
-colorTo: purple
+title: Rosalinda Code Wizard 🧙‍♀️
+colorFrom: purple
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/chat.js

@@ -0,0 +1,160 @@
+class CustomChat extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                }
+                
+                .chat-container {
+                    flex: 1;
+                    background: white;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.75rem;
+                    margin-bottom: 1.5rem;
+                    overflow-y: auto;
+                    padding: 1.5rem;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1rem;
+                }
+                
+                .empty-state {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100%;
+                    text-align: center;
+                }
+                
+                .empty-icon {
+                    width: 5rem;
+                    height: 5rem;
+                    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 2.5rem;
+                    margin: 0 auto 1rem;
+                }
+                
+                .empty-title {
+                    font-size: 1.125rem;
+                    font-weight: 700;
+                    color: #111827;
+                    margin-bottom: 0.5rem;
+                }
+                
+                .empty-description {
+                    color: #6b7280;
+                    margin-bottom: 0.25rem;
+                }
+                
+                .empty-hint {
+                    color: #9ca3af;
+                    font-size: 0.875rem;
+                }
+                
+                .message-user {
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                
+                .message-ai {
+                    display: flex;
+                    justify-content: flex-start;
+                }
+                
+                .message-bubble {
+                    max-width: 42rem;
+                    padding: 1rem;
+                    border-radius: 1rem;
+                    font-size: 0.875rem;
+                    line-height: 1.5;
+                    white-space: pre-wrap;
+                }
+                
+                .user-bubble {
+                    background: #3b82f6;
+                    color: white;
+                    border-bottom-right-radius: 0;
+                }
+                
+                .ai-bubble {
+                    background: #f3f4f6;
+                    color: #111827;
+                    border-bottom-left-radius: 0;
+                }
+                
+                .message-time {
+                    font-size: 0.75rem;
+                    margin-top: 0.5rem;
+                }
+                
+                .user-time {
+                    color: #bfdbfe;
+                }
+                
+                .ai-time {
+                    color: #9ca3af;
+                }
+                
+                .input-container {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    background: white;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.75rem;
+                    padding: 1rem;
+                }
+                
+                .chat-input {
+                    flex: 1;
+                    border: none;
+                    outline: none;
+                    font-size: 0.875rem;
+                }
+                
+                .send-btn {
+                    padding: 0.75rem;
+                    background: #3b82f6;
+                    color: white;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                }
+                
+                .send-btn:hover {
+                    background: #2563eb;
+                }
+            </style>
+            
+            <div class="chat-container" id="chat-messages">
+                <div class="empty-state">
+                    <div>
+                        <div class="empty-icon">🤖</div>
+                        <h3 class="empty-title">Rosalinda</h3>
+                        <p class="empty-description">Votre IA générateur de code 100% propriétaire</p>
+                        <p class="empty-hint">Demandez n'importe quoi pour générer du code !</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="input-container">
+                <input type="text" class="chat-input" id="chat-input" placeholder="Décrivez votre projet, Rosalinda génère le code...">
+                <button class="send-btn" onclick="sendMessage()">
+                    <i data-feather="send"></i>
+                </button>
+            </div>
+        `;
+        
+        feather.replace();
+    }
+}
+
+customElements.define('custom-chat', CustomChat);

components/navbar.js

@@ -0,0 +1,117 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background: white;
+                    border-bottom: 1px solid #e5e7eb;
+                    padding: 1.5rem;
+                    position: sticky;
+                    top: 0;
+                    z-index: 10;
+                }
+                
+                .container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    max-width: 100%;
+                }
+                
+                h2 {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #111827;
+                }
+                
+                .buttons {
+                    display: flex;
+                    gap: 0.5rem;
+                }
+                
+                button {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.5rem;
+                    font-size: 0.875rem;
+                    font-weight: 600;
+                    transition: all 0.2s;
+                }
+                
+                .copy-btn {
+                    background: #2563eb;
+                    color: white;
+                }
+                
+                .copy-btn:hover {
+                    background: #1d4ed8;
+                }
+                
+                .download-btn {
+                    background: #059669;
+                    color: white;
+                }
+                
+                .download-btn:hover {
+                    background: #047857;
+                }
+            </style>
+            <div class="container">
+                <div>
+                    <h2 id="view-title">🚀 Bienvenue dans Rosalinda</h2>
+                </div>
+                <div class="buttons" id="action-buttons"></div>
+            </div>
+        `;
+        
+        // Observe attribute changes
+        const observer = new MutationObserver(() => this.updateTitle());
+        observer.observe(this, { attributes: true });
+    }
+    
+    static get observedAttributes() {
+        return ['current-view'];
+    }
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'current-view') {
+            this.updateTitle();
+        }
+    }
+    
+    updateTitle() {
+        const view = this.getAttribute('current-view') || 'home';
+        const titleMap = {
+            'home': '🚀 Bienvenue dans Rosalinda',
+            'chat': '💬 Chat avec Rosalinda',
+            'projects': '📁 Mes Projets',
+            'code': '💻 Code Généré',
+            'library': '📚 Bibliothèque'
+        };
+        
+        const title = this.shadowRoot.getElementById('view-title');
+        if (title) title.textContent = titleMap[view];
+        
+        const buttons = this.shadowRoot.getElementById('action-buttons');
+        if (buttons) {
+            buttons.innerHTML = '';
+            if (view === 'code') {
+                buttons.innerHTML = `
+                    <button class="copy-btn">
+                        <i data-feather="copy"></i> Copier
+                    </button>
+                    <button class="download-btn">
+                        <i data-feather="download"></i> Télécharger
+                    </button>
+                `;
+                feather.replace();
+            }
+        }
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/sidebar.js

@@ -0,0 +1,335 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        
+        // Observe attribute changes
+        const observer = new MutationObserver(() => this.render());
+        observer.observe(this, { attributes: true });
+    }
+    
+    static get observedAttributes() {
+        return ['collapsed', 'active-view'];
+    }
+    
+    render() {
+        const collapsed = this.hasAttribute('collapsed');
+        const activeView = this.getAttribute('active-view') || 'home';
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background: white;
+                    border-right: 1px solid #e5e7eb;
+                    transition: all 0.3s;
+                    width: ${collapsed ? '5rem' : '18rem'};
+                    height: 100vh;
+                    overflow-y: auto;
+                    flex-shrink: 0;
+                }
+                
+                .logo {
+                    padding: 1.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                
+                .logo-content {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                }
+                
+                .logo-icon {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+                    border-radius: 0.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-weight: bold;
+                    font-size: 1.125rem;
+                }
+                
+                .logo-text h1 {
+                    font-weight: 700;
+                    color: #111827;
+                    font-size: 1rem;
+                }
+                
+                .logo-text p {
+                    font-size: 0.75rem;
+                    color: #6b7280;
+                }
+                
+                .toggle-btn {
+                    padding: 0.5rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                }
+                
+                .toggle-btn:hover {
+                    background: #f3f4f6;
+                }
+                
+                .new-task {
+                    padding: 1rem;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                
+                .new-task-btn {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 0.5rem;
+                    background: #111827;
+                    color: white;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    font-weight: 600;
+                    transition: all 0.2s;
+                }
+                
+                .new-task-btn:hover {
+                    background: #1f2937;
+                }
+                
+                .search {
+                    padding: 1rem;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                
+                .search-container {
+                    position: relative;
+                }
+                
+                .search-icon {
+                    position: absolute;
+                    left: 0.75rem;
+                    top: 0.75rem;
+                    color: #9ca3af;
+                }
+                
+                .search-input {
+                    width: 100%;
+                    padding-left: 2.5rem;
+                    padding-right: 1rem;
+                    padding-top: 0.5rem;
+                    padding-bottom: 0.5rem;
+                    background: #f9fafb;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.5rem;
+                    font-size: 0.875rem;
+                    outline: none;
+                }
+                
+                .search-input:focus {
+                    border-color: #3b82f6;
+                    box-shadow: 0 0 0 2px #bfdbfe;
+                }
+                
+                nav {
+                    flex: 1;
+                    padding: 1rem;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                
+                .nav-item {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                    font-size: 0.875rem;
+                    color: #4b5563;
+                }
+                
+                .nav-item:hover {
+                    background: #f3f4f6;
+                }
+                
+                .nav-item.active {
+                    background: #dbeafe;
+                    color: #1d4ed8;
+                }
+                
+                .projects {
+                    padding: 1rem;
+                    border-top: 1px solid #e5e7eb;
+                }
+                
+                .projects-title {
+                    font-weight: 600;
+                    color: #111827;
+                    margin-bottom: 0.75rem;
+                    font-size: 0.875rem;
+                }
+                
+                .project-item {
+                    width: 100%;
+                    text-align: left;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                    font-size: 0.875rem;
+                    margin-bottom: 0.5rem;
+                }
+                
+                .project-item:hover {
+                    background: #f3f4f6;
+                }
+                
+                .project-item.active {
+                    background: #d1fae5;
+                    border-left: 4px solid #10b981;
+                }
+                
+                .project-status {
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    border-radius: 50%;
+                    display: inline-block;
+                    margin-right: 0.5rem;
+                }
+                
+                .project-status.active {
+                    background: #10b981;
+                }
+                
+                .project-status.archived {
+                    background: #9ca3af;
+                }
+                
+                .project-name {
+                    font-weight: 500;
+                }
+                
+                .project-time {
+                    font-size: 0.75rem;
+                    color: #6b7280;
+                    margin-top: 0.25rem;
+                }
+                
+                .footer {
+                    padding: 1rem;
+                    border-top: 1px solid #e5e7eb;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                
+                .footer-item {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                    font-size: 0.875rem;
+                    color: #4b5563;
+                }
+                
+                .footer-item:hover {
+                    background: #f3f4f6;
+                }
+            </style>
+            
+            <div class="logo">
+                ${!collapsed ? `
+                    <div class="logo-content">
+                        <div class="logo-icon">RC</div>
+                        <div class="logo-text">
+                            <h1>Rosalinda</h1>
+                            <p>Workspace Codage</p>
+                        </div>
+                    </div>
+                ` : `
+                    <div class="logo-icon">RC</div>
+                `}
+                <button class="toggle-btn" onclick="document.querySelector('custom-sidebar').toggleAttribute('collapsed')">
+                    <i data-feather="${collapsed ? 'menu' : 'x'}"></i>
+                </button>
+            </div>
+            
+            ${!collapsed ? `
+                <div class="new-task">
+                    <button class="new-task-btn">
+                        <i data-feather="plus"></i>
+                        <span>Nouvelle tâche</span>
+                    </button>
+                </div>
+                
+                <div class="search">
+                    <div class="search-container">
+                        <i data-feather="search" class="search-icon"></i>
+                        <input type="text" placeholder="Rechercher..." class="search-input">
+                    </div>
+                </div>
+            ` : ''}
+            
+            <nav>
+                ${this.createNavItem('home', 'Accueil', 'home', activeView === 'home', collapsed)}
+                ${this.createNavItem('chat', 'Chat Rosalinda', 'message-square', activeView === 'chat', collapsed)}
+                ${this.createNavItem('projects', 'Mes Projets', 'folder', activeView === 'projects', collapsed)}
+                ${this.createNavItem('code', 'Code Généré', 'code', activeView === 'code', collapsed)}
+                ${this.createNavItem('library', 'Bibliothèque', 'book', activeView === 'library', collapsed)}
+            </nav>
+            
+            ${!collapsed ? `
+                <div class="projects">
+                    <h3 class="projects-title">Vos Projets</h3>
+                    ${this.createProjectItem(1, 'Portfolio Pro', 'active', '2 jours', false)}
+                    ${this.createProjectItem(2, 'E-shop Mode', 'active', '5 jours', false)}
+                    ${this.createProjectItem(3, 'App SaaS', 'archived', '10 jours', false)}
+                </div>
+                
+                <div class="footer">
+                    <button class="footer-item">
+                        <i data-feather="settings"></i>
+                        ${!collapsed ? '<span>Paramètres</span>' : ''}
+                    </button>
+                    <button class="footer-item">
+                        <i data-feather="log-out"></i>
+                        ${!collapsed ? '<span>Déconnexion</span>' : ''}
+                    </button>
+                </div>
+            ` : ''}
+        `;
+        
+        feather.replace();
+    }
+    
+    createNavItem(id, label, icon, isActive, collapsed) {
+        return `
+            <button onclick="setView('${id}')" class="nav-item ${isActive ? 'active' : ''}">
+                <i data-feather="${icon}"></i>
+                ${!collapsed ? `<span>${label}</span>` : ''}
+            </button>
+        `;
+    }
+    
+    createProjectItem(id, name, status, time, isActive) {
+        return `
+            <button onclick="setSelectedProject(${id})" class="project-item ${isActive ? 'active' : ''}">
+                <div class="flex items-center">
+                    <span class="project-status ${status}"></span>
+                    <span class="project-name">${name}</span>
+                </div>
+                <p class="project-time">${time}</p>
+            </button>
+        `;
+    }
+}
+
+customElements.define('custom-sidebar', CustomSidebar);

index.html

@@ -1,19 +1,122 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rosalinda Code Wizard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/chat.js"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="flex h-screen">
+        <!-- Sidebar -->
+        <custom-sidebar></custom-sidebar>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <!-- Navbar -->
+            <custom-navbar></custom-navbar>
+
+            <!-- Dynamic Content -->
+            <main class="flex-1 overflow-y-auto p-6">
+                <div id="home-view" class="max-w-5xl mx-auto">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <!-- Left - Chat -->
+                        <div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+                            <h3 class="text-xl font-bold text-gray-900 mb-4">Demander à Rosalinda</h3>
+                            <div class="space-y-3">
+                                <p class="text-sm text-gray-600">Exemples:</p>
+                                <button onclick="setView('chat')" class="w-full text-left p-3 bg-gray-50 hover:bg-blue-50 rounded-lg transition border border-gray-200 text-sm">
+                                    ✨ Créer un site portfolio
+                                </button>
+                                <button onclick="setView('chat')" class="w-full text-left p-3 bg-gray-50 hover:bg-blue-50 rounded-lg transition border border-gray-200 text-sm">
+                                    🛍️ Générer une page e-shop
+                                </button>
+                                <button onclick="setView('chat')" class="w-full text-left p-3 bg-gray-50 hover:bg-blue-50 rounded-lg transition border border-gray-200 text-sm">
+                                    📱 Faire une landing page
+                                </button>
+                                <button onclick="setView('chat')" class="w-full text-left p-3 bg-gray-50 hover:bg-blue-50 rounded-lg transition border border-gray-200 text-sm">
+                                    💻 Code React moderne
+                                </button>
+                                <button onclick="setView('chat')" class="w-full text-left p-3 bg-gray-50 hover:bg-blue-50 rounded-lg transition border border-gray-200 text-sm">
+                                    🎨 Dashboard admin
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Right - Features -->
+                        <div class="space-y-4">
+                            <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl p-6 text-white shadow-lg">
+                                <h3 class="text-lg font-bold mb-2">🤖 Rosalinda - Votre IA</h3>
+                                <p class="text-sm">Génère du code complet, professionnel et fonctionnel instantanément. Propriétaire à 100%.</p>
+                            </div>
+
+                            <div class="bg-white rounded-xl border border-gray-200 p-6">
+                                <h4 class="font-bold text-gray-900 mb-3">Capacités:</h4>
+                                <ul class="space-y-2 text-sm text-gray-600">
+                                    <li>✅ HTML/CSS/JavaScript complet</li>
+                                    <li>✅ React & composants modernes</li>
+                                    <li>✅ Design responsive</li>
+                                    <li>✅ Intégrations API</li>
+                                    <li>✅ Export code prêt à l'emploi</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="chat-view" class="hidden max-w-4xl mx-auto">
+                    <custom-chat></custom-chat>
+                </div>
+
+                <div id="projects-view" class="hidden">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition">
+                            <div class="h-32 bg-gradient-to-br from-blue-500 to-purple-600"></div>
+                            <div class="p-4">
+                                <h4 class="font-bold text-gray-900">Portfolio Pro</h4>
+                                <p class="text-xs text-gray-500 mb-4">2 jours</p>
+                                <div class="flex gap-2">
+                                    <button onclick="setView('chat')" class="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-semibold text-sm">
+                                        Éditer
+                                    </button>
+                                    <button onclick="setView('code')" class="flex-1 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold text-sm">
+                                        Code
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- More projects... -->
+                    </div>
+                </div>
+
+                <div id="code-view" class="hidden max-w-6xl mx-auto">
+                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
+                        <div class="bg-gray-900 text-gray-100 p-4 overflow-x-auto">
+                            <pre class="text-sm font-mono" id="generated-code"></pre>
+                        </div>
+                    </div>
+                    <button class="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold">
+                        💾 Sauvegarder dans le projet
+                    </button>
+                </div>
+
+                <div id="library-view" class="hidden grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <!-- Library items... -->
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,50 @@
+// View management
+function setView(view) {
+    document.querySelectorAll('[id$="-view"]').forEach(el => {
+        el.classList.add('hidden');
+    });
+    document.getElementById(`${view}-view`).classList.remove('hidden');
+    
+    // Update active state in sidebar
+    document.querySelectorAll('custom-sidebar').forEach(sidebar => {
+        sidebar.setAttribute('active-view', view);
+    });
+}
+
+// Chat functionality
+let messages = [];
+
+function sendMessage() {
+    const input = document.getElementById('chat-input');
+    if (!input.value.trim()) return;
+
+    // Add user message
+    const userMessage = {
+        id: Date.now(),
+        user: 'Vous',
+        type: 'user',
+        text: input.value,
+        time: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+    };
+    messages.push(userMessage);
+    renderMessages();
+    input.value = '';
+
+    // Simulate AI response
+    setTimeout(() => {
+        const aiResponse = {
+            id: Date.now() + 1,
+            user: 'Rosalinda',
+            type: 'assistant',
+            text: generateResponse(input.value),
+            time: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+        };
+        messages.push(aiResponse);
+        renderMessages();
+    }, 1000);
+}
+
+function generateResponse(userInput) {
+    // This would be replaced with actual API calls to Claude or similar
+    if (userInput.includes('portfolio')) {
+        return "Voici un code HTML/CSS complet pour un portfolio professionnel:\n

style.css

@@ -1,28 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Animation for chat messages */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.chat-message {
+    animation: fadeIn 0.3s ease-out;
 }
+
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* Pulse animation for loading */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}