frontend/player.html

<main class="midi-app">
  <section class="hero">
    <div class="brand-mark" aria-hidden="true">
      <span></span><span></span><span></span><span></span>
    </div>
    <div>
      <p class="eyebrow">GRADIO MIDI LAB</p>
      <h1>MIDI Canvas</h1>
      <p class="subtitle">Écoutez, explorez et isolez chaque piste — directement dans votre navigateur.</p>
    </div>
    <div class="status-pill"><i></i><span>Prêt</span></div>
  </section>

  <section class="drop-zone" tabindex="0" role="button" aria-label="Importer un fichier MIDI">
    <input class="file-input" type="file" accept=".mid,.midi,audio/midi,audio/x-midi" hidden>
    <div class="drop-icon" aria-hidden="true">↥</div>
    <div>
      <strong>Déposez votre fichier MIDI ici</strong>
      <span>ou cliquez pour parcourir · MID / MIDI · 5 Mo max.</span>
    </div>
    <button class="browse-button" type="button">Choisir un fichier</button>
  </section>

  <section class="message-panel" aria-live="polite"></section>

  <section class="workspace" hidden>
    <div class="file-heading">
      <div>
        <p class="file-kicker">FICHIER CHARGÉ</p>
        <h2 class="song-title"></h2>
        <p class="file-name"></p>
      </div>
      <div class="meta-badges"></div>
    </div>

    <div class="transport">
      <button class="play-button" type="button" aria-label="Lecture">▶</button>
      <button class="stop-button icon-button" type="button" aria-label="Retour au début">■</button>
      <span class="current-time">0:00.0</span>
      <input class="seek" type="range" min="0" max="1" step="0.01" value="0" aria-label="Position de lecture">
      <span class="duration">0:00.0</span>
      <label class="compact-control" title="Vitesse de lecture">
        <span>Tempo</span>
        <select class="speed" aria-label="Vitesse de lecture">
          <option value="0.5">0,5×</option>
          <option value="0.75">0,75×</option>
          <option value="1" selected>1×</option>
          <option value="1.25">1,25×</option>
          <option value="1.5">1,5×</option>
          <option value="2">2×</option>
        </select>
      </label>
      <label class="volume-control" title="Volume général">
        <span aria-hidden="true">◖</span>
        <input class="volume" type="range" min="0" max="1" step="0.01" value="0.72" aria-label="Volume général">
      </label>
    </div>

    <div class="visualizer-card">
      <div class="card-heading">
        <div>
          <p class="section-label">PIANO ROLL</p>
          <span class="pitch-range"></span>
        </div>
        <label class="zoom-control">
          <span>Zoom</span>
          <input class="zoom" type="range" min="1" max="8" step="1" value="1">
        </label>
      </div>
      <canvas class="piano-roll" height="300" aria-label="Visualisation des notes MIDI"></canvas>
      <p class="canvas-hint">Cliquez dans la visualisation pour vous déplacer.</p>
    </div>

    <div class="tracks-card">
      <div class="card-heading">
        <div>
          <p class="section-label">PISTES</p>
          <span class="track-summary"></span>
        </div>
        <button class="reset-mix" type="button">Réinitialiser le mix</button>
      </div>
      <div class="track-list"></div>
    </div>
  </section>

  <footer>Audio synthétisé localement avec Web Audio · Aucun stockage persistant n’est configuré</footer>
</main>