Update index.html

index.html

@@ -45,7 +45,7 @@ body.dark{
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
 
-  --paper-bg:       #302e3b; /* slightly deeper to add contrast with tiles */
+  --paper-bg:       #302e2b;
   --paper-text:     #e9e7e2;
   --shadow:         rgba(0,0,0,.55);
 
@@ -139,12 +139,10 @@ h1{font-family:'Libre Baskerville',serif;margin:0;font-size:28px;letter-spacing:
   gap:16px;
   overflow:visible;
 
-  /* NEW: prevent short images from becoming tall boxes */
+  /* prevent short images from becoming tall boxes */
   align-items:start;
 
-  /* NEW: dynamic columns
-     --cols: 1 -> one column (full width), 2 -> two columns (50/50),
-     else auto-fit with a sensible min width */
+  /* dynamic columns via CSS vars set from JS */
   grid-template-columns: repeat(var(--cols, auto-fit), minmax(var(--minCol, 220px), 1fr));
 }
 #board::before{
@@ -176,8 +174,7 @@ h1{font-family:'Libre Baskerville',serif;margin:0;font-size:28px;letter-spacing:
   transform:rotate(var(--tilt,0deg)) scale(1);
   transition:transform .12s ease, box-shadow .12s ease, opacity .16s ease;
   animation:pop .18s ease-out;
-  /* NEW: ensure the tile itself doesn't stretch via grid */
-  align-self:start;
+  align-self:start; /* don't stretch tile height */
 }
 .sticky:hover{
   transform:rotate(var(--tilt,0deg)) translateY(-2px) scale(1.01);
@@ -212,8 +209,7 @@ body.dark .badge{background:rgba(255,255,255,.12)}
   display:block;
   border-bottom-left-radius:10px;border-bottom-right-radius:10px;
   background: linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0));
-  /* NEW: keep gigantic/tall screenshots sane on viewport */
-  max-height:80vh;
+  max-height:80vh; /* keep ultra-tall screenshots sane */
 }
 
 /* delete button */
@@ -245,7 +241,6 @@ body.dark .badge{background:rgba(255,255,255,.12)}
 @media(max-width:768px){
   .container{margin:20px 16px;padding:24px}
   h1{font-size:24px}
-  /* CHANGED: still use dynamic columns on mobile, but with a smaller min */
   #board{
     grid-template-columns: repeat(var(--cols, auto-fit), minmax(180px,1fr));
   }
@@ -283,21 +278,30 @@ body.dark .badge{background:rgba(255,255,255,.12)}
   <div class="processing">Processing…</div>
 
 <script>
-/* ======= helpers ======= */
+/* ======= DOM refs ======= */
 const board          = document.getElementById('board');
 const processingNode = document.querySelector('.processing');
 const themeBtn       = document.getElementById('themeToggle');
 
 let noteCount = 0;
 
-function showProcessing(){ processingNode.classList.add('show') }
-function hideProcessing(){ setTimeout(()=>processingNode.classList.remove('show'),250) }
+/* ======= processing UI ======= */
+function showProcessing(text){
+  if(text) processingNode.textContent = text;
+  processingNode.classList.add('show');
+}
+function hideProcessing(){
+  setTimeout(()=>{
+    processingNode.classList.remove('show');
+    processingNode.textContent = 'Processing…';
+  },250);
+}
 
+/* ======= placeholder helpers ======= */
 function removePlaceholder(){
   const ph = board.querySelector('.placeholder');
   if(ph) ph.remove();
 }
-
 function ensurePlaceholder(){
   if(!board.querySelector('.sticky') && !board.querySelector('.placeholder')){
     const ph = document.createElement('div');
@@ -307,25 +311,22 @@ function ensurePlaceholder(){
   }
 }
 
-/* NEW: set grid columns smartly based on number of stickies */
+/* ======= layout: 1 image full width, 2 images 50/50, 3+ responsive ======= */
 function updateLayout(){
   const count = board.querySelectorAll('.sticky').length;
   if(count === 1){
-    // 1 image → full width (one column)
     board.style.setProperty('--cols', '1');
     board.style.setProperty('--minCol', '0px');
   }else if(count === 2){
-    // 2 images → half/half
     board.style.setProperty('--cols', '2');
     board.style.setProperty('--minCol', '0px');
   }else{
-    // 3+ → responsive, nice min width
     board.style.setProperty('--cols', 'auto-fit');
     board.style.setProperty('--minCol', '220px');
   }
 }
 
-/* random tilt & color */
+/* ======= random style bits ======= */
 function randTilt(){
   const d = (Math.random()*4.4 - 2.2).toFixed(2);
   return d + 'deg';
@@ -334,41 +335,178 @@ function pickColorClass(){
   const choices = ['note-yellow','note-mint','note-blush','note-blue'];
   return choices[Math.floor(Math.random()*choices.length)];
 }
+function uuid(){
+  return (crypto?.randomUUID?.() || ('id-' + Math.random().toString(16).slice(2) + Date.now()));
+}
+
+/* ======= PERSISTENCE (IndexedDB with localStorage fallback) ======= */
+const PERSIST = { mode: 'idb' };
+const DB_NAME = 'question-board';
+const STORE   = 'stickies';
+let dbConn = null;
+
+function initDB(){
+  return new Promise((resolve, reject)=>{
+    const req = indexedDB.open(DB_NAME, 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if(!db.objectStoreNames.contains(STORE)){
+        const store = db.createObjectStore(STORE, { keyPath: 'id' });
+        store.createIndex('createdAt', 'createdAt');
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror   = () => reject(req.error);
+  });
+}
+async function initPersistence(){
+  if(!('indexedDB' in window)){
+    PERSIST.mode = 'ls';
+    return;
+  }
+  try{
+    dbConn = await initDB();
+    PERSIST.mode = 'idb';
+  }catch(e){
+    console.warn('IndexedDB unavailable, falling back to localStorage', e);
+    PERSIST.mode = 'ls';
+  }
+}
+
+/* --- IndexedDB ops --- */
+function idbAdd(rec){
+  return new Promise((resolve,reject)=>{
+    const tx = dbConn.transaction(STORE,'readwrite');
+    tx.objectStore(STORE).put(rec);
+    tx.oncomplete = ()=> resolve();
+    tx.onerror = ()=> reject(tx.error);
+  });
+}
+function idbGetAll(){
+  return new Promise((resolve,reject)=>{
+    const tx = dbConn.transaction(STORE,'readonly');
+    const idx = tx.objectStore(STORE).index('createdAt');
+    const req = idx.getAll();
+    req.onsuccess = ()=> {
+      const arr = req.result || [];
+      arr.sort((a,b)=> a.createdAt - b.createdAt);
+      resolve(arr);
+    };
+    req.onerror = ()=> reject(req.error);
+  });
+}
+function idbDelete(id){
+  return new Promise((resolve,reject)=>{
+    const tx = dbConn.transaction(STORE,'readwrite');
+    tx.objectStore(STORE).delete(id);
+    tx.oncomplete = ()=> resolve();
+    tx.onerror = ()=> reject(tx.error);
+  });
+}
+
+/* --- localStorage ops (fallback) --- */
+function lsMeta(){
+  try{
+    return JSON.parse(localStorage.getItem('stickies-meta')||'[]');
+  }catch{ return []; }
+}
+function lsSetMeta(arr){
+  localStorage.setItem('stickies-meta', JSON.stringify(arr));
+}
+function fileToDataURL(file){
+  return new Promise((resolve,reject)=>{
+    const r = new FileReader();
+    r.onload = ()=> resolve(r.result);
+    r.onerror = reject;
+    r.readAsDataURL(file);
+  });
+}
+function lsAdd(rec){
+  const meta = lsMeta();
+  meta.push({ id: rec.id, createdAt: rec.createdAt, color: rec.color, tilt: rec.tilt });
+  lsSetMeta(meta);
+  localStorage.setItem('sticky-img-' + rec.id, rec.dataUrl);
+}
+function lsGetAll(){
+  const meta = lsMeta().sort((a,b)=> a.createdAt - b.createdAt);
+  return meta.map(m => ({
+    id: m.id,
+    createdAt: m.createdAt,
+    color: m.color,
+    tilt: m.tilt,
+    dataUrl: localStorage.getItem('sticky-img-' + m.id)
+  })).filter(r => !!r.dataUrl);
+}
+function lsDelete(id){
+  const meta = lsMeta().filter(m => m.id !== id);
+  lsSetMeta(meta);
+  localStorage.removeItem('sticky-img-' + id);
+}
 
-/* ======= create sticky from an image URL ======= */
-function createSticky(src, isBlobUrl=false){
+/* --- persist a new file and return its record --- */
+async function persistFile(file, color, tilt){
+  const rec = { id: uuid(), createdAt: Date.now(), color, tilt };
+  if(PERSIST.mode === 'idb'){
+    // store blob directly
+    await idbAdd({ ...rec, blob: file });
+    return { ...rec, blob: file };
+  }else{
+    // fallback: store base64 (size-limited)
+    const dataUrl = await fileToDataURL(file);
+    lsAdd({ ...rec, dataUrl });
+    return { ...rec, dataUrl };
+  }
+}
+async function loadPersisted(){
+  if(PERSIST.mode === 'idb'){
+    return await idbGetAll();
+  }else{
+    return lsGetAll();
+  }
+}
+async function deletePersisted(id){
+  if(PERSIST.mode === 'idb'){
+    await idbDelete(id);
+  }else{
+    lsDelete(id);
+  }
+}
+
+/* ======= create sticky DOM ======= */
+function createSticky(src, { isBlobUrl=false, id=null, colorClass=null, tilt=null } = {}){
   removePlaceholder();
   noteCount++;
 
   const wrap = document.createElement('div');
-  const colorClass = pickColorClass();
-  wrap.className = `sticky ${colorClass}`;
-  wrap.style.setProperty('--tilt', randTilt());
+  const color = colorClass || pickColorClass();
+  const tlt   = tilt || randTilt();
+  wrap.className = `sticky ${color}`;
+  wrap.style.setProperty('--tilt', tlt);
+  if(id) wrap.dataset.id = id;
 
-  // header bar
   const bar = document.createElement('div');
   bar.className = 'bar';
-  bar.innerHTML = `<span class="badge">Q${noteCount}</span><span style="opacity:.7">pasted</span>`;
+  bar.innerHTML = `<span class="badge">Q${noteCount}</span><span style="opacity:.7">saved</span>`;
 
-  // image
   const img = document.createElement('img');
   img.alt = `Question ${noteCount}`;
   img.src = src;
 
-  // delete button
   const btn = document.createElement('button');
   btn.className = 'btn-del';
   btn.setAttribute('aria-label','Delete sticky');
   btn.textContent = '×';
 
-  btn.addEventListener('click',()=>{
+  btn.addEventListener('click', async ()=>{
     wrap.style.opacity = '0';
     wrap.style.transform = 'scale(.96)';
+    const stickyId = wrap.dataset.id;
+    try{ if(stickyId) await deletePersisted(stickyId); }catch(e){ console.warn('Delete failed', e); }
     setTimeout(()=>{
       if(isBlobUrl) URL.revokeObjectURL(src);
       wrap.remove();
       ensurePlaceholder();
-      updateLayout(); // NEW: update grid when items are removed
+      updateLayout();
     },140);
   });
 
@@ -376,11 +514,9 @@ function createSticky(src, isBlobUrl=false){
   wrap.appendChild(img);
   wrap.appendChild(btn);
   board.prepend(wrap); // newest on top
-
-  updateLayout(); // NEW: update grid after adding
 }
 
-/* ======= handle pasted images ======= */
+/* ======= handle pasted or dropped images ======= */
 function filesFromClipboard(dataTransfer){
   const items = dataTransfer?.items || [];
   const files = [];
@@ -395,16 +531,25 @@ function filesFromClipboard(dataTransfer){
 
 async function handleImages(files){
   if(!files.length){
-    processingNode.textContent = 'No images found in clipboard';
-    showProcessing(); hideProcessing();
-    processingNode.textContent = 'Processing…';
+    showProcessing('No images found in clipboard');
+    hideProcessing();
     return;
   }
-  showProcessing();
+  showProcessing('Saving…');
   for(const file of files){
-    const url = URL.createObjectURL(file);
-    createSticky(url, true);
+    const color = pickColorClass();
+    const tilt  = randTilt();
+    // persist first to get an id
+    const rec = await persistFile(file, color, tilt);
+
+    if(PERSIST.mode === 'idb'){
+      const url = URL.createObjectURL(file);
+      createSticky(url, { isBlobUrl:true, id: rec.id, colorClass: color, tilt });
+    }else{
+      createSticky(rec.dataUrl, { isBlobUrl:false, id: rec.id, colorClass: color, tilt });
+    }
   }
+  updateLayout();
   hideProcessing();
 }
 
@@ -451,15 +596,31 @@ function updateIcon(){
   themeBtn.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';
 }
 
-/* ======= smooth fade in ======= */
-document.addEventListener('DOMContentLoaded',()=>{
+/* ======= boot: fade in and load saved stickies ======= */
+document.addEventListener('DOMContentLoaded', async ()=>{
   const sheet=document.querySelector('.container');
   sheet.style.opacity='0';
-  setTimeout(()=>{
-    sheet.style.transition='opacity .6s ease';
-    sheet.style.opacity='1';
-    updateLayout(); // NEW: set initial grid
-  },80);
+  setTimeout(()=>{sheet.style.transition='opacity .6s ease';sheet.style.opacity='1'},80);
+
+  showProcessing('Loading saved…');
+  await initPersistence();
+
+  try{
+    const saved = await loadPersisted(); // ascending by createdAt
+    for(const rec of saved){
+      if(PERSIST.mode === 'idb'){
+        const url = URL.createObjectURL(rec.blob);
+        createSticky(url, { isBlobUrl:true, id: rec.id, colorClass: rec.color, tilt: rec.tilt });
+      }else{
+        createSticky(rec.dataUrl, { isBlobUrl:false, id: rec.id, colorClass: rec.color, tilt: rec.tilt });
+      }
+    }
+  }catch(e){
+    console.warn('Load failed', e);
+  }
+
+  updateLayout();
+  hideProcessing();
 });
 </script>
 </body>