---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MusicBee Player</title>
  <!-- Подключаем наш внешний файл стилей CSS -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="main-container">
    
    <!-- ЛЕВАЯ ПАНЕЛЬ (САЙДБАР) -->
    <aside class="sidebar">
      <div class="sidebar-section">
        <div class="sidebar-title">Библиотека</div>
        <a class="sidebar-item active">
          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>
          Альбомы
        </a>
        <a class="sidebar-item">
          <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.42 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.3 6-6.72h-1.7z"/></svg>
          Исполнители
        </a>
        <a class="sidebar-item">
          <svg viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
          Все треки
        </a>
      </div>
      <div class="sidebar-section">
        <div class="sidebar-title">Плейлисты</div>
        <a class="sidebar-item">
          <svg viewBox="0 0 24 24" style="fill: #e74c3c;"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.5 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          Понравившиеся
        </a>
        <a class="sidebar-item">
          <svg viewBox="0 0 24 24" style="fill: #f1c40f;"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
          Избранное
        </a>
      </div>
    </aside>

    <!-- ЦЕНТРАЛЬНАЯ ЗОНА (КОНТЕНТ) -->
    <main class="content-view">
      <h2 class="content-title">Альбомы библиотеки</h2>
      <div class="albums-grid">
        <div class="album-card">
          <div class="album-cover"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5z"/></svg></div>
          <div class="album-name">Riders on the Storm</div>
          <div class="album-artist">The Doors</div>
        </div>
        <div class="album-card">
          <div class="album-cover"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5z"/></svg></div>
          <div class="album-name">Abbey Road</div>
          <div class="album-artist">The Beatles</div>
        </div>
      </div>
    </main>

  </div>

  <!-- НИЖНЯЯ ПАНЕЛЬ (АУДИОПЛЕЕР) -->
  <footer class="musicbee-player">
    <div class="player-left">
      <!-- Назад -->
      <button title="Предыдущий трек"><svg viewBox="0 0 24 24" width="16" height="16"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></button>
      
      <!-- Скрытый чекбокс-переключатель Play/Pause -->
      <input type="checkbox" id="play-trigger">
      <label for="play-trigger" class="btn-play-label" title="Воспроизвести / Пауза">
        <svg class="svg-play" viewBox="0 0 24 24" width="16" height="16"><path d="M8 5v14l11-7z"/></svg>
        <svg class="svg-pause" viewBox="0 0 24 24" width="16" height="16"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
      </label>
      
      <!-- Вперед -->
      <button title="Следующий трек"><svg viewBox="0 0 24 24" width="16" height="16"><path d="M16 6h2v12h-2zm-10.5 0v12l8.5-6z"/></svg></button>
    </div>

    <div class="player-center">
      <div class="track-meta">
        <span class="track-title">Riders on the Storm</span>
        <span class="track-artist">· The Doors</span>
        
        <!-- Лайк -->
        <input type="checkbox" id="like-toggle" class="like-trigger">
        <label for="like-toggle" class="like-label" title="Добавить в понравившиеся">
          <svg class="svg-heart-reg" viewBox="0 0 24 24" width="14" height="14"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.5 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
          <svg class="svg-heart-solid" viewBox="0 0 24 24" width="14" height="14"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.5 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </label>
      </div>
      <div class="timeline">
        <span>0:52</span>
        <div class="progress-bar"><div class="progress-fill"></div></div>
        <span>4:55</span>
      </div>
    </div>

    <div class="player-right">
      <!-- Иконка динамика -->
      <svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
      <div class="volume-bar"><div class="volume-fill"></div></div>
    </div>
  </footer>

</body>
</html>