Spaces:

scottrx11
/

deepsite-project-lr0up

Running

App Files Files Community

scottrx11 commited on Feb 19

Commit

7ddcf6c

verified ·

1 Parent(s): 9b372da

Initial DeepSite commit

Browse files

Files changed (4) hide show

README.md +9 -6
index.html +275 -19
script.js +628 -0
style.css +153 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project Lr0up
-emoji: 📚
-colorFrom: pink
-colorTo: green
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: gray
+colorTo: purple
 sdk: static
+emoji: 🖥️
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,275 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Psychedelic Binaural Studio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-900 text-white min-h-screen overflow-x-hidden">
+    <!-- Animated Background -->
+    <div class="fixed inset-0 z-0">
+        <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-blue-900 to-pink-900 animate-gradient"></div>
+        <div class="absolute inset-0 opacity-30 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-yellow-400 via-red-500 to-purple-600 animate-pulse-slow"></div>
+        <canvas id="particleCanvas" class="absolute inset-0 w-full h-full"></canvas>
+    </div>
+    <!-- Main Container -->
+    <div class="relative z-10 container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-5xl md:text-7xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 animate-text-shimmer drop-shadow-lg">
+                Binaural Studio
+            </h1>
+            <p class="text-lg md:text-xl text-purple-200 font-light tracking-wide">
+                Customize your consciousness journey 🧘‍♀️✨
+            </p>
+        </header>
+        <!-- Main Control Panel -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Binaural Controls -->
+            <div class="glass-panel rounded-3xl p-8 shadow-2xl border border-white/20">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-2xl font-semibold text-cyan-300 flex items-center gap-2">
+                        <i data-lucide="activity" class="w-6 h-6"></i>
+                        Binaural Beats
+                    </h2>
+                    <div class="flex gap-2">
+                        <span class="text-xs px-3 py-1 rounded-full bg-cyan-500/20 text-cyan-300 border border-cyan-400/30">Spatial</span>
+                        <span class="text-xs px-3 py-1 rounded-full bg-pink-500/20 text-pink-300 border border-pink-400/30">Monaural</span>
+                    </div>
+                </div>
+                <!-- Mode Selection -->
+                <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10">
+                    <label class="text-sm text-purple-200 mb-3 block font-medium">Beat Mode</label>
+                    <div class="grid grid-cols-2 gap-3">
+                        <button id="spatialBtn" class="mode-btn active bg-gradient-to-r from-cyan-500 to-blue-500 text-white py-3 px-4 rounded-xl font-medium transition-all hover:scale-105 shadow-lg shadow-cyan-500/30 border-2 border-transparent">
+                            🎧 Spatial (Binaural)
+                        </button>
+                        <button id="monauralBtn" class="mode-btn bg-white/10 text-purple-200 py-3 px-4 rounded-xl font-medium transition-all hover:scale-105 border-2 border-transparent hover:bg-white/20">
+                            🔊 Monaural
+                        </button>
+                    </div>
+                    <p class="text-xs text-purple-300 mt-2 italic" id="modeDescription">
+                        Different frequencies in each ear create the beat perception
+                    </p>
+                </div>
+                <!-- Frequency Controls -->
+                <div class="space-y-6 mb-6">
+                    <div class="control-group">
+                        <div class="flex justify-between mb-2">
+                            <label class="text-cyan-300 font-medium">Carrier Frequency (Base)</label>
+                            <span id="carrierValue" class="text-cyan-300 font-mono bg-cyan-900/30 px-3 py-1 rounded-lg">200 Hz</span>
+                        </div>
+                        <input type="range" id="carrierSlider" min="40" max="500" value="200" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-cyan-400 hover:accent-cyan-300">
+                        <div class="flex justify-between text-xs text-purple-300 mt-1">
+                            <span>40 Hz (Deep)</span>
+                            <span>500 Hz (Bright)</span>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <div class="flex justify-between mb-2">
+                            <label class="text-pink-300 font-medium">Beat Frequency (Difference)</label>
+                            <span id="beatValue" class="text-pink-300 font-mono bg-pink-900/30 px-3 py-1 rounded-lg">10 Hz</span>
+                        </div>
+                        <input type="range" id="beatSlider" min="0.5" max="40" step="0.5" value="10" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-pink-400 hover:accent-pink-300">
+                        <div class="flex justify-between text-xs text-purple-300 mt-1">
+                            <span>0.5 Hz (Delta)</span>
+                            <span>40 Hz (Gamma)</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Brainwave Presets -->
+                <div class="grid grid-cols-5 gap-2 mb-6">
+                    <button class="brainwave-btn bg-indigo-500/20 hover:bg-indigo-500/40 border border-indigo-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="100" data-beat="0.5">
+                        Delta<br><span class="text-[10px] opacity-70">Sleep</span>
+                    </button>
+                    <button class="brainwave-btn bg-blue-500/20 hover:bg-blue-500/40 border border-blue-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="150" data-beat="6">
+                        Theta<br><span class="text-[10px] opacity-70">Relax</span>
+                    </button>
+                    <button class="brainwave-btn bg-green-500/20 hover:bg-green-500/40 border border-green-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="200" data-beat="10">
+                        Alpha<br><span class="text-[10px] opacity-70">Focus</span>
+                    </button>
+                    <button class="brainwave-btn bg-yellow-500/20 hover:bg-yellow-500/40 border border-yellow-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="250" data-beat="20">
+                        Beta<br><span class="text-[10px] opacity-70">Active</span>
+                    </button>
+                    <button class="brainwave-btn bg-red-500/20 hover:bg-red-500/40 border border-red-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="300" data-beat="40">
+                        Gamma<br><span class="text-[10px] opacity-70">Peak</span>
+                    </button>
+                </div>
+                <!-- Ramp Controls -->
+                <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10">
+                    <label class="text-sm text-purple-200 mb-3 block font-medium">Volume Ramping</label>
+                    <div class="grid grid-cols-3 gap-2">
+                        <button id="rampNone" class="ramp-btn active bg-gradient-to-r from-purple-500 to-pink-500 text-white py-2 px-3 rounded-lg text-sm font-medium transition-all">
+                            Instant
+                        </button>
+                        <button id="rampUp" class="ramp-btn bg-white/10 text-purple-200 py-2 px-3 rounded-lg text-sm font-medium transition-all hover:bg-white/20">
+                            Ramp Up ⬆️
+                        </button>
+                        <button id="rampDown" class="ramp-btn bg-white/10 text-purple-200 py-2 px-3 rounded-lg text-sm font-medium transition-all hover:bg-white/20">
+                            Ramp Down ⬇️
+                        </button>
+                    </div>
+                    <div class="mt-3 flex items-center gap-3">
+                        <label class="text-xs text-purple-300">Duration:</label>
+                        <input type="range" id="rampDuration" min="5" max="300" value="60" class="flex-1 h-2 bg-black/30 rounded-full accent-purple-400">
+                        <span id="rampDurationValue" class="text-xs text-purple-300 font-mono w-12">60s</span>
+                    </div>
+                </div>
+                <!-- Main Play Button -->
+                <button id="playBinauralBtn" class="w-full bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 hover:from-cyan-300 hover:via-purple-400 hover:to-pink-400 text-white font-bold py-4 px-8 rounded-2xl text-xl shadow-lg shadow-purple-500/50 transition-all transform hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-3">
+                    <i data-lucide="play" class="w-6 h-6"></i>
+                    <span>Generate Binaural Beat</span>
+                </button>
+            </div>
+            <!-- Noise Controls -->
+            <div class="glass-panel rounded-3xl p-8 shadow-2xl border border-white/20">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-2xl font-semibold text-amber-300 flex items-center gap-2">
+                        <i data-lucide="waves" class="w-6 h-6"></i>
+                        Spatial Noise
+                    </h2>
+                    <span class="text-xs px-3 py-1 rounded-full bg-amber-500/20 text-amber-300 border border-amber-400/30">Always Spatial</span>
+                </div>
+                <div class="space-y-4 mb-6">
+                    <p class="text-sm text-purple-200 mb-4">
+                        Immersive 3D noise environment with stereo spatialization. Each noise type is rendered in true stereo field for maximum immersion.
+                    </p>
+                    <!-- Noise Presets -->
+                    <div class="grid grid-cols-1 gap-4">
+                        <button id="pinkNoiseBtn" class="noise-btn group relative overflow-hidden bg-gradient-to-r from-pink-400 to-rose-500 hover:from-pink-300 hover:to-rose-400 text-white p-6 rounded-2xl transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-pink-500/30 border border-pink-300/50">
+                            <div class="relative z-10 flex items-center justify-between">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm">
+                                        <i data-lucide="cloud" class="w-6 h-6"></i>
+                                    </div>
+                                    <div class="text-left">
+                                        <h3 class="font-bold text-lg">Pink Noise</h3>
+                                        <p class="text-sm text-pink-100">Balanced, natural, soothing</p>
+                                    </div>
+                                </div>
+                                <i data-lucide="play-circle" class="w-8 h-8 opacity-80 group-hover:opacity-100 transition-opacity"></i>
+                            </div>
+                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
+                        </button>
+                        <button id="brownNoiseBtn" class="noise-btn group relative overflow-hidden bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-500 hover:to-orange-600 text-white p-6 rounded-2xl transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-orange-500/30 border border-orange-300/50">
+                            <div class="relative z-10 flex items-center justify-between">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm">
+                                        <i data-lucide="flame" class="w-6 h-6"></i>
+                                    </div>
+                                    <div class="text-left">
+                                        <h3 class="font-bold text-lg">Brown Noise</h3>
+                                        <p class="text-sm text-orange-100">Deep, rumbling, intense</p>
+                                    </div>
+                                </div>
+                                <i data-lucide="play-circle" class="w-8 h-8 opacity-80 group-hover:opacity-100 transition-opacity"></i>
+                            </div>
+                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
+                        </button>
+                        <button id="whiteNoiseBtn" class="noise-btn group relative overflow-hidden bg-gradient-to-r from-slate-400 to-gray-500 hover:from-slate-300 hover:to-gray-400 text-white p-6 rounded-2xl transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-gray-500/30 border border-gray-300/50">
+                            <div class="relative z-10 flex items-center justify-between">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm">
+                                        <i data-lucide="wind" class="w-6 h-6"></i>
+                                    </div>
+                                    <div class="text-left">
+                                        <h3 class="font-bold text-lg">White Noise</h3>
+                                        <p class="text-sm text-gray-100">Sharp, masking, crisp</p>
+                                    </div>
+                                </div>
+                                <i data-lucide="play-circle" class="w-8 h-8 opacity-80 group-hover:opacity-100 transition-opacity"></i>
+                            </div>
+                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
+                        </button>
+                    </div>
+                </div>
+                <!-- Noise Volume -->
+                <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10">
+                    <div class="flex justify-between mb-2">
+                        <label class="text-amber-300 font-medium">Noise Volume</label>
+                        <span id="noiseVolumeValue" class="text-amber-300 font-mono bg-amber-900/30 px-3 py-1 rounded-lg">70%</span>
+                    </div>
+                    <input type="range" id="noiseVolumeSlider" min="0" max="100" value="70" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-amber-400">
+                </div>
+                <!-- Spatial Width -->
+                <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10">
+                    <div class="flex justify-between mb-2">
+                        <label class="text-purple-300 font-medium">Spatial Width (Stereo Separation)</label>
+                        <span id="spatialWidthValue" class="text-purple-300 font-mono bg-purple-900/30 px-3 py-1 rounded-lg">Wide</span>
+                    </div>
+                    <input type="range" id="spatialWidthSlider" min="0" max="100" value="80" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-purple-400">
+                    <p class="text-xs text-purple-300 mt-2">Adjust the perceived width of the noise field</p>
+                </div>
+                <!-- Stop All Button -->
+                <button id="stopAllBtn" class="w-full bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-400 hover:to-rose-500 text-white font-bold py-4 px-8 rounded-2xl text-xl shadow-lg shadow-red-500/50 transition-all transform hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-3 opacity-50 cursor-not-allowed" disabled>
+                    <i data-lucide="square" class="w-6 h-6"></i>
+                    <span>Stop All Audio</span>
+                </button>
+            </div>
+        </div>
+        <!-- Visualizer Section -->
+        <div class="mt-8 glass-panel rounded-3xl p-6 shadow-2xl border border-white/20">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-xl font-semibold text-cyan-300 flex items-center gap-2">
+                    <i data-lucide="bar-chart-2" class="w-5 h-5"></i>
+                    Real-time Visualization
+                </h3>
+                <div class="flex gap-2 text-xs">
+                    <span class="flex items-center gap-1 text-cyan-300">
+                        <span class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
+                        Left Channel
+                    </span>
+                    <span class="flex items-center gap-1 text-pink-300">
+                        <span class="w-2 h-2 rounded-full bg-pink-400 animate-pulse"></span>
+                        Right Channel
+                    </span>
+                </div>
+            </div>
+            <canvas id="audioVisualizer" class="w-full h-48 md:h-64 rounded-2xl bg-black/40 border border-white/10"></canvas>
+        </div>
+        <!-- Info Section -->
+        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
+            <div class="glass-panel rounded-2xl p-4 border border-white/10">
+                <i data-lucide="headphones" class="w-8 h-8 mx-auto mb-2 text-cyan-400"></i>
+                <p class="text-sm text-purple-200">Use headphones for best binaural effect</p>
+            </div>
+            <div class="glass-panel rounded-2xl p-4 border border-white/10">
+                <i data-lucide="timer" class="w-8 h-8 mx-auto mb-2 text-pink-400"></i>
+                <p class="text-sm text-purple-200">Ramping helps gentle entry/exit</p>
+            </div>
+            <div class="glass-panel rounded-2xl p-4 border border-white/10">
+                <i data-lucide="volume-2" class="w-8 h-8 mx-auto mb-2 text-amber-400"></i>
+                <p class="text-sm text-purple-200">Spatial noise creates 3D soundscape</p>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        lucide.createIcons();
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,628 @@

+// Audio Context and State
+let audioContext = null;
+let isPlaying = false;
+let currentMode = 'spatial'; // 'spatial' or 'monaural'
+let rampMode = 'none'; // 'none', 'up', 'down'
+let rampDuration = 60;
+let activeNoiseType = null;
+// Nodes
+let binauralNodes = {
+    leftOsc: null,
+    rightOsc: null,
+    leftGain: null,
+    rightGain: null,
+    merger: null,
+    masterGain: null,
+    modulator: null // For monaural
+};
+let noiseNodes = {
+    leftBuffer: null,
+    rightBuffer: null,
+    leftSource: null,
+    rightSource: null,
+    leftGain: null,
+    rightGain: null,
+    leftPanner: null,
+    rightPanner: null,
+    masterGain: null,
+    filter: null
+};
+let visualizer = {
+    analyser: null,
+    canvas: null,
+    ctx: null,
+    animationId: null
+};
+// Initialize Audio Context
+function initAudioContext() {
+    if (!audioContext) {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        setupVisualizer();
+    }
+    if (audioContext.state === 'suspended') {
+        audioContext.resume();
+    }
+}
+// Setup Visualizer
+function setupVisualizer() {
+    const canvas = document.getElementById('audioVisualizer');
+    const ctx = canvas.getContext('2d');
+    // Handle high DPI displays
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+    visualizer.canvas = canvas;
+    visualizer.ctx = ctx;
+    visualizer.analyser = audioContext.createAnalyser();
+    visualizer.analyser.fftSize = 2048;
+    visualizer.analyser.smoothingTimeConstant = 0.8;
+    drawVisualizer();
+}
+function drawVisualizer() {
+    if (!visualizer.ctx) return;
+    const { ctx, canvas, analyser } = visualizer;
+    const width = canvas.width / (window.devicePixelRatio || 1);
+    const height = canvas.height / (window.devicePixelRatio || 1);
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+    ctx.fillRect(0, 0, width, height);
+    if (isPlaying && analyser) {
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+        analyser.getByteFrequencyData(dataArray);
+        const barWidth = (width / bufferLength) * 2.5;
+        let barHeight;
+        let x = 0;
+        for (let i = 0; i < bufferLength; i++) {
+            barHeight = (dataArray[i] / 255) * height * 0.8;
+            // Create gradient for bars
+            const gradient = ctx.createLinearGradient(0, height, 0, height - barHeight);
+            gradient.addColorStop(0, 'rgba(6, 182, 212, 0.8)'); // Cyan
+            gradient.addColorStop(0.5, 'rgba(168, 85, 247, 0.8)'); // Purple
+            gradient.addColorStop(1, 'rgba(236, 72, 153, 0.8)'); // Pink
+            ctx.fillStyle = gradient;
+            ctx.fillRect(x, height - barHeight, barWidth, barHeight);
+            // Add glow effect
+            ctx.shadowBlur = 10;
+            ctx.shadowColor = 'rgba(236, 72, 153, 0.5)';
+            x += barWidth + 1;
+        }
+        ctx.shadowBlur = 0;
+    } else {
+        // Idle animation
+        const time = Date.now() * 0.001;
+        ctx.strokeStyle = 'rgba(6, 182, 212, 0.3)';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        for (let x = 0; x < width; x++) {
+            const y = height / 2 + Math.sin(x * 0.01 + time) * 20 * Math.sin(time * 0.5);
+            if (x === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+    }
+    visualizer.animationId = requestAnimationFrame(drawVisualizer);
+}
+// Binaural Beat Generation
+function createBinauralBeats() {
+    const carrier = parseFloat(document.getElementById('carrierSlider').value);
+    const beat = parseFloat(document.getElementById('beatSlider').value);
+    // Cleanup existing
+    stopBinaural();
+    // Create nodes
+    binauralNodes.masterGain = audioContext.createGain();
+    binauralNodes.masterGain.connect(audioContext.destination);
+    binauralNodes.masterGain.connect(visualizer.analyser);
+    if (currentMode === 'spatial') {
+        // Spatial/Binaural mode: Different frequencies per ear
+        binauralNodes.leftOsc = audioContext.createOscillator();
+        binauralNodes.rightOsc = audioContext.createOscillator();
+        binauralNodes.leftGain = audioContext.createGain();
+        binauralNodes.rightGain = audioContext.createGain();
+        binauralNodes.merger = audioContext.createChannelMerger(2);
+        // Left ear: carrier
+        binauralNodes.leftOsc.frequency.value = carrier;
+        binauralNodes.leftOsc.connect(binauralNodes.leftGain);
+        binauralNodes.leftGain.connect(binauralNodes.merger, 0, 0);
+        // Right ear: carrier + beat
+        binauralNodes.rightOsc.frequency.value = carrier + beat;
+        binauralNodes.rightOsc.connect(binauralNodes.rightGain);
+        binauralNodes.rightGain.connect(binauralNodes.merger, 0, 1);
+        binauralNodes.merger.connect(binauralNodes.masterGain);
+        binauralNodes.leftOsc.start();
+        binauralNodes.rightOsc.start();
+    } else {
+        // Monaural mode: Amplitude modulation at beat frequency
+        binauralNodes.leftOsc = audioContext.createOscillator();
+        binauralNodes.modulator = audioContext.createOscillator();
+        binauralNodes.modulatorGain = audioContext.createGain();
+        // Carrier tone
+        binauralNodes.leftOsc.frequency.value = carrier;
+        // Modulator for amplitude
+        binauralNodes.modulator.frequency.value = beat;
+        binauralNodes.modulatorGain.gain.value = 0.5; // Modulation depth
+        // Connect modulator to gain
+        binauralNodes.modulator.connect(binauralNodes.modulatorGain.gain);
+        // Create constant offset for gain
+        const constantOffset = audioContext.createGain();
+        constantOffset.gain.value = 0.5;
+        binauralNodes.leftOsc.connect(constantOffset);
+        constantOffset.connect(binauralNodes.modulatorGain);
+        // Connect to both channels equally (monaural)
+        binauralNodes.merger = audioContext.createChannelMerger(2);
+        binauralNodes.modulatorGain.connect(binauralNodes.merger, 0, 0);
+        binauralNodes.modulatorGain.connect(binauralNodes.merger, 0, 1);
+        binauralNodes.merger.connect(binauralNodes.masterGain);
+        binauralNodes.leftOsc.start();
+        binauralNodes.modulator.start();
+    }
+    // Apply ramping
+    applyRamp(binauralNodes.masterGain.gain, 0.3);
+}
+function stopBinaural() {
+    if (binauralNodes.leftOsc) {
+        try { binauralNodes.leftOsc.stop(); } catch(e) {}
+        binauralNodes.leftOsc = null;
+    }
+    if (binauralNodes.rightOsc) {
+        try { binauralNodes.rightOsc.stop(); } catch(e) {}
+        binauralNodes.rightOsc = null;
+    }
+    if (binauralNodes.modulator) {
+        try { binauralNodes.modulator.stop(); } catch(e) {}
+        binauralNodes.modulator = null;
+    }
+    if (binauralNodes.masterGain) {
+        binauralNodes.masterGain.disconnect();
+    }
+}
+// Noise Generation (Always Spatial)
+function createNoise(type) {
+    stopNoise();
+    activeNoiseType = type;
+    const bufferSize = 2 * audioContext.sampleRate; // 2 seconds buffer
+    const numChannels = 2; // Stereo
+    const buffer = audioContext.createBuffer(numChannels, bufferSize, audioContext.sampleRate);
+    // Generate noise data
+    for (let channel = 0; channel < numChannels; channel++) {
+        const data = buffer.getChannelData(channel);
+        if (type === 'white') {
+            // White noise: random -1 to 1
+            for (let i = 0; i < bufferSize; i++) {
+                data[i] = Math.random() * 2 - 1;
+            }
+        } else if (type === 'pink') {
+            // Pink noise: 1/f using Paul Kellet's method
+            let b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0;
+            for (let i = 0; i < bufferSize; i++) {
+                const white = Math.random() * 2 - 1;
+                b0 = 0.99886 * b0 + white * 0.0555179;
+                b1 = 0.99332 * b1 + white * 0.0750759;
+                b2 = 0.96900 * b2 + white * 0.1538520;
+                b3 = 0.86650 * b3 + white * 0.3104856;
+                b4 = 0.55000 * b4 + white * 0.5329522;
+                b5 = -0.7616 * b5 - white * 0.0168980;
+                data[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
+                data[i] *= 0.11; // Normalize
+                b6 = white * 0.115926;
+            }
+        } else if (type === 'brown') {
+            // Brown noise: 1/f² (integration of white noise)
+            let lastOut = 0;
+            for (let i = 0; i < bufferSize; i++) {
+                const white = Math.random() * 2 - 1;
+                data[i] = (lastOut + (0.02 * white)) / 1.02;
+                lastOut = data[i];
+                data[i] *= 3.5; // Normalize
+            }
+        }
+    }
+    // Create spatial setup
+    noiseNodes.masterGain = audioContext.createGain();
+    noiseNodes.leftSource = audioContext.createBufferSource();
+    noiseNodes.rightSource = audioContext.createBufferSource();
+    noiseNodes.leftGain = audioContext.createGain();
+    noiseNodes.rightGain = audioContext.createGain();
+    noiseNodes.leftPanner = audioContext.createStereoPanner();
+    noiseNodes.rightPanner = audioContext.createStereoPanner();
+    // Set up looping
+    noiseNodes.leftSource.buffer = buffer;
+    noiseNodes.rightSource.buffer = buffer;
+    noiseNodes.leftSource.loop = true;
+    noiseNodes.rightSource.loop = true;
+    // Get spatial width
+    const spatialWidth = parseInt(document.getElementById('spatialWidthSlider').value) / 100;
+    const panValue = spatialWidth; // 0 = center, 1 = full side
+    // Left channel fully left
+    noiseNodes.leftPanner.pan.value = -panValue;
+    noiseNodes.leftSource.connect(noiseNodes.leftGain);
+    noiseNodes.leftGain.connect(noiseNodes.leftPanner);
+    noiseNodes.leftPanner.connect(noiseNodes.masterGain);
+    // Right channel fully right (with slight offset for true spatial feel)
+    noiseNodes.rightPanner.pan.value = panValue;
+    noiseNodes.rightSource.connect(noiseNodes.rightGain);
+    noiseNodes.rightGain.connect(noiseNodes.rightPanner);
+    noiseNodes.rightPanner.connect(noiseNodes.masterGain);
+    // Add slight delay to right channel for enhanced spatialization
+    if (spatialWidth > 0.5) {
+        const delay = audioContext.createDelay();
+        delay.delayTime.value = 0.01; // 10ms delay
+        noiseNodes.rightPanner.disconnect();
+        noiseNodes.rightPanner.connect(delay);
+        delay.connect(noiseNodes.masterGain);
+    }
+    noiseNodes.masterGain.connect(audioContext.destination);
+    noiseNodes.masterGain.connect(visualizer.analyser);
+    // Set volume
+    const volume = parseInt(document.getElementById('noiseVolumeSlider').value) / 100;
+    noiseNodes.masterGain.gain.value = volume;
+    noiseNodes.leftSource.start();
+    noiseNodes.rightSource.start();
+    // Add slight variation between channels for true spatial effect
+    // By starting at slightly different offsets
+    noiseNodes.rightSource.playbackRate.value = 0.999; // Slight pitch difference creates beating
+    updateNoiseButtonStates();
+}
+function stopNoise() {
+    if (noiseNodes.leftSource) {
+        try { noiseNodes.leftSource.stop(); } catch(e) {}
+        noiseNodes.leftSource = null;
+    }
+    if (noiseNodes.rightSource) {
+        try { noiseNodes.rightSource.stop(); } catch(e) {}
+        noiseNodes.rightSource = null;
+    }
+    if (noiseNodes.masterGain) {
+        noiseNodes.masterGain.disconnect();
+    }
+    activeNoiseType = null;
+    updateNoiseButtonStates();
+}
+function updateNoiseButtonStates() {
+    const buttons = ['pinkNoiseBtn', 'brownNoiseBtn', 'whiteNoiseBtn'];
+    const types = ['pink', 'brown', 'white'];
+    buttons.forEach((id, index) => {
+        const btn = document.getElementById(id);
+        if (activeNoiseType === types[index]) {
+            btn.classList.add('playing');
+            btn.querySelector('i[data-lucide="play-circle"]').setAttribute('data-lucide', 'stop-circle');
+        } else {
+            btn.classList.remove('playing');
+            btn.querySelector('i[data-lucide="stop-circle"]')?.setAttribute('data-lucide', 'play-circle');
+        }
+    });
+    lucide.createIcons();
+}
+// Ramping Functionality
+function applyRamp(gainNode, targetValue) {
+    const now = audioContext.currentTime;
+    if (rampMode === 'none') {
+        gainNode.setValueAtTime(targetValue, now);
+    } else if (rampMode === 'up') {
+        gainNode.setValueAtTime(0.001, now);
+        gainNode.exponentialRampToValueAtTime(targetValue, now + rampDuration);
+    } else if (rampMode === 'down') {
+        gainNode.setValueAtTime(targetValue, now);
+        gainNode.exponentialRampToValueAtTime(0.001, now + rampDuration);
+        // Stop after ramp down
+        setTimeout(() => {
+            stopAll();
+        }, rampDuration * 1000);
+    }
+}
+function stopAll() {
+    stopBinaural();
+    stopNoise();
+    isPlaying = false;
+    updatePlayButton();
+}
+function updatePlayButton() {
+    const btn = document.getElementById('playBinauralBtn');
+    const stopBtn = document.getElementById('stopAllBtn');
+    if (isPlaying) {
+        btn.innerHTML = '<i data-lucide="pause" class="w-6 h-6"></i><span>Stop Binaural</span>';
+        btn.classList.remove('from-cyan-400', 'via-purple-500', 'to-pink-500');
+        btn.classList.add('from-red-400', 'via-red-500', 'to-rose-600');
+        stopBtn.disabled = false;
+        stopBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+    } else {
+        btn.innerHTML = '<i data-lucide="play" class="w-6 h-6"></i><span>Generate Binaural Beat</span>';
+        btn.classList.add('from-cyan-400', 'via-purple-500', 'to-pink-500');
+        btn.classList.remove('from-red-400', 'via-red-500', 'to-rose-600');
+        stopBtn.disabled = true;
+        stopBtn.classList.add('opacity-50', 'cursor-not-allowed');
+    }
+    lucide.createIcons();
+}
+// Event Listeners
+document.addEventListener('DOMContentLoaded', () => {
+    // Mode selection
+    document.getElementById('spatialBtn').addEventListener('click', () => {
+        currentMode = 'spatial';
+        document.getElementById('spatialBtn').classList.add('active', 'from-cyan-500', 'to-blue-500', 'text-white');
+        document.getElementById('spatialBtn').classList.remove('bg-white/10', 'text-purple-200');
+        document.getElementById('monauralBtn').classList.remove('active', 'from-purple-500', 'to-pink-500', 'text-white');
+        document.getElementById('monauralBtn').classList.add('bg-white/10', 'text-purple-200');
+        document.getElementById('modeDescription').textContent = 'Different frequencies in each ear create the beat perception';
+    });
+    document.getElementById('monauralBtn').addEventListener('click', () => {
+        currentMode = 'monaural';
+        document.getElementById('monauralBtn').classList.add('active', 'from-purple-500', 'to-pink-500', 'text-white');
+        document.getElementById('monauralBtn').classList.remove('bg-white/10', 'text-purple-200');
+        document.getElementById('spatialBtn').classList.remove('active', 'from-cyan-500', 'to-blue-500', 'text-white');
+        document.getElementById('spatialBtn').classList.add('bg-white/10', 'text-purple-200');
+        document.getElementById('modeDescription').textContent = 'Same frequency in both ears with amplitude modulation';
+    });
+    // Ramp selection
+    const rampButtons = {
+        'rampNone': 'none',
+        'rampUp': 'up',
+        'rampDown': 'down'
+    };
+    Object.keys(rampButtons).forEach(id => {
+        document.getElementById(id).addEventListener('click', () => {
+            rampMode = rampButtons[id];
+            Object.keys(rampButtons).forEach(btnId => {
+                const btn = document.getElementById(btnId);
+                if (btnId === id) {
+                    btn.classList.add('active', 'from-purple-500', 'to-pink-500', 'text-white');
+                    btn.classList.remove('bg-white/10', 'text-purple-200');
+                } else {
+                    btn.classList.remove('active', 'from-purple-500', 'to-pink-500', 'text-white');
+                    btn.classList.add('bg-white/10', 'text-purple-200');
+                }
+            });
+        });
+    });
+    // Sliders
+    document.getElementById('carrierSlider').addEventListener('input', (e) => {
+        document.getElementById('carrierValue').textContent = e.target.value + ' Hz';
+        if (isPlaying && currentMode === 'spatial') {
+            const beat = parseFloat(document.getElementById('beatSlider').value);
+            binauralNodes.leftOsc.frequency.setValueAtTime(parseFloat(e.target.value), audioContext.currentTime);
+            binauralNodes.rightOsc.frequency.setValueAtTime(parseFloat(e.target.value) + beat, audioContext.currentTime);
+        } else if (isPlaying) {
+            binauralNodes.leftOsc.frequency.setValueAtTime(parseFloat(e.target.value), audioContext.currentTime);
+        }
+    });
+    document.getElementById('beatSlider').addEventListener('input', (e) => {
+        document.getElementById('beatValue').textContent = e.target.value + ' Hz';
+        if (isPlaying) {
+            const carrier = parseFloat(document.getElementById('carrierSlider').value);
+            const beat = parseFloat(e.target.value);
+            if (currentMode === 'spatial') {
+                binauralNodes.rightOsc.frequency.setValueAtTime(carrier + beat, audioContext.currentTime);
+            } else {
+                binauralNodes.modulator.frequency.setValueAtTime(beat, audioContext.currentTime);
+            }
+        }
+    });
+    document.getElementById('rampDuration').addEventListener('input', (e) => {
+        rampDuration = parseInt(e.target.value);
+        document.getElementById('rampDurationValue').textContent = rampDuration + 's';
+    });
+    document.getElementById('noiseVolumeSlider').addEventListener('input', (e) => {
+        const value = e.target.value;
+        document.getElementById('noiseVolumeValue').textContent = value + '%';
+        if (noiseNodes.masterGain) {
+            noiseNodes.masterGain.gain.setValueAtTime(value / 100, audioContext.currentTime);
+        }
+    });
+    document.getElementById('spatialWidthSlider').addEventListener('input', (e) => {
+        const value = parseInt(e.target.value);
+        const label = value < 30 ? 'Narrow' : value < 70 ? 'Medium' : 'Wide';
+        document.getElementById('spatialWidthValue').textContent = label;
+        if (activeNoiseType) {
+            // Recreate noise with new spatial settings
+            createNoise(activeNoiseType);
+        }
+    });
+    // Brainwave presets
+    document.querySelectorAll('.brainwave-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const carrier = btn.dataset.carrier;
+            const beat = btn.dataset.beat;
+            document.getElementById('carrierSlider').value = carrier;
+            document.getElementById('beatSlider').value = beat;
+            document.getElementById('carrierValue').textContent = carrier + ' Hz';
+            document.getElementById('beatValue').textContent = beat + ' Hz';
+            // Visual feedback
+            btn.style.transform = 'scale(0.95)';
+            setTimeout(() => btn.style.transform = '', 100);
+        });
+    });
+    // Play buttons
+    document.getElementById('playBinauralBtn').addEventListener('click', () => {
+        initAudioContext();
+        if (isPlaying) {
+            stopBinaural();
+            isPlaying = false;
+        } else {
+            createBinauralBeats();
+            isPlaying = true;
+        }
+        updatePlayButton();
+    });
+    // Noise buttons (toggle behavior)
+    document.getElementById('pinkNoiseBtn').addEventListener('click', () => {
+        initAudioContext();
+        if (activeNoiseType === 'pink') {
+            stopNoise();
+        } else {
+            createNoise('pink');
+        }
+    });
+    document.getElementById('brownNoiseBtn').addEventListener('click', () => {
+        initAudioContext();
+        if (activeNoiseType === 'brown') {
+            stopNoise();
+        } else {
+            createNoise('brown');
+        }
+    });
+    document.getElementById('whiteNoiseBtn').addEventListener('click', () => {
+        initAudioContext();
+        if (activeNoiseType === 'white') {
+            stopNoise();
+        } else {
+            createNoise('white');
+        }
+    });
+    document.getElementById('stopAllBtn').addEventListener('click', stopAll);
+    // Particle background animation
+    initParticles();
+});
+// Particle System
+function initParticles() {
+    const canvas = document.getElementById('particleCanvas');
+    const ctx = canvas.getContext('2d');
+    function resize() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    }
+    resize();
+    window.addEventListener('resize', resize);
+    const particles = [];
+    const particleCount = 50;
+    for (let i = 0; i < particleCount; i++) {
+        particles.push({
+            x: Math.random() * canvas.width,
+            y: Math.random() * canvas.height,
+            radius: Math.random() * 3 + 1,
+            vx: (Math.random() - 0.5) * 0.5,
+            vy: (Math.random() - 0.5) * 0.5,
+            color: `hsla(${Math.random() * 60 + 240}, 70%, 60%, ${Math.random() * 0.3})`
+        });
+    }
+    function animate() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        particles.forEach(p => {
+            p.x += p.vx;
+            p.y += p.vy;
+            if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
+            if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
+            ctx.fillStyle = p.color;
+            ctx.fill();
+        });
+        // Connect nearby particles
+        particles.forEach((p1, i) => {
+            particles.slice(i + 1).forEach(p2 => {
+                const dx = p1.x - p2.x;
+                const dy = p1.y - p2.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < 100) {
+                    ctx.beginPath();
+                    ctx.moveTo(p1.x, p1.y);
+                    ctx.lineTo(p2.x, p2.y);
+                    ctx.strokeStyle = `rgba(147, 51, 234, ${0.1 * (1 - distance / 100)})`;
+                    ctx.stroke();
+                }
+            });
+        });
+        requestAnimationFrame(animate);
+    }
+    animate();
+}
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+    stopAll();
+    if (audioContext) {
+        audioContext.close();
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,162 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom animations and psychedelic effects */
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
+@keyframes pulse-slow {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.1); }
 }
+@keyframes text-shimmer {
+    0% { background-position: -200% center; }
+    100% { background-position: 200% center; }
 }
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
 }
+.animate-gradient {
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
 }
+.animate-pulse-slow {
+    animation: pulse-slow 8s ease-in-out infinite;
+}
+.animate-text-shimmer {
+    background-size: 200% auto;
+    animation: text-shimmer 5s linear infinite;
+}
+/* Glassmorphism panels */
+.glass-panel {
+    background: rgba(20, 20, 40, 0.6);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+/* Custom range slider styling */
+input[type="range"] {
+    -webkit-appearance: none;
+    background: transparent;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #06b6d4, #3b82f6);
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5), 0 0 20px rgba(6, 182, 212, 0.3);
+    margin-top: -8px;
+    border: 2px solid white;
+    transition: transform 0.2s;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 15px rgba(6, 182, 212, 0.8), 0 0 30px rgba(6, 182, 212, 0.5);
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 2px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+input[type="range"]:focus {
+    outline: none;
+}
+/* Pink accent for beat slider */
+#beatSlider::-webkit-slider-thumb {
+    background: linear-gradient(135deg, #ec4899, #f472b6);
+    box-shadow: 0 0 10px rgba(236, 72, 153, 0.5), 0 0 20px rgba(236, 72, 153, 0.3);
+}
+#beatSlider::-webkit-slider-thumb:hover {
+    box-shadow: 0 0 15px rgba(236, 72, 153, 0.8), 0 0 30px rgba(236, 72, 153, 0.5);
+}
+/* Amber accent for noise */
+#noiseVolumeSlider::-webkit-slider-thumb,
+#spatialWidthSlider::-webkit-slider-thumb {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 0 20px rgba(245, 158, 11, 0.3);
+}
+/* Button glow effects */
+.mode-btn.active {
+    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2);
+    transform: scale(1.05);
+}
+.ramp-btn.active {
+    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2);
+}
+.noise-btn.playing {
+    box-shadow: 0 0 30px currentColor;
+    animation: pulse-border 2s ease-in-out infinite;
+}
+@keyframes pulse-border {
+    0%, 100% { border-color: rgba(255, 255, 255, 0.5); }
+    50% { border-color: rgba(255, 255, 255, 1); }
+}
+/* Brainwave button effects */
+.brainwave-btn {
+    transition: all 0.3s ease;
+}
+.brainwave-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .glass-panel {
+        padding: 1.5rem;
+    }
+    h1 {
+        font-size: 2.5rem;
+    }
+}
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.3);
+}
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #06b6d4, #ec4899);
+    border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #22d3ee, #f472b6);
+}
+/* Selection styling */
+::selection {
+    background: rgba(236, 72, 153, 0.4);
+    color: white;
+}