working with login and building inventory

This commit is contained in:
2026-11-12 11:40:31 -07:00
parent d11e5e70c7
commit 0a93925e11
45 changed files with 2389 additions and 77 deletions

View File

@@ -13,46 +13,83 @@
<h1>STAR CITIZEN <span>INVENTORY</span></h1>
<p class="subtitle">Item catalog from scunpacked game data</p>
</div>
<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 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-category="">All Items</button>
<button class="tab" data-category="ships">Ships</button>
<button class="tab" data-category="ship-items">Ship Equipment</button>
<button class="tab" data-category="fps-items">FPS Items</button>
<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>
<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>
<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>
</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>
<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>
<footer class="site-footer">
<p>Data source:
<a href="https://github.com/richardthombs/scunpacked" target="_blank" rel="noopener noreferrer">scunpacked</a>
@@ -68,6 +105,30 @@
</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>