← back to Astek Import Viewer

public/index.html

63 lines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Astek Import Viewer — Curation</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="/nav-agent/nav-agent.css"><!-- nav-agent -->
</head>
<body>
  <header class="topbar">
    <div class="topbar-row">
      <h1>Astek Import Viewer <span class="sub">— pick products to import</span></h1>
      <div class="counts">
        <span id="selCount" class="pill pill-sel">0 selected</span>
        <span id="shownCount" class="pill">0 shown</span>
        <span id="totalCount" class="pill">0 total</span>
      </div>
    </div>

    <div class="controls">
      <input id="search" class="search" type="search"
             placeholder="Search all fields (space = AND)…" autocomplete="off" />

      <div class="ctl-group">
        <label for="sort">Sort</label>
        <select id="sort">
          <option value="newest">Newest</option>
          <option value="title">Title A→Z</option>
          <option value="pattern">Pattern A→Z</option>
          <option value="color">Color A→Z</option>
          <option value="sku">SKU A→Z</option>
          <option value="price_asc">Price ↑</option>
          <option value="price_desc">Price ↓</option>
        </select>
      </div>

      <div class="ctl-group">
        <label for="density">Density</label>
        <input id="density" type="range" min="2" max="8" step="1" value="4" />
        <span id="densityVal" class="mono">4</span>
      </div>

      <div class="ctl-group actions">
        <button id="selectAll" class="btn">Select all filtered</button>
        <button id="clearSel" class="btn btn-ghost">Clear selection</button>
        <a id="exportBtn" class="btn btn-accent" href="/api/export">Export selected</a>
      </div>
    </div>

    <div id="activeFilters" class="active-filters" hidden></div>
  </header>

  <main>
    <div id="grid" class="grid"></div>
    <div id="empty" class="empty" hidden>No products match your filters.</div>
  </main>

  <script src="app.js"></script>
  <script src="/nav-agent/nav-agent.js" defer></script><!-- nav-agent -->
</body>
</html>