Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Espace Codage - Rosalinda</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #e2e8f0; | |
| min-height: 100vh; | |
| padding: 20px; | |
| position: relative; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 280px 1fr 280px; | |
| gap: 20px; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| height: calc(100vh - 40px); | |
| } | |
| /* Colonne de gauche */ | |
| .left-column { | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 16px; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid #334155; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| } | |
| .logo { | |
| font-size: 28px; | |
| font-weight: 800; | |
| margin-bottom: 30px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| font-size: 24px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .task-btn { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| color: white; | |
| border: none; | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 16px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| transition: all 0.3s; | |
| } | |
| .task-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); | |
| } | |
| .menu { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-bottom: 40px; | |
| } | |
| .menu-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .menu-item:hover { | |
| background: rgba(51, 65, 85, 0.5); | |
| } | |
| .menu-item.active { | |
| background: rgba(59, 130, 246, 0.2); | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .projects-section { | |
| margin-top: auto; | |
| } | |
| .section-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: #cbd5e1; | |
| } | |
| .projects-box { | |
| background: rgba(15, 23, 42, 0.6); | |
| border-radius: 12px; | |
| padding: 20px; | |
| border: 1px dashed #475569; | |
| text-align: center; | |
| color: #94a3b8; | |
| } | |
| /* Colonne centrale */ | |
| .center-column { | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 16px; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid #334155; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| } | |
| .header-center { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid #334155; | |
| } | |
| .title-center { | |
| font-size: 24px; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .status-badge { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #4ade80; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .chat-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .avatar { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 25px; | |
| border: 5px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .avatar i { | |
| font-size: 50px; | |
| color: white; | |
| } | |
| .greeting { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .subtitle { | |
| font-size: 18px; | |
| color: #cbd5e1; | |
| margin-bottom: 30px; | |
| max-width: 600px; | |
| line-height: 1.5; | |
| } | |
| .error-box { | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-radius: 12px; | |
| padding: 16px 24px; | |
| margin-top: 30px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| max-width: 600px; | |
| width: 100%; | |
| } | |
| .error-icon { | |
| color: #ef4444; | |
| font-size: 20px; | |
| } | |
| /* Colonne de droite */ | |
| .right-column { | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 16px; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid #334155; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| } | |
| .right-menu { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .right-menu-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px 20px; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| background: rgba(51, 65, 85, 0.3); | |
| } | |
| .right-menu-item:hover { | |
| background: rgba(51, 65, 85, 0.6); | |
| transform: translateX(5px); | |
| } | |
| /* Section paramètres en bas */ | |
| .settings-section { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 20px; | |
| background: rgba(30, 41, 59, 0.9); | |
| border-radius: 12px; | |
| padding: 16px 24px; | |
| border: 1px solid #334155; | |
| max-width: 300px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .settings-section:hover { | |
| background: rgba(30, 41, 59, 1); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); | |
| } | |
| .settings-text { | |
| color: #94a3b8; | |
| font-size: 14px; | |
| } | |
| /* Pied de page */ | |
| .footer { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 15px; | |
| } | |
| .made-with { | |
| background: rgba(30, 41, 59, 0.9); | |
| border-radius: 12px; | |
| padding: 12px 20px; | |
| font-size: 14px; | |
| color: #94a3b8; | |
| border: 1px solid #334155; | |
| } | |
| .chat-input-container { | |
| background: rgba(30, 41, 59, 0.9); | |
| border-radius: 12px; | |
| padding: 12px 20px; | |
| border: 1px solid #334155; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 250px; | |
| } | |
| .chat-input { | |
| background: transparent; | |
| border: none; | |
| color: #cbd5e1; | |
| font-size: 14px; | |
| width: 100%; | |
| outline: none; | |
| } | |
| .chat-input::placeholder { | |
| color: #64748b; | |
| } | |
| .send-btn { | |
| background: transparent; | |
| border: none; | |
| color: #3b82f6; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| /* Section résultat final */ | |
| .result-section { | |
| position: absolute; | |
| bottom: 100px; | |
| right: 20px; | |
| background: rgba(30, 41, 59, 0.9); | |
| border-radius: 12px; | |
| padding: 16px 24px; | |
| border: 1px solid #334155; | |
| max-width: 300px; | |
| } | |
| .result-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| color: #cbd5e1; | |
| } | |
| .result-subtitle { | |
| font-size: 14px; | |
| color: #94a3b8; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1200px) { | |
| .container { | |
| grid-template-columns: 1fr; | |
| height: auto; | |
| gap: 15px; | |
| } | |
| .left-column, .center-column, .right-column { | |
| min-height: 400px; | |
| } | |
| .footer, .settings-section, .result-section { | |
| position: relative; | |
| bottom: auto; | |
| left: auto; | |
| right: auto; | |
| margin-top: 15px; | |
| } | |
| .footer { | |
| align-items: flex-start; | |
| } | |
| } | |
| /* Animation pour l'avatar */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .avatar { | |
| animation: pulse 3s infinite; | |
| } | |
| /* Animation pour le bouton */ | |
| .task-btn { | |
| animation: fadeIn 1s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Colonne de gauche --> | |
| <div class="left-column"> | |
| <div class="logo"> | |
| <i class="fas fa-code"></i> Espace Codage | |
| </div> | |
| <button class="task-btn"> | |
| <i class="fas fa-plus-circle"></i> Nouvelle tâche | |
| </button> | |
| <div class="menu"> | |
| <div class="menu-item active"> | |
| <i class="fas fa-search"></i> Rechercher | |
| </div> | |
| <div class="menu-item"> | |
| <i class="fas fa-book"></i> Bibliothèque | |
| </div> | |
| </div> | |
| <div class="projects-section"> | |
| <div class="section-title">PROJETS</div> | |
| <div class="projects-box"> | |
| Aucun projet. Cliquez sur "Nouvelle tâche" pour commencer. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Colonne centrale --> | |
| <div class="center-column"> | |
| <div class="header-center"> | |
| <div class="title-center"> | |
| <i class="fas fa-code"></i> Espace Codage - Rosalinda | |
| </div> | |
| <div class="status-badge"> | |
| <i class="fas fa-circle" style="font-size: 10px;"></i> IA en veille | |
| </div> | |
| </div> | |
| <div class="chat-container"> | |
| <div class="avatar"> | |
| <i class="fas fa-whale"></i> | |
| </div> | |
| <div class="greeting">Bonjour ! Je suis Rosalinda</div> | |
| <div class="subtitle">Votre assistante IA. Comment puis-je vous aider aujourd'hui ?</div> | |
| <div class="error-box"> | |
| <div class="error-icon"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div>Une erreur est survenue lors de la communication avec l'IA.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Colonne de droite --> | |
| <div class="right-column"> | |
| <div class="logo" style="margin-bottom: 30px; font-size: 22px;"> | |
| <i class="fas fa-code"></i> Espace Codage | |
| </div> | |
| <div class="right-menu"> | |
| <div class="right-menu-item"> | |
| <i class="fas fa-tachometer-alt"></i> Tableau de bord | |
| </div> | |
| <div class="right-menu-item"> | |
| <i class="fas fa-database"></i> Base de données | |
| </div> | |
| <div class="right-menu-item"> | |
| <i class="fas fa-users"></i> Sociologie | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section paramètres en bas à gauche --> | |
| <div class="settings-section"> | |
| <div class="settings-text">Paramètres (thème, clés API, intégrations)...</div> | |
| </div> | |
| <!-- Section résultat final --> | |
| <div class="result-section"> | |
| <div class="result-title">Résultat final :</div> | |
| <div class="result-subtitle">(image, vidéo ou page)...</div> | |
| </div> | |
| <!-- Pied de page --> | |
| <div class="footer"> | |
| <div class="made-with"> | |
| Made with Despiste | |
| </div> | |
| <div class="chat-input-container"> | |
| <input type="text" class="chat-input" placeholder="Écrire à Rosalinda..."> | |
| <button class="send-btn"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Animation et interactions simples | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Animation du bouton Nouvelle tâche | |
| const taskBtn = document.querySelector('.task-btn'); | |
| taskBtn.addEventListener('click', function() { | |
| alert('Création d\'une nouvelle tâche...'); | |
| document.querySelector('.projects-box').innerHTML = | |
| '<i class="fas fa-spinner fa-spin"></i> Initialisation du projet...'; | |
| // Simulation de chargement | |
| setTimeout(() => { | |
| document.querySelector('.projects-box').innerHTML = | |
| 'Projet "Mon Entreprise" créé avec succès!'; | |
| document.querySelector('.projects-box').style.color = '#4ade80'; | |
| document.querySelector('.projects-box').style.border = '1px solid #4ade80'; | |
| }, 1500); | |
| }); | |
| // Animation des éléments de menu | |
| const menuItems = document.querySelectorAll('.menu-item, .right-menu-item'); | |
| menuItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| menuItems.forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Interaction avec le champ de chat | |
| const chatInput = document.querySelector('.chat-input'); | |
| const sendBtn = document.querySelector('.send-btn'); | |
| sendBtn.addEventListener('click', function() { | |
| if (chatInput.value.trim() !== '') { | |
| alert('Message envoyé à Rosalinda: ' + chatInput.value); | |
| chatInput.value = ''; | |
| } | |
| }); | |
| chatInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendBtn.click(); | |
| } | |
| }); | |
| // Animation de l'avatar | |
| const avatar = document.querySelector('.avatar'); | |
| avatar.addEventListener('click', function() { | |
| this.style.transform = 'scale(1.1)'; | |
| setTimeout(() => { | |
| this.style.transform = 'scale(1)'; | |
| }, 300); | |
| // Changer le statut | |
| const statusBadge = document.querySelector('.status-badge'); | |
| if (statusBadge.innerHTML.includes('veille')) { | |
| statusBadge.innerHTML = '<i class="fas fa-circle" style="font-size: 10px; color: #f59e0b;"></i> IA active'; | |
| statusBadge.style.background = 'rgba(245, 158, 11, 0.2)'; | |
| statusBadge.style.color = '#f59e0b'; | |
| } else { | |
| statusBadge.innerHTML = '<i class="fas fa-circle" style="font-size: 10px; color: #4ade80;"></i> IA en veille'; | |
| statusBadge.style.background = 'rgba(34, 197, 94, 0.2)'; | |
| statusBadge.style.color = '#4ade80'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |