diff options
Diffstat (limited to 'src/client/index.html')
| -rw-r--r-- | src/client/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/src/client/index.html b/src/client/index.html new file mode 100644 index 0000000..dcecf89 --- /dev/null +++ b/src/client/index.html @@ -0,0 +1,138 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> + <script src="/src/index.js" type="module" 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="/__spritemap#sprite-share"></use></svg></button> + <button id="download" class="svg-btn p-3 size-13"><svg alt="Download" class="size-7"><use href="/__spritemap#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="/__spritemap#sprite-skip_previous"></use></svg></button> + <button id="play-pause" class="svg-btn size-12"><svg alt="Pause" class="size-full"><use href="/__spritemap#sprite-pause"></use></svg></button> + <button id="next-slide" class="svg-btn size-12"><svg alt="Next Slide" class="size-full"><use href="/__spritemap#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="/__spritemap#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="/__spritemap#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="/__spritemap#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="/__spritemap#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="/__spritemap#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="/__spritemap#sprite-slideshow" ></use></svg><span class="max-[425px]:hidden">Slideshow</span></a> + <a class="nav-btn" href="/albums" ><svg class="size-6"><use href="/__spritemap#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="/__spritemap#sprite-settings" ></use></svg><span class="max-[425px]:hidden">Settings</span></a> + </div> + </div> + </footer> +</body> +</html> |