Update static/index.html

static/index.html

@@ -9,14 +9,32 @@
     --bg:#0b1220; --panel:#121a2e; --muted:#9fb0cf; --text:#e6edf7;
     --accent:#3a8dde; --accent2:#6ea8ff; --ok:#2ecc71; --warn:#ffb020; --danger:#ff6b6b;
     --radius:16px; --shadow:0 12px 30px rgba(0,0,0,.35);
+    --panelW:360px; --panelPeek:14px;
   }
   *{box-sizing:border-box}
   html,body{height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
-  #app{display:grid; grid-template-columns: 360px 1fr; height:100%}
 
-  /* Sidebar */
-  #panel{background:linear-gradient(180deg,#121a2e,#0e162b); border-right:1px solid #1e2844; padding:16px; overflow:auto; position:relative; transition:transform .28s ease; box-shadow:var(--shadow); z-index:5;}
-  #panel.min{transform:translateX(-100%)}
+  /* App container just hosts overlays; stage lives full-screen behind */
+  #app{position:relative; height:100vh; width:100vw; overflow:hidden}
+
+  /* Stage is full-viewport, underlays everything (so BG truly covers screen) */
+  #stage{position:fixed; inset:0; width:100vw; height:100vh; overflow:hidden; background:#000; user-select:none; z-index:0}
+  .bgmedia{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
+  #overlay{position:absolute; inset:0; z-index:2}
+  #stageMsg{position:absolute; top:12px; right:12px; background:rgba(10,14,30,.55); border:1px solid #2a3a63; padding:8px 12px; border-radius:12px; z-index:4; backdrop-filter: blur(4px); font-size:.9rem}
+
+  /* Sidebar overlays the stage */
+  #panel{
+    position:fixed; top:0; left:0; height:100vh; width:var(--panelW);
+    background:linear-gradient(180deg,#121a2e,#0e162b);
+    border-right:1px solid #1e2844; padding:16px; overflow:auto;
+    transition:transform .28s ease; box-shadow:var(--shadow); z-index:5;
+    transform:translateX(0);
+  }
+  #panel.min{
+    /* Collapse so only a tiny sliver remains visible */
+    transform:translateX(calc(-100% + var(--panelPeek)));
+  }
   #panel h2{margin:.3rem 0 1rem; font-size:1.05rem; color:#cfe0ff}
   fieldset{border:1px solid #2a395f; border-radius:12px; padding:12px; margin:10px 0}
   legend{font-size:.9rem; color:#bcd0ff; padding:0 6px}
@@ -35,28 +53,44 @@
   .badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; background:#1b2b54; color:#cfe0ff}
   .hr{height:1px; background:#203059; margin:12px 0}
 
-  /* Panel toggle */
-  #toggle{position:absolute; left:355px; top:12px; z-index:6; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#0d1a36; border:1px solid #2a395f;}
-  #panel.min + #toggle{left:8px}
-  #saveState{position:absolute; bottom:10px; right:12px; font-size:.8rem; border-radius:999px; padding:6px 10px; opacity:.9}
+  /* Panel toggle sits near the left edge whether expanded or collapsed */
+  #toggle{
+    position:fixed; top:12px; left:calc(var(--panelW) + 8px);
+    z-index:6; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
+    background:#0d1a36; border:1px solid #2a395f;
+    transition:left .28s ease;
+  }
+  #panel.min + #toggle{ left:16px; }
 
-  /* Stage */
-  #stage{position:relative; height:100%; width:100%; overflow:hidden; background:#000; user-select:none}
-  .bgmedia{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
-  #overlay{position:absolute; inset:0; z-index:2}
-  #stageMsg{position:absolute; top:12px; right:12px; background:rgba(10,14,30,.55); border:1px solid #2a3a63; padding:8px 12px; border-radius:12px; z-index:4; backdrop-filter: blur(4px); font-size:.9rem}
+  #saveState{position:fixed; bottom:12px; left:calc(var(--panelW) + 12px); font-size:.8rem; border-radius:999px; padding:6px 10px; opacity:.9; z-index:4; transition:left .28s ease}
+  #panel.min ~ #stage #saveState, #panel.min ~ #saveState { left:28px; }
 
-  /* Pins and popups */
-  .pin{position:absolute; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.5); box-shadow:0 2px 10px rgba(0,0,0,.45); transform:translate(-50%, -50%); z-index:3}
-  .pin:hover{background:rgba(255,255,255,.35)}
-  .popup{position:absolute; z-index:4; transform: translate(-50%, calc(-100% - 12px)); background:rgba(13,20,40,.92); border:1px solid #2a395f; border-radius:16px; box-shadow:var(--shadow); padding:10px; min-width:200px; max-width:min(40vw, 520px); backdrop-filter: blur(6px)}
-  .popup header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
-  .popup h4{margin:0; font-size:.95rem; color:#d9e6ff}
-  .x{background:transparent; border:none; color:#cfe0ff; font-size:18px; padding:4px 8px}
-  .media{width:100%; height:auto; border-radius:12px; overflow:hidden; display:block; background:#000}
-  .media video{width:100%; height:auto; display:block}
-  .media img{width:100%; height:auto; display:block}
+  /* Pins (bigger + more transparent) */
+  .pin{
+    position:absolute; width:26px; height:26px; border-radius:50%;
+    background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.45);
+    box-shadow:0 2px 10px rgba(0,0,0,.45); transform:translate(-50%, -50%); z-index:3;
+  }
+  .pin:hover{background:rgba(255,255,255,.26)}
+
+  /* Popups: centered exactly on the pin midpoint */
+  .popup{
+    position:absolute; z-index:4;
+    transform: translate(-50%, -50%); /* center on pin */
+    background:rgba(13,20,40,.92); border:1px solid #2a395f; border-radius:16px; box-shadow:var(--shadow);
+    padding:0; min-width:200px; max-width:min(40vw, 520px); backdrop-filter: blur(6px);
+  }
+  /* Make header overlay so media stays geometrically centered */
+  .popup header{
+    position:absolute; top:6px; right:6px; left:auto;
+    display:flex; align-items:center; gap:8px; margin:0; padding:0;
+  }
+  .popup h4{margin:0; font-size:.95rem; color:#d9e6ff; background:rgba(0,0,0,.35); padding:6px 10px; border-radius:10px}
+  .x{background:rgba(0,0,0,.35); border:1px solid #2a395f; color:#cfe0ff; font-size:16px; padding:6px 8px; border-radius:10px}
 
+  .media{display:block; width:100%; height:auto; border-radius:16px; overflow:hidden; background:#000}
+  .media video, .media img{display:block; width:100%; height:auto}
+  
   /* Items list */
   .item{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:8px; border:1px solid #21345d; border-radius:10px; margin:8px 0; background:#0e1834}
   .item .name{font-size:.9rem}
@@ -139,8 +173,9 @@
     <video id="bgVid" class="bgmedia" autoplay muted loop playsinline style="display:none"></video>
     <div id="overlay" title="Click to place when in placement mode"></div>
     <div id="stageMsg" style="display:none"></div>
-    <button id="saveState" class="btn-ghost">Saved</button>
   </main>
+
+  <button id="saveState" class="btn-ghost">Saved</button>
 </div>
 
 <script>
@@ -279,13 +314,14 @@
   }
 
   function adjustPopupPosition(el){
+    // Keep centered popup fully within viewport by nudging
     const rect = el.getBoundingClientRect();
     const margin = 8; let dx=0, dy=0;
     if (rect.left < margin) dx = margin - rect.left;
     if (rect.right > innerWidth - margin) dx = (innerWidth - margin) - rect.right;
     if (rect.top < margin) dy = margin - rect.top;
     if (rect.bottom > innerHeight - margin) dy = (innerHeight - margin) - rect.bottom;
-    if (dx || dy) el.style.transform += ` translate(${dx}px, ${dy}px)`;
+    if (dx || dy) el.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px))`;
   }
 
   function renderItems(){
@@ -302,15 +338,19 @@
       if (it.open){
         const pop = document.createElement('div'); pop.className='popup';
         pop.style.left = it.x+'%'; pop.style.top = it.y+'%'; pop.style.width = it.widthPct+'vw';
+
         const header = document.createElement('header');
         const h4 = document.createElement('h4'); h4.textContent = it.title || (it.type==='image'?'Image':'Video');
         const close = document.createElement('button'); close.className='x'; close.innerHTML='&times;';
         close.addEventListener('click', e=>{ e.stopPropagation(); it.open=false; renderItems(); });
         header.append(h4, close); pop.appendChild(header);
+
         const wrap = document.createElement('div'); wrap.className='media';
         if (it.type==='video'){ const v = document.createElement('video'); v.src=it.src; v.controls=true; v.playsInline=true; wrap.appendChild(v); }
         else { const img = document.createElement('img'); img.src=it.src; img.alt=it.title||'Image'; wrap.appendChild(img); }
-        pop.appendChild(wrap); overlay.appendChild(pop);
+        pop.appendChild(wrap);
+
+        overlay.appendChild(pop);
         requestAnimationFrame(()=>adjustPopupPosition(pop));
       }
     }
@@ -390,15 +430,11 @@
   });
 
   // Misc
-  function flash(msg){
-    stageMsg.textContent = msg;
-    stageMsg.style.display='block'; stageMsg.style.opacity='1';
-    setTimeout(()=>{ stageMsg.style.transition='opacity .4s'; stageMsg.style.opacity='0';
-      setTimeout(()=>{ stageMsg.style.display='none'; stageMsg.style.transition=''; }, 450);
-    }, 900);
-  }
   window.addEventListener('resize', ()=>{
-    $$('.popup').forEach(el => { el.style.transform='translate(-50%, calc(-100% - 12px))'; requestAnimationFrame(()=>adjustPopupPosition(el)); });
+    $$('.popup').forEach(el => {
+      el.style.transform='translate(-50%, -50%)';
+      requestAnimationFrame(()=>adjustPopupPosition(el));
+    });
   });
   stage.addEventListener('click', e => {
     if (state.placingId) return; // placement handled on overlay