Hugging Face's logo

Spaces:
Abmacode12
/
espace-codage-theme
Running

App Files Community
Abmacode12 commited on
Commit
efbdf64
·
verified ·
1 Parent(s): c00a577

<!DOCTYPE html>

Browse files

<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:

Files changed (1) hide show
  1. rosalinda.html +586 -0
rosalinda.html ADDED
@@ -0,0 +1,586 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Espace Codage - Rosalinda</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', system-ui, sans-serif;
14
+ }
15
+
16
+ body {
17
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
18
+ color: #e2e8f0;
19
+ min-height: 100vh;
20
+ padding: 20px;
21
+ position: relative;
22
+ }
23
+
24
+ .container {
25
+ display: grid;
26
+ grid-template-columns: 280px 1fr 280px;
27
+ gap: 20px;
28
+ max-width: 1600px;
29
+ margin: 0 auto;
30
+ height: calc(100vh - 40px);
31
+ }
32
+
33
+ /* Colonne de gauche */
34
+ .left-column {
35
+ background: rgba(30, 41, 59, 0.8);
36
+ border-radius: 16px;
37
+ padding: 24px;
38
+ display: flex;
39
+ flex-direction: column;
40
+ border: 1px solid #334155;
41
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
42
+ backdrop-filter: blur(10px);
43
+ }
44
+
45
+ .logo {
46
+ font-size: 28px;
47
+ font-weight: 800;
48
+ margin-bottom: 30px;
49
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
50
+ -webkit-background-clip: text;
51
+ -webkit-text-fill-color: transparent;
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 10px;
55
+ }
56
+
57
+ .logo i {
58
+ font-size: 24px;
59
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
60
+ -webkit-background-clip: text;
61
+ -webkit-text-fill-color: transparent;
62
+ }
63
+
64
+ .task-btn {
65
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
66
+ color: white;
67
+ border: none;
68
+ padding: 12px 20px;
69
+ border-radius: 12px;
70
+ font-weight: 600;
71
+ font-size: 16px;
72
+ cursor: pointer;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ gap: 10px;
77
+ margin-bottom: 20px;
78
+ transition: all 0.3s;
79
+ }
80
+
81
+ .task-btn:hover {
82
+ transform: translateY(-2px);
83
+ box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
84
+ }
85
+
86
+ .menu {
87
+ display: flex;
88
+ flex-direction: column;
89
+ gap: 12px;
90
+ margin-bottom: 40px;
91
+ }
92
+
93
+ .menu-item {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 12px;
97
+ padding: 12px 16px;
98
+ border-radius: 10px;
99
+ cursor: pointer;
100
+ transition: all 0.2s;
101
+ }
102
+
103
+ .menu-item:hover {
104
+ background: rgba(51, 65, 85, 0.5);
105
+ }
106
+
107
+ .menu-item.active {
108
+ background: rgba(59, 130, 246, 0.2);
109
+ border-left: 4px solid #3b82f6;
110
+ }
111
+
112
+ .projects-section {
113
+ margin-top: auto;
114
+ }
115
+
116
+ .section-title {
117
+ font-size: 18px;
118
+ font-weight: 600;
119
+ margin-bottom: 15px;
120
+ color: #cbd5e1;
121
+ }
122
+
123
+ .projects-box {
124
+ background: rgba(15, 23, 42, 0.6);
125
+ border-radius: 12px;
126
+ padding: 20px;
127
+ border: 1px dashed #475569;
128
+ text-align: center;
129
+ color: #94a3b8;
130
+ }
131
+
132
+ /* Colonne centrale */
133
+ .center-column {
134
+ background: rgba(30, 41, 59, 0.8);
135
+ border-radius: 16px;
136
+ padding: 24px;
137
+ display: flex;
138
+ flex-direction: column;
139
+ border: 1px solid #334155;
140
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
141
+ backdrop-filter: blur(10px);
142
+ }
143
+
144
+ .header-center {
145
+ display: flex;
146
+ justify-content: space-between;
147
+ align-items: center;
148
+ margin-bottom: 30px;
149
+ padding-bottom: 20px;
150
+ border-bottom: 1px solid #334155;
151
+ }
152
+
153
+ .title-center {
154
+ font-size: 24px;
155
+ font-weight: 700;
156
+ display: flex;
157
+ align-items: center;
158
+ gap: 10px;
159
+ }
160
+
161
+ .status-badge {
162
+ background: rgba(34, 197, 94, 0.2);
163
+ color: #4ade80;
164
+ padding: 6px 12px;
165
+ border-radius: 20px;
166
+ font-size: 14px;
167
+ font-weight: 600;
168
+ display: flex;
169
+ align-items: center;
170
+ gap: 6px;
171
+ }
172
+
173
+ .chat-container {
174
+ flex: 1;
175
+ display: flex;
176
+ flex-direction: column;
177
+ justify-content: center;
178
+ align-items: center;
179
+ text-align: center;
180
+ padding: 20px;
181
+ }
182
+
183
+ .avatar {
184
+ width: 120px;
185
+ height: 120px;
186
+ border-radius: 50%;
187
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
188
+ display: flex;
189
+ align-items: center;
190
+ justify-content: center;
191
+ margin-bottom: 25px;
192
+ border: 5px solid rgba(59, 130, 246, 0.2);
193
+ }
194
+
195
+ .avatar i {
196
+ font-size: 50px;
197
+ color: white;
198
+ }
199
+
200
+ .greeting {
201
+ font-size: 28px;
202
+ font-weight: 700;
203
+ margin-bottom: 10px;
204
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
205
+ -webkit-background-clip: text;
206
+ -webkit-text-fill-color: transparent;
207
+ }
208
+
209
+ .subtitle {
210
+ font-size: 18px;
211
+ color: #cbd5e1;
212
+ margin-bottom: 30px;
213
+ max-width: 600px;
214
+ line-height: 1.5;
215
+ }
216
+
217
+ .error-box {
218
+ background: rgba(239, 68, 68, 0.1);
219
+ border: 1px solid rgba(239, 68, 68, 0.3);
220
+ border-radius: 12px;
221
+ padding: 16px 24px;
222
+ margin-top: 30px;
223
+ display: flex;
224
+ align-items: center;
225
+ gap: 12px;
226
+ max-width: 600px;
227
+ width: 100%;
228
+ }
229
+
230
+ .error-icon {
231
+ color: #ef4444;
232
+ font-size: 20px;
233
+ }
234
+
235
+ /* Colonne de droite */
236
+ .right-column {
237
+ background: rgba(30, 41, 59, 0.8);
238
+ border-radius: 16px;
239
+ padding: 24px;
240
+ display: flex;
241
+ flex-direction: column;
242
+ border: 1px solid #334155;
243
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
244
+ backdrop-filter: blur(10px);
245
+ }
246
+
247
+ .right-menu {
248
+ display: flex;
249
+ flex-direction: column;
250
+ gap: 12px;
251
+ }
252
+
253
+ .right-menu-item {
254
+ display: flex;
255
+ align-items: center;
256
+ gap: 12px;
257
+ padding: 16px 20px;
258
+ border-radius: 12px;
259
+ cursor: pointer;
260
+ transition: all 0.2s;
261
+ background: rgba(51, 65, 85, 0.3);
262
+ }
263
+
264
+ .right-menu-item:hover {
265
+ background: rgba(51, 65, 85, 0.6);
266
+ transform: translateX(5px);
267
+ }
268
+
269
+ /* Section paramètres en bas */
270
+ .settings-section {
271
+ position: absolute;
272
+ bottom: 20px;
273
+ left: 20px;
274
+ background: rgba(30, 41, 59, 0.9);
275
+ border-radius: 12px;
276
+ padding: 16px 24px;
277
+ border: 1px solid #334155;
278
+ max-width: 300px;
279
+ cursor: pointer;
280
+ transition: all 0.3s;
281
+ }
282
+
283
+ .settings-section:hover {
284
+ background: rgba(30, 41, 59, 1);
285
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
286
+ }
287
+
288
+ .settings-text {
289
+ color: #94a3b8;
290
+ font-size: 14px;
291
+ }
292
+
293
+ /* Pied de page */
294
+ .footer {
295
+ position: absolute;
296
+ bottom: 20px;
297
+ right: 20px;
298
+ display: flex;
299
+ flex-direction: column;
300
+ align-items: flex-end;
301
+ gap: 15px;
302
+ }
303
+
304
+ .made-with {
305
+ background: rgba(30, 41, 59, 0.9);
306
+ border-radius: 12px;
307
+ padding: 12px 20px;
308
+ font-size: 14px;
309
+ color: #94a3b8;
310
+ border: 1px solid #334155;
311
+ }
312
+
313
+ .chat-input-container {
314
+ background: rgba(30, 41, 59, 0.9);
315
+ border-radius: 12px;
316
+ padding: 12px 20px;
317
+ border: 1px solid #334155;
318
+ display: flex;
319
+ align-items: center;
320
+ gap: 10px;
321
+ width: 250px;
322
+ }
323
+
324
+ .chat-input {
325
+ background: transparent;
326
+ border: none;
327
+ color: #cbd5e1;
328
+ font-size: 14px;
329
+ width: 100%;
330
+ outline: none;
331
+ }
332
+
333
+ .chat-input::placeholder {
334
+ color: #64748b;
335
+ }
336
+
337
+ .send-btn {
338
+ background: transparent;
339
+ border: none;
340
+ color: #3b82f6;
341
+ cursor: pointer;
342
+ font-size: 16px;
343
+ }
344
+
345
+ /* Section résultat final */
346
+ .result-section {
347
+ position: absolute;
348
+ bottom: 100px;
349
+ right: 20px;
350
+ background: rgba(30, 41, 59, 0.9);
351
+ border-radius: 12px;
352
+ padding: 16px 24px;
353
+ border: 1px solid #334155;
354
+ max-width: 300px;
355
+ }
356
+
357
+ .result-title {
358
+ font-size: 16px;
359
+ font-weight: 600;
360
+ margin-bottom: 8px;
361
+ color: #cbd5e1;
362
+ }
363
+
364
+ .result-subtitle {
365
+ font-size: 14px;
366
+ color: #94a3b8;
367
+ }
368
+
369
+ /* Responsive */
370
+ @media (max-width: 1200px) {
371
+ .container {
372
+ grid-template-columns: 1fr;
373
+ height: auto;
374
+ gap: 15px;
375
+ }
376
+
377
+ .left-column, .center-column, .right-column {
378
+ min-height: 400px;
379
+ }
380
+
381
+ .footer, .settings-section, .result-section {
382
+ position: relative;
383
+ bottom: auto;
384
+ left: auto;
385
+ right: auto;
386
+ margin-top: 15px;
387
+ }
388
+
389
+ .footer {
390
+ align-items: flex-start;
391
+ }
392
+ }
393
+
394
+ /* Animation pour l'avatar */
395
+ @keyframes pulse {
396
+ 0% { transform: scale(1); }
397
+ 50% { transform: scale(1.05); }
398
+ 100% { transform: scale(1); }
399
+ }
400
+
401
+ .avatar {
402
+ animation: pulse 3s infinite;
403
+ }
404
+
405
+ /* Animation pour le bouton */
406
+ .task-btn {
407
+ animation: fadeIn 1s ease-out;
408
+ }
409
+
410
+ @keyframes fadeIn {
411
+ from { opacity: 0; transform: translateY(10px); }
412
+ to { opacity: 1; transform: translateY(0); }
413
+ }
414
+ </style>
415
+ </head>
416
+ <body>
417
+ <div class="container">
418
+ <!-- Colonne de gauche -->
419
+ <div class="left-column">
420
+ <div class="logo">
421
+ <i class="fas fa-code"></i> Espace Codage
422
+ </div>
423
+
424
+ <button class="task-btn">
425
+ <i class="fas fa-plus-circle"></i> Nouvelle tâche
426
+ </button>
427
+
428
+ <div class="menu">
429
+ <div class="menu-item active">
430
+ <i class="fas fa-search"></i> Rechercher
431
+ </div>
432
+ <div class="menu-item">
433
+ <i class="fas fa-book"></i> Bibliothèque
434
+ </div>
435
+ </div>
436
+
437
+ <div class="projects-section">
438
+ <div class="section-title">PROJETS</div>
439
+ <div class="projects-box">
440
+ Aucun projet. Cliquez sur "Nouvelle tâche" pour commencer.
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Colonne centrale -->
446
+ <div class="center-column">
447
+ <div class="header-center">
448
+ <div class="title-center">
449
+ <i class="fas fa-code"></i> Espace Codage - Rosalinda
450
+ </div>
451
+ <div class="status-badge">
452
+ <i class="fas fa-circle" style="font-size: 10px;"></i> IA en veille
453
+ </div>
454
+ </div>
455
+
456
+ <div class="chat-container">
457
+ <div class="avatar">
458
+ <i class="fas fa-whale"></i>
459
+ </div>
460
+
461
+ <div class="greeting">Bonjour ! Je suis Rosalinda</div>
462
+ <div class="subtitle">Votre assistante IA. Comment puis-je vous aider aujourd'hui ?</div>
463
+
464
+ <div class="error-box">
465
+ <div class="error-icon">
466
+ <i class="fas fa-exclamation-triangle"></i>
467
+ </div>
468
+ <div>Une erreur est survenue lors de la communication avec l'IA.</div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Colonne de droite -->
474
+ <div class="right-column">
475
+ <div class="logo" style="margin-bottom: 30px; font-size: 22px;">
476
+ <i class="fas fa-code"></i> Espace Codage
477
+ </div>
478
+
479
+ <div class="right-menu">
480
+ <div class="right-menu-item">
481
+ <i class="fas fa-tachometer-alt"></i> Tableau de bord
482
+ </div>
483
+ <div class="right-menu-item">
484
+ <i class="fas fa-database"></i> Base de données
485
+ </div>
486
+ <div class="right-menu-item">
487
+ <i class="fas fa-users"></i> Sociologie
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Section paramètres en bas à gauche -->
494
+ <div class="settings-section">
495
+ <div class="settings-text">Paramètres (thème, clés API, intégrations)...</div>
496
+ </div>
497
+
498
+ <!-- Section résultat final -->
499
+ <div class="result-section">
500
+ <div class="result-title">Résultat final :</div>
501
+ <div class="result-subtitle">(image, vidéo ou page)...</div>
502
+ </div>
503
+
504
+ <!-- Pied de page -->
505
+ <div class="footer">
506
+ <div class="made-with">
507
+ Made with Despiste
508
+ </div>
509
+
510
+ <div class="chat-input-container">
511
+ <input type="text" class="chat-input" placeholder="Écrire à Rosalinda...">
512
+ <button class="send-btn">
513
+ <i class="fas fa-paper-plane"></i>
514
+ </button>
515
+ </div>
516
+ </div>
517
+
518
+ <script>
519
+ // Animation et interactions simples
520
+ document.addEventListener('DOMContentLoaded', function() {
521
+ // Animation du bouton Nouvelle tâche
522
+ const taskBtn = document.querySelector('.task-btn');
523
+ taskBtn.addEventListener('click', function() {
524
+ alert('Création d\'une nouvelle tâche...');
525
+ document.querySelector('.projects-box').innerHTML =
526
+ '<i class="fas fa-spinner fa-spin"></i> Initialisation du projet...';
527
+
528
+ // Simulation de chargement
529
+ setTimeout(() => {
530
+ document.querySelector('.projects-box').innerHTML =
531
+ 'Projet "Mon Entreprise" créé avec succès!';
532
+ document.querySelector('.projects-box').style.color = '#4ade80';
533
+ document.querySelector('.projects-box').style.border = '1px solid #4ade80';
534
+ }, 1500);
535
+ });
536
+
537
+ // Animation des éléments de menu
538
+ const menuItems = document.querySelectorAll('.menu-item, .right-menu-item');
539
+ menuItems.forEach(item => {
540
+ item.addEventListener('click', function() {
541
+ menuItems.forEach(i => i.classList.remove('active'));
542
+ this.classList.add('active');
543
+ });
544
+ });
545
+
546
+ // Interaction avec le champ de chat
547
+ const chatInput = document.querySelector('.chat-input');
548
+ const sendBtn = document.querySelector('.send-btn');
549
+
550
+ sendBtn.addEventListener('click', function() {
551
+ if (chatInput.value.trim() !== '') {
552
+ alert('Message envoyé à Rosalinda: ' + chatInput.value);
553
+ chatInput.value = '';
554
+ }
555
+ });
556
+
557
+ chatInput.addEventListener('keypress', function(e) {
558
+ if (e.key === 'Enter') {
559
+ sendBtn.click();
560
+ }
561
+ });
562
+
563
+ // Animation de l'avatar
564
+ const avatar = document.querySelector('.avatar');
565
+ avatar.addEventListener('click', function() {
566
+ this.style.transform = 'scale(1.1)';
567
+ setTimeout(() => {
568
+ this.style.transform = 'scale(1)';
569
+ }, 300);
570
+
571
+ // Changer le statut
572
+ const statusBadge = document.querySelector('.status-badge');
573
+ if (statusBadge.innerHTML.includes('veille')) {
574
+ statusBadge.innerHTML = '<i class="fas fa-circle" style="font-size: 10px; color: #f59e0b;"></i> IA active';
575
+ statusBadge.style.background = 'rgba(245, 158, 11, 0.2)';
576
+ statusBadge.style.color = '#f59e0b';
577
+ } else {
578
+ statusBadge.innerHTML = '<i class="fas fa-circle" style="font-size: 10px; color: #4ade80;"></i> IA en veille';
579
+ statusBadge.style.background = 'rgba(34, 197, 94, 0.2)';
580
+ statusBadge.style.color = '#4ade80';
581
+ }
582
+ });
583
+ });
584
+ </script>
585
+ </body>
586
+ </html>