Update index.html

index.html

@@ -6,7 +6,7 @@
 <title>Four-in-One Clock</title>
 <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
 <style>
-:root{--bg:#cfc7b8;--c1:#f3ede1;--c2:#ddd2bd;--brass:#a07c42;--face:#fdfcf8;--ink:#1f1b16;--panel:#f7f2e8;--line:#cdbfa6;--txt:#2a241c;--mute:#6f6556;--acc:#d23b2a;--lcdbg:#1a1206;--lcd:#ffb12e;--bz1:#f3dfae;--bz2:var(--brass);--bz3:#5e4620;--tone:#c0392b;--dim:#4a1511;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
+:root{--bg:#cfc7b8;--c1:#f3ede1;--c2:#ddd2bd;--brass:#a07c42;--face:#fdfcf8;--ink:#1f1b16;--panel:#f7f2e8;--line:#cdbfa6;--txt:#2a241c;--mute:#6f6556;--acc:#d23b2a;--lcdbg:#1a1206;--lcd:var(--tc,#ffb12e);--bz1:#f3dfae;--bz2:var(--brass);--bz3:#5e4620;--tone:#c0392b;--dim:#4a1511;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
 @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f0d0b;--c1:#3a2e24;--c2:#1f1913;--brass:#c9a266;--face:#e9ede6;--ink:#1b2420;--panel:#241d17;--line:#4b3e31;--txt:#efe6d8;--mute:#a69a88;--acc:#ff5a3c}}
 :root[data-theme="dark"]{--bg:#0f0d0b;--c1:#3a2e24;--c2:#1f1913;--brass:#c9a266;--face:#e9ede6;--ink:#1b2420;--panel:#241d17;--line:#4b3e31;--txt:#efe6d8;--mute:#a69a88;--acc:#ff5a3c}
 *,*::before,*::after{box-sizing:inherit}
@@ -29,7 +29,7 @@ button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-of
 .row{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:calc(12px*var(--ds,1));justify-content:center}
 .seg7{position:relative;display:inline-block;font-weight:700;font-size:calc(3.2rem*var(--ds,1));line-height:1.1}
 .seg7 i{font-style:normal;opacity:.09}
-.seg7 b{position:absolute;left:0;top:0;font-weight:700;text-shadow:0 0 12px rgba(255,177,46,.55);white-space:nowrap}
+.seg7 b{position:absolute;left:0;top:0;font-weight:700;text-shadow:0 0 10px currentColor;white-space:nowrap}
 .seg7.sm{font-size:calc(1.6rem*var(--ds,1))}
 .ind{display:flex;flex-direction:column;gap:4px;font-size:calc(.62rem*var(--ds,1));padding-bottom:6px}
 .ind span{opacity:.15}.ind span.on{opacity:1}
@@ -60,13 +60,16 @@ body.tm .wrap{position:fixed;top:0;right:0;bottom:0;left:0;width:auto;max-width:
 .tm .lcd{position:relative;background:none;box-shadow:none;padding:0;border-radius:0}
 .tm .row{position:relative;display:block;text-align:center}
 .tm .seg7 i{display:none}
-.tm .seg7 b{position:static;text-shadow:0 3px 14px rgba(0,0,0,.75),0 0 12px rgba(255,177,46,.35)}
+.tm .seg7 b{position:static;text-shadow:0 3px 14px rgba(0,0,0,.75),0 0 10px currentColor}
 [data-night] body.tm .seg7 b{text-shadow:none}
 .tm .row .seg7.sm{position:absolute;left:100%;bottom:.1em;margin-left:.35em}
 .tm .ind{position:absolute;left:100%;top:0;margin-left:.5em;padding:0}
 .tm .lcdinfo{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;gap:2em;margin-top:.4em;text-shadow:0 2px 8px rgba(0,0,0,.7)}
 .tm .tabs{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;opacity:.3;pointer-events:auto}
 .tm .tabs:hover,.tm .tabs:focus-within{opacity:1}
+.tabs,#na{transition:opacity .6s}
+body.idle .tabs,body.idle #na{opacity:0!important;pointer-events:none}
+body.idle{cursor:none}
 .wrap{z-index:2}
 .ss .wrap{position:fixed;width:max-content;min-width:min(var(--ww,380px),calc(100vw - 24px));max-width:calc(100vw - 24px)}
 .ss .an{width:calc(min(var(--ww,380px),calc(100vw - 24px)) - 30px);max-width:none}
@@ -182,6 +185,8 @@ input[type=text]{flex:1;min-width:120px}
 <div class="f"><span>Second hand</span><div class="sg" data-k="smooth"><button data-v="true">Sweep</button><button data-v="false">Tick</button></div></div>
 <div class="f"><span>Theme</span><div class="sg" data-k="theme"><button data-v="auto">🌗 Auto</button><button data-v="dark">🌙 Dark</button><button data-v="light">☀️ Light</button></div></div>
 <div class="f"><span>Show clocks</span><div class="sg" id="shows"><button data-t="a">🕰️ Analog</button><button data-t="d">💡 Digital</button><button data-t="b">🔢 Binary</button></div></div>
+<div class="f"><span>Text color (day)</span><div class="sg" data-k="tc"><button data-v="#ffb12e" aria-label="Amber">🟠</button><button data-v="#ffffff" aria-label="White">⚪</button><button data-v="#6cc8ff" aria-label="Blue">🔵</button><button data-v="#6dff8f" aria-label="Green">🟢</button><button data-v="#c79bff" aria-label="Violet">🟣</button><button data-v="#ff5a4a" aria-label="Red">🔴</button><button data-v="#ffe14a" aria-label="Yellow">🟡</button></div></div>
+<div class="f"><span>Auto-hide controls</span><div class="sg" data-k="idle"><button data-v="0">Off</button><button data-v="1">1 min</button><button data-v="5">5 min</button><button data-v="15">15 min</button></div></div>
 <div class="f"><span>Clock only (transparent)</span><div class="sg" data-k="tm"><button data-v="true">On</button><button data-v="false">Off</button></div></div>
 <div class="f"><span>Digital text size</span><div class="sg" data-k="ds"><button data-v="0.7">XS</button><button data-v="1">S</button><button data-v="1.6">M</button><button data-v="2.4">L</button><button data-v="3.4">XL</button><button data-v="5">XXL</button></div></div>
 <div class="f"><span>Binary dots</span><div class="sg" data-k="dot"><button data-v="red">🔴</button><button data-v="green">🟢</button><button data-v="moon">🌕</button><button data-v="heart">💖</button></div></div>
@@ -197,6 +202,7 @@ input[type=text]{flex:1;min-width:120px}
 <div class="grp">
 <h3>🖼️ Slideshow</h3>
 <div class="f"><span id="cnt">No pictures yet</span><span><button class="btn" id="bfd">📁 Folder</button> <button class="btn alt" id="bfi">➕ Pictures</button></span></div>
+<div class="f"><span class="fine">Pictures you add are saved on this device.</span><button class="btn alt" id="bclp">🗑️ Clear saved</button></div>
 <input type="text" id="hf" placeholder="Hugging Face folder: user/space/photos" aria-label="Hugging Face folder or list file URL">
 <input type="password" id="hft" placeholder="Access token (private repos only)" aria-label="Hugging Face access token">
 <div class="f"><button class="btn" id="bhf">☁️ Load whole folder</button></div>
@@ -245,7 +251,7 @@ input[type=text]{flex:1;min-width:120px}
 
 <script>
 const $=id=>document.getElementById(id);
-const DEF={h24:false,secs:true,smooth:true,theme:'auto',dot:'red',sound:'bell',vol:.6,snooze:5,awake:false,hf:'',hft:'',tm:false,ds:1,urls:[],ss:true,interval:10,shuffle:true,fit:'cover',trans:'random',tdur:2,dim:.2,corner:'br',ws:380,night:false,nc:'red',nb:.6,show:{a:true,b:true,d:true},alarms:[{id:1,t:'07:00',label:'Wake up',on:false,days:[1,2,3,4,5]}]};
+const DEF={h24:false,secs:true,smooth:true,theme:'auto',dot:'red',sound:'bell',vol:.6,snooze:5,awake:false,tc:'#ffb12e',idle:5,hf:'',hft:'',tm:false,ds:1,urls:[],ss:true,interval:10,shuffle:true,fit:'cover',trans:'random',tdur:2,dim:.2,corner:'br',ws:380,night:false,nc:'red',nb:.6,show:{a:true,b:true,d:true},alarms:[{id:1,t:'07:00',label:'Wake up',on:false,days:[1,2,3,4,5]}]};
 let S=JSON.parse(JSON.stringify(DEF));
 try{const o=JSON.parse(localStorage.getItem('clock4')||'{}');Object.assign(S,o);S.show=Object.assign({},DEF.show,o.show)}catch(e){}
 const save=()=>{try{localStorage.setItem('clock4',JSON.stringify(S))}catch(e){}};
@@ -313,7 +319,7 @@ document.querySelectorAll('.sg[data-k]').forEach(g=>g.querySelectorAll('button')
 $('shows').querySelectorAll('button').forEach(b=>b.classList.toggle('on',S.show[b.dataset.t]));
 $('pA').hidden=!S.show.a;$('pD').hidden=!S.show.d&&!S.tm;$('pB').hidden=!S.show.b;$('col').hidden=!S.show.d&&!S.show.b&&!S.tm;
 $('psec').hidden=!S.secs;$('sh').style.display=S.secs?'':'none';cols.slice(4).forEach(c=>c.hidden=!S.secs);
-$('an').classList.toggle('tick',!S.smooth);$('vol').value=S.vol;$('dim').value=S.dim;$('nb').value=S.nb;$('tsel').value=S.trans;$('sn').textContent='💤 Snooze '+S.snooze+' min';document.documentElement.style.setProperty('--ds',S.ds);ssSync()}
+$('an').classList.toggle('tick',!S.smooth);$('vol').value=S.vol;$('dim').value=S.dim;$('nb').value=S.nb;$('tsel').value=S.trans;$('sn').textContent='💤 Snooze '+S.snooze+' min';document.documentElement.style.setProperty('--ds',S.ds);document.documentElement.style.setProperty('--tc',S.tc);ssSync()}
 function apply(){save();sync();renderAlarms();dirty=true;logic();awake()}
 document.querySelectorAll('.sg[data-k]').forEach(g=>g.onclick=e=>{const b=e.target.closest('button');if(!b)return;S[g.dataset.k]=parse(b.dataset.v);apply()});
 $('shows').onclick=e=>{const b=e.target.closest('button');if(!b)return;S.show[b.dataset.t]=!S.show[b.dataset.t];apply()};
@@ -416,8 +422,8 @@ function ssSync(){const on=!!(S.ss&&files.length&&!S.night),b=document.body,r=do
 b.classList.toggle('ss',on&&!S.tm);b.classList.toggle('tm',!!S.tm);['tl','tr','bl','br'].forEach(k=>b.classList.toggle('c-'+k,k===S.corner));b.style.setProperty('--ww',S.ws+'px');bg.hidden=!on;
 r.toggleAttribute('data-night',S.night);r.style.setProperty('--tone',P[0]);r.style.setProperty('--dim',P[1]);r.style.setProperty('--nb',S.nb);
 if(on&&!running){running=true;size();advance()}else if(!on&&running){running=false;clearTimeout(timer);cancelAnimationFrame(anim)}}
-const load=e=>{const fl=[...e.target.files].filter(f=>f.type.startsWith('image/')||/\.(jpe?g|png|webp|gif|avif|bmp)$/i.test(f.name));if(!fl.length)return;
-files=e.target.id==='ffil'?files.concat(fl):[...S.urls,...fl];idx=-1;order=[];cur&&cur.close&&cur.close();cur=nxt=null;running=false;clearTimeout(timer);cancelAnimationFrame(anim);
+const load=async e=>{let fl=[...e.target.files].filter(f=>f.type.startsWith('image/')||/\.(jpe?g|png|webp|gif|avif|bmp)$/i.test(f.name));if(!fl.length)return;$('cnt').textContent='Saving…';fl=await Promise.all(fl.map(shrink));fl.forEach(b=>idbPut(b).catch(()=>{}));
+files=files.concat(fl);idx=-1;order=[];cur&&cur.close&&cur.close();cur=nxt=null;running=false;clearTimeout(timer);cancelAnimationFrame(anim);
 cnt();S.ss=true;e.target.value='';apply()};
 $('fdir').onchange=$('ffil').onchange=load;$('bfd').onclick=()=>$('fdir').click();$('bfi').onclick=()=>$('ffil').click();
 $('bnext').onclick=()=>{if(!running)return;cancelAnimationFrame(anim);if(nxt){cur=nxt;nxt=null}advance()};
@@ -429,6 +435,13 @@ const setU=(u,k)=>{if(!k){S.hf='';$('hf').value=''}S.urls=u;files=[...u,...files
 $('burl').onclick=()=>setU($('urls').value.split(/\n+/).map(s=>s.trim()).filter(Boolean).slice(0,500));
 $('brnd').onclick=()=>setU(['picsum']);
 $('bclr').onclick=()=>{$('urls').value='';setU([])};
+let db;
+const idb=()=>new Promise((ok,no)=>{if(db)return ok(db);const r=indexedDB.open('clock4',1);r.onupgradeneeded=()=>r.result.createObjectStore('pics',{autoIncrement:true});r.onsuccess=()=>ok(db=r.result);r.onerror=no});
+const idbOp=(mode,f)=>idb().then(d=>new Promise((ok,no)=>{const t=d.transaction('pics',mode),r=f(t.objectStore('pics'));t.oncomplete=()=>ok(r.result);t.onerror=no}));
+const idbPut=b=>idbOp('readwrite',s=>s.add(b)),idbAll=()=>idbOp('readonly',s=>s.getAll()),idbClear=()=>idbOp('readwrite',s=>s.clear());
+async function shrink(f){try{const b=await createImageBitmap(f),m=Math.max(b.width,b.height);if(m<=2560){b.close&&b.close();return f}const k=2560/m,cv=document.createElement('canvas');cv.width=Math.round(b.width*k);cv.height=Math.round(b.height*k);cv.getContext('2d').drawImage(b,0,0,cv.width,cv.height);b.close&&b.close();return await new Promise(ok=>cv.toBlob(x=>ok(x||f),'image/jpeg',.9))}catch(e){return f}}
+$('bclp').onclick=()=>{idbClear().catch(()=>{});files=files.filter(f=>typeof f==='string');idx=-1;order=[];cur&&cur.close&&cur.close();cur=nxt=null;running=false;clearTimeout(timer);cancelAnimationFrame(anim);cnt();apply()};
+try{navigator.storage&&navigator.storage.persist&&navigator.storage.persist()}catch(e){}
 const hfTok=()=>S.hft?{Authorization:'Bearer '+S.hft}:{};
 async function hfList(q){q=q.trim().replace(/^https?:\/\/huggingface\.co\//,'').replace(/^\/+|\/+$/g,'');
 if(/^https?:\/\//i.test(q)){const t=await(await fetch(q)).text();return t.split(/\s*\n\s*/).filter(Boolean)}
@@ -441,6 +454,13 @@ $('bhf').onclick=hfGo;
 const qp=new URLSearchParams(location.search).get('hf');if(qp){S.hf=qp;save()}
 files=[...S.urls];$('urls').value=S.urls[0]==='picsum'||S.hf?'':S.urls.join('\n');$('hf').value=S.hf;$('hft').value=S.hft;cnt();
 if(S.hf)hfList(S.hf).then(l=>l.length&&setU(l,1)).catch(()=>{});
+idbAll().then(a=>{if(!a.length)return;files=files.concat(a);idx=-1;order=[];cnt();apply()}).catch(()=>{});
+let lastAct=Date.now(),idleOn=false,swallow=0;
+const wake=()=>{lastAct=Date.now();if(idleOn){idleOn=false;document.body.classList.remove('idle')}};
+['pointermove','pointerdown','touchstart','wheel'].forEach(ev=>addEventListener(ev,()=>{if(idleOn&&(ev==='pointerdown'||ev==='touchstart'))swallow=Date.now()+500;wake()},{passive:true,capture:true}));
+addEventListener('keydown',e=>{if(idleOn){e.preventDefault();e.stopPropagation()}wake()},true);
+addEventListener('click',e=>{if(Date.now()<swallow){e.preventDefault();e.stopPropagation()}},true);
+setInterval(()=>{if(S.idle&&!idleOn&&!$('drawer').classList.contains('open')&&Date.now()-lastAct>S.idle*60000){idleOn=true;document.body.classList.add('idle')}},5000);
 size();sync();renderAlarms();logic();frame();setInterval(logic,250);awake();
 </script>
 </body>