index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto Salud</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Reto Salud</h1>
    </header>
    <main>
        <!-- Pantalla 1: Registro inicial -->
        <section id="pantalla-registro" class="pantalla active">
            <h2>Comienza tu Reto</h2>
            <label for="peso-inicial-input">Peso inicial (kg):</label>
            <input type="number" id="peso-inicial-input" placeholder="Introduce tu peso inicial">
            <button id="comenzar-reto">Comenzar Reto</button>
        </section>

        <!-- Pantalla 2: Plan diario -->
        <section id="pantalla-plan" class="pantalla">
            <h2>Plan Diario</h2>
            <p><strong>Puntos:</strong> <span id="contador-puntos">0</span>/<span id="total-puntos">0</span></p>
            <div id="dia-container"></div>
            <button id="ver-resumen">Ver Resumen</button>
        </section>

        <!-- Pantalla 3: Resumen -->
        <section id="pantalla-resumen" class="pantalla">
            <h2>Resumen del Progreso</h2>
            <ul id="lista-resumen"></ul>
            <button id="volver-plan">Volver al Plan</button>
        </section>
    </main>
    <script src="app.js"></script>
</body>
</html>