Sound Chamber – Custom dApp Creations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NXT Wave Sound Chamber</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        /* Base and Tailwind scaling setup */
        html { font-size: 16px; }
        
        body { 
            background: #020202; 
            color: #e0f7fa; 
            font-family: system-ui, -apple-system, sans-serif;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

.glass { background: rgba(255,255,255,0.08); backdrop-filter: blur(1.25rem); border: 0.0625rem solid rgba(57, 255, 20, 0.3); }
        .preset-card { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
        .preset-card.active { border-color: #39ff14; box-shadow: 0 0 0 0.1875rem rgba(57, 255, 20, 0.3); }
        .slider { accent-color: #39ff14; }
        .waveform { height: 3.75rem; background: linear-gradient(90deg, #1e2937, #334155); border-radius: 9999px; overflow: hidden; position: relative; }
        .waveform::before {
            content: '';
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            background: repeating-linear-gradient(90deg, transparent, transparent 0.25rem, rgba(57, 255, 20, 0.15) 0.25rem, rgba(57, 255, 20, 0.15) 0.5rem);
            animation: wave-move 1.5s linear infinite;
        }
        @keyframes wave-move { 0% { transform: translateX(0); } 100% { transform: translateX(1.25rem); } }
        .frequency-value { font-variant-numeric: tabular-nums; }

/* Modal Styles */
        .modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            padding: 1.25rem;
        }
        .modal.show { display: flex; }
        .modal-content {
            background: #0a0f1a;
            border: 0.125rem solid #00e1ff;
            border-radius: 1rem;
            max-width: 32.5rem;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 0 3.75rem rgba(0, 225, 255, 0.3);
        }
        .section-card {
            background: #0f1626;
            border: 0.0625rem solid #39ff14;
            border-radius: 0.75rem;
            padding: 1.25rem;
        }

/* Education Slide Transitions */
        .edu-slide { 
            display: none; 
            animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        .edu-slide.active { 
            display: block; 
        }
        @keyframes slideIn { 
            from { opacity: 0; transform: translateX(1.25rem); } 
            to { opacity: 1; transform: translateX(0); } 
        }

/* Desktop Responsive Scaling (75% larger natively via rem calculation, removes buggy zoom properties) */
        @media (min-width: 1024px) {
            html {
                font-size: 28px; /* 16px * 1.75 = 28px */
            }
        }
    </style>
</head>
<body data-rsssl=1 class="bg-black text-[#e0f7fa]">
    <div class="w-full max-w-[45rem] m-auto p-6">
        
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-x-3">
                <div class="w-11 h-11 bg-[#39ff14] rounded-2xl flex items-center justify-center">
                    <i class="fas fa-headphones text-black text-3xl"></i>
                </div>
                <div>
                    <h1 class="text-4xl font-semibold tracking-tighter text-white">NXT Wave Sound Chamber</h1>
                    <p class="text-slate-400 text-sm -mt-1">Binaural Beats Generator</p>
                </div>
            </div>
            <div class="px-3 py-1 bg-slate-900 rounded-full text-xs font-medium flex items-center gap-x-1.5 border border-[#39ff14]">
                <div class="w-2 h-2 bg-[#39ff14] rounded-full animate-pulse"></div>
                <span class="text-[#39ff14]">Browser Native</span>
            </div>
        </div>

<div class="mb-8 text-sm text-slate-400 leading-relaxed bg-slate-900/50 p-4 rounded-2xl border border-[#39ff14]">
            <strong class="text-white">What is this?</strong><br>
            This is a free, open-source tool that generates <strong>binaural beats</strong> — two slightly different tones played in each ear. 
            Your brain perceives the difference as a pulsing rhythm, which can help guide brainwave states for relaxation, focus, meditation, or sleep.<br><br>
            <span class="text-[#39ff14]">This is a DIY educational tool.</span> It is <strong>not</strong> official Hemi-Sync® or affiliated with the Monroe Institute. 
            It simply uses the same scientific principle of binaural beats.
        </div>

<div class="mb-8">
            <div class="text-xs uppercase tracking-widest text-slate-400 mb-3 px-1">Brainwave Presets</div>
            <div class="grid grid-cols-3 sm:grid-cols-5 gap-2" id="presets-grid"></div>
        </div>

<div class="glass rounded-3xl p-6 border border-[#39ff14]">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <div class="flex justify-between mb-2 px-1">
                        <div><div class="font-medium">Carrier Frequency</div><div class="text-xs text-slate-500">Base tone (left ear)</div></div>
                        <div class="font-mono text-xl font-semibold text-[#39ff14]" id="carrier-value">200</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="range" id="carrier-slider" class="slider flex-1" min="50" max="400" step="1" value="200">
                        <input type="number" id="carrier-input" class="w-20 bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-sm" min="50" max="400" value="200">
                        <span class="text-xs text-slate-500">Hz</span>
                    </div>
                </div>

<div>
                    <div class="flex justify-between mb-2 px-1">
                        <div><div class="font-medium">Binaural Beat</div><div class="text-xs text-slate-500">Difference (right ear)</div></div>
                        <div class="font-mono text-xl font-semibold text-[#39ff14]" id="beat-value">6.0</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="range" id="beat-slider" class="slider flex-1" min="0.5" max="40" step="0.1" value="6">
                        <input type="number" id="beat-input" class="w-20 bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-sm" min="0.5" max="40" step="0.1" value="6">
                        <span class="text-xs text-slate-500">Hz</span>
                    </div>
                </div>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <div class="flex justify-between mb-2 px-1">
                        <div class="font-medium">Duration</div>
                        <div class="font-mono text-sm text-slate-400" id="duration-value">10:00</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="range" id="duration-slider" class="slider flex-1" min="1" max="60" step="1" value="10">
                        <span id="duration-min" class="text-xs text-slate-500">10 min</span>
                    </div>
                </div>

<div>
                    <div class="flex justify-between mb-2 px-1">
                        <div class="font-medium">Volume</div>
                        <div class="font-mono text-sm text-slate-400" id="volume-value">70%</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="range" id="volume-slider" class="slider flex-1" min="0" max="100" step="1" value="70">
                        <i class="fas fa-volume-up text-slate-400"></i>
                    </div>
                </div>
            </div>

<div class="flex flex-wrap gap-x-6 gap-y-3 mb-6">
                <label class="flex items-center gap-x-2 cursor-pointer">
                    <input type="checkbox" id="pink-noise-toggle" checked class="accent-[#39ff14]">
                    <span class="text-sm">Pink noise background (recommended)</span>
                </label>
                <label class="flex items-center gap-x-2 cursor-pointer">
                    <input type="checkbox" id="auto-stop-toggle" checked class="accent-[#39ff14]">
                    <span class="text-sm">Auto-stop after duration</span>
                </label>
            </div>

<div class="flex gap-4">
                <button id="play-btn" class="flex-1 h-16 bg-gradient-to-r from-[#39ff14] to-[#2ecc71] text-black font-semibold rounded-2xl flex items-center justify-center gap-x-3 text-lg">
                    <i class="fas fa-play mr-2" id="play-icon"></i>
                    <span id="play-text">START SESSION</span>
                </button>
                
                <button id="download-btn" class="h-16 px-8 bg-slate-800 hover:bg-slate-700 border border-[#39ff14] rounded-2xl flex items-center justify-center gap-x-2 text-sm">
                    <i class="fas fa-download"></i>
                    <span>Download WAV</span>
                </button>
            </div>

<div id="status-bar" class="mt-4 px-4 py-3 bg-slate-900/70 rounded-2xl text-sm flex items-center gap-x-3 border border-[#39ff14] hidden">
                <div class="flex items-center gap-x-2">
                    <div class="w-2 h-2 bg-[#39ff14] rounded-full animate-pulse"></div>
                    <span id="status-text" class="font-medium">Playing</span>
                </div>
                <div class="flex-1 h-px bg-slate-700"></div>
                <div id="timer-display" class="font-mono text-xs text-[#39ff14]">10:00</div>
            </div>
        </div>

<div class="mt-4 px-1">
            <div class="waveform flex items-center justify-center relative overflow-hidden" id="visualizer">
                <canvas id="wave-canvas" width="600" height="60" class="w-full h-full opacity-60"></canvas>
                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <div id="beat-indicator" class="w-3 h-3 bg-white rounded-full shadow-[0_0_0.75rem_#39ff14]" style="opacity: 0.3;"></div>
                </div>
            </div>
            <div class="text-center text-[0.625rem] text-slate-500 mt-1">Use good headphones for best results</div>
        </div>

<div class="mt-8 text-sm text-slate-400 bg-slate-900/50 p-5 rounded-2xl border border-[#39ff14]">
            <h3 class="font-semibold text-white mb-3">How to Use NXT Wave Sound Chamber</h3>
            <ol class="list-decimal list-inside space-y-2">
                <li>Put on <strong>good stereo headphones</strong> (essential — binaural beats only work with headphones).</li>
                <li>Choose a preset or adjust the sliders manually.</li>
                <li>Click <strong>START SESSION</strong> and close your eyes.</li>
                <li>Relax and let the tones guide your brainwave state.</li>
                <li>Use the <strong>Download WAV</strong> button to save sessions for offline use.</li>
            </ol>
            <div class="mt-4 text-xs text-slate-500">
                <strong>Tip:</strong> Start with 10–15 minute sessions. The pink noise option makes the experience feel more natural.
            </div>
            
            <button onclick="showEducation()" class="w-full mt-5 py-3 bg-gradient-to-r from-[#00e1ff] to-blue-600 text-white font-bold rounded-xl flex items-center justify-center gap-x-2 hover:opacity-90 transition-opacity border border-[#00e1ff]/50 shadow-[0_0_15px_rgba(0,225,255,0.2)]">
                <i class="fas fa-graduation-cap"></i>
                Learn the Science & Pyramid Secrets
            </button>
        </div>

<div class="mt-6 text-center text-[0.625rem] text-slate-500">
            Educational & personal use tool • Binaural beats technology • Not affiliated with any commercial brand
        </div>

<div class="mt-8 text-center">
            <button onclick="showPoweredBy()" class="text-xs px-6 py-2 border border-[#39ff14] text-[#39ff14] hover:bg-[#39ff14] hover:text-black transition-all rounded-full">
                Powered by A Few Bad Newbies LLC
            </button>
        </div>
    </div>

<div id="education-modal" class="modal" onclick="if (event.target.id === 'education-modal') hideEducation()">
        <div class="modal-content border-[#00e1ff]" onclick="event.stopImmediatePropagation()">
            
            <div class="flex justify-between items-center px-6 pt-6 pb-4 border-b border-[#00e1ff]/30">
                <div>
                    <div class="flex items-center gap-2 text-[#00e1ff]">
                        <i class="fas fa-book-open text-xl"></i>
                        <span class="text-xl font-bold tracking-widest">BECOME A SOUND EXPERT</span>
                    </div>
                    <div class="text-slate-400 text-sm mt-1">Ages 8 and up!</div>
                </div>
                <button onclick="hideEducation()" class="text-2xl text-[#00e1ff] hover:text-white">×</button>
            </div>

<div class="p-6">
                <div class="edu-slide active">
                    <div class="flex items-center justify-center w-16 h-16 bg-[#00e1ff]/20 rounded-full mb-4 mx-auto border border-[#00e1ff]">
                        <i class="fas fa-magic text-2xl text-[#00e1ff]"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-center text-white mb-4">The Invisible Sound</h2>
                    <p class="text-slate-300 leading-relaxed text-center mb-4">
                        Did you know your brain can hear a sound that isn’t even there? 
                    </p>
                    <div class="bg-slate-900 p-4 rounded-xl border border-slate-700 text-sm text-slate-300">
                        When you wear headphones and play a slightly different hum in your left ear than your right ear, your brain gets confused. To fix the confusion, it makes up a <strong>third sound</strong> right in the middle of your head! This magic trick of the mind is called a <strong>Binaural Beat</strong>.
                    </div>
                </div>

<div class="edu-slide">
                    <div class="flex items-center justify-center w-16 h-16 bg-[#39ff14]/20 rounded-full mb-4 mx-auto border border-[#39ff14]">
                        <i class="fas fa-wave-square text-2xl text-[#39ff14]"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-center text-white mb-4">Brainwave Surfing</h2>
                    <p class="text-slate-300 leading-relaxed text-center mb-4">
                        Your brain uses tiny pulses of electricity to think, dream, and feel. We measure these pulses in “Hz” (waves per second).
                    </p>
                    <ul class="space-y-3 text-sm text-slate-300 bg-slate-900 p-4 rounded-xl border border-slate-700">
                        <li><strong class="text-[#39ff14]">Gamma & Beta (Fast waves):</strong> Happen when you are solving a hard math problem or playing a fast video game.</li>
                        <li><strong class="text-[#39ff14]">Alpha (Medium waves):</strong> Happen when you are chilling out and daydreaming.</li>
                        <li><strong class="text-[#39ff14]">Theta & Delta (Slow waves):</strong> Happen when you are in a deep, relaxing sleep.</li>
                    </ul>
                </div>

<div class="edu-slide">
                    <div class="flex items-center justify-center w-16 h-16 bg-[#ffaa00]/20 rounded-full mb-4 mx-auto border border-[#ffaa00]">
                        <i class="fab fa-old-republic text-2xl text-[#ffaa00]"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-center text-white mb-4">The Ancient Pyramid Secret</h2>
                    <p class="text-slate-300 leading-relaxed text-center mb-4">
                        Thousands of years ago, ancient builders knew about the hidden power of sound and vibration.
                    </p>
                    <div class="bg-slate-900 p-4 rounded-xl border border-[#ffaa00]/50 text-sm text-slate-300">
                        The Great Pyramid of Giza isn’t just a building—it’s an acoustic marvel! The King’s Chamber was built with heavy granite blocks that hum and vibrate perfectly when hit with certain sounds (this is called <strong>Resonance</strong>). Some scientists and historians believe ancient people used these giant vibrating rooms to heal the body, meditate, and connect their minds together using the exact same frequencies you are using right now!
                    </div>
                </div>

<div class="edu-slide">
                    <div class="flex items-center justify-center w-16 h-16 bg-[#ff00ff]/20 rounded-full mb-4 mx-auto border border-[#ff00ff]">
                        <i class="fas fa-user-astronaut text-2xl text-[#ff00ff]"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-center text-white mb-4">Become a Mind Master</h2>
                    <p class="text-slate-300 leading-relaxed text-center mb-4">
                        Now you have the same ancient power right in your hands (and ears)!
                    </p>
                    <div class="bg-slate-900 p-4 rounded-xl border border-[#ff00ff]/50 text-sm text-slate-300 text-center">
                        You can use this sound chamber to tune your brain like a radio. Need to sleep? Pick <strong>Delta</strong>. Need to study? Pick <strong>Alpha</strong>. Put your headphones on, close your eyes, and let the acoustic magic work. <br><br><span class="text-white font-bold">You are now a Sound & Mind Expert!</span>
                    </div>
                </div>
            </div>

<div id="powered-modal" class="modal" onclick="if (event.target.id === 'powered-modal') hidePoweredBy()">
        <div class="modal-content" onclick="event.stopImmediatePropagation()">
            
            <div class="flex justify-between items-center px-6 pt-6 pb-4 border-b border-[#39ff14]">
                <div>
                    <div class="flex items-center gap-2 text-[#00e1ff]">
                        <i class="fas fa-microchip text-xl"></i>
                        <span class="text-xl font-bold tracking-widest">SYSTEM ARCHITECTURE</span>
                    </div>
                    <div class="text-[#39ff14] text-sm font-bold tracking-[0.125rem] mt-1">POWERED BY A FEW BAD NEWBIES LLC</div>
                </div>
                <button onclick="hidePoweredBy()" class="text-2xl text-[#39ff14] hover:text-white">×</button>
            </div>

<div class="p-6 space-y-5">
                
                <div class="section-card">
                    <div class="flex items-center gap-3 mb-3">
                        <i class="fas fa-gamepad text-2xl text-[#00e1ff]"></i>
                        <div class="text-[#39ff14] text-lg font-bold tracking-widest">THE ENTITY</div>
                    </div>
                    <p class="text-sm leading-relaxed text-slate-300">
                        A Few Bad Newbies LLC is a vanguard tech organization bridging the gap between high-stakes E-sports, competitive gaming, and Web3 innovation. We engineer the tools that empower the next era of digital creators.
                    </p>
                </div>

<div class="section-card">
                    <div class="flex items-center gap-3 mb-3">
                        <i class="fas fa-terminal text-2xl text-[#39ff14]"></i>
                        <div class="text-[#39ff14] text-lg font-bold tracking-widest">THE CREATOR</div>
                    </div>
                    <p class="text-sm leading-relaxed text-slate-300">
                        Architected and deployed by <span class="text-[#39ff14] font-semibold">William Simmons</span>, CEO & Lead Full-Stack Developer. Forged with a relentless commitment to high-fidelity UI/UX, immutable smart contracts, and decentralized sovereignty.
                    </p>
                </div>

<div class="section-card">
                    <div class="flex items-center gap-3 mb-3">
                        <i class="fas fa-network-wired text-2xl text-[#00e1ff]"></i>
                        <div class="text-[#39ff14] text-lg font-bold tracking-widest">THE ECOSYSTEM</div>
                    </div>
                    <p class="text-sm leading-relaxed text-slate-300">
                        A core infrastructure protocol proudly owned, operated, and maintained exclusively by <span class="text-[#39ff14] font-semibold">NXT Wave Labs</span>.
                    </p>
                </div>

<div class="bg-black border border-[#39ff14] rounded-lg px-4 py-3 flex items-center justify-between text-xs">
                    <div class="flex items-center gap-2 text-[#39ff14]">
                        <div class="w-2 h-2 bg-[#39ff14] rounded-full animate-pulse"></div>
                        <span class="font-bold">ALL SYSTEMS NOMINAL</span>
                    </div>
                    <div class="text-[#39ff14] font-mono">v2.0.4 // RUST/ANCHOR // SOLANA MAINNET</div>
                </div>

</div>
        </div>
    </div>

let audioCtx = null, leftOsc = null, rightOsc = null, leftGain = null, rightGain = null, merger = null, noiseSource = null, masterGain = null, isPlaying = false, timerInterval = null, currentPreset = null, canvas, ctx, animationFrame = null;
        let currentEduSlide = 0;

function initAudio() {
            if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            if (audioCtx.state === 'suspended') audioCtx.resume();
            return audioCtx;
        }

function createPinkNoiseBuffer(duration = 10) {
            const bufferSize = audioCtx.sampleRate * duration;
            const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
            const data = buffer.getChannelData(0);
            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; b6 = white * 0.115926;
            }
            let max = 0; for (let i = 0; i < bufferSize; i++) max = Math.max(max, Math.abs(data[i]));
            for (let i = 0; i < bufferSize; i++) data[i] /= max * 1.5;
            return buffer;
        }

function startPlayback() {
            if (isPlaying) return;
            const ctx = initAudio();
            const carrier = parseFloat(document.getElementById('carrier-input').value);
            const beat = parseFloat(document.getElementById('beat-input').value);
            const volume = parseFloat(document.getElementById('volume-slider').value) / 100;
            const useNoise = document.getElementById('pink-noise-toggle').checked;

merger = ctx.createChannelMerger(2);
            masterGain = ctx.createGain(); masterGain.gain.value = volume;
            leftOsc = ctx.createOscillator(); rightOsc = ctx.createOscillator();
            leftGain = ctx.createGain(); rightGain = ctx.createGain();
            leftOsc.type = 'sine'; rightOsc.type = 'sine';
            leftOsc.frequency.value = carrier; rightOsc.frequency.value = carrier + beat;
            leftGain.gain.value = 0.85; rightGain.gain.value = 0.85;

leftOsc.connect(leftGain); rightOsc.connect(rightGain);
            leftGain.connect(merger, 0, 0); rightGain.connect(merger, 0, 1);

if (useNoise) {
                const noiseBuffer = createPinkNoiseBuffer(30);
                noiseSource = ctx.createBufferSource(); noiseSource.buffer = noiseBuffer; noiseSource.loop = true;
                const noiseGain = ctx.createGain(); noiseGain.gain.value = 0.025;
                const noiseFilter = ctx.createBiquadFilter(); noiseFilter.type = 'lowpass'; noiseFilter.frequency.value = 800;
                noiseSource.connect(noiseFilter); noiseFilter.connect(noiseGain); noiseGain.connect(merger);
                noiseSource.start();
            }

merger.connect(masterGain); masterGain.connect(ctx.destination);
            leftOsc.start(); rightOsc.start();

isPlaying = true;
            updateUIForPlayback(true);
            startVisualizer(carrier, beat);
            startTimer();
            setupRealtimeControls();
        }

function stopPlayback() {
            if (!isPlaying) return;
            if (leftOsc) leftOsc.stop();
            if (rightOsc) rightOsc.stop();
            if (noiseSource) noiseSource.stop();
            if (merger) merger.disconnect();
            if (masterGain) masterGain.disconnect();
            leftOsc = rightOsc = leftGain = rightGain = merger = masterGain = noiseSource = null;
            isPlaying = false;
            updateUIForPlayback(false);
            stopVisualizer();
            stopTimer();
        }

function setupRealtimeControls() {
            const cIn = document.getElementById('carrier-input');
            const bIn = document.getElementById('beat-input');
            const vSl = document.getElementById('volume-slider');

const update = () => {
                if (!leftOsc || !rightOsc) return;
                const c = parseFloat(cIn.value);
                const b = parseFloat(bIn.value);
                leftOsc.frequency.setTargetAtTime(c, audioCtx.currentTime, 0.01);
                rightOsc.frequency.setTargetAtTime(c + b, audioCtx.currentTime, 0.01);
                document.getElementById('carrier-value').textContent = c;
                document.getElementById('beat-value').textContent = b.toFixed(1);
            };

cIn.oninput = update; bIn.oninput = update;
            vSl.oninput = () => { if (masterGain) masterGain.gain.value = parseFloat(vSl.value) / 100; document.getElementById('volume-value').textContent = vSl.value + '%'; };
        }

function updateUIForPlayback(playing) {
            const btn = document.getElementById('play-btn');
            const icon = document.getElementById('play-icon');
            const txt = document.getElementById('play-text');
            const status = document.getElementById('status-bar');

if (playing) {
                btn.classList.remove('from-[#39ff14]', 'to-[#2ecc71]');
                btn.classList.add('from-red-600', 'to-rose-600');
                icon.classList.remove('fa-play'); icon.classList.add('fa-stop');
                txt.textContent = 'STOP SESSION';
                const c = document.getElementById('carrier-input').value;
                const b = parseFloat(document.getElementById('beat-input').value).toFixed(1);
                document.getElementById('status-text').innerHTML = `Playing • <span class="text-[#39ff14]">${currentPreset || 'Custom'}</span> (${b} Hz)`;
                status.classList.remove('hidden'); status.classList.add('flex');
            } else {
                btn.classList.remove('from-red-600', 'to-rose-600');
                btn.classList.add('from-[#39ff14]', 'to-[#2ecc71]');
                icon.classList.remove('fa-stop'); icon.classList.add('fa-play');
                txt.textContent = 'START SESSION';
                status.classList.add('hidden'); status.classList.remove('flex');
            }
        }

function startVisualizer(carrier, beat) {
            canvas = document.getElementById('wave-canvas'); ctx = canvas.getContext('2d');
            let phase = 0; const beatPeriod = 1000 / beat;

function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                const w = canvas.width, h = canvas.height, cy = h / 2;
                ctx.strokeStyle = '#39ff14'; ctx.lineWidth = 2; ctx.shadowBlur = 8; ctx.shadowColor = '#39ff14';
                ctx.beginPath();
                for (let x = 0; x < w; x += 2) ctx.lineTo(x, cy + Math.sin((x / w) * Math.PI * 4 + phase) * (h * 0.35));
                ctx.stroke();
                ctx.strokeStyle = '#10b981'; ctx.shadowColor = '#10b981';
                ctx.beginPath();
                for (let x = 0; x < w; x += 2) ctx.lineTo(x, cy + Math.sin((x / w) * Math.PI * 4 + 1.2 + phase * 0.97) * (h * 0.28));
                ctx.stroke();
                phase += 0.08; animationFrame = requestAnimationFrame(draw);
            }
            draw();

function stopVisualizer() {
            if (window.cleanupVis) window.cleanupVis();
            if (canvas && ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function startTimer() {
            let rem = parseInt(document.getElementById('duration-slider').value) * 60;
            const el = document.getElementById('timer-display'); el.textContent = formatTime(rem);
            timerInterval = setInterval(() => {
                rem--; el.textContent = formatTime(rem);
                if (rem <= 0 && document.getElementById('auto-stop-toggle').checked) stopPlayback();
            }, 1000);
        }

function stopTimer() { if (timerInterval) clearInterval(timerInterval); timerInterval = null; }
        function formatTime(s) { return `${Math.floor(s/60)}:${(s%60).toString().padStart(2,'0')}`; }

async function downloadWAV() {
            const btn = document.getElementById('download-btn');
            const orig = btn.innerHTML;
            btn.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i> Rendering...`;
            btn.disabled = true;

try {
                const carrier = parseFloat(document.getElementById('carrier-input').value);
                const beat = parseFloat(document.getElementById('beat-input').value);
                const dur = parseInt(document.getElementById('duration-slider').value) * 60;
                const vol = parseFloat(document.getElementById('volume-slider').value) / 100;
                const useNoise = document.getElementById('pink-noise-toggle').checked;

const off = new OfflineAudioContext(2, 44100 * dur, 44100);
                const lOsc = off.createOscillator(); const rOsc = off.createOscillator();
                lOsc.frequency.value = carrier; rOsc.frequency.value = carrier + beat;
                const lG = off.createGain(); const rG = off.createGain(); lG.gain.value = 0.85 * vol; rG.gain.value = 0.85 * vol;
                const m = off.createChannelMerger(2);
                lOsc.connect(lG); rOsc.connect(rG); lG.connect(m, 0, 0); rG.connect(m, 0, 1);

if (useNoise) {
                    const nb = createPinkNoiseBufferOffline(off, dur);
                    const ns = off.createBufferSource(); ns.buffer = nb; ns.loop = true;
                    const ng = off.createGain(); ng.gain.value = 0.025 * vol;
                    const nf = off.createBiquadFilter(); nf.type = 'lowpass'; nf.frequency.value = 800;
                    ns.connect(nf); nf.connect(ng); ng.connect(m); ns.start();
                }

const fg = off.createGain();
                fg.gain.setValueAtTime(0, 0); fg.gain.linearRampToValueAtTime(1, 8);
                fg.gain.setValueAtTime(1, dur - 8); fg.gain.linearRampToValueAtTime(0, dur);
                m.connect(fg); fg.connect(off.destination);

lOsc.start(); rOsc.start();
                const buf = await off.startRendering();
                const blob = bufferToWav(buf);
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a'); a.href = url; a.download = `nxt-wave-sound-chamber_${currentPreset || 'custom'}.wav`;
                a.click(); URL.revokeObjectURL(url);
            } catch(e) { alert('Download failed'); }
            finally { btn.innerHTML = orig; btn.disabled = false; }
        }

function createPinkNoiseBufferOffline(ctx, dur) {
            const size = Math.floor(ctx.sampleRate * dur);
            const buf = ctx.createBuffer(1, size, ctx.sampleRate);
            const d = buf.getChannelData(0);
            let b0=0,b1=0,b2=0,b3=0,b4=0,b5=0,b6=0;
            for(let i=0;i<size;i++){
                const w = Math.random()*2-1;
                b0=0.99886*b0 + w*0.0555179; b1=0.99332*b1 + w*0.0750759;
                b2=0.96900*b2 + w*0.1538520; b3=0.86650*b3 + w*0.3104856;
                b4=0.55000*b4 + w*0.5329522; b5=-0.7616*b5 - w*0.0168980;
                d[i] = b0+b1+b2+b3+b4+b5+b6 + w*0.5362; b6 = w*0.115926;
            }
            let mx=0; for(let i=0;i<size;i++) mx=Math.max(mx,Math.abs(d[i]));
            for(let i=0;i<size;i++) d[i]/=mx*1.5; return buf;
        }

function syncControls() {
            const cs = document.getElementById('carrier-slider');
            const ci = document.getElementById('carrier-input');
            const bs = document.getElementById('beat-slider');
            const bi = document.getElementById('beat-input');
            const ds = document.getElementById('duration-slider');

cs.oninput = () => { ci.value = cs.value; document.getElementById('carrier-value').textContent = cs.value; };
            ci.oninput = () => { cs.value = ci.value; document.getElementById('carrier-value').textContent = ci.value; };
            bs.oninput = () => { bi.value = parseFloat(bs.value).toFixed(1); document.getElementById('beat-value').textContent = parseFloat(bs.value).toFixed(1); };
            bi.oninput = () => { bs.value = bi.value; document.getElementById('beat-value').textContent = parseFloat(bi.value).toFixed(1); };
            ds.oninput = () => { document.getElementById('duration-min').textContent = ds.value; document.getElementById('duration-value').textContent = `${ds.value.padStart(2,'0')}:00`; };
            document.getElementById('volume-slider').oninput = () => { document.getElementById('volume-value').textContent = document.getElementById('volume-slider').value + '%'; };
            document.getElementById('duration-min').textContent = ds.value;
            document.getElementById('duration-value').textContent = `${ds.value.padStart(2,'0')}:00`;
            document.getElementById('volume-value').textContent = document.getElementById('volume-slider').value + '%';
        }

function showPoweredBy() {
            document.getElementById('powered-modal').classList.add('show');
        }

function hidePoweredBy() {
            document.getElementById('powered-modal').classList.remove('show');
        }

function showEducation() {
            document.getElementById('education-modal').classList.add('show');
            currentEduSlide = 0;
            updateEduSlides();
        }

function hideEducation() {
            document.getElementById('education-modal').classList.remove('show');
        }

function prevEduSlide() {
            if (currentEduSlide > 0) {
                currentEduSlide--;
                updateEduSlides();
            }
        }

function updateEduSlides() {
            const slides = document.querySelectorAll('.edu-slide');
            slides.forEach((s, i) => s.classList.toggle('active', i === currentEduSlide));
            
            document.getElementById('edu-prev').style.display = currentEduSlide === 0 ? 'none' : 'block';
            
            const nextBtn = document.getElementById('edu-next');
            if (currentEduSlide === slides.length - 1) {
                nextBtn.innerHTML = 'Start Listening <i class="fas fa-check ml-2"></i>';
                nextBtn.className = 'bg-[#ff00ff] text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-white hover:text-black transition-colors ml-auto';
            } else {
                nextBtn.innerHTML = 'Next <i class="fas fa-arrow-right ml-2"></i>';
                nextBtn.className = 'bg-[#00e1ff] text-black px-4 py-2 rounded-lg text-sm font-bold hover:bg-white transition-colors ml-auto';
            }

document.getElementById('edu-dots').innerHTML = Array.from(slides).map((_, i) => 
                `<div class="w-2 h-2 rounded-full transition-colors ${i === currentEduSlide ? 'bg-[#00e1ff]' : 'bg-slate-700'}"></div>`
            ).join('');
        }

function init() {
            initPresets();
            syncControls();

setTimeout(() => {
                const cards = document.querySelectorAll('#presets-grid > div');
                if (cards[1]) { cards[1].classList.add('active', 'border-[#39ff14]'); currentPreset = 'Theta'; }
            }, 50);

document.getElementById('play-btn').onclick = () => { isPlaying ? stopPlayback() : startPlayback(); };
            document.getElementById('download-btn').onclick = downloadWAV;

document.getElementById('carrier-value').textContent = document.getElementById('carrier-input').value;
            document.getElementById('beat-value').textContent = parseFloat(document.getElementById('beat-input').value).toFixed(1);
        }

document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl498541'},{'dcenter':'p3'},{'cp_id':'6507419'},{'cp_cache':''},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>