diff --git a/assets/css/style.css b/assets/css/style.css index bf312e8..f38fccf 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -3067,6 +3067,76 @@ body { background: rgba(255,255,255,0.22); } +.cooking-timer-wrap { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + width: 100%; + max-width: 360px; + margin-top: 4px; +} + +.cooking-timer-display { + font-size: clamp(2.4rem, 10vw, 4rem); + font-weight: 700; + font-variant-numeric: tabular-nums; + color: #fff; + letter-spacing: 0.04em; + text-align: center; + transition: color 0.4s; +} + +.cooking-timer-display.timer-warning { + color: #f97316; +} + +.cooking-timer-display.timer-done { + color: #ef4444; + animation: timerPulse 0.8s ease-in-out infinite alternate; +} + +@keyframes timerPulse { + from { opacity: 1; transform: scale(1); } + to { opacity: 0.5; transform: scale(1.06); } +} + +.cooking-timer-actions { + display: flex; + gap: 10px; + flex-wrap: wrap; + justify-content: center; +} + +.cooking-timer-btn { + display: inline-flex; + align-items: center; + gap: 6px; + background: rgba(255,255,255,0.10); + border: 1px solid rgba(255,255,255,0.20); + color: #fff; + border-radius: 20px; + padding: 8px 20px; + font-size: 1rem; + cursor: pointer; + transition: background 0.2s; +} + +.cooking-timer-btn:active { + background: rgba(255,255,255,0.22); +} + +.cooking-timer-btn.timer-running { + background: rgba(239,68,68,0.25); + border-color: rgba(239,68,68,0.5); +} + +.cooking-timer-reset { + background: rgba(255,255,255,0.05); + border-color: rgba(255,255,255,0.12); + font-size: 0.9rem; +} + .cooking-step-ings { width: 100%; max-width: 480px; diff --git a/assets/js/app.js b/assets/js/app.js index f299fed..1fb7514 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -6043,6 +6043,7 @@ function closeCookingMode() { document.getElementById('cooking-overlay').style.display = 'none'; document.body.classList.remove('cooking-mode-active'); if ('speechSynthesis' in window) window.speechSynthesis.cancel(); + clearCookingTimer(); try { screen.orientation?.unlock(); } catch (_) { /* ignore */ } } @@ -6088,6 +6089,9 @@ function renderCookingStep() { prevBtn.disabled = _cookingStep === 0; nextBtn.textContent = _cookingStep === total - 1 ? '✅ Fine' : 'Successivo ▶'; + // Timer: detect durations in step text + setupCookingTimer(cleanStep); + // Speak step if (_cookingTTS) speakCookingStep(cleanStep); } @@ -6131,6 +6135,140 @@ function replayCookingTTS() { if (text) speakCookingStep(text); } +// ===== COOKING TIMER ===== +let _cookingTimerInterval = null; +let _cookingTimerSeconds = 0; +let _cookingTimerRunning = false; +let _cookingTimerTotal = 0; // original total seconds + +/** + * Parse time durations from step text. + * Returns total seconds or 0 if no time found. + * Handles: "10 minuti", "1 ora", "1 ora e 30 minuti", "30 secondi", + * "un'ora", "mezz'ora", "un paio di minuti", "qualche minuto" + */ +function _parseStepTimer(text) { + const t = text.toLowerCase(); + let totalSec = 0; + + // "mezz'ora" / "mezzora" + if (/mezz['']?\s*ora/i.test(t)) totalSec += 30 * 60; + // "un quarto d'ora" + if (/un\s+quarto\s+d['']?\s*ora/i.test(t)) totalSec += 15 * 60; + // "un'ora" (without other numbers) + if (/un['']?\s*ora(?!\s*e)/i.test(t) && !/\d\s*or[ae]/i.test(t)) totalSec += 60 * 60; + + if (totalSec > 0) return totalSec; + + // Numeric patterns: "N ore/ora [e M minuti]", "N minuti/min", "N secondi/sec" + const reOre = /(\d+(?:[.,]\d+)?)\s*or[ae]/gi; + const reMin = /(\d+(?:[.,]\d+)?)\s*min(?:ut[oi])?/gi; + const reSec = /(\d+(?:[.,]\d+)?)\s*second[oi]/gi; + + let m; + while ((m = reOre.exec(t)) !== null) totalSec += parseFloat(m[1].replace(',', '.')) * 3600; + while ((m = reMin.exec(t)) !== null) totalSec += parseFloat(m[1].replace(',', '.')) * 60; + while ((m = reSec.exec(t)) !== null) totalSec += parseFloat(m[1].replace(',', '.')); + + // "un paio di minuti" / "qualche minuto" / "pochi minuti" + if (totalSec === 0 && /(?:un\s+paio\s+di|qualche|pochi)\s+minut/i.test(t)) totalSec = 2 * 60; + // "qualche secondo" + if (totalSec === 0 && /qualche\s+second/i.test(t)) totalSec = 15; + + return Math.round(totalSec); +} + +function _formatTimerDisplay(sec) { + const m = Math.floor(Math.abs(sec) / 60); + const s = Math.abs(sec) % 60; + const sign = sec < 0 ? '-' : ''; + return `${sign}${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`; +} + +function setupCookingTimer(stepText) { + clearCookingTimer(); + const seconds = _parseStepTimer(stepText); + const wrap = document.getElementById('cooking-timer-wrap'); + if (seconds <= 0) { + wrap.style.display = 'none'; + return; + } + _cookingTimerTotal = seconds; + _cookingTimerSeconds = seconds; + _cookingTimerRunning = false; + wrap.style.display = 'flex'; + document.getElementById('cooking-timer-display').textContent = _formatTimerDisplay(seconds); + document.getElementById('cooking-timer-display').className = 'cooking-timer-display'; + document.getElementById('cooking-timer-start').textContent = '⏱️ Avvia timer'; + document.getElementById('cooking-timer-start').classList.remove('timer-running'); + document.getElementById('cooking-timer-reset').style.display = 'none'; +} + +function toggleCookingTimer() { + if (_cookingTimerRunning) { + // Pause + clearInterval(_cookingTimerInterval); + _cookingTimerInterval = null; + _cookingTimerRunning = false; + document.getElementById('cooking-timer-start').textContent = '▶️ Riprendi'; + document.getElementById('cooking-timer-start').classList.remove('timer-running'); + document.getElementById('cooking-timer-reset').style.display = 'inline-flex'; + } else { + // Start / Resume + _cookingTimerRunning = true; + document.getElementById('cooking-timer-start').textContent = '⏸️ Pausa'; + document.getElementById('cooking-timer-start').classList.add('timer-running'); + document.getElementById('cooking-timer-reset').style.display = 'inline-flex'; + _cookingTimerInterval = setInterval(() => { + _cookingTimerSeconds--; + const display = document.getElementById('cooking-timer-display'); + display.textContent = _formatTimerDisplay(Math.abs(_cookingTimerSeconds)); + + if (_cookingTimerSeconds <= 0 && _cookingTimerSeconds > -1) { + // Timer just finished + display.classList.add('timer-done'); + display.classList.remove('timer-warning'); + _cookingTimerDone(); + } else if (_cookingTimerSeconds > 0 && _cookingTimerSeconds <= 30) { + display.classList.add('timer-warning'); + } + if (_cookingTimerSeconds < 0) { + // Counting overtime (negative) + display.textContent = '+' + _formatTimerDisplay(Math.abs(_cookingTimerSeconds)); + } + }, 1000); + } +} + +function resetCookingTimer() { + clearInterval(_cookingTimerInterval); + _cookingTimerInterval = null; + _cookingTimerRunning = false; + _cookingTimerSeconds = _cookingTimerTotal; + document.getElementById('cooking-timer-display').textContent = _formatTimerDisplay(_cookingTimerTotal); + document.getElementById('cooking-timer-display').className = 'cooking-timer-display'; + document.getElementById('cooking-timer-start').textContent = '⏱️ Avvia timer'; + document.getElementById('cooking-timer-start').classList.remove('timer-running'); + document.getElementById('cooking-timer-reset').style.display = 'none'; +} + +function clearCookingTimer() { + if (_cookingTimerInterval) clearInterval(_cookingTimerInterval); + _cookingTimerInterval = null; + _cookingTimerRunning = false; + _cookingTimerSeconds = 0; + _cookingTimerTotal = 0; +} + +function _cookingTimerDone() { + // Vibrate if supported + if (navigator.vibrate) navigator.vibrate([300, 100, 300, 100, 300]); + // TTS announcement + if (_cookingTTS) speakCookingStep('Tempo scaduto!'); + // Visual alert already handled by .timer-done CSS animation +} +// ===== END COOKING TIMER ===== + function toggleCookingTTS() { _cookingTTS = !_cookingTTS; const btn = document.getElementById('cooking-tts-btn'); diff --git a/data/dispensa.db b/data/dispensa.db index b2730b9..639b7a7 100644 Binary files a/data/dispensa.db and b/data/dispensa.db differ diff --git a/index.html b/index.html index 92dadee..58ddb0a 100644 --- a/index.html +++ b/index.html @@ -982,6 +982,13 @@