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?
Vuoi spostare ${openedId ? 'la confezione aperta' : 'il resto'} in un'altra posizione?