summaryrefslogtreecommitdiff
path: root/src/client/index.html
diff options
context:
space:
mode:
authorTim Keller <tjk@tjkeller.xyz>2025-12-20 12:20:32 -0600
committerTim Keller <tjk@tjkeller.xyz>2025-12-20 12:20:32 -0600
commite4ff6c4028c33feac03bb32bbd0eda84d8138a8f (patch)
tree600eec12afdec59c4ced8a7356932766192ad4c2 /src/client/index.html
parented9b272afedf93e3b5b4fba77e5213d07b976653 (diff)
downloadimmich-frame-e4ff6c4028c33feac03bb32bbd0eda84d8138a8f.tar.xz
immich-frame-e4ff6c4028c33feac03bb32bbd0eda84d8138a8f.zip
replace original client with static sveltekit site. Transition and refactor code for sveltekit. Add support for view transitions api.
Diffstat (limited to 'src/client/index.html')
-rw-r--r--src/client/index.html138
1 files changed, 0 insertions, 138 deletions
diff --git a/src/client/index.html b/src/client/index.html
deleted file mode 100644
index dcecf89..0000000
--- a/src/client/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!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">&bull; 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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-02 23:17:50 +0000