feat: add main HTML with setup screen and slideshow view

2026-05-19 14:21:50 +10:00
parent 2a16d4c79e
commit e41d660105
1 changed files with 88 additions and 0 deletions
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <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">
+  <title>ImmichFrame</title>
+  <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>🖼️ ImmichFrame</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>
+            </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>
+
+        <!-- Start 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>
+        <button onclick="location.reload()">Retry</button>
+      </div>
+    </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>
+        <div id="date-display" class="date-display"></div>
+      </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>
+    </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>