Resolucion de conflictos
This commit is contained in:
Tatiana Villa
commit
d08fb38074
|
|
@ -184,4 +184,11 @@ footer {
|
|||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
background-color: var(--color-tarjeta);
|
||||
border-left: 1px solid var(--color-primario);
|
||||
margin-bottom: 1.5rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@
|
|||
<meta name="author" content="Tatiana Villa">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/timeline.css">
|
||||
<script type="text/javascript" src="codigo.js"></script>
|
||||
</head>
|
||||
<body class="bg-black text-light">
|
||||
|
|
@ -23,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 -->
|
||||
|
|
@ -49,6 +48,7 @@
|
|||
<a class="nav-link" href="habilidades.html">Habilidades</a>
|
||||
</li>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="formacion.html">Formación</a>
|
||||
</li>
|
||||
|
|
@ -58,6 +58,13 @@
|
|||
<a class="nav-link" href="formacion.html">Formación</a>
|
||||
</li>
|
||||
|
||||
=======
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="formacion.html">Formación</a>
|
||||
</li>
|
||||
<!--
|
||||
>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="experiencia.html">Experiencia</a>
|
||||
|
|
@ -70,6 +77,7 @@
|
|||
</nav>
|
||||
</header>
|
||||
<main class="container main-content py-5">
|
||||
<<<<<<< HEAD
|
||||
|
||||
<section class="timeline">
|
||||
<h2>Formación</h2>
|
||||
|
|
@ -114,6 +122,77 @@
|
|||
<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">
|
||||
<h5 class="mb-0">
|
||||
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
<programación>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li>(IFCD0034) Programación con .NET</li>
|
||||
<li>(IFCT052PO) Gestión de sistemas con VmWare: Virtualización de aplicaciones</li>
|
||||
<li>(FPGS DAM) Desarrollo de Aplicaciones Multiplataforma</li>
|
||||
<li>(IFCD0210) Desarrollo de aplicaciones con tecnologías web</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion mt-4 timeline" id="accordionExample">
|
||||
<div class="card-header" id="headingTwo">
|
||||
<h5 class="mb-0">
|
||||
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||||
<Sistemas>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li>Administrador de Sistemas Unix (HPUX, Linux, Debian, Ubuntu, ... )</li>
|
||||
<li>(IFCT0410) Administración y diseño de redes departamentales</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion mt-4 timeline" id="accordionExample">
|
||||
<div class="card-header" id="headingFour">
|
||||
<h5 class="mb-0">
|
||||
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
|
||||
<Otros>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li>(ENAE0508) Organización y proyectos de instalaciones solares fotovoltaicas</li>
|
||||
<li>Robótica con arduino</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
|
||||
<div id="copyright">copyright</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,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,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<main class="dashboard">
|
||||
<section class="stat-card">
|
||||
<h3 id="session-info">Pilotos</h3>
|
||||
<table id="pilotos-table">
|
||||
<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>
|
||||
<!-- Aquí se llenarán los pilotos -->
|
||||
</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>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 -->
|
||||
|
|
@ -52,8 +52,13 @@
|
|||
<li class="nav-item">
|
||||
<a class="nav-link" href="formacion.html">Formación</a>
|
||||
</li>
|
||||
<<<<<<< HEAD
|
||||
<!--
|
||||
|
||||
=======
|
||||
|
||||
<!--
|
||||
>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="experiencia.html">Experiencia</a>
|
||||
</li>
|
||||
|
|
|
|||
175
index.html
175
index.html
|
|
@ -1,103 +1,132 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aplicaciones de Vanguardia</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tatiana Villa</title>
|
||||
<link rel="icon" href="img/tatianalogo.png" type="image/x-icon">
|
||||
<!-- Estilos -->
|
||||
<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="stylesheet" href="css/sobremi.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
|
||||
<body class="bg-black text-light">
|
||||
|
||||
<!-- Header -->
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<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>Aplicaciones de Vanguardia <span class="text-primary">}</span>
|
||||
<span class="text-primary">{</span>Tatiana Villa <span class="text-primary">}</span>
|
||||
</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">Inicio</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="proyectos.html">Proyectos</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>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="proyectos" class="py-5">
|
||||
<div class="container py-5">
|
||||
<h2 class="section-title mb-5">Proyectos en desarrollo</h2>
|
||||
<!-- Main Content -->
|
||||
|
||||
<main class="container main-content py-5">
|
||||
|
||||
<p class="text-success h5 font-monospace">
|
||||
/** <br>
|
||||
* Hola, soy Tatiana Villa Ema <!--(<span id="edad"></span> años)--> <br>
|
||||
* Full Stack Developer<br>
|
||||
*/
|
||||
</p>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-8">
|
||||
<h3 class="text-primary"><sobre-mi></h3>
|
||||
<p>Mi camino en tecnología empezó muy pronto. Desde joven me formé en informática y comencé mi carrera profesional en entornos de alto nivel, trabajando como programadora y administradora de <span class="habilidad">sistemas Unix/Linux</span> para empresas como <span class="empresa">Hewlett-Packard, Telefónica, Caja Duero, Oracle o Realia</span>. Durante más de una década gestioné infraestructuras críticas, impartí formación técnica y resolví problemas complejos en <span class="habilidad"> Linux y HP-UX</span>, siempre con un enfoque práctico, metódico y orientado a la estabilidad.</p>
|
||||
<p>Cuando nacieron mis hijos decidí priorizar mi familia y hacer una pausa en mi carrera profesional. Fue una etapa importante y necesaria, pero nunca dejé de sentir que la tecnología seguía siendo mi lugar. Ahora mismo mi hija mayor tiene <span id="edad-andrea"></span> años y mis hijos mellizos tienen <span id="edad-gemelos"></span> años.</p>
|
||||
<p>Poco antes de la pandemia (hace ya <span id="edad-pandemia"></span> años) intenté reincorporarme al sector, pero por ser persona de riesgo tuve que aislarme. Ese parón inesperado se convirtió en una oportunidad: retomé mi formación desde cero, actualicé mis conocimientos y me abrí a nuevas áreas. Estudié <span class="curso">Administracion y diseño de redes departamentales</span>,<span class="curso"> desarrollo de aplicaciones web</span>, <span class="curso">robótica con arduino</span>, <span class="curso">diseño 3D</span> y, finalmente, completé el título de <span class="curso">FPGS Desarrollo de Aplicaciones Multiplataforma (DAM)</span>.</p>
|
||||
<p>Desde entonces he seguido creciendo como desarrolladora Full Stack, reforzando mi base en <span class="habilidad">Java, PHP, JavaScript, HTML, CSS, Spring, Hibernate, MySQL, .NET</span>, <span class="habilidad">DevOps</span> y <span class="habilidad">Cloud</span>.</p>
|
||||
<p>Hoy combino mi experiencia en sistemas con mi formación en desarrollo para crear soluciones completas, estables y bien pensadas. Mi trayectoria no es lineal, y precisamente por eso es valiosa: sé cómo funcionan las cosas por dentro, sé cómo construirlas por fuera y sé adaptarme, aprender y reinventarme cuando la vida lo exige.</p>
|
||||
|
||||
<div class="row g-4">
|
||||
<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">Recursos Católicos</h5>
|
||||
<p class="card-text text-muted">Web de recursos católicos gratuitos (Rosario, oraciones, etc.).</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JavaScript, PHP, SQL, XML, JSON.</p>
|
||||
<a href="https://recursos-catolicos.es" class="btn-link">Saber más →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-primary"></sobre-mi></h3>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card project-card h-100">
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-dark border-secondary p-3 shadow">
|
||||
<h5 class="text-info">// Conocimientos</h5>
|
||||
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2 card-text">Java, Spring, Hibernate</li>
|
||||
<li class="mb-2 card-text">PHP, JavaScript, HTML, CSS, Bootstrap</li>
|
||||
<li class="mb-2 card-text">C#, .NET, SQL, Docker</li>
|
||||
<li class="mb-2 card-text">Linux, HP-UX, DevOps, VMware</li>
|
||||
<li class="mb-2 card-text">Cloud (Azure)</li>
|
||||
<li class="mb-2 card-text">Diseño 3D, robótica con Arduino</li>
|
||||
<li class="mb-2 card-text">Desarrollo de videojuegos con Unity</li>
|
||||
|
||||
<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>
|
||||
<p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JavaScript.</p>
|
||||
<a href="eltiempo/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">
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">Oposiciones</h5>
|
||||
<p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS</p>
|
||||
<a href="oposiciones/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">
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
|
||||
<p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera.</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
|
||||
<a href="piedra-papel-tijera.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">
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="py-5 text-center">
|
||||
<div class="container">
|
||||
<p class="mb-0">© 2026 - Tatiana Villa</p>
|
||||
<div class="col-md-4">
|
||||
<div class="card bg-dark border-secondary p-3 shadow">
|
||||
<h5 class="text-info">// Habilidades</h5>
|
||||
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2 card-text">Trabajo en equipo, resolución de conflictos</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="py-5 text-center">
|
||||
<div class="container">
|
||||
<p class="mb-0">© <span id="anio"></span> - Tatiana Villa</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!--
|
||||
<script>
|
||||
document.getElementById("anio").textContent = new Date().getFullYear();
|
||||
</script>
|
||||
-->
|
||||
<script src="js/codigo.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aplicaciones de Vanguardia</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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="stylesheet" href="css/style.css">
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body class="bg-black text-light">
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<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>Aplicaciones de Vanguardia <span class="text-primary">}</span>
|
||||
</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">Inicio</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="proyectos.html">Proyectos</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>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="proyectos" class="py-5">
|
||||
<div class="container py-5">
|
||||
<h2 class="section-title mb-5">Proyectos en desarrollo</h2>
|
||||
|
||||
<div class="row g-4">
|
||||
<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">Recursos Católicos</h5>
|
||||
<p class="card-text text-muted">Web de recursos católicos gratuitos (Rosario, oraciones, etc.).</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JavaScript, PHP, SQL, XML, JSON.</p>
|
||||
<a href="https://recursos-catolicos.es" 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">
|
||||
<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>
|
||||
<p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JavaScript.</p>
|
||||
<a href="eltiempo/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">
|
||||
|
||||
<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">
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">Oposiciones</h5>
|
||||
<p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS</p>
|
||||
<a href="oposiciones/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">
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
|
||||
<p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera.</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
|
||||
<a href="piedra-papel-tijera.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">
|
||||
|
||||
<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>
|
||||
|
||||
<footer class="py-5 text-center">
|
||||
<div class="container">
|
||||
<p class="mb-0">© 2026 - Tatiana Villa</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue