From 9ab2dc7578a65fda10eacf046041e511b96b48c7 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Tue, 19 May 2026 21:44:28 +1000
Subject: [PATCH] feat(1.3.0): new DOM structure with photo pile, main
 polaroid/filmstrip frame, video element

---
 public/index.html | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index f924a15..4967e60 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,16 +24,10 @@
         <div class="section">
           <h2>Select Photo Source</h2>
           <div class="source-buttons">
-            <button id="btn-all-photos" class="source-btn" onclick="selectSource('random')">
-              <span class="source-icon">🎲</span><span>Random Photos</span>
-            </button>
-            <button id="btn-favorites" class="source-btn" onclick="selectSource('favorites')">
-              <span class="source-icon">⭐</span><span>Favorites</span>
-            </button>
-          </div>
-          <div id="albums-list" class="albums-list">
-            <p class="loading-text">Loading albums…</p>
+            <button id="btn-all-photos" class="source-btn" onclick="selectSource('random')"><span class="source-icon">🎲</span><span>Random Photos</span></button>
+            <button id="btn-favorites" class="source-btn" onclick="selectSource('favorites')"><span class="source-icon">⭐</span><span>Favorites</span></button>
           </div>
+          <div id="albums-list" class="albums-list"><p class="loading-text">Loading albums…</p></div>
         </div>
         <button id="btn-start" class="start-btn" disabled onclick="startSlideshow()">▶ Start Slideshow</button>
       </div>
@@ -47,8 +41,25 @@
 
   <div id="slideshow-screen" class="screen" style="display:none">
     <div id="bg-blur" class="bg-blur"></div>
-    <div id="photo-layer-a" class="photo-layer active"></div>
-    <div id="photo-layer-b" class="photo-layer"></div>
+    <div class="bg-vignette"></div>
+
+    <div id="photo-pile">
+      <div class="pile-frame" id="pile-0"><div class="pile-inner"></div></div>
+      <div class="pile-frame" id="pile-1"><div class="pile-inner"></div></div>
+      <div class="pile-frame" id="pile-2"><div class="pile-inner"></div></div>
+      <div class="pile-frame" id="pile-3"><div class="pile-inner"></div></div>
+      <div class="pile-frame" id="pile-4"><div class="pile-inner"></div></div>
+    </div>
+
+    <div id="main-frame" class="main-frame polaroid">
+      <div class="frame-border">
+        <img id="main-photo" class="frame-media" alt="">
+        <video id="main-video" class="frame-media" muted playsinline style="display:none"></video>
+      </div>
+      <div class="filmstrip-top"></div>
+      <div class="filmstrip-bottom"></div>
+    </div>
+
     <div id="overlay" class="overlay">
       <div class="overlay-top-right">
         <div id="clock" class="clock"></div>
@@ -59,6 +70,7 @@
         <div id="progress-bar" class="progress-bar"><div id="progress-fill" class="progress-fill"></div></div>
       </div>
     </div>
+
     <div class="touch-zone touch-left" onclick="prevPhoto()"></div>
     <div class="touch-zone touch-center" onclick="toggleOverlay()"></div>
     <div class="touch-zone touch-right" onclick="nextPhoto()"></div>