feat: add app icon, apple-touch-icon, theme-color meta

This commit is contained in:
2026-05-19 15:57:35 +10:00
parent 00bfa926e4
commit be6f0fc30f
+9 -28
View File
@@ -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>