diff --git a/script.js b/script.js
index 009bfb0..120746c 100644
--- a/script.js
+++ b/script.js
@@ -38,6 +38,10 @@ let quizContainerDiv = null; // <-- NUEVO: Referencia al contenedor principal
let timeProgressDiv = null;
let timeBarDiv = null;
let timeRemainingSpan = null;
+let menuToggle = null;
+let sideMenu = null;
+let menuClose = null;
+let collectionNameSpan = null;
let initialTotalRepetitions = 0;
let questionStartTime = null;
@@ -81,6 +85,10 @@ document.addEventListener('DOMContentLoaded', function() {
timeProgressDiv = document.getElementById('time-progress');
timeBarDiv = document.getElementById('time-bar');
timeRemainingSpan = document.getElementById('time-remaining');
+ menuToggle = document.getElementById('menu-toggle');
+ menuClose = document.getElementById('menu-close');
+ collectionNameSpan = document.getElementById('collection-name');
+ sideMenu = document.getElementById('side-menu');
collectionSelect = document.getElementById('collection-select');
changeCollectionButton = document.getElementById('change-collection-button');
collectionModalOverlay = document.getElementById('collection-modal-overlay');
@@ -102,7 +110,8 @@ document.addEventListener('DOMContentLoaded', function() {
!timeProgressDiv || !timeBarDiv || !timeRemainingSpan || !collectionSelect ||
!changeCollectionButton || !collectionModalOverlay || !collectionModal || !confirmCollectionButton ||
!configButton || !configModalOverlay || !configModal || !configRepsOnErrorInput ||
- !configInitialRepsInput || !configThemeSelect || !saveConfigButton || !closeModalButton || !closeModalXButton) {
+ !configInitialRepsInput || !configThemeSelect || !saveConfigButton || !closeModalButton || !closeModalXButton ||
+ !menuToggle || !menuClose || !collectionNameSpan || !sideMenu) {
console.error("Error: No se encontraron elementos esenciales del DOM (quiz, status, inputs, o elementos del modal).");
if(quizDiv) quizDiv.innerHTML = "
Error crítico: Faltan elementos HTML esenciales para el quiz o la configuración.
";
return;
@@ -128,6 +137,16 @@ function setupEventListeners() {
document.getElementById('reset-progress-button')?.addEventListener('click', resetCurrentProgress);
configButton?.addEventListener('click', openConfigModal);
+ // Menú lateral
+ menuToggle?.addEventListener("click", function() {
+ sideMenu.classList.add("open");
+ menuToggle.style.display = "none";
+ });
+ menuClose?.addEventListener("click", function() {
+ sideMenu.classList.remove("open");
+ menuToggle.style.display = "";
+ });
+
// Inputs de archivo
fileInput.addEventListener('change', handleProgressFileSelect);
csvFileInput.addEventListener('change', handleCsvFileSelect);
@@ -211,6 +230,7 @@ async function loadCollections() {
if (!customOption.disabled && saved === 'custom') {
collectionSelect.value = 'custom';
updateUrlForCollection('custom', true);
+ updateCollectionName();
} else {
updateUrlForCollection(null, true);
openCollectionModal();
@@ -220,6 +240,7 @@ async function loadCollections() {
localStorage.setItem(COLLECTION_STORAGE_KEY, pathId);
updateUrlForCollection(pathId, true);
await loadQuestionsFromCollection(pathId);
+ updateCollectionName();
return;
} else {
updateUrlForCollection(null, true);
@@ -228,11 +249,13 @@ async function loadCollections() {
} else if (saved && collectionSelect.querySelector(`option[value="${saved}"]`)) {
collectionSelect.value = saved;
updateUrlForCollection(saved, true);
+ updateCollectionName();
if (saved !== 'custom') {
await loadQuestionsFromCollection(saved);
}
} else if (availableCollections.length > 0) {
collectionSelect.value = availableCollections[0].id;
+ updateCollectionName();
updateUrlForCollection(null, true);
openCollectionModal();
} else {
@@ -293,6 +316,12 @@ function openCollectionModal() {
function closeCollectionModal() {
if (collectionModalOverlay) collectionModalOverlay.classList.add('hidden');
}
+function updateCollectionName() {
+ const opt = collectionSelect.options[collectionSelect.selectedIndex];
+ if (opt) {
+ collectionNameSpan.textContent = opt.textContent;
+ }
+}
function confirmCollectionSelection() {
const id = collectionSelect.value;
@@ -304,6 +333,7 @@ function confirmCollectionSelection() {
localStorage.setItem(COLLECTION_STORAGE_KEY, 'custom');
updateUrlForCollection('custom');
}
+ updateCollectionName();
closeCollectionModal();
}
diff --git a/styles.css b/styles.css
index 2d5364f..59d8a0b 100644
--- a/styles.css
+++ b/styles.css
@@ -104,33 +104,100 @@ body {
min-height: 100vh; /* Asegura que el cuerpo ocupe al menos toda la altura de la vista */
}
-#progress-buttons {
+#side-menu-buttons {
+.main-header {
display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 10px;
- padding: 2px 15px;
- /* background-color: #343a40; */ /* Darker menu background */
- color: black;
- width: 100%;
- /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
- /* position: sticky; top: 0; z-index: 100; */ /* Opción para menú pegajoso */
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem 1rem;
+ background-color: var(--container-bg);
+ color: var(--text-color);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
}
-#progress-buttons button {
- padding: 0.6em 1em;
+#menu-toggle {
+ background: none;
+ border: none;
+ color: var(--text-color);
+ font-size: 1.4rem;
cursor: pointer;
- background-color: #007bff;
- color: #000;
+}
+#menu-toggle:hover {
+ background-color: var(--option-hover-bg);
+}
+.menu-close {
+ background: none;
+ border: none;
+ color: var(--text-color);
+ font-size: 1.4rem;
+ cursor: pointer;
+ margin-bottom: 0.5rem;
+}
+.menu-section {
+ margin-bottom: 0.75rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid var(--option-border);
+}
+.menu-section:last-child {
+ border-bottom: none;
+}
+
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 1rem;
+}
+
+.menu-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.6em 0.8em;
+ cursor: pointer;
+ background-color: transparent;
+ color: var(--text-color);
border: none;
border-radius: 4px;
- font-size: 0.9rem; /* Relativo al font-size de html */
+ font-size: 0.95rem;
transition: background-color 0.2s ease;
- flex-grow: 0; /* No crecer para llenar espacio por defecto */
- flex-shrink: 0; /* No encogerse por defecto */
- flex-basis: auto; /* Tamaño basado en contenido */
+ width: 100%;
+ text-align: left;
+}
+
+.menu-item:hover {
+ background-color: var(--option-hover-bg);
+}
+
+.menu-icon svg {
+ width: 24px;
+ height: 24px;
+}
+}
+
+.side-menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 220px;
+ height: 100%;
+ background-color: var(--container-bg);
+ box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+ transform: translateX(-100%);
+ transition: transform 0.3s ease;
+ z-index: 1050;
+ overflow-y: auto;
+}
+
+.side-menu.open {
+ transform: translateX(0);
}
+#side-menu #side-menu-buttons {
+ flex-direction: column;
+ align-items: stretch;
+}
.modal-content select {
padding: 0.55em 0.8em;
@@ -141,9 +208,6 @@ body {
font-size: 0.9rem;
}
-#progress-buttons button:hover {
- background-color: #0056b3;
-}
.quiz-container {
background-color: var(--container-bg);
@@ -410,7 +474,7 @@ body {
margin: 1.25rem auto;
}
#quiz h2 { font-size: 1.3rem; }
- #progress-buttons button { font-size: 0.85rem; padding: 0.5em 0.8em; }
+ .menu-item { font-size: 0.85rem; padding: 0.5em 0.8em; }
.modal-content select { font-size: 0.85rem; padding: 0.45em 0.7em; }
}
@@ -419,15 +483,10 @@ body {
font-size: 14px; /* Aumentar ligeramente la base para móviles para que no sea tan pequeño */
/* El valor original era 14px, si se sigue viendo pequeño, probar con 15px o 16px */
}
- #progress-buttons {
- padding: 10px 8px;
- gap: 8px;
- }
- #progress-buttons button {
+ .side-menu { width: 80%; }
+ .menu-item {
font-size: 0.85rem; /* Ajustar según necesidad */
padding: 0.5em 0.7em;
- flex-grow: 1; /* Permite que los botones se expandan un poco */
- flex-basis: calc(50% - 4px); /* Dos botones por línea */
}
.quiz-container {