mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 11:49:25 +00:00
Settings
This commit is contained in:
@@ -21,92 +21,208 @@
|
||||
</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 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">
|
||||
|
||||
Reference in New Issue
Block a user