Hugging Face's logo

Spaces:
CCCBCCX
/
cryptoguardian-pro-dashboard
Running

App Files Community
CCCBCCX commited on
Commit
6bc1d0e
·
verified ·
1 Parent(s): 735b27c

CORRIGE TOUT LES BUG AFFICHACHE , GRAPHIQUE ET AUTRE

Browse files
Files changed (4) hide show
  1. ai-advice.html +37 -3
  2. alerts.html +46 -2
  3. index.html +156 -85
  4. settings.html +59 -2
ai-advice.html CHANGED
@@ -16,12 +16,16 @@
16
  }
17
  .advice-card {
18
  transition: all 0.3s ease;
 
19
  }
20
  .advice-card:hover {
21
  transform: translateY(-2px);
22
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
23
  }
24
- </style>
 
 
 
25
  </head>
26
  <body class="bg-gray-900 text-white min-h-screen">
27
  <!-- Navigation -->
@@ -252,9 +256,39 @@
252
  </div>
253
  </div>
254
  </div>
255
-
256
  <script>
257
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  </script>
259
  </body>
260
  </html>
 
16
  }
17
  .advice-card {
18
  transition: all 0.3s ease;
19
+ cursor: pointer;
20
  }
21
  .advice-card:hover {
22
  transform: translateY(-2px);
23
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
24
  }
25
+ .advice-card button {
26
+ pointer-events: auto;
27
+ }
28
+ </style>
29
  </head>
30
  <body class="bg-gray-900 text-white min-h-screen">
31
  <!-- Navigation -->
 
256
  </div>
257
  </div>
258
  </div>
 
259
  <script>
260
+ document.addEventListener('DOMContentLoaded', function() {
261
+ feather.replace();
262
+
263
+ // Fix advice card interactions
264
+ document.querySelectorAll('.advice-card button').forEach(button => {
265
+ button.addEventListener('click', function(e) {
266
+ e.stopPropagation();
267
+ alert('Fonctionnalité en cours de développement');
268
+ });
269
+ });
270
+
271
+ // Fix AI chat input
272
+ const chatInput = document.querySelector('input[type="text"]');
273
+ const chatButton = document.querySelector('button');
274
+
275
+ if (chatInput && chatButton) {
276
+ chatButton.addEventListener('click', function() {
277
+ if (chatInput.value.trim() === '') {
278
+ alert('Veuillez entrer une question');
279
+ return;
280
+ }
281
+ alert('Question envoyée à l\'IA : ' + chatInput.value);
282
+ chatInput.value = '';
283
+ });
284
+
285
+ chatInput.addEventListener('keypress', function(e) {
286
+ if (e.key === 'Enter') {
287
+ chatButton.click();
288
+ }
289
+ });
290
+ }
291
+ });
292
  </script>
293
  </body>
294
  </html>
alerts.html CHANGED
@@ -235,9 +235,53 @@
235
  </div>
236
  </div>
237
  </div>
238
-
239
  <script>
240
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
241
  </script>
242
  </body>
243
  </html>
 
235
  </div>
236
  </div>
237
  </div>
 
238
  <script>
239
+ document.addEventListener('DOMContentLoaded', function() {
240
+ feather.replace();
241
+
242
+ // Fix alert dismiss buttons
243
+ document.querySelectorAll('.alert-critical button, .alert-warning button, .alert-info button').forEach(button => {
244
+ button.addEventListener('click', function() {
245
+ const alertCard = this.closest('.alert-critical, .alert-warning, .alert-info');
246
+ if (alertCard) {
247
+ alertCard.style.opacity = '0';
248
+ setTimeout(() => {
249
+ alertCard.style.display = 'none';
250
+ }, 300);
251
+ }
252
+ });
253
+ });
254
+
255
+ // Fix form submission
256
+ const alertForm = document.querySelector('form');
257
+ if (alertForm) {
258
+ alertForm.addEventListener('submit', function(e) {
259
+ e.preventDefault();
260
+ alert('Alerte créée avec succès !');
261
+ this.reset();
262
+ });
263
+ }
264
+
265
+ // Fix frequency buttons
266
+ document.querySelectorAll('.grid.grid-cols-2 button').forEach(button => {
267
+ button.addEventListener('click', function() {
268
+ document.querySelectorAll('.grid.grid-cols-2 button').forEach(btn => {
269
+ btn.classList.remove('bg-blue-500');
270
+ btn.classList.add('bg-gray-800', 'hover:bg-gray-700');
271
+ });
272
+ this.classList.remove('bg-gray-800', 'hover:bg-gray-700');
273
+ this.classList.add('bg-blue-500');
274
+ });
275
+ });
276
+
277
+ // Fix settings save button
278
+ const saveButton = document.querySelector('.bg-green-500');
279
+ if (saveButton) {
280
+ saveButton.addEventListener('click', function() {
281
+ alert('Paramètres sauvegardés avec succès !');
282
+ });
283
+ }
284
+ });
285
  </script>
286
  </body>
287
  </html>
index.html CHANGED
@@ -18,19 +18,20 @@
18
  backdrop-filter: blur(10px);
19
  border: 1px solid rgba(255, 255, 255, 0.2);
20
  }
 
 
 
21
  .portfolio-card:hover {
22
  transform: translateY(-5px);
23
- transition: all 0.3s ease;
24
  }
25
- .health-score-excellent { background: linear-gradient(135deg, #4CAF50, #81C784); }
26
  .health-score-good { background: linear-gradient(135deg, #FF9800, #FFB74D); }
27
  .health-score-poor { background: linear-gradient(135deg, #F44336, #E57373); }
28
  </style>
29
  </head>
30
  <body class="bg-gray-900 text-white min-h-screen">
31
- <div id="vanta-bg"></div>
32
-
33
- <!-- Navigation -->
34
  <nav class="glass-effect fixed w-full z-50">
35
  <div class="max-w-7xl mx-auto px-4">
36
  <div class="flex justify-between items-center h-16">
@@ -54,10 +55,9 @@
54
  </div>
55
  </div>
56
  </nav>
57
-
58
  <!-- Hero Section -->
59
- <section id="dashboard" class="pt-20 pb-16 px-4">
60
- <div class="max-w-7xl mx-auto">
61
  <div class="text-center mb-12">
62
  <h1 class="text-5xl font-bold mb-4">Votre Portefeuille Crypto, Optimisé 🚀</h1>
63
  <p class="text-xl text-gray-300">Surveillance intelligente, conseils personnalisés, tranquillité d'esprit</p>
@@ -119,27 +119,29 @@
119
  </button>
120
  </div>
121
  </div>
122
-
123
  <!-- Charts Grid -->
124
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
125
  <!-- Portfolio Distribution -->
126
  <div class="glass-effect rounded-2xl p-6">
127
  <h3 class="text-xl font-bold mb-4">Répartition du Portefeuille</h3>
128
- <canvas id="distributionChart" height="300"></canvas>
 
 
129
  </div>
130
 
131
  <!-- Performance Chart -->
132
  <div class="glass-effect rounded-2xl p-6">
133
  <h3 class="text-xl font-bold mb-4">Performance (30 jours)</h3>
134
- <canvas id="performanceChart" height="300"></canvas>
 
 
135
  </div>
136
  </div>
137
- </div>
138
  </section>
139
-
140
  <!-- AI Advice Section -->
141
- <section id="ai-advice" class="py-16 px-4 bg-gray-800">
142
- <div class="max-w-7xl mx-auto">
143
  <h2 class="text-3xl font-bold text-center mb-12">Conseils de l'Assistant IA 🤖</h2>
144
 
145
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -218,87 +220,156 @@
218
  <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-500 hover:bg-blue-600 p-3 rounded-full shadow-lg transition opacity-0">
219
  <i data-feather="arrow-up"></i>
220
  </button>
221
-
222
  <script>
223
- // Vanta.js Background
224
- VANTA.NET({
225
- el: "#vanta-bg",
226
- mouseControls: true,
227
- touchControls: true,
228
- gyroControls: false,
229
- minHeight: 200.00,
230
- minWidth: 200.00,
231
- scale: 1.00,
232
- scaleMobile: 1.00,
233
- color: 0x3b82f6,
234
- backgroundColor: 0x111827
235
- });
236
 
237
- // Charts
238
- const distributionChart = new Chart(document.getElementById('distributionChart'), {
239
- type: 'doughnut',
240
- data: {
241
- labels: ['Bitcoin', 'Ethereum', 'Solana', 'BNB Chain', 'Stablecoins', 'Autres'],
242
- datasets: [{
243
- data: [25, 30, 15, 10, 12, 8],
244
- backgroundColor: [
245
- '#F7931A', '#627EEA', '#00FFA3', '#F0B90B', '#2775CA', '#7C3AED'
246
- ]
247
- }]
248
- },
249
- options: {
250
- responsive: true,
251
- maintainAspectRatio: false,
252
- plugins: {
253
- legend: {
254
- position: 'bottom'
255
- }
256
  }
 
 
 
257
  }
258
- });
259
 
260
- const performanceChart = new Chart(document.getElementById('performanceChart'), {
261
- type: 'line',
262
- data: {
263
- labels: ['J-30', 'J-25', 'J-20', 'J-15', 'J-10', 'J-5', 'Aujourd\'hui'],
264
- datasets: [{
265
- label: 'Valeur du Portefeuille (€)',
266
- data: [22000, 23500, 21000, 24000, 23000, 24200, 24850],
267
- borderColor: '#10B981',
268
- backgroundColor: 'rgba(16, 185, 129, 0.1)',
269
- tension: 0.4,
270
- fill: true
271
- }]
272
- },
273
- options: {
274
- responsive: true,
275
- maintainAspectRatio: false,
276
- scales: {
277
- y: {
278
- beginAtZero: false
279
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
280
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  }
282
- });
283
 
284
- // Back to Top Button
285
- const backToTop = document.getElementById('backToTop');
286
- window.addEventListener('scroll', () => {
287
- if (window.pageYOffset > 300) {
288
- backToTop.classList.remove('opacity-0');
289
- backToTop.classList.add('opacity-100');
290
- } else {
291
- backToTop.classList.remove('opacity-100');
292
- backToTop.classList.add('opacity-0');
 
 
 
 
 
 
 
293
  }
294
- });
295
 
296
- backToTop.addEventListener('click', () => {
297
- window.scrollTo({ top: 0, behavior: 'smooth' });
 
 
 
 
 
 
 
 
 
 
 
298
  });
299
-
300
- // Initialize Feather Icons
301
- feather.replace();
302
  </script>
303
  </body>
304
  </html>
 
18
  backdrop-filter: blur(10px);
19
  border: 1px solid rgba(255, 255, 255, 0.2);
20
  }
21
+ .portfolio-card {
22
+ transition: all 0.3s ease;
23
+ }
24
  .portfolio-card:hover {
25
  transform: translateY(-5px);
 
26
  }
27
+ .health-score-excellent { background: linear-gradient(135deg, #4CAF50, #81C784); }
28
  .health-score-good { background: linear-gradient(135deg, #FF9800, #FFB74D); }
29
  .health-score-poor { background: linear-gradient(135deg, #F44336, #E57373); }
30
  </style>
31
  </head>
32
  <body class="bg-gray-900 text-white min-h-screen">
33
+ <div id="vanta-bg" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div>
34
+ <!-- Navigation -->
 
35
  <nav class="glass-effect fixed w-full z-50">
36
  <div class="max-w-7xl mx-auto px-4">
37
  <div class="flex justify-between items-center h-16">
 
55
  </div>
56
  </div>
57
  </nav>
 
58
  <!-- Hero Section -->
59
+ <section id="dashboard" class="pt-20 pb-16 px-4 relative z-10">
60
+ <div class="max-w-7xl mx-auto">
61
  <div class="text-center mb-12">
62
  <h1 class="text-5xl font-bold mb-4">Votre Portefeuille Crypto, Optimisé 🚀</h1>
63
  <p class="text-xl text-gray-300">Surveillance intelligente, conseils personnalisés, tranquillité d'esprit</p>
 
119
  </button>
120
  </div>
121
  </div>
 
122
  <!-- Charts Grid -->
123
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
124
  <!-- Portfolio Distribution -->
125
  <div class="glass-effect rounded-2xl p-6">
126
  <h3 class="text-xl font-bold mb-4">Répartition du Portefeuille</h3>
127
+ <div style="height: 300px; position: relative;">
128
+ <canvas id="distributionChart"></canvas>
129
+ </div>
130
  </div>
131
 
132
  <!-- Performance Chart -->
133
  <div class="glass-effect rounded-2xl p-6">
134
  <h3 class="text-xl font-bold mb-4">Performance (30 jours)</h3>
135
+ <div style="height: 300px; position: relative;">
136
+ <canvas id="performanceChart"></canvas>
137
+ </div>
138
  </div>
139
  </div>
140
+ </div>
141
  </section>
 
142
  <!-- AI Advice Section -->
143
+ <section id="ai-advice" class="py-16 px-4 bg-gray-800 relative z-10">
144
+ <div class="max-w-7xl mx-auto">
145
  <h2 class="text-3xl font-bold text-center mb-12">Conseils de l'Assistant IA 🤖</h2>
146
 
147
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 
220
  <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-500 hover:bg-blue-600 p-3 rounded-full shadow-lg transition opacity-0">
221
  <i data-feather="arrow-up"></i>
222
  </button>
 
223
  <script>
224
+ // Initialize Feather Icons first
225
+ feather.replace();
 
 
 
 
 
 
 
 
 
 
 
226
 
227
+ // Wait for DOM to be fully loaded before initializing charts and Vanta
228
+ document.addEventListener('DOMContentLoaded', function() {
229
+ // Vanta.js Background with error handling
230
+ try {
231
+ if (typeof VANTA !== 'undefined') {
232
+ VANTA.NET({
233
+ el: "#vanta-bg",
234
+ mouseControls: true,
235
+ touchControls: true,
236
+ gyroControls: false,
237
+ minHeight: 200.00,
238
+ minWidth: 200.00,
239
+ scale: 1.00,
240
+ scaleMobile: 1.00,
241
+ color: 0x3b82f6,
242
+ backgroundColor: 0x111827
243
+ });
 
 
244
  }
245
+ } catch (error) {
246
+ console.warn('Vanta.js not available, using fallback background');
247
+ document.getElementById('vanta-bg').style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
248
  }
 
249
 
250
+ // Charts with error handling and proper canvas context checking
251
+ try {
252
+ const distributionCtx = document.getElementById('distributionChart');
253
+ if (distributionCtx && distributionCtx.getContext) {
254
+ const distributionChart = new Chart(distributionCtx, {
255
+ type: 'doughnut',
256
+ data: {
257
+ labels: ['Bitcoin', 'Ethereum', 'Solana', 'BNB Chain', 'Stablecoins', 'Autres'],
258
+ datasets: [{
259
+ data: [25, 30, 15, 10, 12, 8],
260
+ backgroundColor: [
261
+ '#F7931A', '#627EEA', '#00FFA3', '#F0B90B', '#2775CA', '#7C3AED'
262
+ ],
263
+ borderWidth: 2,
264
+ borderColor: '#1f2937'
265
+ }]
266
+ },
267
+ options: {
268
+ responsive: true,
269
+ maintainAspectRatio: false,
270
+ plugins: {
271
+ legend: {
272
+ position: 'bottom',
273
+ labels: {
274
+ color: '#ffffff',
275
+ font: {
276
+ size: 12
277
+ }
278
+ }
279
+ }
280
+ }
281
+ }
282
+ });
283
  }
284
+
285
+ const performanceCtx = document.getElementById('performanceChart');
286
+ if (performanceCtx && performanceCtx.getContext) {
287
+ const performanceChart = new Chart(performanceCtx, {
288
+ type: 'line',
289
+ data: {
290
+ labels: ['J-30', 'J-25', 'J-20', 'J-15', 'J-10', 'J-5', 'Aujourd\'hui'],
291
+ datasets: [{
292
+ label: 'Valeur du Portefeuille (€)',
293
+ data: [22000, 23500, 21000, 24000, 23000, 24200, 24850],
294
+ borderColor: '#10B981',
295
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
296
+ borderWidth: 3,
297
+ tension: 0.4,
298
+ fill: true,
299
+ pointBackgroundColor: '#10B981',
300
+ pointBorderColor: '#ffffff',
301
+ pointBorderWidth: 2,
302
+ pointRadius: 5
303
+ }]
304
+ },
305
+ options: {
306
+ responsive: true,
307
+ maintainAspectRatio: false,
308
+ scales: {
309
+ y: {
310
+ beginAtZero: false,
311
+ grid: {
312
+ color: 'rgba(255, 255, 255, 0.1)'
313
+ },
314
+ ticks: {
315
+ color: '#ffffff'
316
+ }
317
+ },
318
+ x: {
319
+ grid: {
320
+ color: 'rgba(255, 255, 255, 0.1)'
321
+ },
322
+ ticks: {
323
+ color: '#ffffff'
324
+ }
325
+ }
326
+ },
327
+ plugins: {
328
+ legend: {
329
+ labels: {
330
+ color: '#ffffff'
331
+ }
332
+ }
333
+ }
334
+ }
335
+ });
336
+ }
337
+ } catch (error) {
338
+ console.error('Chart initialization error:', error);
339
  }
 
340
 
341
+ // Back to Top Button with proper event listener
342
+ const backToTop = document.getElementById('backToTop');
343
+ if (backToTop) {
344
+ window.addEventListener('scroll', () => {
345
+ if (window.pageYOffset > 300) {
346
+ backToTop.classList.remove('opacity-0');
347
+ backToTop.classList.add('opacity-100');
348
+ } else {
349
+ backToTop.classList.remove('opacity-100');
350
+ backToTop.classList.add('opacity-0');
351
+ }
352
+ });
353
+
354
+ backToTop.addEventListener('click', () => {
355
+ window.scrollTo({ top: 0, behavior: 'smooth' });
356
+ });
357
  }
 
358
 
359
+ // Fix navigation links for smooth scrolling
360
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
361
+ anchor.addEventListener('click', function (e) {
362
+ e.preventDefault();
363
+ const target = document.querySelector(this.getAttribute('href'));
364
+ if (target) {
365
+ target.scrollIntoView({
366
+ behavior: 'smooth',
367
+ block: 'start'
368
+ });
369
+ }
370
+ });
371
+ });
372
  });
 
 
 
373
  </script>
374
  </body>
375
  </html>
settings.html CHANGED
@@ -259,9 +259,66 @@
259
  </div>
260
  </div>
261
  </div>
262
-
263
  <script>
264
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
265
  </script>
266
  </body>
267
  </html>
 
259
  </div>
260
  </div>
261
  </div>
 
262
  <script>
263
+ document.addEventListener('DOMContentLoaded', function() {
264
+ feather.replace();
265
+
266
+ // Fix toggle switches
267
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
268
+ checkbox.addEventListener('change', function() {
269
+ const label = this.closest('label');
270
+ if (label) {
271
+ if (this.checked) {
272
+ label.classList.add('text-blue-500');
273
+ } else {
274
+ label.classList.remove('text-blue-500');
275
+ }
276
+ }
277
+ });
278
+ });
279
+
280
+ // Fix theme buttons
281
+ document.querySelectorAll('.grid.grid-cols-3 button').forEach(button => {
282
+ button.addEventListener('click', function() {
283
+ document.querySelectorAll('.grid.grid-cols-3 button').forEach(btn => {
284
+ btn.classList.remove('border-2', 'border-blue-500');
285
+ });
286
+ this.classList.add('border-2', 'border-blue-500');
287
+ alert('Thème changé avec succès !');
288
+ });
289
+ });
290
+
291
+ // Fix form submissions
292
+ document.querySelectorAll('button[type="submit"]').forEach(button => {
293
+ button.addEventListener('click', function(e) {
294
+ e.preventDefault();
295
+ alert('Modifications sauvegardées avec succès !');
296
+ });
297
+ });
298
+
299
+ // Fix danger zone buttons
300
+ document.querySelectorAll('.bg-red-500, .bg-red-700').forEach(button => {
301
+ button.addEventListener('click', function() {
302
+ const action = this.textContent.trim();
303
+ if (action === 'Supprimer le Compte') {
304
+ if (confirm('Êtes-vous sûr de vouloir supprimer votre compte ? Cette action est irréversible.')) {
305
+ alert('Compte supprimé avec succès');
306
+ }
307
+ } else {
308
+ alert(`Action "${action}" exécutée avec succès`);
309
+ }
310
+ });
311
+ });
312
+
313
+ // Fix profile form
314
+ const profileForm = document.querySelector('.setting-card form');
315
+ if (profileForm) {
316
+ profileForm.addEventListener('submit', function(e) {
317
+ e.preventDefault();
318
+ alert('Profil mis à jour avec succès !');
319
+ });
320
+ }
321
+ });
322
  </script>
323
  </body>
324
  </html>