wako13 commited on
Commit
58d8e39
·
verified ·
1 Parent(s): 9f87919

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1363 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Messiahx
3
- emoji: 🦀
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: messiahx
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1363 @@
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">
6
+ <title>MeSSiahX - Analyse de Tendances Avancée</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
14
+ }
15
+ .sidebar-item:hover {
16
+ background-color: rgba(255, 255, 255, 0.1);
17
+ transform: translateX(5px);
18
+ transition: all 0.3s ease;
19
+ }
20
+ .pulse-animation {
21
+ animation: pulse 2s infinite;
22
+ }
23
+ @keyframes pulse {
24
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
25
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
26
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
27
+ }
28
+ .fade-in {
29
+ animation: fadeIn 0.5s ease-in;
30
+ }
31
+ @keyframes fadeIn {
32
+ from { opacity: 0; transform: translateY(10px); }
33
+ to { opacity: 1; transform: translateY(0); }
34
+ }
35
+ .terminal {
36
+ background-color: #1a1a1a;
37
+ color: #00ff00;
38
+ font-family: 'Courier New', monospace;
39
+ border-radius: 0.5rem;
40
+ padding: 1rem;
41
+ height: 300px;
42
+ overflow-y: auto;
43
+ }
44
+ .terminal::-webkit-scrollbar {
45
+ width: 5px;
46
+ }
47
+ .terminal::-webkit-scrollbar-thumb {
48
+ background-color: #4f46e5;
49
+ border-radius: 10px;
50
+ }
51
+ .tab-content {
52
+ display: none;
53
+ }
54
+ .tab-content.active {
55
+ display: block;
56
+ animation: fadeIn 0.3s ease-in;
57
+ }
58
+ .tab-button {
59
+ transition: all 0.3s ease;
60
+ }
61
+ .tab-button.active {
62
+ background-color: rgba(59, 130, 246, 0.1);
63
+ border-left: 3px solid #3b82f6;
64
+ }
65
+ .source-card:hover {
66
+ transform: translateY(-3px);
67
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
68
+ }
69
+ .security-level {
70
+ height: 8px;
71
+ border-radius: 4px;
72
+ background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
73
+ }
74
+ .security-indicator {
75
+ width: 0%;
76
+ height: 100%;
77
+ border-radius: 4px;
78
+ background-color: #3b82f6;
79
+ transition: width 0.5s ease;
80
+ }
81
+ </style>
82
+ </head>
83
+ <body class="bg-gray-100 font-sans">
84
+ <div class="flex h-screen overflow-hidden">
85
+ <!-- Sidebar -->
86
+ <div class="hidden md:flex md:flex-shrink-0">
87
+ <div class="flex flex-col w-64 gradient-bg text-white">
88
+ <div class="flex items-center justify-center h-16 px-4 border-b border-blue-800">
89
+ <div class="flex items-center space-x-2">
90
+ <i class="fas fa-brain text-2xl text-blue-300"></i>
91
+ <span class="text-xl font-bold">MeSSiahX</span>
92
+ </div>
93
+ </div>
94
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
95
+ <div class="space-y-1">
96
+ <div class="tab-button sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center active" data-tab="dashboard">
97
+ <i class="fas fa-home mr-3"></i>
98
+ <span>Dashboard</span>
99
+ </div>
100
+ <div class="tab-button sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center" data-tab="analyse">
101
+ <i class="fas fa-chart-line mr-3"></i>
102
+ <span>Analyse</span>
103
+ </div>
104
+ <div class="tab-button sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center" data-tab="sources">
105
+ <i class="fas fa-database mr-3"></i>
106
+ <span>Sources</span>
107
+ </div>
108
+ <div class="tab-button sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center" data-tab="security">
109
+ <i class="fas fa-key mr-3"></i>
110
+ <span>Sécurité</span>
111
+ </div>
112
+ <div class="tab-button sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center" data-tab="settings">
113
+ <i class="fas fa-cog mr-3"></i>
114
+ <span>Paramètres</span>
115
+ </div>
116
+ </div>
117
+ <div class="mt-auto mb-4">
118
+ <div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
119
+ <div class="flex items-center">
120
+ <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center">
121
+ <i class="fas fa-user"></i>
122
+ </div>
123
+ <div class="ml-3">
124
+ <p class="text-sm font-medium">Administrateur</p>
125
+ <p class="text-xs text-blue-200">Connecté</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Main content -->
135
+ <div class="flex flex-col flex-1 overflow-hidden">
136
+ <!-- Top navigation -->
137
+ <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200">
138
+ <div class="flex items-center">
139
+ <button class="md:hidden text-gray-500 focus:outline-none" id="mobileMenuButton">
140
+ <i class="fas fa-bars"></i>
141
+ </button>
142
+ <div class="relative ml-4">
143
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
144
+ <i class="fas fa-search text-gray-400"></i>
145
+ </div>
146
+ <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Rechercher...">
147
+ </div>
148
+ </div>
149
+ <div class="flex items-center space-x-4">
150
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
151
+ <i class="fas fa-bell"></i>
152
+ </button>
153
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
154
+ <i class="fas fa-question-circle"></i>
155
+ </button>
156
+ <div class="relative">
157
+ <button class="flex items-center space-x-2 focus:outline-none">
158
+ <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
159
+ <i class="fas fa-user"></i>
160
+ </div>
161
+ <span class="text-sm font-medium">Admin</span>
162
+ </button>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Content -->
168
+ <div class="flex-1 overflow-auto p-6">
169
+ <!-- Dashboard Tab -->
170
+ <div id="dashboard" class="tab-content active">
171
+ <div class="mb-6">
172
+ <h1 class="text-3xl font-bold text-gray-800">Analyse de Tendances Avancée</h1>
173
+ <p class="text-gray-600">Système d'analyse et de prédiction des tendances en temps réel</p>
174
+ </div>
175
+
176
+ <!-- Stats Cards -->
177
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
178
+ <div class="bg-white rounded-lg shadow p-6">
179
+ <div class="flex items-center justify-between">
180
+ <div>
181
+ <p class="text-sm font-medium text-gray-500">Cycles</p>
182
+ <p class="text-2xl font-semibold text-gray-800" id="cycleCount">0</p>
183
+ </div>
184
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
185
+ <i class="fas fa-sync-alt"></i>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div class="bg-white rounded-lg shadow p-6">
190
+ <div class="flex items-center justify-between">
191
+ <div>
192
+ <p class="text-sm font-medium text-gray-500">Perte</p>
193
+ <p class="text-2xl font-semibold text-gray-800" id="lossValue">0.0000</p>
194
+ </div>
195
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
196
+ <i class="fas fa-chart-line"></i>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div class="bg-white rounded-lg shadow p-6">
201
+ <div class="flex items-center justify-between">
202
+ <div>
203
+ <p class="text-sm font-medium text-gray-500">Sources</p>
204
+ <p class="text-2xl font-semibold text-gray-800" id="sourceCount">10</p>
205
+ </div>
206
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
207
+ <i class="fas fa-database"></i>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ <div class="bg-white rounded-lg shadow p-6">
212
+ <div class="flex items-center justify-between">
213
+ <div>
214
+ <p class="text-sm font-medium text-gray-500">Sécurité</p>
215
+ <p class="text-2xl font-semibold text-gray-800" id="securityStatus">Active</p>
216
+ </div>
217
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
218
+ <i class="fas fa-shield-alt"></i>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Main Content Area -->
225
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
226
+ <!-- Left Column -->
227
+ <div class="lg:col-span-2 space-y-6">
228
+ <!-- Control Panel -->
229
+ <div class="bg-white rounded-lg shadow overflow-hidden">
230
+ <div class="px-6 py-4 border-b border-gray-200">
231
+ <h2 class="text-lg font-medium text-gray-800">Contrôle du Système</h2>
232
+ </div>
233
+ <div class="p-6">
234
+ <div class="mb-4">
235
+ <label for="searchQuery" class="block text-sm font-medium text-gray-700 mb-2">Instruction de recherche</label>
236
+ <div class="flex space-x-2">
237
+ <input type="text" id="searchQuery" class="flex-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" value="explore random data">
238
+ <button id="runBtn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
239
+ <i class="fas fa-play mr-2"></i> Lancer
240
+ </button>
241
+ <button id="stopBtn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
242
+ <i class="fas fa-stop mr-2"></i> Arrêter
243
+ </button>
244
+ </div>
245
+ </div>
246
+ <div class="flex space-x-2">
247
+ <button id="exportBtn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
248
+ <i class="fas fa-file-export mr-2"></i> Exporter Rapport
249
+ </button>
250
+ <button id="discoverBtn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
251
+ <i class="fas fa-search-plus mr-2"></i> Découvrir Sources
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Performance Chart -->
258
+ <div class="bg-white rounded-lg shadow overflow-hidden">
259
+ <div class="px-6 py-4 border-b border-gray-200">
260
+ <h2 class="text-lg font-medium text-gray-800">Performance du Modèle</h2>
261
+ </div>
262
+ <div class="p-6">
263
+ <canvas id="performanceChart" height="200"></canvas>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Right Column -->
269
+ <div class="space-y-6">
270
+ <!-- Trends Panel -->
271
+ <div class="bg-white rounded-lg shadow overflow-hidden">
272
+ <div class="px-6 py-4 border-b border-gray-200">
273
+ <h2 class="text-lg font-medium text-gray-800">Tendances Détectées</h2>
274
+ </div>
275
+ <div class="p-6">
276
+ <div id="trendsContainer" class="space-y-4">
277
+ <div class="fade-in">
278
+ <div class="flex items-center">
279
+ <div class="h-8 w-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
280
+ <i class="fas fa-project-diagram"></i>
281
+ </div>
282
+ <h3 class="font-medium">Cluster 0</h3>
283
+ </div>
284
+ <div class="mt-2 pl-11">
285
+ <div class="flex flex-wrap gap-2">
286
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">data</span>
287
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">analysis</span>
288
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">trends</span>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ <div class="fade-in">
293
+ <div class="flex items-center">
294
+ <div class="h-8 w-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
295
+ <i class="fas fa-project-diagram"></i>
296
+ </div>
297
+ <h3 class="font-medium">Cluster 1</h3>
298
+ </div>
299
+ <div class="mt-2 pl-11">
300
+ <div class="flex flex-wrap gap-2">
301
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">security</span>
302
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">encryption</span>
303
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">keys</span>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- System Log -->
312
+ <div class="bg-white rounded-lg shadow overflow-hidden">
313
+ <div class="px-6 py-4 border-b border-gray-200">
314
+ <div class="flex items-center justify-between">
315
+ <h2 class="text-lg font-medium text-gray-800">Journal du Système</h2>
316
+ <button id="clearLogBtn" class="text-sm text-gray-500 hover:text-gray-700">
317
+ <i class="fas fa-trash-alt mr-1"></i> Effacer
318
+ </button>
319
+ </div>
320
+ </div>
321
+ <div class="p-4">
322
+ <div class="terminal">
323
+ <div class="text-green-400">> Initialisation du système MeSSiahX...</div>
324
+ <div class="text-green-400">> Chargement des sources de données...</div>
325
+ <div class="text-green-400">> 10 sources chargées avec succès</div>
326
+ <div class="text-green-400">> Module de chiffrement activé</div>
327
+ <div class="text-green-400">> Prêt à lancer l'analyse</div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Analyse Tab -->
336
+ <div id="analyse" class="tab-content">
337
+ <div class="mb-6">
338
+ <h1 class="text-3xl font-bold text-gray-800">Analyse Avancée</h1>
339
+ <p class="text-gray-600">Visualisation des données et modèles d'apprentissage</p>
340
+ </div>
341
+
342
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
343
+ <!-- Model Visualization -->
344
+ <div class="bg-white rounded-lg shadow overflow-hidden">
345
+ <div class="px-6 py-4 border-b border-gray-200">
346
+ <h2 class="text-lg font-medium text-gray-800">Visualisation du Modèle</h2>
347
+ </div>
348
+ <div class="p-6">
349
+ <div class="flex justify-center items-center h-64 bg-gray-50 rounded-lg">
350
+ <div class="text-center">
351
+ <i class="fas fa-project-diagram text-4xl text-blue-500 mb-2"></i>
352
+ <p class="text-gray-500">Architecture du réseau de neurones</p>
353
+ </div>
354
+ </div>
355
+ <div class="mt-4 grid grid-cols-3 gap-4">
356
+ <div class="bg-blue-50 p-3 rounded-lg text-center">
357
+ <p class="text-sm text-gray-500">Couches</p>
358
+ <p class="font-semibold">3</p>
359
+ </div>
360
+ <div class="bg-green-50 p-3 rounded-lg text-center">
361
+ <p class="text-sm text-gray-500">Neurones</p>
362
+ <p class="font-semibold">194</p>
363
+ </div>
364
+ <div class="bg-purple-50 p-3 rounded-lg text-center">
365
+ <p class="text-sm text-gray-500">Paramètres</p>
366
+ <p class="font-semibold">25,344</p>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Data Clusters -->
373
+ <div class="bg-white rounded-lg shadow overflow-hidden">
374
+ <div class="px-6 py-4 border-b border-gray-200">
375
+ <h2 class="text-lg font-medium text-gray-800">Clusters de Données</h2>
376
+ </div>
377
+ <div class="p-6">
378
+ <div class="flex justify-center items-center h-64 bg-gray-50 rounded-lg">
379
+ <canvas id="clusterChart" height="200"></canvas>
380
+ </div>
381
+ <div class="mt-4">
382
+ <div class="flex items-center justify-between mb-2">
383
+ <span class="text-sm font-medium text-gray-700">Cluster 0</span>
384
+ <span class="text-sm font-medium text-blue-600">42%</span>
385
+ </div>
386
+ <div class="w-full bg-gray-200 rounded-full h-2">
387
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 42%"></div>
388
+ </div>
389
+ </div>
390
+ <div class="mt-4">
391
+ <div class="flex items-center justify-between mb-2">
392
+ <span class="text-sm font-medium text-gray-700">Cluster 1</span>
393
+ <span class="text-sm font-medium text-green-600">58%</span>
394
+ </div>
395
+ <div class="w-full bg-gray-200 rounded-full h-2">
396
+ <div class="bg-green-600 h-2 rounded-full" style="width: 58%"></div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Training Metrics -->
403
+ <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-2">
404
+ <div class="px-6 py-4 border-b border-gray-200">
405
+ <h2 class="text-lg font-medium text-gray-800">Métriques d'Entraînement</h2>
406
+ </div>
407
+ <div class="p-6">
408
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
409
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
410
+ <div class="flex items-center justify-between">
411
+ <div>
412
+ <p class="text-sm font-medium text-gray-500">Précision</p>
413
+ <p class="text-2xl font-semibold">0.92</p>
414
+ </div>
415
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
416
+ <i class="fas fa-check-circle"></i>
417
+ </div>
418
+ </div>
419
+ <div class="mt-2">
420
+ <div class="w-full bg-gray-200 rounded-full h-1">
421
+ <div class="bg-green-500 h-1 rounded-full" style="width: 92%"></div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
426
+ <div class="flex items-center justify-between">
427
+ <div>
428
+ <p class="text-sm font-medium text-gray-500">Rappel</p>
429
+ <p class="text-2xl font-semibold">0.87</p>
430
+ </div>
431
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
432
+ <i class="fas fa-exclamation-circle"></i>
433
+ </div>
434
+ </div>
435
+ <div class="mt-2">
436
+ <div class="w-full bg-gray-200 rounded-full h-1">
437
+ <div class="bg-yellow-500 h-1 rounded-full" style="width: 87%"></div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
442
+ <div class="flex items-center justify-between">
443
+ <div>
444
+ <p class="text-sm font-medium text-gray-500">F1-Score</p>
445
+ <p class="text-2xl font-semibold">0.89</p>
446
+ </div>
447
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
448
+ <i class="fas fa-chart-bar"></i>
449
+ </div>
450
+ </div>
451
+ <div class="mt-2">
452
+ <div class="w-full bg-gray-200 rounded-full h-1">
453
+ <div class="bg-blue-500 h-1 rounded-full" style="width: 89%"></div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- Sources Tab -->
464
+ <div id="sources" class="tab-content">
465
+ <div class="mb-6">
466
+ <h1 class="text-3xl font-bold text-gray-800">Gestion des Sources</h1>
467
+ <p class="text-gray-600">Configuration et analyse des sources de données</p>
468
+ </div>
469
+
470
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
471
+ <!-- Sources List -->
472
+ <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-2">
473
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
474
+ <h2 class="text-lg font-medium text-gray-800">Sources Disponibles</h2>
475
+ <button class="text-sm bg-blue-600 text-white px-3 py-1 rounded-md hover:bg-blue-700">
476
+ <i class="fas fa-plus mr-1"></i> Ajouter
477
+ </button>
478
+ </div>
479
+ <div class="p-6">
480
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="sourcesList">
481
+ <!-- Sources will be added here dynamically -->
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- Source Analysis -->
487
+ <div class="bg-white rounded-lg shadow overflow-hidden">
488
+ <div class="px-6 py-4 border-b border-gray-200">
489
+ <h2 class="text-lg font-medium text-gray-800">Analyse des Sources</h2>
490
+ </div>
491
+ <div class="p-6">
492
+ <div class="flex justify-center items-center h-48 bg-gray-50 rounded-lg mb-4">
493
+ <canvas id="sourceChart" height="150"></canvas>
494
+ </div>
495
+ <div class="space-y-3">
496
+ <div>
497
+ <div class="flex justify-between text-sm mb-1">
498
+ <span class="font-medium">Qualité Moyenne</span>
499
+ <span>78%</span>
500
+ </div>
501
+ <div class="w-full bg-gray-200 rounded-full h-2">
502
+ <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
503
+ </div>
504
+ </div>
505
+ <div>
506
+ <div class="flex justify-between text-sm mb-1">
507
+ <span class="font-medium">Actualisation</span>
508
+ <span>2.4h</span>
509
+ </div>
510
+ <div class="w-full bg-gray-200 rounded-full h-2">
511
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
512
+ </div>
513
+ </div>
514
+ <div>
515
+ <div class="flex justify-between text-sm mb-1">
516
+ <span class="font-medium">Pertinence</span>
517
+ <span>84%</span>
518
+ </div>
519
+ <div class="w-full bg-gray-200 rounded-full h-2">
520
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 84%"></div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+
527
+ <!-- Add Source Form -->
528
+ <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-3">
529
+ <div class="px-6 py-4 border-b border-gray-200">
530
+ <h2 class="text-lg font-medium text-gray-800">Ajouter une Nouvelle Source</h2>
531
+ </div>
532
+ <div class="p-6">
533
+ <form class="space-y-4">
534
+ <div>
535
+ <label class="block text-sm font-medium text-gray-700 mb-1">URL de la Source</label>
536
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="https://example.com/data">
537
+ </div>
538
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
539
+ <div>
540
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
541
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Nom descriptif">
542
+ </div>
543
+ <div>
544
+ <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
545
+ <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
546
+ <option>API</option>
547
+ <option>Web Scraping</option>
548
+ <option>Base de données</option>
549
+ <option>Fichier</option>
550
+ </select>
551
+ </div>
552
+ </div>
553
+ <div>
554
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
555
+ <textarea class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" rows="3"></textarea>
556
+ </div>
557
+ <div class="flex justify-end">
558
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
559
+ Annuler
560
+ </button>
561
+ <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
562
+ Enregistrer
563
+ </button>
564
+ </div>
565
+ </form>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <!-- Security Tab -->
572
+ <div id="security" class="tab-content">
573
+ <div class="mb-6">
574
+ <h1 class="text-3xl font-bold text-gray-800">Sécurité du Système</h1>
575
+ <p class="text-gray-600">Gestion du chiffrement et des accès</p>
576
+ </div>
577
+
578
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
579
+ <!-- Encryption Status -->
580
+ <div class="bg-white rounded-lg shadow overflow-hidden">
581
+ <div class="px-6 py-4 border-b border-gray-200">
582
+ <h2 class="text-lg font-medium text-gray-800">État du Chiffrement</h2>
583
+ </div>
584
+ <div class="p-6">
585
+ <div class="flex items-center justify-between mb-4">
586
+ <div>
587
+ <p class="text-sm font-medium text-gray-500">Niveau de Sécurité</p>
588
+ <p class="text-2xl font-semibold">Élevé</p>
589
+ </div>
590
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
591
+ <i class="fas fa-lock"></i>
592
+ </div>
593
+ </div>
594
+ <div class="security-level mb-2">
595
+ <div class="security-indicator" style="width: 85%"></div>
596
+ </div>
597
+ <p class="text-xs text-gray-500 text-right">85% - AES-256 avec GCM</p>
598
+
599
+ <div class="mt-6 space-y-3">
600
+ <div class="flex items-center">
601
+ <div class="h-8 w-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
602
+ <i class="fas fa-check"></i>
603
+ </div>
604
+ <div>
605
+ <p class="text-sm font-medium">Chiffrement Actif</p>
606
+ <p class="text-xs text-gray-500">Toutes les données sont chiffrées</p>
607
+ </div>
608
+ </div>
609
+ <div class="flex items-center">
610
+ <div class="h-8 w-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
611
+ <i class="fas fa-check"></i>
612
+ </div>
613
+ <div>
614
+ <p class="text-sm font-medium">Clés Rotatives</p>
615
+ <p class="text-xs text-gray-500">Mutation automatique toutes les 5 cycles</p>
616
+ </div>
617
+ </div>
618
+ <div class="flex items-center">
619
+ <div class="h-8 w-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
620
+ <i class="fas fa-sync-alt"></i>
621
+ </div>
622
+ <div>
623
+ <p class="text-sm font-medium">Dernière Mutation</p>
624
+ <p class="text-xs text-gray-500">Il y a 12 minutes</p>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ <!-- Key Management -->
632
+ <div class="bg-white rounded-lg shadow overflow-hidden">
633
+ <div class="px-6 py-4 border-b border-gray-200">
634
+ <h2 class="text-lg font-medium text-gray-800">Gestion des Clés</h2>
635
+ </div>
636
+ <div class="p-6">
637
+ <div class="mb-4">
638
+ <label class="block text-sm font-medium text-gray-700 mb-2">Clé Actuelle</label>
639
+ <div class="flex">
640
+ <input type="text" class="flex-1 block w-full rounded-l-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" value="a3Bk...WJqZ" readonly>
641
+ <button class="inline-flex items-center px-3 py-2 border border-l-0 border-gray-300 rounded-r-md bg-gray-50 text-gray-500 hover:bg-gray-100">
642
+ <i class="fas fa-copy"></i>
643
+ </button>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="space-y-3">
648
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
649
+ <i class="fas fa-redo mr-2"></i> Régénérer la Clé
650
+ </button>
651
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
652
+ <i class="fas fa-key mr-2"></i> Exporter la Clé
653
+ </button>
654
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
655
+ <i class="fas fa-history mr-2"></i> Historique des Clés
656
+ </button>
657
+ </div>
658
+
659
+ <div class="mt-6">
660
+ <label class="block text-sm font-medium text-gray-700 mb-2">Nouvelle Clé Manuelle</label>
661
+ <textarea class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" rows="3" placeholder="Coller une nouvelle clé..."></textarea>
662
+ <button class="mt-2 w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
663
+ <i class="fas fa-save mr-2"></i> Enregistrer
664
+ </button>
665
+ </div>
666
+ </div>
667
+ </div>
668
+
669
+ <!-- Access Control -->
670
+ <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-1">
671
+ <div class="px-6 py-4 border-b border-gray-200">
672
+ <h2 class="text-lg font-medium text-gray-800">Contrôle d'Accès</h2>
673
+ </div>
674
+ <div class="p-6">
675
+ <div class="space-y-4">
676
+ <div>
677
+ <label class="block text-sm font-medium text-gray-700 mb-2">Utilisateurs</label>
678
+ <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
679
+ <option>Administrateur (vous)</option>
680
+ <option>Analyste</option>
681
+ <option>Consultant</option>
682
+ <option>Invité</option>
683
+ </select>
684
+ </div>
685
+
686
+ <div>
687
+ <label class="block text-sm font-medium text-gray-700 mb-2">Permissions</label>
688
+ <div class="space-y-2">
689
+ <div class="flex items-center">
690
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
691
+ <label class="ml-2 block text-sm text-gray-700">Accès complet</label>
692
+ </div>
693
+ <div class="flex items-center">
694
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
695
+ <label class="ml-2 block text-sm text-gray-700">Modification</label>
696
+ </div>
697
+ <div class="flex items-center">
698
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
699
+ <label class="ml-2 block text-sm text-gray-700">Exportation</label>
700
+ </div>
701
+ <div class="flex items-center">
702
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
703
+ <label class="ml-2 block text-sm text-gray-700">Administration</label>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="pt-4 border-t border-gray-200">
709
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
710
+ <i class="fas fa-user-plus mr-2"></i> Ajouter Utilisateur
711
+ </button>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+ <!-- Security Log -->
718
+ <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-3">
719
+ <div class="px-6 py-4 border-b border-gray-200">
720
+ <div class="flex items-center justify-between">
721
+ <h2 class="text-lg font-medium text-gray-800">Journal de Sécurité</h2>
722
+ <button class="text-sm bg-gray-100 px-3 py-1 rounded-md hover:bg-gray-200">
723
+ <i class="fas fa-filter mr-1"></i> Filtrer
724
+ </button>
725
+ </div>
726
+ </div>
727
+ <div class="p-6">
728
+ <div class="overflow-x-auto">
729
+ <table class="min-w-full divide-y divide-gray-200">
730
+ <thead class="bg-gray-50">
731
+ <tr>
732
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
733
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Événement</th>
734
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th>
735
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP</th>
736
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
737
+ </tr>
738
+ </thead>
739
+ <tbody class="bg-white divide-y divide-gray-200">
740
+ <tr>
741
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-15 14:32</td>
742
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mutation de clé</td>
743
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">System</td>
744
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">N/A</td>
745
+ <td class="px-6 py-4 whitespace-nowrap">
746
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Succès</span>
747
+ </td>
748
+ </tr>
749
+ <tr>
750
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-15 13:45</td>
751
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Connexion</td>
752
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">admin</td>
753
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.5</td>
754
+ <td class="px-6 py-4 whitespace-nowrap">
755
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Succès</span>
756
+ </td>
757
+ </tr>
758
+ <tr>
759
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-15 10:21</td>
760
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Export rapport</td>
761
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">admin</td>
762
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.5</td>
763
+ <td class="px-6 py-4 whitespace-nowrap">
764
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Complété</span>
765
+ </td>
766
+ </tr>
767
+ <tr>
768
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-14 18:03</td>
769
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Tentative de connexion</td>
770
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">guest</td>
771
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.12</td>
772
+ <td class="px-6 py-4 whitespace-nowrap">
773
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Échec</span>
774
+ </td>
775
+ </tr>
776
+ </tbody>
777
+ </table>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ </div>
783
+
784
+ <!-- Settings Tab -->
785
+ <div id="settings" class="tab-content">
786
+ <div class="mb-6">
787
+ <h1 class="text-3xl font-bold text-gray-800">Paramètres du Système</h1>
788
+ <p class="text-gray-600">Configuration globale de l'application</p>
789
+ </div>
790
+
791
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
792
+ <!-- General Settings -->
793
+ <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-2">
794
+ <div class="px-6 py-4 border-b border-gray-200">
795
+ <h2 class="text-lg font-medium text-gray-800">Paramètres Généraux</h2>
796
+ </div>
797
+ <div class="p-6">
798
+ <form class="space-y-6">
799
+ <div>
800
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'Instance</label>
801
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" value="MeSSiahX Production">
802
+ </div>
803
+
804
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
805
+ <div>
806
+ <label class="block text-sm font-medium text-gray-700 mb-1">Langue</label>
807
+ <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
808
+ <option>Français</option>
809
+ <option>English</option>
810
+ <option>Español</option>
811
+ <option>Deutsch</option>
812
+ </select>
813
+ </div>
814
+ <div>
815
+ <label class="block text-sm font-medium text-gray-700 mb-1">Fuseau Horaire</label>
816
+ <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
817
+ <option>Europe/Paris (UTC+2)</option>
818
+ <option>UTC</option>
819
+ <option>America/New_York (UTC-4)</option>
820
+ <option>Asia/Tokyo (UTC+9)</option>
821
+ </select>
822
+ </div>
823
+ </div>
824
+
825
+ <div>
826
+ <label class="block text-sm font-medium text-gray-700 mb-1">Thème</label>
827
+ <div class="grid grid-cols-3 gap-4">
828
+ <div class="cursor-pointer">
829
+ <div class="h-20 rounded-md bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center">
830
+ <span class="text-white font-medium">Bleu</span>
831
+ </div>
832
+ </div>
833
+ <div class="cursor-pointer">
834
+ <div class="h-20 rounded-md bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
835
+ <span class="text-white font-medium">Sombre</span>
836
+ </div>
837
+ </div>
838
+ <div class="cursor-pointer">
839
+ <div class="h-20 rounded-md bg-gradient-to-br from-green-500 to-green-700 flex items-center justify-center">
840
+ <span class="text-white font-medium">Vert</span>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+
846
+ <div class="flex items-center">
847
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
848
+ <label class="ml-2 block text-sm text-gray-700">Activer les notifications</label>
849
+ </div>
850
+
851
+ <div class="flex items-center">
852
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
853
+ <label class="ml-2 block text-sm text-gray-700">Mode sombre</label>
854
+ </div>
855
+
856
+ <div class="flex justify-end pt-6 border-t border-gray-200">
857
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
858
+ Annuler
859
+ </button>
860
+ <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
861
+ Enregistrer
862
+ </button>
863
+ </div>
864
+ </form>
865
+ </div>
866
+ </div>
867
+
868
+ <!-- System Information -->
869
+ <div class="bg-white rounded-lg shadow overflow-hidden">
870
+ <div class="px-6 py-4 border-b border-gray-200">
871
+ <h2 class="text-lg font-medium text-gray-800">Information Système</h2>
872
+ </div>
873
+ <div class="p-6">
874
+ <div class="space-y-4">
875
+ <div>
876
+ <p class="text-sm font-medium text-gray-500">Version</p>
877
+ <p class="text-lg font-semibold">MeSSiahX 2.1.3</p>
878
+ </div>
879
+
880
+ <div>
881
+ <p class="text-sm font-medium text-gray-500">Statut</p>
882
+ <div class="flex items-center mt-1">
883
+ <span class="flex h-3 w-3 rounded-full bg-green-500 mr-2"></span>
884
+ <span class="text-sm font-medium">Opérationnel</span>
885
+ </div>
886
+ </div>
887
+
888
+ <div>
889
+ <p class="text-sm font-medium text-gray-500">Uptime</p>
890
+ <p class="text-sm">7 jours 12:34:21</p>
891
+ </div>
892
+
893
+ <div>
894
+ <p class="text-sm font-medium text-gray-500">Dernière Mise à Jour</p>
895
+ <p class="text-sm">2023-07-10</p>
896
+ </div>
897
+
898
+ <div class="pt-4 border-t border-gray-200">
899
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
900
+ <i class="fas fa-sync-alt mr-2"></i> Vérifier les Mises à Jour
901
+ </button>
902
+ </div>
903
+
904
+ <div class="pt-4 border-t border-gray-200">
905
+ <div class="flex justify-between text-sm mb-1">
906
+ <span class="font-medium">Espace Disque</span>
907
+ <span>45% utilisé</span>
908
+ </div>
909
+ <div class="w-full bg-gray-200 rounded-full h-2">
910
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div>
911
+ </div>
912
+ </div>
913
+
914
+ <div class="pt-2">
915
+ <div class="flex justify-between text-sm mb-1">
916
+ <span class="font-medium">Mémoire</span>
917
+ <span>62% utilisé</span>
918
+ </div>
919
+ <div class="w-full bg-gray-200 rounded-full h-2">
920
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 62%"></div>
921
+ </div>
922
+ </div>
923
+
924
+ <div class="pt-2">
925
+ <div class="flex justify-between text-sm mb-1">
926
+ <span class="font-medium">CPU</span>
927
+ <span>28% utilisé</span>
928
+ </div>
929
+ <div class="w-full bg-gray-200 rounded-full h-2">
930
+ <div class="bg-green-500 h-2 rounded-full" style="width: 28%"></div>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ </div>
935
+ </div>
936
+
937
+ <!-- Backup & Restore -->
938
+ <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-3">
939
+ <div class="px-6 py-4 border-b border-gray-200">
940
+ <h2 class="text-lg font-medium text-gray-800">Sauvegarde & Restauration</h2>
941
+ </div>
942
+ <div class="p-6">
943
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
944
+ <div class="border border-gray-200 rounded-lg p-4">
945
+ <div class="flex items-center justify-between mb-3">
946
+ <i class="fas fa-database text-2xl text-blue-500"></i>
947
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Automatique</span>
948
+ </div>
949
+ <h3 class="font-medium mb-1">Sauvegarde Complète</h3>
950
+ <p class="text-sm text-gray-500 mb-3">Toutes les données et configurations</p>
951
+ <div class="text-xs text-gray-500 mb-2">Dernière sauvegarde: 2023-07-14 02:00</div>
952
+ <button class="w-full mt-2 flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
953
+ <i class="fas fa-play mr-2"></i> Exécuter Maintenant
954
+ </button>
955
+ </div>
956
+
957
+ <div class="border border-gray-200 rounded-lg p-4">
958
+ <div class="flex items-center justify-between mb-3">
959
+ <i class="fas fa-file-export text-2xl text-green-500"></i>
960
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Manuel</span>
961
+ </div>
962
+ <h3 class="font-medium mb-1">Exporter Configuration</h3>
963
+ <p class="text-sm text-gray-500 mb-3">Paramètres système uniquement</p>
964
+ <div class="text-xs text-gray-500 mb-2">Dernier export: 2023-06-30</div>
965
+ <button class="w-full mt-2 flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
966
+ <i class="fas fa-download mr-2"></i> Exporter
967
+ </button>
968
+ </div>
969
+
970
+ <div class="border border-gray-200 rounded-lg p-4">
971
+ <div class="flex items-center justify-between mb-3">
972
+ <i class="fas fa-file-import text-2xl text-purple-500"></i>
973
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Manuel</span>
974
+ </div>
975
+ <h3 class="font-medium mb-1">Restaurer</h3>
976
+ <p class="text-sm text-gray-500 mb-3">Charger une sauvegarde</p>
977
+ <div class="text-xs text-gray-500 mb-2">Sélectionner un fichier .backup</div>
978
+ <button class="w-full mt-2 flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
979
+ <i class="fas fa-upload mr-2"></i> Importer
980
+ </button>
981
+ </div>
982
+ </div>
983
+ </div>
984
+ </div>
985
+ </div>
986
+ </div>
987
+ </div>
988
+ </div>
989
+ </div>
990
+
991
+ <script>
992
+ // Simulation des données et état de l'application
993
+ const appState = {
994
+ running: false,
995
+ cycleCount: 0,
996
+ lossValue: 0.0,
997
+ bestLoss: Infinity,
998
+ sources: [
999
+ {name: "Wikipedia", score: 0.9, lastUsed: "2 min ago", type: "Web"},
1000
+ {name: "Google News", score: 0.8, lastUsed: "5 min ago", type: "API"},
1001
+ {name: "Medium", score: 0.7, lastUsed: "12 min ago", type: "Web"},
1002
+ {name: "ArXiv", score: 0.85, lastUsed: "8 min ago", type: "API"},
1003
+ {name: "GitHub", score: 0.75, lastUsed: "15 min ago", type: "API"},
1004
+ {name: "Stack Overflow", score: 0.7, lastUsed: "20 min ago", type: "Web"},
1005
+ {name: "Reddit", score: 0.65, lastUsed: "25 min ago", type: "API"},
1006
+ {name: "Google Trends", score: 0.8, lastUsed: "3 min ago", type: "Web"},
1007
+ {name: "BBC", score: 0.75, lastUsed: "10 min ago", type: "Web"},
1008
+ {name: "Google Scholar", score: 0.7, lastUsed: "18 min ago", type: "Web"}
1009
+ ],
1010
+ performanceHistory: [],
1011
+ keyHistory: [],
1012
+ trends: {
1013
+ 0: ["data", "analysis", "trends", "learning", "model"],
1014
+ 1: ["security", "encryption", "keys", "protection", "privacy"]
1015
+ },
1016
+ intervalId: null,
1017
+ chart: null,
1018
+ clusterChart: null,
1019
+ sourceChart: null,
1020
+ securityLevel: 85
1021
+ };
1022
+
1023
+ // Initialisation des graphiques
1024
+ function initCharts() {
1025
+ // Performance Chart
1026
+ const ctx = document.getElementById('performanceChart').getContext('2d');
1027
+ appState.chart = new Chart(ctx, {
1028
+ type: 'line',
1029
+ data: {
1030
+ labels: Array.from({length: 20}, (_, i) => i + 1),
1031
+ datasets: [
1032
+ {
1033
+ label: 'Perte',
1034
+ data: [],
1035
+ borderColor: '#3b82f6',
1036
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
1037
+ tension: 0.4,
1038
+ fill: true
1039
+ },
1040
+ {
1041
+ label: 'Mutations Clés',
1042
+ data: [],
1043
+ borderColor: '#ef4444',
1044
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
1045
+ borderDash: [5, 5],
1046
+ tension: 0.4,
1047
+ fill: true
1048
+ }
1049
+ ]
1050
+ },
1051
+ options: {
1052
+ responsive: true,
1053
+ plugins: {
1054
+ legend: {
1055
+ position: 'top',
1056
+ },
1057
+ tooltip: {
1058
+ mode: 'index',
1059
+ intersect: false,
1060
+ }
1061
+ },
1062
+ scales: {
1063
+ y: {
1064
+ beginAtZero: true
1065
+ }
1066
+ },
1067
+ animation: {
1068
+ duration: 1000
1069
+ }
1070
+ }
1071
+ });
1072
+
1073
+ // Cluster Chart
1074
+ const clusterCtx = document.getElementById('clusterChart').getContext('2d');
1075
+ appState.clusterChart = new Chart(clusterCtx, {
1076
+ type: 'scatter',
1077
+ data: {
1078
+ datasets: [
1079
+ {
1080
+ label: 'Cluster 0',
1081
+ data: Array.from({length: 30}, () => ({
1082
+ x: Math.random() * 3 + 1,
1083
+ y: Math.random() * 3 + 1
1084
+ })),
1085
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
1086
+ borderColor: 'rgba(59, 130, 246, 1)',
1087
+ borderWidth: 1
1088
+ },
1089
+ {
1090
+ label: 'Cluster 1',
1091
+ data: Array.from({length: 30}, () => ({
1092
+ x: Math.random() * 3 + 4,
1093
+ y: Math.random() * 3 + 4
1094
+ })),
1095
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
1096
+ borderColor: 'rgba(16, 185, 129, 1)',
1097
+ borderWidth: 1
1098
+ }
1099
+ ]
1100
+ },
1101
+ options: {
1102
+ responsive: true,
1103
+ scales: {
1104
+ x: { display: false },
1105
+ y: { display: false }
1106
+ },
1107
+ plugins: {
1108
+ legend: {
1109
+ position: 'bottom',
1110
+ }
1111
+ }
1112
+ }
1113
+ });
1114
+
1115
+ // Source Chart
1116
+ const sourceCtx = document.getElementById('sourceChart').getContext('2d');
1117
+ appState.sourceChart = new Chart(sourceCtx, {
1118
+ type: 'doughnut',
1119
+ data: {
1120
+ labels: ['Wikipedia', 'Google News', 'ArXiv', 'GitHub', 'Autres'],
1121
+ datasets: [{
1122
+ data: [25, 20, 15, 10, 30],
1123
+ backgroundColor: [
1124
+ '#3b82f6',
1125
+ '#10b981',
1126
+ '#6366f1',
1127
+ '#f59e0b',
1128
+ '#64748b'
1129
+ ],
1130
+ borderWidth: 0
1131
+ }]
1132
+ },
1133
+ options: {
1134
+ responsive: true,
1135
+ plugins: {
1136
+ legend: {
1137
+ position: 'bottom',
1138
+ }
1139
+ },
1140
+ cutout: '70%'
1141
+ }
1142
+ });
1143
+ }
1144
+
1145
+ // Mise à jour du graphique de performance
1146
+ function updateChart() {
1147
+ if (appState.chart) {
1148
+ appState.chart.data.datasets[0].data = appState.performanceHistory;
1149
+ appState.chart.data.datasets[1].data = appState.keyHistory.map((_, i) => i % 5 === 0 ? 0.5 : null);
1150
+ appState.chart.update();
1151
+ }
1152
+ }
1153
+
1154
+ // Simulation d'un cycle d'analyse
1155
+ function simulateCycle() {
1156
+ if (!appState.running) return;
1157
+
1158
+ appState.cycleCount++;
1159
+ document.getElementById('cycleCount').textContent = appState.cycleCount;
1160
+
1161
+ // Générer une perte aléatoire qui tend à diminuer
1162
+ const loss = Math.max(0.001, (Math.random() * 0.1) * (1 - appState.cycleCount / 100));
1163
+ appState.lossValue = loss.toFixed(4);
1164
+ document.getElementById('lossValue').textContent = appState.lossValue;
1165
+
1166
+ if (loss < appState.bestLoss) {
1167
+ appState.bestLoss = loss;
1168
+ document.getElementById('lossValue').classList.add('text-green-600');
1169
+ setTimeout(() => {
1170
+ document.getElementById('lossValue').classList.remove('text-green-600');
1171
+ }, 1000);
1172
+ }
1173
+
1174
+ appState.performanceHistory.push(loss);
1175
+ if (appState.performanceHistory.length > 20) {
1176
+ appState.performanceHistory.shift();
1177
+ }
1178
+
1179
+ // Mettre à jour les tendances périodiquement
1180
+ if (appState.cycleCount % 3 === 0) {
1181
+ updateTrends();
1182
+ }
1183
+
1184
+ // Ajouter une mutation de clé périodique
1185
+ if (appState.cycleCount % 5 === 0) {
1186
+ appState.keyHistory.push(appState.cycleCount);
1187
+ addLog(`Mutation de clé #${Math.floor(appState.cycleCount/5)} effectuée`);
1188
+
1189
+ // Augmenter le niveau de sécurité
1190
+ appState.securityLevel = Math.min(100, appState.securityLevel + 2);
1191
+ updateSecurityLevel();
1192
+ }
1193
+
1194
+ updateChart();
1195
+ }
1196
+
1197
+ // Mettre à jour l'affichage des tendances
1198
+ function updateTrends() {
1199
+ // Générer des tendances aléatoires
1200
+ const topics = [
1201
+ ["AI", "machine learning", "neural networks", "deep learning", "algorithms"],
1202
+ ["security", "encryption", "privacy", "cybersecurity", "blockchain"],
1203
+ ["data", "analytics", "visualization", "big data", "database"],
1204
+ ["cloud", "serverless", "microservices", "containers", "kubernetes"],
1205
+ ["startups", "funding", "venture capital", "innovation", "disruption"]
1206
+ ];
1207
+
1208
+ const randomCluster1 = topics[Math.floor(Math.random() * topics.length)];
1209
+ let randomCluster2;
1210
+ do {
1211
+ randomCluster2 = topics[Math.floor(Math.random() * topics.length)];
1212
+ } while (randomCluster2 === randomCluster1);
1213
+
1214
+ appState.trends = {
1215
+ 0: randomCluster1,
1216
+ 1: randomCluster2
1217
+ };
1218
+
1219
+ const trendsContainer = document.getElementById('trendsContainer');
1220
+ trendsContainer.innerHTML = '';
1221
+
1222
+ Object.entries(appState.trends).forEach(([cluster, words], index) => {
1223
+ const clusterDiv = document.createElement('div');
1224
+ clusterDiv.className = 'fade-in';
1225
+
1226
+ const colors = ['blue', 'green', 'purple', 'yellow', 'red'];
1227
+ const color = colors[index % colors.length];
1228
+
1229
+ clusterDiv.innerHTML = `
1230
+ <div class="flex items-center">
1231
+ <div class="h-8 w-8 rounded-full bg-${color}-100 text-${color}-600 flex items-center justify-center mr-3">
1232
+ <i class="fas fa-project-diagram"></i>
1233
+ </div>
1234
+ <h3 class="font-medium">Cluster ${cluster}</h3>
1235
+ </div>
1236
+ <div class="mt-2 pl-11">
1237
+ <div class="flex flex-wrap gap-2">
1238
+ ${words.map(word => `<span class="px-2 py-1 bg-${color}-100 text-${color}-800 text-xs rounded-full">${word}</span>`).join('')}
1239
+ </div>
1240
+ </div>
1241
+ `;
1242
+
1243
+ trendsContainer.appendChild(clusterDiv);
1244
+ });
1245
+
1246
+ addLog(`Mise à jour des tendances - ${randomCluster1[0]} / ${randomCluster2[0]}`);
1247
+ }
1248
+
1249
+ // Mettre à jour le niveau de sécurité
1250
+ function updateSecurityLevel() {
1251
+ const indicator = document.querySelector('.security-indicator');
1252
+ if (indicator) {
1253
+ indicator.style.width = `${appState.securityLevel}%`;
1254
+
1255
+ // Mettre à jour le texte
1256
+ let statusText = "Moyen";
1257
+ let statusClass = "text-yellow-600";
1258
+
1259
+ if (appState.securityLevel > 80) {
1260
+ statusText = "Élevé";
1261
+ statusClass = "text-green-600";
1262
+ } else if (appState.securityLevel < 50) {
1263
+ statusText = "Faible";
1264
+ statusClass = "text-red-600";
1265
+ }
1266
+
1267
+ document.getElementById('securityStatus').textContent = statusText;
1268
+ document.getElementById('securityStatus').className = `text-2xl font-semibold ${statusClass}`;
1269
+ }
1270
+ }
1271
+
1272
+ // Ajouter une entrée au journal
1273
+ function addLog(message) {
1274
+ const terminal = document.querySelector('.terminal');
1275
+ const logEntry = document.createElement('div');
1276
+ logEntry.className = 'text-green-400';
1277
+ logEntry.innerHTML = `> ${new Date().toLocaleTimeString()}: ${message}`;
1278
+ terminal.appendChild(logEntry);
1279
+ terminal.scrollTop = terminal.scrollHeight;
1280
+ }
1281
+
1282
+ // Remplir la liste des sources
1283
+ function populateSourcesList() {
1284
+ const sourcesList = document.getElementById('sourcesList');
1285
+ if (!sourcesList) return;
1286
+
1287
+ sourcesList.innerHTML = '';
1288
+
1289
+ appState.sources.forEach(source => {
1290
+ const sourceCard = document.createElement('div');
1291
+ sourceCard.className = 'source-card bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all duration-200';
1292
+
1293
+ const scoreColor = source.score > 0.8 ? 'bg-green-100 text-green-800' :
1294
+ source.score > 0.6 ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800';
1295
+
1296
+ sourceCard.innerHTML = `
1297
+ <div class="flex justify-between items-start mb-2">
1298
+ <h3 class="font-medium">${source.name}</h3>
1299
+ <span class="text-xs ${scoreColor} px-2 py-1 rounded-full">${(source.score * 100).toFixed(0)}%</span>
1300
+ </div>
1301
+ <div class="flex items-center text-sm text-gray-500 mb-3">
1302
+ <i class="fas fa-${source.type === 'API' ? 'plug' : 'globe'} mr-1"></i>
1303
+ <span>${source.type}</span>
1304
+ <span class="mx-2">•</span>
1305
+ <i class="fas fa-clock mr-1"></i>
1306
+ <span>${source.lastUsed}</span>
1307
+ </div>
1308
+ <div class="flex space-x-2">
1309
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">
1310
+ <i class="fas fa-eye mr-1"></i> Voir
1311
+ </button>
1312
+ <button class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-800 px-2 py-1 rounded">
1313
+ <i class="fas fa-sync-alt mr-1"></i> Actualiser
1314
+ </button>
1315
+ <button class="text-xs bg-red-100 hover:bg-red-200 text-red-800 px-2 py-1 rounded">
1316
+ <i class="fas fa-trash-alt mr-1"></i> Supprimer
1317
+ </button>
1318
+ </div>
1319
+ `;
1320
+
1321
+ sourcesList.appendChild(sourceCard);
1322
+ });
1323
+ }
1324
+
1325
+ // Gestion des onglets
1326
+ function setupTabs() {
1327
+ const tabButtons = document.querySelectorAll('.tab-button');
1328
+ const tabContents = document.querySelectorAll('.tab-content');
1329
+
1330
+ tabButtons.forEach(button => {
1331
+ button.addEventListener('click', () => {
1332
+ const tabId = button.getAttribute('data-tab');
1333
+
1334
+ // Désactiver tous les onglets
1335
+ tabButtons.forEach(btn => btn.classList.remove('active'));
1336
+ tabContents.forEach(content => content.classList.remove('active'));
1337
+
1338
+ // Activer l'onglet sélectionné
1339
+ button.classList.add('active');
1340
+ document.getElementById(tabId).classList.add('active');
1341
+
1342
+ // Mettre à jour les graphiques si nécessaire
1343
+ if (tabId === 'sources') {
1344
+ populateSourcesList();
1345
+ }
1346
+ });
1347
+ });
1348
+ }
1349
+
1350
+ // Gestion du menu mobile
1351
+ function setupMobileMenu() {
1352
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
1353
+ const sidebar = document.querySelector('.hidden.md\\:flex');
1354
+
1355
+ if (mobileMenuButton && sidebar) {
1356
+ mobileMenuButton.addEventListener('click', () => {
1357
+ sidebar.classList.toggle('hidden');
1358
+ });
1359
+ }
1360
+ }
1361
+
1362
+ //
1363
+ </html>