mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
235 lines
13 KiB
HTML
235 lines
13 KiB
HTML
<!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 settings-hero">
|
||
<div class="hero-copy">
|
||
<p class="eyebrow subtle">System administrator settings</p>
|
||
<h1>Application defaults</h1>
|
||
<p class="muted">
|
||
Configure overlay performance and audio guardrails for every channel using Imgfloat.
|
||
These settings are applied globally.
|
||
</p>
|
||
<div class="badge-row">
|
||
<span class="badge soft"><i class="fa-solid fa-gauge-high"></i> Performance tuned</span>
|
||
<span class="badge"><i class="fa-solid fa-cloud"></i> Server-wide</span>
|
||
<span class="badge subtle"><i class="fa-solid fa-gear"></i> Admin only</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-grid compact">
|
||
<div class="stat">
|
||
<p class="stat-label">Canvas FPS</p>
|
||
<p class="stat-value" id="stat-canvas-fps">--</p>
|
||
<p class="stat-subtitle">Longest side <span id="stat-canvas-size">--</span></p>
|
||
</div>
|
||
<div class="stat">
|
||
<p class="stat-label">Playback speed</p>
|
||
<p class="stat-value" id="stat-playback-range">--</p>
|
||
<p class="stat-subtitle">Applies to all animations</p>
|
||
</div>
|
||
<div class="stat">
|
||
<p class="stat-label">Audio pitch</p>
|
||
<p class="stat-value" id="stat-audio-range">--</p>
|
||
<p class="stat-subtitle">Fraction of original clip</p>
|
||
</div>
|
||
<div class="stat">
|
||
<p class="stat-label">Volume limits</p>
|
||
<p class="stat-value" id="stat-volume-range">--</p>
|
||
<p class="stat-subtitle">Keeps alerts comfortable</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="settings-layout">
|
||
<section class="settings-card settings-panel">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="eyebrow subtle">Overlay defaults</p>
|
||
<h2>Performance & audio budget</h2>
|
||
<p class="muted tiny">Tune the canvas and audio guardrails to keep overlays smooth and balanced.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form novalidate id="settings-form" class="settings-form">
|
||
<div class="form-section">
|
||
<div class="form-heading">
|
||
<p class="eyebrow subtle">Canvas</p>
|
||
<h3>Rendering budget</h3>
|
||
<p class="muted tiny">Match FPS and max dimensions to your streaming canvas for consistent overlays.</p>
|
||
</div>
|
||
<div class="control-grid split-row">
|
||
<label for="canvas-fps">Canvas FPS
|
||
<input
|
||
id="canvas-fps"
|
||
name="canvas-fps"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="numeric"
|
||
pattern="^[1-9]\d*$"
|
||
placeholder="60"
|
||
/>
|
||
</label>
|
||
|
||
<label for="canvas-size">Canvas max side length (pixels)
|
||
<input
|
||
id="canvas-size"
|
||
name="canvas-size"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="numeric"
|
||
pattern="^[1-9]\d*$"
|
||
placeholder="1920"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<p class="field-hint">Use the longest edge of your OBS browser source to prevent stretching.</p>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="form-heading">
|
||
<p class="eyebrow subtle">Playback</p>
|
||
<h3>Animation speed limits</h3>
|
||
<p class="muted tiny">Bound default speeds between 0 and 1 so clips run predictably.</p>
|
||
</div>
|
||
<div class="control-grid split-row">
|
||
<label for="min-playback-speed">Min playback speed
|
||
<input
|
||
id="min-playback-speed"
|
||
name="min-playback-speed"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="decimal"
|
||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||
placeholder="0.5"
|
||
/>
|
||
</label>
|
||
|
||
<label for="max-playback-speed">Max playback speed
|
||
<input
|
||
id="max-playback-speed"
|
||
name="max-playback-speed"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="decimal"
|
||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||
placeholder="1.0"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<p class="field-hint">Keep the maximum at 1.0 to avoid speeding overlays beyond their source frame rate.</p>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="form-heading">
|
||
<p class="eyebrow subtle">Audio</p>
|
||
<h3>Pitch & volume guardrails</h3>
|
||
<p class="muted tiny">Prevent harsh audio by bounding pitch and volume as fractions of the source.</p>
|
||
</div>
|
||
<div class="control-grid split-row">
|
||
<label for="min-audio-pitch">Min audio pitch
|
||
<input
|
||
id="min-audio-pitch"
|
||
name="min-audio-pitch"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="decimal"
|
||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||
placeholder="0.8"
|
||
/>
|
||
</label>
|
||
|
||
<label for="max-audio-pitch">Max audio pitch
|
||
<input
|
||
id="max-audio-pitch"
|
||
name="max-audio-pitch"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="decimal"
|
||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||
placeholder="1.0"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="control-grid split-row">
|
||
<label for="min-volume">Min volume
|
||
<input
|
||
id="min-volume"
|
||
name="min-volume"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="decimal"
|
||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||
placeholder="0.2"
|
||
/>
|
||
</label>
|
||
|
||
<label for="max-volume">Max volume
|
||
<input
|
||
id="max-volume"
|
||
name="max-volume"
|
||
class="text-input"
|
||
type="text"
|
||
inputmode="decimal"
|
||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||
placeholder="1.0"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<p class="field-hint">Volume and pitch values are percentages of the original clip between 0 and 1.</p>
|
||
</div>
|
||
|
||
<div class="form-footer">
|
||
<p id="settings-status" class="status-chip">No changes yet.</p>
|
||
<button id="settings-submit-button" type="submit" class="button" disabled>Save settings</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<aside class="settings-sidebar">
|
||
<section class="settings-card info-card">
|
||
<p class="eyebrow subtle">Checklist</p>
|
||
<h3>Before you save</h3>
|
||
<ul class="hint-list">
|
||
<li>Match canvas dimensions to the OBS browser source you embed.</li>
|
||
<li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
|
||
<li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
|
||
<li>Lower the minimum volume if alerts feel too loud on stream.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="settings-card info-card subtle">
|
||
<p class="eyebrow subtle">Heads up</p>
|
||
<h3>Global impact</h3>
|
||
<p class="muted tiny">Changes here update every channel immediately. Save carefully and confirm with your team.</p>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<script th:inline="javascript">
|
||
const serverRenderedSettings = /*[[${settingsJson}]]*/;
|
||
</script>
|
||
<script src="/js/settings.js"></script>
|
||
<script src="/js/toast.js"></script>
|
||
</body>
|
||
</html>
|