diff options
| author | Tim Keller <tjk@tjkeller.xyz> | 2025-06-17 20:10:49 -0500 |
|---|---|---|
| committer | Tim Keller <tjk@tjkeller.xyz> | 2025-06-17 20:10:49 -0500 |
| commit | 5f0de4dc873e3c0d71765022ffb4923812fd5c2e (patch) | |
| tree | cf54b5c2c52f7ef3621983a4fdb27cf7bf22a7af /public/index.html | |
| parent | 603fa41a483138e5782098d588f0fdc6eb9bcb1d (diff) | |
| download | immich-frame-5f0de4dc873e3c0d71765022ffb4923812fd5c2e.tar.xz immich-frame-5f0de4dc873e3c0d71765022ffb4923812fd5c2e.zip | |
settings page updated style
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 75 |
1 files changed, 47 insertions, 28 deletions
diff --git a/public/index.html b/public/index.html index a91266f..dc140fe 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ </head> <body class="bg-black text-white fill-white h-screen max-h-screen flex flex-col m-0 overflow-hidden"> <header></header> - <main> + <main class="my-4"> <div id="slideshow" class="hidden!"> <div id="slideshow-top-controls"> <div id="slideshow-share"> @@ -58,40 +58,59 @@ <svg class="size-6 inline"><use href="#sprite-camera"></use></svg> Immich Server </h2> - <label>Immich URL</label> - <input name="immich_url" type="text" /> - <label>Immich API Key</label> - <input name="immich_api_key" type="text" /> + <div> + <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>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> <h2> <svg class="size-6 inline"><use href="#sprite-photo_frame"></use></svg> Display </h2> - <label>Image Duration</label> - <input name="image_duration" type="text" pattern="[.0-9]*" /> - <label>Transition Duration</label> - <input name="transition_duration" type="text" pattern="[.0-9]*" /> - <label>Max Framerate</label> - <input name="max_framerate" type="text" pattern="[.0-9]*" /> - <label>Auto Transition</label> - <input name="auto_transition" type="checkbox" /> - <label>Display Size</label> - <select name="display_size"> - <option value="thumbnail">Thumbnail (~15 kB)</option> - <option value="preview">Standard (~150 kB)</option> - <option value="fullsize">Fullsize (5+ MB)</option> - </select> - </fieldset> - <fieldset> - <h2> - <svg class="size-6 inline"><use href="#sprite-cached"></use></svg> - Caching - </h2> - <label>Max Cached Assets</label> - <input name="max_cache_assets" type="text" pattern="[0-9]*" /> + <div class="grid grid-cols-[16fr_9fr] gap-6"> + <div> + <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" /> + <div> + <label>Transition Duration</label> + <p>Number of seconds each transition between images will take.<br>Set as 0 to disable.</p> + </div> + <input class="my-auto rounded-input" name="transition_duration" type="number" /> + <div> + <label>Max Framerate</label> + <p>Target display framerate.<br>Simple transitions look good as low as 12-15 fps.</p> + </div> + <input class="my-auto rounded-input" name="max_framerate" type="number" /> + <!--<div> + <label>Auto Transition</label> + <input name="auto_transition" type="checkbox" /> + </div>--> + <div> + <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 (~150 kB)</option> + <option value="fullsize">Original Image</option> + </select> + <div> + <label>Max Cached Assets</label> + <p>Number of assets that can exist at once in RAM.<br>Each additional asset will take ~2x the display size in memory.</p> + </div> + <input class="my-auto rounded-input" name="max_cache_assets" type="number" /> + </div> </fieldset> - <input type="submit" value="Save" /> + <input class="rounded-button ml-auto" type="submit" value="Save Settings" /> </form> </div> </main> |