diff options
| -rw-r--r-- | public/index.html | 41 | ||||
| -rw-r--r-- | src/icons.js | 2 | ||||
| -rw-r--r-- | src/icons/cached_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg | 1 | ||||
| -rw-r--r-- | src/icons/camera_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg | 1 | ||||
| -rw-r--r-- | src/index.js | 1 | ||||
| -rw-r--r-- | src/style.css | 16 |
6 files changed, 62 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html index 1af1745..a91266f 100644 --- a/public/index.html +++ b/public/index.html @@ -52,6 +52,47 @@ </template> </div> <div id="settings" class="hidden!"> + <form class="flex flex-col gap-4 m-auto max-w-3xl"> + <fieldset> + <h2> + <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" /> + </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]*" /> + </fieldset> + <input type="submit" value="Save" /> + </form> </div> </main> <footer class="w-full"> diff --git a/src/icons.js b/src/icons.js index 099db45..529d509 100644 --- a/src/icons.js +++ b/src/icons.js @@ -1,3 +1,5 @@ +import "./icons/cached_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg" +import "./icons/camera_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg" import "./icons/check_circle_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg" import "./icons/deselect_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg" import "./icons/download_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg" diff --git a/src/icons/cached_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg b/src/icons/cached_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..5e389dc --- /dev/null +++ b/src/icons/cached_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M482-160q-134 0-228-93t-94-227v-7l-64 64-56-56 160-160 160 160-56 56-64-64v7q0 100 70.5 170T482-240q26 0 51-6t49-18l60 60q-38 22-78 33t-82 11Zm278-161L600-481l56-56 64 64v-7q0-100-70.5-170T478-720q-26 0-51 6t-49 18l-60-60q38-22 78-33t82-11q134 0 228 93t94 227v7l64-64 56 56-160 160Z"/></svg>
\ No newline at end of file diff --git a/src/icons/camera_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg b/src/icons/camera_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..06d30f0 --- /dev/null +++ b/src/icons/camera_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M500-600q-11 0-17-10t0-20l117-203q8-13 20-15.5t26 4.5q69 31 122 86.5T850-632q5 13-1.5 22.5T828-600H500Zm-143 49L237-759q-8-13-4-26t16-21q48-34 106.5-54T480-880q15 0 33 1.5t30 3.5q14 2 18.5 12t-2.5 22L392-551q-6 10-17.5 10T357-551ZM114-400q-11 0-20-7.5T83-426q-2-11-2.5-24t-.5-30q0-63 20.5-125.5T164-724q11-14 25.5-14t22.5 15l168 293q6 10-.5 20T362-400H114Zm200 284q-66-32-121-87t-83-125q-5-13 2-22.5t21-9.5h326q11 0 17 10t0 20L361-129q-8 13-20 17t-27-4Zm166 36q-14 0-31.5-1.5T418-85q-14-2-19-12t2-22l165-288q6-10 20-10t20 10l118 205q7 11 4.5 24T712-154q-46 34-107.5 54T480-80Zm271-155L581-530q-6-10 .5-20t17.5-10h247q11 0 20 7.5t11 18.5q2 11 2.5 24t.5 30q0 63-20.5 126.5T796-235q-8 11-23 11.5T751-235Z"/></svg>
\ No newline at end of file diff --git a/src/index.js b/src/index.js index dea0b97..b0862c3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import "@fontsource/overpass" import "@fontsource/overpass/700.css" +import "@fontsource/overpass/500.css" import "./style.css" import Page from "./pages.js" import "./icons.js" diff --git a/src/style.css b/src/style.css index 5363742..d28de5a 100644 --- a/src/style.css +++ b/src/style.css @@ -82,6 +82,22 @@ main, #slideshow { ; } +/* settings */ +fieldset { + @apply border rounded-2xl p-6 border-gray-500 flex flex-col gap-4; +} + +fieldset h2 { + @apply font-bold text-blue-300 fill-blue-300 text-xl; +} +fieldset label { + @apply font-medium text-blue-300 +} + +fieldset input, fieldset select { + @apply rounded-2xl bg-zinc-800 p-4 +} + #menu a { @apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full hover:text-blue-300 hover:fill-blue-300 |
