Spaces:
Configuration error
Configuration error
d’EPSITE],
Browse filesJe tiens d’abord à vous remercier chaleureusement pour votre travail et votre accompagnement dans le projet Espace Codage – Rosalinda. Votre aide est précieuse et je vous suis profondément reconnaissant(e) pour tout ce que vous avez fait jusqu’ici. 🙏
Afin de finaliser l’intégration de notre assistante IA Rosalinda, je me permets de vous transmettre le backend complet, prêt à être déployé. Ce backend inclut :
⚙️ Fonctionnalités prêtes à l’emploi :
💬 /chat — Dialogue avec GPT-4
🖼️ /image — Génération d’images via DALL·E
🎤 /whisper — Préparation pour la transcription vocale
✅ Structure prête pour ajout futur de génération vidéo 🛠️ Étapes recommandées pour intégration :
Décompressez le ZIP
Publiez le contenu sur un dépôt GitHub (public ou privé)
Déployez le projet sur https://render.com
(ou une plateforme de votre choix)
Ajoutez votre variable d’environnement :
OPENAI_API_KEY=sk-votre_clé_I.A
Renseignez cette URL dans le script.js du frontend :
fetch("https://votre-backend.onrender.com/chat", ...)
📁 Le fichier .env.example vous indique les variables attendues.
- README.md +13 -6
- documentation.html +111 -0
- index.html +3 -1
- style.css +181 -1
README.md
CHANGED
|
@@ -2,13 +2,14 @@
|
|
| 2 |
# Espace Codage - Rosalinda IA
|
| 3 |
|
| 4 |
Backend complet pour l'assistante IA Rosalinda intégrée dans Espace Codage.
|
| 5 |
-
|
| 6 |
## Fonctionnalités
|
| 7 |
|
| 8 |
-
-
|
| 9 |
-
- ️ Génération d'images avec DALL·E via `/image`
|
| 10 |
-
-
|
| 11 |
-
|
|
|
|
|
|
|
| 12 |
## Installation
|
| 13 |
|
| 14 |
1. Installer les dépendances:
|
|
@@ -25,9 +26,15 @@ OPENAI_API_KEY=votre_clé_api_ici
|
|
| 25 |
```bash
|
| 26 |
npm start
|
| 27 |
```
|
| 28 |
-
|
| 29 |
Le serveur sera disponible sur `http://localhost:3000`
|
| 30 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
## Endpoints
|
| 32 |
|
| 33 |
- `POST /chat` - Envoyer un message à Rosalinda
|
|
|
|
| 2 |
# Espace Codage - Rosalinda IA
|
| 3 |
|
| 4 |
Backend complet pour l'assistante IA Rosalinda intégrée dans Espace Codage.
|
|
|
|
| 5 |
## Fonctionnalités
|
| 6 |
|
| 7 |
+
- 💬 Chat avec GPT-4 via `/chat`
|
| 8 |
+
- 🖼️ Génération d'images avec DALL·E via `/image`
|
| 9 |
+
- 🎤 Transcription vocale avec Whisper via `/whisper`
|
| 10 |
+
- 📚 Documentation intégrée
|
| 11 |
+
- 🎨 Interface utilisateur moderne
|
| 12 |
+
- 🚀 Prêt pour le déploiement sur Render/Railway
|
| 13 |
## Installation
|
| 14 |
|
| 15 |
1. Installer les dépendances:
|
|
|
|
| 26 |
```bash
|
| 27 |
npm start
|
| 28 |
```
|
|
|
|
| 29 |
Le serveur sera disponible sur `http://localhost:3000`
|
| 30 |
|
| 31 |
+
## Documentation
|
| 32 |
+
|
| 33 |
+
Une documentation complète est disponible dans l'interface:
|
| 34 |
+
- Accès via le menu de navigation
|
| 35 |
+
- Exemples d'utilisation
|
| 36 |
+
- Configuration backend
|
| 37 |
+
- Guide des endpoints API
|
| 38 |
## Endpoints
|
| 39 |
|
| 40 |
- `POST /chat` - Envoyer un message à Rosalinda
|
documentation.html
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Documentation - Espace Codage</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
|
| 9 |
+
</head>
|
| 10 |
+
<body>
|
| 11 |
+
<div class="container">
|
| 12 |
+
<!-- Colonne 1 : Navigation -->
|
| 13 |
+
<aside class="sidebar">
|
| 14 |
+
<div class="header">
|
| 15 |
+
<a href="index.html" class="logo">Espace Codage</a>
|
| 16 |
+
</div>
|
| 17 |
+
<nav class="menu">
|
| 18 |
+
<a href="index.html" class="menu-item"><i class="fas fa-home"></i> Accueil</a>
|
| 19 |
+
<a href="documentation.html" class="menu-item active"><i class="fas fa-book"></i> Documentation</a>
|
| 20 |
+
<button>Nouvelle tâche</button>
|
| 21 |
+
<button>Rechercher</button>
|
| 22 |
+
<button>Bibliothèque</button>
|
| 23 |
+
</nav>
|
| 24 |
+
<div class="projects">
|
| 25 |
+
<h3>Projets</h3>
|
| 26 |
+
<ul id="projectList">
|
| 27 |
+
<!-- Projets ajoutés ici -->
|
| 28 |
+
</ul>
|
| 29 |
+
</div>
|
| 30 |
+
</aside>
|
| 31 |
+
|
| 32 |
+
<!-- Colonne 2 : Documentation -->
|
| 33 |
+
<main class="documentation">
|
| 34 |
+
<div class="doc-header">
|
| 35 |
+
<h2><i class="fas fa-book"></i> Documentation Rosalinda</h2>
|
| 36 |
+
<div class="doc-version">Version 1.0.0</div>
|
| 37 |
+
</div>
|
| 38 |
+
|
| 39 |
+
<div class="doc-content">
|
| 40 |
+
<section class="doc-section">
|
| 41 |
+
<h3><i class="fas fa-comment-dots"></i> Fonctionnalités du Chat</h3>
|
| 42 |
+
<div class="feature-card">
|
| 43 |
+
<h4><i class="fas fa-code"></i> Génération de code</h4>
|
| 44 |
+
<p>Rosalinda peut générer du code dans plusieurs langages (Python, JavaScript, HTML/CSS, etc.) avec des commentaires explicatifs.</p>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="feature-card">
|
| 47 |
+
<h4><i class="fas fa-bug"></i> Debugging</h4>
|
| 48 |
+
<p>Envoyez votre code et Rosalinda identifiera les erreurs et proposera des corrections.</p>
|
| 49 |
+
</div>
|
| 50 |
+
</section>
|
| 51 |
+
|
| 52 |
+
<section class="doc-section">
|
| 53 |
+
<h3><i class="fas fa-image"></i> Génération d'images</h3>
|
| 54 |
+
<div class="feature-card">
|
| 55 |
+
<h4><i class="fas fa-paint-brush"></i> DALL·E Integration</h4>
|
| 56 |
+
<p>Générez des images à partir de descriptions textuelles en utilisant le bouton "Nouvelle tâche".</p>
|
| 57 |
+
<pre><code>Exemple: "Une interface utilisateur moderne pour une application météo"</code></pre>
|
| 58 |
+
</div>
|
| 59 |
+
</section>
|
| 60 |
+
|
| 61 |
+
<section class="doc-section">
|
| 62 |
+
<h3><i class="fas fa-microphone"></i> Commandes vocales</h3>
|
| 63 |
+
<div class="feature-card">
|
| 64 |
+
<h4><i class="fas fa-assistive-listening-systems"></i> Transcription</h4>
|
| 65 |
+
<p>Cliquez sur l'icône microphone pour dicter vos messages ou commandes à Rosalinda.</p>
|
| 66 |
+
</div>
|
| 67 |
+
</section>
|
| 68 |
+
|
| 69 |
+
<section class="doc-section">
|
| 70 |
+
<h3><i class="fas fa-server"></i> Configuration backend</h3>
|
| 71 |
+
<div class="feature-card">
|
| 72 |
+
<h4><i class="fas fa-link"></i> Endpoints API</h4>
|
| 73 |
+
<ul class="api-list">
|
| 74 |
+
<li><strong>POST /chat</strong> - Dialogue avec GPT-4</li>
|
| 75 |
+
<li><strong>POST /image</strong> - Génération d'images DALL·E</li>
|
| 76 |
+
<li><strong>POST /whisper</strong> - Transcription audio</li>
|
| 77 |
+
</ul>
|
| 78 |
+
</div>
|
| 79 |
+
<div class="feature-card">
|
| 80 |
+
<h4><i class="fas fa-key"></i> Variables d'environnement</h4>
|
| 81 |
+
<pre><code>OPENAI_API_KEY=votre_clé_api_ici
|
| 82 |
+
PORT=3000</code></pre>
|
| 83 |
+
</div>
|
| 84 |
+
</section>
|
| 85 |
+
</div>
|
| 86 |
+
</main>
|
| 87 |
+
|
| 88 |
+
<!-- Colonne 3 : Exemples -->
|
| 89 |
+
<section class="examples">
|
| 90 |
+
<div class="examples-header">
|
| 91 |
+
<h3><i class="fas fa-lightbulb"></i> Exemples d'utilisation</h3>
|
| 92 |
+
</div>
|
| 93 |
+
<div class="example-cards">
|
| 94 |
+
<div class="example-card">
|
| 95 |
+
<h4>Frontend</h4>
|
| 96 |
+
<p>"Crée un composant React pour un formulaire de contact"</p>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="example-card">
|
| 99 |
+
<h4>Backend</h4>
|
| 100 |
+
<p>"Montre-moi comment créer une API REST avec Express.js"</p>
|
| 101 |
+
</div>
|
| 102 |
+
<div class="example-card">
|
| 103 |
+
<h4>Design</h4>
|
| 104 |
+
<p>"Génère une maquette pour une application de recettes"</p>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
</section>
|
| 108 |
+
</div>
|
| 109 |
+
<script src="script.js"></script>
|
| 110 |
+
</body>
|
| 111 |
+
</html>
|
index.html
CHANGED
|
@@ -16,11 +16,13 @@
|
|
| 16 |
<a href="#" class="logo">Espace Codage</a>
|
| 17 |
</div>
|
| 18 |
<nav class="menu">
|
|
|
|
|
|
|
| 19 |
<button>Nouvelle tâche</button>
|
| 20 |
<button>Rechercher</button>
|
| 21 |
<button>Bibliothèque</button>
|
| 22 |
</nav>
|
| 23 |
-
|
| 24 |
<h3>Projets</h3>
|
| 25 |
<ul id="projectList">
|
| 26 |
<!-- Projets ajoutés ici -->
|
|
|
|
| 16 |
<a href="#" class="logo">Espace Codage</a>
|
| 17 |
</div>
|
| 18 |
<nav class="menu">
|
| 19 |
+
<a href="index.html" class="menu-item"><i class="fas fa-home"></i> Accueil</a>
|
| 20 |
+
<a href="documentation.html" class="menu-item"><i class="fas fa-book"></i> Documentation</a>
|
| 21 |
<button>Nouvelle tâche</button>
|
| 22 |
<button>Rechercher</button>
|
| 23 |
<button>Bibliothèque</button>
|
| 24 |
</nav>
|
| 25 |
+
<div class="projects">
|
| 26 |
<h3>Projets</h3>
|
| 27 |
<ul id="projectList">
|
| 28 |
<!-- Projets ajoutés ici -->
|
style.css
CHANGED
|
@@ -3,7 +3,21 @@
|
|
| 3 |
box-sizing: border-box;
|
| 4 |
margin: 0;
|
| 5 |
padding: 0;
|
| 6 |
-
font-family:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
}
|
| 8 |
body, html {
|
| 9 |
height: 100%;
|
|
@@ -39,9 +53,39 @@ body, html {
|
|
| 39 |
border: none;
|
| 40 |
cursor: pointer;
|
| 41 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 42 |
.projects h3 {
|
| 43 |
margin-top: 20px;
|
| 44 |
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 45 |
}
|
| 46 |
.projects ul {
|
| 47 |
list-style: none;
|
|
@@ -50,6 +94,142 @@ body, html {
|
|
| 50 |
padding: 5px 0;
|
| 51 |
border-bottom: 1px solid #ccc;
|
| 52 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 53 |
/* Colonne 2 */
|
| 54 |
.chat {
|
| 55 |
width: 45%;
|
|
|
|
| 3 |
box-sizing: border-box;
|
| 4 |
margin: 0;
|
| 5 |
padding: 0;
|
| 6 |
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
+
:root {
|
| 10 |
+
--primary: #6366f1;
|
| 11 |
+
--primary-dark: #4f46e5;
|
| 12 |
+
--primary-light: #a5b4fc;
|
| 13 |
+
--text: #1e293b;
|
| 14 |
+
--text-light: #64748b;
|
| 15 |
+
--bg: #f8fafc;
|
| 16 |
+
--bg-dark: #f1f5f9;
|
| 17 |
+
--border: #e2e8f0;
|
| 18 |
+
--success: #10b981;
|
| 19 |
+
--warning: #f59e0b;
|
| 20 |
+
--error: #ef4444;
|
| 21 |
}
|
| 22 |
body, html {
|
| 23 |
height: 100%;
|
|
|
|
| 53 |
border: none;
|
| 54 |
cursor: pointer;
|
| 55 |
}
|
| 56 |
+
.menu-item {
|
| 57 |
+
display: flex;
|
| 58 |
+
align-items: center;
|
| 59 |
+
gap: 10px;
|
| 60 |
+
padding: 10px;
|
| 61 |
+
color: var(--text);
|
| 62 |
+
text-decoration: none;
|
| 63 |
+
border-radius: 6px;
|
| 64 |
+
margin-bottom: 8px;
|
| 65 |
+
transition: all 0.2s;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
.menu-item:hover {
|
| 69 |
+
background-color: var(--bg-dark);
|
| 70 |
+
}
|
| 71 |
+
|
| 72 |
+
.menu-item.active {
|
| 73 |
+
background-color: var(--primary);
|
| 74 |
+
color: white;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
.menu-item i {
|
| 78 |
+
width: 20px;
|
| 79 |
+
text-align: center;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
.projects h3 {
|
| 83 |
margin-top: 20px;
|
| 84 |
margin-bottom: 10px;
|
| 85 |
+
color: var(--text);
|
| 86 |
+
font-size: 14px;
|
| 87 |
+
text-transform: uppercase;
|
| 88 |
+
letter-spacing: 1px;
|
| 89 |
}
|
| 90 |
.projects ul {
|
| 91 |
list-style: none;
|
|
|
|
| 94 |
padding: 5px 0;
|
| 95 |
border-bottom: 1px solid #ccc;
|
| 96 |
}
|
| 97 |
+
/* Documentation Page Styles */
|
| 98 |
+
.documentation {
|
| 99 |
+
width: 45%;
|
| 100 |
+
display: flex;
|
| 101 |
+
flex-direction: column;
|
| 102 |
+
padding: 20px;
|
| 103 |
+
background: white;
|
| 104 |
+
border-right: 1px solid var(--border);
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
.doc-header {
|
| 108 |
+
display: flex;
|
| 109 |
+
justify-content: space-between;
|
| 110 |
+
align-items: center;
|
| 111 |
+
margin-bottom: 20px;
|
| 112 |
+
padding-bottom: 10px;
|
| 113 |
+
border-bottom: 1px solid var(--border);
|
| 114 |
+
}
|
| 115 |
+
|
| 116 |
+
.doc-header h2 {
|
| 117 |
+
display: flex;
|
| 118 |
+
align-items: center;
|
| 119 |
+
gap: 10px;
|
| 120 |
+
font-size: 20px;
|
| 121 |
+
color: var(--text);
|
| 122 |
+
}
|
| 123 |
+
|
| 124 |
+
.doc-version {
|
| 125 |
+
font-size: 12px;
|
| 126 |
+
background: var(--bg-dark);
|
| 127 |
+
padding: 4px 8px;
|
| 128 |
+
border-radius: 4px;
|
| 129 |
+
color: var(--text-light);
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
.doc-section {
|
| 133 |
+
margin-bottom: 30px;
|
| 134 |
+
}
|
| 135 |
+
|
| 136 |
+
.doc-section h3 {
|
| 137 |
+
display: flex;
|
| 138 |
+
align-items: center;
|
| 139 |
+
gap: 8px;
|
| 140 |
+
font-size: 18px;
|
| 141 |
+
color: var(--text);
|
| 142 |
+
margin-bottom: 15px;
|
| 143 |
+
padding-bottom: 5px;
|
| 144 |
+
border-bottom: 1px solid var(--border);
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
.feature-card {
|
| 148 |
+
background: var(--bg);
|
| 149 |
+
padding: 15px;
|
| 150 |
+
border-radius: 8px;
|
| 151 |
+
margin-bottom: 15px;
|
| 152 |
+
border: 1px solid var(--border);
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
.feature-card h4 {
|
| 156 |
+
display: flex;
|
| 157 |
+
align-items: center;
|
| 158 |
+
gap: 8px;
|
| 159 |
+
font-size: 16px;
|
| 160 |
+
color: var(--text);
|
| 161 |
+
margin-bottom: 10px;
|
| 162 |
+
}
|
| 163 |
+
|
| 164 |
+
.feature-card p {
|
| 165 |
+
color: var(--text-light);
|
| 166 |
+
font-size: 14px;
|
| 167 |
+
line-height: 1.5;
|
| 168 |
+
margin-bottom: 10px;
|
| 169 |
+
}
|
| 170 |
+
|
| 171 |
+
.api-list {
|
| 172 |
+
list-style: none;
|
| 173 |
+
padding: 0;
|
| 174 |
+
}
|
| 175 |
+
|
| 176 |
+
.api-list li {
|
| 177 |
+
padding: 8px 0;
|
| 178 |
+
border-bottom: 1px solid var(--border);
|
| 179 |
+
color: var(--text-light);
|
| 180 |
+
font-size: 14px;
|
| 181 |
+
}
|
| 182 |
+
|
| 183 |
+
.api-list li strong {
|
| 184 |
+
color: var(--text);
|
| 185 |
+
display: inline-block;
|
| 186 |
+
width: 150px;
|
| 187 |
+
}
|
| 188 |
+
|
| 189 |
+
.examples {
|
| 190 |
+
width: 35%;
|
| 191 |
+
padding: 20px;
|
| 192 |
+
background: white;
|
| 193 |
+
}
|
| 194 |
+
|
| 195 |
+
.examples-header {
|
| 196 |
+
margin-bottom: 20px;
|
| 197 |
+
padding-bottom: 10px;
|
| 198 |
+
border-bottom: 1px solid var(--border);
|
| 199 |
+
}
|
| 200 |
+
|
| 201 |
+
.examples-header h3 {
|
| 202 |
+
display: flex;
|
| 203 |
+
align-items: center;
|
| 204 |
+
gap: 8px;
|
| 205 |
+
font-size: 18px;
|
| 206 |
+
color: var(--text);
|
| 207 |
+
}
|
| 208 |
+
|
| 209 |
+
.example-cards {
|
| 210 |
+
display: grid;
|
| 211 |
+
gap: 15px;
|
| 212 |
+
}
|
| 213 |
+
|
| 214 |
+
.example-card {
|
| 215 |
+
background: var(--bg);
|
| 216 |
+
padding: 15px;
|
| 217 |
+
border-radius: 8px;
|
| 218 |
+
border: 1px solid var(--border);
|
| 219 |
+
}
|
| 220 |
+
|
| 221 |
+
.example-card h4 {
|
| 222 |
+
color: var(--primary);
|
| 223 |
+
font-size: 15px;
|
| 224 |
+
margin-bottom: 8px;
|
| 225 |
+
}
|
| 226 |
+
|
| 227 |
+
.example-card p {
|
| 228 |
+
color: var(--text-light);
|
| 229 |
+
font-size: 13px;
|
| 230 |
+
line-height: 1.4;
|
| 231 |
+
}
|
| 232 |
+
|
| 233 |
/* Colonne 2 */
|
| 234 |
.chat {
|
| 235 |
width: 45%;
|