ddc/web/static/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#16181d">
  <title>DDC</title>
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/style.css">
  <script src="/js/theme.js"></script>
  <script type="module" src="/js/app.js"></script>
</head>
<body>
  <section id="login-view" class="login-view" hidden>
    <form id="login-form" class="card login-card">
      <div class="login-brand">
        <span class="brand-mark">DDC</span>
        <p class="muted">Direct Download Client</p>
      </div>
      <label class="field">
        <span>Username</span>
        <input name="username" autocomplete="username" autocapitalize="off" required>
      </label>
      <label class="field">
        <span>Password</span>
        <input name="password" type="password" autocomplete="current-password" required>
      </label>
      <button type="submit" class="primary block">Sign in</button>
      <p id="login-error" class="error" role="alert"></p>
    </form>
  </section>

  <div id="app-view" class="app" hidden>
    <header class="topbar">
      <div class="topbar-inner">
        <span class="brand-mark">DDC</span>
        <span id="disk-status" class="chip"></span>
        <div class="topbar-actions">
          <button id="settings-button" type="button" class="ghost">Settings</button>
          <button id="logout-button" type="button" class="ghost">Sign out</button>
        </div>
      </div>
    </header>

    <main class="content">
      <section class="card">
        <h2>New download</h2>
        <form id="download-form" class="download-form">
          <textarea id="download-urls" rows="2" placeholder="https://example.com/file.zip (one link per line, Ctrl+Enter to start)" autocomplete="off" autocapitalize="off" spellcheck="false" required></textarea>
          <button type="submit" class="primary">Download</button>
        </form>
        <div class="download-options">
          <label class="field">
            <span>File name (optional, single link)</span>
            <input id="download-name" placeholder="Keep the server name" autocomplete="off" autocapitalize="off">
          </label>
          <label class="field">
            <span>Download to</span>
            <select id="download-destination">
              <option value="">Temporary folder (move later)</option>
            </select>
          </label>
          <label class="field">
            <span>Subfolder (optional)</span>
            <input id="download-subfolder" placeholder="Movie Name (2024)" autocomplete="off" disabled>
          </label>
        </div>
        <label class="checkbox">
          <input id="auto-extract" type="checkbox" checked>
          <span>Extract archives automatically</span>
        </label>
        <p id="download-error" class="error" role="alert"></p>
      </section>

      <section class="card">
        <div class="list-toolbar">
          <h2>Downloads</h2>
          <div class="list-toolbar-actions">
            <select id="job-filter" aria-label="Filter downloads">
              <option value="all">All</option>
              <option value="active">Active</option>
              <option value="paused">Paused</option>
              <option value="ready">Ready</option>
              <option value="completed">Completed</option>
              <option value="failed">Failed</option>
            </select>
            <button id="clear-completed-button" type="button" class="ghost small">Clear completed</button>
          </div>
        </div>
        <ul id="job-list" class="job-list"></ul>
        <p id="job-empty" class="empty-state">No downloads yet. Paste a link above to start.</p>
      </section>

      <section id="job-detail" class="card" hidden>
        <div class="detail-header">
          <h2 id="detail-title"></h2>
          <button id="close-detail-button" type="button" class="ghost small">Close</button>
        </div>
        <div id="file-tree" class="file-tree"></div>
        <p id="selection-summary" class="muted small-text"></p>
        <div class="move-controls">
          <label class="field">
            <span>Destination</span>
            <select id="library-select"></select>
          </label>
          <label class="field">
            <span>Subfolder (optional)</span>
            <input id="subfolder-input" placeholder="Movie Name (2024)" autocomplete="off">
          </label>
        </div>
        <label class="checkbox">
          <input id="cleanup-checkbox" type="checkbox" checked>
          <span>Delete remaining temporary files after the move</span>
        </label>
        <button id="move-button" type="button" class="primary block-mobile" disabled>Move</button>
        <p id="action-error" class="error" role="alert"></p>
      </section>

      <details id="history-card" class="card history-card">
        <summary>
          <span id="history-title">History</span>
        </summary>
        <ul id="history-list" class="history-list"></ul>
        <p id="history-empty" class="empty-state">Moved files will be listed here.</p>
        <button id="clear-history-button" type="button" class="ghost small">Clear history</button>
      </details>
    </main>
  </div>

  <dialog id="settings-dialog" class="sheet">
    <form id="settings-form" class="sheet-form">
      <header class="sheet-header">
        <h2>Settings</h2>
        <button id="settings-close" type="button" class="ghost small">Close</button>
      </header>

      <div class="sheet-body">
        <fieldset class="settings-group">
          <legend>Downloads</legend>
          <div class="settings-grid">
            <label class="field">
              <span>Parallel downloads</span>
              <input id="setting-concurrent" type="number" inputmode="numeric" min="1" max="10" required>
            </label>
            <label class="field">
              <span>Connections per download</span>
              <input id="setting-connections" type="number" inputmode="numeric" min="1" max="16" required>
            </label>
            <label class="field">
              <span>Keep free on disk (GB)</span>
              <input id="setting-min-free" type="number" inputmode="numeric" min="0" required>
            </label>
          </div>
          <label class="field">
            <span>Allowed ports</span>
            <input id="setting-ports" placeholder="80, 443 or * for any" autocomplete="off">
          </label>
        </fieldset>

        <fieldset class="settings-group">
          <legend>Defaults</legend>
          <label class="checkbox">
            <input id="setting-auto-extract" type="checkbox">
            <span>Extract archives automatically</span>
          </label>
          <label class="checkbox">
            <input id="setting-cleanup" type="checkbox">
            <span>Delete temporary files after a move</span>
          </label>
        </fieldset>

        <fieldset class="settings-group">
          <legend>Download paths</legend>
          <label class="field">
            <span>One folder per line, inside a destination root. Missing folders are created on first use.</span>
            <textarea id="setting-download-paths" rows="4" placeholder="/media/blob/TeaNet/Plex/Movies/Kids" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea>
          </label>
        </fieldset>

        <fieldset class="settings-group">
          <legend>Appearance</legend>
          <label class="field">
            <span>Theme (this browser)</span>
            <select id="setting-theme">
              <option value="system">System</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </select>
          </label>
          <label class="checkbox">
            <input id="setting-notifications" type="checkbox">
            <span>Notify when downloads finish (this browser)</span>
          </label>
        </fieldset>

        <fieldset class="settings-group">
          <legend>Server</legend>
          <dl class="info-list">
            <dt>Download folder</dt>
            <dd id="info-download-dir" class="mono"></dd>
            <dt>Destination roots</dt>
            <dd id="info-roots"></dd>
          </dl>
        </fieldset>

        <p id="settings-error" class="error" role="alert"></p>
      </div>

      <footer class="sheet-footer">
        <button id="settings-cancel" type="button" class="ghost">Cancel</button>
        <button type="submit" class="primary">Save</button>
      </footer>
    </form>
  </dialog>
</body>
</html>