Resolucion de conflictos

2026-03-10 19:59:03 +01:00 · 2026-03-10 19:59:03 +01:00 · 5c4ff660dd
parent 34d4040fb5 658e2fe3b0
commit 5c4ff660dd
6 changed files with 322 additions and 4 deletions
--- a/formacion.html
+++ b/formacion.html
@ -22,7 +22,7 @@

            <!-- 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>Tatiana Villa <span class="text-primary">}</span> Formación
            </a>

            <!-- Botón móvil -->
--- a/formula1/css/f1.css
+++ 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; 
+        }
+
+
+        
--- a/formula1/index.html
+++ b/formula1/index.html
@ -3,18 +3,30 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<<<<<<< HEAD
    <title>Estadísticas F1</title>
    <link rel="stylesheet" href="css/estilos.css">
+=======
+    <title>F1 Stats Pro - Panel de Control</title>
+    <link rel="stylesheet" href="css/f1.css">
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
 </head>
 <body>

    <header>
        <h1>Estadísticas F1</h1>
+<<<<<<< HEAD
        <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>
+=======
+    </header>
+
+    <section class="stat-card cuenta-atras">
+    <h3 > Cuenta atrás para el GP de Australia 2026</h3>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
    <div id="countdown">
        00d 00h 00m 00s
    </div>
@ -27,12 +39,20 @@
                    <thead>
                        <tr>
                            <th>#</th>
+<<<<<<< HEAD
                            <th>Código</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Escuderia</th>
                            <th>Nacionalidad</th>
                            
+=======
+                            <th>Nombre</th>
+                            <th>Apellido</th>
+                            <th>Equipo</th>
+                            <th>Nacionalidad</th>
+                            <th>Código</th>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
                        </tr>
                    </thead>
                    <tbody>
@ -40,9 +60,31 @@
                    </tbody>
                </table>
        </section>
+<<<<<<< HEAD
            
    </main>

    <script src="js/codigo.js"></script>
+=======
+            <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>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
 </body>
 </html>
--- a/formula1/js/f1.js
+++ 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 = `
+                <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/formula1/pilotos.html
+++ b/formula1/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/habilidades.html
+++ b/habilidades.html
@ -22,7 +22,7 @@

            <!-- 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>Tatiana Villa <span class="text-primary">}</span> Habilidades
            </a>

            <!-- Botón móvil -->
@ -48,12 +48,12 @@
                        <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>