jan
/
roadamp


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>roadamp</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#1a1a2e" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="roadamp" />
  <link rel="apple-touch-icon" href="/icon.svg" />
</head>
<body>
  <div id="app">
    <div id="status-bar">
      <span id="winamp-status">●</span>
      <span id="state-label">–</span>
    </div>

    <div id="track-info">
      <div id="track-title">Nicht verbunden</div>
      <div id="star-rating" aria-label="Bewertung">
        <span class="star" data-v="1">☆</span>
        <span class="star" data-v="2">☆</span>
        <span class="star" data-v="3">☆</span>
        <span class="star" data-v="4">☆</span>
        <span class="star" data-v="5">☆</span>
      </div>
      <div id="playlist-pos"></div>
    </div>

    <canvas id="viz" height="80"></canvas>

    <div id="progress-wrap">
      <div id="progress-bar">
        <div id="progress-fill"></div>
      </div>
      <div id="time-display">
        <span id="time-current">0:00</span>
        <span id="time-length">0:00</span>
      </div>
    </div>

    <div id="seek-row">
      <button class="btn btn-seek" data-delta="-120">−2min</button>
      <button class="btn btn-seek" data-delta="-15">−15s</button>
      <button class="btn btn-seek" data-delta="+15">+15s</button>
      <button class="btn btn-seek" data-delta="+120">+2min</button>
    </div>

    <div id="controls-row">
      <button class="btn btn-ctrl" id="btn-prev">⏮</button>
      <button class="btn btn-ctrl btn-play" id="btn-play">▶</button>
      <button class="btn btn-ctrl" id="btn-stop">⏹</button>
      <button class="btn btn-ctrl" id="btn-next">⏭</button>
    </div>

    <div id="volume-row">
      <button class="btn btn-vol" id="btn-mute">🔊</button>
      <button class="btn btn-vol" id="btn-vol-down">−</button>
      <div id="volume-bar-wrap">
        <div id="volume-bar">
          <div id="volume-fill"></div>
        </div>
        <div id="volume-pct">–</div>
      </div>
      <button class="btn btn-vol" id="btn-vol-up">+</button>
    </div>

    <div id="killist-row">
      <button class="btn btn-kill" id="btn-kill">🚫 Überspringen</button>
      <button class="btn btn-action" id="btn-show-playlist">📋</button>
      <button class="btn btn-kill-list" id="btn-show-killist">Liste</button>
    </div>

    <div id="killist-panel" class="hidden">
      <h3>Skip-Liste</h3>
      <ul id="killist-items"></ul>
      <button class="btn" id="btn-close-killist">Schliessen</button>
    </div>
  </div>

  <!-- Playlist overlay -->
  <div id="playlist-overlay" class="hidden">
    <div id="playlist-header">
      <span id="playlist-title-label">Playlist</span>
      <button id="btn-close-playlist">✕</button>
    </div>
    <ul id="playlist-list"></ul>
  </div>

  <script src="app.js"></script>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').catch(() => {});
    }
  </script>
</body>
</html>