index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typographic Music Composer - A modern browser-based web application for composing music using text notation, polyphonic Web Audio synthesis, and visual spectrum analysis.">
  <title>Typographic Music Composer</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Outfit:wght@400;600;700;800&display=swap" rel="stylesheet">

  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <!-- Header Navigation -->
  <header class="app-header">
    <div class="brand-container">
      <div class="brand-text">
        <h1>Typographic Music Composer</h1>
      </div>
    </div>

    <div class="header-actions">
      <!-- Preset Loader -->
      <select id="presetSelect" class="select-custom" aria-label="Select Preset Score">
        <option value="cyberpunk">⚡ Cyberpunk Neon Synthwave</option>
        <option value="chiptune">👾 Chiptune Retro Arcade</option>
        <option value="bach">🎻 Bach Invention Fragment</option>
        <option value="lofi">☕ Ambient Lofi Chill</option>
        <option value="jazz">🎷 Jazz Extended 7th Chords</option>
        <option value="drums">🥁 Typographic Beats & Drums</option>
      </select>

      <!-- Theme Switcher -->
      <select id="themeSelect" class="select-custom" aria-label="Select Color Theme">
        <option value="cyber">🌙 Cyber Dark</option>
        <option value="emerald">🌿 Emerald Synth</option>
        <option value="light">☀️ Light Studio</option>
      </select>
    </div>
  </header>

  <!-- Main Container -->
  <main class="app-container">
    
    <!-- Top Transport & Quick Controls Toolbar -->
    <section class="toolbar-panel">
      <!-- Transport Buttons -->
      <div class="transport-controls">
        <button id="playBtn" class="btn btn-primary" aria-label="Play Script">
          <span>▶</span> Play
        </button>
        <button id="stopBtn" class="btn btn-ghost" aria-label="Stop Audio">
          <span>■</span> Stop
        </button>
        <button id="recordBtn" class="btn btn-ghost" aria-label="Record Audio Output">
          <span>⏺</span> Record
        </button>
      </div>

      <!-- Quick Parameters -->
      <div class="synth-quick-controls">
        <div class="control-item">
          <label for="bpmInput">Tempo</label>
          <input type="number" id="bpmInput" class="number-input" value="132" min="40" max="240" step="1">
          <button id="tapTempoBtn" class="btn btn-ghost chip-btn" title="Tap Tempo">TAP</button>
        </div>

        <div class="control-item">
          <label for="waveSelect">Waveform</label>
          <select id="waveSelect" class="select-custom">
            <option value="sawtooth">Sawtooth (Lead)</option>
            <option value="square">Square (8-Bit)</option>
            <option value="triangle">Triangle (Soft)</option>
            <option value="sine">Sine (Pure)</option>
            <option value="fm">FM Synth (Metallic)</option>
          </select>
        </div>

        <div class="control-item">
          <label for="transposeSelect">Pitch</label>
          <select id="transposeSelect" class="select-custom">
            <option value="-12">-1 Octave (-12)</option>
            <option value="-5">-5 Semi</option>
            <option value="0" selected>Standard (0)</option>
            <option value="7">+7 Semi</option>
            <option value="12">+1 Octave (+12)</option>
          </select>
        </div>
      </div>
    </section>

    <!-- Main Stage: Left Column (Visualizer & Typographic Editor) -->
    <section class="main-stage">

      <!-- Audio Spectrum & Waveform Visualizer -->
      <div class="visualizer-card">
        <div class="card-header">
          <div class="card-title">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M2 10v4M6 6v12M10 3v18M14 8v8M18 5v14M22 10v4"/>
            </svg>
            Real-Time Spectrum & Waveform Analysis
          </div>
        </div>
        <div class="canvas-container">
          <canvas id="visCanvas"></canvas>
        </div>
      </div>

      <!-- Code Editor Card -->
      <div class="editor-card">
        <div class="editor-toolbar">
          <div class="card-title">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="16 18 22 12 16 6"/>
              <polyline points="8 6 2 12 8 18"/>
            </svg>
            Typographic Music Editor
          </div>

          <!-- Quick Token Insertion Helper Chips -->
          <div class="editor-quick-helper">
            <button class="chip-btn" data-insert="C4+E4+G4 ">+ C Major</button>
            <button class="chip-btn" data-insert="A3+C4+E4+G4 ">+ Am7</button>
            <button class="chip-btn" data-insert="R ">Rest (R)</button>
            <button class="chip-btn" data-insert=":2 ">Duration (:2)</button>
            <button class="chip-btn" data-insert="@80 ">Vel (@80)</button>
            <button class="chip-btn" data-insert="KICK ">KICK</button>
            <button class="chip-btn" data-insert="SNARE ">SNARE</button>
            <button class="chip-btn" data-insert="HIHAT ">HIHAT</button>
          </div>
        </div>

        <!-- Code Editor Wrapper with Sync Line Numbers & Overlay -->
        <div class="editor-wrapper">
          <div id="lineNumbers" class="line-numbers"></div>
          <div class="editor-area-container">
            <div id="highlightOverlay" class="editor-highlight-overlay"></div>
            <textarea id="codeEditor" class="code-editor" spellcheck="false" placeholder="Write typographic note score here..."></textarea>
          </div>
        </div>
      </div>

    </section>

    <!-- Sidebar: Right Column (Synthesizer & Sound FX Controls) -->
    <aside class="sidebar-panel">

      <div class="synth-card">
        <div class="card-header">
          <div class="card-title">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="4" y="4" width="16" height="16" rx="2"/>
              <rect x="9" y="9" width="6" height="6"/>
            </svg>
            Synth & Sound Sculpting
          </div>
        </div>

        <div class="synth-grid">
          <!-- Master Volume -->
          <div class="synth-control-group full-width">
            <label for="volumeSlider">Master Volume <span id="volumeVal">80%</span></label>
            <input type="range" id="volumeSlider" class="range-slider" min="0" max="1" step="0.01" value="0.8">
          </div>

          <!-- Lowpass Filter Cutoff -->
          <div class="synth-control-group">
            <label for="cutoffSlider">Filter Cutoff <span id="cutoffVal">6500Hz</span></label>
            <input type="range" id="cutoffSlider" class="range-slider" min="200" max="16000" step="100" value="6500">
          </div>

          <!-- Filter Resonance -->
          <div class="synth-control-group">
            <label for="resSlider">Resonance (Q) <span id="resVal">1.0</span></label>
            <input type="range" id="resSlider" class="range-slider" min="0.1" max="15" step="0.1" value="1.0">
          </div>

          <!-- Stereo Delay Time -->
          <div class="synth-control-group">
            <label for="delayTimeSlider">Delay Time <span id="delayTimeVal">0.25s</span></label>
            <input type="range" id="delayTimeSlider" class="range-slider" min="0.05" max="1.0" step="0.05" value="0.25">
          </div>

          <!-- Delay Feedback -->
          <div class="synth-control-group">
            <label for="delayFeedSlider">Delay Feedback <span id="delayFeedVal">35%</span></label>
            <input type="range" id="delayFeedSlider" class="range-slider" min="0" max="0.8" step="0.05" value="0.35">
          </div>

          <!-- ADSR Attack -->
          <div class="synth-control-group">
            <label for="attackSlider">Attack <span id="attackVal">0.02s</span></label>
            <input type="range" id="attackSlider" class="range-slider" min="0.001" max="0.5" step="0.005" value="0.02">
          </div>

          <!-- ADSR Decay -->
          <div class="synth-control-group">
            <label for="decaySlider">Decay <span id="decayVal">0.15s</span></label>
            <input type="range" id="decaySlider" class="range-slider" min="0.01" max="1.0" step="0.01" value="0.15">
          </div>

          <!-- ADSR Sustain -->
          <div class="synth-control-group">
            <label for="sustainSlider">Sustain <span id="sustainVal">60%</span></label>
            <input type="range" id="sustainSlider" class="range-slider" min="0.05" max="1.0" step="0.05" value="0.6">
          </div>

          <!-- ADSR Release -->
          <div class="synth-control-group">
            <label for="releaseSlider">Release <span id="releaseVal">0.30s</span></label>
            <input type="range" id="releaseSlider" class="range-slider" min="0.05" max="2.0" step="0.05" value="0.3">
          </div>
        </div>
      </div>

    </aside>

    <!-- Interactive Piano Keyboard (Full Width) -->
    <section class="keyboard-card">
      <div class="card-header">
        <div class="card-title">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="2" y="5" width="20" height="14" rx="2"/>
            <path d="M6 5v8M10 5v8M14 5v8M18 5v8"/>
          </svg>
          Interactive Keyboard (C3 - B5)
        </div>
      </div>
      <div id="pianoKeyboard" class="piano-keys-container"></div>
    </section>

  </main>



  <!-- Application Scripts -->
  <script src="js/parser.js"></script>
  <script src="js/audio-engine.js"></script>
  <script src="js/visualizer.js"></script>
  <script src="js/presets.js"></script>
  <script src="js/app.js"></script>
</body>
</html>