Hugging Face's logo

Spaces:
Cruzito99
/
predictormx
Running

App Files Community
Cruzito99 commited on
Commit
dc12daa
·
verified ·
1 Parent(s): aede569

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +792 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Predictormx
3
- emoji: 🚀
4
- colorFrom: pink
5
- colorTo: pink
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: predictormx
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
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,792 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Predictor MX - Predicciones inteligentes para la Liga MX</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
13
+ }
14
+ .team-card {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .team-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .stats-card {
22
+ background: rgba(255, 255, 255, 0.05);
23
+ backdrop-filter: blur(10px);
24
+ border: 1px solid rgba(255, 255, 255, 0.1);
25
+ }
26
+ .select-wrapper {
27
+ position: relative;
28
+ }
29
+ .select-wrapper::after {
30
+ content: "▼";
31
+ font-size: 0.8rem;
32
+ top: 50%;
33
+ right: 1rem;
34
+ position: absolute;
35
+ transform: translateY(-50%);
36
+ pointer-events: none;
37
+ color: #64748b;
38
+ }
39
+ .history-item {
40
+ position: relative;
41
+ padding-left: 1.5rem;
42
+ }
43
+ .history-item::before {
44
+ content: "";
45
+ position: absolute;
46
+ left: 0;
47
+ top: 0;
48
+ bottom: 0;
49
+ width: 2px;
50
+ background: #3b82f6;
51
+ }
52
+ .history-item:first-child::before {
53
+ top: 50%;
54
+ }
55
+ .history-item:last-child::before {
56
+ bottom: 50%;
57
+ }
58
+ .pulse {
59
+ animation: pulse 2s infinite;
60
+ }
61
+ @keyframes pulse {
62
+ 0% {
63
+ opacity: 0.6;
64
+ }
65
+ 50% {
66
+ opacity: 1;
67
+ }
68
+ 100% {
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>
101
+ <a href="#predictor" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full text-lg transition inline-block">Probar Predictor</a>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Main Content -->
106
+ <main class="container mx-auto px-4 py-12">
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>
124
+ <option value="cruzazul">Cruz Azul</option>
125
+ <option value="pumas">Pumas UNAM</option>
126
+ <option value="tigres">Tigres</option>
127
+ <option value="rayados">Rayados</option>
128
+ <option value="toluca">Toluca</option>
129
+ <option value="pachuca">Pachuca</option>
130
+ <option value="leon">León</option>
131
+ <option value="tijuana">Tijuana</option>
132
+ <option value="sanluis">Atlético San Luis</option>
133
+ <option value="mazatlan">Mazatlán</option>
134
+ <option value="queretaro">Querétaro</option>
135
+ <option value="puebla">Puebla</option>
136
+ <option value="juarez">Juárez</option>
137
+ <option value="atlas">Atlas</option>
138
+ <option value="necaxa">Necaxa</option>
139
+ <option value="santos">Santos Laguna</option>
140
+ </select>
141
+ </div>
142
+ </div>
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>
152
+ <option value="cruzazul">Cruz Azul</option>
153
+ <option value="pumas">Pumas UNAM</option>
154
+ <option value="tigres">Tigres</option>
155
+ <option value="rayados">Rayados</option>
156
+ <option value="toluca">Toluca</option>
157
+ <option value="pachuca">Pachuca</option>
158
+ <option value="leon">León</option>
159
+ <option value="tijuana">Tijuana</option>
160
+ <option value="sanluis">Atlético San Luis</option>
161
+ <option value="mazatlan">Mazatlán</option>
162
+ <option value="queretaro">Querétaro</option>
163
+ <option value="puebla">Puebla</option>
164
+ <option value="juarez">Juárez</option>
165
+ <option value="atlas">Atlas</option>
166
+ <option value="necaxa">Necaxa</option>
167
+ <option value="santos">Santos Laguna</option>
168
+ </select>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="text-center">
174
+ <button id="predict-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition inline-flex items-center">
175
+ <i class="fas fa-robot mr-2"></i> Predecir Resultado
176
+ </button>
177
+ </div>
178
+
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>
209
+
210
+ <!-- Stats Chart -->
211
+ <div class="mt-8">
212
+ <canvas id="stats-chart" height="300"></canvas>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
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>
232
+
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>
293
+ </div>
294
+ </div>
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
+
321
+ <button id="simulate-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded text-sm transition">
322
+ Simular Predicción
323
+ </button>
324
+
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>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </section>
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">
351
+ <div class="flex items-center space-x-2">
352
+ <i class="fas fa-futbol text-2xl text-yellow-400"></i>
353
+ <h2 class="text-xl font-bold">Predictor<span class="text-yellow-400">MX</span></h2>
354
+ </div>
355
+ <p class="mt-2 text-sm text-blue-100">Predicciones inteligentes para la Liga MX</p>
356
+ </div>
357
+ <div class="flex space-x-6">
358
+ <a href="#" class="text-blue-100 hover:text-yellow-400 transition"><i class="fab fa-twitter text-xl"></i></a>
359
+ <a href="#" class="text-blue-100 hover:text-yellow-400 transition"><i class="fab fa-facebook text-xl"></i></a>
360
+ <a href="#" class="text-blue-100 hover:text-yellow-400 transition"><i class="fab fa-instagram text-xl"></i></a>
361
+ </div>
362
+ </div>
363
+ <div class="border-t border-blue-800 mt-6 pt-6 text-sm text-center text-blue-200">
364
+ <p>© 2023 PredictorMX. Todos los derechos reservados.</p>
365
+ <p class="mt-1">Los datos y predicciones son meramente informativos y no constituyen asesoría para apuestas.</p>
366
+ </div>
367
+ </div>
368
+ </footer>
369
+
370
+ <script>
371
+ // Team logos mapping
372
+ const teamLogos = {
373
+ america: '<i class="fas fa-eagle text-5xl text-yellow-400"></i>',
374
+ chivas: '<i class="fas fa-flag text-5xl text-red-600"></i>',
375
+ cruzazul: '<i class="fas fa-plus text-5xl text-blue-800"></i>',
376
+ pumas: '<i class="fas fa-paw text-5xl text-blue-600"></i>',
377
+ tigres: '<i class="fas fa-cat text-5xl text-yellow-600"></i>',
378
+ rayados: '<i class="fas fa-star text-5xl text-blue-400"></i>',
379
+ toluca: '<i class="fas fa-fire text-5xl text-red-700"></i>',
380
+ pachuca: '<i class="fas fa-industry text-5xl text-blue-900"></i>',
381
+ leon: '<i class="fas fa-lion text-5xl text-green-700"></i>',
382
+ tijuana: '<i class="fas fa-sun text-5xl text-red-500"></i>',
383
+ sanluis: '<i class="fas fa-shield-alt text-5xl text-yellow-700"></i>',
384
+ mazatlan: '<i class="fas fa-anchor text-5xl text-blue-500"></i>',
385
+ queretaro: '<i class="fas fa-feather text-5xl text-blue-300"></i>',
386
+ puebla: '<i class="fas fa-chess-rook text-5xl text-blue-700"></i>',
387
+ juarez: '<i class="fas fa-horse-head text-5xl text-orange-600"></i>',
388
+ atlas: '<i class="fas fa-atlas text-5xl text-red-800"></i>',
389
+ necaxa: '<i class="fas fa-bolt text-5xl text-red-600"></i>',
390
+ santos: '<i class="fas fa-cross text-5xl text-green-800"></i>'
391
+ };
392
+
393
+ // Team names mapping
394
+ const teamNames = {
395
+ america: 'América',
396
+ chivas: 'Chivas',
397
+ cruzazul: 'Cruz Azul',
398
+ pumas: 'Pumas UNAM',
399
+ tigres: 'Tigres',
400
+ rayados: 'Rayados',
401
+ toluca: 'Toluca',
402
+ pachuca: 'Pachuca',
403
+ leon: 'León',
404
+ tijuana: 'Tijuana',
405
+ sanluis: 'Atlético San Luis',
406
+ mazatlan: 'Mazatlán',
407
+ queretaro: 'Querétaro',
408
+ puebla: 'Puebla',
409
+ juarez: 'Juárez',
410
+ atlas: 'Atlas',
411
+ necaxa: 'Necaxa',
412
+ santos: 'Santos Laguna'
413
+ };
414
+
415
+ // Historical matches data (simplified for demo)
416
+ const historicalMatches = {
417
+ 'america-chivas': [
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': [
425
+ { date: '2023-09-10', result: '1-3', competition: 'Liga MX' },
426
+ { date: '2023-02-25', result: '2-2', competition: 'Liga MX' },
427
+ { date: '2022-08-14', result: '0-1', competition: 'Liga MX' },
428
+ { date: '2022-03-06', result: '1-0', competition: 'Liga MX' },
429
+ { date: '2021-10-30', result: '2-1', competition: 'Liga MX' }
430
+ ],
431
+ 'cruzazul-america': [
432
+ { date: '2023-05-20', result: '1-1', competition: 'Liga MX' },
433
+ { date: '2023-01-15', result: '0-2', competition: 'Liga MX' },
434
+ { date: '2022-07-22', result: '3-3', competition: 'Liga MX' },
435
+ { date: '2022-04-10', result: '1-0', competition: 'Liga MX' },
436
+ { date: '2021-11-05', result: '2-2', competition: 'Liga MX' }
437
+ ],
438
+ 'pumas-chivas': [
439
+ { date: '2023-08-12', result: '0-0', competition: 'Liga MX' },
440
+ { date: '2023-03-18', result: '1-2', competition: 'Liga MX' },
441
+ { date: '2022-10-22', result: '3-1', competition: 'Liga MX' },
442
+ { date: '2022-06-05', result: '2-2', competition: 'Liga MX' },
443
+ { date: '2021-12-18', result: '0-1', competition: 'Liga MX' }
444
+ ]
445
+ // More historical data would be added here in a real application
446
+ };
447
+
448
+ // Initialize charts
449
+ let statsChart, algorithmChart;
450
+
451
+ function initCharts() {
452
+ // Stats Chart
453
+ const statsCtx = document.getElementById('stats-chart').getContext('2d');
454
+ statsChart = new Chart(statsCtx, {
455
+ type: 'bar',
456
+ data: {
457
+ labels: ['Goles por partido', 'Tiros al arco', 'Posesión %', 'Efectividad', 'Victorias últimos 5'],
458
+ datasets: [
459
+ {
460
+ label: 'Local',
461
+ data: [1.8, 5.2, 58, 42, 3],
462
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
463
+ borderColor: 'rgba(59, 130, 246, 1)',
464
+ borderWidth: 1
465
+ },
466
+ {
467
+ label: 'Visitante',
468
+ data: [1.2, 4.1, 48, 38, 2],
469
+ backgroundColor: 'rgba(99, 102, 241, 0.7)',
470
+ borderColor: 'rgba(99, 102, 241, 1)',
471
+ borderWidth: 1
472
+ }
473
+ ]
474
+ },
475
+ options: {
476
+ responsive: true,
477
+ scales: {
478
+ y: {
479
+ beginAtZero: true
480
+ }
481
+ },
482
+ plugins: {
483
+ legend: {
484
+ position: 'top',
485
+ },
486
+ title: {
487
+ display: true,
488
+ text: 'Comparación de Estadísticas',
489
+ font: {
490
+ size: 16
491
+ }
492
+ }
493
+ }
494
+ }
495
+ });
496
+
497
+ // Algorithm Chart
498
+ const algorithmCtx = document.getElementById('algorithm-chart').getContext('2d');
499
+ algorithmChart = new Chart(algorithmCtx, {
500
+ type: 'doughnut',
501
+ data: {
502
+ labels: ['Forma reciente', 'Historial directo', 'Rendimiento local/visitante', 'Estadísticas ofensivas', 'Estadísticas defensivas'],
503
+ datasets: [{
504
+ data: [25, 20, 20, 20, 15],
505
+ backgroundColor: [
506
+ 'rgba(59, 130, 246, 0.7)',
507
+ 'rgba(99, 102, 241, 0.7)',
508
+ 'rgba(167, 139, 250, 0.7)',
509
+ 'rgba(16, 185, 129, 0.7)',
510
+ 'rgba(239, 68, 68, 0.7)'
511
+ ],
512
+ borderWidth: 1
513
+ }]
514
+ },
515
+ options: {
516
+ responsive: true,
517
+ plugins: {
518
+ legend: {
519
+ position: 'right',
520
+ },
521
+ title: {
522
+ display: true,
523
+ text: 'Factores de Predicción',
524
+ font: {
525
+ size: 14
526
+ }
527
+ }
528
+ }
529
+ }
530
+ });
531
+ }
532
+
533
+ // Update charts based on selected teams
534
+ function updateCharts(localTeam, awayTeam) {
535
+ // This is a simplified version - in a real app, you'd fetch actual data
536
+ const localStats = getRandomStats();
537
+ const awayStats = getRandomStats();
538
+
539
+ statsChart.data.datasets[0].data = localStats;
540
+ statsChart.data.datasets[1].data = awayStats;
541
+ statsChart.update();
542
+ }
543
+
544
+ function getRandomStats() {
545
+ return [
546
+ (Math.random() * 2 + 0.5).toFixed(1), // Goles por partido
547
+ Math.floor(Math.random() * 8 + 3), // Tiros al arco
548
+ Math.floor(Math.random() * 30 + 40), // Posesión %
549
+ Math.floor(Math.random() * 30 + 30), // Efectividad
550
+ Math.floor(Math.random() * 4 + 1) // Victorias últimos 5
551
+ ];
552
+ }
553
+
554
+ // Display historical matches
555
+ function showHistoricalMatches(localTeam, awayTeam) {
556
+ const historyContent = document.getElementById('history-content');
557
+ const key1 = `${localTeam}-${awayTeam}`;
558
+ const key2 = `${awayTeam}-${localTeam}`;
559
+
560
+ let matches = [];
561
+ if (historicalMatches[key1]) {
562
+ matches = matches.concat(historicalMatches[key1]);
563
+ }
564
+ if (historicalMatches[key2]) {
565
+ matches = matches.concat(historicalMatches[key2]);
566
+ }
567
+
568
+ if (matches.length === 0) {
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;
576
+ }
577
+
578
+ // Sort matches by date (newest first)
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
+
586
+ matches.slice(0, 10).forEach(match => {
587
+ const [homeScore, awayScore] = match.result.split('-');
588
+ const isLocalWin = (key1.includes(`${localTeam}-${awayTeam}`) && parseInt(homeScore) > parseInt(awayScore)) ||
589
+ (key2.includes(`${localTeam}-${awayTeam}`) && parseInt(awayScore) > parseInt(homeScore));
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>
610
+ </div>
611
+ `;
612
+ });
613
+
614
+ html += `</div>`;
615
+ historyContent.innerHTML = html;
616
+ }
617
+
618
+ // Generate a prediction
619
+ function generatePrediction(localTeam, awayTeam) {
620
+ // In a real app, this would call an API with the actual AI model
621
+ // For demo purposes, we'll generate random but plausible results
622
+
623
+ const localStrength = getTeamStrength(localTeam);
624
+ const awayStrength = getTeamStrength(awayTeam);
625
+
626
+ // Home advantage factor
627
+ const homeAdvantage = 0.3;
628
+
629
+ // Calculate base scores
630
+ let localScore = Math.round((localStrength + homeAdvantage) * (Math.random() * 0.5 + 0.5));
631
+ let awayScore = Math.round(awayStrength * (Math.random() * 0.5 + 0.5));
632
+
633
+ // Ensure scores are not negative
634
+ localScore = Math.max(0, localScore);
635
+ awayScore = Math.max(0, awayScore);
636
+
637
+ // Sometimes make it a draw
638
+ if (Math.random() > 0.7) {
639
+ const avg = Math.round((localScore + awayScore) / 2);
640
+ localScore = avg;
641
+ awayScore = avg;
642
+ }
643
+
644
+ // Calculate confidence (70-95%)
645
+ const confidence = Math.floor(Math.random() * 25 + 70);
646
+
647
+ return {
648
+ localScore,
649
+ awayScore,
650
+ confidence
651
+ };
652
+ }
653
+
654
+ // Simple team strength rating for demo purposes
655
+ function getTeamStrength(team) {
656
+ const strengths = {
657
+ america: 2.2,
658
+ chivas: 1.8,
659
+ cruzazul: 1.7,
660
+ pumas: 1.6,
661
+ tigres: 2.1,
662
+ rayados: 2.0,
663
+ toluca: 1.7,
664
+ pachuca: 1.8,
665
+ leon: 1.9,
666
+ tijuana: 1.5,
667
+ sanluis: 1.4,
668
+ mazatlan: 1.3,
669
+ queretaro: 1.4,
670
+ puebla: 1.5,
671
+ juarez: 1.4,
672
+ atlas: 1.6,
673
+ necaxa: 1.3,
674
+ santos: 1.7
675
+ };
676
+
677
+ return strengths[team] || 1.5;
678
+ }
679
+
680
+ // Simulate algorithm with custom inputs
681
+ function simulateAlgorithm() {
682
+ const localForm = document.getElementById('local-form').value.toUpperCase();
683
+ const awayForm = document.getElementById('away-form').value.toUpperCase();
684
+ const localGoals = parseFloat(document.getElementById('local-goals').value) || 0;
685
+ const awayGoals = parseFloat(document.getElementById('away-goals').value) || 0;
686
+
687
+ // Validate form inputs
688
+ const formRegex = /^[GEP\-]{1,5}$/;
689
+ if (!formRegex.test(localForm) || !formRegex.test(awayForm)) {
690
+ alert('Por favor ingresa una forma válida (G para ganar, E para empatar, P para perder)');
691
+ return;
692
+ }
693
+
694
+ // Calculate form points (G=3, E=1, P=0)
695
+ const localFormPoints = calculateFormPoints(localForm);
696
+ const awayFormPoints = calculateFormPoints(awayForm);
697
+
698
+ // Calculate score prediction (simplified)
699
+ const localScore = Math.round((localFormPoints / 15 * 3) + (localGoals / 2));
700
+ const awayScore = Math.round((awayFormPoints / 15 * 3) + (awayGoals / 2));
701
+
702
+ // Adjust to make scores more realistic
703
+ const adjLocalScore = Math.min(4, Math.max(0, localScore));
704
+ const adjAwayScore = Math.min(3, Math.max(0, awayScore));
705
+
706
+ // Calculate confidence based on input consistency
707
+ const confidence = Math.min(95, Math.floor(
708
+ 60 +
709
+ (localFormPoints + awayFormPoints) / 30 * 20 +
710
+ (localGoals + awayGoals) / 4 * 10
711
+ ));
712
+
713
+ // Display results
714
+ const simulationResult = document.getElementById('simulation-result');
715
+ document.getElementById('simulated-score').textContent = `${adjLocalScore} - ${adjAwayScore}`;
716
+ document.getElementById('simulated-confidence').textContent = `${confidence}%`;
717
+ document.getElementById('confidence-bar').style.width = `${confidence}%`;
718
+ simulationResult.classList.remove('hidden');
719
+ }
720
+
721
+ function calculateFormPoints(form) {
722
+ let points = 0;
723
+ for (let i = 0; i < form.length; i++) {
724
+ switch (form[i]) {
725
+ case 'G': points += 3; break;
726
+ case 'E': points += 1; break;
727
+ case 'P': points += 0; break;
728
+ }
729
+ }
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() {
739
+ const localTeam = document.getElementById('local-team').value;
740
+ const awayTeam = document.getElementById('away-team').value;
741
+
742
+ if (!localTeam || !awayTeam) {
743
+ alert('Por favor selecciona ambos equipos');
744
+ return;
745
+ }
746
+
747
+ if (localTeam === awayTeam) {
748
+ alert('No puedes seleccionar el mismo equipo como local y visitante');
749
+ return;
750
+ }
751
+
752
+ // Show loading state
753
+ const btn = this;
754
+ const originalText = btn.innerHTML;
755
+ btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analizando...';
756
+ btn.disabled = true;
757
+
758
+ // Simulate API call delay
759
+ setTimeout(() => {
760
+ // Generate prediction
761
+ const prediction = generatePrediction(localTeam, awayTeam);
762
+
763
+ // Update UI
764
+ document.getElementById('local-logo').innerHTML = teamLogos[localTeam];
765
+ document.getElementById('away-logo').innerHTML = teamLogos[awayTeam];
766
+ document.getElementById('local-name').textContent = teamNames[localTeam];
767
+ document.getElementById('away-name').textContent = teamNames[awayTeam];
768
+ document.getElementById('local-score').textContent = prediction.localScore;
769
+ document.getElementById('away-score').textContent = prediction.awayScore;
770
+ document.getElementById('prediction-confidence').textContent = `${prediction.confidence}% de confianza`;
771
+
772
+ // Show result
773
+ document.getElementById('prediction-result').classList.remove('hidden');
774
+
775
+ // Update charts
776
+ updateCharts(localTeam, awayTeam);
777
+
778
+ // Show historical matches
779
+ showHistoricalMatches(localTeam, awayTeam);
780
+
781
+ // Reset button
782
+ btn.innerHTML = originalText;
783
+ btn.disabled = false;
784
+ }, 1500);
785
+ });
786
+
787
+ // Simulate button click
788
+ document.getElementById('simulate-btn').addEventListener('click', simulateAlgorithm);
789
+ });
790
+ </script>
791
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Cruzito99/predictormx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
792
+ </html>