Improve settings

src/main/java/dev/kruhlmann/imgfloat/config/SchemaMigration.java

@@ -29,13 +29,13 @@ public class SchemaMigration implements ApplicationRunner {
     }
 
     private void cleanupSpringSessionTables() {
-        try {
+        // try {
-            jdbcTemplate.execute("DELETE FROM SPRING_SESSION_ATTRIBUTES");
+        //     jdbcTemplate.execute("DELETE FROM SPRING_SESSION_ATTRIBUTES");
-            jdbcTemplate.execute("DELETE FROM SPRING_SESSION");
+        //     jdbcTemplate.execute("DELETE FROM SPRING_SESSION");
-            logger.info("Cleared persisted Spring Session tables on startup to avoid stale session conflicts");
+        //     logger.info("Cleared persisted Spring Session tables on startup to avoid stale session conflicts");
-        } catch (DataAccessException ex) {
+        // } catch (DataAccessException ex) {
-            logger.debug("Spring Session tables not available for cleanup", ex);
+        //     logger.debug("Spring Session tables not available for cleanup", ex);
-        }
+        // }
     }
 
     private void ensureChannelCanvasColumns() {

src/main/java/dev/kruhlmann/imgfloat/config/SecurityConfig.java

@@ -20,32 +20,31 @@ public class SecurityConfig {
     @Bean
     SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
         http
-                .authorizeHttpRequests(auth -> auth
+            .authorizeHttpRequests(auth -> auth
-                        .requestMatchers(
+                .requestMatchers(
-                                "/",
+                        "/",
-                                "/css/**",
+                        "/css/**",
-                                "/js/**",
+                        "/js/**",
-                                "/webjars/**",
+                        "/webjars/**",
-                                "/actuator/health",
+                        "/actuator/health",
-                                "/v3/api-docs/**",
+                        "/v3/api-docs/**",
-                                "/swagger-ui.html",
+                        "/swagger-ui.html",
-                                "/swagger-ui/**",
+                        "/swagger-ui/**",
-                                "/channels"
+                        "/channels"
-                        ).permitAll()
+                ).permitAll()
-                        .requestMatchers(HttpMethod.GET, "/view/*/broadcast").permitAll()
+                .requestMatchers(HttpMethod.GET, "/view/*/broadcast").permitAll()
-                        .requestMatchers(HttpMethod.GET, "/api/channels").permitAll()
+                .requestMatchers(HttpMethod.GET, "/api/channels").permitAll()
-                        .requestMatchers(HttpMethod.GET, "/api/channels/*/assets/visible").permitAll()
+                .requestMatchers(HttpMethod.GET, "/api/channels/*/assets/visible").permitAll()
-                        .requestMatchers(HttpMethod.GET, "/api/channels/*/canvas").permitAll()
+                .requestMatchers(HttpMethod.GET, "/api/channels/*/canvas").permitAll()
-                        .requestMatchers(HttpMethod.GET, "/api/channels/*/assets/*/content").permitAll()
+                .requestMatchers(HttpMethod.GET, "/api/channels/*/assets/*/content").permitAll()
-                        .requestMatchers("/ws/**").permitAll()
+                .requestMatchers("/ws/**").permitAll()
-                        .anyRequest().authenticated()
+                .anyRequest().authenticated()
-                )
+            )
-                .oauth2Login(oauth -> oauth
+            .oauth2Login(oauth -> oauth
-                        .tokenEndpoint(token -> token.accessTokenResponseClient(twitchAccessTokenResponseClient()))
+                .tokenEndpoint(token -> token.accessTokenResponseClient(twitchAccessTokenResponseClient()))
-                        .userInfoEndpoint(user -> user.userService(twitchOAuth2UserService()))
+                .userInfoEndpoint(user -> user.userService(twitchOAuth2UserService())))
-                )
+            .logout(logout -> logout.logoutSuccessUrl("/").permitAll())
-                .logout(logout -> logout.logoutSuccessUrl("/").permitAll())
+            .csrf(csrf -> csrf.ignoringRequestMatchers("/ws/**", "/api/**"));
-                .csrf(csrf -> csrf.ignoringRequestMatchers("/ws/**", "/api/**"));
         return http.build();
     }
 

src/main/java/dev/kruhlmann/imgfloat/config/SystemEnvironmentValidator.java

@@ -55,14 +55,11 @@ public class SystemEnvironmentValidator {
             );
         }
 
-        log.info("Environment validation successful.");
+        log.info("Environment validation successful:");
-        log.info("Configuration:");
         log.info(" - TWITCH_CLIENT_ID: {}", redact(twitchClientId));
         log.info(" - TWITCH_CLIENT_SECRET: {}", redact(twitchClientSecret));
-        log.info(" - SPRING_SERVLET_MULTIPART_MAX_FILE_SIZE: {} ({} bytes)",
+        log.info(" - SPRING_SERVLET_MULTIPART_MAX_FILE_SIZE: {} ({} bytes)", springMaxFileSize, maxUploadBytes);
-                springMaxFileSize, maxUploadBytes);
+        log.info(" - SPRING_SERVLET_MULTIPART_MAX_REQUEST_SIZE: {} ({} bytes)", springMaxRequestSize, maxRequestBytes);
-        log.info(" - SPRING_SERVLET_MULTIPART_MAX_REQUEST_SIZE: {} ({} bytes)",
-                springMaxRequestSize, maxRequestBytes);
         log.info(" - IMGFLOAT_DB_PATH: {}", dbPath);
         log.info(" - IMGFLOAT_INITIAL_TWITCH_USERNAME_SYSADMIN: {}", initialSysadmin);
         log.info(" - IMGFLOAT_ASSETS_PATH: {}", assetsPath);
@@ -70,20 +67,23 @@ public class SystemEnvironmentValidator {
     }
 
     private void checkString(String value, String name, StringBuilder missing) {
-        if (!StringUtils.hasText(value) || "changeme".equalsIgnoreCase(value.trim())) {
+        if (value != null && StringUtils.hasText(value)) {
-            missing.append(" - ").append(name).append("\n");
+            return
         }
+        missing.append(" - ").append(name).append("\n");
     }
 
     private <T extends Number> void checkUnsignedNumeric(T value, String name, StringBuilder missing) {
-        if (value == null || value.doubleValue() <= 0) {
+        if (value !== null && value.doubleValue() >= 0) {
-            missing.append(" - ").append(name).append('\n');
+            return;
         }
+        missing.append(" - ").append(name).append('\n');
     }
 
     private String redact(String value) {
-        if (!StringUtils.hasText(value)) return "(missing)";
+        if (value != null && StringUtils.hasText(value)) {
-        if (value.length() <= 6) return "******";
+            return "**************";
-        return value.substring(0, 2) + "****" + value.substring(value.length() - 2);
+        };
+        return "<not set>";
     }
 }

src/main/java/dev/kruhlmann/imgfloat/config/TwitchAuthorizationCodeGrantRequestEntityConverter.java

@@ -41,10 +41,11 @@ final class TwitchAuthorizationCodeGrantRequestEntityConverter implements
         }
 
         return new RequestEntity<>(
-                body,
+            body,
-                entity.getHeaders(),
+            entity.getHeaders(),
-                entity.getMethod() == null ? HttpMethod.POST : entity.getMethod(),
+            entity.getMethod() == null ? HttpMethod.POST : entity.getMethod(),
-                entity.getUrl() == null ? URI.create(registration.getProviderDetails().getTokenUri()) : entity.getUrl());
+            entity.getUrl() == null ? URI.create(registration.getProviderDetails().getTokenUri()) : entity.getUrl()
+        );
     }
 
     private MultiValueMap<String, String> cloneBody(MultiValueMap<?, ?> existingBody) {

src/main/java/dev/kruhlmann/imgfloat/controller/ViewController.java

@@ -68,6 +68,21 @@ public class ViewController {
         return "channels";
     }
 
+    @org.springframework.web.bind.annotation.GetMapping("/settings")
+    public String settingsView(OAuth2AuthenticationToken oauthToken, Model model) {
+        String sessionUsername = OauthSessionUser.from(oauthToken).login();
+        authorizationService.userIsSystemAdministratorOrThrowHttpError(sessionUsername);
+        LOG.info("Rendering settings for {}", sessionUsername);
+        Settings settings = settingsService.get();
+        try {
+            model.addAttribute("settingsJson", objectMapper.writeValueAsString(settings));
+        } catch (JsonProcessingException e) {
+            LOG.error("Failed to serialize settings for settings view", e);
+            throw new ResponseStatusException(INTERNAL_SERVER_ERROR, "Failed to serialize settings");
+        }
+        return "settings";
+    }
+
     @org.springframework.web.bind.annotation.GetMapping("/view/{broadcaster}/admin")
     public String adminView(@org.springframework.web.bind.annotation.PathVariable("broadcaster") String broadcaster,
                             OAuth2AuthenticationToken oauthToken,

src/main/java/dev/kruhlmann/imgfloat/model/Asset.java

@@ -16,15 +16,16 @@ import java.util.UUID;
 public class Asset {
     @Id
     private String id;
-
     @Column(nullable = false)
     private String broadcaster;
-
     @Column(nullable = false)
     private String name;
-
+    @Column(columnDefinition = "TEXT", nullable = false)
-    @Column(columnDefinition = "TEXT")
     private String url;
+    @Column(columnDefinition = "TEXT", nullable = false)
+    private String preview;
+    @Column(nullable = false)
+    private Instant createdAt;
     private double x;
     private double y;
     private double width;
@@ -34,8 +35,6 @@ public class Asset {
     private Boolean muted;
     private String mediaType;
     private String originalMediaType;
-    @Column(columnDefinition = "TEXT")
-    private String preview;
     private Integer zIndex;
     private Boolean audioLoop;
     private Integer audioDelayMillis;
@@ -43,7 +42,6 @@ public class Asset {
     private Double audioPitch;
     private Double audioVolume;
     private boolean hidden;
-    private Instant createdAt;
 
     public Asset() {
     }
@@ -61,7 +59,7 @@ public class Asset {
         this.speed = 1.0;
         this.muted = false;
         this.zIndex = 1;
-        this.hidden = false;
+        this.hidden = true;
         this.createdAt = Instant.now();
     }
 

src/main/java/dev/kruhlmann/imgfloat/model/AssetEvent.java

@@ -44,12 +44,13 @@ public class AssetEvent {
         return event;
     }
 
-    public static AssetEvent visibility(String channel, AssetPatch patch) {
+    public static AssetEvent visibility(String channel, AssetPatch patch, AssetView asset) {
         AssetEvent event = new AssetEvent();
         event.type = Type.VISIBILITY;
         event.channel = channel;
         event.patch = patch;
         event.assetId = patch.id();
+        event.payload = asset;
         return event;
     }
 

src/main/resources/static/css/styles.css

@@ -59,7 +59,7 @@ body {
     font-size: 13px;
 }
 
-.channels-body {
+.channels-body, .settings-body {
     min-height: 100vh;
     background: radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.16), transparent 30%),
                 radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.18), transparent 28%),
@@ -70,14 +70,14 @@ body {
     padding: clamp(24px, 4vw, 48px);
 }
 
-.channels-shell {
+.channels-shell, .settings-shell {
     width: min(760px, 100%);
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
-.channels-header {
+.channels-header, .settings-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -88,6 +88,23 @@ body {
     margin: 0;
 }
 
+.settings-main {
+    display: flex;
+    justify-content: center;
+}
+
+.settings-card {
+    width: 100%;
+    background: rgba(11, 18, 32, 0.95);
+    border: 1px solid #1f2937;
+    border-radius: 16px;
+    padding: clamp(20px, 3vw, 32px);
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
 .channels-main {
     display: flex;
     justify-content: center;
@@ -116,6 +133,13 @@ body {
     margin-top: 6px;
 }
 
+.settings-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 6px;
+}
+
 .channels-footer {
     display: flex;
     align-items: center;
@@ -252,6 +276,19 @@ body {
     box-shadow: 0 10px 30px rgba(124, 58, 237, 0.25);
 }
 
+.button:disabled, button:disabled, .button[aria-disabled="true"] {
+    background: #a78bfa;
+    color: #e5e7eb;
+    cursor: not-allowed;
+    box-shadow: none;
+    opacity: 0.7;
+}
+
+.button:disabled:hover,
+button:disabled:hover {
+    transform: none;
+}
+
 .button.block {
     width: 100%;
 }
@@ -333,6 +370,18 @@ body {
     box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
 }
 
+.text-input:disabled, .text-input[aria-disabled="true"] {
+    background: #020617;
+    border-color: #334155;
+    color: #64748b;
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.text-input:disabled::placeholder {
+    color: #475569;
+}
+
 .search-form {
     display: flex;
     flex-direction: column;

src/main/resources/static/js/broadcast.js

@@ -87,11 +87,7 @@ function connect() {
                 return r.json();
             })
             .then(renderAssets)
-            .catch(() => {
+            .catch(() => showToast('Unable to load overlay assets. Retrying may help.', 'error'));
-                if (typeof showToast === 'function') {
-                    showToast('Unable to load overlay assets. Retrying may help.', 'error');
-                }
-            });
     });
 }
 
@@ -108,7 +104,7 @@ function storeAsset(asset, placement = 'keep') {
 }
 
 function fetchCanvasSettings() {
-    return fetch(`/api/channels/${broadcaster}/canvas`)
+    return fetch(`/api/channels/${encodeURIComponent(broadcaster)}/canvas`)
         .then((r) => {
             if (!r.ok) {
                 throw new Error('Failed to load canvas');
@@ -121,9 +117,7 @@ function fetchCanvasSettings() {
         })
         .catch(() => {
             resizeCanvas();
-            if (typeof showToast === 'function') {
+            showToast('Using default canvas size. Unable to load saved settings.', 'warning');
-                showToast('Using default canvas size. Unable to load saved settings.', 'warning');
-            }
         });
 }
 
@@ -676,7 +670,7 @@ function setVideoSource(element, asset) {
             return;
         }
         applyVideoSource(element, next.objectUrl, asset);
-    }).catch(() => {});
+    }).catch(() => { });
 }
 
 function applyVideoSource(element, objectUrl, asset) {

src/main/resources/static/js/dashboard.js

@@ -119,26 +119,22 @@ function fetchAdmins() {
         .then(renderAdmins)
         .catch(() => {
             renderAdmins([]);
-            if (typeof showToast === 'function') {
+            showToast('Unable to load admins right now. Please try again.', 'error');
-                showToast('Unable to load admins right now. Please try again.', 'error');
-            }
         });
 }
 
 function removeAdmin(username) {
     if (!username) return;
-    fetch(`/api/channels/${broadcaster}/admins/${encodeURIComponent(username)}`, {
+    fetch(`/api/channels/${encodeURIComponent(broadcaster)}/admins/${encodeURIComponent(username)}`, {
         method: 'DELETE'
     }).then((response) => {
-        if (!response.ok && typeof showToast === 'function') {
+        if (!response.ok) {
-            showToast('Failed to remove admin. Please retry.', 'error');
+            throw new Error();
         }
         fetchAdmins();
         fetchSuggestedAdmins();
     }).catch(() => {
-        if (typeof showToast === 'function') {
+        showToast('Failed to remove admin. Please retry.', 'error');
-            showToast('Failed to remove admin. Please retry.', 'error');
-        }
     });
 }
 
@@ -146,9 +142,7 @@ function addAdmin(usernameFromAction) {
     const input = document.getElementById('new-admin');
     const username = (usernameFromAction || input?.value || '').trim();
     if (!username) {
-        if (typeof showToast === 'function') {
+        showToast('Enter a Twitch username to add as an admin.', 'info');
-            showToast('Enter a Twitch username to add as an admin.', 'info');
-        }
         return;
     }
 
@@ -164,17 +158,11 @@ function addAdmin(usernameFromAction) {
             if (input) {
                 input.value = '';
             }
-            if (typeof showToast === 'function') {
+            showToast(`Added @${username} as an admin.`, 'success');
-                showToast(`Added @${username} as an admin.`, 'success');
-            }
             fetchAdmins();
             fetchSuggestedAdmins();
         })
-        .catch(() => {
+        .catch(() => showToast('Unable to add admin right now. Please try again.', 'error'));
-            if (typeof showToast === 'function') {
-                showToast('Unable to add admin right now. Please try again.', 'error');
-            }
-        });
 }
 
 function renderCanvasSettings(settings) {
@@ -195,9 +183,7 @@ function fetchCanvasSettings() {
         .then(renderCanvasSettings)
         .catch(() => {
             renderCanvasSettings({ width: 1920, height: 1080 });
-            if (typeof showToast === 'function') {
+            showToast('Using default canvas size. Unable to load saved settings.', 'warning');
-                showToast('Using default canvas size. Unable to load saved settings.', 'warning');
-            }
         });
 }
 
@@ -208,9 +194,7 @@ function saveCanvasSettings() {
     const width = parseFloat(widthInput?.value) || 0;
     const height = parseFloat(heightInput?.value) || 0;
     if (width <= 0 || height <= 0) {
-        if (typeof showToast === 'function') {
+        showToast('Please enter a valid width and height.', 'info');
-            showToast('Please enter a valid width and height.', 'info');
-        }
         return;
     }
     if (status) status.textContent = 'Saving...';
@@ -228,18 +212,14 @@ function saveCanvasSettings() {
         .then((settings) => {
             renderCanvasSettings(settings);
             if (status) status.textContent = 'Saved.';
-            if (typeof showToast === 'function') {
+            showToast('Canvas size saved successfully.', 'success');
-                showToast('Canvas size saved successfully.', 'success');
-            }
             setTimeout(() => {
                 if (status) status.textContent = '';
             }, 2000);
         })
         .catch(() => {
             if (status) status.textContent = 'Unable to save right now.';
-            if (typeof showToast === 'function') {
+            showToast('Unable to save canvas size. Please retry.', 'error');
-                showToast('Unable to save canvas size. Please retry.', 'error');
-            }
         });
 }
 

src/main/resources/static/js/landing.js

@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const suggestions = document.getElementById("channel-suggestions");
 
     if (!searchForm || !searchInput || !suggestions) {
+        console.error("Required elements not found in the DOM");
         return;
     }
 
@@ -36,9 +37,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    searchInput.addEventListener("input", (event) => {
+    searchInput.addEventListener("input", (event) => updateSuggestions(event.target.value || ""));
-        updateSuggestions(event.target.value || "");
-    });
 
     searchForm.addEventListener("submit", (event) => {
         event.preventDefault();

src/main/resources/static/js/settings.js

@@ -0,0 +1,108 @@
+const formElement = document.getElementById("settings-form");
+const submitButtonElement = document.getElementById("settings-submit-button");
+const canvasFpsElement = document.getElementById("canvas-fps");
+const canvasSizeElement = document.getElementById("canvas-size");
+const minPlaybackSpeedElement = document.getElementById("min-playback-speed");
+const maxPlaybackSpeedElement = document.getElementById("max-playback-speed");
+const minPitchElement = document.getElementById("min-audio-pitch");
+const maxPitchElement = document.getElementById("max-audio-pitch");
+const minVolumeElement = document.getElementById("min-volume");
+const maxVolumeElement = document.getElementById("max-volume");
+
+const currentSettings = JSON.parse(serverRenderedSettings);
+let userSettings = { ...currentSettings };
+
+function jsonEquals(a, b) {
+    if (a === b) return true;
+
+    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
+        return false;
+    }
+
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+
+    if (keysA.length !== keysB.length) return false;
+
+    for (const key of keysA) {
+        if (!keysB.includes(key)) return false;
+        if (!jsonEquals(a[key], b[key])) return false;
+    }
+
+    return true;
+}
+
+function setFormSettings(s) {
+    canvasFpsElement.value = s.canvasFramesPerSecond;
+    canvasSizeElement.value = s.maxCanvasSideLengthPixels;
+
+    minPlaybackSpeedElement.value = s.minAssetPlaybackSpeedFraction;
+    maxPlaybackSpeedElement.value = s.maxAssetPlaybackSpeedFraction;
+    minPitchElement.value = s.minAssetAudioPitchFraction;
+    maxPitchElement.value = s.maxAssetAudioPitchFraction;
+    minVolumeElement.value = s.minAssetVolumeFraction;
+    maxVolumeElement.value = s.maxAssetVolumeFraction;
+}
+
+function readInt(input) {
+    return input.checkValidity() ? Number(input.value) : null;
+}
+
+function readFloat(input) {
+    return input.checkValidity() ? Number(input.value) : null;
+}
+
+function loadUserSettingsFromDom() {
+    userSettings.canvasFramesPerSecond = readInt(canvasFpsElement);
+    userSettings.maxCanvasSideLengthPixels = readInt(canvasSizeElement);
+    userSettings.minAssetPlaybackSpeedFraction = readFloat(minPlaybackSpeedElement);
+    userSettings.maxAssetPlaybackSpeedFraction = readFloat(maxPlaybackSpeedElement);
+    userSettings.minAssetAudioPitchFraction = readFloat(minPitchElement);
+    userSettings.maxAssetAudioPitchFraction = readFloat(maxPitchElement);
+    userSettings.minAssetVolumeFraction = readFloat(minVolumeElement);
+    userSettings.maxAssetVolumeFraction = readFloat(maxVolumeElement);
+}
+
+function updateSubmitButtonDisabledState() {
+    if (jsonEquals(currentSettings, userSettings)) {
+        submitButtonElement.disabled = "disabled";
+        return;
+    }
+    if (!formElement.checkValidity()) {
+        submitButtonElement.disabled = "disabled";
+        return;
+    }
+    submitButtonElement.disabled = null;
+}
+
+function submitSettingsForm() {
+    if (submitButtonElement.getAttribute("disabled") != null) {
+        console.warn("Attempted to submit invalid form");
+        showToast("Settings not valid", "warning");
+        return;
+    }
+    fetch("/api/settings/set", { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: userSettings }).then((r) => {
+        if (!r.ok) {
+            throw new Error('Failed to load canvas');
+        }
+        return r.json();
+
+    })
+        .then((newSettings) => {
+            currentSettings = { ...newSettings };
+            userSettings = { ...newSettings };
+        })
+        .catch((error) => {
+            showToast('Unable to save settings', 'error')
+            console.error(error);
+        });
+}
+
+formElement.querySelectorAll("input").forEach((input) => {
+    input.addEventListener("input", () => {
+        loadUserSettingsFromDom();
+        updateSubmitButtonDisabledState();
+    });
+});
+
+setFormSettings(currentSettings);

src/main/resources/templates/dashboard.html

@@ -28,6 +28,7 @@
         <div class="panel-actions">
             <a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
             <a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
+            <a class="button ghost block" href="/channels">Browse channels</a>
             <form class="block" th:action="@{/logout}" method="post">
                 <button class="secondary block" type="submit">Logout</button>
             </form>

src/main/resources/templates/index.html

@@ -24,7 +24,7 @@
             <p class="lead">Upload artwork, drop it into a shared dashboard, and stay in sync with your mods without clutter.</p>
             <div class="cta-row">
                 <a class="button" href="/oauth2/authorization/twitch">Login with Twitch</a>
-                <a class="button ghost" href="/channels">Browse channels</a>
+                <a class="button ghost" href="/channels" rel="prefetch">Browse channels</a>
             </div>
         </div>
     </main>

src/main/resources/templates/settings.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+    <head>
+        <meta charset="UTF-8">
+        <title>Imgfloat Admin</title>
+        <link rel="stylesheet" href="/css/styles.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
+    </head>
+    <body class="settings-body">
+        <div class="settings-shell">
+            <header class="settings-header">
+                <div class="brand">
+                    <div class="brand-mark">IF</div>
+                    <div>
+                        <div class="brand-title">Imgfloat</div>
+                        <div class="brand-subtitle">Twitch overlay manager</div>
+                    </div>
+                </div>
+            </header>
+
+            <main class="settings-main">
+                <section class="settings-card">
+                    <p class="eyebrow subtle">System administrator settings</p>
+                    <form novalidate id="settings-form" class="settings-form">
+                        <label for="canvas-fps">Canvas FPS</label>
+                        <input
+                            id="canvas-fps"
+                            name="canvas-fps"
+                            class="text-input"
+                            type="text"
+                            inputmode="numeric"
+                            pattern="^[1-9]\d*$"
+                        />
+
+                        <label for="canvas-size">Canvas max side length (pixels)</label>
+                        <input
+                            id="canvas-size"
+                            name="canvas-size"
+                            class="text-input"
+                            type="text"
+                            inputmode="numeric"
+                            pattern="^[1-9]\d*$"
+                        />
+
+                        <label for="min-playback-speed">Min playback speed</label>
+                        <input
+                            id="min-playback-speed"
+                            name="min-playback-speed"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="max-playback-speed">Max playback speed</label>
+                        <input
+                            id="max-playback-speed"
+                            name="max-playback-speed"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="min-audio-pitch">Min audio pitch</label>
+                        <input
+                            id="min-audio-pitch"
+                            name="min-audio-pitch"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="max-audio-pitch">Max audio pitch</label>
+                        <input
+                            id="max-audio-pitch"
+                            name="max-audio-pitch"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="min-volume">Min volume</label>
+                        <input
+                            id="min-volume"
+                            name="min-volume"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="max-volume">Max volume</label>
+                        <input
+                            id="max-volume"
+                            name="max-volume"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <button id="settings-submit-button" type="submit" class="button block" disabled>Save settings</button>
+                    </form>
+                </section>
+            </main>
+        </div>
+        <script th:inline="javascript">
+            const serverRenderedSettings = /*[[${settingsJson}]]*/;
+        </script>
+        <script src="/js/settings.js"></script>
+        <script src="/js/toast.js"></script>
+    </body>
+</html>