From 603fa41a483138e5782098d588f0fdc6eb9bcb1d Mon Sep 17 00:00:00 2001
From: Tim Keller <tjk@tjkeller.xyz>
Date: Mon, 16 Jun 2025 22:55:44 -0500
Subject: add basic settings page

---
 public/index.html                                  | 41 ++++++++++++++++++++++
 src/icons.js                                       |  2 ++
 ...ched_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg |  1 +
 ...mera_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg |  1 +
 src/index.js                                       |  1 +
 src/style.css                                      | 16 +++++++++
 6 files changed, 62 insertions(+)
 create mode 100644 src/icons/cached_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
 create mode 100644 src/icons/camera_24dp_E3E3E3_FILL1_wght400_GRAD0_opsz24.svg

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
-- 
cgit v1.2.3