From be6f0fc30ff7511923934bc4a6bce1c0e6942444 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Tue, 19 May 2026 15:57:35 +1000
Subject: [PATCH] feat: add app icon, apple-touch-icon, theme-color meta

---
 public/index.html | 37 +++++++++----------------------------
 1 file changed, 9 insertions(+), 28 deletions(-)
diff --git a/public/index.html b/public/index.html
index 27b20a3..f924a15 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,43 +6,37 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="mobile-web-app-capable" content="yes">
+  <meta name="theme-color" content="#0f0f1a">
   <title>Frambe</title>
+  <link rel="icon" type="image/png" sizes="128x128" href="/img/icon.png">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
-  <!-- Setup Screen -->
   <div id="setup-screen" class="screen">
     <div class="setup-container">
       <div class="setup-header">
-        <h1>🖼️ Frambe</h1>
+        <img src="/img/icon.png" alt="Frambe" class="setup-logo">
+        <h1>Frambe</h1>
         <p class="subtitle" id="connection-status">Connecting to Immich…</p>
       </div>
-
       <div id="setup-content" class="setup-content">
-        <!-- Album Selection -->
         <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>
+              <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>
+              <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>
-
-        <!-- Start Button -->
-        <button id="btn-start" class="start-btn" disabled onclick="startSlideshow()">
-          ▶ Start Slideshow
-        </button>
+        <button id="btn-start" class="start-btn" disabled onclick="startSlideshow()">▶ Start Slideshow</button>
       </div>
-
       <div id="setup-error" class="setup-error" style="display:none">
         <p>⚠️ Cannot connect to Immich</p>
         <p class="error-detail" id="error-detail"></p>
@@ -51,16 +45,10 @@
     </div>
   </div>
 
-  <!-- Slideshow Screen -->
   <div id="slideshow-screen" class="screen" style="display:none">
-    <!-- Background blur layer -->
     <div id="bg-blur" class="bg-blur"></div>
-
-    <!-- Photo layers (double-buffered for crossfade) -->
     <div id="photo-layer-a" class="photo-layer active"></div>
     <div id="photo-layer-b" class="photo-layer"></div>
-
-    <!-- Overlay: Clock & Info -->
     <div id="overlay" class="overlay">
       <div class="overlay-top-right">
         <div id="clock" class="clock"></div>
@@ -68,21 +56,14 @@
       </div>
       <div class="overlay-bottom">
         <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 id="progress-bar" class="progress-bar"><div id="progress-fill" class="progress-fill"></div></div>
       </div>
     </div>
-
-    <!-- Touch/Click controls (invisible) -->
     <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>
-
-    <!-- Settings button (hidden until overlay shown) -->
     <button id="btn-settings" class="settings-btn" onclick="exitSlideshow()">✕</button>
   </div>
-
   <script src="/js/app.js"></script>
 </body>
 </html>
