blob: a463429815cf1b7cd675a952ab1f6512b2e9cdd9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<script src="/main.js" defer></script>
</head>
<body class="bg-black text-white fill-white h-dvh max-h-screen flex flex-col m-0 overflow-hidden">
<header></header>
<main class="my-4 overflow-hidden h-full flex flex-col">
<!-- Slideshow Page -->
<div id="slideshow" class="hidden! overflow-hidden h-full flex flex-col">
<div class="flex justify-end pe-[10vw] w-full absolute bg-gradient-to-b from-black/40 z-20">
<div id="slideshow-share" class="z-10">
<button id="share" class="svg-btn p-3 size-13"><svg alt="Share" class="size-7"><use href="#sprite-share"></use></svg></button>
<button id="download" class="svg-btn p-3 size-13"><svg alt="Download" class="size-7"><use href="#sprite-download"></use></svg></button>
</div>
</div>
<div id="slideshow-carousel" class="h-full"></div>
<template id="carousel-cell-template">
<div class="carousel-cell"><img class="carousel-img" src="" /></div>
</template>
<div class="grid grid-cols-3 w-full max-w-3xl m-auto justify-items-center py-4">
<button id="prev-slide" class="svg-btn size-12"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
<button id="play-pause" class="svg-btn size-12"><svg alt="Pause" class="size-full"><use href="#sprite-pause"></use></svg></button>
<button id="next-slide" class="svg-btn size-12"><svg alt="Next Slide" class="size-full"><use href="#sprite-skip_next"></use></svg></button>
</div>
</div>
<!-- Albums Page -->
<div id="albums" class="hidden! overflow-y-scroll"><div class="px-4 m-auto max-w-3xl">
<div class="p-2 sticky top-0 z-20 bg-black">
<input class="rounded-input mx-auto mb-4 w-full" id="album-search" placeholder="Search your albums" />
<button id="albums-submit" class="rounded-btn">
<svg class="size-6"><use href="#sprite-check_circle"></use></svg>
Select
</button>
</div>
<div id="albums-container" class="m-auto z-10"></div>
<template id="album-template">
<div class="album group">
<svg class="opacity-0 self-center size-6 group-hover:opacity-50
group-data-selected:opacity-100 group-data-selected:fill-blue-300" alt="Select Album">
<use href="#sprite-check_circle"></use>
</svg>
<img class="aspect-square object-cover rounded-2xl group-hover:shadow-md" />
<div class="flex justify-between self-center text-lg">
<div>
<span class="album-name font-bold group-hover:text-blue-300"></span>
<div class="album-info">
<span><span class="album-assets-count"></span> items</span>
<span class="album-shared">• Shared</span>
</div>
</div>
</div>
<a target="_blank" class="opacity-0 group-hover:opacity-100 absolute bottom-4 right-4">
<svg class="size-6" alt="View album in Immich"><use href="#sprite-open_in_new"></use></svg>
</a>
</div>
</template>
</div></div>
<!-- Settings Page -->
<div id="settings" class="hidden! overflow-y-scroll">
<form class="flex flex-col gap-4 m-auto max-w-3xl mx-auto px-4">
<fieldset class="rounded-fieldset">
<h2 class="fieldset-header">
<svg class="size-6 inline"><use href="#sprite-camera"></use></svg>
Immich Server
</h2>
<div>
<label class="settings-label">Immich URL</label>
<p>Complete Immich base url (e.g. <span class="font-medium">http://immich.local</span>)</p>
</div>
<input class="rounded-input" name="immich_url" type="text" />
<div>
<label class="settings-label">Immich API Key</label>
<p>Generate an API key in User Settings</p>
</div>
<input class="rounded-input" name="immich_api_key" type="text" />
</fieldset>
<fieldset class="rounded-fieldset">
<h2 class="fieldset-header">
<svg class="size-6 inline"><use href="#sprite-photo_frame"></use></svg>
Display
</h2>
<div class="grid md:grid-cols-[16fr_9fr] gap-4">
<div>
<label class="settings-label">Image Duration</label>
<p>Number of seconds each image will be displayed.</p>
</div>
<input class="my-auto rounded-input" name="image_duration" type="number" step="0.1" />
<div>
<label class="settings-label">Transition Duration</label>
<p>Number of seconds each image transition will take.<br>Set as 0 to disable.</p>
</div>
<input class="my-auto rounded-input" name="transition_duration" type="number" step="0.1" />
<div>
<label class="settings-label">Max Framerate</label>
<p>Target display framerate.<br>Simple transitions look good at 12-15 fps.</p>
</div>
<input class="my-auto rounded-input" name="max_framerate" type="number" step="0.1" />
<div>
<label class="settings-label">Display Size</label>
<p>Image size to load on the display.<br>Large thumbnail size is suitable for FHD.</p>
</div>
<select class="my-auto rounded-input" name="display_size">
<option value="thumbnail">Small Thumbnail (~15 kB)</option>
<option value="preview">Large Thumbnail (~400 kB)</option>
<option value="fullsize">Original Image</option>
</select>
<div>
<label class="settings-label">Max Cached Assets</label>
<p>Number of assets that can exist at once in RAM.<br>Each asset will take ~10x the display size in memory.</p>
</div>
<input class="my-auto rounded-input" name="max_cache_assets" type="number" />
</div>
</fieldset>
<input id="settings-submit" class="rounded-btn ml-auto" type="submit" value="Save Settings" />
<br>
<div class="text-white/50 text-right flex flex-col gap-1">
<p>Immich Pix Frame</p>
<p>© <a class="text-white/70" href="https://tjkeller.xyz">Tim Keller</a> 2025</p>
<p>GPL-3.0 License</p>
<p><a class="text-white/70" href="https://github.com/tjkeller-xyz/immich-pix-frame">View Source</a></p>
</div>
</form>
</div>
</main>
<footer class="w-full">
<div class="max-w-5xl m-auto">
<div id="menu" class="flex w-full p-2 gap-4 box-border border-t border-gray-500">
<a class="nav-btn" href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow" ></use></svg><span class="max-[425px]:hidden">Slideshow</span></a>
<a class="nav-btn" href="/albums" ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span class="max-[425px]:hidden">Albums</span></a>
<a class="nav-btn" href="/settings" ><svg class="size-6"><use href="#sprite-settings" ></use></svg><span class="max-[425px]:hidden">Settings</span></a>
</div>
</div>
</footer>
</body>
</html>
|
