A!leys Galerie

```html
<!DOCTYPE html>
<html lang="de">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Neon Pulse Visualizer
    
        body {
            margin: 0;
            background: #050505;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .ui {
            position: relative;
            z-index: 10;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
            color: white;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
        }

        h1 {
            margin: 0 0 10px 0;
            font-size: 1.5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        button {
            background: linear-gradient(45deg, #ff00ff, #00ffff);
            border: none;
            padding: 12px 24px;
            color: white;
            font-weight: bold;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        button:hover {
            transform: scale(1.05);
        }

        .controls {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        input[type="range"] {
            accent-color: #ff00ff;
        }
    

    <canvas id="visualizer">

    <div class="ui">
        Neon Pulse
        <button id="startBtn">START AUDIO
        <div class="controls">
            Sensitivity
            <input type="range" id="sensitivity" min="1" max="5" step="0.1" value="2">
            Color Shift
            <input type="range" id="colorShift" min="0" max="360" step="1" value="180">
        
    

    
        const canvas = document.getElementById('visualizer');
        const ctx = canvas.getContext('2d');
        const startBtn = document.getElementById('startBtn');
        const sensitivityInput = document.getElementById('sensitivity');
        const colorShiftInput = document.getElementById('colorShift');

        let audioCtx;
        let analyser;
        let dataArray;
        let animationId;

        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        window.addEventListener('resize', resize);
        resize();

        function initAudio() {
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            analyser = audioCtx.createAnalyser();
            analyser.fftSize = 256;
            
            const bufferLength = analyser.frequencyBinCount;
            dataArray = new Uint8Array(bufferLength);

            // Create a simple oscillator for demo
            const oscillator = audioCtx.createOscillator();
            const gainNode = audioCtx.createGain();
            
            oscillator.type = 'sawtooth';
            oscillator.frequency.setValueAtTime(110, audioCtx.currentTime);
            
            gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime);
            
            oscillator.connect(gainNode);
            gainNode.connect(analyser);
            analyser.connect(audioCtx.destination);
            
            oscillator.start();
            
            draw();
        }

        function draw() {
            animationId = requestAnimationFrame(draw);
            analyser.getByteFrequencyData(dataArray);

            ctx.fillStyle = 'rgba(5, 5, 5, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            const sensitivity = parseFloat(sensitivityInput.value);
            const colorShift = parseInt(colorShiftInput.value);

            ctx.beginPath();
            ctx.lineWidth = 3;
            ctx.strokeStyle = `hsl(${colorShift}, 100%, 50%)`;

            const sliceWidth = canvas.width / dataArray.length;
            let x = 0;

            for (let i = 0; i < dataArray.length; i++) {
                const v = dataArray[i] * sensitivity;
                const y = (canvas.height / 2) + (v / 255) * (canvas.height / 3);

                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }

                x += sliceWidth;
            }

            ctx.stroke();

            // Add some particles
            for (let i = 0; i < 5; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 5;
                ctx.fillStyle = `hsl(${colorShift + Math.random() * 50}, 100%, 50%)`;
                ctx.beginPath();
                ctx.arc(x, y, size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        startBtn.addEventListener('click', () => {
            if (!audioCtx) {
                initAudio();
                startBtn.textContent = 'STOP AUDIO';
            } else {
                audioCtx.close();
                audioCtx = null;
                cancelAnimationFrame(animationId);
                ctx.clearRect(0, 0, canvas.width,