Hugging Face's logo

Spaces:
Cruzito99
/
predictormx
Running

App Files Community
Cruzito99 commited on
Commit
d311830
路
verified 路
1 Parent(s): dc12daa

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +151 -69
index.html CHANGED
@@ -11,6 +11,9 @@
11
  .gradient-bg {
12
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
13
  }
 
 
 
14
  .team-card {
15
  transition: all 0.3s ease;
16
  }
@@ -69,32 +72,72 @@
69
  opacity: 0.6;
70
  }
71
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  </style>
73
  </head>
74
  <body class="min-h-screen bg-gray-100 text-gray-900">
75
  <!-- Header -->
76
- <header class="gradient-bg text-white shadow-lg">
77
  <div class="container mx-auto px-4 py-6">
78
  <div class="flex justify-between items-center">
79
  <div class="flex items-center space-x-2">
80
  <i class="fas fa-futbol text-3xl text-yellow-400"></i>
81
  <h1 class="text-2xl font-bold">Predictor<span class="text-yellow-400">MX</span></h1>
82
  </div>
83
- <nav class="hidden md:flex space-x-6">
84
- <a href="#" class="hover:text-yellow-400 transition">Inicio</a>
85
- <a href="#predictor" class="hover:text-yellow-400 transition">Predictor</a>
86
- <a href="#historial" class="hover:text-yellow-400 transition">Historial</a>
87
- <a href="#algoritmo" class="hover:text-yellow-400 transition">Algoritmo</a>
88
- </nav>
89
- <button class="md:hidden text-2xl">
90
- <i class="fas fa-bars"></i>
91
- </button>
 
 
 
 
 
92
  </div>
93
  </div>
94
  </header>
95
 
96
  <!-- Hero Section -->
97
- <section class="gradient-bg text-white py-16">
98
  <div class="container mx-auto px-4 text-center">
99
  <h2 class="text-4xl md:text-5xl font-bold mb-4">Predicciones inteligentes para la <span class="text-yellow-400">Liga MX</span></h2>
100
  <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Utilizando inteligencia artificial para analizar estad铆sticas y predecir resultados con precisi贸n</p>
@@ -107,17 +150,17 @@
107
  <!-- Predictor Section -->
108
  <section id="predictor" class="mb-20">
109
  <div class="text-center mb-12">
110
- <h2 class="text-3xl font-bold mb-2">Predictor de Partidos</h2>
111
  <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
112
  </div>
113
 
114
- <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto">
115
  <div class="grid md:grid-cols-2 gap-8 mb-8">
116
  <!-- Local Team Select -->
117
  <div>
118
- <label for="local-team" class="block text-lg font-medium mb-2">Equipo Local</label>
119
  <div class="select-wrapper">
120
- <select id="local-team" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 appearance-none">
121
  <option value="" disabled selected>Selecciona un equipo</option>
122
  <option value="america">Am茅rica</option>
123
  <option value="chivas">Chivas</option>
@@ -143,9 +186,9 @@
143
 
144
  <!-- Away Team Select -->
145
  <div>
146
- <label for="away-team" class="block text-lg font-medium mb-2">Equipo Visitante</label>
147
  <div class="select-wrapper">
148
- <select id="away-team" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 appearance-none">
149
  <option value="" disabled selected>Selecciona un equipo</option>
150
  <option value="america">Am茅rica</option>
151
  <option value="chivas">Chivas</option>
@@ -179,30 +222,30 @@
179
  <!-- Prediction Result -->
180
  <div id="prediction-result" class="mt-12 hidden">
181
  <div class="text-center mb-8">
182
- <h3 class="text-2xl font-bold mb-2">Predicci贸n del Partido</h3>
183
  <div class="w-16 h-1 bg-blue-600 mx-auto"></div>
184
  </div>
185
 
186
  <div class="grid md:grid-cols-3 gap-6 items-center mb-8">
187
  <!-- Local Team -->
188
- <div class="team-card bg-white p-6 rounded-xl shadow-md text-center">
189
  <div id="local-logo" class="w-20 h-20 mx-auto mb-4"></div>
190
- <h4 id="local-name" class="text-xl font-bold mb-2">Am茅rica</h4>
191
  <div class="text-4xl font-bold text-blue-600" id="local-score">0</div>
192
  </div>
193
 
194
  <!-- VS -->
195
  <div class="text-center">
196
- <div class="text-3xl font-bold text-gray-700">VS</div>
197
  <div class="mt-4">
198
- <span id="prediction-confidence" class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">85% de confianza</span>
199
  </div>
200
  </div>
201
 
202
  <!-- Away Team -->
203
- <div class="team-card bg-white p-6 rounded-xl shadow-md text-center">
204
  <div id="away-logo" class="w-20 h-20 mx-auto mb-4"></div>
205
- <h4 id="away-name" class="text-xl font-bold mb-2">Chivas</h4>
206
  <div class="text-4xl font-bold text-blue-600" id="away-score">0</div>
207
  </div>
208
  </div>
@@ -218,14 +261,14 @@
218
  <!-- History Section -->
219
  <section id="historial" class="mb-20">
220
  <div class="text-center mb-12">
221
- <h2 class="text-3xl font-bold mb-2">Historial de Enfrentamientos</h2>
222
  <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
223
  </div>
224
 
225
- <div id="history-content" class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto">
226
  <div class="text-center py-12">
227
  <i class="fas fa-exchange-alt text-4xl text-gray-300 mb-4"></i>
228
- <p class="text-gray-500">Selecciona dos equipos para ver su historial de enfrentamientos</p>
229
  </div>
230
  </div>
231
  </section>
@@ -233,60 +276,60 @@
233
  <!-- Algorithm Section -->
234
  <section id="algoritmo" class="mb-20">
235
  <div class="text-center mb-12">
236
- <h2 class="text-3xl font-bold mb-2">Nuestro Algoritmo de Predicci贸n</h2>
237
  <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
238
  </div>
239
 
240
- <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto">
241
  <div class="grid md:grid-cols-2 gap-8 items-center mb-8">
242
  <div>
243
- <h3 class="text-2xl font-bold mb-4">C贸mo funciona nuestra IA</h3>
244
- <p class="mb-4">Nuestro sistema utiliza aprendizaje autom谩tico para analizar m煤ltiples factores que influyen en el resultado de un partido:</p>
245
  <ul class="space-y-2 mb-6">
246
  <li class="flex items-start">
247
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
248
- <span>脷ltimos 10 partidos de cada equipo</span>
249
  </li>
250
  <li class="flex items-start">
251
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
252
- <span>Historial de enfrentamientos directos</span>
253
  </li>
254
  <li class="flex items-start">
255
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
256
- <span>Rendimiento como local y visitante</span>
257
  </li>
258
  <li class="flex items-start">
259
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
260
- <span>Estad铆sticas de goles anotados y recibidos</span>
261
  </li>
262
  <li class="flex items-start">
263
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
264
- <span>Factores contextuales (lesiones, suspensi贸n, etc.)</span>
265
  </li>
266
  </ul>
267
- <p>El algoritmo procesa estos datos y genera una predicci贸n con un 铆ndice de confianza basado en la consistencia de los patrones encontrados.</p>
268
  </div>
269
  <div>
270
- <div class="bg-gray-50 p-6 rounded-lg">
271
  <div class="flex items-center mb-4">
272
  <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
273
- <span class="font-medium">Entrada de datos</span>
274
  </div>
275
  <div class="flex items-center mb-4 ml-4">
276
  <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
277
- <span class="font-medium">Procesamiento estad铆stico</span>
278
  </div>
279
  <div class="flex items-center mb-4 ml-8">
280
  <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
281
- <span class="font-medium">An谩lisis de patrones</span>
282
  </div>
283
  <div class="flex items-center mb-4 ml-12">
284
  <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
285
- <span class="font-medium">Modelo predictivo</span>
286
  </div>
287
  <div class="flex items-center ml-16">
288
  <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
289
- <span class="font-medium">Resultado final</span>
290
  </div>
291
  <div class="mt-8">
292
  <canvas id="algorithm-chart" height="250"></canvas>
@@ -295,26 +338,26 @@
295
  </div>
296
  </div>
297
 
298
- <div class="mt-8 bg-blue-50 p-6 rounded-lg">
299
- <h3 class="text-xl font-bold mb-4">Prueba el algoritmo</h3>
300
- <p class="mb-4">Ingresa algunos datos para ver c贸mo el algoritmo ajusta sus predicciones:</p>
301
 
302
  <div class="grid md:grid-cols-2 gap-6 mb-6">
303
  <div>
304
- <label class="block text-sm font-medium mb-1">脷ltimos 5 partidos del local (G-E-P)</label>
305
- <input type="text" id="local-form" class="w-full p-2 border border-gray-300 rounded" placeholder="Ej: G-G-E-P-G">
306
  </div>
307
  <div>
308
- <label class="block text-sm font-medium mb-1">脷ltimos 5 partidos del visitante (G-E-P)</label>
309
- <input type="text" id="away-form" class="w-full p-2 border border-gray-300 rounded" placeholder="Ej: E-P-G-G-E">
310
  </div>
311
  <div>
312
- <label class="block text-sm font-medium mb-1">Promedio goles local (煤ltimos 5)</label>
313
- <input type="number" id="local-goals" class="w-full p-2 border border-gray-300 rounded" min="0" step="0.1" placeholder="1.8">
314
  </div>
315
  <div>
316
- <label class="block text-sm font-medium mb-1">Promedio goles visitante (煤ltimos 5)</label>
317
- <input type="number" id="away-goals" class="w-full p-2 border border-gray-300 rounded" min="0" step="0.1" placeholder="1.2">
318
  </div>
319
  </div>
320
 
@@ -325,15 +368,15 @@
325
  <div id="simulation-result" class="mt-4 hidden">
326
  <div class="flex items-center">
327
  <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
328
- <span class="font-medium">Resultado simulado:</span>
329
- <span id="simulated-score" class="ml-2 font-bold"></span>
330
  </div>
331
  <div class="mt-2">
332
- <span class="text-sm">Confianza del algoritmo: </span>
333
- <span id="simulated-confidence" class="text-sm font-bold"></span>
334
  </div>
335
  <div class="mt-3">
336
- <div class="w-full bg-gray-200 rounded-full h-2.5">
337
  <div id="confidence-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
338
  </div>
339
  </div>
@@ -344,7 +387,7 @@
344
  </main>
345
 
346
  <!-- Footer -->
347
- <footer class="gradient-bg text-white py-8">
348
  <div class="container mx-auto px-4">
349
  <div class="flex flex-col md:flex-row justify-between items-center">
350
  <div class="mb-4 md:mb-0">
@@ -418,7 +461,7 @@
418
  { date: '2023-04-15', result: '2-1', competition: 'Liga MX' },
419
  { date: '2022-11-20', result: '1-1', competition: 'Liga MX' },
420
  { date: '2022-05-08', result: '3-2', competition: 'Liga MX' },
421
- { date: '2021-12-12', result: '0-0', competition: 'Liga MX' },
422
  { date: '2021-04-18', result: '1-2', competition: 'Liga MX' }
423
  ],
424
  'chivas-america': [
@@ -569,7 +612,7 @@
569
  historyContent.innerHTML = `
570
  <div class="text-center py-12">
571
  <i class="fas fa-exclamation-circle text-4xl text-gray-300 mb-4"></i>
572
- <p class="text-gray-500">No hay registros de enfrentamientos entre estos equipos</p>
573
  </div>
574
  `;
575
  return;
@@ -579,7 +622,7 @@
579
  matches.sort((a, b) => new Date(b.date) - new Date(a.date));
580
 
581
  let html = `
582
- <h3 class="text-xl font-bold mb-6">脷ltimos enfrentamientos entre <span class="text-blue-600">${teamNames[localTeam]}</span> y <span class="text-blue-600">${teamNames[awayTeam]}</span></h3>
583
  <div class="space-y-4">
584
  `;
585
 
@@ -590,20 +633,20 @@
590
 
591
  html += `
592
  <div class="history-item pl-6">
593
- <div class="bg-white p-4 rounded-lg shadow-sm">
594
  <div class="flex justify-between items-center mb-2">
595
- <span class="text-sm text-gray-500">${new Date(match.date).toLocaleDateString('es-MX', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
596
- <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">${match.competition}</span>
597
  </div>
598
  <div class="flex items-center justify-between">
599
  <div class="flex-1 text-right pr-4">
600
  <span class="font-medium ${isLocalWin ? 'text-green-600' : ''}">${key1.includes(`${localTeam}-${awayTeam}`) ? homeScore : awayScore}</span>
601
- <span class="text-xs text-gray-500 block">${key1.includes(`${localTeam}-${awayTeam}`) ? teamNames[localTeam] : teamNames[awayTeam]}</span>
602
  </div>
603
- <div class="text-gray-400">vs</div>
604
  <div class="flex-1 text-left pl-4">
605
  <span class="font-medium ${!isLocalWin && homeScore !== awayScore ? 'text-green-600' : ''}">${key1.includes(`${localTeam}-${awayTeam}`) ? awayScore : homeScore}</span>
606
- <span class="text-xs text-gray-500 block">${key1.includes(`${localTeam}-${awayTeam}`) ? teamNames[awayTeam] : teamNames[localTeam]}</span>
607
  </div>
608
  </div>
609
  </div>
@@ -730,9 +773,48 @@
730
  return points;
731
  }
732
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
733
  // Event Listeners
734
  document.addEventListener('DOMContentLoaded', function() {
735
  initCharts();
 
 
 
 
736
 
737
  // Predict button click
738
  document.getElementById('predict-btn').addEventListener('click', function() {
 
11
  .gradient-bg {
12
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
13
  }
14
+ .gradient-bg-dark {
15
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
16
+ }
17
  .team-card {
18
  transition: all 0.3s ease;
19
  }
 
72
  opacity: 0.6;
73
  }
74
  }
75
+ .dark-mode {
76
+ background-color: #0f172a;
77
+ color: #f8fafc;
78
+ }
79
+ .dark-mode .bg-white {
80
+ background-color: #1e293b !important;
81
+ color: #f8fafc;
82
+ }
83
+ .dark-mode .text-gray-900 {
84
+ color: #f8fafc !important;
85
+ }
86
+ .dark-mode .bg-gray-100 {
87
+ background-color: #1e293b !important;
88
+ }
89
+ .dark-mode .text-gray-500 {
90
+ color: #94a3b8 !important;
91
+ }
92
+ .dark-mode .bg-blue-50 {
93
+ background-color: #1e293b !important;
94
+ border: 1px solid #334155;
95
+ }
96
+ .dark-mode .bg-gray-200 {
97
+ background-color: #334155 !important;
98
+ }
99
+ .dark-mode .border-gray-300 {
100
+ border-color: #334155 !important;
101
+ }
102
+ .dark-mode input, .dark-mode select {
103
+ background-color: #1e293b !important;
104
+ color: #f8fafc !important;
105
+ border-color: #334155 !important;
106
+ }
107
+ .dark-mode .bg-gray-50 {
108
+ background-color: #1e293b !important;
109
+ }
110
  </style>
111
  </head>
112
  <body class="min-h-screen bg-gray-100 text-gray-900">
113
  <!-- Header -->
114
+ <header class="gradient-bg text-white shadow-lg dark:gradient-bg-dark">
115
  <div class="container mx-auto px-4 py-6">
116
  <div class="flex justify-between items-center">
117
  <div class="flex items-center space-x-2">
118
  <i class="fas fa-futbol text-3xl text-yellow-400"></i>
119
  <h1 class="text-2xl font-bold">Predictor<span class="text-yellow-400">MX</span></h1>
120
  </div>
121
+ <div class="flex items-center space-x-4">
122
+ <nav class="hidden md:flex space-x-6">
123
+ <a href="#" class="hover:text-yellow-400 transition">Inicio</a>
124
+ <a href="#predictor" class="hover:text-yellow-400 transition">Predictor</a>
125
+ <a href="#historial" class="hover:text-yellow-400 transition">Historial</a>
126
+ <a href="#algoritmo" class="hover:text-yellow-400 transition">Algoritmo</a>
127
+ </nav>
128
+ <button id="theme-toggle" class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition">
129
+ <i id="theme-icon" class="fas fa-moon text-yellow-400"></i>
130
+ </button>
131
+ <button class="md:hidden text-2xl">
132
+ <i class="fas fa-bars"></i>
133
+ </button>
134
+ </div>
135
  </div>
136
  </div>
137
  </header>
138
 
139
  <!-- Hero Section -->
140
+ <section class="gradient-bg text-white py-16 dark:gradient-bg-dark">
141
  <div class="container mx-auto px-4 text-center">
142
  <h2 class="text-4xl md:text-5xl font-bold mb-4">Predicciones inteligentes para la <span class="text-yellow-400">Liga MX</span></h2>
143
  <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Utilizando inteligencia artificial para analizar estad铆sticas y predecir resultados con precisi贸n</p>
 
150
  <!-- Predictor Section -->
151
  <section id="predictor" class="mb-20">
152
  <div class="text-center mb-12">
153
+ <h2 class="text-3xl font-bold mb-2 dark:text-white">Predictor de Partidos</h2>
154
  <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
155
  </div>
156
 
157
+ <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto dark:bg-gray-800">
158
  <div class="grid md:grid-cols-2 gap-8 mb-8">
159
  <!-- Local Team Select -->
160
  <div>
161
+ <label for="local-team" class="block text-lg font-medium mb-2 dark:text-white">Equipo Local</label>
162
  <div class="select-wrapper">
163
+ <select id="local-team" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 appearance-none dark:bg-gray-700 dark:border-gray-600 dark:text-white">
164
  <option value="" disabled selected>Selecciona un equipo</option>
165
  <option value="america">Am茅rica</option>
166
  <option value="chivas">Chivas</option>
 
186
 
187
  <!-- Away Team Select -->
188
  <div>
189
+ <label for="away-team" class="block text-lg font-medium mb-2 dark:text-white">Equipo Visitante</label>
190
  <div class="select-wrapper">
191
+ <select id="away-team" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 appearance-none dark:bg-gray-700 dark:border-gray-600 dark:text-white">
192
  <option value="" disabled selected>Selecciona un equipo</option>
193
  <option value="america">Am茅rica</option>
194
  <option value="chivas">Chivas</option>
 
222
  <!-- Prediction Result -->
223
  <div id="prediction-result" class="mt-12 hidden">
224
  <div class="text-center mb-8">
225
+ <h3 class="text-2xl font-bold mb-2 dark:text-white">Predicci贸n del Partido</h3>
226
  <div class="w-16 h-1 bg-blue-600 mx-auto"></div>
227
  </div>
228
 
229
  <div class="grid md:grid-cols-3 gap-6 items-center mb-8">
230
  <!-- Local Team -->
231
+ <div class="team-card bg-white p-6 rounded-xl shadow-md text-center dark:bg-gray-700">
232
  <div id="local-logo" class="w-20 h-20 mx-auto mb-4"></div>
233
+ <h4 id="local-name" class="text-xl font-bold mb-2 dark:text-white">Am茅rica</h4>
234
  <div class="text-4xl font-bold text-blue-600" id="local-score">0</div>
235
  </div>
236
 
237
  <!-- VS -->
238
  <div class="text-center">
239
+ <div class="text-3xl font-bold text-gray-700 dark:text-gray-300">VS</div>
240
  <div class="mt-4">
241
+ <span id="prediction-confidence" class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold dark:bg-blue-900 dark:text-blue-200">85% de confianza</span>
242
  </div>
243
  </div>
244
 
245
  <!-- Away Team -->
246
+ <div class="team-card bg-white p-6 rounded-xl shadow-md text-center dark:bg-gray-700">
247
  <div id="away-logo" class="w-20 h-20 mx-auto mb-4"></div>
248
+ <h4 id="away-name" class="text-xl font-bold mb-2 dark:text-white">Chivas</h4>
249
  <div class="text-4xl font-bold text-blue-600" id="away-score">0</div>
250
  </div>
251
  </div>
 
261
  <!-- History Section -->
262
  <section id="historial" class="mb-20">
263
  <div class="text-center mb-12">
264
+ <h2 class="text-3xl font-bold mb-2 dark:text-white">Historial de Enfrentamientos</h2>
265
  <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
266
  </div>
267
 
268
+ <div id="history-content" class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto dark:bg-gray-800">
269
  <div class="text-center py-12">
270
  <i class="fas fa-exchange-alt text-4xl text-gray-300 mb-4"></i>
271
+ <p class="text-gray-500 dark:text-gray-400">Selecciona dos equipos para ver su historial de enfrentamientos</p>
272
  </div>
273
  </div>
274
  </section>
 
276
  <!-- Algorithm Section -->
277
  <section id="algoritmo" class="mb-20">
278
  <div class="text-center mb-12">
279
+ <h2 class="text-3xl font-bold mb-2 dark:text-white">Nuestro Algoritmo de Predicci贸n</h2>
280
  <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
281
  </div>
282
 
283
+ <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto dark:bg-gray-800">
284
  <div class="grid md:grid-cols-2 gap-8 items-center mb-8">
285
  <div>
286
+ <h3 class="text-2xl font-bold mb-4 dark:text-white">C贸mo funciona nuestra IA</h3>
287
+ <p class="mb-4 dark:text-gray-300">Nuestro sistema utiliza aprendizaje autom谩tico para analizar m煤ltiples factores que influyen en el resultado de un partido:</p>
288
  <ul class="space-y-2 mb-6">
289
  <li class="flex items-start">
290
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
291
+ <span class="dark:text-gray-300">脷ltimos 10 partidos de cada equipo</span>
292
  </li>
293
  <li class="flex items-start">
294
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
295
+ <span class="dark:text-gray-300">Historial de enfrentamientos directos</span>
296
  </li>
297
  <li class="flex items-start">
298
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
299
+ <span class="dark:text-gray-300">Rendimiento como local y visitante</span>
300
  </li>
301
  <li class="flex items-start">
302
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
303
+ <span class="dark:text-gray-300">Estad铆sticas de goles anotados y recibidos</span>
304
  </li>
305
  <li class="flex items-start">
306
  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
307
+ <span class="dark:text-gray-300">Factores contextuales (lesiones, suspensi贸n, etc.)</span>
308
  </li>
309
  </ul>
310
+ <p class="dark:text-gray-300">El algoritmo procesa estos datos y genera una predicci贸n con un 铆ndice de confianza basado en la consistencia de los patrones encontrados.</p>
311
  </div>
312
  <div>
313
+ <div class="bg-gray-50 p-6 rounded-lg dark:bg-gray-700">
314
  <div class="flex items-center mb-4">
315
  <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
316
+ <span class="font-medium dark:text-gray-300">Entrada de datos</span>
317
  </div>
318
  <div class="flex items-center mb-4 ml-4">
319
  <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
320
+ <span class="font-medium dark:text-gray-300">Procesamiento estad铆stico</span>
321
  </div>
322
  <div class="flex items-center mb-4 ml-8">
323
  <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
324
+ <span class="font-medium dark:text-gray-300">An谩lisis de patrones</span>
325
  </div>
326
  <div class="flex items-center mb-4 ml-12">
327
  <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
328
+ <span class="font-medium dark:text-gray-300">Modelo predictivo</span>
329
  </div>
330
  <div class="flex items-center ml-16">
331
  <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
332
+ <span class="font-medium dark:text-gray-300">Resultado final</span>
333
  </div>
334
  <div class="mt-8">
335
  <canvas id="algorithm-chart" height="250"></canvas>
 
338
  </div>
339
  </div>
340
 
341
+ <div class="mt-8 bg-blue-50 p-6 rounded-lg dark:bg-gray-700">
342
+ <h3 class="text-xl font-bold mb-4 dark:text-white">Prueba el algoritmo</h3>
343
+ <p class="mb-4 dark:text-gray-300">Ingresa algunos datos para ver c贸mo el algoritmo ajusta sus predicciones:</p>
344
 
345
  <div class="grid md:grid-cols-2 gap-6 mb-6">
346
  <div>
347
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">脷ltimos 5 partidos del local (G-E-P)</label>
348
+ <input type="text" id="local-form" class="w-full p-2 border border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white" placeholder="Ej: G-G-E-P-G">
349
  </div>
350
  <div>
351
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">脷ltimos 5 partidos del visitante (G-E-P)</label>
352
+ <input type="text" id="away-form" class="w-full p-2 border border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white" placeholder="Ej: E-P-G-G-E">
353
  </div>
354
  <div>
355
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Promedio goles local (煤ltimos 5)</label>
356
+ <input type="number" id="local-goals" class="w-full p-2 border border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white" min="0" step="0.1" placeholder="1.8">
357
  </div>
358
  <div>
359
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Promedio goles visitante (煤ltimos 5)</label>
360
+ <input type="number" id="away-goals" class="w-full p-2 border border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500 dark:text-white" min="0" step="0.1" placeholder="1.2">
361
  </div>
362
  </div>
363
 
 
368
  <div id="simulation-result" class="mt-4 hidden">
369
  <div class="flex items-center">
370
  <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
371
+ <span class="font-medium dark:text-gray-300">Resultado simulado:</span>
372
+ <span id="simulated-score" class="ml-2 font-bold dark:text-white"></span>
373
  </div>
374
  <div class="mt-2">
375
+ <span class="text-sm dark:text-gray-300">Confianza del algoritmo: </span>
376
+ <span id="simulated-confidence" class="text-sm font-bold dark:text-white"></span>
377
  </div>
378
  <div class="mt-3">
379
+ <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-600">
380
  <div id="confidence-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
381
  </div>
382
  </div>
 
387
  </main>
388
 
389
  <!-- Footer -->
390
+ <footer class="gradient-bg text-white py-8 dark:gradient-bg-dark">
391
  <div class="container mx-auto px-4">
392
  <div class="flex flex-col md:flex-row justify-between items-center">
393
  <div class="mb-4 md:mb-0">
 
461
  { date: '2023-04-15', result: '2-1', competition: 'Liga MX' },
462
  { date: '2022-11-20', result: '1-1', competition: 'Liga MX' },
463
  { date: '2022-05-08', result: '3-2', competition: 'Liga MX' },
464
+ { date: '2022-12-12', result: '0-0', competition: 'Liga MX' },
465
  { date: '2021-04-18', result: '1-2', competition: 'Liga MX' }
466
  ],
467
  'chivas-america': [
 
612
  historyContent.innerHTML = `
613
  <div class="text-center py-12">
614
  <i class="fas fa-exclamation-circle text-4xl text-gray-300 mb-4"></i>
615
+ <p class="text-gray-500 dark:text-gray-400">No hay registros de enfrentamientos entre estos equipos</p>
616
  </div>
617
  `;
618
  return;
 
622
  matches.sort((a, b) => new Date(b.date) - new Date(a.date));
623
 
624
  let html = `
625
+ <h3 class="text-xl font-bold mb-6 dark:text-white">脷ltimos enfrentamientos entre <span class="text-blue-600">${teamNames[localTeam]}</span> y <span class="text-blue-600">${teamNames[awayTeam]}</span></h3>
626
  <div class="space-y-4">
627
  `;
628
 
 
633
 
634
  html += `
635
  <div class="history-item pl-6">
636
+ <div class="bg-white p-4 rounded-lg shadow-sm dark:bg-gray-700">
637
  <div class="flex justify-between items-center mb-2">
638
+ <span class="text-sm text-gray-500 dark:text-gray-400">${new Date(match.date).toLocaleDateString('es-MX', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
639
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded dark:bg-gray-600 dark:text-gray-300">${match.competition}</span>
640
  </div>
641
  <div class="flex items-center justify-between">
642
  <div class="flex-1 text-right pr-4">
643
  <span class="font-medium ${isLocalWin ? 'text-green-600' : ''}">${key1.includes(`${localTeam}-${awayTeam}`) ? homeScore : awayScore}</span>
644
+ <span class="text-xs text-gray-500 block dark:text-gray-400">${key1.includes(`${localTeam}-${awayTeam}`) ? teamNames[localTeam] : teamNames[awayTeam]}</span>
645
  </div>
646
+ <div class="text-gray-400 dark:text-gray-500">vs</div>
647
  <div class="flex-1 text-left pl-4">
648
  <span class="font-medium ${!isLocalWin && homeScore !== awayScore ? 'text-green-600' : ''}">${key1.includes(`${localTeam}-${awayTeam}`) ? awayScore : homeScore}</span>
649
+ <span class="text-xs text-gray-500 block dark:text-gray-400">${key1.includes(`${localTeam}-${awayTeam}`) ? teamNames[awayTeam] : teamNames[localTeam]}</span>
650
  </div>
651
  </div>
652
  </div>
 
773
  return points;
774
  }
775
 
776
+ // Theme toggle functionality
777
+ function toggleTheme() {
778
+ const html = document.documentElement;
779
+ const themeIcon = document.getElementById('theme-icon');
780
+
781
+ if (html.classList.contains('dark')) {
782
+ html.classList.remove('dark');
783
+ localStorage.setItem('theme', 'light');
784
+ themeIcon.classList.remove('fa-sun');
785
+ themeIcon.classList.add('fa-moon');
786
+ } else {
787
+ html.classList.add('dark');
788
+ localStorage.setItem('theme', 'dark');
789
+ themeIcon.classList.remove('fa-moon');
790
+ themeIcon.classList.add('fa-sun');
791
+ }
792
+ }
793
+
794
+ // Check for saved theme preference
795
+ function checkTheme() {
796
+ const html = document.documentElement;
797
+ const themeIcon = document.getElementById('theme-icon');
798
+
799
+ if (localStorage.getItem('theme') === 'dark' ||
800
+ (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
801
+ html.classList.add('dark');
802
+ themeIcon.classList.remove('fa-moon');
803
+ themeIcon.classList.add('fa-sun');
804
+ } else {
805
+ html.classList.remove('dark');
806
+ themeIcon.classList.remove('fa-sun');
807
+ themeIcon.classList.add('fa-moon');
808
+ }
809
+ }
810
+
811
  // Event Listeners
812
  document.addEventListener('DOMContentLoaded', function() {
813
  initCharts();
814
+ checkTheme();
815
+
816
+ // Theme toggle button
817
+ document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
818
 
819
  // Predict button click
820
  document.getElementById('predict-btn').addEventListener('click', function() {