Hugging Face's logo

Spaces:
Mousco
/
anycoder-1329db79
Running

App Files Community
Mousco commited on
Commit
77cf9d8
·
verified ·
1 Parent(s): 51cbc67

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +691 -19
index.html CHANGED
@@ -1,19 +1,691 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>Assistant Conseil IA</title>
7
+
8
+ <!-- Importation de la police Inter pour un look moderne -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <!-- Importation de FontAwesome pour les icônes -->
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+
13
+ <style>
14
+ :root {
15
+ --primary-color: #2563eb;
16
+ --primary-hover: #1d4ed8;
17
+ --bg-color: #f8fafc;
18
+ --card-bg: #ffffff;
19
+ --text-main: #1e293b;
20
+ --text-secondary: #64748b;
21
+ --border-color: #e2e8f0;
22
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
23
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
24
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
25
+ --radius: 16px;
26
+ }
27
+
28
+ * {
29
+ box-sizing: border-box;
30
+ margin: 0;
31
+ padding: 0;
32
+ -webkit-tap-highlight-color: transparent;
33
+ }
34
+
35
+ body {
36
+ font-family: 'Inter', sans-serif;
37
+ background-color: var(--bg-color);
38
+ color: var(--text-main);
39
+ min-height: 100vh;
40
+ display: flex;
41
+ flex-direction: column;
42
+ overflow-x: hidden;
43
+ }
44
+
45
+ /* HEADER */
46
+ header {
47
+ background: var(--card-bg);
48
+ padding: 1rem 1.5rem;
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ border-bottom: 1px solid var(--border-color);
53
+ position: sticky;
54
+ top: 0;
55
+ z-index: 100;
56
+ box-shadow: var(--shadow-sm);
57
+ }
58
+
59
+ .logo {
60
+ font-weight: 700;
61
+ font-size: 1.2rem;
62
+ color: var(--primary-color);
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 8px;
66
+ }
67
+
68
+ .anycoder-link {
69
+ font-size: 0.8rem;
70
+ color: var(--text-secondary);
71
+ text-decoration: none;
72
+ background: #f1f5f9;
73
+ padding: 4px 8px;
74
+ border-radius: 6px;
75
+ transition: all 0.2s;
76
+ }
77
+
78
+ .anycoder-link:hover {
79
+ background: #e2e8f0;
80
+ color: var(--primary-color);
81
+ }
82
+
83
+ /* MAIN CONTAINER */
84
+ main {
85
+ flex: 1;
86
+ padding: 1rem;
87
+ max-width: 800px;
88
+ margin: 0 auto;
89
+ width: 100%;
90
+ display: flex;
91
+ flex-direction: column;
92
+ transition: all 0.3s ease;
93
+ }
94
+
95
+ /* EMPTY STATE (HOME) */
96
+ .empty-state {
97
+ display: flex;
98
+ flex-direction: column;
99
+ align-items: center;
100
+ justify-content: center;
101
+ height: 70vh;
102
+ text-align: center;
103
+ transition: opacity 0.3s ease, transform 0.3s ease;
104
+ }
105
+
106
+ .search-icon-large {
107
+ font-size: 4rem;
108
+ color: var(--primary-color);
109
+ margin-bottom: 1.5rem;
110
+ opacity: 0.8;
111
+ animation: float 3s ease-in-out infinite;
112
+ }
113
+
114
+ .hero-text {
115
+ font-size: 1.5rem;
116
+ font-weight: 600;
117
+ margin-bottom: 0.5rem;
118
+ }
119
+
120
+ .hero-subtext {
121
+ color: var(--text-secondary);
122
+ margin-bottom: 2rem;
123
+ }
124
+
125
+ /* SEARCH BAR AREA */
126
+ .search-container {
127
+ width: 100%;
128
+ position: relative;
129
+ margin-bottom: 1rem;
130
+ transition: all 0.3s ease;
131
+ }
132
+
133
+ /* When results exist, move search to top */
134
+ main.has-results .search-container {
135
+ position: sticky;
136
+ top: 0;
137
+ background: var(--bg-color); /* Match body bg for seamless feel */
138
+ padding: 10px 0;
139
+ z-index: 50;
140
+ }
141
+
142
+ main.has-results .empty-state {
143
+ display: none;
144
+ }
145
+
146
+ .search-box {
147
+ display: flex;
148
+ align-items: center;
149
+ background: var(--card-bg);
150
+ border: 1px solid var(--border-color);
151
+ border-radius: 50px;
152
+ padding: 0.8rem 1.2rem;
153
+ box-shadow: var(--shadow-md);
154
+ transition: all 0.2s;
155
+ }
156
+
157
+ .search-box:focus-within {
158
+ border-color: var(--primary-color);
159
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
160
+ transform: translateY(-1px);
161
+ }
162
+
163
+ .search-input {
164
+ flex: 1;
165
+ border: none;
166
+ outline: none;
167
+ font-size: 1rem;
168
+ color: var(--text-main);
169
+ background: transparent;
170
+ font-family: 'Inter', sans-serif;
171
+ }
172
+
173
+ .search-btn {
174
+ background: var(--primary-color);
175
+ color: white;
176
+ border: none;
177
+ width: 40px;
178
+ height: 40px;
179
+ border-radius: 50%;
180
+ cursor: pointer;
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ transition: background 0.2s;
185
+ margin-left: 10px;
186
+ }
187
+
188
+ .search-btn:hover {
189
+ background: var(--primary-hover);
190
+ }
191
+
192
+ /* HISTORY CHIPS */
193
+ .history-section {
194
+ width: 100%;
195
+ margin-top: 1rem;
196
+ display: none; /* Hidden by default */
197
+ }
198
+
199
+ main.has-results .history-section {
200
+ display: block;
201
+ }
202
+
203
+ .history-title {
204
+ font-size: 0.85rem;
205
+ color: var(--text-secondary);
206
+ margin-bottom: 0.5rem;
207
+ font-weight: 600;
208
+ text-transform: uppercase;
209
+ letter-spacing: 0.5px;
210
+ }
211
+
212
+ .history-list {
213
+ display: flex;
214
+ gap: 10px;
215
+ overflow-x: auto;
216
+ padding-bottom: 10px;
217
+ scrollbar-width: none; /* Firefox */
218
+ }
219
+ .history-list::-webkit-scrollbar {
220
+ display: none; /* Chrome/Safari */
221
+ }
222
+
223
+ .history-chip {
224
+ background: var(--card-bg);
225
+ border: 1px solid var(--border-color);
226
+ padding: 6px 12px;
227
+ border-radius: 20px;
228
+ font-size: 0.9rem;
229
+ white-space: nowrap;
230
+ cursor: pointer;
231
+ transition: all 0.2s;
232
+ display: flex;
233
+ align-items: center;
234
+ gap: 6px;
235
+ }
236
+
237
+ .history-chip:hover {
238
+ border-color: var(--primary-color);
239
+ color: var(--primary-color);
240
+ }
241
+
242
+ /* RESULTS AREA */
243
+ .results-area {
244
+ width: 100%;
245
+ margin-top: 1rem;
246
+ padding-bottom: 2rem;
247
+ display: none;
248
+ animation: slideUp 0.4s ease-out;
249
+ }
250
+
251
+ main.has-results .results-area {
252
+ display: block;
253
+ }
254
+
255
+ /* RESULT CARD */
256
+ .advice-card {
257
+ background: var(--card-bg);
258
+ border-radius: var(--radius);
259
+ box-shadow: var(--shadow-md);
260
+ overflow: hidden;
261
+ margin-bottom: 1.5rem;
262
+ border: 1px solid var(--border-color);
263
+ }
264
+
265
+ .card-header {
266
+ position: relative;
267
+ height: 200px;
268
+ overflow: hidden;
269
+ }
270
+
271
+ .card-image {
272
+ width: 100%;
273
+ height: 100%;
274
+ object-fit: cover;
275
+ transition: transform 0.5s;
276
+ }
277
+
278
+ .advice-card:hover .card-image {
279
+ transform: scale(1.05);
280
+ }
281
+
282
+ .card-content {
283
+ padding: 1.5rem;
284
+ }
285
+
286
+ .card-title {
287
+ font-size: 1.25rem;
288
+ font-weight: 700;
289
+ margin-bottom: 0.8rem;
290
+ color: var(--text-main);
291
+ }
292
+
293
+ .card-text {
294
+ color: var(--text-secondary);
295
+ line-height: 1.6;
296
+ margin-bottom: 1.2rem;
297
+ font-size: 0.95rem;
298
+ }
299
+
300
+ .action-section {
301
+ background: #f8fafc;
302
+ border-radius: 12px;
303
+ padding: 1rem;
304
+ border: 1px solid #f1f5f9;
305
+ }
306
+
307
+ .action-title {
308
+ font-weight: 600;
309
+ font-size: 0.9rem;
310
+ margin-bottom: 0.8rem;
311
+ display: flex;
312
+ align-items: center;
313
+ gap: 8px;
314
+ color: var(--primary-color);
315
+ }
316
+
317
+ .tips-list {
318
+ list-style: none;
319
+ }
320
+
321
+ .tips-list li {
322
+ position: relative;
323
+ padding-left: 20px;
324
+ margin-bottom: 8px;
325
+ font-size: 0.9rem;
326
+ color: var(--text-main);
327
+ }
328
+
329
+ .tips-list li::before {
330
+ content: "•";
331
+ color: var(--primary-color);
332
+ font-weight: bold;
333
+ position: absolute;
334
+ left: 0;
335
+ }
336
+
337
+ .examples-grid {
338
+ display: grid;
339
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
340
+ gap: 10px;
341
+ margin-top: 1rem;
342
+ }
343
+
344
+ .example-item {
345
+ display: flex;
346
+ flex-direction: column;
347
+ align-items: center;
348
+ text-align: center;
349
+ padding: 10px;
350
+ background: white;
351
+ border: 1px solid var(--border-color);
352
+ border-radius: 8px;
353
+ font-size: 0.8rem;
354
+ }
355
+
356
+ .example-icon {
357
+ font-size: 1.2rem;
358
+ margin-bottom: 5px;
359
+ color: #10b981; /* Success green */
360
+ }
361
+
362
+ /* LOADING STATE */
363
+ .loading {
364
+ display: none;
365
+ justify-content: center;
366
+ align-items: center;
367
+ padding: 2rem;
368
+ }
369
+
370
+ .spinner {
371
+ width: 40px;
372
+ height: 40px;
373
+ border: 4px solid #f3f3f3;
374
+ border-top: 4px solid var(--primary-color);
375
+ border-radius: 50%;
376
+ animation: spin 1s linear infinite;
377
+ }
378
+
379
+ /* ANIMATIONS */
380
+ @keyframes float {
381
+ 0% { transform: translateY(0px); }
382
+ 50% { transform: translateY(-10px); }
383
+ 100% { transform: translateY(0px); }
384
+ }
385
+
386
+ @keyframes slideUp {
387
+ from { opacity: 0; transform: translateY(20px); }
388
+ to { opacity: 1; transform: translateY(0); }
389
+ }
390
+
391
+ @keyframes spin {
392
+ 0% { transform: rotate(0deg); }
393
+ 100% { transform: rotate(360deg); }
394
+ }
395
+
396
+ /* RESPONSIVE */
397
+ @media (max-width: 600px) {
398
+ .card-header { height: 160px; }
399
+ .card-content { padding: 1rem; }
400
+ .hero-text { font-size: 1.2rem; }
401
+ }
402
+ </style>
403
+ </head>
404
+ <body>
405
+
406
+ <header>
407
+ <div class="logo">
408
+ <i class="fa-solid fa-robot"></i> ConseilBot
409
+ </div>
410
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
411
+ Built with anycoder
412
+ </a>
413
+ </header>
414
+
415
+ <main id="main-container">
416
+ <!-- Search Bar -->
417
+ <div class="search-container">
418
+ <div class="search-box">
419
+ <i class="fa-solid fa-magnifying-glass" style="color: #94a3b8; margin-right: 10px;"></i>
420
+ <input type="text" id="user-input" class="search-input" placeholder="Posez votre question (ex: gagner argent...)" autocomplete="off">
421
+ <button id="search-btn" class="search-btn">
422
+ <i class="fa-solid fa-arrow-right"></i>
423
+ </button>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Empty State (Home) -->
428
+ <div class="empty-state" id="empty-state">
429
+ <i class="fa-solid fa-magnifying-glass search-icon-large"></i>
430
+ <h1 class="hero-text">Comment puis-je vous aider ?</h1>
431
+ <p class="hero-subtext">Posez une question sur l'argent, le travail, la santé...</p>
432
+ </div>
433
+
434
+ <!-- Loading Spinner -->
435
+ <div class="loading" id="loading">
436
+ <div class="spinner"></div>
437
+ </div>
438
+
439
+ <!-- Results Area -->
440
+ <div class="results-area" id="results-area"></div>
441
+
442
+ <!-- History Section -->
443
+ <div class="history-section">
444
+ <div class="history-title">Vos recherches récentes</div>
445
+ <div class="history-list" id="history-list">
446
+ <!-- History items injected here -->
447
+ </div>
448
+ </div>
449
+ </main>
450
+
451
+ <script>
452
+ // DOM Elements
453
+ const mainContainer = document.getElementById('main-container');
454
+ const inputField = document.getElementById('user-input');
455
+ const searchBtn = document.getElementById('search-btn');
456
+ const resultsArea = document.getElementById('results-area');
457
+ const historyList = document.getElementById('history-list');
458
+ const loadingSpinner = document.getElementById('loading');
459
+ const emptyState = document.getElementById('empty-state');
460
+
461
+ // Base de connaissances simulée (Mock AI)
462
+ const knowledgeBase = [
463
+ {
464
+ keywords: ['argent', 'argent', 'revenu', 'richesse', 'cash', 'salaire'],
465
+ title: "Comment gagner de l'argent ?",
466
+ text: "Gagner de l'argent demande du temps, de la stratégie et de la persévérance. Il n'existe pas de méthode miracle, mais plusieurs voies s'offrent à vous selon vos compétences.",
467
+ image: "https://picsum.photos/seed/money/800/400.jpg",
468
+ tips: [
469
+ "Développez une compétence recherchée (code, design, marketing).",
470
+ "Utilisez les plateformes de freelance (Upwork, Malt, ComeUp).",
471
+ "Commencez un side business en parallèle de votre emploi.",
472
+ "Investissez dans votre éducation avant d'investir dans des actifs."
473
+ ],
474
+ examples: [
475
+ { icon: "fa-laptop-code", text: "Freelance Dev" },
476
+ { icon: "fa-pen-nib", text: "Rédaction Web" },
477
+ { icon: "fa-store", text: "Dropshipping" },
478
+ { icon: "fa-chart-line", text: "Bourse / ETF" }
479
+ ]
480
+ },
481
+ {
482
+ keywords: ['développement personnel', 'confiance', 'mieux être', 'mental', 'motivation', 'succès'],
483
+ title: "Améliorer son développement personnel",
484
+ text: "Le développement personnel est un processus continu pour comprendre mieux qui vous êtes, atteindre votre potentiel maximum et réaliser vos aspirations.",
485
+ image: "https://picsum.photos/seed/mindset/800/400.jpg",
486
+ tips: [
487
+ "Pratiquez la gratitude quotidienne pour changer votre perspective.",
488
+ "Lisez des livres ou écoutez des podcasts inspirants.",
489
+ "Fixez des objectifs SMART (Spécifiques, Mesurables, etc.).",
490
+ "Prenez soin de votre corps (sport, sommeil, alimentation)."
491
+ ],
492
+ examples: [
493
+ { icon: "fa-book", text: "Lecture" },
494
+ { icon: "fa-brain", text: "Méditation" },
495
+ { icon: "fa-dumbbell", text: "Sport" },
496
+ { icon: "fa-users", text: "Networking" }
497
+ ]
498
+ },
499
+ {
500
+ keywords: ['productivité', 'travailler', 'efficace', 'organisation', 'temps', 'concentration'],
501
+ title: "Booster sa productivité",
502
+ text: "La productivité ne consiste pas à travailler plus, mais à travailler mieux. Il s'agit d'optimiser votre temps et votre énergie pour produire des résultats de qualité.",
503
+ image: "https://picsum.photos/seed/work/800/400.jpg",
504
+ tips: [
505
+ "Utilisez la technique Pomodoro (25min travail, 5min pause).",
506
+ "Éliminez les distractions (notifications, téléphone).",
507
+ "Faites la tâche la plus difficile en premier (Eat the frog).",
508
+ "Utilisez des outils de gestion de tâches (Notion, Todoist)."
509
+ ],
510
+ examples: [
511
+ { icon: "fa-clock", text: "Pomodoro" },
512
+ { icon: "fa-list-check", text: "To-Do List" },
513
+ { icon: "fa-bell-slash", text: "Mode Focus" },
514
+ { icon: "fa-calendar", text: "Time Blocking" }
515
+ ]
516
+ },
517
+ {
518
+ keywords: ['santé', 'manger', 'sport', 'forme', 'poids', ' régime'],
519
+ title: "Conseils pour une meilleure santé",
520
+ text: "La santé est un investissement sur le long terme. De petits changements dans vos habitudes quotidiennes peuvent avoir un impact énorme sur votre bien-être physique et mental.",
521
+ image: "https://picsum.photos/seed/health/800/400.jpg",
522
+ tips: [
523
+ "Buvez au moins 1.5L d'eau par jour.",
524
+ "Privilégiez les aliments non transformés (fruits, légumes).",
525
+ "Faites 30 minutes d'activité physique modérée par jour.",
526
+ " Dormez 7 à 8 heures par nuit pour permettre la récupération."
527
+ ],
528
+ examples: [
529
+ { icon: "fa-apple-whole", text: "Alimentation" },
530
+ { icon: "fa-person-running", text: "Cardio" },
531
+ { icon: "fa-bed", text: "Sommeil" },
532
+ { icon: "fa-glass-water", text: "Hydratation" }
533
+ ]
534
+ }
535
+ ];
536
+
537
+ // Réponse par défaut (Fallback)
538
+ const defaultResponse = {
539
+ title: "Analyse en cours...",
540
+ text: "Je n'ai pas encore une réponse spécifique dans ma base de données pour cette requête précise. Cependant, voici une approche générale pour résoudre votre problème :",
541
+ image: "https://picsum.photos/seed/tech/800/400.jpg",
542
+ tips: [
543
+ "Décomposez le problème en petites étapes.",
544
+ "Recherchez des informations fiables sur Google.",
545
+ "Demandez conseil à des experts ou des communautés.",
546
+ "Testez différentes solutions et mesurez les résultats."
547
+ ],
548
+ examples: [
549
+ { icon: "fa-google", text: "Recherche Web" },
550
+ { icon: "fa-comments", text: "Forums" },
551
+ { icon: "fa-video", text: "Tutoriels" },
552
+ { icon: "fa-flask", text: "Expérimentation" }
553
+ ]
554
+ };
555
+
556
+ // Initialisation
557
+ document.addEventListener('DOMContentLoaded', () => {
558
+ loadHistory();
559
+ inputField.focus();
560
+ });
561
+
562
+ // Event Listeners
563
+ searchBtn.addEventListener('click', handleSearch);
564
+ inputField.addEventListener('keypress', (e) => {
565
+ if (e.key === 'Enter') handleSearch();
566
+ });
567
+
568
+ // Fonction principale de recherche
569
+ function handleSearch() {
570
+ const query = inputField.value.trim().toLowerCase();
571
+ if (!query) return;
572
+
573
+ // UI Updates
574
+ showLoading(true);
575
+ mainContainer.classList.remove('has-results');
576
+ emptyState.style.display = 'none';
577
+ resultsArea.innerHTML = '';
578
+ resultsArea.style.display = 'none';
579
+
580
+ // Simulation du délai de réflexion IA (500ms à 1500ms)
581
+ const delay = Math.floor(Math.random() * 800) + 500;
582
+
583
+ setTimeout(() => {
584
+ const response = findBestMatch(query);
585
+ renderResponse(response);
586
+ saveToHistory(inputField.value); // Sauvegarde le texte original
587
+
588
+ showLoading(false);
589
+ mainContainer.classList.add('has-results');
590
+ }, delay);
591
+ }
592
+
593
+ // Logique de recherche de correspondance
594
+ function findBestMatch(query) {
595
+ // Recherche simple par mots-clés
596
+ for (const item of knowledgeBase) {
597
+ const match = item.keywords.some(keyword => query.includes(keyword));
598
+ if (match) return item;
599
+ }
600
+ return defaultResponse;
601
+ }
602
+
603
+ // Affichage du résultat
604
+ function renderResponse(data) {
605
+ resultsArea.style.display = 'block';
606
+
607
+ const card = document.createElement('div');
608
+ card.className = 'advice-card';
609
+
610
+ // Construction des exemples HTML
611
+ const examplesHtml = data.examples.map(ex => `
612
+ <div class="example-item">
613
+ <i class="fa-solid ${ex.icon} example-icon"></i>
614
+ <span>${ex.text}</span>
615
+ </div>
616
+ `).join('');
617
+
618
+ // Construction des conseils HTML
619
+ const tipsHtml = data.tips.map(tip => `<li>${tip}</li>`).join('');
620
+
621
+ card.innerHTML = `
622
+ <div class="card-header">
623
+ <img src="${data.image}" alt="Illustration" class="card-image">
624
+ </div>
625
+ <div class="card-content">
626
+ <h2 class="card-title">${data.title}</h2>
627
+ <p class="card-text">${data.text}</p>
628
+
629
+ <div class="action-section">
630
+ <div class="action-title">
631
+ <i class="fa-solid fa-lightbulb"></i> Conseils Pratiques
632
+ </div>
633
+ <ul class="tips-list">
634
+ ${tipsHtml}
635
+ </ul>
636
+ </div>
637
+
638
+ <div class="examples-grid">
639
+ ${examplesHtml}
640
+ </div>
641
+ </div>
642
+ `;
643
+
644
+ resultsArea.appendChild(card);
645
+ }
646
+
647
+ // Gestion de l'historique
648
+ function saveToHistory(query) {
649
+ let history = JSON.parse(localStorage.getItem('adviceHistory')) || [];
650
+
651
+ // Supprimer les doublons
652
+ history = history.filter(item => item.toLowerCase() !== query.toLowerCase());
653
+
654
+ // Ajouter au début
655
+ history.unshift(query);
656
+
657
+ // Limiter à 10 éléments
658
+ if (history.length > 10) history.pop();
659
+
660
+ localStorage.setItem('adviceHistory', JSON.stringify(history));
661
+ renderHistory(history);
662
+ }
663
+
664
+ function loadHistory() {
665
+ const history = JSON.parse(localStorage.getItem('adviceHistory')) || [];
666
+ renderHistory(history);
667
+ }
668
+
669
+ function renderHistory(history) {
670
+ historyList.innerHTML = '';
671
+ if (history.length === 0) return;
672
+
673
+ history.forEach(item => {
674
+ const chip = document.createElement('div');
675
+ chip.className = 'history-chip';
676
+ chip.innerHTML = `<i class="fa-regular fa-clock"></i> ${item}`;
677
+ chip.addEventListener('click', () => {
678
+ inputField.value = item;
679
+ handleSearch();
680
+ });
681
+ historyList.appendChild(chip);
682
+ });
683
+ }
684
+
685
+ // Utilitaire de chargement
686
+ function showLoading(show) {
687
+ loadingSpinner.style.display = show ? 'flex' : 'none';
688
+ }
689
+ </script>
690
+ </body>
691
+ </html>