<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Rutina Espalda · Pecho · Core</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
--bg: #0f172a;
--card: #111827;
--accent: #22c55e;
--accent-soft: rgba(34, 197, 94, 0.2);
--text: #f9fafb;
--muted: #9ca3af;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", sans-serif;
}
body {
background: radial-gradient(circle at top, #1f2937 0, #020617 55%);
color: var(--text);
min-height: 100vh;
display: flex;
justify-content: center;
padding: 1rem;
}
.app {
width: 100%;
max-width: 480px;
background: linear-gradient(145deg, #020617, #020617dd);
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.7);
padding: 1.2rem 1.2rem 1rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
}
.title-group h1 {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.title-group p {
font-size: 0.78rem;
color: var(--muted);
}
.tag {
font-size: 0.7rem;
border-radius: 999px;
padding: 0.25rem 0.75rem;
background: rgba(148, 163, 184, 0.15);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
border: 1px solid rgba(148, 163, 184, 0.3);
white-space: nowrap;
}
.progress-bar {
position: relative;
height: 6px;
border-radius: 999px;
background: rgba(31, 41, 55, 0.9);
overflow: hidden;
margin-top: 0.1rem;
}
.progress-fill {
position: absolute;
inset: 0;
width: 0%;
background: linear-gradient(90deg, #22c55e, #84cc16);
transition: width 0.2s ease-out;
}
.exercise-card {
background: radial-gradient(circle at top left, #111827, #020617);
border-radius: 16px;
border: 1px solid rgba(55, 65, 81, 0.9);
padding: 0.9rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.exercise-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
}
.exercise-name {
font-weight: 600;
font-size: 1rem;
}
.pill {
font-size: 0.7rem;
border-radius: 999px;
padding: 0.2rem 0.6rem;
background: rgba(34, 197, 94, 0.12);
color: #bbf7d0;
border: 1px solid rgba(34, 197, 94, 0.4);
}
.exercise-sub {
font-size: 0.78rem;
color: var(--muted);
}
.images-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
.img-box {
background: radial-gradient(circle, #020617, #020617);
border-radius: 14px;
border: 1px solid rgba(31, 41, 55, 0.9);
padding: 0.35rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.img-box-label {
font-size: 0.7rem;
color: var(--muted);
text-align: center;
}
.img-wrapper {
aspect-ratio: 4 / 3;
border-radius: 10px;
overflow: hidden;
background: radial-gradient(circle at top, #111827, #020617);
display: flex;
align-items: center;
justify-content: center;
}
.img-wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.img-placeholder {
font-size: 0.7rem;
color: var(--muted);
text-align: center;
padding: 0.4rem;
}
.timer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.1rem;
}
.timer-time {
font-variant-numeric: tabular-nums;
font-size: 1.4rem;
font-weight: 600;
}
.timer-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.controls-main {
display: flex;
gap: 0.55rem;
margin-top: 0.1rem;
}
button {
border: none;
border-radius: 999px;
padding: 0.55rem 0.9rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.08s ease,
background 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
button [Link] {
font-size: 1.1rem;
}
.btn-primary {
flex: 1.3;
background: linear-gradient(135deg, #22c55e, #84cc16);
color: #022c22;
box-shadow: 0 14px 30px rgba(34, 197, 94, 0.35);
}
.btn-secondary {
flex: 1;
background: rgba(15, 23, 42, 0.95);
color: var(--muted);
border: 1px solid rgba(75, 85, 99, 0.9);
}
button:active {
transform: translateY(1px) scale(0.98);
box-shadow: none;
}
.nav-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.1rem;
gap: 0.4rem;
}
.nav-row small {
font-size: 0.75rem;
color: var(--muted);
}
.btn-ghost {
background: transparent;
border-radius: 999px;
border: 1px solid rgba(55, 65, 81, 0.7);
color: var(--muted);
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
.desc {
font-size: 0.8rem;
color: var(--muted);
line-height: 1.35;
}
footer {
margin-top: 0.1rem;
font-size: 0.7rem;
color: var(--muted);
text-align: center;
}
@media (max-width: 480px) {
.app {
padding: 1rem 0.8rem 0.8rem;
}
.exercise-card {
padding: 0.75rem;
}
.img-box-label {
font-size: 0.66rem;
}
}
</style>
</head>
<body>
<div class="app">
<header>
<div class="title-group">
<h1>Rutina 20′ Casa</h1>
<p>Espalda · Pecho · Core · Solo esterilla</p>
<div class="progress-bar">
<div id="progressFill" class="progress-fill"></div>
</div>
</div>
<div class="tag">20 ejercicios</div>
</header>
<main class="exercise-card">
<div class="exercise-header">
<div>
<div id="exerciseName" class="exercise-name"></div>
<div id="exerciseSub" class="exercise-sub"></div>
</div>
<div id="exercisePill" class="pill"></div>
</div>
<div class="images-row">
<div class="img-box">
<div class="img-box-label">Posición inicial</div>
<div class="img-wrapper">
<img id="imgStart" alt="Posición inicial" />
<div id="imgStartPlaceholder" class="img-placeholder" hidden>
Coloca aquí la imagen de inicio<br /><small
>(/img/…-[Link])</small
>
</div>
</div>
</div>
<div class="img-box">
<div class="img-box-label">Posición final / movimiento</div>
<div class="img-wrapper">
<img id="imgEnd" alt="Posición final" />
<div id="imgEndPlaceholder" class="img-placeholder" hidden>
Coloca aquí la imagen final<br /><small
>(/img/…-[Link])</small
>
</div>
</div>
</div>
</div>
<p id="exerciseDesc" class="desc"></p>
<div class="timer-row">
<div>
<div class="timer-label">Tiempo</div>
<div id="timerTime" class="timer-time">00:40</div>
</div>
<div>
<div class="timer-label">Ejercicio</div>
<div id="timerLabel" class="exercise-sub"></div>
</div>
</div>
<div class="controls-main">
<button id="btnStartPause" class="btn-primary">
<span class="emoji"> </span>
<span>Empezar</span>
</button>
<button id="btnSkip" class="btn-secondary">
<span class="emoji"> </span>
<span>Salta</span>
</button>
</div>
<div class="nav-row">
<button id="btnPrev" class="btn-ghost">◀ Anterior</button>
<small id="exerciseCounter"></small>
<button id="btnNext" class="btn-ghost">Siguiente ▶</button>
</div>
</main>
<footer>
Consejo: deja el móvil apoyado horizontalmente y solo mira las dos
imágenes de cada ejercicio mientras suena el temporizador.
</footer>
</div>
<script>
const exercises = [
// PECHO
{
name: "Flexiones clásicas",
area: "Pecho + core",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Cuerpo en línea recta, manos bajo hombros. Baja el pecho hacia el suelo y sube de
nuevo con el abdomen firme."
},
{
name: "Flexiones con rodillas",
area: "Pecho (fácil)",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Igual que la flexión clásica pero con rodillas apoyadas. Mantén la espalda recta y no
hundas la cadera."
},
{
name: "Flexiones inclinadas",
area: "Pecho (muy fácil)",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Manos en una superficie elevada (pared, mesa o cama). Cuerpo inclinado y recto,
flexiona codos y acércate a la superficie."
},
{
name: "Flexiones manos abiertas",
area: "Pecho externo",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Manos más abiertas que los hombros, baja el pecho entre las manos y sube
controlado."
},
// ESPALDA + POSTERIOR
{
name: "Bird-dog",
area: "Espalda + core",
type: "estabilidad",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"A cuatro apoyos, estira brazo y pierna contraria sin mover la cadera. Alterna lados de
forma controlada."
},
{
name: "Superman",
area: "Espalda baja",
type: "fuerza suave",
durationSec: 30,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Tumbado boca abajo, eleva ligeramente pecho y brazos/ piernas al mismo tiempo.
Mantén 1–2 segundos y baja."
},
{
name: "Puente de glúteos",
area: "Glúteo + lumbar",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Boca arriba, rodillas flexionadas. Empuja con los talones y sube la cadera hasta alinear
rodillas–cadera–hombros."
},
{
name: "Puente de glúteos a una pierna",
area: "Glúteo unilateral",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Desde el puente, eleva una pierna y sube/baja la cadera con la pierna de apoyo.
Cambia de lado a mitad de tiempo."
},
// CORE / PLANCHAS
{
name: "Plancha frontal",
area: "Core completo",
type: "estabilidad",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Antebrazos en el suelo y cuerpo recto de cabeza a pies. No hundas la cadera; piensa
en acercar el ombligo a la espalda."
},
{
name: "Plancha lateral derecha",
area: "Oblicuos",
type: "estabilidad",
durationSec: 30,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Apoya antebrazo derecho y pies o rodillas alineados. Eleva la cadera hasta formar una
línea recta."
},
{
name: "Plancha lateral izquierda",
area: "Oblicuos",
type: "estabilidad",
durationSec: 30,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Misma posición pero sobre el lado izquierdo, elevando la cadera."
},
{
name: "Plancha superman",
area: "Core avanzado",
type: "estabilidad",
durationSec: 30,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Desde la plancha frontal, adelanta ligeramente los brazos o una mano y mantén el
cuerpo firme."
},
// ABDOMEN (MÁS DINÁMICO)
{
name: "Dead bug",
area: "Core profundo",
type: "control",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Boca arriba, brazos al techo, rodillas a 90°. Estira brazo y pierna contraria sin
despegar la zona lumbar del suelo."
},
{
name: "Crunch abdominal",
area: "Abdomen superior",
type: "fuerza",
durationSec: 30,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Eleva cabeza y parte alta de la espalda unos centímetros. No tires del cuello; mira al
techo."
},
{
name: "Elevaciones de piernas",
area: "Abdomen inferior",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Levanta las piernas juntas y baja despacio sin apoyar del todo, manteniendo la zona
lumbar controlada."
},
{
name: "Tijeras",
area: "Core y flexores",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Boca arriba, piernas estiradas a pocos cm del suelo. Alterna subir una y bajar la otra
como unas tijeras."
},
{
name: "Abdominales bicicleta",
area: "Oblicuos + core",
type: "fuerza",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Lleva codo derecho a rodilla izquierda mientras estiras la otra pierna y alterna de
forma continua."
},
{
name: "Escaladores (mountain climbers)",
area: "Cardio + core",
type: "dinámico",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Desde la posición de flexión, lleva las rodillas alternas al pecho a un ritmo medio."
},
// EXTRA ESPALDA / MOVILIDAD
{
name: "Gato–camello",
area: "Movilidad columna",
type: "movilidad",
durationSec: 40,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"A cuatro apoyos, alterna redondear la espalda (como un gato) y hundir pecho/sacar
culete (como un camello)."
},
{
name: "Extensión torácica en suelo",
area: "Espalda alta",
type: "movilidad",
durationSec: 30,
startImg: "img/[Link]",
endImg: "img/[Link]",
description:
"Boca abajo con manos a la altura de los hombros, eleva suavemente el pecho sin
colapsar la zona lumbar."
}
];
let currentIndex = 0;
let timer = null;
let remaining = exercises[0].durationSec;
let running = false;
const nameEl = [Link]("exerciseName");
const subEl = [Link]("exerciseSub");
const pillEl = [Link]("exercisePill");
const descEl = [Link]("exerciseDesc");
const imgStart = [Link]("imgStart");
const imgEnd = [Link]("imgEnd");
const imgStartPh = [Link]("imgStartPlaceholder");
const imgEndPh = [Link]("imgEndPlaceholder");
const counterEl = [Link]("exerciseCounter");
const timerTime = [Link]("timerTime");
const timerLabel = [Link]("timerLabel");
const btnStartPause = [Link]("btnStartPause");
const btnSkip = [Link]("btnSkip");
const btnPrev = [Link]("btnPrev");
const btnNext = [Link]("btnNext");
const progressFill = [Link]("progressFill");
function formatTime(sec) {
const m = String([Link](sec / 60)).padStart(2, "0");
const s = String(sec % 60).padStart(2, "0");
return `${m}:${s}`;
}
function updateProgress() {
const percent = ((currentIndex + 1) / [Link]) * 100;
[Link] = `${percent}%`;
}
function loadImage(imgElement, placeholderElement, src) {
if (!src) {
[Link] = true;
[Link] = false;
return;
}
const img = new Image();
[Link] = () => {
[Link] = src;
[Link] = false;
[Link] = true;
};
[Link] = () => {
[Link] = true;
[Link] = false;
};
[Link] = src;
}
function renderExercise(index) {
const ex = exercises[index];
currentIndex = index;
remaining = [Link];
[Link] = formatTime(remaining);
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = `${index + 1} / ${[Link]}`;
[Link] = "Ejercicio activo";
[Link]("span:nth-child(2)").textContent = "Empezar";
[Link](".emoji").textContent = " ";
running = false;
clearInterval(timer);
updateProgress();
loadImage(imgStart, imgStartPh, [Link]);
loadImage(imgEnd, imgEndPh, [Link]);
}
function startTimer() {
if (running) return;
running = true;
[Link]("span:nth-child(2)").textContent = "Pausa";
[Link](".emoji").textContent = " ";
timer = setInterval(() => {
remaining -= 1;
if (remaining <= 0) {
clearInterval(timer);
running = false;
remaining = 0;
[Link] = "00:00";
[Link] = "¡Completado!";
setTimeout(() => {
if (currentIndex < [Link] - 1) {
renderExercise(currentIndex + 1);
startTimer();
}
}, 800);
} else {
[Link] = formatTime(remaining);
}
}, 1000);
}
function pauseTimer() {
running = false;
clearInterval(timer);
[Link]("span:nth-child(2)").textContent = "Reanudar";
[Link](".emoji").textContent = " ";
}
[Link]("click", () => {
if (!running) startTimer();
else pauseTimer();
});
[Link]("click", () => {
clearInterval(timer);
running = false;
if (currentIndex < [Link] - 1) {
renderExercise(currentIndex + 1);
} else {
renderExercise(0);
}
});
[Link]("click", () => {
clearInterval(timer);
running = false;
const prev = currentIndex === 0 ? [Link] - 1 : currentIndex - 1;
renderExercise(prev);
});
[Link]("click", () => {
clearInterval(timer);
running = false;
const next = currentIndex === [Link] - 1 ? 0 : currentIndex + 1;
renderExercise(next);
});
// Inicial
renderExercise(0);
</script>
</body>
</html>