Hugging Face's logo

Spaces:
Cruzito99
/
predictormx
Running

App Files Community
predictormx / index.html
Cruzito99's picture
Cruzito99
Add 1 files
d311830 verified
raw
history blame contribute delete
44.7 kB
 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Predictor MX - Predicciones inteligentes para la Liga MX</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}
.gradient-bg-dark {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.team-card {
transition: all 0.3s ease;
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.stats-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.select-wrapper {
position: relative;
}
.select-wrapper::after {
content: "▼";
font-size: 0.8rem;
top: 50%;
right: 1rem;
position: absolute;
transform: translateY(-50%);
pointer-events: none;
color: #64748b;
}
.history-item {
position: relative;
padding-left: 1.5rem;
}
.history-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #3b82f6;
}
.history-item:first-child::before {
top: 50%;
}
.history-item:last-child::before {
bottom: 50%;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
opacity: 0.6;
}
50% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}
.dark-mode {
background-color: #0f172a;
color: #f8fafc;
}
.dark-mode .bg-white {
background-color: #1e293b !important;
color: #f8fafc;
}
.dark-mode .text-gray-900 {
color: #f8fafc !important;
}
.dark-mode .bg-gray-100 {
background-color: #1e293b !important;
}
.dark-mode .text-gray-500 {
color: #94a3b8 !important;
}
.dark-mode .bg-blue-50 {
background-color: #1e293b !important;
border: 1px solid #334155;
}
.dark-mode .bg-gray-200 {
background-color: #334155 !important;
}
.dark-mode .border-gray-300 {
border-color: #334155 !important;
}
.dark-mode input, .dark-mode select {
background-color: #1e293b !important;
color: #f8fafc !important;
border-color: #334155 !important;
}
.dark-mode .bg-gray-50 {
background-color: #1e293b !important;
}
</style>
</head>
<body class="min-h-screen bg-gray-100 text-gray-900">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg dark:gradient-bg-dark">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-futbol text-3xl text-yellow-400"></i>
<h1 class="text-2xl font-bold">Predictor<span class="text-yellow-400">MX</span></h1>
</div>
<div class="flex items-center space-x-4">
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-yellow-400 transition">Inicio</a>
<a href="#predictor" class="hover:text-yellow-400 transition">Predictor</a>
<a href="#historial" class="hover:text-yellow-400 transition">Historial</a>
<a href="#algoritmo" class="hover:text-yellow-400 transition">Algoritmo</a>
</nav>
<button id="theme-toggle" class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition">
<i id="theme-icon" class="fas fa-moon text-yellow-400"></i>
</button>
<button class="md:hidden text-2xl">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="gradient-bg text-white py-16 dark:gradient-bg-dark">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Predicciones inteligentes para la <span class="text-yellow-400">Liga MX</span></h2>
<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>
<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>
</div>
</section>
<!-- Main Content -->
<main class="container mx-auto px-4 py-12">
<!-- Predictor Section -->
<section id="predictor" class="mb-20">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-2 dark:text-white">Predictor de Partidos</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto dark:bg-gray-800">
<div class="grid md:grid-cols-2 gap-8 mb-8">
<!-- Local Team Select -->
<div>
<label for="local-team" class="block text-lg font-medium mb-2 dark:text-white">Equipo Local</label>
<div class="select-wrapper">
<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">
<option value="" disabled selected>Selecciona un equipo</option>
<option value="america">América</option>
<option value="chivas">Chivas</option>
<option value="cruzazul">Cruz Azul</option>
<option value="pumas">Pumas UNAM</option>
<option value="tigres">Tigres</option>
<option value="rayados">Rayados</option>
<option value="toluca">Toluca</option>
<option value="pachuca">Pachuca</option>
<option value="leon">León</option>
<option value="tijuana">Tijuana</option>
<option value="sanluis">Atlético San Luis</option>
<option value="mazatlan">Mazatlán</option>
<option value="queretaro">Querétaro</option>
<option value="puebla">Puebla</option>
<option value="juarez">Juárez</option>
<option value="atlas">Atlas</option>
<option value="necaxa">Necaxa</option>
<option value="santos">Santos Laguna</option>
</select>
</div>
</div>
<!-- Away Team Select -->
<div>
<label for="away-team" class="block text-lg font-medium mb-2 dark:text-white">Equipo Visitante</label>
<div class="select-wrapper">
<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">
<option value="" disabled selected>Selecciona un equipo</option>
<option value="america">América</option>
<option value="chivas">Chivas</option>
<option value="cruzazul">Cruz Azul</option>
<option value="pumas">Pumas UNAM</option>
<option value="tigres">Tigres</option>
<option value="rayados">Rayados</option>
<option value="toluca">Toluca</option>
<option value="pachuca">Pachuca</option>
<option value="leon">León</option>
<option value="tijuana">Tijuana</option>
<option value="sanluis">Atlético San Luis</option>
<option value="mazatlan">Mazatlán</option>
<option value="queretaro">Querétaro</option>
<option value="puebla">Puebla</option>
<option value="juarez">Juárez</option>
<option value="atlas">Atlas</option>
<option value="necaxa">Necaxa</option>
<option value="santos">Santos Laguna</option>
</select>
</div>
</div>
</div>
<div class="text-center">
<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">
<i class="fas fa-robot mr-2"></i> Predecir Resultado
</button>
</div>
<!-- Prediction Result -->
<div id="prediction-result" class="mt-12 hidden">
<div class="text-center mb-8">
<h3 class="text-2xl font-bold mb-2 dark:text-white">Predicción del Partido</h3>
<div class="w-16 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-6 items-center mb-8">
<!-- Local Team -->
<div class="team-card bg-white p-6 rounded-xl shadow-md text-center dark:bg-gray-700">
<div id="local-logo" class="w-20 h-20 mx-auto mb-4"></div>
<h4 id="local-name" class="text-xl font-bold mb-2 dark:text-white">América</h4>
<div class="text-4xl font-bold text-blue-600" id="local-score">0</div>
</div>
<!-- VS -->
<div class="text-center">
<div class="text-3xl font-bold text-gray-700 dark:text-gray-300">VS</div>
<div class="mt-4">
<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>
</div>
</div>
<!-- Away Team -->
<div class="team-card bg-white p-6 rounded-xl shadow-md text-center dark:bg-gray-700">
<div id="away-logo" class="w-20 h-20 mx-auto mb-4"></div>
<h4 id="away-name" class="text-xl font-bold mb-2 dark:text-white">Chivas</h4>
<div class="text-4xl font-bold text-blue-600" id="away-score">0</div>
</div>
</div>
<!-- Stats Chart -->
<div class="mt-8">
<canvas id="stats-chart" height="300"></canvas>
</div>
</div>
</div>
</section>
<!-- History Section -->
<section id="historial" class="mb-20">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-2 dark:text-white">Historial de Enfrentamientos</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
</div>
<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">
<div class="text-center py-12">
<i class="fas fa-exchange-alt text-4xl text-gray-300 mb-4"></i>
<p class="text-gray-500 dark:text-gray-400">Selecciona dos equipos para ver su historial de enfrentamientos</p>
</div>
</div>
</section>
<!-- Algorithm Section -->
<section id="algoritmo" class="mb-20">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-2 dark:text-white">Nuestro Algoritmo de Predicción</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto dark:bg-gray-800">
<div class="grid md:grid-cols-2 gap-8 items-center mb-8">
<div>
<h3 class="text-2xl font-bold mb-4 dark:text-white">Cómo funciona nuestra IA</h3>
<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>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="dark:text-gray-300">Últimos 10 partidos de cada equipo</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="dark:text-gray-300">Historial de enfrentamientos directos</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="dark:text-gray-300">Rendimiento como local y visitante</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="dark:text-gray-300">Estadísticas de goles anotados y recibidos</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="dark:text-gray-300">Factores contextuales (lesiones, suspensión, etc.)</span>
</li>
</ul>
<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>
</div>
<div>
<div class="bg-gray-50 p-6 rounded-lg dark:bg-gray-700">
<div class="flex items-center mb-4">
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
<span class="font-medium dark:text-gray-300">Entrada de datos</span>
</div>
<div class="flex items-center mb-4 ml-4">
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
<span class="font-medium dark:text-gray-300">Procesamiento estadístico</span>
</div>
<div class="flex items-center mb-4 ml-8">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
<span class="font-medium dark:text-gray-300">Análisis de patrones</span>
</div>
<div class="flex items-center mb-4 ml-12">
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
<span class="font-medium dark:text-gray-300">Modelo predictivo</span>
</div>
<div class="flex items-center ml-16">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<span class="font-medium dark:text-gray-300">Resultado final</span>
</div>
<div class="mt-8">
<canvas id="algorithm-chart" height="250"></canvas>
</div>
</div>
</div>
</div>
<div class="mt-8 bg-blue-50 p-6 rounded-lg dark:bg-gray-700">
<h3 class="text-xl font-bold mb-4 dark:text-white">Prueba el algoritmo</h3>
<p class="mb-4 dark:text-gray-300">Ingresa algunos datos para ver cómo el algoritmo ajusta sus predicciones:</p>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Últimos 5 partidos del local (G-E-P)</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Últimos 5 partidos del visitante (G-E-P)</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Promedio goles local (últimos 5)</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1 dark:text-gray-300">Promedio goles visitante (últimos 5)</label>
<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">
</div>
</div>
<button id="simulate-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded text-sm transition">
Simular Predicción
</button>
<div id="simulation-result" class="mt-4 hidden">
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
<span class="font-medium dark:text-gray-300">Resultado simulado:</span>
<span id="simulated-score" class="ml-2 font-bold dark:text-white"></span>
</div>
<div class="mt-2">
<span class="text-sm dark:text-gray-300">Confianza del algoritmo: </span>
<span id="simulated-confidence" class="text-sm font-bold dark:text-white"></span>
</div>
<div class="mt-3">
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-600">
<div id="confidence-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="gradient-bg text-white py-8 dark:gradient-bg-dark">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="flex items-center space-x-2">
<i class="fas fa-futbol text-2xl text-yellow-400"></i>
<h2 class="text-xl font-bold">Predictor<span class="text-yellow-400">MX</span></h2>
</div>
<p class="mt-2 text-sm text-blue-100">Predicciones inteligentes para la Liga MX</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-blue-100 hover:text-yellow-400 transition"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-blue-100 hover:text-yellow-400 transition"><i class="fab fa-facebook text-xl"></i></a>
<a href="#" class="text-blue-100 hover:text-yellow-400 transition"><i class="fab fa-instagram text-xl"></i></a>
</div>
</div>
<div class="border-t border-blue-800 mt-6 pt-6 text-sm text-center text-blue-200">
<p>© 2023 PredictorMX. Todos los derechos reservados.</p>
<p class="mt-1">Los datos y predicciones son meramente informativos y no constituyen asesoría para apuestas.</p>
</div>
</div>
</footer>
<script>
// Team logos mapping
const teamLogos = {
america: '<i class="fas fa-eagle text-5xl text-yellow-400"></i>',
chivas: '<i class="fas fa-flag text-5xl text-red-600"></i>',
cruzazul: '<i class="fas fa-plus text-5xl text-blue-800"></i>',
pumas: '<i class="fas fa-paw text-5xl text-blue-600"></i>',
tigres: '<i class="fas fa-cat text-5xl text-yellow-600"></i>',
rayados: '<i class="fas fa-star text-5xl text-blue-400"></i>',
toluca: '<i class="fas fa-fire text-5xl text-red-700"></i>',
pachuca: '<i class="fas fa-industry text-5xl text-blue-900"></i>',
leon: '<i class="fas fa-lion text-5xl text-green-700"></i>',
tijuana: '<i class="fas fa-sun text-5xl text-red-500"></i>',
sanluis: '<i class="fas fa-shield-alt text-5xl text-yellow-700"></i>',
mazatlan: '<i class="fas fa-anchor text-5xl text-blue-500"></i>',
queretaro: '<i class="fas fa-feather text-5xl text-blue-300"></i>',
puebla: '<i class="fas fa-chess-rook text-5xl text-blue-700"></i>',
juarez: '<i class="fas fa-horse-head text-5xl text-orange-600"></i>',
atlas: '<i class="fas fa-atlas text-5xl text-red-800"></i>',
necaxa: '<i class="fas fa-bolt text-5xl text-red-600"></i>',
santos: '<i class="fas fa-cross text-5xl text-green-800"></i>'
};
// Team names mapping
const teamNames = {
america: 'América',
chivas: 'Chivas',
cruzazul: 'Cruz Azul',
pumas: 'Pumas UNAM',
tigres: 'Tigres',
rayados: 'Rayados',
toluca: 'Toluca',
pachuca: 'Pachuca',
leon: 'León',
tijuana: 'Tijuana',
sanluis: 'Atlético San Luis',
mazatlan: 'Mazatlán',
queretaro: 'Querétaro',
puebla: 'Puebla',
juarez: 'Juárez',
atlas: 'Atlas',
necaxa: 'Necaxa',
santos: 'Santos Laguna'
};
// Historical matches data (simplified for demo)
const historicalMatches = {
'america-chivas': [
{ date: '2023-04-15', result: '2-1', competition: 'Liga MX' },
{ date: '2022-11-20', result: '1-1', competition: 'Liga MX' },
{ date: '2022-05-08', result: '3-2', competition: 'Liga MX' },
{ date: '2022-12-12', result: '0-0', competition: 'Liga MX' },
{ date: '2021-04-18', result: '1-2', competition: 'Liga MX' }
],
'chivas-america': [
{ date: '2023-09-10', result: '1-3', competition: 'Liga MX' },
{ date: '2023-02-25', result: '2-2', competition: 'Liga MX' },
{ date: '2022-08-14', result: '0-1', competition: 'Liga MX' },
{ date: '2022-03-06', result: '1-0', competition: 'Liga MX' },
{ date: '2021-10-30', result: '2-1', competition: 'Liga MX' }
],
'cruzazul-america': [
{ date: '2023-05-20', result: '1-1', competition: 'Liga MX' },
{ date: '2023-01-15', result: '0-2', competition: 'Liga MX' },
{ date: '2022-07-22', result: '3-3', competition: 'Liga MX' },
{ date: '2022-04-10', result: '1-0', competition: 'Liga MX' },
{ date: '2021-11-05', result: '2-2', competition: 'Liga MX' }
],
'pumas-chivas': [
{ date: '2023-08-12', result: '0-0', competition: 'Liga MX' },
{ date: '2023-03-18', result: '1-2', competition: 'Liga MX' },
{ date: '2022-10-22', result: '3-1', competition: 'Liga MX' },
{ date: '2022-06-05', result: '2-2', competition: 'Liga MX' },
{ date: '2021-12-18', result: '0-1', competition: 'Liga MX' }
]
// More historical data would be added here in a real application
};
// Initialize charts
let statsChart, algorithmChart;
function initCharts() {
// Stats Chart
const statsCtx = document.getElementById('stats-chart').getContext('2d');
statsChart = new Chart(statsCtx, {
type: 'bar',
data: {
labels: ['Goles por partido', 'Tiros al arco', 'Posesión %', 'Efectividad', 'Victorias últimos 5'],
datasets: [
{
label: 'Local',
data: [1.8, 5.2, 58, 42, 3],
backgroundColor: 'rgba(59, 130, 246, 0.7)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1
},
{
label: 'Visitante',
data: [1.2, 4.1, 48, 38, 2],
backgroundColor: 'rgba(99, 102, 241, 0.7)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 1
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
},
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Comparación de Estadísticas',
font: {
size: 16
}
}
}
}
});
// Algorithm Chart
const algorithmCtx = document.getElementById('algorithm-chart').getContext('2d');
algorithmChart = new Chart(algorithmCtx, {
type: 'doughnut',
data: {
labels: ['Forma reciente', 'Historial directo', 'Rendimiento local/visitante', 'Estadísticas ofensivas', 'Estadísticas defensivas'],
datasets: [{
data: [25, 20, 20, 20, 15],
backgroundColor: [
'rgba(59, 130, 246, 0.7)',
'rgba(99, 102, 241, 0.7)',
'rgba(167, 139, 250, 0.7)',
'rgba(16, 185, 129, 0.7)',
'rgba(239, 68, 68, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right',
},
title: {
display: true,
text: 'Factores de Predicción',
font: {
size: 14
}
}
}
}
});
}
// Update charts based on selected teams
function updateCharts(localTeam, awayTeam) {
// This is a simplified version - in a real app, you'd fetch actual data
const localStats = getRandomStats();
const awayStats = getRandomStats();
statsChart.data.datasets[0].data = localStats;
statsChart.data.datasets[1].data = awayStats;
statsChart.update();
}
function getRandomStats() {
return [
(Math.random() * 2 + 0.5).toFixed(1), // Goles por partido
Math.floor(Math.random() * 8 + 3), // Tiros al arco
Math.floor(Math.random() * 30 + 40), // Posesión %
Math.floor(Math.random() * 30 + 30), // Efectividad
Math.floor(Math.random() * 4 + 1) // Victorias últimos 5
];
}
// Display historical matches
function showHistoricalMatches(localTeam, awayTeam) {
const historyContent = document.getElementById('history-content');
const key1 = `${localTeam}-${awayTeam}`;
const key2 = `${awayTeam}-${localTeam}`;
let matches = [];
if (historicalMatches[key1]) {
matches = matches.concat(historicalMatches[key1]);
}
if (historicalMatches[key2]) {
matches = matches.concat(historicalMatches[key2]);
}
if (matches.length === 0) {
historyContent.innerHTML = `
<div class="text-center py-12">
<i class="fas fa-exclamation-circle text-4xl text-gray-300 mb-4"></i>
<p class="text-gray-500 dark:text-gray-400">No hay registros de enfrentamientos entre estos equipos</p>
</div>
`;
return;
}
// Sort matches by date (newest first)
matches.sort((a, b) => new Date(b.date) - new Date(a.date));
let html = `
<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>
<div class="space-y-4">
`;
matches.slice(0, 10).forEach(match => {
const [homeScore, awayScore] = match.result.split('-');
const isLocalWin = (key1.includes(`${localTeam}-${awayTeam}`) && parseInt(homeScore) > parseInt(awayScore)) ||
(key2.includes(`${localTeam}-${awayTeam}`) && parseInt(awayScore) > parseInt(homeScore));
html += `
<div class="history-item pl-6">
<div class="bg-white p-4 rounded-lg shadow-sm dark:bg-gray-700">
<div class="flex justify-between items-center mb-2">
<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>
<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>
</div>
<div class="flex items-center justify-between">
<div class="flex-1 text-right pr-4">
<span class="font-medium ${isLocalWin ? 'text-green-600' : ''}">${key1.includes(`${localTeam}-${awayTeam}`) ? homeScore : awayScore}</span>
<span class="text-xs text-gray-500 block dark:text-gray-400">${key1.includes(`${localTeam}-${awayTeam}`) ? teamNames[localTeam] : teamNames[awayTeam]}</span>
</div>
<div class="text-gray-400 dark:text-gray-500">vs</div>
<div class="flex-1 text-left pl-4">
<span class="font-medium ${!isLocalWin && homeScore !== awayScore ? 'text-green-600' : ''}">${key1.includes(`${localTeam}-${awayTeam}`) ? awayScore : homeScore}</span>
<span class="text-xs text-gray-500 block dark:text-gray-400">${key1.includes(`${localTeam}-${awayTeam}`) ? teamNames[awayTeam] : teamNames[localTeam]}</span>
</div>
</div>
</div>
</div>
`;
});
html += `</div>`;
historyContent.innerHTML = html;
}
// Generate a prediction
function generatePrediction(localTeam, awayTeam) {
// In a real app, this would call an API with the actual AI model
// For demo purposes, we'll generate random but plausible results
const localStrength = getTeamStrength(localTeam);
const awayStrength = getTeamStrength(awayTeam);
// Home advantage factor
const homeAdvantage = 0.3;
// Calculate base scores
let localScore = Math.round((localStrength + homeAdvantage) * (Math.random() * 0.5 + 0.5));
let awayScore = Math.round(awayStrength * (Math.random() * 0.5 + 0.5));
// Ensure scores are not negative
localScore = Math.max(0, localScore);
awayScore = Math.max(0, awayScore);
// Sometimes make it a draw
if (Math.random() > 0.7) {
const avg = Math.round((localScore + awayScore) / 2);
localScore = avg;
awayScore = avg;
}
// Calculate confidence (70-95%)
const confidence = Math.floor(Math.random() * 25 + 70);
return {
localScore,
awayScore,
confidence
};
}
// Simple team strength rating for demo purposes
function getTeamStrength(team) {
const strengths = {
america: 2.2,
chivas: 1.8,
cruzazul: 1.7,
pumas: 1.6,
tigres: 2.1,
rayados: 2.0,
toluca: 1.7,
pachuca: 1.8,
leon: 1.9,
tijuana: 1.5,
sanluis: 1.4,
mazatlan: 1.3,
queretaro: 1.4,
puebla: 1.5,
juarez: 1.4,
atlas: 1.6,
necaxa: 1.3,
santos: 1.7
};
return strengths[team] || 1.5;
}
// Simulate algorithm with custom inputs
function simulateAlgorithm() {
const localForm = document.getElementById('local-form').value.toUpperCase();
const awayForm = document.getElementById('away-form').value.toUpperCase();
const localGoals = parseFloat(document.getElementById('local-goals').value) || 0;
const awayGoals = parseFloat(document.getElementById('away-goals').value) || 0;
// Validate form inputs
const formRegex = /^[GEP\-]{1,5}$/;
if (!formRegex.test(localForm) || !formRegex.test(awayForm)) {
alert('Por favor ingresa una forma válida (G para ganar, E para empatar, P para perder)');
return;
}
// Calculate form points (G=3, E=1, P=0)
const localFormPoints = calculateFormPoints(localForm);
const awayFormPoints = calculateFormPoints(awayForm);
// Calculate score prediction (simplified)
const localScore = Math.round((localFormPoints / 15 * 3) + (localGoals / 2));
const awayScore = Math.round((awayFormPoints / 15 * 3) + (awayGoals / 2));
// Adjust to make scores more realistic
const adjLocalScore = Math.min(4, Math.max(0, localScore));
const adjAwayScore = Math.min(3, Math.max(0, awayScore));
// Calculate confidence based on input consistency
const confidence = Math.min(95, Math.floor(
60 +
(localFormPoints + awayFormPoints) / 30 * 20 +
(localGoals + awayGoals) / 4 * 10
));
// Display results
const simulationResult = document.getElementById('simulation-result');
document.getElementById('simulated-score').textContent = `${adjLocalScore} - ${adjAwayScore}`;
document.getElementById('simulated-confidence').textContent = `${confidence}%`;
document.getElementById('confidence-bar').style.width = `${confidence}%`;
simulationResult.classList.remove('hidden');
}
function calculateFormPoints(form) {
let points = 0;
for (let i = 0; i < form.length; i++) {
switch (form[i]) {
case 'G': points += 3; break;
case 'E': points += 1; break;
case 'P': points += 0; break;
}
}
return points;
}
// Theme toggle functionality
function toggleTheme() {
const html = document.documentElement;
const themeIcon = document.getElementById('theme-icon');
if (html.classList.contains('dark')) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
}
}
// Check for saved theme preference
function checkTheme() {
const html = document.documentElement;
const themeIcon = document.getElementById('theme-icon');
if (localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
html.classList.remove('dark');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
}
// Event Listeners
document.addEventListener('DOMContentLoaded', function() {
initCharts();
checkTheme();
// Theme toggle button
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
// Predict button click
document.getElementById('predict-btn').addEventListener('click', function() {
const localTeam = document.getElementById('local-team').value;
const awayTeam = document.getElementById('away-team').value;
if (!localTeam || !awayTeam) {
alert('Por favor selecciona ambos equipos');
return;
}
if (localTeam === awayTeam) {
alert('No puedes seleccionar el mismo equipo como local y visitante');
return;
}
// Show loading state
const btn = this;
const originalText = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analizando...';
btn.disabled = true;
// Simulate API call delay
setTimeout(() => {
// Generate prediction
const prediction = generatePrediction(localTeam, awayTeam);
// Update UI
document.getElementById('local-logo').innerHTML = teamLogos[localTeam];
document.getElementById('away-logo').innerHTML = teamLogos[awayTeam];
document.getElementById('local-name').textContent = teamNames[localTeam];
document.getElementById('away-name').textContent = teamNames[awayTeam];
document.getElementById('local-score').textContent = prediction.localScore;
document.getElementById('away-score').textContent = prediction.awayScore;
document.getElementById('prediction-confidence').textContent = `${prediction.confidence}% de confianza`;
// Show result
document.getElementById('prediction-result').classList.remove('hidden');
// Update charts
updateCharts(localTeam, awayTeam);
// Show historical matches
showHistoricalMatches(localTeam, awayTeam);
// Reset button
btn.innerHTML = originalText;
btn.disabled = false;
}, 1500);
});
// Simulate button click
document.getElementById('simulate-btn').addEventListener('click', simulateAlgorithm);
});
</script>
<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>
</html>