RoderickGrc · RoderickGrc · Jun 16, 2025
diff --git a/404.html b/404.html
@@ -19,7 +19,7 @@
     <aside id="sidebar" class="sidebar">
         <button id="close-sidebar" class="sidebar-toggle close-sidebar" aria-label="Cerrar menú">&#9776;</button>
         <div class="menu-section">
-            <a href="/" id="home-link">Inicio</a>
+            <a href="/home" id="home-link">Inicio</a>
             <button id="change-collection-button">Cambiar colección</button>
         </div>
         <div class="menu-section">
@@ -37,6 +37,10 @@
             <button id="login-button">Iniciar sesión</button>
         </div>
     </aside>
+    <div id="home-container" class="home-container hidden">
+        <h1>¿Qué estudiaremos hoy?</h1>
+        <div id="home-carousel" class="home-carousel"></div>
+    </div>
     <div class="quiz-container">
         <div id="quiz"></div>
         <!-- Elemento para mostrar mensajes de estado (opcional) -->

diff --git a/README.md b/README.md
@@ -19,8 +19,10 @@ Este proyecto es un quiz interactivo implementado con HTML, CSS y JavaScript pur
 ## Uso rápido
 
 1. Clona el repositorio y abre `index.html` en un navegador web moderno.
-2. El quiz cargará por defecto el archivo `questions.csv` incluido en el repositorio.
-3. Utiliza los botones de la parte superior para:
+2. Al iniciar se muestra una pantalla de inicio accesible también en `/home` con las colecciones disponibles.
+   Tanto en esta pantalla como en el selector de colecciones se muestra la materia asociada a cada una.
+3. El quiz cargará por defecto el archivo `questions.csv` incluido en el repositorio.
+4. Utiliza los botones de la parte superior para:
    - Guardar o cargar el progreso (archivo JSON).
    - Cargar un CSV diferente con tus propias preguntas.
    - Reiniciar el avance actual.
@@ -32,7 +34,7 @@ Si se desea utilizar un CSV propio, consulta `doc/prompt.md` para conocer el for
 
 ## Estructura del repositorio
 
-- `index.html` – vista principal del quiz.
+- `index.html` – página principal que muestra el home y el quiz.
 - `script.js` – lógica de funcionamiento y manejo de estado.
 - `styles.css` – estilos de la interfaz.
 - `questions.csv` – ejemplo de preguntas en formato CSV.

diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
     <aside id="sidebar" class="sidebar">
         <button id="close-sidebar" class="sidebar-toggle close-sidebar" aria-label="Cerrar menú">&#9776;</button>
         <div class="menu-section">
-            <a href="/" id="home-link">Inicio</a>
+            <a href="/home" id="home-link">Inicio</a>
             <button id="change-collection-button">Cambiar colección</button>
         </div>
         <div class="menu-section">
@@ -37,6 +37,10 @@
             <button id="login-button">Iniciar sesión</button>
         </div>
     </aside>
+    <div id="home-container" class="home-container hidden">
+        <h1>¿Qué estudiaremos hoy?</h1>
+        <div id="home-carousel" class="home-carousel"></div>
+    </div>
     <div class="quiz-container">
         <div id="quiz"></div>
         <!-- Elemento para mostrar mensajes de estado (opcional) -->

diff --git a/script.js b/script.js
@@ -38,6 +38,8 @@ let quizContainerDiv = null; // <-- NUEVO: Referencia al contenedor principal
 let timeProgressDiv = null;
 let timeBarDiv = null;
 let timeRemainingSpan = null;
+let homeContainer = null;
+let homeCarousel = null;
 let sidebar = null;
 let openSidebarButton = null;
 let closeSidebarButton = null;
@@ -73,6 +75,46 @@ function updateUrlForCollection(id, replace = false) {
     }
 }
 
+function isHomePath() {
+    const path = window.location.pathname.replace(/\/+$/, '');
+    return path === '' || path === '/home';
+}
+
+function showHome() {
+    homeContainer?.classList.remove('hidden');
+    quizContainerDiv?.classList.add('hidden');
+    timeProgressDiv?.classList.add('hidden');
+}
+
+function showQuiz() {
+    homeContainer?.classList.add('hidden');
+    quizContainerDiv?.classList.remove('hidden');
+    timeProgressDiv?.classList.remove('hidden');
+}
+
+function populateHomeCarousel() {
+    if (!homeCarousel) return;
+    homeCarousel.innerHTML = '';
+    availableCollections.forEach(col => {
+        const card = document.createElement('div');
+        card.className = 'collection-card';
+        card.innerHTML = `
+            <span class="collection-subject">${col.materia || ''}</span>
+            <h3>${col.nombre}</h3>
+            <p>${col.descripcion || ''}</p>
+        `;
+        card.addEventListener('click', () => {
+            showQuiz();
+            updateUrlForCollection(col.id);
+            collectionSelect.value = col.id;
+            localStorage.setItem(COLLECTION_STORAGE_KEY, col.id);
+            loadQuestionsFromCollection(col.id);
+            updateCollectionTitleById(col.id);
+        });
+        homeCarousel.appendChild(card);
+    });
+}
+
 // --- Inicialización ---
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -85,6 +127,8 @@ document.addEventListener('DOMContentLoaded', function() {
     timeProgressDiv = document.getElementById('time-progress');
     timeBarDiv = document.getElementById('time-bar');
     timeRemainingSpan = document.getElementById('time-remaining');
+    homeContainer = document.getElementById('home-container');
+    homeCarousel = document.getElementById('home-carousel');
     collectionSelect = document.getElementById('collection-select');
     changeCollectionButton = document.getElementById('change-collection-button');
     collectionModalOverlay = document.getElementById('collection-modal-overlay');
@@ -112,7 +156,7 @@ document.addEventListener('DOMContentLoaded', function() {
         !changeCollectionButton || !collectionModalOverlay || !collectionModal || !confirmCollectionButton ||
         !configButton || !configModalOverlay || !configModal || !configRepsOnErrorInput ||
         !configInitialRepsInput || !configThemeSelect || !saveConfigButton || !closeModalButton || !closeModalXButton ||
-        !sidebar || !openSidebarButton || !closeSidebarButton || !collectionTitleSpan) {
+        !sidebar || !openSidebarButton || !closeSidebarButton || !collectionTitleSpan || !homeContainer || !homeCarousel) {
         console.error("Error: No se encontraron elementos esenciales del DOM (quiz, status, inputs, o elementos del modal).");
         if(quizDiv) quizDiv.innerHTML = "<p class='error-message'>Error crítico: Faltan elementos HTML esenciales para el quiz o la configuración.</p>";
         return;
@@ -128,6 +172,13 @@ document.addEventListener('DOMContentLoaded', function() {
     window.addEventListener('beforeunload', saveState);
     document.addEventListener('visibilitychange', handleVisibilityChange);
     autosaveIntervalId = setInterval(saveState, 10000);
+    window.addEventListener('popstate', () => {
+        if (isHomePath()) {
+            showHome();
+        } else {
+            showQuiz();
+        }
+    });
 });
 
 function setupEventListeners() {
@@ -207,7 +258,8 @@ async function loadCollections() {
         availableCollections.forEach(c => {
             const opt = document.createElement('option');
             opt.value = c.id;
-            opt.textContent = c.nombre;
+            const name = c.materia ? `${c.materia} - ${c.nombre}` : c.nombre;
+            opt.textContent = name;
             collectionSelect.appendChild(opt);
         });
         customOption = document.createElement('option');
@@ -216,6 +268,13 @@ async function loadCollections() {
         customOption.disabled = true;
         collectionSelect.appendChild(customOption);
 
+        populateHomeCarousel();
+
+        if (isHomePath()) {
+            showHome();
+            return;
+        }
+
         const saved = localStorage.getItem(COLLECTION_STORAGE_KEY);
         const pathId = getCollectionIdFromPath();
 
@@ -339,7 +398,12 @@ function updateCollectionTitleById(id) {
         collectionTitleSpan.textContent = 'Personalizado';
     } else {
         const col = availableCollections.find(c => c.id === id);
-        collectionTitleSpan.textContent = col ? col.nombre : 'Colección';
+        if (col) {
+            const title = col.materia ? `<span class="collection-subject">${col.materia}</span> - ${col.nombre}` : col.nombre;
+            collectionTitleSpan.innerHTML = title;
+        } else {
+            collectionTitleSpan.textContent = 'Colección';
+        }
     }
 }
 

diff --git a/styles.css b/styles.css
@@ -38,6 +38,7 @@
     --status-error-bg: #f8d7da;
     --status-error-color: #721c24;
     --status-error-border: #f5c6cb;
+    --subject-color: #d63384;
     --modal-bg: #fff;
 }
 
@@ -81,6 +82,7 @@ body.dark-mode {
     --partial-selection-color: #fff2b3;
     --partial-selection-border: #b1922c;
     --modal-bg: #2a2a2a;
+    --subject-color: #e670a5;
 }
 
 html {
@@ -765,3 +767,41 @@ body.sidebar-open #open-sidebar {
     border-radius: 4px;
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
+
+/* --- Estilos para la pantalla de inicio --- */
+.home-container {
+    width: 90%;
+    max-width: 1000px;
+    margin: 2rem auto;
+    text-align: center;
+}
+
+.home-carousel {
+    display: flex;
+    overflow-x: auto;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.collection-card {
+    flex: 0 0 auto;
+    background-color: var(--container-bg);
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    padding: 1rem;
+    width: 220px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: border-color 0.3s ease;
+}
+
+.collection-card:hover {
+    border-color: var(--option-selected-border);
+}
+
+.collection-subject {
+    font-weight: bold;
+    color: var(--subject-color);
+    display: block;
+    margin-bottom: 0.5rem;
+}