gitmedia/thats-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

30-04-2026

Browse source
This commit is contained in:
Kevin Adametz 2026-04-30 14:54:39 +02:00
parent 761b1156c1
commit d054732bf5
35 changed files with 2796 additions and 505 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/dev/init-fl.html
View file

@ -50,7 +50,7 @@
border-top: 1px solid #222;
padding: 10px 14px;
display: grid;
grid-template-columns: 1fr 1fr 2fr 1.2fr;
grid-template-columns: 1fr 1fr 2fr 0.8fr 1.2fr;
gap: 10px 16px;
max-height: 230px;
overflow-y: auto;
@ -287,6 +287,27 @@
</div>
</div>
<!-- Col 3.5: Horizont -->
<div class="ctrl-group" style="grid-column: span 1">
<h3>Horizont</h3>
<div style="display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px;">
<button class="img-btn active" data-mode="0">Aus</button>
<button class="img-btn" data-mode="1">Nebel</button>
<button class="img-btn" data-mode="2">Trennung</button>
<button class="img-btn" data-mode="3">Glow</button>
</div>
<div class="row" id="row-horizonOpacity">
<label for="horizonOpacity">Deckkraft</label>
<input type="range" id="horizonOpacity" min="0.05" max="1" step="0.05" value="0.5" />
<span class="val" id="horizonOpacity-val">0.50</span>
</div>
<div class="row" id="row-horizonBlend" style="display:none">
<label for="horizonBlend">Übergang</label>
<input type="range" id="horizonBlend" min="0" max="1" step="0.02" value="0.2" />
<span class="val" id="horizonBlend-val">0.20</span>
</div>
</div>
<!-- Col 4: Hintergrundbild + Farben -->
<div class="ctrl-group">
<h3>Hintergrundbild</h3>
@ -501,6 +522,27 @@
hexToUniformVec3(e.target.value, fl.uniforms.bgColorEdge)
})
// ── Horizont ─────────────────────────────────────────────────────
const rowOpacity = document.getElementById('row-horizonOpacity')
const rowBlend = document.getElementById('row-horizonBlend')
function updateHorizonRows(mode) {
rowOpacity.style.display = mode === 2 ? 'none' : 'flex'
rowBlend.style.display = mode === 2 ? 'flex' : 'none'
}
document.querySelectorAll('[data-mode]').forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelectorAll('[data-mode]').forEach((b) => b.classList.remove('active'))
btn.classList.add('active')
const mode = parseInt(btn.dataset.mode)
fl.uniforms.horizonMode.value = mode
updateHorizonRows(mode)
})
})
slider('horizonOpacity', 2, (v) => (fl.uniforms.horizonOpacity.value = v))
slider('horizonBlend', 2, (v) => (fl.uniforms.horizonBlend.value = v))
// ── Gradient ──────────────────────────────────────────────────────
const MAX_STOPS = 8
function applyGradient() {