Timer

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timer</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%E2%8F%B1%3C/text%3E%3C/svg%3E">
<style>
  :root { --blu:#1d4ed8; --verde:#15803d; --rosso:#b91c1c; --arancio:#c2410c; --grigio:#64748b; --bordo:#cbd5e1; --sfondo:#f8fafc; }
  * { box-sizing:border-box; }
  html, body { height:100%; }
  body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; background:#fff; color:#0f172a;
         display:flex; flex-direction:column; min-height:100%; transition:background .4s; -webkit-user-select:none; user-select:none; }
  body.quasi { background:#fff7ed; }
  body.finito { background:#fee2e2; }
  body.finito.lampo { background:#dc2626; color:#fff; }
  header { display:flex; align-items:center; gap:10px; padding:8px 14px; flex-wrap:wrap; }
  h1 { margin:0; font-size:1.1rem; }
  h1 small { font-weight:400; color:var(--grigio); font-size:.8rem; margin-left:6px; }
  header .spazio { flex:1; }
  button { font:inherit; border:1px solid var(--bordo); background:#fff; border-radius:10px; padding:6px 12px; cursor:pointer; color:inherit; }
  button:hover { background:#eef2ff; border-color:#a5b4fc; }
  body.finito.lampo button { color:#0f172a; }

/* i tempi prefissati */
  .preset { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:4px 14px; }
  .preset button { font-size:1.05rem; font-weight:600; min-width:64px; padding:8px 12px; }
  .preset button.scelto { background:var(--blu); color:#fff; border-color:var(--blu); }
  .preset button.lungo { border-width:2px; border-color:#93c5fd; }

/* il quadrante */
  .quadrante { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 14px; position:relative; }
  #tempo { font-variant-numeric:tabular-nums; font-weight:800; line-height:1; letter-spacing:-.02em;
           font-size:min(28vw, 38vh); margin:0; white-space:nowrap; }
  #tempo.ore { font-size:min(20vw, 34vh); }
  #sotto { color:var(--grigio); font-size:1.05rem; margin-top:10px; min-height:1.4em; text-align:center; }
  body.finito.lampo #sotto { color:#fff; }

/* la barra di avanzamento */
  .avanza { height:14px; background:#e2e8f0; border-radius:999px; overflow:hidden; margin:6px 14px 0; }
  .avanza div { height:100%; width:100%; background:var(--verde); border-radius:999px; transition:width .25s linear, background .4s; }
  body.quasi .avanza div { background:var(--arancio); }
  body.finito .avanza div { background:var(--rosso); }

/* la barra di scorrimento per regolare */
  .regola { display:flex; align-items:center; gap:10px; padding:10px 14px 2px; }
  .regola button { font-size:1.2rem; font-weight:700; min-width:48px; padding:6px 10px; }
  .regola input[type=range] { flex:1; height:44px; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent; }
  .regola input[type=range]::-webkit-slider-runnable-track { height:12px; background:#e2e8f0; border-radius:999px; }
  .regola input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:36px; height:36px; border-radius:50%; background:var(--blu); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3); margin-top:-12px; }
  .regola input[type=range]::-moz-range-track { height:12px; background:#e2e8f0; border-radius:999px; }
  .regola input[type=range]::-moz-range-thumb { width:36px; height:36px; border-radius:50%; background:var(--blu); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3); }
  .regola input:disabled { opacity:.45; cursor:default; }
  .fini { display:flex; gap:8px; justify-content:center; padding:0 14px 6px; flex-wrap:wrap; }
  .fini button { font-size:.95rem; }
  .fini small { color:var(--grigio); align-self:center; }

/* il pulsante enorme */
  #avvio { display:block; width:calc(100% - 28px); margin:8px 14px 14px; border:none; border-radius:22px; color:#fff;
           font-size:min(12vw, 4.2rem); font-weight:900; letter-spacing:.04em; padding:22px 10px; cursor:pointer;
           background:var(--verde); box-shadow:0 10px 28px rgba(21,128,61,.35); transition:transform .08s, background .2s; }
  #avvio:hover { background:#166534; }
  #avvio:active { transform:scale(.985); }
  #avvio.stop { background:var(--rosso); box-shadow:0 10px 28px rgba(185,28,28,.35); }
  #avvio.stop:hover { background:#991b1b; }
  #avvio.ricomincia { background:var(--blu); box-shadow:0 10px 28px rgba(29,78,216,.35); }
  #avvio.ricomincia:hover { background:#1e40af; }
  #avvio small { display:block; font-size:1rem; font-weight:500; letter-spacing:0; opacity:.9; margin-top:4px; }
  @media (max-height:520px) { #tempo { font-size:min(22vw, 30vh); } #avvio { padding:12px 10px; font-size:min(9vw, 2.6rem); } .preset button { padding:5px 9px; font-size:.95rem; } }
</style>
</head>
<body>
<header>
  <h1>⏱ Timer <small>tempi prefissati o barra di scorrimento; spazio = avvia/ferma, R = da capo, F = schermo intero</small></h1>
  <span class="spazio"></span>
  <button id="suono" title="suono alla fine">🔔 suono: sì</button>
  <button id="schermo" title="schermo intero (F)">⛶ schermo intero</button>
</header>

<div class="regola">
  <button id="meno" title="un minuto in meno">−</button>
  <input type="range" id="cursore" min="1" max="180" step="1" value="2">
  <button id="piu" title="un minuto in più">+</button>
</div>
<div class="fini">
  <small>regola fine:</small>
  <button data-s="-60">−1 min</button>
  <button data-s="-10">−10 s</button>
  <button data-s="10">+10 s</button>
  <button data-s="60">+1 min</button>
  <button data-s="600">+10 min</button>
  <button id="azzera" title="torna al tempo scelto (R)">↺ da capo</button>
</div>

<button id="avvio">START</button>

var $ = function (id) { return document.getElementById(id); };
  var elTempo = $('tempo'), elSotto = $('sotto'), elBarra = $('barra'), elAvvio = $('avvio'), elCursore = $('cursore');
  var elPreset = $('preset'), elSuono = $('suono');

var durata = 120;        // secondi scelti
  var resto = 120;         // secondi che restano (quando è fermo)
  var fine = 0;            // istante di fine (ms) quando corre, 0 se fermo
  var finito = false;
  var suonoOn = true;
  var tick = null, lampo = null;

// --- memoria: ultimo tempo scelto e, se stava correndo, quando finisce ---
  function salva() {
    try { localStorage.setItem(CHIAVE, JSON.stringify({ durata: durata, resto: resto, fine: fine, suono: suonoOn })); } catch (e) {}
  }
  function carica() {
    var d = null;
    try { d = JSON.parse(localStorage.getItem(CHIAVE) || 'null'); } catch (e) { d = null; }
    if (!d) return;
    if (d.durata > 0) durata = d.durata;
    resto = d.resto > 0 ? d.resto : durata;
    if (d.suono === false) suonoOn = false;
    if (d.fine && d.fine > Date.now()) { fine = d.fine; }          // la pagina era stata chiusa mentre correva: riprende
    else if (d.fine && d.fine > 0) { resto = 0; finito = true; }    // era scaduto mentre la pagina era chiusa
  }

// --- formato ---
  function due(n) { return (n < 10 ? '0' : '') + n; }
  function formato(s) {
    s = Math.max(0, Math.round(s));
    var h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
    return h ? h + ':' + due(m) + ':' + due(sec) : due(m) + ':' + due(sec);
  }
  function formatoLungo(s) {
    var h = Math.floor(s / 3600), m = Math.round((s % 3600) / 60);
    if (h && m) return h + ' h ' + m + ' min';
    if (h) return h + (h === 1 ? ' ora' : ' ore');
    if (m) return m + ' min';
    return Math.round(s) + ' s';
  }

// --- suono (Web Audio, tre squilli) ---
  var ctxAudio = null;
  function suona() {
    if (!suonoOn) return;
    try {
      var AC = window.AudioContext || window.webkitAudioContext;
      if (!AC) return;
      if (!ctxAudio) ctxAudio = new AC();
      if (ctxAudio.state === 'suspended' && ctxAudio.resume) ctxAudio.resume();
      var t0 = ctxAudio.currentTime;
      for (var i = 0; i < 3; i++) {
        var o = ctxAudio.createOscillator(), g = ctxAudio.createGain();
        o.type = 'sine'; o.frequency.value = 880;
        g.gain.setValueAtTime(0.0001, t0 + i * 0.5);
        g.gain.exponentialRampToValueAtTime(0.6, t0 + i * 0.5 + 0.02);
        g.gain.exponentialRampToValueAtTime(0.0001, t0 + i * 0.5 + 0.4);
        o.connect(g); g.connect(ctxAudio.destination);
        o.start(t0 + i * 0.5); o.stop(t0 + i * 0.5 + 0.42);
      }
    } catch (e) {}
  }
  function sbloccaAudio() {          // i browser vogliono un gesto dell'utente prima di suonare
    try {
      var AC = window.AudioContext || window.webkitAudioContext;
      if (AC && !ctxAudio) ctxAudio = new AC();
      if (ctxAudio && ctxAudio.state === 'suspended' && ctxAudio.resume) ctxAudio.resume();
    } catch (e) {}
  }

// --- schermo acceso mentre corre (dove il browser lo permette) ---
  var wake = null;
  function tieniAcceso(on) {
    try {
      if (on && navigator.wakeLock && !wake) navigator.wakeLock.request('screen').then(function (w) { wake = w; w.addEventListener('release', function () { wake = null; }); }).catch(function () {});
      if (!on && wake) { wake.release(); wake = null; }
    } catch (e) {}
  }

// --- disegno ---
  function restante() { return fine ? Math.max(0, (fine - Date.now()) / 1000) : resto; }
  function disegna() {
    var r = restante();
    var testo = formato(Math.ceil(r));
    elTempo.textContent = testo;
    elTempo.className = r >= 3600 ? 'ore' : '';
    document.title = (fine ? '▶ ' : '') + testo + ' · Timer';
    elBarra.style.width = (durata ? Math.max(0, Math.min(100, r / durata * 100)) : 0) + '%';
    document.body.classList.toggle('quasi', !finito && r > 0 && r <= Math.max(10, durata * 0.1) && fine > 0);
    document.body.classList.toggle('finito', finito);
    if (finito) { elSotto.textContent = 'Tempo scaduto: ' + formatoLungo(durata); }
    else if (fine) { elSotto.textContent = 'fine alle ' + oraFine() + ' · ' + formatoLungo(durata) + ' in tutto'; }
    else if (r < durata) { elSotto.textContent = 'in pausa · ' + formatoLungo(durata) + ' in tutto'; }
    else { elSotto.textContent = 'pronto: ' + formatoLungo(durata); }
    // il pulsante enorme
    if (fine) { elAvvio.textContent = 'STOP'; elAvvio.className = 'stop'; }
    else if (finito) { elAvvio.innerHTML = 'DA CAPO<small>' + formatoLungo(durata) + '</small>'; elAvvio.className = 'ricomincia'; }
    else if (r < durata) { elAvvio.innerHTML = 'RIPRENDI<small>' + testo + '</small>'; elAvvio.className = ''; }
    else { elAvvio.textContent = 'START'; elAvvio.className = ''; }
    // barra e preset: si regolano solo da fermo
    elCursore.disabled = !!fine;
    var min = Math.round(durata / 60);
    if (!fine) elCursore.value = Math.max(1, Math.min(180, min));
    var bs = elPreset.querySelectorAll('button');
    for (var i = 0; i < bs.length; i++) bs[i].classList.toggle('scelto', parseInt(bs[i].getAttribute('data-s'), 10) === durata);
  }
  function oraFine() {
    var d = new Date(fine);
    return due(d.getHours()) + ':' + due(d.getMinutes());
  }

// --- comandi ---
  function avvia() {
    if (finito) { daCapo(); }
    if (resto <= 0) resto = durata;
    sbloccaAudio();
    fine = Date.now() + resto * 1000;
    finito = false;
    tieniAcceso(true);
    if (tick) clearInterval(tick);
    tick = setInterval(controlla, 200);
    salva(); disegna();
  }
  function ferma() {
    if (!fine) return;
    resto = Math.max(0, (fine - Date.now()) / 1000);
    fine = 0;
    if (tick) { clearInterval(tick); tick = null; }
    tieniAcceso(false);
    salva(); disegna();
  }
  function daCapo() {
    if (tick) { clearInterval(tick); tick = null; }
    if (lampo) { clearInterval(lampo); lampo = null; }
    document.body.classList.remove('lampo');
    fine = 0; finito = false; resto = durata;
    tieniAcceso(false);
    salva(); disegna();
  }
  function scaduto() {
    fine = 0; resto = 0; finito = true;
    if (tick) { clearInterval(tick); tick = null; }
    tieniAcceso(false);
    suona();
    var n = 0;
    if (lampo) clearInterval(lampo);
    lampo = setInterval(function () {            // lampeggia per dieci secondi
      document.body.classList.toggle('lampo');
      if (++n >= 20) { clearInterval(lampo); lampo = null; document.body.classList.remove('lampo'); }
    }, 500);
    salva(); disegna();
  }
  function controlla() {
    if (fine && Date.now() >= fine) scaduto(); else disegna();
  }
  function imposta(sec) {                        // nuovo tempo scelto (da fermo)
    durata = Math.max(5, Math.round(sec));
    resto = durata; finito = false;
    if (lampo) { clearInterval(lampo); lampo = null; document.body.classList.remove('lampo'); }
    salva(); disegna();
  }
  function aggiusta(sec) {                       // ritocco fine: sposta la fine anche mentre corre
    if (fine) {
      fine = Math.max(Date.now() + 1000, fine + sec * 1000);
      durata = Math.max(5, durata + sec);
    } else {
      if (finito) { finito = false; resto = 0; }
      resto = Math.max(1, resto + sec);
      durata = Math.max(resto, durata + sec);
    }
    salva(); disegna();
  }

// --- interfaccia ---
  PRESET.forEach(function (p) {
    var b = document.createElement('button');
    b.textContent = p[1]; b.setAttribute('data-s', p[0]);
    if (p[0] >= 3600) b.className = 'lungo';
    b.onclick = function () { if (fine) ferma(); imposta(p[0]); };
    elPreset.appendChild(b);
  });
  elCursore.oninput = function () { imposta(parseInt(elCursore.value, 10) * 60); };
  $('meno').onclick = function () { if (fine) aggiusta(-60); else imposta(durata - 60); };
  $('piu').onclick = function () { if (fine) aggiusta(60); else imposta(durata + 60); };
  var fini = document.querySelectorAll('.fini button[data-s]');
  for (var i = 0; i < fini.length; i++) fini[i].onclick = (function (s) { return function () { aggiusta(s); }; })(parseInt(fini[i].getAttribute('data-s'), 10));
  $('azzera').onclick = daCapo;
  elAvvio.onclick = function () { if (fine) ferma(); else avvia(); };
  elSuono.onclick = function () { suonoOn = !suonoOn; elSuono.textContent = suonoOn ? '🔔 suono: sì' : '🔕 suono: no'; if (suonoOn) { sbloccaAudio(); } salva(); };
  $('schermo').onclick = function () {
    var d = document.documentElement;
    try {
      if (document.fullscreenElement || document.webkitFullscreenElement) { (document.exitFullscreen || document.webkitExitFullscreen).call(document); }
      else { (d.requestFullscreen || d.webkitRequestFullscreen).call(d); }
    } catch (e) {}
  };
  document.addEventListener('keydown', function (ev) {
    if (ev.target && /INPUT|TEXTAREA/.test(ev.target.tagName) && ev.key !== ' ') return;
    if (ev.key === ' ' || ev.key === 'Enter') { ev.preventDefault(); elAvvio.click(); }
    else if (ev.key === 'r' || ev.key === 'R') { daCapo(); }
    else if (ev.key === 'f' || ev.key === 'F') { $('schermo').click(); }
    else if (ev.key === 'ArrowUp' || ev.key === '+') { aggiusta(60); }
    else if (ev.key === 'ArrowDown' || ev.key === '-') { aggiusta(-60); }
  });
  document.addEventListener('visibilitychange', function () { if (!document.hidden) { controlla(); if (fine) tieniAcceso(true); } });

carica();
  elSuono.textContent = suonoOn ? '🔔 suono: sì' : '🔕 suono: no';
  if (fine) { tick = setInterval(controlla, 200); tieniAcceso(true); }
  disegna();
  window.__timer = { avvia: avvia, ferma: ferma, daCapo: daCapo, imposta: imposta, aggiusta: aggiusta, stato: function () { return { durata: durata, resto: restante(), corre: !!fine, finito: finito }; } };
})();
</script>
</body>
</html>