Resolucion de conflictos

This commit is contained in:
Tatiana Villa Ema 2026-03-23 19:15:24 +01:00
commit ea921d8f1f
10 changed files with 415 additions and 8 deletions

73
css/timeline.css Normal file
View File

@ -0,0 +1,73 @@
:root {
/* Paleta de el tiempo */
--color-primario: #F5F5F5;
--color-hover: #1E3A5F;
--color-secundario: #A1A1A1;
--color-fondo: #0D0D0D;
--color-texto: #E5E5E5;
--blanco-puro: #FFFFFF;
--sombra: rgba(47, 58, 86, 0.15);
--color-tarjeta: #1A1A1A;
--color-acento: #a4d7f4;
--gray: #acb3bf;
--color-borde: rgba(95, 174, 219, 0.3);
--color-cabecera: rgba(0,0,0,0.80);
--bg-vs: #1e1e1e; /* Fondo principal */
--bg-nav: #252526; /* Fondo de barra de navegación */
--bg-card: #2d2d2d; /* Fondo de tarjetas/secciones */
--keyword: #aaffff; /* Azul grisaceo */
--string: #ce9178; /* Naranja/Salmón (textos) */
--comment: #6a9955; /* Verde (comentarios) */
--var-name: #9cdcfe; /* Azul claro (variables) */
--text: #d4d4d4; /* Gris claro (texto normal) */
--border-editor: #3e3e42; /* Color de bordes y líneas */
}
.timeline {
position: relative;
max-width: 800px;
margin: auto;
padding: 40px 0;
}
.timeline h2 {
text-align: center;
margin-bottom: 40px;
}
.timeline::before {
content: "";
position: absolute;
left: 50%;
width: 4px;
height: 100%;
background: #ddd;
transform: translateX(-50%);
}
.timeline-item {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.timeline-item:nth-child(odd) {
flex-direction: row-reverse;
}
.timeline-date {
width: 45%;
text-align: right;
font-weight: bold;
}
.timeline-item:nth-child(odd) .timeline-date {
text-align: left;
}
.timeline-content {
width: 45%;
background: var(--color-tarjeta);
padding: 15px;
border-radius: 6px;
}

0
eltiempo/servidor/api-weather-reverse.php Executable file → Normal file
View File

0
eltiempo/servidor/api-weather.php Executable file → Normal file
View File

View File

@ -65,6 +65,52 @@
</nav>
</header>
<main class="container main-content py-5">
<<<<<<< HEAD
<section class="timeline">
<h2>Formación</h2>
<div class="timeline-item">
<div class="timeline-date">2025</div>
<div class="timeline-content">
<h3>IFCD0034 Programación con .NET</h3>
<p>Curso de programación con el framework .NET. Grupo Colón.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2025</div>
<div class="timeline-content">
<h3>IFCT052P0 Gestión de sistemas VMware</h3>
<p>Curso de virtualización de sistemas y aplicaciones con VMware. Grupo Colón.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2024</div>
<div class="timeline-content">
<h3>FPGS Desarrollo de Aplicaciones Multiplataforma (DAM)</h3>
<p>Formación profesional superior en desarrollo de software.</p>
<div class="timeline-centro">UNIR</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2023</div>
<div class="timeline-content">
<h3>IFCD0210 Desarrollo de Aplicaciones con Tecnologías Web</h3>
<p>Curso de desarrollo web (HTML, CSS, JavaScript, PHP, MySQL, XAMPP, GitHub).</p>
<div class="timeline-centro">Grupo Colón</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footer">
<div>Página realizada íntegramente con código: PHP, JavaScript, HTML y CSS</div>
=======
<div class="accordion mt-4 timeline" id="accordionExample">
<div class="card-header" id="headingOne">
@ -134,6 +180,7 @@
<div class="footer">
<div class="footer">
<div>Página realizada íntegramente con código: PHP, JavaScript, HTML y CSS</div>
>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
<div id="copyright">copyright</div>
</div>
</div>

74
formula1/css/estilos.css Normal file
View File

@ -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;
}

View File

@ -3,17 +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>
@ -26,11 +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>
@ -38,6 +60,12 @@
</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">
@ -57,5 +85,6 @@
</main>
<script src="js/f1.js"></script>
>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
</body>
</html>

126
formula1/js/codigo.js Normal file
View File

@ -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);

View File

@ -53,6 +53,29 @@ header h1 {
margin: 0;
}
/* Navbar */
.navbar {
background-color: var(--color-cabecera); /* var(--color-cabecera) con opacidad */
border-bottom: 2px solid var(--color-borde);
}
.navbar-brand {
font-weight: bold;
color: var(--color-acento) !important;
}
.nav-link {
color: var(--color-texto) !important;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-link:hover {
color: var(--color-acento) !important;
}
/* ======================
TITULOS
====================== */

View File

@ -6,15 +6,38 @@
</head>
<body>
<header>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="icon" href="tatianalogo.png" type="image/x-icon">
<link rel="stylesheet" href="css/estilos.css">
<h1>Temario TAI AGE</h1>
<nav>
<ul>
<li><a href="index.html">Temario</a></li>
<li><a href="cuestionarios/index.html">Cuestionarios</a></li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
<div class="container-fluid">
<!-- Logo -->
<a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
<span class="text-primary">{</span>Técnico Auxiliar Informático<span class="text-primary">}</span> Admin. del Estado
</a>
<!-- 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>
</button>
<!-- Menú -->
<div class="collapse navbar-collapse justify-content-end" id="menuNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="index.html">Temario</a></li>
<li class="nav-item"><a class="nav-link" href="cuestionarios/index.html">Cuestionarios</a></li>
<li class="nav-item"><a class="nav-link" href="https://tatvil.github.io/apuntes-taiage/">apuntes.md</a></li>
</ul>
</div>
</div>
</nav>
</header>

View File

@ -76,7 +76,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>
@ -86,6 +85,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">