navidrome-music-sync/app/templates/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navidrome Music Sync</title>
  <link rel="stylesheet" href="static/style.css">
  <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@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="app-container">
    <header class="header">
      <div class="logo-group">
        <span class="logo-icon">🎵</span>
        <div>
          <h1>Navidrome Music Sync</h1>
          <p class="subtitle">Поиск, импорт и синхронизация музыки в Navidrome</p>
        </div>
      </div>
      <div class="status-badges">
        <span class="badge badge-success" id="yandexStatus">Яндекс Музыка: Активна</span>
        <span class="badge badge-info" id="tracksCount">Загружено: 0</span>
      </div>
    </header>

    <main class="main-content">
      <!-- Search & Input Card -->
      <section class="card input-card">
        <h2>🔍 Поиск и импорт музыки</h2>
        <p class="card-desc">Введите название трека/артиста (например: <b>Booker - Время колокольчиков</b>) или вставьте прямую ссылку (Яндекс, Spotify, Apple, YouTube):</p>
        
        <form id="downloadForm" class="download-form">
          <div class="input-wrapper">
            <input type="text" id="urlInput" placeholder="Название трека или https://..." required autocomplete="off">
            <button type="submit" id="submitBtn" class="btn btn-primary">Найти / Загрузить</button>
          </div>
        </form>

        <div class="quick-actions">
          <span>Быстрые действия:</span>
          <button id="syncLikesBtn" class="btn btn-secondary">
            ❤️ Синхронизировать «Мне нравится» (Яндекс)
          </button>
        </div>
      </section>

      <!-- Search Results Card (Hidden by default) -->
      <section class="card search-card" id="searchCard" style="display: none;">
        <div class="search-header">
          <h2>🎯 Результаты поиска: <span id="searchQueryLabel"></span></h2>
          <button id="closeSearchBtn" class="btn-close" title="Закрыть поиск">&times;</button>
        </div>

        <div id="searchLoading" class="search-loading" style="display: none;">
          <div class="spinner"></div> Ищем на Яндекс Музыке, SoundCloud, YouTube и Apple Music...
        </div>

        <!-- Search Tracks -->
        <div class="search-section" id="searchTracksSection">
          <h3>🎵 Найденные треки</h3>
          <div class="search-tracks-list" id="searchTracksList"></div>
        </div>

        <!-- Search Albums -->
        <div class="search-section" id="searchAlbumsSection" style="margin-top: 1.5rem;">
          <h3>💿 Альбомы</h3>
          <div class="search-albums-grid" id="searchAlbumsList"></div>
        </div>
      </section>

      <!-- Active Tasks -->
      <section class="card tasks-card">
        <h2>⚡ Очередь задач</h2>
        <div id="tasksList" class="tasks-list">
          <p class="empty-state">Нет активных загрузок</p>
        </div>
      </section>

      <!-- History -->
      <section class="card history-card">
        <h2>📜 Недавно загруженные треки</h2>
        <div class="table-container">
          <table class="tracks-table">
            <thead>
              <tr>
                <th>Сервис</th>
                <th>Исполнитель</th>
                <th>Трек</th>
                <th>Альбом</th>
                <th>Дата</th>
              </tr>
            </thead>
            <tbody id="historyBody">
              <tr>
                <td colspan="5" class="empty-state">Пока нет загрузок</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </main>

    <footer class="footer">
      <p>Navidrome Music Sync • Интегрировано с <a href="https://music.qpid.pro" target="_blank">music.qpid.pro</a></p>
    </footer>
  </div>

  <!-- Floating Audio Preview Player -->
  <div id="audioPlayerBar" class="audio-player-bar" style="display: none;">
    <div class="player-track-info">
      <img id="playerCover" class="player-cover" src="" alt="Cover" />
      <div class="player-meta">
        <div class="player-title-row">
          <span id="playerTitle" class="player-title"></span>
          <span id="playerExplicitBadge" class="badge"></span>
        </div>
        <span id="playerArtist" class="player-artist"></span>
      </div>
    </div>
    
    <div class="player-controls-container">
      <audio id="globalAudioPlayer" controls preload="metadata"></audio>
    </div>

    <div class="player-actions">
      <button id="playerImportBtn" class="btn-sm btn-import">📥 В Navidrome</button>
      <button id="playerDownloadBtn" class="btn-sm btn-direct-dl">💾 Скачать</button>
      <button id="playerCloseBtn" class="btn-player-close" title="Закрыть плеер">&times;</button>
    </div>
  </div>

  <script src="static/app.js"></script>
</body>
</html>