jessikitty/frambe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat(1.3.0): new DOM structure with photo pile, main polaroid/filmstrip frame, video element

Browse Source
This commit is contained in:
jessikitty
2026-05-19 21:44:28 +10:00
parent c2b40db843
commit 9ab2dc7578
1 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+23 -11
View File
@@ -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>