fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make rain controls layout more compact with a 3-column grid

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 06:25:40 +02:00
parent 3100b769c7
commit 1493ad908b
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageRain.astro
+19 -17
View File
@@ -157,26 +157,28 @@ window.rainData = function() {
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': rainOpen }"></i>
</div>
<div x-show="rainOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6 mt-6 pt-6 border-t border-stone-800">
<!-- Intensity -->
<div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Regen-Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span> Tropfen</label>
<input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div>
<!-- Wind -->
<div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Windstärke (Neigung): <span x-text="wind" class="text-emerald-400"></span>°</label>
<input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div>
<div x-show="rainOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="mt-6 pt-6 border-t border-stone-800">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Intensity -->
<div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span></label>
<input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div>
<!-- Wind -->
<div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Wind: <span x-text="wind" class="text-emerald-400"></span>°</label>
<input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div>
<!-- Lofi Filter -->
<div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Lofi-Filter (Muffigkeit): <span x-text="lofiFilter" class="text-emerald-400"></span> Hz</label>
<input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
<!-- Lofi Filter -->
<div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Muffigkeit: <span x-text="lofiFilter" class="text-emerald-400"></span></label>
<input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div>
</div>
<div class="flex justify-between text-xs text-stone-600 font-mono pt-4 border-t border-stone-800">
<div class="flex justify-between text-xs text-stone-600 font-mono pt-4 mt-4 border-t border-stone-800">
<span>Sound läuft automatisch</span>
<span class="text-emerald-400">Realtime Web Audio Rain</span>
</div>