Resolviendo conflictos

2026-03-09 18:24:19 +01:00 · 2026-03-09 18:24:19 +01:00 · 064a9a33e2
parent b79f739bc4 5fdcf1154a
commit 064a9a33e2
6 changed files with 403 additions and 8 deletions
--- a/css/f1.css
+++ b/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; 
+        }
+
+
+        
--- a/f1.html
+++ b/f1.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>F1 Stats Pro - Panel de Control</title>
+    <link rel="stylesheet" href="css/f1.css">
+</head>
+<body>
+
+    <header>
+        <h1>Estadísticas F1</h1>
+    </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>Nombre</th>
+                            <th>Apellido</th>
+                            <th>Equipo</th>
+                            <th>Nacionalidad</th>
+                            <th>Código</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Aquí se llenarán los pilotos -->
+                    </tbody>
+                </table>
+        </section>
+            <section class="stat-card">
+                <h3 id="session-info">Equipos</h3>
+                <table id="equipos-table">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Nombre</th>
+                                <th>País</th>
+                                <th>Fundación</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- Aquí se llenarán los equipos -->
+                        </tbody>
+                    </table>
+        </section>
+    </main>
+
+    <script src="js/f1.js"></script>
+</body>
+</html>
--- a/js/f1.js
+++ b/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 = `
+                <td>${p.numero}</td>
+                <td>${p.nombre}</td>
+                <td>${p.apellido}</td>
+                <td>${p.equipo || '-'}</td>
+                <td>${p.nacionalidad}</td>
+                <td>${p.codigo}</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>`;
+    }
+}
+
+// ===============================
+// 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 = `
+                <td>${e.nombre}</td>
+                <td>${e.pais}</td>
+                <td>${e.motor}</td>
+            `;
+            tbody.appendChild(fila);
+        });
+    } catch (error) {
+        console.error('Error cargando escuderías:', error);
+        const tbody = document.querySelector('#escuderias-table tbody');
+        tbody.innerHTML = `<tr><td colspan="4">No se pudieron cargar las escuderías</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 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);
--- a/js/f1pruebas.js
+++ b/js/f1pruebas.js
@ -0,0 +1,49 @@
+const BASE_URL = 'https://api.openf1.org/v1';
+
+async function cargarDatosF1() {
+    const statusDiv = document.getElementById('api-status');
+    const tablaCuerpo = document.getElementById('tabla-pilotos-body');
+
+    try {
+        statusDiv.innerHTML = 'Conectando con OpenF1...';
+
+        // Usamos una session_key fija de un GP pasado para probar que funciona
+        // Bahrain 2024 Session Key: 9465
+        const sessionKey = '9465'; 
+        
+        document.getElementById('session-info').innerText = "GP de Bahrain (Datos de Test)";
+
+        const driversRes = await fetch(`${BASE_URL}/drivers?session_key=${sessionKey}`);
+        
+        if (!driversRes.ok) throw new Error(`Error HTTP: ${driversRes.status}`);
+
+        const drivers = await driversRes.json();
+
+        if (drivers.length === 0) {
+            statusDiv.innerHTML = 'No se encontraron pilotos.';
+            return;
+        }
+
+        tablaCuerpo.innerHTML = '';
+        drivers.forEach(driver => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td style="border-left: 4px solid #${driver.team_colour || 'ccc'}">
+                    ${driver.driver_number}
+                </td>
+                <td><strong>${driver.full_name}</strong></td>
+                <td>${driver.team_name}</td>
+                <td>${driver.name_acronym}</td>
+            `;
+            tablaCuerpo.appendChild(row);
+        });
+
+        statusDiv.innerHTML = '<span style="color: #4caf50;">● Datos cargados con éxito</span>';
+
+    } catch (error) {
+        console.error("DETALLE DEL ERROR:", error);
+        statusDiv.innerHTML = `<span style="color: #ff4b4b;">● Error: ${error.message}</span>`;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', cargarDatosF1);
--- a/pilotos.html
+++ b/pilotos.html
@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pilotos de F1</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f7f7f7;
+            padding: 20px;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        table {
+            margin: 0 auto;
+            border-collapse: collapse;
+            width: 90%;
+            max-width: 800px;
+            background-color: white;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        th, td {
+            padding: 10px 15px;
+            border: 1px solid #ddd;
+            text-align: center;
+        }
+        th {
+            background-color: #004080;
+            color: white;
+        }
+        tr:nth-child(even) {
+            background-color: #f2f2f2;
+        }
+        tr:hover {
+            background-color: #cce0ff;
+        }
+    </style>
+</head>
+<body>
+    <h1>Pilotos de F1</h1>
+   
+
+</body>
+</html>
--- a/proyectos.html
+++ b/proyectos.html
@ -18,10 +18,10 @@

            <!-- Logo -->
            <a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
-                <span class="text-primary">{</span>Tatiana Villa <span class="text-primary">}</span> Proyectos
+                <span class="text-primary">{</span>Aplicaciones de Vanguardia <span class="text-primary">}</span>
            </a>

-            <!-- Botón móvil -->
+             <!-- Botón móvil -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav"
                    aria-controls="menuNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
@ -37,23 +37,20 @@

                    <li class="nav-item">
                        <a class="nav-link" href="proyectos.html">Proyectos</a>
-                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="habilidades.html">Habilidades</a>
                    </li>

-<!--
                    <li class="nav-item">
                        <a class="nav-link" href="formacion.html">Formación</a>
                    </li>
-
-
+<!--
                    <li class="nav-item">
                        <a class="nav-link" href="experiencia.html">Experiencia</a>
                    </li>
-->
+                -->
                </ul>
            </div>

@ -63,7 +60,7 @@

    <section id="proyectos" class="py-5">
        <div class="container py-5">
-            <h2 class="section-title mb-5">Proyectos</h2>
+            <h2 class="section-title mb-5">Proyectos en desarrollo</h2>
            
            <div class="row g-4">
                <div class="col-md-6 col-lg-4">
@ -112,6 +109,18 @@
                        </div>
                    </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">F1</h5>
+                            <p class="card-text text-muted">Pronosticos, estadisticas, resultados y noticias de Fórmula 1.</p>
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
+                            <a href="f1.html" class="btn-link">Saber más →</a>
+                        </div>
+                    </div>
+                </div>
            </div>
        </div>
    </section>