diff --git a/index.html b/index.html
index 6dc909f..e776a9c 100644
--- a/index.html
+++ b/index.html
@@ -11,22 +11,32 @@
-
-
diff --git a/script.js b/script.js
index 009bfb0..ebf004b 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 sidebar = null;
+let openSidebarButton = null;
+let closeSidebarButton = null;
+let collectionTitleSpan = null;
let initialTotalRepetitions = 0;
let questionStartTime = null;
@@ -87,6 +91,11 @@ document.addEventListener('DOMContentLoaded', function() {
collectionModal = document.getElementById('collection-modal');
confirmCollectionButton = document.getElementById('confirm-collection-button');
+ sidebar = document.getElementById('sidebar');
+ openSidebarButton = document.getElementById('open-sidebar');
+ closeSidebarButton = document.getElementById('close-sidebar');
+ collectionTitleSpan = document.getElementById('collection-title');
+
// Referencias para el modal de configuración
configButton = document.getElementById('config-button');
configModalOverlay = document.getElementById('config-modal-overlay');
@@ -102,7 +111,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 ||
+ !sidebar || !openSidebarButton || !closeSidebarButton || !collectionTitleSpan) {
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;
@@ -147,6 +157,9 @@ function setupEventListeners() {
closeConfigModal();
}
});
+
+ openSidebarButton?.addEventListener('click', openSidebar);
+ closeSidebarButton?.addEventListener('click', closeSidebar);
}
// --- Carga de Datos (CSV y Estado) ---
@@ -220,10 +233,12 @@ async function loadCollections() {
localStorage.setItem(COLLECTION_STORAGE_KEY, pathId);
updateUrlForCollection(pathId, true);
await loadQuestionsFromCollection(pathId);
+ updateCollectionTitleById(pathId);
return;
} else {
updateUrlForCollection(null, true);
openCollectionModal();
+ updateCollectionTitleById(null);
}
} else if (saved && collectionSelect.querySelector(`option[value="${saved}"]`)) {
collectionSelect.value = saved;
@@ -231,10 +246,13 @@ async function loadCollections() {
if (saved !== 'custom') {
await loadQuestionsFromCollection(saved);
}
+ updateCollectionTitleById(saved);
} else if (availableCollections.length > 0) {
collectionSelect.value = availableCollections[0].id;
updateUrlForCollection(null, true);
openCollectionModal();
+ updateCollectionTitleById(null);
+ updateCollectionTitleById(availableCollections[0].id);
} else {
updateUrlForCollection(null, true);
openCollectionModal();
@@ -294,15 +312,48 @@ function closeCollectionModal() {
if (collectionModalOverlay) collectionModalOverlay.classList.add('hidden');
}
+function openSidebar() {
+ sidebar?.classList.add('open');
+ document.body.classList.add('sidebar-open');
+ document.addEventListener('click', handleDocumentClick);
+}
+
+function closeSidebar() {
+ sidebar?.classList.remove('open');
+ document.body.classList.remove('sidebar-open');
+ document.removeEventListener('click', handleDocumentClick);
+}
+
+function handleDocumentClick(event) {
+ if (!sidebar?.classList.contains('open')) return;
+ if (window.innerWidth > 768) return;
+ if (sidebar.contains(event.target) || openSidebarButton.contains(event.target)) {
+ return;
+ }
+ closeSidebar();
+}
+
+function updateCollectionTitleById(id) {
+ if (!collectionTitleSpan) return;
+ if (id === 'custom') {
+ collectionTitleSpan.textContent = 'Personalizado';
+ } else {
+ const col = availableCollections.find(c => c.id === id);
+ collectionTitleSpan.textContent = col ? col.nombre : 'Colección';
+ }
+}
+
function confirmCollectionSelection() {
const id = collectionSelect.value;
if (id !== 'custom') {
localStorage.setItem(COLLECTION_STORAGE_KEY, id);
updateUrlForCollection(id);
loadQuestionsFromCollection(id);
+ updateCollectionTitleById(id);
} else {
localStorage.setItem(COLLECTION_STORAGE_KEY, 'custom');
updateUrlForCollection('custom');
+ updateCollectionTitleById('custom');
}
closeCollectionModal();
}
@@ -1438,6 +1489,7 @@ function handleCsvFileSelect(event) {
collectionSelect.value = 'custom';
localStorage.setItem(COLLECTION_STORAGE_KEY, 'custom');
updateUrlForCollection('custom');
+ updateCollectionTitleById('custom');
}
}
};
diff --git a/styles.css b/styles.css
index 2d5364f..55e67f1 100644
--- a/styles.css
+++ b/styles.css
@@ -104,33 +104,96 @@ body {
min-height: 100vh; /* Asegura que el cuerpo ocupe al menos toda la altura de la vista */
}
-#progress-buttons {
+/* --- Encabezado y Sidebar --- */
+.main-header {
display: flex;
- flex-wrap: wrap;
- justify-content: center;
+ align-items: 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 */
+ padding: 0.5rem 1rem;
+ background-color: var(--container-bg);
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ position: relative;
+ z-index: 99;
}
-#progress-buttons button {
- padding: 0.6em 1em;
+#open-sidebar {
+ /* styles moved to .sidebar-toggle */
+}
+
+.sidebar-toggle {
+ background: none;
+ border: none;
+ color: var(--text-color);
+ font-size: 1.5rem;
cursor: pointer;
- background-color: #007bff;
- color: #000;
+}
+
+#collection-title {
+ font-weight: bold;
+}
+
+.sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 240px;
+ height: 100%;
+ background-color: #222;
+ color: #fff;
+ padding-top: 1rem;
+ transform: translateX(-100%);
+ transition: transform 0.3s ease;
+ z-index: 100;
+ overflow-y: auto;
+}
+
+.sidebar.open {
+ transform: translateX(0);
+}
+
+/* Desplazar el encabezado cuando el sidebar está abierto en pantallas grandes */
+@media (min-width: 769px) {
+ body.sidebar-open .main-header {
+ transform: translateX(240px);
+ }
+}
+
+.sidebar .menu-section {
+ border-bottom: 1px solid #444;
+ padding: 0.5rem 0;
+}
+
+.sidebar .menu-section:last-child {
+ border-bottom: none;
+}
+
+.sidebar button,
+.sidebar a {
+ display: block;
+ width: 100%;
+ background: none;
border: none;
- border-radius: 4px;
- font-size: 0.9rem; /* Relativo al font-size de html */
- 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 */
+ color: inherit;
+ padding: 0.5rem 1rem;
+ text-align: left;
+ font: inherit;
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.close-sidebar {
+ display: none;
+ text-align: left;
+ color: #fff;
+}
+
+body.sidebar-open .close-sidebar {
+ display: block;
}
+body.sidebar-open #open-sidebar {
+ display: none;
+}
.modal-content select {
padding: 0.55em 0.8em;
@@ -141,9 +204,6 @@ body {
font-size: 0.9rem;
}
-#progress-buttons button:hover {
- background-color: #0056b3;
-}
.quiz-container {
background-color: var(--container-bg);
@@ -410,7 +470,6 @@ body {
margin: 1.25rem auto;
}
#quiz h2 { font-size: 1.3rem; }
- #progress-buttons button { font-size: 0.85rem; padding: 0.5em 0.8em; }
.modal-content select { font-size: 0.85rem; padding: 0.45em 0.7em; }
}
@@ -419,16 +478,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 */
}
- #progress-buttons {
- padding: 10px 8px;
- gap: 8px;
- }
- #progress-buttons button {
- 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 {
width: 100%;
@@ -473,6 +523,10 @@ body {
font-size: 0.85rem;
padding: 0.6rem 1rem;
}
+
+ .sidebar {
+ width: 80%;
+ }
}
/* --- Estilos del Modal de Configuración --- */
From f3f279b79d2ee732a9b3e0ebc3d7a6c9c70a050e Mon Sep 17 00:00:00 2001
From: RoderickGrc <121266955+RoderickGrc@users.noreply.github.com>
Date: Mon, 16 Jun 2025 12:16:33 -0600
Subject: [PATCH 2/3] Refine sidebar interactions
---
404.html | 2 +-
index.html | 2 +-
styles.css | 16 +++++++++++++---
3 files changed, 15 insertions(+), 5 deletions(-)
diff --git a/404.html b/404.html
index e776a9c..83a5138 100644
--- a/404.html
+++ b/404.html
@@ -17,7 +17,7 @@