ADD <div id="appCtn" style="display:flex; flex-direction:column; height:100vh; background:#000; color:#0f0; font-family:'Press Start 2P', sans-serif; font-size:10px;">

<!-- Font Import -->
<style>@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');</style>

<!-- Header -->
<header style="padding:10px; background:#111; border-bottom:2px solid #0f0; display:flex; justify-content:space-between; align-items:center;">
<h1 style="margin:0; font-size:14px;">8-BIT CHIPTUNE GENERATOR</h1>
<div>
<button id="generateBtn" onclick="generateSong()" style="margin:0 5px; padding:5px 10px; background:#0f0; color:#000; border:none; cursor:pointer;">GENERATE AI SONG</button>
<button id="playBtn" onclick="playSong()" style="margin:0 5px; padding:5px 10px; background:#0f0; color:#000; border:none; cursor:pointer;">PLAY</button>
<button id="stopBtn" onclick="stopSong()" style="margin:0 5px; padding:5px 10px; background:#f00; color:#fff; border:none; cursor:pointer;">STOP</button>
<button onclick="saveProject()" style="margin:0 5px; padding:5px 10px; background:#ff0; color:#000; border:none; cursor:pointer;">SAVE</button>
<label for="loadInput" style="margin:0 5px; padding:5px 10px; background:#ff0; color:#000; border:none; cursor:pointer;">LOAD</label>
<input id="loadInput" type="file" style="display:none;" onchange="loadProject(event)">
</div>
</header>

<!-- Main Content -->
<div style="display:flex; flex:1; overflow:hidden;">
<!-- Sidebar -->
<aside style="width:200px; background:#111; border-right:2px solid #0f0; padding:10px; overflow-y:auto;">
<div style="margin-bottom:20px;">
<h2 style="font-size:12px; margin-bottom:10px;">CHANNELS</h2>
<div id="channelList" style="margin-bottom:10px;"></div>
<button id="addChannelBtn" onclick="addChannel()" style="width:100%; padding:5px; background:#0f0; color:#000; border:none; cursor:pointer;">+ ADD CHANNEL</button>
</div>

<div>
<h2 style="font-size:12px; margin-bottom:10px;">INSTRUMENTS</h2>
<div id="instrumentList" style="margin-bottom:10px;"></div>
<button id="addInstrumentBtn" onclick="addInstrument()" style="width:100%; padding:5px; background:#0f0; color:#000; border:none; cursor:pointer;">+ ADD INSTRUMENT</button>
</div>

<div style="margin-top:20px;">
<h2 style="font-size:12px; margin-bottom:10px;">PATTERN</h2>
<div style="margin-bottom:10px;">
<label>STEPS: </label>
<input id="patternLengthInput" type="number" min="4" max="64" value="16" style="width:50px; margin-left:5px; padding:2px; background:#000; color:#0f0; border:1px solid #0f0;">
<button onclick="updatePatternLength()" style="margin-left:5px; padding:2px 5px; background:#0f0; color:#000; border:none; cursor:pointer;">UPDATE</button>
</div>
<div style="margin-bottom:10px;">
<label>VERSE: </label>
<select id="verseSelect" onchange="switchVerse()" style="margin-left:5px; padding:2px; background:#000; color:#0f0; border:1px solid #0f0;">
<option value="0">Verse 1</option>
</select>
<button onclick="addVerse()" style="margin-left:5px; padding:2px 5px; background:#0f0; color:#000; border:none; cursor:pointer;">+</button>
<button onclick="copyVerse()" style="margin-left:5px; padding:2px 5px; background:#ff0; color:#000; border:none; cursor:pointer;">COPY</button>
</div>
</div>
</aside>

<!-- Pattern Editor -->
<main style="flex:1; display:flex; flex-direction:column; padding:10px; overflow:auto;">
<div style="margin-bottom:10px;">
<h2 style="font-size:12px;">PATTERN EDITOR</h2>
<div id="patternControls" style="margin:5px 0;">
<span>TEMPO: </span>
<input id="tempoInput" type="range" min="60" max="240" value="120" style="width:100px;">
<span id="tempoValue">120</span> BPM
</div>
</div>

<div id="patternGrid" style="border:1px solid #0f0; background:#0a0a0a; overflow:auto; flex:1;">
<!-- Grid will be generated here -->
</div>

<div id="noteInput" style="margin-top:10px; padding:10px; background:#111; border:1px solid #0f0; overflow-x:auto;">
<h3 style="font-size:10px; margin-bottom:5px;">NOTE INPUT</h3>
<div id="piano" style="display:flex; height:40px; min-width:600px;">
<!-- Piano keys will be generated here -->
</div>
</div>
</main>
</div>

<!-- Loading Indicator -->
<div id="loadingIndicator" hidden style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#111; padding:20px; border:2px solid #0f0; text-align:center;">
<div>GENERATING...</div>
<div style="margin-top:10px;">⏳</div>
</div>

<!-- Edit Channel Modal -->
<div id="editChannelModal" hidden style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#111; padding:20px; border:2px solid #0f0; z-index:1000;">
<h3 style="margin-top:0;">EDIT CHANNEL</h3>
<div style="margin:10px 0;">
<label>NAME:</label>
<input id="editChannelName" type="text" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="margin:10px 0;">
<label>INSTRUMENT:</label>
<select id="editChannelInstrument" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
<!-- Options will be populated -->
</select>
</div>
<div style="display:flex; justify-content:space-between; margin-top:20px;">
<button onclick="cancelEditChannel()" style="padding:5px 10px; background:#f00; color:#fff; border:none; cursor:pointer;">CANCEL</button>
<button onclick="saveEditChannel()" style="padding:5px 10px; background:#0f0; color:#000; border:none; cursor:pointer;">SAVE</button>
</div>
</div>

<!-- Edit Instrument Modal -->
<div id="editInstrumentModal" hidden style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#111; padding:20px; border:2px solid #0f0; z-index:1000;">
<h3 style="margin-top:0;">EDIT INSTRUMENT</h3>
<div style="margin:10px 0;">
<label>NAME:</label>
<input id="editInstrumentName" type="text" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="margin:10px 0;">
<label>TYPE:</label>
<select id="editInstrumentType" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
<option value="square">SQUARE</option>
<option value="triangle">TRIANGLE</option>
<option value="sawtooth">SAWTOOTH</option>
<option value="sine">SINE</option>
<option value="noise">NOISE</option>
</select>
</div>
<div style="margin:10px 0;">
<label>COLOR:</label>
<input id="editInstrumentColor" type="color" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="margin:10px 0;">
<label>ATTACK (ms):</label>
<input id="editInstrumentAttack" type="number" min="0" max="1000" value="0" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="margin:10px 0;">
<label>DECAY (ms):</label>
<input id="editInstrumentDecay" type="number" min="0" max="1000" value="100" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="margin:10px 0;">
<label>SUSTAIN:</label>
<input id="editInstrumentSustain" type="number" min="0" max="1" step="0.1" value="0.7" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="margin:10px 0;">
<label>RELEASE (ms):</label>
<input id="editInstrumentRelease" type="number" min="0" max="2000" value="300" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="margin:10px 0;">
<label>VIBRATO (Hz):</label>
<input id="editInstrumentVibrato" type="number" min="0" max="20" step="0.5" value="0" style="width:100%; margin-top:5px; padding:5px; background:#000; color:#0f0; border:1px solid #0f0;">
</div>
<div style="display:flex; justify-content:space-between; margin-top:20px;">
<button onclick="cancelEditInstrument()" style="padding:5px 10px; background:#f00; color:#fff; border:none; cursor:pointer;">CANCEL</button>
<button onclick="saveEditInstrument()" style="padding:5px 10px; background:#0f0; color:#000; border:none; cursor:pointer;">SAVE</button>
</div>
</div>

<script>
// State management
let channels = [];
let instruments = [];
let pattern = [];
let verses = []; // Store multiple patterns (verses)
let currentVerse = 0;
let currentChannel = 0;
let currentStep = 0;
let isPlaying = false;
let audioContext;
let gainNode;
let oscillators = [];
let tempo = 120;
let selectedNote = null; // Track the currently selected note
let editingChannelId = null; // Track which channel is being edited
let editingInstrumentId = null; // Track which instrument is being edited
let isDrawing = false; // For drag drawing

// Initialize app
function init() {
// Create default instruments with ADSR and vibrato
instruments = [
{ id: 1, name: 'SQUARE', type: 'square', color: '#0ff', attack: 0, decay: 100, sustain: 0.7, release: 300, vibrato: 0 },
{ id: 2, name: 'TRIANGLE', type: 'triangle', color: '#f0f', attack: 50, decay: 150, sustain: 0.6, release: 400, vibrato: 2 },
{ id: 3, name: 'NOISE', type: 'noise', color: '#ff0', attack: 10, decay: 50, sustain: 0.5, release: 200, vibrato: 0 },
{ id: 4, name: 'SINE', type: 'sine', color: '#f80', attack: 100, decay: 200, sustain: 0.8, release: 500, vibrato: 5 }
];

// Create default cha

chiptune.html

@@ -4,21 +4,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>8-Bit Chiptune Generator</title>
-    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        
         body {
             margin: 0;
             padding: 0;
-            background: #000;
+            font-family: 'Press Start 2P', cursive;
+            background-color: #000;
             color: #0f0;
-            font-family: 'Press Start 2P', sans-serif;
             overflow: hidden;
         }
+        
         #appCtn {
             display: flex;
             flex-direction: column;
             height: 100vh;
+            background: #000;
+            color: #0f0;
+            font-size: 10px;
         }
+        
         header {
             padding: 10px;
             background: #111;
@@ -27,10 +33,12 @@
             justify-content: space-between;
             align-items: center;
         }
+        
         h1 {
-            font-size: 14px;
             margin: 0;
+            font-size: 14px;
         }
+        
         button {
             margin: 0 5px;
             padding: 5px 10px;
@@ -38,24 +46,21 @@
             color: #000;
             border: none;
             cursor: pointer;
-            font-family: 'Press Start 2P', sans-serif;
+            font-family: 'Press Start 2P', cursive;
             font-size: 10px;
         }
-        #stopBtn {
-            background: #f00;
-            color: #fff;
-        }
-        label {
-            cursor: pointer;
-        }
-        input[type="file"] {
-            display: none;
-        }
-        main {
+        
+        #playBtn { background: #0f0; }
+        #stopBtn { background: #f00; color: #fff; }
+        #saveBtn { background: #ff0; }
+        #loadBtn { background: #ff0; }
+        
+        #mainContent {
             display: flex;
             flex: 1;
             overflow: hidden;
         }
+        
         aside {
             width: 200px;
             background: #111;
@@ -63,12 +68,14 @@
             padding: 10px;
             overflow-y: auto;
         }
+        
         #patternGrid {
             flex: 1;
             border: 1px solid #0f0;
             background: #0a0a0a;
             overflow: auto;
         }
+        
         #noteInput {
             margin-top: 10px;
             padding: 10px;
@@ -76,42 +83,23 @@
             border: 1px solid #0f0;
             overflow-x: auto;
         }
+        
         #piano {
             display: flex;
             height: 40px;
             min-width: 600px;
         }
-        .loader {
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #0f0;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-        th, td {
-            border: 1px solid #0f0;
-            padding: 5px;
-            text-align: center;
-        }
-        th {
+        
+        /* Loading indicator */
+        #loadingIndicator {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             background: #111;
-        }
-        td {
-            cursor: pointer;
-            background: #000;
-        }
-        td:hover {
-            background: #0a0a0a;
+            padding: 20px;
+            border: 2px solid #0f0;
+            text-align: center;
         }
     </style>
 </head>
@@ -120,74 +108,70 @@
         <header>
             <h1>8-BIT CHIPTUNE GENERATOR</h1>
             <div>
-                <button id="generateBtn">GENERATE AI SONG</button>
-                <button id="playBtn">PLAY</button>
-                <button id="stopBtn">STOP</button>
-                <button id="saveBtn">SAVE</button>
-                <label for="loadInput">LOAD</label>
-                <input id="loadInput" type="file">
+                <button id="generateBtn" onclick="generateSong()">GENERATE AI SONG</button>
+                <button id="playBtn" onclick="playSong()">PLAY</button>
+                <button id="stopBtn" onclick="stopSong()">STOP</button>
+                <button id="saveBtn" onclick="saveProject()">SAVE</button>
+                <label for="loadInput" style="display: inline-block; padding: 5px 10px; background: #ff0; color: #000; cursor: pointer;">LOAD</label>
+                <input id="loadInput" type="file" style="display: none;" onchange="loadProject(event)">
             </div>
         </header>
-        <main>
+
+        <div id="mainContent">
             <aside>
-                <div>
-                    <h2>CHANNELS</h2>
-                    <div id="channelList"></div>
-                    <button id="addChannelBtn">+ ADD CHANNEL</button>
+                <div style="margin-bottom: 20px;">
+                    <h2 style="font-size: 12px; margin-bottom: 10px;">CHANNELS</h2>
+                    <div id="channelList" style="margin-bottom: 10px;"></div>
+                    <button id="addChannelBtn" onclick="addChannel()" style="width: 100%; padding: 5px; background: #0f0; color: #000;">+ ADD CHANNEL</button>
                 </div>
+                
                 <div>
-                    <h2>INSTRUMENTS</h2>
-                    <div id="instrumentList"></div>
-                    <button id="addInstrumentBtn">+ ADD INSTRUMENT</button>
+                    <h2 style="font-size: 12px; margin-bottom: 10px;">INSTRUMENTS</h2>
+                    <div id="instrumentList" style="margin-bottom: 10px;"></div>
+                    <button id="addInstrumentBtn" onclick="addInstrument()" style="width: 100%; padding: 5px; background: #0f0; color: #000;">+ ADD INSTRUMENT</button>
                 </div>
-                <div>
-                    <h2>PATTERN</h2>
-                    <div>
+                
+                <div style="margin-top: 20px;">
+                    <h2 style="font-size: 12px; margin-bottom: 10px;">PATTERN</h2>
+                    <div style="margin-bottom: 10px;">
                         <label>STEPS: </label>
-                        <input id="patternLengthInput" type="number" min="4" max="64" value="16">
-                        <button id="updatePatternBtn">UPDATE</button>
+                        <input id="patternLengthInput" type="number" min="4" max="64" value="16" style="width: 50px; margin-left: 5px; padding: 2px; background: #000; color: #0f0; border: 1px solid #0f0;">
+                        <button onclick="updatePatternLength()" style="margin-left: 5px; padding: 2px 5px; background: #0f0; color: #000;">UPDATE</button>
                     </div>
-                    <div>
+                    <div style="margin-bottom: 10px;">
                         <label>VERSE: </label>
-                        <select id="verseSelect">
+                        <select id="verseSelect" onchange="switchVerse()" style="margin-left: 5px; padding: 2px; background: #000; color: #0f0; border: 1px solid #0f0;">
                             <option value="0">Verse 1</option>
                         </select>
-                        <button id="addVerseBtn">+</button>
-                        <button id="copyVerseBtn">COPY</button>
+                        <button onclick="addVerse()" style="margin-left: 5px; padding: 2px 5px; background: #0f0; color: #000;">+</button>
+                        <button onclick="copyVerse()" style="margin-left: 5px; padding: 2px 5px; background: #ff0; color: #000;">COPY</button>
                     </div>
                 </div>
             </aside>
-            <div id="centerPanel">
-                <div>
-                    <h2>PATTERN EDITOR</h2>
-                    <div>
+
+            <div style="flex: 1; display: flex; flex-direction: column;">
+                <div style="margin-bottom: 10px; padding: 10px;">
+                    <h2 style="font-size: 12px;">PATTERN EDITOR</h2>
+                    <div style="margin: 5px 0;">
                         <span>TEMPO: </span>
-                        <input id="tempoInput" type="range" min="60" max="240" value="120">
+                        <input id="tempoInput" type="range" min="60" max="240" value="120" style="width: 100px;">
                         <span id="tempoValue">120</span> BPM
                     </div>
                 </div>
-                <div id="patternGrid">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>STEP</th>
-                                <th>CH1</th>
-                                <th>CH2</th>
-                                <th>CH3</th>
-                                <th>CH4</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <!-- Rows will be generated by JavaScript -->
-                        </tbody>
-                    </table>
-                </div>
+                
+                <div id="patternGrid"></div>
+                
                 <div id="noteInput">
-                    <h3>NOTE INPUT</h3>
+                    <h3 style="font-size: 10px; margin-bottom: 5px;">NOTE INPUT</h3>
                     <div id="piano"></div>
                 </div>
             </div>
-        </main>
+        </div>
+
+        <div id="loadingIndicator" hidden>
+            <div>GENERATING...</div>
+            <div style="margin-top: 10px;">⏳</div>
+        </div>
     </div>
 
     <script>
@@ -197,93 +181,133 @@
         let pattern = [];
         let verses = [];
         let currentVerse = 0;
+        let currentChannel = 0;
+        let currentStep = 0;
         let isPlaying = false;
         let audioContext;
+        let gainNode;
+        let oscillators = [];
         let tempo = 120;
-
+        let selectedNote = null;
+        let editingChannelId = null;
+        let editingInstrumentId = null;
+        let isDrawing = false;
+        
         // Initialize app
         function init() {
             // Create default instruments
             instruments = [
-                { id: 1, name: 'SQUARE', type: 'square', color: '#0ff' },
-                { id: 2, name: 'TRIANGLE', type: 'triangle', color: '#f0f' },
-                { id: 3, name: 'NOISE', type: 'noise', color: '#ff0' }
+                { id: 1, name: 'SQUARE', type: 'square', color: '#0ff', attack: 0, decay: 100, sustain: 0.7, release: 300, vibrato: 0 },
+                { id: 2, name: 'TRIANGLE', type: 'triangle', color: '#f0f', attack: 50, decay: 150, sustain: 0.6, release: 400, vibrato: 2 },
+                { id: 3, name: 'NOISE', type: 'noise', color: '#ff0', attack: 10, decay: 50, sustain: 0.5, release: 200, vibrato: 0 },
+                { id: 4, name: 'SINE', type: 'sine', color: '#f80', attack: 100, decay: 200, sustain: 0.8, release: 500, vibrato: 5 }
             ];
             
             // Create default channels
             channels = [
                 { id: 1, name: 'CH1', instrumentId: 1, muted: false },
                 { id: 2, name: 'CH2', instrumentId: 2, muted: false },
-                { id: 3, name: 'CH3', instrumentId: 3, muted: false }
+                { id: 3, name: 'CH3', instrumentId: 3, muted: false },
+                { id: 4, name: 'CH4', instrumentId: 4, muted: false }
             ];
             
             // Initialize empty pattern
-            initPattern();
+            pattern = Array(16).fill().map(() => Array(channels.length).fill(null));
+            verses = [JSON.parse(JSON.stringify(pattern))];
             
             // Setup audio context
             audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            gainNode = audioContext.createGain();
+            gainNode.connect(audioContext.destination);
+            gainNode.gain.value = 0.2;
             
             // Render UI
             renderChannels();
             renderInstruments();
             renderPatternGrid();
             renderPiano();
+            renderVerseControls();
             
-            // Setup event listeners
-            setupEventListeners();
-        }
-
-        function initPattern() {
-            pattern = Array(16).fill().map(() => Array(channels.length).fill(null));
-            verses = [JSON.parse(JSON.stringify(pattern))];
+            // Setup tempo control
+            document.getElementById('tempoInput').oninput = function() {
+                tempo = parseInt(this.value);
+                document.getElementById('tempoValue').textContent = tempo;
+            };
         }
-
+        
+        // UI rendering functions
         function renderChannels() {
             const channelList = document.getElementById('channelList');
             channelList.innerHTML = channels.map(ch => `
-                <div style="display:flex; justify-content:space-between; margin:5px 0; padding:5px; background:#0a0a0a; border:1px solid #0f0;">
+                <div style="display:flex; justify-content:space-between; align-items:center; margin:5px 0; padding:5px; background:#0a0a0a; border:1px solid #0f0;">
                     <span>${ch.name}</span>
                     <div>
-                        <button onclick="toggleMute(${ch.id})" style="margin-right:5px; background:${ch.muted ? '#f00' : '#0f0'}; color:#000;">${ch.muted ? 'UNMUTE' : 'MUTE'}</button>
-                        <button onclick="removeChannel(${ch.id})" style="background:#f00; color:#fff;">X</button>
+                        <button onclick="toggleMute(${ch.id})" style="margin-right:5px; padding:2px 5px; background:${ch.muted ? '#f00' : '#0f0'}; color:#000;">${ch.muted ? 'UNMUTE' : 'MUTE'}</button>
+                        <button onclick="editChannel(${ch.id})" style="margin-right:5px; padding:2px 5px; background:#ff0; color:#000;">EDIT</button>
+                        <button onclick="removeChannel(${ch.id})" style="padding:2px 5px; background:#f00; color:#fff;">X</button>
                     </div>
                 </div>
             `).join('');
         }
-
+        
         function renderInstruments() {
             const instrumentList = document.getElementById('instrumentList');
             instrumentList.innerHTML = instruments.map(inst => `
-                <div style="display:flex; justify-content:space-between; margin:5px 0; padding:5px; background:#0a0a0a; border:1px solid ${inst.color};">
-                    <span style="color:${inst.color}">${inst.name}</span>
+                <div style="display:flex; justify-content:space-between; align-items:center; margin:5px 0; padding:5px; background:#0a0a0a; border:1px solid #${inst.color.replace('#','')};">
+                    <span style="color:#${inst.color.replace('#','')}">${inst.name}</span>
                     <div>
-                        <button onclick="removeInstrument(${inst.id})" style="background:#f00; color:#fff;">X</button>
+                        <button onclick="editInstrument(${inst.id})" style="margin-right:5px; padding:2px 5px; background:#ff0; color:#000;">EDIT</button>
+                        <button onclick="removeInstrument(${inst.id})" style="padding:2px 5px; background:#f00; color:#fff;">X</button>
                     </div>
                 </div>
             `).join('');
         }
-
+        
         function renderPatternGrid() {
-            const tbody = document.querySelector('#patternGrid tbody');
-            tbody.innerHTML = pattern.map((step, stepIndex) => `
-                <tr>
-                    <td>${stepIndex + 1}</td>
-                    ${step.map((note, chIndex) => `
-                        <td onclick="setNote(${stepIndex}, ${chIndex})">${note || '-'}</td>
-                    `).join('')}
-                </tr>
-            `).join('');
+            const grid = document.getElementById('patternGrid');
+            grid.innerHTML = `
+                <table style="width:100%; border-collapse:collapse;">
+                    <thead>
+                        <tr>
+                            <th style="width:50px; border:1px solid #0f0; padding:5px;">STEP</th>
+                            ${channels.map(ch => `
+                                <th style="border:1px solid #0f0; padding:5px; color:#${instruments.find(i => i.id === ch.instrumentId)?.color.replace('#','') || '0f0'}">${ch.name}</th>
+                            `).join('')}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${pattern.map((step, stepIndex) => `
+                            <tr>
+                                <td style="border:1px solid #0f0; padding:5px; text-align:center; background:#111;">${stepIndex + 1}</td>
+                                ${step.map((note, chIndex) => `
+                                    <td 
+                                        data-step="${stepIndex}"
+                                        data-channel="${chIndex}"
+                                        onmousedown="startDrawing(event, ${chIndex}, ${stepIndex})"
+                                        onmouseover="continueDrawing(event, ${chIndex}, ${stepIndex})"
+                                        onmouseup="stopDrawing()"
+                                        style="border:1px solid #0f0; padding:5px; text-align:center; cursor:pointer; background:${currentChannel === chIndex && currentStep === stepIndex ? '#0a0a0a' : '#000'};"
+                                    >
+                                        ${note || '-'}
+                                    </td>
+                                `).join('')}
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            `;
         }
-
+        
         function renderPiano() {
-            const piano = document.getElementById('piano');
             const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
             const octaves = [3, 4, 5];
             
+            const piano = document.getElementById('piano');
             piano.innerHTML = octaves.map(oct => 
                 notes.map(note => {
                     const isSharp = note.includes('#');
                     const noteName = `${note}${oct}`;
+                    const isSelected = selectedNote === noteName;
                     return `
                         <button 
                             onclick="playNote('${noteName}')" 
@@ -292,8 +316,11 @@
                                 height:100%; 
                                 border:1px solid #0f0; 
                                 background:${isSharp ? '#333' : '#111'}; 
-                                color:#0f0;
+                                color:#0f0; 
+                                cursor:pointer;
+                                font-size:7px;
                                 ${isSharp ? 'margin:0 -2px; z-index:1;' : ''}
+                                ${isSelected ? 'box-shadow: 0 0 5px #0f0; border-width: 2px;' : ''}
                             "
                         >
                             ${noteName}
@@ -302,71 +329,111 @@
                 }).join('')
             ).join('');
         }
-
-        function setupEventListeners() {
-            // Button event listeners
-            document.getElementById('addChannelBtn').addEventListener('click', addChannel);
-            document.getElementById('addInstrumentBtn').addEventListener('click', addInstrument);
-            document.getElementById('updatePatternBtn').addEventListener('click', updatePatternLength);
-            document.getElementById('addVerseBtn').addEventListener('click', addVerse);
-            document.getElementById('copyVerseBtn').addEventListener('click', copyVerse);
-            document.getElementById('playBtn').addEventListener('click', playSong);
-            document.getElementById('stopBtn').addEventListener('click', stopSong);
-            document.getElementById('generateBtn').addEventListener('click', generateSong);
-            document.getElementById('saveBtn').addEventListener('click', saveProject);
-            
-            // File input
-            document.getElementById('loadInput').addEventListener('change', loadProject);
-            
-            // Tempo control
-            document.getElementById('tempoInput').addEventListener('input', function() {
-                tempo = parseInt(this.value);
-                document.getElementById('tempoValue').textContent = tempo;
-            });
+        
+        function renderVerseControls() {
+            const verseSelect = document.getElementById('verseSelect');
+            verseSelect.innerHTML = verses.map((_, index) => 
+                `<option value="${index}" ${index === currentVerse ? 'selected' : ''}>Verse ${index + 1}</option>`
+            ).join('');
         }
-
+        
+        // Core functionality
         function playNote(note) {
-            const oscillator = audioContext.createOscillator();
-            oscillator.type = 'square';
-            oscillator.frequency.value = noteToFrequency(note);
-            oscillator.connect(audioContext.destination);
-            oscillator.start();
-            oscillator.stop(audioContext.currentTime + 0.5);
+            selectedNote = note;
+            renderPiano();
+            
+            if (currentChannel < channels.length && currentStep < pattern.length) {
+                pattern[currentStep][currentChannel] = note;
+                renderPatternGrid();
+            }
+            
+            const channel = channels[currentChannel];
+            const instrument = instruments.find(i => i.id === channel.instrumentId);
+            
+            if (instrument && !channel.muted) {
+                const now = audioContext.currentTime;
+                const oscillator = audioContext.createOscillator();
+                const gainNode = audioContext.createGain();
+                
+                oscillator.type = instrument.type;
+                oscillator.frequency.value = noteToFrequency(note);
+                
+                if (instrument.vibrato > 0) {
+                    const vibratoOsc = audioContext.createOscillator();
+                    const vibratoGain = audioContext.createGain();
+                    
+                    vibratoOsc.type = 'sine';
+                    vibratoOsc.frequency.value = instrument.vibrato;
+                    vibratoGain.gain.value = instrument.vibrato * 5;
+                    
+                    vibratoOsc.connect(vibratoGain);
+                    vibratoGain.connect(oscillator.frequency);
+                    
+                    vibratoOsc.start(now);
+                    vibratoOsc.stop(now + 0.5);
+                }
+                
+                gainNode.gain.setValueAtTime(0, now);
+                gainNode.gain.linearRampToValueAtTime(1, now + instrument.attack / 1000);
+                gainNode.gain.linearRampToValueAtTime(instrument.sustain, now + (instrument.attack + instrument.decay) / 1000);
+                gainNode.gain.linearRampToValueAtTime(0, now + (instrument.attack + instrument.decay + instrument.release) / 1000);
+                
+                oscillator.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                
+                oscillator.start(now);
+                oscillator.stop(now + (instrument.attack + instrument.decay + instrument.release) / 1000);
+            }
         }
-
+        
         function noteToFrequency(note) {
             const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
             const octave = parseInt(note.slice(-1));
             const key = notes.indexOf(note.slice(0, -1));
             return 440 * Math.pow(2, (octave - 4) + (key - 9) / 12);
         }
-
-        function setNote(step, channel) {
-            // In a real implementation, this would set the note for the step/channel
-            console.log(`Set note for step ${step+1}, channel ${channel+1}`);
-        }
-
+        
+        // Channel and instrument management
         function addChannel() {
-            const newId = channels.length + 1;
+            const newId = Math.max(0, ...channels.map(ch => ch.id)) + 1;
             channels.push({
                 id: newId,
                 name: `CH${newId}`,
-                instrumentId: instruments[0].id,
+                instrumentId: instruments[0]?.id || 1,
                 muted: false
             });
             
-            // Add new column to pattern
             pattern.forEach(step => step.push(null));
             
             renderChannels();
             renderPatternGrid();
         }
-
+        
+        function removeChannel(id) {
+            if (channels.length <= 1) return;
+            
+            const index = channels.findIndex(ch => ch.id === id);
+            if (index !== -1) {
+                channels.splice(index, 1);
+                pattern.forEach(step => step.splice(index, 1));
+                renderChannels();
+                renderPatternGrid();
+            }
+        }
+        
+        function toggleMute(id) {
+            const channel = channels.find(ch => ch.id === id);
+            if (channel) {
+                channel.muted = !channel.muted;
+                renderChannels();
+            }
+        }
+        
         function addInstrument() {
             const types = ['square', 'triangle', 'sawtooth', 'sine', 'noise'];
             const colors = ['#0ff', '#f0f', '#ff0', '#f80', '#0f0', '#00f'];
             
-            const newId = instruments.length + 1;
+            const newId = Math.max(0, ...instruments.map(inst => inst.id)) + 1;
             const type = types[Math.floor(Math.random() * types.length)];
             const color = colors[Math.floor(Math.random() * colors.length)];
             
@@ -374,51 +441,107 @@
                 id: newId,
                 name: `INST${newId}`,
                 type: type,
-                color: color
+                color: color,
+                attack: 0,
+                decay: 100,
+                sustain: 0.7,
+                release: 300,
+                vibrato: 0
             });
             
             renderInstruments();
         }
-
+        
+        function removeInstrument(id) {
+            if (instruments.length <= 1) return;
+            
+            const index = instruments.findIndex(inst => inst.id === id);
+            if (index !== -1) {
+                instruments.splice(index, 1);
+                renderInstruments();
+            }
+        }
+        
+        // Pattern management
         function updatePatternLength() {
             const newLength = parseInt(document.getElementById('patternLengthInput').value);
             if (newLength < 4 || newLength > 64) return;
             
             if (newLength > pattern.length) {
-                // Add steps
                 for (let i = pattern.length; i < newLength; i++) {
                     pattern.push(Array(channels.length).fill(null));
                 }
             } else {
-                // Remove steps
                 pattern = pattern.slice(0, newLength);
             }
             
             verses[currentVerse] = JSON.parse(JSON.stringify(pattern));
             renderPatternGrid();
         }
-
+        
         function addVerse() {
             const newVerse = Array(pattern.length).fill().map(() => Array(channels.length).fill(null));
             verses.push(newVerse);
             currentVerse = verses.length - 1;
             pattern = JSON.parse(JSON.stringify(newVerse));
+            renderVerseControls();
+            renderPatternGrid();
+        }
+        
+        function copyVerse() {
+            const copy = JSON.parse(JSON.stringify(pattern));
+            verses.push(copy);
+            currentVerse = verses.length - 1;
+            renderVerseControls();
+        }
+        
+        function switchVerse() {
+            const selectedVerse = parseInt(document.getElementById('verseSelect').value);
+            if (selectedVerse >= 0 && selectedVerse < verses.length) {
+                verses[currentVerse] = JSON.parse(JSON.stringify(pattern));
+                currentVerse = selectedVerse;
+                pattern = JSON.parse(JSON.stringify(verses[currentVerse]));
+                renderPatternGrid();
+            }
+        }
+        
+        // Drawing functionality
+        function startDrawing(e, chIndex, stepIndex) {
+            isDrawing = true;
+            selectCell(chIndex, stepIndex);
+        }
+        
+        function continueDrawing(e, chIndex, stepIndex) {
+            if (isDrawing && selectedNote) {
+                selectCell(chIndex, stepIndex);
+            }
+        }
+        
+        function stopDrawing() {
+            isDrawing = false;
+        }
+        
+        function selectCell(chIndex, stepIndex) {
+            currentChannel = chIndex;
+            currentStep = stepIndex;
             
-            // Update verse select
-            const verseSelect = document.getElementById('verseSelect');
-            verseSelect.innerHTML = verses.map((_, index) => 
-                `<option value="${index}" ${index === currentVerse ? 'selected' : ''}>Verse ${index + 1}</option>`
-            ).join('');
+            if (selectedNote) {
+                pattern[stepIndex][chIndex] = selectedNote;
+            }
             
             renderPatternGrid();
         }
-
+        
+        // Playback functionality
         function playSong() {
             if (isPlaying) return;
+            
             isPlaying = true;
+            document.getElementById('playBtn').disabled = true;
+            document.getElementById('stopBtn').disabled = false;
             
             let stepIndex = 0;
-            const stepTime = 60000 / (tempo * 4); // 16th notes
+            const stepTime = 60000 / (tempo * 4);
             
             const playStep = () => {
                 if (!isPlaying || stepIndex >= pattern.length) {
@@ -426,10 +549,33 @@
                     return;
                 }
                 
-                // Highlight current step in UI
-                const rows = document.querySelectorAll('#patternGrid tbody tr');
-                rows.forEach(row => row.style.backgroundColor = '');
-                if (rows[stepIndex]) rows[stepIndex].style.backgroundColor = '#0f03';
+                pattern[stepIndex].forEach((note, chIndex) => {
+                    if (note && !channels[chIndex]?.muted) {
+                        const instrument = instruments.find(i => i.id === channels[chIndex]?.instrumentId);
+                        if (instrument) {
+                            const now = audioContext.currentTime;
+                            const oscillator = audioContext.createOscillator();
+                            const gainNode = audioContext.createGain();
+                            
+                            oscillator.type = instrument.type;
+                            oscillator.frequency.value = noteToFrequency(note);
+                            
+                            gainNode.gain.setValueAtTime(0, now);
+                            gainNode.gain.linearRampToValueAtTime(1, now + instrument.attack / 1000);
+                            gainNode.gain.linearRampToValueAtTime(instrument.sustain, now + (instrument.attack + instrument.decay) / 1000);
+                            gainNode.gain.linearRampToValueAtTime(0, now + (instrument.attack + instrument.decay + instrument.release) / 1000);
+                            
+                            oscillator.connect(gainNode);
+                            gainNode.connect(audioContext.destination);
+                            
+                            oscillator.start(now);
+                            oscillator.stop(now + (instrument.attack + instrument.decay + instrument.release) / 1000);
+                        }
+                    }
+                });
+                
+                currentStep = stepIndex;
+                renderPatternGrid();
                 
                 stepIndex++;
                 setTimeout(playStep, stepTime);
@@ -437,16 +583,16 @@
             
             playStep();
         }
-
+        
         function stopSong() {
             isPlaying = false;
+            document.getElementById('playBtn').disabled = false;
+            document.getElementById('stopBtn').disabled = true;
+            currentStep = 0;
+            renderPatternGrid();
         }
-
-        function generateSong() {
-            // Placeholder for AI generation
-            alert('AI song generation would happen here');
-        }
-
+        
+        // Project management
         function saveProject() {
             const project = {
                 channels,
@@ -464,7 +610,7 @@
             linkElement.setAttribute('download', 'chiptune-project.json');
             linkElement.click();
         }
-
+        
         function loadProject(event) {
             const file = event.target.files[0];
             if (!file) return;
@@ -474,32 +620,23 @@
                 try {
                     const project = JSON.parse(e.target.result);
                     
-                    // Load project data
                     channels = project.channels || [];
                     instruments = project.instruments || [];
                     verses = project.verses || [Array(16).fill().map(() => Array(channels.length).fill(null))];
                     tempo = project.tempo || 120;
                     currentVerse = 0;
                     
-                    // Update UI
                     document.getElementById('tempoInput').value = tempo;
                     document.getElementById('tempoValue').textContent = tempo;
                     document.getElementById('patternLengthInput').value = project.patternLength || 16;
                     
-                    // Load current verse pattern
                     pattern = JSON.parse(JSON.stringify(verses[currentVerse]));
                     
-                    // Re-render everything
                     renderChannels();
                     renderInstruments();
                     renderPatternGrid();
                     renderPiano();
-                    
-                    // Update verse select
-                    const verseSelect = document.getElementById('verseSelect');
-                    verseSelect.innerHTML = verses.map((_, index) => 
-                        `<option value="${index}" ${index === currentVerse ? 'selected' : ''}>Verse ${index + 1}</option>`
-                    ).join('');
+                    renderVerseControls();
                     
                 } catch (error) {
                     console.error("Error loading project:", error);
@@ -507,11 +644,50 @@
                 }
             };
             reader.readAsText(file);
-            
-            // Reset file input
             event.target.value = '';
         }
-
+        
+        // AI generation
+        async function generateSong() {
+            const generateBtn = document.getElementById('generateBtn');
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            
+            generateBtn.disabled = true;
+            generateBtn.textContent = "GENERATING...";
+            loadingIndicator.hidden = false;
+            
+            try {
+                const prompt = `Generate a 16-step chiptune pattern for ${channels.length} channels using only 8-bit instruments. 
+                Format as JSON with steps array where each step contains notes for each channel. 
+                Use note names like "C4", "D#5", or null for rests. 
+                Make it upbeat and energetic like classic NES games.`;
+                
+                // Simulate API call (replace with actual API implementation)
+                const generatedPattern = {
+                    steps: Array(16).fill().map(() => 
+                        Array(channels.length).fill().map(() => 
+                            Math.random() > 0.7 ? ['C3','D3','E3','F3','G3','A3','B3','C4','D4','E4','F4','G4','A4','B4','C5'][Math.floor(Math.random() * 15)] : null
+                        )
+                    )
+                };
+                
+                if (generatedPattern.steps && Array.isArray(generatedPattern.steps)) {
+                    pattern = generatedPattern.steps;
+                    verses[currentVerse] = JSON.parse(JSON.stringify(pattern));
+                    renderPatternGrid();
+                } else {
+                    alert("Invalid pattern format generated");
+                }
+            } catch (error) {
+                console.error("Generation failed:", error);
+                alert("Failed to generate song. Please try again.");
+            } finally {
+                generateBtn.disabled = false;
+                generateBtn.textContent = "GENERATE AI SONG";
+                loadingIndicator.hidden = true;
+            }
+        }
+        
         // Initialize on load
         window.onload = init;
     </script>

index.html

@@ -46,12 +46,12 @@
                         <span class="ml-2 text-xl font-bold bg-gradient-to-r from-indigo-300 to-purple-400 bg-clip-text text-transparent">PanoramaGen 360°</span>
                     </div>
                 </div>
-                <div class="hidden md:block">
+                    <div class="hidden md:block">
                     <div class="ml-10 flex items-baseline space-x-4">
                         <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-indigo-900">Home</a>
                         <a href="MyProfileView.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Profile</a>
                         <a href="MyGarageView.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Garage</a>
-                        <a href="chiptune.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Chiptune Maker</a>
+                        <a href="chiptune.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Chiptune</a>
 <a href="#demo" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Demo</a>
 <a href="#installation" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Installation</a>
                         <a href="#features" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</a>