redgifs-video-downloader/popup.html

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RedGifs Video Downloader</title>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <main class="shell">
      <header>
        <div class="mark">RG</div>
        <div class="header-copy">
          <h1>RedGifs Video Downloader</h1>
          <p>Прямая загрузка без аккаунта и телеметрии</p>
        </div>
        <button id="settingsButton" class="settings-button" type="button" title="Настройки" aria-label="Открыть настройки" aria-expanded="false">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.09a2 2 0 0 1 1 1.74v.5a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z"/>
            <circle cx="12" cy="12" r="3"/>
          </svg>
        </button>
      </header>

      <section id="settingsPanel" class="settings-panel hidden" aria-label="Настройки сохранения">
        <div class="settings-panel-head">
          <div>
            <h2>Настройки сохранения</h2>
            <p>Применяются ко всем новым загрузкам</p>
          </div>
        </div>

        <label class="settings-field-label" for="baseFolder">Подпапка внутри «Загрузок»</label>
        <input id="baseFolder" class="settings-text-input" type="text" maxlength="100" placeholder="RedGifs" autocomplete="off">
        <p class="settings-help">Можно использовать вложенный путь, например <code>Видео/RedGifs</code>. Корневая папка задаётся в Chrome.</p>

        <label class="settings-check-row">
          <input id="groupByProfile" type="checkbox">
          <span>
            <strong>Группировать по профилям</strong>
            <small>Создавать подпапку с именем автора ролика.</small>
          </span>
        </label>

        <label class="settings-check-row">
          <input id="saveAs" type="checkbox">
          <span>
            <strong>Всегда спрашивать место сохранения</strong>
            <small>Chrome покажет системный диалог для каждого файла.</small>
          </span>
        </label>

        <div class="settings-preview">
          <span>Пример пути</span>
          <strong id="settingsPathPreview">Загрузки/RedGifs/profile/video.mp4</strong>
        </div>

        <div class="settings-form-actions">
          <button id="settingsResetButton" class="settings-secondary" type="button">По умолчанию</button>
          <button id="settingsSaveButton" class="settings-primary" type="button">Сохранить</button>
        </div>
        <div id="settingsStatus" class="settings-status" aria-live="polite"></div>
      </section>

      <button id="alternativeToggle" class="alternative-toggle" type="button" aria-expanded="false">
        <span class="alternative-icon">⇄</span>
        <span class="alternative-label">Активировать альтернативный способ загрузки</span>
        <span class="alternative-chevron">⌄</span>
      </button>

      <section class="diagnostic-tools">
        <button id="diagnosticButton" class="diagnostic-button" type="button">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3h8l1 3h3v14H4V6h3l1-3Z"/><circle cx="12" cy="13" r="4"/></svg>
          <span>Скачать диагностический лог</span>
        </button>
        <p id="diagnosticStatus" class="diagnostic-status"></p>
      </section>

      <section id="alternativePanel" class="alternative-panel hidden">
        <label class="field-label" for="urlInput">Открытая страница RedGifs</label>
        <div class="input-row">
          <input id="urlInput" type="url" placeholder="https://www.redgifs.com/users/..." autocomplete="off">
          <button id="resolveButton" class="primary" type="button">Сканировать</button>
        </div>

        <div id="status" class="status" aria-live="polite">Откройте профиль или ленту RedGifs — расширение найдёт видимые ролики.</div>

        <section id="collection" class="collection hidden">
          <div class="collection-head">
            <h2 id="collectionTitle">Видимые ролики</h2>
            <span id="collectionCount"></span>
          </div>
          <div id="collectionItems" class="collection-items"></div>
          <p class="collection-hint">Нужного ролика нет? Закройте popup, прокрутите профиль ниже и откройте расширение снова.</p>
        </section>

        <section id="result" class="result hidden">
          <img id="thumbnail" class="thumbnail hidden" alt="">
          <div class="media-copy">
            <h2 id="mediaTitle"></h2>
            <div id="formats" class="formats"></div>
          </div>
        </section>

        <section id="progressCard" class="progress-card hidden">
          <div class="progress-head">
            <span id="progressLabel">Подготовка…</span>
            <span id="progressValue">0%</span>
          </div>
          <div class="progress-track">
            <div id="progressBar" class="progress-bar"></div>
          </div>
        </section>
      </section>

      <footer id="saveDestination">Определяю путь сохранения…</footer>
    </main>
    <script src="popup.js"></script>
  </body>
</html>