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

fix: rewrite index.html to match CSS class names (v1.4.1)

Browse Source
This commit is contained in:
jessikitty
2026-06-09 16:05:28 +10:00
parent 6fef7b75cf
commit d871cb8145
1 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+45 -39
View File
@@ -6,70 +6,76 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#1a1510"> <meta name="theme-color" content="#0a0a0f">
<title>Frambe</title> <title>Frambe</title>
<link rel="icon" type="image/png" sizes="128x128" href="/img/icon.png"> <link rel="icon" type="image/png" sizes="128x128" href="/img/icon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
<div id="setup-screen" class="screen">
<div class="setup-container"> <!-- Setup Screen -->
<div class="setup-header"> <div id="setup-screen" class="setup-screen">
<img src="/img/icon.png" alt="Frambe" class="setup-logo"> <div class="setup-header">
<h1>Frambe</h1> <img src="/img/icon.png" alt="Frambe" class="setup-logo">
<p class="subtitle" id="connection-status">Connecting to Immich…</p> <h1>Fram<span>be</span></h1>
</div> <p id="connection-status">Connecting to Immich…</p>
<div id="setup-content" class="setup-content"> </div>
<div class="section"> <div id="setup-content" class="setup-body">
<h2>Select Photo Source</h2> <div>
<div class="source-buttons"> <div class="section-title">Photo Source</div>
<button id="btn-all-photos" class="source-btn" onclick="selectSource('random')"><span class="source-icon">🎲</span><span>Random Photos</span></button> <div class="source-buttons">
<button id="btn-favorites" class="source-btn" onclick="selectSource('favorites')"><span class="source-icon">⭐</span><span>Favorites</span></button> <button id="btn-all-photos" class="btn-source" onclick="selectSource('random')">🎲 Random</button>
</div> <button id="btn-favorites" class="btn-source" onclick="selectSource('favorites')">⭐ Favorites</button>
<div id="albums-list" class="albums-list"><p class="loading-text">Loading albums…</p></div>
</div> </div>
<button id="btn-start" class="start-btn" disabled onclick="startSlideshow()">▶ Start Slideshow</button>
</div> </div>
<div id="setup-error" class="setup-error" style="display:none"> <div>
<div class="section-title">Albums</div>
<div id="albums-list"><p class="loading-text">Loading albums…</p></div>
</div>
</div>
<div id="setup-error" class="setup-error" style="display:none">
<div class="error-box">
<p>⚠️ Cannot connect to Immich</p> <p>⚠️ Cannot connect to Immich</p>
<p class="error-detail" id="error-detail"></p> <p id="error-detail" style="margin-top:0.5rem;font-size:0.85rem;opacity:0.8"></p>
<button onclick="location.reload()">Retry</button> <button onclick="location.reload()" style="margin-top:0.75rem;padding:0.4rem 1rem;background:#6366f1;border:none;border-radius:6px;color:#fff;cursor:pointer">Retry</button>
</div> </div>
</div> </div>
<div class="setup-footer">
<button id="btn-start" class="btn-start" disabled onclick="startSlideshow()">▶ Start Slideshow</button>
</div>
</div> </div>
<div id="slideshow-screen" class="screen" style="display:none"> <!-- Slideshow Screen -->
<div id="slideshow-screen" class="slideshow-screen" style="display:none">
<div id="bg-blur" class="bg-blur"></div> <div id="bg-blur" class="bg-blur"></div>
<canvas id="pile-canvas"></canvas> <canvas id="pile-canvas"></canvas>
<div class="bg-vignette"></div>
<!-- Flexbox wrapper handles centering; animation lives on inner frame --> <div class="main-frame-wrap">
<div class="main-frame-wrapper">
<div id="main-frame" class="main-frame"> <div id="main-frame" class="main-frame">
<div class="frame-border"> <img id="main-photo" alt="">
<img id="main-photo" class="frame-media" alt=""> <video id="main-video" muted playsinline style="display:none"></video>
<video id="main-video" class="frame-media" muted playsinline style="display:none"></video>
</div>
</div> </div>
</div> </div>
<div id="overlay" class="overlay"> <div id="overlay" class="overlay">
<div class="overlay-top-right"> <div class="clock" id="clock"></div>
<div id="clock" class="clock"></div> <div class="date-display" id="date-display"></div>
<div id="date-display" class="date-display"></div> <div class="exif-info" id="exif-info"></div>
</div> <div class="progress-bar" id="progress-bar">
<div class="overlay-bottom"> <div class="progress-fill" id="progress-fill"></div>
<div id="exif-info" class="exif-info"></div>
<div id="progress-bar" class="progress-bar"><div id="progress-fill" class="progress-fill"></div></div>
</div> </div>
</div> </div>
<div class="touch-zone touch-left" onclick="prevPhoto()"></div> <div class="touch-zones">
<div class="touch-zone touch-center" onclick="toggleOverlay()"></div> <div onclick="prevPhoto()"></div>
<div class="touch-zone touch-right" onclick="nextPhoto()"></div> <div onclick="toggleOverlay()"></div>
<button id="btn-settings" class="settings-btn" onclick="exitSlideshow()">✕</button> <div onclick="nextPhoto()"></div>
</div>
<button id="btn-settings" class="btn-settings" onclick="exitSlideshow()">✕</button>
</div> </div>
<script src="/js/app.js"></script> <script src="/js/app.js"></script>
</body> </body>
</html> </html>