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

Add Goa-Zen background music player to SubpageRain

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 05:25:33 +02:00
parent 0545007970
commit 4d3998b78e
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageRain.astro
+15 -2
View File
@@ -1,7 +1,7 @@
--- ---
// src/components/SubpageRain.astro // src/components/SubpageRain.astro
--- ---
<div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden" x-data="{ rainIntensity: 50, drops: [], generateDrops(val) { this.drops = []; for(let i=0; i<val; i++) this.drops.push({ left: Math.random()*100, speed: 0.5+Math.random()*0.5, delay: Math.random()*2 }); } }" x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => generateDrops(value))"> <div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden" x-data="{ rainIntensity: 50, drops: [], playing: false, generateDrops(val) { this.drops = []; for(let i=0; i<val; i++) this.drops.push({ left: Math.random()*100, speed: 0.5+Math.random()*0.5, delay: Math.random()*2 }); } }" x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => generateDrops(value))">
<!-- Rain Container (Full Screen on this page) --> <!-- Rain Container (Full Screen on this page) -->
<div class="absolute inset-0 pointer-events-none z-0"> <div class="absolute inset-0 pointer-events-none z-0">
@@ -29,11 +29,24 @@
<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"> <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> </div>
<div class="flex justify-between text-xs text-stone-600 font-mono"> <div class="flex justify-between text-xs text-stone-600 font-mono mb-6">
<span>Nieselregen</span> <span>Nieselregen</span>
<span>Landregen</span> <span>Landregen</span>
<span>Wolkenbruch</span> <span>Wolkenbruch</span>
</div> </div>
<!-- Music Control -->
<div class="pt-4 border-t border-stone-800 flex justify-between items-center">
<div>
<span class="block text-xs font-mono text-stone-500 uppercase mb-1 tracking-widest">Hintergrund-Vibe</span>
<span class="text-xs text-stone-400">Goa-Zen Ambient Music</span>
</div>
<button @click="$refs.audio.paused ? $refs.audio.play() : $refs.audio.pause(); playing = !$refs.audio.paused" class="text-white text-xs font-mono flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-emerald-500/50 transition-colors">
<i class="fa-solid" :class="playing ? 'fa-pause text-emerald-400' : 'fa-play text-emerald-400'"></i>
<span x-text="playing ? 'Pausieren' : 'Abspielen'"></span>
</button>
<audio x-ref="audio" src="https://assets.mixkit.co/music/preview/mixkit-zen-meditation-123.mp3" loop></audio>
</div>
</div> </div>
<!-- Content --> <!-- Content -->