fpov-exchange/trade-hub/frontend/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Star Citizen Inventory</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <div class="header-inner">
      <div class="brand">
        <h1>STAR CITIZEN <span>INVENTORY</span></h1>
        <p class="subtitle">Item catalog from scunpacked game data</p>
      </div>
      <div class="header-right">
        <div class="header-status">
          <div id="api-status" class="status-pill checking">CHECKING API…</div>
          <div id="stats-line" class="stats-line">Loading counts…</div>
        </div>
        <div class="account-bar" id="account-bar"></div>
      </div>
    </div>
  </header>

  <nav class="tabs" id="category-tabs">
    <button class="tab active" data-view="catalog" data-category="">All Items</button>
    <button class="tab" data-view="catalog" data-category="ships">Ships</button>
    <button class="tab" data-view="catalog" data-category="ship-items">Ship Equipment</button>
    <button class="tab" data-view="catalog" data-category="fps-items">FPS Items</button>
    <button class="tab tab-mine" id="tab-mine" data-view="mine">My Inventory</button>
  </nav>

  <div id="catalog-view">
    <section class="controls">
      <input type="search" id="search-input" placeholder="Search name or class name…" autocomplete="off">
      <select id="manufacturer-select">
        <option value="">All manufacturers</option>
      </select>
      <input type="text" id="type-input" placeholder="Type (e.g. WeaponPersonal)">
      <input type="number" id="size-input" placeholder="Size" min="0" max="12">
      <button id="reset-filters" class="btn-secondary">Reset</button>
    </section>

    <main>
      <div id="error-banner" class="error-banner hidden"></div>
      <div id="loading" class="loading">Loading inventory…</div>
      <div id="empty-state" class="empty-state hidden">
        <p>No items match your filters.</p>
        <p class="hint">Try clearing the search or resetting the filters.</p>
      </div>
      <div id="results-grid" class="results-grid"></div>

      <div class="pagination" id="pagination">
        <button id="prev-page" class="btn-secondary">&larr; Prev</button>
        <span id="page-info">Page 1 of 1</span>
        <button id="next-page" class="btn-secondary">Next &rarr;</button>
      </div>
    </main>
  </div>

  <section id="inventory-view" class="hidden">
    <div class="inventory-controls">
      <input type="search" id="inv-search" placeholder="Search my inventory…" autocomplete="off">
      <select id="inv-category">
        <option value="">All categories</option>
        <option value="ships">Ships</option>
        <option value="ship-items">Ship Equipment</option>
        <option value="fps-items">FPS Items</option>
      </select>
      <select id="inv-sort" aria-label="Sort inventory">
        <option value="name">Sort: Name</option>
        <option value="category">Sort: Category</option>
        <option value="quantity">Sort: Quantity</option>
        <option value="updated">Sort: Recently updated</option>
      </select>
    </div>
    <div id="inv-summary" class="inv-summary"></div>
    <div id="inv-empty" class="empty-state hidden">
      <p>Your inventory is empty.</p>
      <p class="hint">Browse the catalog and use “Add to my inventory” on any item.</p>
    </div>
    <div id="inv-table-wrap" class="inv-table-wrap hidden">
      <table class="inv-table">
        <thead>
          <tr>
            <th>Item</th>
            <th>Category</th>
            <th>Qty</th>
            <th>Notes</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="inv-tbody"></tbody>
      </table>
    </div>
  </section>

  <footer class="site-footer">
    <p>Data source:
      <a href="https://github.com/richardthombs/scunpacked" target="_blank" rel="noopener noreferrer">scunpacked</a>
      — unofficial Star Citizen fansite content, not affiliated with Cloud Imperium Games.
    </p>
  </footer>

  <div id="modal-backdrop" class="modal-backdrop hidden">
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <button class="modal-close" id="modal-close" aria-label="Close">&times;</button>
      <h2 id="modal-title">Item</h2>
      <div id="modal-body"></div>
    </div>
  </div>

  <div id="auth-backdrop" class="modal-backdrop hidden">
    <div class="modal modal-narrow" role="dialog" aria-modal="true" aria-labelledby="auth-title">
      <button class="modal-close" id="auth-close" aria-label="Close">&times;</button>
      <h2 id="auth-title">Log in</h2>
      <form id="auth-form" class="auth-form" novalidate>
        <label>Username
          <input type="text" id="auth-username" name="username" autocomplete="username"
                 minlength="3" maxlength="32" required>
        </label>
        <label>Password
          <input type="password" id="auth-password" name="password"
                 autocomplete="current-password" minlength="8" maxlength="128" required>
        </label>
        <p id="auth-error" class="auth-error" role="alert"></p>
        <button type="submit" id="auth-submit" class="btn-primary">Log in</button>
      </form>
      <p class="auth-switch">
        <button type="button" id="auth-toggle" class="btn-link">Need an account? Register</button>
      </p>
    </div>
  </div>

  <div id="toast" class="toast hidden" role="status"></div>

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