diff --git a/frontend/index.html b/frontend/index.html index 2292954..3e83994 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -13,6 +13,7 @@
No hay pendientes para este dia.
'; } else { - pendientes.forEach(function(p) { - const div = crearCardPendiente(p); - cont.appendChild(div); - }); + if (noCompletados.length) { + const tit = document.createElement('div'); + tit.className = 'subsubtitulo'; + tit.textContent = 'Pendientes (' + noCompletados.length + ')'; + cont.appendChild(tit); + noCompletados.forEach(function(p) { + cont.appendChild(crearCardPendiente(p)); + }); + } + if (completados.length) { + const titC = document.createElement('div'); + titC.className = 'subsubtitulo'; + titC.textContent = 'Completados (' + completados.length + ')'; + cont.appendChild(titC); + completados.forEach(function(p) { + cont.appendChild(crearCardPendiente(p)); + }); + } } document.getElementById('modalDia').classList.remove('hidden'); } @@ -83,7 +102,9 @@ function crearCardPendiente(p) { const vencido = esVencido(p); const div = document.createElement('div'); div.className = 'pendiente-card ' + (vencido ? 'vencido' : p.urgencia); - let html = 'No hay pendientes aun.
'; + if (!noCompletados.length) { + cont.innerHTML = 'No hay pendientes.
'; return; } + const titTotal = document.createElement('div'); + titTotal.className = 'subtitulo'; + titTotal.textContent = 'Pendientes (' + noCompletados.length + ')'; + cont.appendChild(titTotal); + if (vencidos.length) { const titVencidos = document.createElement('div'); - titVencidos.className = 'subtitulo'; + titVencidos.className = 'subsubtitulo'; titVencidos.textContent = 'Vencidos / Prioritarios (' + vencidos.length + ')'; cont.appendChild(titVencidos); vencidos.forEach(function(p) { @@ -179,7 +283,7 @@ function renderLista() { if (normales.length) { const titNormales = document.createElement('div'); - titNormales.className = 'subtitulo'; + titNormales.className = 'subsubtitulo'; titNormales.textContent = 'Pendientes (' + normales.length + ')'; cont.appendChild(titNormales); normales.forEach(function(p) { @@ -188,6 +292,24 @@ function renderLista() { } } +function renderCompletados() { + const cont = document.getElementById('listaCompletados'); + if (!cont) return; + cont.innerHTML = ''; + const completados = todosPendientes.filter(function(p) { return p.estado === 'completado'; }); + if (!completados.length) { + cont.innerHTML = 'No hay completados aun.
'; + return; + } + const tit = document.createElement('div'); + tit.className = 'subtitulo'; + tit.textContent = 'Completados (' + completados.length + ')'; + cont.appendChild(tit); + completados.forEach(function(p) { + cont.appendChild(crearCardPendiente(p)); + }); +} + async function editarPendiente(id) { const p = todosPendientes.find(function(x) { return x.id === id; }); if (!p) return; diff --git a/frontend/style.css b/frontend/style.css index 6636b7c..d6a98ab 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -274,6 +274,12 @@ h1 { border-radius: 14px; padding: 14px; border-left: 5px solid; + display: flex; + flex-direction: column; + gap: 10px; +} + +.pendiente-header { display: flex; justify-content: space-between; align-items: flex-start; @@ -323,6 +329,130 @@ h1 { background: rgba(255,255,255,0.3); } +.menu-wrapper { + position: relative; + flex-shrink: 0; +} + +.menu-btn { + background: rgba(255,255,255,0.15); + border: none; + color: #fff; + font-size: 1.3rem; + width: 34px; + height: 34px; + border-radius: 8px; + cursor: pointer; + transition: 0.2s; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; +} + +.menu-btn:hover { + background: rgba(255,255,255,0.3); +} + +.menu-dropdown { + display: none; + position: absolute; + right: 0; + top: 38px; + background: rgba(30, 40, 60, 0.95); + border-radius: 10px; + padding: 6px; + box-shadow: 0 8px 24px rgba(0,0,0,0.4); + z-index: 50; + min-width: 120px; + flex-direction: column; + gap: 4px; +} + +.menu-dropdown.show { + display: flex; +} + +.menu-dropdown button { + padding: 9px 14px; + border: none; + border-radius: 8px; + cursor: pointer; + background: rgba(255,255,255,0.1); + color: #fff; + font-size: 0.9rem; + text-align: left; + transition: 0.2s; +} + +.menu-dropdown button:hover { + background: rgba(255,255,255,0.25); +} + +.menu-dropdown .menu-delete:hover { + background: rgba(255, 46, 46, 0.6); +} + +.acceso-rapido { + display: flex; + flex-wrap: wrap; + gap: 10px; + width: 100%; + padding-top: 8px; + border-top: 1px solid rgba(255,255,255,0.12); +} + +.acceso-grupo { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 4px; +} + +.acceso-label { + font-size: 0.72rem; + color: rgba(255,255,255,0.55); + margin-right: 4px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.quick-btn { + padding: 5px 11px; + border: 1px solid rgba(255,255,255,0.2); + border-radius: 8px; + background: rgba(255,255,255,0.08); + color: #fff; + cursor: pointer; + font-size: 0.78rem; + transition: 0.2s; + white-space: nowrap; +} + +.quick-btn:hover { + background: rgba(255,255,255,0.2); +} + +.quick-btn.activo { + font-weight: 700; + border-color: transparent; +} + +.quick-btn.urgencia-alta.activo { background: #ff6b6b; } +.quick-btn.urgencia-media.activo { background: #feca57; color: #333; } +.quick-btn.urgencia-baja.activo { background: #48dbfb; color: #333; } + +.quick-btn.estado-pendiente.activo { background: #6c757d; } +.quick-btn.estado-en_progreso.activo { background: #4dabf7; } +.quick-btn.estado-completado.activo { background: #51cf66; } + +.subsubtitulo { + margin: 14px 0 8px; + font-size: 0.92rem; + font-weight: 600; + color: rgba(255,255,255,0.7); +} + .modal { position: fixed; inset: 0; @@ -393,8 +523,9 @@ h1 { .dot { width: 6px; height: 6px; } .calendar-header h2 { font-size: 1.05rem; } .nav-btn { width: 38px; height: 38px; } - .pendiente-card { flex-direction: column; } - .pendiente-actions { width: 100%; justify-content: flex-end; } + .pendiente-card { gap: 8px; } + .acceso-rapido { flex-direction: column; gap: 6px; } + .quick-btn { font-size: 0.72rem; padding: 4px 8px; } .badge-vencido { font-size: 0.65rem; padding: 2px 6px; } }