diff --git a/formacion.html b/formacion.html index a4d4058..41ab8e8 100644 --- a/formacion.html +++ b/formacion.html @@ -22,7 +22,7 @@ - {Tatiana Villa } Proyectos + {Tatiana Villa } Formación diff --git a/formula1/css/f1.css b/formula1/css/f1.css new file mode 100644 index 0000000..3fe582a --- /dev/null +++ b/formula1/css/f1.css @@ -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; + } + + + \ No newline at end of file diff --git a/formula1/index.html b/formula1/index.html new file mode 100644 index 0000000..57f2ad7 --- /dev/null +++ b/formula1/index.html @@ -0,0 +1,61 @@ + + + + + + F1 Stats Pro - Panel de Control + + + + +
+

Estadísticas F1

+
+ +
+

Cuenta atrás para el GP de Australia 2026

+
+ 00d 00h 00m 00s +
+
+ +
+
+

Pilotos

+ + + + + + + + + + + + + + +
#NombreApellidoEquipoNacionalidadCódigo
+
+
+

Equipos

+ + + + + + + + + + + + +
#NombrePaísFundación
+
+
+ + + + \ No newline at end of file diff --git a/formula1/js/f1.js b/formula1/js/f1.js new file mode 100644 index 0000000..3800599 --- /dev/null +++ b/formula1/js/f1.js @@ -0,0 +1,155 @@ +// =============================== +// 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 = ` + ${p.numero} + ${p.nombre} + ${p.apellido} + ${p.equipo || '-'} + ${p.nacionalidad} + ${p.codigo} + `; + tbody.appendChild(fila); + }); + } catch (error) { + console.error('Error cargando pilotos:', error); + const tbody = document.querySelector('#pilotos-table tbody'); + tbody.innerHTML = `No se pudieron cargar los pilotos`; + } +} + +// =============================== +// ESCUDERÍAS +// =============================== +async function cargarEscuderias() { + try { + const response = await fetch('/f1/api/escuderias'); + const escuderias = await response.json(); + const tbody = document.querySelector('#escuderias-table tbody'); + + tbody.innerHTML = ''; // Limpiamos tabla + + escuderias.forEach(e => { + const fila = document.createElement('tr'); + fila.innerHTML = ` + ${e.nombre} + ${e.pais} + ${e.motor} + `; + tbody.appendChild(fila); + }); + } catch (error) { + console.error('Error cargando escuderías:', error); + const tbody = document.querySelector('#escuderias-table tbody'); + tbody.innerHTML = `No se pudieron cargar las escuderías`; + } +} + + +// =============================== +// 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 y escuderías al inicio y cada minuto +cargarPilotos(); +cargarEscuderias(); +setInterval(() => { cargarPilotos(); cargarEscuderias(); }, 60000); +} + +// Arrancar todo al cargar la página +document.addEventListener("DOMContentLoaded", init); \ No newline at end of file diff --git a/formula1/pilotos.html b/formula1/pilotos.html new file mode 100644 index 0000000..dec6c90 --- /dev/null +++ b/formula1/pilotos.html @@ -0,0 +1,47 @@ + + + + + + Pilotos de F1 + + + +

Pilotos de F1

+ + + + \ No newline at end of file