ppp
This commit is contained in:
Tatiana Villa
parent
e96bc2ffd0
commit
ff2e06088c
|
|
@ -0,0 +1,74 @@
|
|||
:root {
|
||||
--f1-red: #a00000;
|
||||
--dark-bg: #15151e;
|
||||
--card-bg: #1f1f27;
|
||||
--text: #ffffff;
|
||||
--border-color: #38383f;
|
||||
--titulo-color: #ff4c4c;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
color: var(--titulo-color);
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: var(--card-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--f1-red);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--titulo-color);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pos {
|
||||
font-weight: bold;
|
||||
color: var(--f1-red);
|
||||
}
|
||||
|
||||
.cuenta-atras {
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
border-bottom: 4px solid var(--f1-red);
|
||||
}
|
||||
|
||||
#countdown {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Estadísticas F1</title>
|
||||
<link rel="stylesheet" href="css/estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Estadísticas F1</h1>
|
||||
<h2 style="color: #bbbb00; border: 1px solid #bbbb00; padding: 10px; border-radius: 5px; width: fit-content; text-align: center;">PÁGINA EN CONSTRUCCIÓN</h2>
|
||||
</header>
|
||||
|
||||
<section class="stat-card cuenta-atras">
|
||||
<h3> Cuenta atrás para el GP de Australia 2026</h3>
|
||||
<div id="countdown">
|
||||
00d 00h 00m 00s
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="dashboard">
|
||||
<section class="stat-card">
|
||||
<h3 id="session-info">Pilotos</h3>
|
||||
<table id="pilotos-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Código</th>
|
||||
<th>Nombre</th>
|
||||
<th>Apellido</th>
|
||||
<th>Escuderia</th>
|
||||
<th>Nacionalidad</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Aquí se llenarán los pilotos -->
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="js/codigo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
// ===============================
|
||||
// FUNCIONES DE CONSULTA API
|
||||
// ===============================
|
||||
|
||||
// Obtener calendario completo de la temporada actual
|
||||
async function obtenerCalendario() {
|
||||
try {
|
||||
const response = await fetch("https://api.jolpi.ca/ergast/f1/current.json");
|
||||
const data = await response.json();
|
||||
const carreras = data.MRData.RaceTable.Races;
|
||||
return carreras;
|
||||
} catch (error) {
|
||||
console.error("Error al obtener calendario:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Encontrar la siguiente carrera
|
||||
function encontrarSiguienteCarrera(carreras) {
|
||||
const ahora = new Date();
|
||||
for (let carrera of carreras) {
|
||||
const fecha = new Date(`${carrera.date}T${carrera.time || '00:00:00Z'}`);
|
||||
if (fecha > ahora) {
|
||||
return { ...carrera, fecha };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ===============================
|
||||
// CUENTA ATRÁS DINÁMICA
|
||||
// ===============================
|
||||
function iniciarCuentaAtras(fechaCarrera) {
|
||||
const countdown = document.getElementById("countdown");
|
||||
|
||||
function actualizar() {
|
||||
const ahora = new Date();
|
||||
const diff = fechaCarrera - ahora;
|
||||
|
||||
if (diff <= 0) {
|
||||
countdown.textContent = "🏁 ¡La carrera empezó!";
|
||||
return;
|
||||
}
|
||||
|
||||
const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const horas = Math.floor((diff / (1000 * 60 * 60)) % 24);
|
||||
const minutos = Math.floor((diff / (1000 * 60)) % 60);
|
||||
const segundos = Math.floor((diff / 1000) % 60);
|
||||
|
||||
countdown.textContent = `${dias}d ${horas}h ${minutos}m ${segundos}s`;
|
||||
}
|
||||
|
||||
actualizar();
|
||||
setInterval(actualizar, 1000);
|
||||
}
|
||||
|
||||
// ===============================
|
||||
// PILOTOS
|
||||
// ===============================
|
||||
async function cargarPilotos() {
|
||||
try {
|
||||
const response = await fetch('/f1/api/pilotos');
|
||||
const pilotos = await response.json();
|
||||
const tbody = document.querySelector('#pilotos-table tbody');
|
||||
|
||||
tbody.innerHTML = ''; // Limpiamos antes de rellenar
|
||||
|
||||
pilotos.forEach(p => {
|
||||
const fila = document.createElement('tr');
|
||||
fila.innerHTML = `
|
||||
<td>${p.numero}</td>
|
||||
<td>${p.codigo}</td>
|
||||
<td>${p.nombre}</td>
|
||||
<td>${p.apellido}</td>
|
||||
<td>${p.escuderia || '-'}</td>
|
||||
<td>${p.nacionalidad}</td>
|
||||
`;
|
||||
tbody.appendChild(fila);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error cargando pilotos:', error);
|
||||
const tbody = document.querySelector('#pilotos-table tbody');
|
||||
tbody.innerHTML = `<tr><td colspan="6">No se pudieron cargar los pilotos</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
// ===============================
|
||||
// INIT PRINCIPAL
|
||||
// ===============================
|
||||
async function init() {
|
||||
// 1) Obtener calendario
|
||||
const carreras = await obtenerCalendario();
|
||||
|
||||
// 2) Calcular siguiente evento
|
||||
const proxima = encontrarSiguienteCarrera(carreras);
|
||||
|
||||
if (!proxima) {
|
||||
document.getElementById("countdown").textContent =
|
||||
"No hay próximos Grandes Premios este año";
|
||||
return;
|
||||
}
|
||||
|
||||
// 3) Mostrar nombre de la próxima carrera
|
||||
document.querySelector(".cuenta-atras h3").textContent =
|
||||
`Cuenta atrás para el GP de ${proxima.raceName}`;
|
||||
|
||||
// 4) Iniciar cuenta atrás
|
||||
iniciarCuentaAtras(proxima.fecha);
|
||||
|
||||
// 5) Indicar modo carrera o pronóstico
|
||||
const ahora = new Date();
|
||||
if (ahora >= proxima.fecha) {
|
||||
document.getElementById("session-info").textContent =
|
||||
"Modo carrera — datos en vivo o resultados";
|
||||
} else {
|
||||
document.getElementById("session-info").textContent =
|
||||
`Próxima sesión de ${proxima.raceName}`;
|
||||
}
|
||||
|
||||
// Cargar pilotos al inicio y cada minuto
|
||||
cargarPilotos();
|
||||
setInterval(() => { cargarPilotos(); }, 60000);
|
||||
}
|
||||
|
||||
// Arrancar todo al cargar la página
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
|
|
@ -79,7 +79,6 @@
|
|||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card project-card h-100">
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">El Tiempo</h5>
|
||||
<p class="card-text text-muted">Guardo los datos del tiempo de 3 ciudades españolas que me interesan (Madrid, L'Ampolla (Tarragona), L'Alfas del Pi (Alicante)) con fines estadísticos. </p>
|
||||
|
|
@ -89,6 +88,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card project-card h-100">
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">Formula 1</h5>
|
||||
<p class="card-text text-muted">Web de estadísticas de Fórmula 1.</p>
|
||||
<p class="card-text text-muted card-tecnologia">Java, Spring, Hibernate, JPA, MySQL, HTML, CSS, JavaScript.</p>
|
||||
<a href="formula1/index.html" class="btn-link">Saber más →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card project-card h-100">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue