From 4d3998b78eb34510382df88011a7e139e55458c6 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 05:25:33 +0200
Subject: [PATCH] Add Goa-Zen background music player to SubpageRain

---
 src/components/SubpageRain.astro | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/SubpageRain.astro b/src/components/SubpageRain.astro
index 4595c14..bc204d0 100644
--- a/src/components/SubpageRain.astro
+++ b/src/components/SubpageRain.astro
@@ -1,7 +1,7 @@
 ---
 // 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) -->
     <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">
             </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>Landregen</span>
                 <span>Wolkenbruch</span>
             </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>
 
         <!-- Content -->