Mejoras en piedra, papel y tijera y cuenta atras opos
This commit is contained in:
Tatiana Villa Ema
parent
6f8223270a
commit
5a6f23d152
|
|
@ -142,6 +142,53 @@ body {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.game-btn {
|
||||
font-size: 2.5rem;
|
||||
padding: 10px;
|
||||
border: var(--borde); /* Usamos tu variable de borde */
|
||||
border-radius: 50%;
|
||||
background: var(--color-secundario);
|
||||
color: var(--color-texto);
|
||||
cursor: pointer;
|
||||
transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.game-btn:hover {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 0 10px var(--color-acento);
|
||||
background: var(--color-fondo);
|
||||
}
|
||||
|
||||
/* Clase que añade el JS al hacer click */
|
||||
.game-btn.seleccionada {
|
||||
box-shadow: 0 0 20px var(--color-acento);
|
||||
transform: scale(1.2);
|
||||
border-color: var(--color-acento);
|
||||
}
|
||||
|
||||
.game-btn-pc {
|
||||
font-size: 2.5rem;
|
||||
opacity: 0.3;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Clase para resaltar la elección del PC */
|
||||
.pc-elegido {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Imágenes */
|
||||
.btn-img {
|
||||
width: 70px;
|
||||
|
|
@ -175,6 +222,95 @@ body {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* ── Mapa SVG interactivo ─────────────────────────────────── */
|
||||
.mapa-svg {
|
||||
width: 90%;
|
||||
max-width: 320px;
|
||||
margin-top: 1rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Líneas de conexión */
|
||||
.conexion {
|
||||
stroke: var(--color-primario);
|
||||
stroke-width: 1.5;
|
||||
opacity: 0.3;
|
||||
transition: stroke 0.25s, stroke-width 0.25s, opacity 0.25s;
|
||||
}
|
||||
|
||||
/* Nodos: círculo base */
|
||||
.nodo circle {
|
||||
fill: var(--color-secundario);
|
||||
stroke: var(--color-primario);
|
||||
stroke-width: 2;
|
||||
transition: fill 0.25s, stroke 0.25s, filter 0.25s, opacity 0.25s;
|
||||
}
|
||||
|
||||
.nodo-emoji {
|
||||
font-size: 20px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nodo-label {
|
||||
font-size: 10px;
|
||||
fill: var(--color-texto);
|
||||
font-family: var(--fuente-base);
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s, fill 0.25s;
|
||||
}
|
||||
|
||||
/* ── Estados al pasar el ratón sobre un botón ─────────────── */
|
||||
|
||||
/* Atenúa todas las conexiones cuando el mapa está activo */
|
||||
.mapa-activo .conexion {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* Resalta las conexiones activas (las del botón en hover) */
|
||||
.mapa-activo .conexion.conexion-activa {
|
||||
stroke: var(--color-acento);
|
||||
stroke-width: 2.5;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Nodo origen (la opción sobre la que se hace hover) */
|
||||
.nodo.nodo-origen circle {
|
||||
stroke: var(--color-acento);
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
/* Nodos vencidos: se iluminan en dorado */
|
||||
.nodo.nodo-vencido circle {
|
||||
fill: var(--color-acento);
|
||||
stroke: var(--color-acento);
|
||||
filter: drop-shadow(0 0 7px var(--color-acento));
|
||||
}
|
||||
|
||||
.nodo.nodo-vencido .nodo-label {
|
||||
fill: var(--color-acento);
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* El resto de nodos se atenúa */
|
||||
.mapa-activo .nodo:not(.nodo-vencido):not(.nodo-origen) circle {
|
||||
opacity: 0.35;
|
||||
}
|
||||
.mapa-activo .nodo:not(.nodo-vencido):not(.nodo-origen) .nodo-label {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Texto de pista debajo del mapa */
|
||||
.mapa-hint-texto {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-acento);
|
||||
font-weight: 600;
|
||||
min-height: 1.2rem;
|
||||
margin-top: 0.4rem;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
/* Texto */
|
||||
.grande {
|
||||
font-size: 1.2rem;
|
||||
|
|
|
|||
|
|
@ -157,6 +157,12 @@ body {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
#countdown {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-acento);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: 1px solid var(--color-borde);
|
||||
|
|
|
|||
47
js/codigo.js
47
js/codigo.js
|
|
@ -12,16 +12,55 @@ function calcularEdad(fechaNacimiento) {
|
|||
|
||||
const fechaNacimientoAndrea = "2001-01-14";
|
||||
const edadAndrea = calcularEdad(fechaNacimientoAndrea);
|
||||
document.getElementById("edad-andrea").textContent = edadAndrea;
|
||||
if (document.getElementById("edad-andrea")) document.getElementById("edad-andrea").textContent = edadAndrea;
|
||||
|
||||
const fechaNacimientoGemelos = "2004-11-24";
|
||||
const edadGemelos = calcularEdad(fechaNacimientoGemelos);
|
||||
document.getElementById("edad-gemelos").textContent = edadGemelos;
|
||||
if (document.getElementById("edad-gemelos")) document.getElementById("edad-gemelos").textContent = edadGemelos;
|
||||
|
||||
const fechaPandemia = "2020-03-11";
|
||||
const edadPandemia = calcularEdad(fechaPandemia);
|
||||
document.getElementById("edad-pandemia").textContent = edadPandemia;
|
||||
if (document.getElementById("edad-pandemia")) document.getElementById("edad-pandemia").textContent = edadPandemia;
|
||||
|
||||
// añade el año actual al pie de página
|
||||
document.getElementById("anio").textContent = new Date().getFullYear();
|
||||
if (document.getElementById("anio")) document.getElementById("anio").textContent = new Date().getFullYear();
|
||||
|
||||
// PROYECTOS
|
||||
|
||||
/**
|
||||
* Script para la cuenta atrás del examen TAI AGE
|
||||
* Fecha: 23 de mayo de 2026
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Definimos la fecha objetivo (23 de mayo de 2026 a las 09:00)
|
||||
const examenDate = new Date("May 23, 2026 09:00:00").getTime();
|
||||
const countdownContainer = document.getElementById("countdown");
|
||||
|
||||
// Si el contenedor no existe en esta página, no ejecutamos el intervalo
|
||||
if (!countdownContainer) return;
|
||||
|
||||
const updateTimer = () => {
|
||||
const now = new Date().getTime();
|
||||
const diff = examenDate - now;
|
||||
|
||||
if (diff < 0) {
|
||||
countdownContainer.innerHTML = "¡Día del examen!";
|
||||
clearInterval(timerInterval);
|
||||
return;
|
||||
}
|
||||
|
||||
// Cálculos de tiempo
|
||||
const d = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const s = Math.floor((diff % (1000 * 60)) / 1000);
|
||||
|
||||
// Formateamos el texto
|
||||
countdownContainer.innerHTML = `Examen en: ${d}d ${h}h ${m}m ${s}s`;
|
||||
};
|
||||
|
||||
// Ejecutamos una vez al cargar y luego cada segundo
|
||||
updateTimer();
|
||||
const timerInterval = setInterval(updateTimer, 1000);
|
||||
});
|
||||
131
js/piedra.js
131
js/piedra.js
|
|
@ -15,6 +15,12 @@ function inicializarDOM() {
|
|||
DOM.resultado = document.getElementById("resultado");
|
||||
DOM.opciones = document.querySelectorAll(".btn-img");
|
||||
DOM.toggleTema = document.getElementById("toggle-tema");
|
||||
|
||||
DOM.eleccionordenador = document.getElementById("eleccionordenador");
|
||||
DOM.resultado = document.getElementById("resultado");
|
||||
|
||||
DOM.opciones = document.querySelectorAll(".game-btn");
|
||||
DOM.toggleTema = document.getElementById("toggle-tema");
|
||||
}
|
||||
|
||||
function ocultarJuego() {
|
||||
|
|
@ -58,33 +64,112 @@ function reproducirSonido() {
|
|||
}
|
||||
|
||||
function quienGana(opcionJugador) {
|
||||
const opciones = ["piedra", "papel", "tijera", "lagarto", "spock"];
|
||||
const opcionOrdenador = opciones[Math.floor(Math.random() * opciones.length)];
|
||||
// 1. Definir opciones y elección aleatoria del ordenador
|
||||
const opciones = ["piedra", "papel", "tijera", "lagarto", "spock"];
|
||||
const opcionOrdenador = opciones[Math.floor(Math.random() * opciones.length)];
|
||||
|
||||
DOM.eleccionjugador.textContent = opcionJugador;
|
||||
DOM.eleccionordenador.textContent = opcionOrdenador;
|
||||
// Diccionario de emojis para actualizar los textos de pantalla
|
||||
const emojis = {
|
||||
piedra: "🪨",
|
||||
papel: "📄",
|
||||
tijera: "✂️",
|
||||
lagarto: "🦎",
|
||||
spock: "🖖"
|
||||
};
|
||||
|
||||
const ganaJugador =
|
||||
(opcionJugador === "piedra" && ["tijera", "lagarto"].includes(opcionOrdenador)) ||
|
||||
(opcionJugador === "papel" && ["piedra", "spock"].includes(opcionOrdenador)) ||
|
||||
(opcionJugador === "tijera" && ["papel", "lagarto"].includes(opcionOrdenador)) ||
|
||||
(opcionJugador === "lagarto" && ["papel", "spock"].includes(opcionOrdenador)) ||
|
||||
(opcionJugador === "spock" && ["piedra", "tijera"].includes(opcionOrdenador));
|
||||
// 2. Actualizar visualmente la elección en el DOM
|
||||
DOM.eleccionjugador.textContent = `Elegiste: ${emojis[opcionJugador]}`;
|
||||
DOM.eleccionordenador.textContent = `PC eligió: ${emojis[opcionOrdenador]}`;
|
||||
|
||||
if (opcionJugador === opcionOrdenador) {
|
||||
DOM.resultado.textContent = "Empate";
|
||||
animarResultado("empate");
|
||||
} else if (ganaJugador) {
|
||||
DOM.resultado.textContent = "Ganaste";
|
||||
DOM.puntosPersona.textContent = (parseInt(DOM.puntosPersona.textContent) + 1).toString();
|
||||
animarResultado("victoria");
|
||||
} else {
|
||||
DOM.resultado.textContent = "Perdiste";
|
||||
DOM.puntosOrdenador.textContent = (parseInt(DOM.puntosOrdenador.textContent) + 1).toString();
|
||||
animarResultado("derrota");
|
||||
// 3. Resaltar el icono del ordenador (opcional, para dar feedback visual)
|
||||
document.querySelectorAll('.game-btn-pc').forEach(el => el.classList.remove('pc-elegido'));
|
||||
const pcIcono = document.getElementById(`pc-${opcionOrdenador}`);
|
||||
if (pcIcono) {
|
||||
pcIcono.classList.add('pc-elegido');
|
||||
}
|
||||
|
||||
// 4. Lógica de victoria (Reglas extendidas de Sheldon Cooper)
|
||||
// El jugador gana si su opción vence a la del ordenador
|
||||
const ganaJugador =
|
||||
(opcionJugador === "piedra" && (opcionOrdenador === "tijera" || opcionOrdenador === "lagarto")) ||
|
||||
(opcionJugador === "papel" && (opcionOrdenador === "piedra" || opcionOrdenador === "spock")) ||
|
||||
(opcionJugador === "tijera" && (opcionOrdenador === "papel" || opcionOrdenador === "lagarto")) ||
|
||||
(opcionJugador === "lagarto" && (opcionOrdenador === "papel" || opcionOrdenador === "spock")) ||
|
||||
(opcionJugador === "spock" && (opcionOrdenador === "piedra" || opcionOrdenador === "tijera"));
|
||||
|
||||
// 5. Determinar resultado y actualizar puntuación
|
||||
if (opcionJugador === opcionOrdenador) {
|
||||
DOM.resultado.textContent = "¡Empate! 🤝";
|
||||
animarResultado("empate");
|
||||
} else if (ganaJugador) {
|
||||
DOM.resultado.textContent = "¡Has ganado! 🏆";
|
||||
// Convertimos a número, sumamos 1 y devolvemos a texto
|
||||
let puntosActuales = parseInt(DOM.puntosPersona.textContent);
|
||||
DOM.puntosPersona.textContent = (puntosActuales + 1).toString();
|
||||
animarResultado("victoria");
|
||||
} else {
|
||||
DOM.resultado.textContent = "Has perdido 😢";
|
||||
let puntosPC = parseInt(DOM.puntosOrdenador.textContent);
|
||||
DOM.puntosOrdenador.textContent = (puntosPC + 1).toString();
|
||||
animarResultado("derrota");
|
||||
}
|
||||
|
||||
// 6. Efecto de sonido
|
||||
reproducirSonido();
|
||||
}
|
||||
|
||||
// Reglas: qué opciones vence cada elección
|
||||
const vence = {
|
||||
piedra: ["tijera", "lagarto"],
|
||||
papel: ["piedra", "spock"],
|
||||
tijera: ["papel", "lagarto"],
|
||||
lagarto: ["papel", "spock"],
|
||||
spock: ["piedra", "tijera"]
|
||||
};
|
||||
|
||||
const nombresMapa = {
|
||||
piedra: "Piedra", papel: "Papel", tijera: "Tijera",
|
||||
lagarto: "Lagarto", spock: "Spock"
|
||||
};
|
||||
|
||||
function activarMapaHover(choice) {
|
||||
const mapa = document.getElementById("mapa-juego");
|
||||
if (!mapa) return;
|
||||
|
||||
mapa.classList.add("mapa-activo");
|
||||
|
||||
// Marcar nodo origen
|
||||
const origen = document.getElementById(`nodo-${choice}`);
|
||||
if (origen) origen.classList.add("nodo-origen");
|
||||
|
||||
// Marcar nodos vencidos y conexiones activas
|
||||
vence[choice].forEach(beaten => {
|
||||
const nodo = document.getElementById(`nodo-${beaten}`);
|
||||
if (nodo) nodo.classList.add("nodo-vencido");
|
||||
});
|
||||
mapa.querySelectorAll(`.conexion[data-from="${choice}"]`)
|
||||
.forEach(l => l.classList.add("conexion-activa"));
|
||||
|
||||
// Texto de pista
|
||||
const hint = document.getElementById("mapa-hint");
|
||||
if (hint) {
|
||||
const vencidos = vence[choice].map(v => nombresMapa[v]).join(" y ");
|
||||
hint.textContent = `${nombresMapa[choice]} vence a: ${vencidos}`;
|
||||
}
|
||||
}
|
||||
|
||||
reproducirSonido();
|
||||
function desactivarMapaHover() {
|
||||
const mapa = document.getElementById("mapa-juego");
|
||||
if (!mapa) return;
|
||||
|
||||
mapa.classList.remove("mapa-activo");
|
||||
mapa.querySelectorAll(".nodo-origen, .nodo-vencido")
|
||||
.forEach(n => n.classList.remove("nodo-origen", "nodo-vencido"));
|
||||
mapa.querySelectorAll(".conexion-activa")
|
||||
.forEach(l => l.classList.remove("conexion-activa"));
|
||||
|
||||
const hint = document.getElementById("mapa-hint");
|
||||
if (hint) hint.textContent = "";
|
||||
}
|
||||
|
||||
function configurarEventos() {
|
||||
|
|
@ -98,6 +183,8 @@ function configurarEventos() {
|
|||
op.classList.add("seleccionada");
|
||||
quienGana(op.id);
|
||||
});
|
||||
op.addEventListener("mouseenter", () => activarMapaHover(op.dataset.choice));
|
||||
op.addEventListener("mouseleave", desactivarMapaHover);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Piedra · Papel · Tijera · Lagarto · Spock</title>
|
||||
|
||||
<script src="js/piedra.js" defer></script>
|
||||
<link rel="stylesheet" href="css/piedra-papel-tijera.css">
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
|
||||
<main class="cuerpo">
|
||||
|
||||
<!-- Jugador -->
|
||||
<section class="columna" id="persona">
|
||||
<header class="cabecera-jugador">
|
||||
<p id="etiquetaJugador">Puntuación Jugador:</p>
|
||||
|
|
@ -35,23 +33,79 @@
|
|||
</header>
|
||||
|
||||
<div class="opciones">
|
||||
<img src="img/piedra-papel-tijera/piedra.png" id="piedra" class="btn-img" alt="Piedra">
|
||||
<img src="img/piedra-papel-tijera/papel.png" id="papel" class="btn-img" alt="Papel">
|
||||
<img src="img/piedra-papel-tijera/tijera.png" id="tijera" class="btn-img" alt="Tijera">
|
||||
<img src="img/piedra-papel-tijera/lagarto.png" id="lagarto" class="btn-img" alt="Lagarto">
|
||||
<img src="img/piedra-papel-tijera/spock.png" id="spock" class="btn-img" alt="Spock">
|
||||
<button class="game-btn" id="piedra" data-choice="piedra" title="Piedra">🪨</button>
|
||||
<button class="game-btn" id="papel" data-choice="papel" title="Papel">📄</button>
|
||||
<button class="game-btn" id="tijera" data-choice="tijera" title="Tijera">✂️</button>
|
||||
<button class="game-btn" id="lagarto" data-choice="lagarto" title="Lagarto">🦎</button>
|
||||
<button class="game-btn" id="spock" data-choice="spock" title="Spock">🖖</button>
|
||||
</div>
|
||||
|
||||
<p class="grande" id="eleccionjugador">¿Qué eliges?</p>
|
||||
</section>
|
||||
|
||||
<!-- Centro -->
|
||||
<section class="columna" id="imagencentro">
|
||||
<p class="grande" id="resultado">Resultado</p>
|
||||
<img src="img/piedra-papel-tijera/esquemaminimalista.png" class="central-img" alt="Esquema del juego">
|
||||
|
||||
<!-- Mapa interactivo: pasa el ratón sobre los botones para ver qué vence cada opción -->
|
||||
<svg id="mapa-juego" class="mapa-svg" viewBox="0 0 350 290" xmlns="http://www.w3.org/2000/svg" aria-label="Mapa de reglas del juego">
|
||||
|
||||
<!-- Conexiones (quién vence a quién) -->
|
||||
<!-- piedra → tijera -->
|
||||
<line class="conexion" data-from="piedra" data-to="tijera" x1="253" y1="127" x2="133" y2="213"/>
|
||||
<!-- piedra → lagarto -->
|
||||
<line class="conexion" data-from="piedra" data-to="lagarto" x1="266" y1="137" x2="246" y2="203"/>
|
||||
<!-- papel → piedra -->
|
||||
<line class="conexion" data-from="papel" data-to="piedra" x1="102" y1="112" x2="248" y2="112"/>
|
||||
<!-- papel → spock -->
|
||||
<line class="conexion" data-from="papel" data-to="spock" x1="97" y1="97" x2="154" y2="57"/>
|
||||
<!-- tijera → papel -->
|
||||
<line class="conexion" data-from="tijera" data-to="papel" x1="104" y1="203" x2="84" y2="137"/>
|
||||
<!-- tijera → lagarto -->
|
||||
<line class="conexion" data-from="tijera" data-to="lagarto" x1="138" y1="228" x2="212" y2="228"/>
|
||||
<!-- lagarto → papel -->
|
||||
<line class="conexion" data-from="lagarto" data-to="papel" x1="217" y1="213" x2="97" y2="127"/>
|
||||
<!-- lagarto → spock -->
|
||||
<line class="conexion" data-from="lagarto" data-to="spock" x1="230" y1="203" x2="183" y2="67"/>
|
||||
<!-- spock → piedra -->
|
||||
<line class="conexion" data-from="spock" data-to="piedra" x1="196" y1="57" x2="253" y2="97"/>
|
||||
<!-- spock → tijera -->
|
||||
<line class="conexion" data-from="spock" data-to="tijera" x1="167" y1="67" x2="120" y2="203"/>
|
||||
|
||||
<!-- Nodos (posiciones en pentágono) -->
|
||||
<g class="nodo" id="nodo-spock">
|
||||
<circle cx="175" cy="42" r="26"/>
|
||||
<text x="175" y="42" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🖖</text>
|
||||
<text x="175" y="8" text-anchor="middle" class="nodo-label">Spock</text>
|
||||
</g>
|
||||
|
||||
<g class="nodo" id="nodo-piedra">
|
||||
<circle cx="274" cy="112" r="26"/>
|
||||
<text x="274" y="112" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🪨</text>
|
||||
<text x="308" y="116" text-anchor="start" class="nodo-label">Piedra</text>
|
||||
</g>
|
||||
|
||||
<g class="nodo" id="nodo-lagarto">
|
||||
<circle cx="238" cy="228" r="26"/>
|
||||
<text x="238" y="228" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🦎</text>
|
||||
<text x="238" y="272" text-anchor="middle" class="nodo-label">Lagarto</text>
|
||||
</g>
|
||||
|
||||
<g class="nodo" id="nodo-tijera">
|
||||
<circle cx="112" cy="228" r="26"/>
|
||||
<text x="112" y="228" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">✂️</text>
|
||||
<text x="112" y="272" text-anchor="middle" class="nodo-label">Tijera</text>
|
||||
</g>
|
||||
|
||||
<g class="nodo" id="nodo-papel">
|
||||
<circle cx="76" cy="112" r="26"/>
|
||||
<text x="76" y="112" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">📄</text>
|
||||
<text x="42" y="116" text-anchor="end" class="nodo-label">Papel</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<p id="mapa-hint" class="mapa-hint-texto"></p>
|
||||
</section>
|
||||
|
||||
<!-- Ordenador -->
|
||||
<section class="columna" id="ordenador">
|
||||
<header class="cabecera-jugador">
|
||||
<p>Puntuación Ordenador:</p>
|
||||
|
|
@ -59,11 +113,11 @@
|
|||
</header>
|
||||
|
||||
<div class="opciones">
|
||||
<img src="img/piedra-papel-tijera/piedra.png" class="btn-img" alt="Piedra">
|
||||
<img src="img/piedra-papel-tijera/papel.png" class="btn-img" alt="Papel">
|
||||
<img src="img/piedra-papel-tijera/tijera.png" class="btn-img" alt="Tijera">
|
||||
<img src="img/piedra-papel-tijera/lagarto.png" class="btn-img" alt="Lagarto">
|
||||
<img src="img/piedra-papel-tijera/spock.png" class="btn-img" alt="Spock">
|
||||
<div class="game-btn-pc" id="pc-piedra">🪨</div>
|
||||
<div class="game-btn-pc" id="pc-papel">📄</div>
|
||||
<div class="game-btn-pc" id="pc-tijera">✂️</div>
|
||||
<div class="game-btn-pc" id="pc-lagarto">🦎</div>
|
||||
<div class="game-btn-pc" id="pc-spock">🖖</div>
|
||||
</div>
|
||||
|
||||
<p class="grande" id="eleccionordenador">Elección del ordenador</p>
|
||||
|
|
@ -71,11 +125,11 @@
|
|||
|
||||
</main>
|
||||
|
||||
<footer class="py-5 text-center">
|
||||
<footer class="py-5 text-center">
|
||||
<div class="container">
|
||||
<p class="mb-0">© 2026 - Tatiana Villa</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
129
proyectos.html
129
proyectos.html
|
|
@ -10,65 +10,53 @@
|
|||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body class="bg-black text-light">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
|
||||
<span class="text-primary">{</span>tatvil <span class="text-primary">}</span>
|
||||
</a>
|
||||
|
||||
<!-- 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>
|
||||
<a class="navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#menuNav"
|
||||
aria-controls="menuNav" aria-expanded="false" aria-label="Toggle navigation" style="cursor: pointer;">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</a>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</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="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">Oposiciones</h5>
|
||||
<p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
|
||||
|
||||
<div id="countdown" class="mb-2" ></div>
|
||||
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS, JS</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">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>
|
||||
<p class="card-text text-muted">Web de recursos católicos gratuitos.</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JS, PHP, SQL.</p>
|
||||
<a href="https://recursos-catolicos.es" class="btn-link">Saber más →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,8 +66,8 @@
|
|||
<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>
|
||||
<p class="card-text text-muted">Estadísticas de Madrid, L'Ampolla y L'Alfas del Pi.</p>
|
||||
<p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JS.</p>
|
||||
<a href="eltiempo/index.html" class="btn-link">Saber más →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,54 +75,27 @@
|
|||
|
||||
<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>
|
||||
<p class="card-text text-muted card-tecnologia">Java, Spring, Hibernate, MySQL.</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>
|
||||
<p class="card-text text-muted">Juego clásico optimizado para móviles.</p>
|
||||
<p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript.</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>
|
||||
</div> </div>
|
||||
</section>
|
||||
|
||||
<footer class="py-5 text-center">
|
||||
|
|
@ -144,5 +105,7 @@
|
|||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="js/codigo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue