diff --git a/assets/css/style.css b/assets/css/style.css index 129a1fd..c7a3da2 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -751,6 +751,12 @@ body { border: 2px solid var(--border); } +.move-countdown-btn { + position: relative; + overflow: hidden; + transition: none; +} + .btn-accent { background: var(--accent); color: white; diff --git a/assets/js/app.js b/assets/js/app.js index 1db105c..b728150 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -3570,27 +3570,58 @@ function closeLowStockPrompt() { if (cb) cb(); } +let _moveModalTimer = null; +let _moveModalRAF = null; + +function clearMoveModalTimer() { + if (_moveModalTimer) { clearTimeout(_moveModalTimer); _moveModalTimer = null; } + if (_moveModalRAF) { cancelAnimationFrame(_moveModalRAF); _moveModalRAF = null; } +} + +function startMoveModalCountdown(btnId, onExpire) { + clearMoveModalTimer(); + const duration = 15000; + const start = performance.now(); + const btn = document.getElementById(btnId); + if (!btn) return; + function tick() { + const elapsed = performance.now() - start; + const pct = Math.max(0, 100 - (elapsed / duration) * 100); + btn.style.background = `linear-gradient(to right, var(--bg-tertiary) ${pct}%, transparent ${pct}%)`; + if (elapsed < duration) { + _moveModalRAF = requestAnimationFrame(tick); + } + } + _moveModalRAF = requestAnimationFrame(tick); + _moveModalTimer = setTimeout(() => { + clearMoveModalTimer(); + onExpire(); + }, duration); +} + function showMoveAfterUseModal(product, fromLoc, remaining, openedId) { const otherLocs = Object.entries(LOCATIONS).filter(([k]) => k !== fromLoc); const locButtons = otherLocs.map(([k, v]) => - `` + `` ).join(''); document.getElementById('modal-content').innerHTML = `

Vuoi spostare ${openedId ? 'la confezione aperta' : 'il resto'} di ${escapeHtml(product.name)} in un'altra posizione?

${locButtons}
- +
`; document.getElementById('modal-overlay').style.display = 'flex'; + startMoveModalCountdown('btn-move-stay', () => { closeModal(); showPage('dashboard'); }); } async function confirmMoveAfterUse(productId, fromLoc, toLoc, openedId) { + clearMoveModalTimer(); closeModal(); showLoading(true); try { @@ -5260,24 +5291,26 @@ async function submitRecipeUse(useAll) { function showRecipeMoveModal(productId, fromLoc, remaining, openedId) { const otherLocs = Object.entries(LOCATIONS).filter(([k]) => k !== fromLoc); const locButtons = otherLocs.map(([k, v]) => - `` + `` ).join(''); document.getElementById('modal-content').innerHTML = `

Vuoi spostare ${openedId ? 'la confezione aperta' : 'il resto'} in un'altra posizione?

${locButtons}
- +
`; document.getElementById('modal-overlay').style.display = 'flex'; + startMoveModalCountdown('btn-move-stay', () => { closeModal(); }); } async function confirmRecipeMove(productId, fromLoc, toLoc, openedId) { + clearMoveModalTimer(); closeModal(); try { if (openedId) { diff --git a/data/dispensa.db b/data/dispensa.db index 7323635..437bb98 100644 Binary files a/data/dispensa.db and b/data/dispensa.db differ diff --git a/index.html b/index.html index df50902..862941e 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ Dispensa Manager - + @@ -911,6 +911,6 @@ - +