82 lines
3.0 KiB
HTML
82 lines
3.0 KiB
HTML
<!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">
|
|
<meta name="theme-color" content="#0a0a0f">
|
|
<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="setup-screen">
|
|
<div class="setup-header">
|
|
<img src="/img/icon.png" alt="Frambe" class="setup-logo">
|
|
<h1>Fram<span>be</span></h1>
|
|
<p id="connection-status">Connecting to Immich…</p>
|
|
</div>
|
|
<div id="setup-content" class="setup-body">
|
|
<div>
|
|
<div class="section-title">Photo Source</div>
|
|
<div class="source-buttons">
|
|
<button id="btn-all-photos" class="btn-source" onclick="selectSource('random')">🎲 Random</button>
|
|
<button id="btn-favorites" class="btn-source" onclick="selectSource('favorites')">⭐ Favorites</button>
|
|
</div>
|
|
</div>
|
|
<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 id="error-detail" style="margin-top:0.5rem;font-size:0.85rem;opacity:0.8"></p>
|
|
<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 class="setup-footer">
|
|
<button id="btn-start" class="btn-start" disabled onclick="startSlideshow()">▶ Start Slideshow</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slideshow Screen -->
|
|
<div id="slideshow-screen" class="slideshow-screen" style="display:none">
|
|
<div id="bg-blur" class="bg-blur"></div>
|
|
<canvas id="pile-canvas"></canvas>
|
|
|
|
<div class="main-frame-wrap">
|
|
<div id="main-frame" class="main-frame">
|
|
<img id="main-photo" alt="">
|
|
<video id="main-video" muted playsinline style="display:none"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="overlay" class="overlay">
|
|
<div class="clock" id="clock"></div>
|
|
<div class="date-display" id="date-display"></div>
|
|
<div class="exif-info" id="exif-info"></div>
|
|
<div class="progress-bar" id="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="touch-zones">
|
|
<div onclick="prevPhoto()"></div>
|
|
<div onclick="toggleOverlay()"></div>
|
|
<div onclick="nextPhoto()"></div>
|
|
</div>
|
|
|
|
<button id="btn-settings" class="btn-settings" onclick="exitSlideshow()">✕</button>
|
|
</div>
|
|
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|