From 99b6a775cf0476ae2aa436768230af9c4ffe06a0 Mon Sep 17 00:00:00 2001 From: RoderickGrc <121266955+RoderickGrc@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:08:09 -0600 Subject: [PATCH 1/3] Move control buttons to slide-in side menu --- index.html | 28 +++++++++++++++------------- script.js | 17 ++++++++++++++++- styles.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 6dc909f..e26e1e3 100644 --- a/index.html +++ b/index.html @@ -11,22 +11,24 @@ - -
- - - - + +
+
diff --git a/script.js b/script.js index 009bfb0..245204c 100644 --- 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 menuToggle = null; +let sideMenu = null; let initialTotalRepetitions = 0; let questionStartTime = null; @@ -81,6 +83,8 @@ document.addEventListener('DOMContentLoaded', function() { timeProgressDiv = document.getElementById('time-progress'); timeBarDiv = document.getElementById('time-bar'); timeRemainingSpan = document.getElementById('time-remaining'); + menuToggle = document.getElementById('menu-toggle'); + sideMenu = document.getElementById('side-menu'); collectionSelect = document.getElementById('collection-select'); changeCollectionButton = document.getElementById('change-collection-button'); collectionModalOverlay = document.getElementById('collection-modal-overlay'); @@ -102,7 +106,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 || !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 +133,16 @@ function setupEventListeners() { document.getElementById('reset-progress-button')?.addEventListener('click', resetCurrentProgress); configButton?.addEventListener('click', openConfigModal); + // Menú lateral + menuToggle?.addEventListener('click', function() { + sideMenu.classList.toggle('open'); + }); + document.addEventListener('click', function(event) { + if(sideMenu.classList.contains('open') && !sideMenu.contains(event.target) && event.target !== menuToggle) { + sideMenu.classList.remove('open'); + } + }); + // Inputs de archivo fileInput.addEventListener('change', handleProgressFileSelect); csvFileInput.addEventListener('change', handleCsvFileSelect); diff --git a/styles.css b/styles.css index 2d5364f..9ea8001 100644 --- a/styles.css +++ b/styles.css @@ -131,6 +131,50 @@ body { flex-basis: auto; /* Tamaño basado en contenido */ } +#menu-toggle { + position: fixed; + top: 10px; + left: 10px; + z-index: 1100; + background-color: #007bff; + color: #000; + border: none; + border-radius: 4px; + padding: 0.5em 0.7em; + cursor: pointer; +} + +#menu-toggle:hover { + background-color: #0056b3; +} + +.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 #progress-buttons { + flex-direction: column; + align-items: stretch; + padding: 1rem; +} + +#side-menu #progress-buttons button { + width: 100%; +} .modal-content select { padding: 0.55em 0.8em; From daa0da3b98e10dfbc9cfc0e90cf722faf810fa6e Mon Sep 17 00:00:00 2001 From: RoderickGrc <121266955+RoderickGrc@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:58:56 -0600 Subject: [PATCH 2/3] Refine side menu layout and style --- index.html | 76 +++++++++++++++++++++++++++++++++++++++++++++++++----- styles.css | 61 +++++++++++++++++++------------------------ 2 files changed, 95 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index e26e1e3..89150bb 100644 --- a/index.html +++ b/index.html @@ -13,20 +13,82 @@
diff --git a/styles.css b/styles.css index 9ea8001..38d003a 100644 --- a/styles.css +++ b/styles.css @@ -104,31 +104,36 @@ body { min-height: 100vh; /* Asegura que el cuerpo ocupe al menos toda la altura de la vista */ } -#progress-buttons { +#side-menu-buttons { 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 */ + flex-direction: column; + gap: 0.5rem; + padding: 1rem; } -#progress-buttons button { - padding: 0.6em 1em; +.menu-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.6em 0.8em; cursor: pointer; - background-color: #007bff; - color: #000; + 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; } #menu-toggle { @@ -166,14 +171,9 @@ body { transform: translateX(0); } -#side-menu #progress-buttons { +#side-menu #side-menu-buttons { flex-direction: column; align-items: stretch; - padding: 1rem; -} - -#side-menu #progress-buttons button { - width: 100%; } .modal-content select { @@ -185,9 +185,6 @@ body { font-size: 0.9rem; } -#progress-buttons button:hover { - background-color: #0056b3; -} .quiz-container { background-color: var(--container-bg); @@ -454,7 +451,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; } } @@ -463,15 +460,9 @@ 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 { + .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 { From 927d20460dca2a55f1a1affac4a3126f1d923a16 Mon Sep 17 00:00:00 2001 From: RoderickGrc <121266955+RoderickGrc@users.noreply.github.com> Date: Mon, 16 Jun 2025 11:33:44 -0600 Subject: [PATCH 3/3] Add header and sidebar sections --- index.html | 12 +++++++++++- script.js | 29 +++++++++++++++++++++------- styles.css | 56 ++++++++++++++++++++++++++++++++++++++---------------- 3 files changed, 73 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 89150bb..cb02a72 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,14 @@ - +
+ + Colección +
diff --git a/script.js b/script.js index 245204c..120746c 100644 --- a/script.js +++ b/script.js @@ -40,6 +40,8 @@ let timeBarDiv = null; let timeRemainingSpan = null; let menuToggle = null; let sideMenu = null; +let menuClose = null; +let collectionNameSpan = null; let initialTotalRepetitions = 0; let questionStartTime = null; @@ -84,6 +86,8 @@ document.addEventListener('DOMContentLoaded', function() { 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'); @@ -107,7 +111,7 @@ document.addEventListener('DOMContentLoaded', function() { !changeCollectionButton || !collectionModalOverlay || !collectionModal || !confirmCollectionButton || !configButton || !configModalOverlay || !configModal || !configRepsOnErrorInput || !configInitialRepsInput || !configThemeSelect || !saveConfigButton || !closeModalButton || !closeModalXButton || - !menuToggle || !sideMenu) { + !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; @@ -134,13 +138,13 @@ function setupEventListeners() { configButton?.addEventListener('click', openConfigModal); // Menú lateral - menuToggle?.addEventListener('click', function() { - sideMenu.classList.toggle('open'); + menuToggle?.addEventListener("click", function() { + sideMenu.classList.add("open"); + menuToggle.style.display = "none"; }); - document.addEventListener('click', function(event) { - if(sideMenu.classList.contains('open') && !sideMenu.contains(event.target) && event.target !== menuToggle) { - sideMenu.classList.remove('open'); - } + menuClose?.addEventListener("click", function() { + sideMenu.classList.remove("open"); + menuToggle.style.display = ""; }); // Inputs de archivo @@ -226,6 +230,7 @@ async function loadCollections() { if (!customOption.disabled && saved === 'custom') { collectionSelect.value = 'custom'; updateUrlForCollection('custom', true); + updateCollectionName(); } else { updateUrlForCollection(null, true); openCollectionModal(); @@ -235,6 +240,7 @@ async function loadCollections() { localStorage.setItem(COLLECTION_STORAGE_KEY, pathId); updateUrlForCollection(pathId, true); await loadQuestionsFromCollection(pathId); + updateCollectionName(); return; } else { updateUrlForCollection(null, true); @@ -243,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 { @@ -308,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; @@ -319,6 +333,7 @@ function confirmCollectionSelection() { localStorage.setItem(COLLECTION_STORAGE_KEY, 'custom'); updateUrlForCollection('custom'); } + updateCollectionName(); closeCollectionModal(); } diff --git a/styles.css b/styles.css index 38d003a..59d8a0b 100644 --- a/styles.css +++ b/styles.css @@ -105,6 +105,45 @@ body { } #side-menu-buttons { +.main-header { + display: flex; + 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; +} + +#menu-toggle { + background: none; + border: none; + color: var(--text-color); + font-size: 1.4rem; + cursor: pointer; +} +#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; @@ -135,22 +174,6 @@ body { width: 24px; height: 24px; } - -#menu-toggle { - position: fixed; - top: 10px; - left: 10px; - z-index: 1100; - background-color: #007bff; - color: #000; - border: none; - border-radius: 4px; - padding: 0.5em 0.7em; - cursor: pointer; -} - -#menu-toggle:hover { - background-color: #0056b3; } .side-menu { @@ -460,6 +483,7 @@ 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 */ } + .side-menu { width: 80%; } .menu-item { font-size: 0.85rem; /* Ajustar según necesidad */ padding: 0.5em 0.7em;