---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MusicBee Full Interface Layout</title>
  
  <!-- Подключение Font Awesome для иконок -->
  <link rel="stylesheet" href="https://cloudflare.com">

  <style>
    /* Базовые настройки темы MusicBee */
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      background-color: #1e1e1e;
      font-family: 'Segoe UI', sans-serif;
      color: #cccccc;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ОСНОВНОЙ КОНТЕЙНЕР (Верхняя часть: Сайдбар + Альбомы) */
    .main-container {
      display: flex;
      flex-grow: 1;
      height: calc(100vh - 65px); /* Оставляем место для нижнего плеера */
    }

    /* 1. ЛЕВАЯ ПАНЕЛЬ (Сайдбар) */
    .sidebar {
      width: 240px;
      background-color: #202021;
      border-right: 1px solid #2d2d2d;
      padding: 15px 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .sidebar-section {
      display: flex;
      flex-direction: column;
    }

    .sidebar-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #666666;
      padding: 0 20px 8px 20px;
      font-weight: bold;
    }

    /* Элементы меню */
    .sidebar-item {
      display: flex;
      align-items: center;
      padding: 8px 20px;
      color: #aaaaaa;
      text-decoration: none;
      font-size: 13px;
      gap: 12px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .sidebar-item:hover {
      background-color: #2a2a2b;
      color: #ffffff;
    }
    .sidebar-item.active {
      background-color: #2d2d2d;
      color: #007acc; /* Синий акцент */
      border-left: 3px solid #007acc;
      padding-left: 17px;
    }
    .sidebar-item i {
      width: 16px;
      text-align: center;
      font-size: 14px;
    }

    /* 2. ЦЕНТРАЛЬНАЯ ПАНЕЛЬ (Сетка альбомов) */
    .content-view {
      flex-grow: 1;
      background-color: #1a1a1a;
      padding: 25px;
      overflow-y: auto;
    }

    .content-title {
      font-size: 20px;
      color: #ffffff;
      margin-top: 0;
      margin-bottom: 20px;
      font-weight: 400;
    }

    /* Сетка альбомов */
    .albums-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 20px;
    }

    .album-card {
      background-color: #222223;
      border: 1px solid #2d2d2d;
      border-radius: 4px;
      padding: 12px;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: transform 0.2s, background-color 0.2s;
    }
    .album-card:hover {
      background-color: #2d2d2d;
      transform: translateY(-2px);
    }

    /* Заглушка обложки альбома */
    .album-cover {
      width: 100%;
      aspect-ratio: 1/1;
      background-color: #333334;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #555555;
      font-size: 40px;
      margin-bottom: 10px;
    }

    .album-name {
      font-size: 13px;
      color: #ffffff;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .album-artist {
      font-size: 12px;
      color: #888888;
      margin-top: 4px;
    }

    /* 3. НИЖНЯЯ ПАНЕЛЬ (Плеер) */
    .musicbee-player {
      height: 65px;
      background-color: #252526;
      border-top: 1px solid #333333;
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 30px;
      position: relative;
      z-index: 10;
    }

    .player-left {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 220px;
    }

    /* Кнопки плеера */
    .player-left button, .player-right button {
      background: none;
      border: none;
      color: #b5b5b5;
      cursor: pointer;
      padding: 6px;
      border-radius: 4px;
    }
    .player-left button:hover, .player-right button:hover {
      background-color: #383838;
      color: #ffffff;
    }

    /* Скрытый чекбокс + кнопка Play без JS */
    #play-trigger { display: none; }
    .btn-play-label {
      background-color: #333333;
      border: 1px solid #444444;
      width: 32px;
      height: 32px;
      color: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn-play-label .fa-pause { display: none; }
    #play-trigger:checked + .btn-play-label .fa-play { display: none; }
    #play-trigger:checked + .btn-play-label .fa-pause { display: block; }

    /* Центр плеера: инфо и таймлайн */
    .player-center {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .track-meta {
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .track-title { color: #ffffff; font-weight: 600; }
    .track-artist { color: #888888; }

    /* ЧЕКБОКС ДЛЯ ЛАЙКА ТРЕКА В ПЛЕЕРЕ (БЕЗ JS) */
    .like-trigger { display: none; }
    .like-label { cursor: pointer; color: #555555; font-size: 12px; margin-left: 5px; }
    .like-label .fa-solid { display: none; }
    .like-trigger:checked + .like-label { color: #e74c3c; } /* Красное сердце при клике */
    .like-trigger:checked + .like-label .fa-regular { display: none; }
    .like-trigger:checked + .like-label .fa-solid { display: inline-block; }

    /* Полоса прогресса */
    .timeline {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      color: #777777;
    }
    .progress-bar { flex-grow: 1; height: 4px; background-color: #3e3e42; border-radius: 2px; }
    .progress-fill { width: 25%; height: 100%; background-color: #007acc; border-radius: 2px; }

    /* Правая часть плеера (Громкость) */
    .player-right {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 150px;
      justify-content: flex-end;
    }
    .volume-bar { width: 60px; height: 4px; background-color: #3e3e42; border-radius: 2px; }
    .volume-fill { width: 70%; height: 100%; background-color: #b5b5b5; border-radius: 2px; }
  </style>
</head>
<body>

  <!-- ВЕРХНЯЯ ЧАСТЬ: САЙДБАР + КОНТЕНТ -->
  <div class="main-container">
    
    <!-- ЛЕВАЯ БОКОВАЯ ПАНЕЛЬ (САЙДБАР) -->
    <aside class="sidebar">
      
      <!-- Секция: Библиотека -->
      <div class="sidebar-section">
        <div class="sidebar-title">Библиотека</div>
        <a class="sidebar-item active"><i class="fas fa-compact-disc"></i> Альбомы</a>
        <a class="sidebar-item"><i class="fas fa-microphone"></i> Исполнители</a>
        <a class="sidebar-item"><i class="fas fa-music"></i> Все треки</a>
      </div>

      <!-- Секция: Плейлисты и Лайки -->
      <div class="sidebar-section">
        <div class="sidebar-title">Плейлисты</div>
        <a class="sidebar-item"><i class="fas fa-heart" style="color: #e74c3c;"></i> Понравившиеся</a>
        <a class="sidebar-item"><i class="fas fa-star" style="color: #f1c40f;"></i> Избранное</a>
        <a class="sidebar-item"><i class="fas fa-clock"></i> Недавние</a>
      </div>

      <!-- Секция: Настройки -->
      <div class="sidebar-section">
        <div class="sidebar-title">Сервис</div>
        <a class="sidebar-item"><i class="fas fa-sliders"></i> Эквалайзер</a>
        <a class="sidebar-item"><i class="fas fa-gear"></i> Настройки плеера</a>
      </div>

    </aside>

    <!-- ЦЕНТРАЛЬНАЯ ЗОНА: АЛЬБОМЫ -->
    <main class="content-view">
      <h2 class="content-title">Альбомы библиотеки</h2>
      
      <div class="albums-grid">
        <!-- Карточка 1 -->
        <div class="album-card">
          <div class="album-cover"><i class="fas fa-record-vinyl"></i></div>
          <div class="album-name">Riders on the Storm</div>
          <div class="album-artist">The Doors</div>
        </div>
        <!-- Карточка 2 -->
        <div class="album-card">
          <div class="album-cover"><i class="fas fa-record-vinyl"></i></div>
          <div class="album-name">Abbey Road</div>
          <div class="album-artist">The Beatles</div>
        </div>
        <!-- Карточка 3 -->
        <div class="album-card">
          <div class="album-cover"><i class="fas fa-record-vinyl"></i></div>
          <div class="album-name">The Dark Side of the Moon</div>
          <div class="album-artist">Pink Floyd</div>
        </div>
        <!-- Карточка 4 -->
        <div class="album-card">
          <div class="album-cover"><i class="fas fa-record-vinyl"></i></div>
          <div class="album-name">Back in Black</div>
          <div class="album-artist">AC/DC</div>
        </div>
        <!-- Карточка 5 -->
        <div class="album-card">
          <div class="album-cover"><i class="fas fa-record-vinyl"></i></div>
          <div class="album-name">Nevermind</div>
          <div class="album-artist">Nirvana</div>
        </div>
      </div>
    </main>

  </div>

  <!-- НИЖНЯЯ ПАНЕЛЬ: АУДИОПЛЕЕР -->
  <footer class="musicbee-player">
    
    <!-- Лево: Кнопки управления треками -->
    <div class="player-left">
      <button title="Предыдущий трек"><i class="fas fa-step-backward"></i></button>
      
      <!-- Кнопка Play/Pause без JS на CSS-хаке -->
      <input type="checkbox" id="play-trigger">
      <label for="play-trigger" class="btn-play-label" title="Воспроизвести / Пауза">
        <i class="fas fa-play"></i>
        <i class="fas fa-pause"></i>
      </label>
      
      <button title="Следующий трек"><i class="fas fa-step-forward"></i></button>
    </div>

    <!-- Центр: Название текущей песни + Прогресс-бар + Лайк -->
    <div class="player-center">
      <div class="track-meta">
        <span class="track-title">Riders on the Storm</span>