Spaces:

1hitonline
/

Marimba-v1

Paused

App Files Files Community

MySafeCode commited on Dec 20, 2025

Commit

7746a56

verified ·

1 Parent(s): de8ef86

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +712 -834

index.html CHANGED Viewed

@@ -1,846 +1,724 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SID Chip Tune Studio</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        :root {
-            --c64-blue: #352879;
-            --c64-lightblue: #6c5eb5;
-            --c64-cyan: #00a0a0;
-            --c64-purple: #a0a0ff;
-            --c64-pink: #ff00ff;
-            --c64-yellow: #ffff00;
-            --c64-orange: #ff7700;
-            --c64-green: #00ff00;
-            --c64-red: #ff0000;
-            --c64-white: #ffffff;
-            --c64-gray: #7869c4;
-            --bg-dark: #0a0a0f;
-            --bg-medium: #1a1a2e;
-            --bg-light: #16213e;
-        }
-        body {
-            font-family: 'Courier New', monospace;
-            background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
-            color: var(--c64-white);
-            min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
-        }
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                repeating-linear-gradient(
-                    0deg,
-                    transparent,
-                    transparent 2px,
-                    rgba(0, 160, 160, 0.03) 2px,
-                    rgba(0, 160, 160, 0.03) 4px
-                );
-            pointer-events: none;
-            z-index: 1;
-        }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-            position: relative;
-            z-index: 2;
-        }
-        header {
-            text-align: center;
-            padding: 30px 0;
-            background: linear-gradient(135deg, var(--c64-blue), var(--c64-lightblue));
-            border-radius: 15px;
-            margin-bottom: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-            position: relative;
-            overflow: hidden;
-        }
-        header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: repeating-linear-gradient(
-                45deg,
-                transparent,
-                transparent 10px,
-                rgba(255, 255, 255, 0.05) 10px,
-                rgba(255, 255, 255, 0.05) 20px
-            );
-            animation: slide 20s linear infinite;
-        }
-        @keyframes slide {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(50px, 50px); }
-        }
-        h1 {
-            font-size: 3em;
-            text-shadow: 3px 3px 0 var(--c64-purple),
-                         6px 6px 0 var(--c64-pink),
-                         9px 9px 20px rgba(0, 0, 0, 0.5);
-            position: relative;
-            z-index: 1;
-            letter-spacing: 5px;
-            margin-bottom: 10px;
-        }
-        .subtitle {
-            font-size: 1.2em;
-            color: var(--c64-yellow);
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-            position: relative;
-            z-index: 1;
-        }
-        .credits {
-            margin-top: 15px;
-            font-size: 0.9em;
-            color: var(--c64-cyan);
-            position: relative;
-            z-index: 1;
-        }
-        .credits a {
-            color: var(--c64-yellow);
-            text-decoration: none;
-            transition: all 0.3s;
-        }
-        .credits a:hover {
-            color: var(--c64-orange);
-            text-shadow: 0 0 10px var(--c64-orange);
-        }
-        .controls {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .control-group {
-            background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
-            padding: 20px;
-            border-radius: 10px;
-            border: 2px solid var(--c64-cyan);
-            box-shadow: 0 5px 15px rgba(0, 160, 160, 0.3);
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
-        .control-group:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(0, 160, 160, 0.5);
-        }
-        .control-group h3 {
-            color: var(--c64-cyan);
-            margin-bottom: 15px;
-            font-size: 1.2em;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-        .btn {
-            background: linear-gradient(135deg, var(--c64-purple), var(--c64-pink));
-            color: var(--c64-white);
-            border: none;
-            padding: 12px 25px;
-            border-radius: 8px;
-            font-size: 1em;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-            margin: 5px;
-        }
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4);
-            background: linear-gradient(135deg, var(--c64-pink), var(--c64-purple));
-        }
-        .btn:active {
-            transform: translateY(0);
-        }
-        .btn.active {
-            background: linear-gradient(135deg, var(--c64-green), var(--c64-yellow));
-            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
-        }
-        .slider-container {
-            margin: 10px 0;
-        }
-        .slider-label {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 5px;
-            font-size: 0.9em;
-            color: var(--c64-yellow);
-        }
-        input[type="range"] {
-            width: 100%;
-            height: 8px;
-            background: linear-gradient(90deg, var(--c64-blue), var(--c64-cyan));
-            border-radius: 5px;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            background: var(--c64-yellow);
-            border-radius: 50%;
-            cursor: pointer;
-            box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
-            transition: all 0.3s;
-        }
-        input[type="range"]::-webkit-slider-thumb:hover {
-            background: var(--c64-orange);
-            box-shadow: 0 0 20px rgba(255, 119, 0, 0.8);
-        }
-        .tracks-container {
-            background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
-            border-radius: 15px;
-            padding: 20px;
-            border: 3px solid var(--c64-cyan);
-            box-shadow: 0 10px 30px rgba(0, 160, 160, 0.3);
-        }
-        .tracks-header {
-            display: grid;
-            grid-template-columns: 80px repeat(4, 1fr) 100px;
-            gap: 10px;
-            margin-bottom: 15px;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 8px;
-        }
-        .header-cell {
-            color: var(--c64-yellow);
-            font-weight: bold;
-            text-align: center;
-            font-size: 0.9em;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .track-row {
-            display: grid;
-            grid-template-columns: 80px repeat(4, 1fr) 100px;
-            gap: 10px;
-            margin-bottom: 10px;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 8px;
-            transition: all 0.3s;
-            align-items: center;
-        }
-        .track-row:hover {
-            background: rgba(0, 160, 160, 0.1);
-            transform: translateX(5px);
-        }
-        .track-row.playing {
-            background: rgba(255, 255, 0, 0.1);
-            box-shadow: 0 0 15px rgba(255, 255, 0, 0.3);
-            animation: pulse 0.5s ease-in-out infinite alternate;
-        }
-        @keyframes pulse {
-            from { opacity: 0.8; }
-            to { opacity: 1; }
-        }
-        .track-number {
-            color: var(--c64-cyan);
-            font-weight: bold;
-            text-align: center;
-            font-size: 1.2em;
-        }
-        .instrument-cell {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 5px;
-        }
-        .instrument-indicator {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: var(--c64-gray);
-            transition: all 0.3s;
-        }
-        .instrument-indicator.active {
-            box-shadow: 0 0 10px currentColor;
-            animation: blink 0.5s ease-in-out infinite;
-        }
-        .instrument-indicator.lead { background: var(--c64-yellow); }
-        .instrument-indicator.bass { background: var(--c64-red); }
-        .instrument-indicator.arpeggio { background: var(--c64-green); }
-        .instrument-indicator.drums { background: var(--c64-purple); }
-        @keyframes blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.3; }
-        }
-        .track-toggle {
-            background: var(--c64-blue);
-            color: var(--c64-white);
-            border: 2px solid var(--c64-cyan);
-            padding: 8px 15px;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 0.9em;
-            font-weight: bold;
-        }
-        .track-toggle:hover {
-            background: var(--c64-cyan);
-            transform: scale(1.05);
-        }
-        .track-toggle.enabled {
-            background: var(--c64-green);
-            border-color: var(--c64-yellow);
-        }
-        .visualizer {
-            margin-top: 30px;
-            padding: 20px;
-            background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
-            border-radius: 15px;
-            border: 2px solid var(--c64-cyan);
-            height: 200px;
-            position: relative;
-            overflow: hidden;
-        }
-        .visualizer canvas {
-            width: 100%;
-            height: 100%;
-            display: block;
-        }
-        .pattern-display {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            padding: 10px;
-            border-radius: 5px;
-            color: var(--c64-yellow);
-            font-size: 0.9em;
-        }
-        @media (max-width: 768px) {
-            h1 { font-size: 2em; }
-            .tracks-header, .track-row {
-                grid-template-columns: 60px repeat(4, 1fr) 80px;
-                font-size: 0.8em;
-            }
-            .controls {
-                grid-template-columns: 1fr;
-            }
-        }
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.9);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s;
-        }
-        .loading-overlay.active {
-            opacity: 1;
-            pointer-events: all;
-        }
-        .loading-text {
-            color: var(--c64-cyan);
-            font-size: 2em;
-            animation: flash 0.5s ease-in-out infinite;
-        }
-        @keyframes flash {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-    </style>
 </head>
 <body>
-    <div class="loading-overlay" id="loadingOverlay">
-        <div class="loading-text">INITIALIZING SID CHIP...</div>
     </div>
-    <div class="container">
-        <header>
-            <h1>🎵 SID CHIP TUNE STUDIO 🎵</h1>
-            <div class="subtitle">8-Bit Music Synthesizer</div>
-            <div class="credits">
-                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
-            </div>
-        </header>
-        <div class="controls">
-            <div class="control-group">
-                <h3>🎛️ Master Controls</h3>
-                <button class="btn" id="playBtn" onclick="togglePlay()">▶ PLAY</button>
-                <button class="btn" id="stopBtn" onclick="stopMusic()">⬛ STOP</button>
-                <button class="btn" id="randomBtn" onclick="randomizeTracks()">🎲 RANDOM</button>
-            </div>
-            <div class="control-group">
-                <h3>🎵 Tempo & Volume</h3>
-                <div class="slider-container">
-                    <div class="slider-label">
-                        <span>BPM</span>
-                        <span id="bpmValue">120</span>
-                    </div>
-                    <input type="range" id="bpmSlider" min="60" max="200" value="120" oninput="updateBPM(this.value)">
-                </div>
-                <div class="slider-container">
-                    <div class="slider-label">
-                        <span>Volume</span>
-                        <span id="volumeValue">70%</span>
-                    </div>
-                    <input type="range" id="volumeSlider" min="0" max="100" value="70" oninput="updateVolume(this.value)">
-                </div>
-            </div>
-            <div class="control-group">
-                <h3>🎹 Instruments</h3>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 5px;">
-                    <button class="btn" id="leadBtn" onclick="toggleInstrument('lead')">LEAD</button>
-                    <button class="btn" id="bassBtn" onclick="toggleInstrument('bass')">BASS</button>
-                    <button class="btn" id="arpBtn" onclick="toggleInstrument('arpeggio')">ARP</button>
-                    <button class="btn" id="drumBtn" onclick="toggleInstrument('drums')">DRUMS</button>
-                </div>
-            </div>
         </div>
-        <div class="tracks-container">
-            <div class="tracks-header">
-                <div class="header-cell">TRACK</div>
-                <div class="header-cell">LEAD</div>
-                <div class="header-cell">BASS</div>
-                <div class="header-cell">ARPEGGIO</div>
-                <div class="header-cell">DRUMS</div>
-                <div class="header-cell">ENABLE</div>
-            </div>
-            <div id="tracksGrid"></div>
         </div>
-        <div class="visualizer">
-            <canvas id="visualizer"></canvas>
-            <div class="pattern-display">
-                <div>Pattern: <span id="currentPattern">0</span>/10</div>
-                <div>Beat: <span id="currentBeat">0</span>/4</div>
-            </div>
         </div>
     </div>
-    <script>
-        // Audio Context and Global Variables
-        let audioContext;
-        let isPlaying = false;
-        let currentTrack = 0;
-        let currentBeat = 0;
-        let bpm = 120;
-        let masterVolume = 0.7;
-        let intervalId;
-        let analyser;
-        let dataArray;
-        let animationId;
-        // Instrument states
-        const instruments = {
-            lead: true,
-            bass: true,
-            arpeggio: true,
-            drums: true
-        };
-        // Track patterns (10 tracks x 4 instruments x 16 steps)
-        const tracks = [];
-        for (let i = 0; i < 10; i++) {
-            tracks.push({
-                enabled: true,
-                lead: generatePattern('lead'),
-                bass: generatePattern('bass'),
-                arpeggio: generatePattern('arpeggio'),
-                drums: generatePattern('drums')
-            });
-        }
-        // Scales for different instruments
-        const leadScale = ['C4', 'D4', 'E4', 'G4', 'A4', 'C5', 'D5', 'E5'];
-        const bassScale = ['C2', 'G2', 'C3', 'G3', 'C4'];
-        const arpScale = ['C3', 'E3', 'G3', 'C4', 'E4', 'G4'];
-        const drumNotes = ['C1', 'C#1', 'D1']; // Different drum sounds
-        // Note frequencies
-        const noteFrequencies = {
-            'C1': 32.70, 'C#1': 34.65, 'D1': 36.71,
-            'C2': 65.41, 'G2': 98.00, 'C3': 130.81, 'G3': 196.00, 'C4': 261.63,
-            'C3': 130.81, 'E3': 164.81, 'G3': 196.00, 'C4': 261.63, 'E4': 329.63, 'G4': 392.00,
-            'C4': 261.63, 'D4': 293.66, 'E4': 329.63, 'G4': 392.00, 'A4': 440.00,
-            'C5': 523.25, 'D5': 587.33, 'E5': 659.25
-        };
-        // Initialize audio context
-        function initAudio() {
-            audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            analyser = audioContext.createAnalyser();
-            analyser.fftSize = 256;
-            dataArray = new Uint8Array(analyser.frequencyBinCount);
-            analyser.connect(audioContext.destination);
-        }
-        // Generate pattern for instrument
-        function generatePattern(type) {
-            const pattern = [];
-            const steps = 16;
-            for (let i = 0; i < steps; i++) {
-                if (Math.random() > 0.3) {
-                    if (type === 'lead') {
-                        pattern.push(leadScale[Math.floor(Math.random() * leadScale.length)]);
-                    } else if (type === 'bass') {
-                        pattern.push(bassScale[Math.floor(Math.random() * bassScale.length)]);
-                    } else if (type === 'arpeggio') {
-                        pattern.push(arpScale[Math.floor(Math.random() * arpScale.length)]);
-                    } else if (type === 'drums') {
-                        pattern.push(drumNotes[Math.floor(Math.random() * drumNotes.length)]);
-                    }
-                } else {
-                    pattern.push(null);
-                }
-            }
-            return pattern;
-        }
-        // Create SID-style oscillator
-        function createSIDOscillator(frequency, type = 'square', volume = 0.3) {
-            const oscillator = audioContext.createOscillator();
-            const gainNode = audioContext.createGain();
-            // Set waveform type for SID-like sound
-            if (type === 'lead') {
-                oscillator.type = 'sawtooth';
-                gainNode.gain.value = volume * 0.7;
-            } else if (type === 'bass') {
-                oscillator.type = 'square';
-                gainNode.gain.value = volume * 0.8;
-            } else if (type === 'arpeggio') {
-                oscillator.type = 'triangle';
-                gainNode.gain.value = volume * 0.5;
-            } else if (type === 'drums') {
-                oscillator.type = 'square';
-                gainNode.gain.value = volume;
-            }
-            oscillator.frequency.value = frequency;
-            oscillator.connect(gainNode);
-            gainNode.connect(analyser);
-            return { oscillator, gainNode };
-        }
-        // Play a note
-        function playNote(frequency, type, duration = 0.1) {
-            if (!frequency) return;
-            const { oscillator, gainNode } = createSIDOscillator(frequency, type, masterVolume);
-            oscillator.start();
-            // Envelope for SID-like sound
-            gainNode.gain.setValueAtTime(0, audioContext.currentTime);
-            gainNode.gain.linearRampToValueAtTime(masterVolume, audioContext.currentTime + 0.01);
-            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
-            oscillator.stop(audioContext.currentTime + duration);
-        }
-        // Initialize tracks grid
-        function initTracksGrid() {
-            const grid = document.getElementById('tracksGrid');
-            grid.innerHTML = '';
-            for (let i = 0; i < 10; i++) {
-                const row = document.createElement('div');
-                row.className = 'track-row';
-                row.id = `track-${i}`;
-                row.innerHTML = `
-                    <div class="track-number">${String(i + 1).padStart(2, '0')}</div>
-                    <div class="instrument-cell">
-                        <div class="instrument-indicator lead" id="lead-${i}"></div>
-                    </div>
-                    <div class="instrument-cell">
-                        <div class="instrument-indicator bass" id="bass-${i}"></div>
-                    </div>
-                    <div class="instrument-cell">
-                        <div class="instrument-indicator arpeggio" id="arp-${i}"></div>
-                    </div>
-                    <div class="instrument-cell">
-                        <div class="instrument-indicator drums" id="drums-${i}"></div>
-                    </div>
-                    <button class="track-toggle enabled" onclick="toggleTrack(${i})">ON</button>
-                `;
-                grid.appendChild(row);
-            }
-        }
-        // Toggle track
-        function toggleTrack(index) {
-            tracks[index].enabled = !tracks[index].enabled;
-            const btn = document.querySelector(`#track-${index} .track-toggle`);
-            btn.classList.toggle('enabled');
-            btn.textContent = tracks[index].enabled ? 'ON' : 'OFF';
-        }
-        // Toggle instrument
-        function toggleInstrument(type) {
-            instruments[type] = !instruments[type];
-            const btn = document.getElementById(type === 'arpeggio' ? 'arpBtn' : type + 'Btn');
-            btn.classList.toggle('active');
-        }
-        // Play sequence
-        function playSequence() {
-            const track = tracks[currentTrack];
-            const row = document.getElementById(`track-${currentTrack}`);
-            // Add playing animation
-            document.querySelectorAll('.track-row').forEach(r => r.classList.remove('playing'));
-            row.classList.add('playing');
-            // Clear previous indicators
-            document.querySelectorAll('.instrument-indicator').forEach(ind => ind.classList.remove('active'));
-            // Play instruments for current beat
-            if (track.enabled) {
-                if (instruments.lead && track.lead[currentBeat]) {
-                    playNote(noteFrequencies[track.lead[currentBeat]], 'lead', 0.2);
-                    document.getElementById(`lead-${currentTrack}`).classList.add('active');
-                }
-                if (instruments.bass && track.bass[currentBeat]) {
-                    playNote(noteFrequencies[track.bass[currentBeat]], 'bass', 0.3);
-                    document.getElementById(`bass-${currentTrack}`).classList.add('active');
-                }
-                if (instruments.arpeggio && track.arpeggio[currentBeat]) {
-                    playNote(noteFrequencies[track.arpeggio[currentBeat]], 'arpeggio', 0.15);
-                    document.getElementById(`arp-${currentTrack}`).classList.add('active');
-                }
-                if (instruments.drums && track.drums[currentBeat]) {
-                    playNote(noteFrequencies[track.drums[currentBeat]], 'drums', 0.1);
-                    document.getElementById(`drums-${currentTrack}`).classList.add('active');
-                }
-            }
-            // Update beat and track
-            currentBeat++;
-            if (currentBeat >= 16) {
-                currentBeat = 0;
-                currentTrack = (currentTrack + 1) % 10;
-            }
-            // Update display
-            document.getElementById('currentPattern').textContent = currentTrack + 1;
-            document.getElementById('currentBeat').textContent = Math.floor(currentBeat / 4) + 1;
-        }
-        // Toggle play
-        function togglePlay() {
-            if (!audioContext) {
-                initAudio();
-            }
-            const btn = document.getElementById('playBtn');
-            if (isPlaying) {
-                isPlaying = false;
-                clearInterval(intervalId);
-                btn.textContent = '▶ PLAY';
-                btn.classList.remove('active');
-                document.querySelectorAll('.track-row').forEach(r => r.classList.remove('playing'));
-            } else {
-                isPlaying = true;
-                const interval = 60000 / (bpm * 4); // 16th notes
-                intervalId = setInterval(playSequence, interval);
-                btn.textContent = '⏸ PAUSE';
-                btn.classList.add('active');
-                // Start visualizer
-                if (!animationId) {
-                    visualize();
-                }
-            }
-        }
-        // Stop music
-        function stopMusic() {
-            isPlaying = false;
-            clearInterval(intervalId);
-            currentTrack = 0;
-            currentBeat = 0;
-            document.getElementById('playBtn').textContent = '▶ PLAY';
-            document.getElementById('playBtn').classList.remove('active');
-            document.querySelectorAll('.track-row').forEach(r => r.classList.remove('playing'));
-            document.querySelectorAll('.instrument-indicator').forEach(ind => ind.classList.remove('active'));
-            document.getElementById('currentPattern').textContent = '0';
-            document.getElementById('currentBeat').textContent = '0';
-        }
-        // Update BPM
-        function updateBPM(value) {
-            bpm = parseInt(value);
-            document.getElementById('bpmValue').textContent = bpm;
-            if (isPlaying) {
-                clearInterval(intervalId);
-                const interval = 60000 / (bpm * 4);
-                intervalId = setInterval(playSequence, interval);
-            }
-        }
-        // Update volume
-        function updateVolume(value) {
-            masterVolume = value / 100;
-            document.getElementById('volumeValue').textContent = value + '%';
-        }
-        // Randomize tracks
-        function randomizeTracks() {
-            for (let i = 0; i < 10; i++) {
-                tracks[i].lead = generatePattern('lead');
-                tracks[i].bass = generatePattern('bass');
-                tracks[i].arpeggio = generatePattern('arpeggio');
-                tracks[i].drums = generatePattern('drums');
-            }
-            // Flash animation
-            const overlay = document.getElementById('loadingOverlay');
-            overlay.classList.add('active');
-            setTimeout(() => overlay.classList.remove('active'), 500);
-        }
-        // Visualizer
-        function visualize() {
-            const canvas = document.getElementById('visualizer');
-            const ctx = canvas.getContext('2d');
-            canvas.width = canvas.offsetWidth;
-            canvas.height = canvas.offsetHeight;
-            function draw() {
-                animationId = requestAnimationFrame(draw);
-                analyser.getByteFrequencyData(dataArray);
-                ctx.fillStyle = 'rgba(10, 10, 15, 0.2)';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-                const barWidth = (canvas.width / dataArray.length) * 2.5;
-                let barHeight;
-                let x = 0;
-                for (let i = 0; i < dataArray.length; i++) {
-                    barHeight = (dataArray[i] / 255) * canvas.height;
-                    const gradient = ctx.createLinearGradient(0, canvas.height, 0, canvas.height - barHeight);
-                    gradient.addColorStop(0, '#352879');
-                    gradient.addColorStop(0.5, '#00a0a0');
-                    gradient.addColorStop(1, '#ffff00');
-                    ctx.fillStyle = gradient;
-                    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
-                    x += barWidth + 1;
-                }
-            }
-            draw();
-        }
-        // Initialize on load
-        window.addEventListener('load', () => {
-            initTracksGrid();
-            // Set initial active states
-            document.getElementById('leadBtn').classList.add('active');
-            document.getElementById('bassBtn').classList.add('active');
-            document.getElementById('arpBtn').classList.add('active');
-            document.getElementById('drumBtn').classList.add('active');
-            // Hide loading overlay
-            setTimeout(() => {
-                document.getElementById('loadingOverlay').classList.remove('active');
-            }, 1000);
-        });
-        // Handle visibility change
-        document.addEventListener('visibilitychange', () => {
-            if (document.hidden && isPlaying) {
-                togglePlay();
-            }
-        });
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SID Chip Tune Studio</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --c64-blue: #352879;
+      --c64-lightblue: #6c5eb5;
+      --c64-cyan: #00a0a0;
+      --c64-purple: #a0a0ff;
+      --c64-pink: #ff00ff;
+      --c64-yellow: #ffff00;
+      --c64-orange: #ff7700;
+      --c64-green: #00ff00;
+      --c64-red: #ff0000;
+      --c64-white: #ffffff;
+      --c64-gray: #7869c4;
+      --bg-dark: #0a0a0f;
+      --bg-medium: #1a1a2e;
+      --bg-light: #16213e;
+    }
+    body {
+      font-family: 'Courier New', monospace;
+      background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
+      color: var(--c64-white);
+      min-height: 100vh;
+      overflow-x: hidden;
+      position: relative;
+    }
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background:
+        repeating-linear-gradient(0deg,
+          transparent,
+          transparent 2px,
+          rgba(0, 160, 160, 0.03) 2px,
+          rgba(0, 160, 160, 0.03) 4px);
+      pointer-events: none;
+      z-index: 1;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 20px;
+      position: relative;
+      z-index: 2;
+    }
+    header {
+      text-align: center;
+      padding: 30px 0;
+      background: linear-gradient(135deg, var(--c64-blue), var(--c64-lightblue));
+      border-radius: 15px;
+      margin-bottom: 30px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      position: relative;
+      overflow: hidden;
+    }
+    header::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: repeating-linear-gradient(45deg,
+          transparent,
+          transparent 10px,
+          rgba(255, 255, 255, 0.05) 10px,
+          rgba(255, 255, 255, 0.05) 20px);
+      animation: slide 20s linear infinite;
+    }
+    @keyframes slide {
+      0% {
+        transform: translate(0, 0);
+      }
+      100% {
+        transform: translate(50px, 50px);
+      }
+    }
+    h1 {
+      font-size: 3em;
+      text-shadow: 3px 3px 0 var(--c64-purple),
+        6px 6px 0 var(--c64-pink),
+        9px 9px 20px rgba(0, 0, 0, 0.5);
+      position: relative;
+      z-index: 1;
+      letter-spacing: 5px;
+      margin-bottom: 10px;
+    }
+    .subtitle {
+      font-size: 1.2em;
+      color: var(--c64-yellow);
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+      position: relative;
+      z-index: 1;
+    }
+    .credits {
+      margin-top: 15px;
+      font-size: 0.9em;
+      color: var(--c64-cyan);
+      position: relative;
+      z-index: 1;
+    }
+    .credits a {
+      color: var(--c64-yellow);
+      text-decoration: none;
+      transition: all 0.3s;
+    }
+    .credits a:hover {
+      color: var(--c64-orange);
+      text-shadow: 0 0 10px var(--c64-orange);
+    }
+    .controls {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin-bottom: 30px;
+    }
+    .control-group {
+      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
+      padding: 20px;
+      border-radius: 10px;
+      border: 2px solid var(--c64-cyan);
+      box-shadow: 0 5px 15px rgba(0, 160, 160, 0.3);
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+    .control-group:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 25px rgba(0, 160, 160, 0.5);
+    }
+    .control-group h3 {
+      color: var(--c64-cyan);
+      margin-bottom: 15px;
+      font-size: 1.2em;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+    }
+    .btn {
+      background: linear-gradient(135deg, var(--c64-purple), var(--c64-pink));
+      color: var(--c64-white);
+      border: none;
+      padding: 12px 25px;
+      border-radius: 8px;
+      font-size: 1em;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.3s;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+      margin: 5px;
+    }
+    .btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4);
+      background: linear-gradient(135deg, var(--c64-pink), var(--c64-purple));
+    }
+    .btn:active {
+      transform: translateY(0);
+    }
+    .btn.active {
+      background: linear-gradient(135deg, var(--c64-green), var(--c64-yellow));
+      box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+    }
+    .slider-container {
+      margin: 10px 0;
+    }
+    .slider-label {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 5px;
+      font-size: 0.9em;
+      color: var(--c64-yellow);
+    }
+    input[type="range"] {
+      width: 100%;
+      height: 8px;
+      background: linear-gradient(90deg, var(--c64-blue), var(--c64-cyan));
+      border-radius: 5px;
+      outline: none;
+      -webkit-appearance: none;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 20px;
+      height: 20px;
+      background: var(--c64-yellow);
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
+      transition: all 0.3s;
+    }
+    input[type="range"]::-webkit-slider-thumb:hover {
+      background: var(--c64-orange);
+      box-shadow: 0 0 20px rgba(255, 119, 0, 0.8);
+    }
+    .tracks-container {
+      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
+      border-radius: 15px;
+      padding: 20px;
+      border: 3px solid var(--c64-cyan);
+      box-shadow: 0 10px 30px rgba(0, 160, 160, 0.3);
+    }
+    .tracks-header {
+      display: grid;
+      grid-template-columns: 80px repeat(4, 1fr) 100px;
+      gap: 10px;
+      margin-bottom: 15px;
+      padding: 10px;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+    }
+    .header-cell {
+      color: var(--c64-yellow);
+      font-weight: bold;
+      text-align: center;
+      font-size: 0.9em;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    .track-row {
+      display: grid;
+      grid-template-columns: 80px repeat(4, 1fr) 100px;
+      gap: 10px;
+      margin-bottom: 10px;
+      padding: 10px;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 8px;
+      transition: all 0.3s;
+      align-items: center;
+    }
+    .track-row:hover {
+      background: rgba(0, 160, 160, 0.1);
+      transform: translateX(5px);
+    }
+    .track-row.playing {
+      background: rgba(255, 255, 0, 0.1);
+      box-shadow: 0 0 15px rgba(255, 255, 0, 0.3);
+      animation: pulse 0.5s ease-in-out infinite alternate;
+    }
+    @keyframes pulse {
+      from {
+        opacity: 0.8;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    .track-number {
+      color: var(--c64-cyan);
+      font-weight: bold;
+      text-align: center;
+      font-size: 1.2em;
+    }
+    .instrument-cell {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+    }
+    .instrument-indicator {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--c64-gray);
+      transition: all 0.3s;
+    }
+    .instrument-indicator.active {
+      box-shadow: 0 0 10px currentColor;
+      animation: blink 0.5s ease-in-out infinite;
+    }
+    .instrument-indicator.lead {
+      background: var(--c64-yellow);
+    }
+    .instrument-indicator.bass {
+      background: var(--c64-red);
+    }
+    .instrument-indicator.arpeggio {
+      background: var(--c64-green);
+    }
+    .instrument-indicator.drums {
+      background: var(--c64-purple);
+    }
+    @keyframes blink {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.3;
+      }
+    }
+    .track-toggle {
+      background: var(--c64-blue);
+      color: var(--c64-white);
+      border: 2px solid var(--c64-cyan);
+      padding: 8px 15px;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-size: 0.9em;
+      font-weight: bold;
+    }
+    .track-toggle:hover {
+      background: var(--c64-cyan);
+      transform: scale(1.05);
+    }
+    .track-toggle.enabled {
+      background: var(--c64-green);
+      border-color: var(--c64-yellow);
+    }
+    .visualizer {
+      margin-top: 30px;
+      padding: 20px;
+      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
+      border-radius: 15px;
+      border: 2px solid var(--c64-cyan);
+      height: 200px;
+      position: relative;
+      overflow: hidden;
+    }
+    .visualizer canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .pattern-display {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 10px;
+      border-radius: 5px;
+      color: var(--c64-yellow);
+      font-size: 0.9em;
+    }
+    .pattern-selector {
+      background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
+      padding: 15px;
+      border-radius: 10px;
+      border: 2px solid var(--c64-cyan);
+      margin-bottom: 20px;
+    }
+    .pattern-selector h3 {
+      color: var(--c64-cyan);
+      margin-bottom: 10px;
+      font-size: 1.1em;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+    }
+    .pattern-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 10px;
+    }
+    .pattern-btn {
+      background: linear-gradient(135deg, var(--c64-blue), var(--c64-purple));
+      color: var(--c64-white);
+      border: 2px solid var(--c64-cyan);
+      padding: 10px 15px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-size: 0.9em;
+      font-weight: bold;
+      text-align: center;
+    }
+    .pattern-btn:hover {
+      background: linear-gradient(135deg, var(--c64-cyan), var(--c64-blue));
+      transform: scale(1.05);
+      box-shadow: 0 5px 15px rgba(0, 160, 160, 0.4);
+    }
+    .pattern-btn.active {
+      background: linear-gradient(135deg, var(--c64-green), var(--c64-yellow));
+      border-color: var(--c64-yellow);
+      box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+    }
+    @media (max-width: 768px) {
+      h1 {
+        font-size: 2em;
+      }
+      .tracks-header,
+      .track-row {
+        grid-template-columns: 60px repeat(4, 1fr) 80px;
+        font-size: 0.8em;
+      }
+      .controls {
+        grid-template-columns: 1fr;
+      }
+      .pattern-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s;
+    }
+    .loading-overlay.active {
+      opacity: 1;
+      pointer-events: all;
+    }
+    .loading-text {
+      color: var(--c64-cyan);
+      font-size: 2em;
+      animation: flash 0.5s ease-in-out infinite;
+    }
+    @keyframes flash {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+    .info-panel {
+      background: rgba(0, 0, 0, 0.5);
+      padding: 10px;
+      border-radius: 8px;
+      margin-top: 10px;
+      font-size: 0.9em;
+      color: var(--c64-cyan);
+      border: 1px solid var(--c64-cyan);
+    }
+    .info-panel p {
+      margin: 5px 0;
+    }
+  </style>
 </head>
 <body>
+  <div class="loading-overlay" id="loadingOverlay">
+    <div class="loading-text">INITIALIZING SID CHIP...</div>
+  </div>
+  <div class="container">
+    <header>
+      <h1>🎵 SID CHIP TUNE STUDIO 🎵</h1>
+      <div class="subtitle">8-Bit Music Synthesizer with Pattern Library</div>
+      <div class="credits">
+        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+      </div>
+    </header>
+    <div class="pattern-selector">
+      <h3>📚 Pattern Library</h3>
+      <div class="pattern-grid" id="patternGrid">
+        <button class="pattern-btn active" onclick="loadPattern('arcade')">🕹️ Arcade</button>
+        <button class="pattern-btn" onclick="loadPattern('demoscene')">🎨 Demoscene</button>
+        <button class="pattern-btn" onclick="loadPattern('techno')">🎛️ Techno</button>
+        <button class="pattern-btn" onclick="loadPattern('chiptune')">🎵 Chiptune</button>
+        <button class="pattern-btn" onclick="loadPattern('platformer')">🏃 Platformer</button>
+        <button class="pattern-btn" onclick="loadPattern('shooter')">🚀 Shooter</button>
+        <button class="pattern-btn" onclick="loadPattern('puzzle')">🧩 Puzzle</button>
+        <button class="pattern-btn" onclick="loadPattern('random')">🎲 Random</button>
+      </div>
+      <div class="info-panel">
+        <p>Current Pattern: <span id="currentPatternName" style="color: var(--c64-yellow);">Arcade</span></p>
+        <p id="patternDescription">Classic arcade game style with upbeat rhythms</p>
+      </div>
     </div>
+    <div class="controls">
+      <div class="control-group">
+        <h3>🎛️ Master Controls</h3>
+        <button class="btn" id="playBtn" onclick="togglePlay()">▶ PLAY</button>
+        <button class="btn" id="stopBtn" onclick="stopMusic()">⬛ STOP</button>
+        <button class="btn" id="randomBtn" onclick="randomizeTracks()">🎲 RANDOM</button>
+      </div>
+      <div class="control-group">
+        <h3>🎵 Tempo & Volume</h3>
+        <div class="slider-container">
+          <div class="slider-label">
+            <span>BPM</span>
+            <span id="bpmValue">120</span>
+          </div>
+          <input type="range" id="bpmSlider" min="60" max="200" value="120" oninput="updateBPM(this.value)">
         </div>
+        <div class="slider-container">
+          <div class="slider-label">
+            <span>Volume</span>
+            <span id="volumeValue">70%</span>
+          </div>
+          <input type="range" id="volumeSlider" min="0" max="100" value="70" oninput="updateVolume(this.value)">
         </div>
+      </div>
+      <div class="control-group">
+        <h3>🎹 Instruments</h3>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 5px;">
+          <button class="btn" id="leadBtn" onclick="toggleInstrument('lead')">LEAD</button>
+          <button class="btn" id="bassBtn" onclick="toggleInstrument('bass')">BASS</button>
+          <button class="btn" id="arpBtn" onclick="toggleInstrument('arpeggio')">ARP</button>
+          <button class="btn" id="drumBtn" onclick="toggleInstrument('drums')">DRUMS</button>
         </div>
+      </div>
     </div>
+    <div class="tracks-container">
+      <div class="tracks-header">
+        <div class="header-cell">TRACK</div>
+        <div class="header-cell">LEAD</div>
+        <div class="header-cell">BASS</div>
+        <div class="header-cell">ARPEGGIO</div>
+        <div class="header-cell">DRUMS</div>
+        <div class="header-cell">ENABLE</div>
+      </div>
+      <div id="tracksGrid"></div>
+    </div>
+    <div class="visualizer">
+      <canvas id="visualizer"></canvas>
+      <div class="pattern-display">
+        <div>Pattern: <span id="currentPattern">0</span>/10</div>
+        <div>Beat: <span id="currentBeat">0</span>/4</div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Audio Context and Global Variables
+    let audioContext;
+    let isPlaying = false;
+    let currentTrack = 0;
+    let currentBeat = 0;
+    let bpm = 120;
+    let masterVolume = 0.7;
+    let intervalId;
+    let analyser;
+    let dataArray;
+    let animationId;
+    // Instrument states
+    const instruments = {
+      lead: true,
+      bass: true,
+      arpeggio: true,
+      drums: true
+    };
+    // Note frequencies
+    const noteFrequencies = {
+      'C1': 32.70, 'C#1': 34.65, 'D1': 36.71, 'D#1': 38.89, 'E1': 41.20, 'F1': 43.65, 'F#1': 46.25, 'G1': 49.00, 'G#1': 51.91, 'A1': 55.00, 'A#1': 58.27, 'B1': 61.74,
+      'C2': 65.41, 'C#2': 69.30, 'D2': 73.42, 'D#2': 77.78, 'E2': 82.41, 'F2': 87.31, 'F#2': 92.50, 'G2': 98.00, 'G#2': 103.83, 'A2': 110.00, 'A#2': 116.54, 'B2': 123.47,
+      'C3': 130.81, 'C#3': 138.59, 'D3': 146.83, 'D#3': 155.56, 'E3': 164.81, 'F3': 174.61, 'F#3': 185.00, 'G3': 196.00, 'G#3': 207.65, 'A3': 220.00, 'A#3': 233.08, 'B3': 246.94,
+      'C4': 261.63, 'C#4': 277.18, 'D4': 293.66, 'D#4': 311.13, 'E4': 329.63, 'F4': 349.23, 'F#4': 369.99, 'G4': 392.00, 'G#4': 415.30, 'A4': 440.00, 'A#4': 466.16, 'B4': 493.88,
+      'C5': 523.25, 'C#5': 554.37, 'D5': 587.33, 'D#5': 622.25, 'E5': 659.25, 'F5': 698.46, 'F#5': 739.99, 'G5': 783.99, 'G#5': 830.61, 'A5': 880.00, 'A#5': 932.33, 'B5': 987.77,
+      'C6': 1046.50, 'D6': 1174.66, 'E6': 1318.51, 'G6': 1567.98
+    };
+    // Pattern Library
+    const patternLibrary = {
+      arcade: {
+        name: "Arcade",
+        description: "Classic arcade game style with upbeat rhythms",
+        tracks: [
+          {
+            lead: ['E4', null, 'G4', null, 'A4', null, 'C5', null, 'E5', null, 'C5', null, 'A4', null, 'G4', null],
+            bass: ['C2', null, 'C2', null, 'G2', null, 'G2', null, 'C3', null, 'C3', null, 'G2', null, 'G2', null],
+            arpeggio: ['C3', 'E3', 'G3', 'C4', 'E4', 'G4', 'C5', 'E5', null, null, null, null, null, null, null, null],
+            drums: ['C1', null, null, 'C#1', 'C1', null, 'D1', null, 'C1', null, null, 'C#1', 'C1', null, 'D1', null]
+          },
+          {
+            lead: ['G4', null, 'B4', null, 'D5', null, 'G5', null, 'B5', null, 'G5', null, 'D5', null, 'B4', null],
+            bass: ['G2', null, 'G2', null, 'D3', null, 'D3', null, 'G3', null, 'G3', null, 'D3', null, 'D3', null],
+            arpeggio: ['G3', 'B3', 'D4', 'G4', 'B4', 'D5', 'G5', 'B5', null, null, null, null, null, null, null, null],
+            drums: ['C1', null, 'C#1', null, 'C1', null, 'D1', null, 'C1', null, 'C#1', null, 'C1', null, 'D1', null]
+          },
+          {
+            lead: ['A4', null, 'C5', null, 'E5', null, 'A5', null, 'E5', null, 'C5', null, 'A4', null, 'E4', null],
+            bass: ['A2', null, 'A2', null, 'E3', null, 'E3', null, 'A3', null, 'A3', null, 'E3', null, 'E3', null],
+            arpeggio: ['A3', 'C4', 'E4', 'A4', 'C5', 'E5', 'A5', 'C6', null, null, null, null, null, null, null, null],
+            drums: ['D1', null, null, 'C#1', 'D1', null, 'C1', null, 'D1', null, null, 'C#1', 'D1', null, 'C1', null]
+          },
+          {
+            lead: ['F4', null, 'A4', null, 'C5', null, 'F5', null, 'A5', null, 'F5', null, 'C5', null, 'A4', null],
+            bass: ['F2', null, 'F2', null, 'C3', null, 'C3', null, 'F3', null, 'F3', null, 'C3', null, 'C3', null],
+            arpeggio: ['F3', 'A3', 'C4', 'F4', 'A4', 'C5', 'F5', 'A5', null, null, null, null, null, null, null, null],
+            drums: ['C1', 'C#1', null, null, 'C1', 'C#1', null, null, 'C1', 'C#1', null, null, 'C1', 'C#1', null, null]
+          },
+          {
+            lead: ['C5', null, 'E5', null, 'G5', null, 'C6', null, 'G5', null, 'E5', null, 'C5', null, 'G4', null],
+            bass: ['C3', null, 'C3', null, 'G3', null, 'G3', null, 'C4', null, 'C4', null, 'G3', null, 'G3', null],
+            arpeggio: ['C4', 'E4', 'G4', 'C5', 'E5', 'G5', 'C6', 'E6', null, null, null, null, null, null, null, null],
+            drums: ['C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null]
+          },
+          {
+            lead: ['D5', null, 'F5', null, 'A5', null, 'D6', null, 'A5', null, 'F5', null, 'D5', null, 'A4', null],
+            bass: ['D3', null, 'D3', null, 'A3', null, 'A3', null, 'D4', null, 'D4', null, 'A3', null, 'A3', null],
+            arpeggio: ['D4', 'F4', 'A4', 'D5', 'F5', 'A5', 'D6', 'F6', null, null, null, null, null, null, null, null],
+            drums: ['D1', 'C#1', 'C1', null, 'D1', 'C#1', 'C1', null, 'D1', 'C#1', 'C1', null, 'D1', 'C#1', 'C1', null]
+          },
+          {
+            lead: ['E5', null, 'G5', null, 'B5', null, 'E6', null, 'B5', null, 'G5', null, 'E5', null, 'B4', null],
+            bass: ['E3', null, 'E3', null, 'B3', null, 'B3', null, 'E4', null, 'E4', null, 'B3', null, 'B3', null],
+            arpeggio: ['E4', 'G4', 'B4', 'E5', 'G5', 'B5', 'E6', 'G6', null, null, null, null, null, null, null, null],
+            drums: ['C1', null, null, 'D1', 'C1', null, null, 'D1', 'C1', null, null, 'D1', 'C1', null, null, 'D1']
+          },
+          {
+            lead: ['G5', null, 'B5', null, 'D6', null, 'G6', null, 'D6', null, 'B5', null, 'G5', null, 'D5', null],
+            bass: ['G3', null, 'G3', null, 'D4', null, 'D4', null, 'G4', null, 'G4', null, 'D4', null, 'D4', null],
+            arpeggio: ['G4', 'B4', 'D5', 'G5', 'B5', 'D6', 'G6', 'B6', null, null, null, null, null, null, null, null],
+            drums: ['D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null, 'D1', null, 'C#1', null]
+          },
+          {
+            lead: ['A5', null, 'C6', null, 'E6', null, 'A6', null, 'E6', null, 'C6', null, 'A5', null, 'E5', null],
+            bass: ['A3', null, 'A3', null, 'E4', null, 'E4', null, 'A4', null, 'A4', null, 'E4', null, 'E4', null],
+            arpeggio: ['A4', 'C5', 'E5', 'A5', 'C6', 'E6', 'A6', 'C7', null, null, null, null, null, null, null, null],
+            drums: ['C#1', 'D1', null, null, 'C#1', 'D1', null, null, 'C#1', 'D1', null, null, 'C#1', 'D1', null, null]
+          },
+          {
+            lead: ['F5', null, 'A5', null, 'C6', null, 'F6', null, 'C6', null, 'A5', null, 'F5', null, 'C5', null],
+            bass: ['F3', null, 'F3', null, 'C4', null, 'C4', null, 'F4', null, 'F4', null, 'C4', null, 'C4', null],
+            arpeggio: ['F4', 'A4', 'C5', 'F5', 'A5', 'C6', 'F6', 'A6', null, null, null, null, null, null, null, null],
+            drums: ['D1', null, 'C1', null, 'D1', null, 'C1', null, 'D1', null, 'C1', null, 'D1', null, 'C1', null]
+          }
+        ]
+      },
+      demoscene: {
+        name: "Demoscene",
+        description: "Complex demoscene style with fast arpeggios and effects",
+        tracks: [
+          {
+            lead: ['C4', 'D4', 'E4', 'F4', 'G4', 'A4', 'B4', 'C5', 'D5', 'E5', 'F5', 'G5', 'A5', 'B5', 'C6', 'D6'],
+            bass: ['C1', null, 'G1', null, 'C2', null, 'G2', null, 'C3', null, 'G3', null, 'C4', null, 'G4', null],
+            arpeggio: ['C2', 'E2', 'G2', 'C3', 'E3', 'G3', 'C4', 'E4', 'G4', 'C5', 'E5', 'G5', 'C6', 'E6', 'G6', 'C7'],
+            drums: ['C1', 'C#1', 'D1', 'C#1', 'C1', 'C#1', 'D1', 'C#1', 'C1', 'C#1', 'D1', 'C#1', 'C1', 'C#1', 'D1', 'C#1']
+          },
+          {
+            lead: ['D4', 'E4', 'F4', 'G4', 'A4', 'B4', 'C5', 'D5', 'E5', 'F