imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 03:39:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve asset setttings

Browse Source
This commit is contained in:
Andreas Krühlmann
2025-12-09 16:04:54 +01:00
parent 750cb227ff
commit 8ad4f267da
2 changed files with 147 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/main/resources/static/css/styles.css
View File

@@ -84,6 +84,10 @@ body {
margin: 0;
}
.eyebrow.subtle {
color: #cbd5e1;
}
.cta-row {
display: flex;
flex-wrap: wrap;
@@ -180,6 +184,12 @@ body {
margin-top: 6px;
}
.badge-row.stacked {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.feature-list {
list-style: none;
padding: 0;
@@ -433,6 +443,14 @@ body {
display: none;
}
.asset-settings {
background: radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.08), transparent 40%),
radial-gradient(circle at 85% 0%, rgba(59, 130, 246, 0.06), transparent 45%),
#0b1220;
border: 1px solid #312e81;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.panel-header {
display: flex;
justify-content: space-between;
@@ -444,6 +462,19 @@ body {
margin: 0;
}
.panel-summary {
background: rgba(124, 58, 237, 0.06);
border: 1px solid rgba(124, 58, 237, 0.22);
border-radius: 12px;
padding: 12px 14px;
max-width: 320px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panel-summary p {
margin: 0;
}
.panel ul {
list-style: none;
padding: 0;
@@ -454,6 +485,42 @@ body {
margin: 6px 0;
}
.title-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.meta-text {
margin: 6px 0 0;
}
.panel-section {
margin-top: 16px;
padding: 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(148, 163, 184, 0.15);
}
.panel-section.two-col {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.section-header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.section-header h5 {
margin: 0;
}
.asset-list {
display: flex;
flex-direction: column;
@@ -514,6 +581,11 @@ body {
margin-top: 12px;
}
.control-grid.condensed {
gap: 10px;
margin-top: 8px;
}
.control-grid label {
display: flex;
flex-direction: column;
@@ -537,6 +609,13 @@ body {
flex-wrap: wrap;
}
.control-actions.filled {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(124, 58, 237, 0.22);
padding: 12px;
border-radius: 12px;
}
.checkbox-inline {
display: flex;
align-items: center;

53
src/main/resources/templates/admin.html
View File

@@ -25,12 +25,26 @@
<input id="asset-file" type="file" accept="image/*,video/*" />
<button onclick="uploadAsset()">Upload</button>
<ul id="asset-list" class="asset-list"></ul>
<div id="asset-controls" class="panel hidden">
<div id="asset-controls" class="panel hidden asset-settings">
<div class="panel-header">
<div>
<p class="eyebrow subtle">Asset settings</p>
<div class="title-row">
<h4 id="selected-asset-name">Selected asset</h4>
<small id="selected-asset-meta"></small>
</div>
<div class="control-grid">
<p class="muted meta-text" id="selected-asset-meta"></p>
</div>
<div class="panel-summary">
<p class="muted">Fine-tune the selected overlay item with sizing, playback, and layering controls.</p>
</div>
</div>
<div class="panel-section">
<div class="section-header">
<h5>Size & placement</h5>
<p class="muted">Keep your overlay crisp by locking aspect ratio while resizing.</p>
</div>
<div class="control-grid condensed">
<label>
Width
<input id="asset-width" type="number" min="10" step="5" />
@@ -44,32 +58,49 @@
Maintain aspect ratio
</label>
</div>
<div class="control-grid">
</div>
<div class="panel-section two-col">
<div>
<div class="section-header">
<h5>Playback</h5>
<p class="muted">Tweak animation speed or mute video assets.</p>
</div>
<div class="control-grid condensed">
<label>
Animation speed
<input id="asset-speed" type="number" min="0.1" step="0.1" value="1" />
</label>
<label class="checkbox-inline">
<input id="asset-muted" type="checkbox" />
Muted (videos)
Mute
</label>
</div>
<div class="control-grid">
</div>
<div>
<div class="section-header">
<h5>Layering</h5>
<p class="muted">Reorder assets to fit your scene.</p>
</div>
<div class="control-grid condensed">
<label>
Layer (Z)
<div class="badge-row">
<span id="asset-z-level" class="badge">0</span>
<span id="asset-type-label" class="badge subtle"></span>
<div class="badge-row stacked">
<span class="badge">Layer <strong id="asset-z-level">0</strong></span>
<span class="badge subtle" id="asset-type-label"></span>
</div>
</label>
</div>
<div class="control-actions">
</div>
</div>
<div class="control-actions filled">
<button type="button" onclick="nudgeRotation(-5)" class="secondary">Rotate left</button>
<button type="button" onclick="nudgeRotation(5)" class="secondary">Rotate right</button>
<button type="button" onclick="applyTransformFromInputs()">Apply size</button>
<button type="button" onclick="recenterSelectedAsset()" class="secondary">Re-center asset</button>
</div>
<div class="control-actions">
<div class="control-actions filled">
<button type="button" onclick="sendToBack()" class="secondary">Send to back</button>
<button type="button" onclick="bringBackward()" class="secondary">Bring backward</button>
<button type="button" onclick="bringForward()" class="secondary">Bring forward</button>