created new role
This commit is contained in:
boxswapper
244
roles/trade_hub/files/trade-hub/frontend/src/index.html
Normal file
244
roles/trade_hub/files/trade-hub/frontend/src/index.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FPOV Logistics Readiness</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<div class="brand">
|
||||
<h1>Free People of the Verse <span>NEXUS</span></h1>
|
||||
<p class="subtitle">Network for Exchange of Xeno and Utility Supplies</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" data-view="catalog" data-category="commodities">Commodities</button>
|
||||
<button class="tab tab-mine" id="tab-mine" data-view="mine">My Inventory</button>
|
||||
<button class="tab" id="tab-available" data-view="available">Available</button>
|
||||
<button class="tab" id="tab-orders" data-view="orders">Orders</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">← Prev</button>
|
||||
<span id="page-info">Page 1 of 1</span>
|
||||
<button id="next-page" class="btn-secondary">Next →</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>
|
||||
<option value="commodities">Commodities</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>Quality</th>
|
||||
<th>Notes</th>
|
||||
<th>Visibility</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="inv-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="available-view" class="hidden">
|
||||
<div class="inventory-controls">
|
||||
<input type="search" id="avail-search" placeholder="Search item or pilot…" autocomplete="off">
|
||||
<select id="avail-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>
|
||||
<option value="commodities">Commodities</option>
|
||||
</select>
|
||||
<select id="avail-sort" aria-label="Sort available items">
|
||||
<option value="updated">Sort: Recently updated</option>
|
||||
<option value="name">Sort: Name</option>
|
||||
<option value="category">Sort: Category</option>
|
||||
<option value="quantity">Sort: Quantity</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="avail-summary" class="inv-summary"></div>
|
||||
<div id="avail-empty" class="empty-state hidden">
|
||||
<p>Nothing is being offered right now.</p>
|
||||
<p class="hint">Mark items as available in My Inventory to list them here.</p>
|
||||
</div>
|
||||
<div id="avail-table-wrap" class="inv-table-wrap hidden">
|
||||
<table class="inv-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Category</th>
|
||||
<th>Qty</th>
|
||||
<th>Quality</th>
|
||||
<th>Offered by</th>
|
||||
<th>Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="avail-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="orders-view" class="hidden">
|
||||
<div class="inventory-controls">
|
||||
<input type="search" id="order-search" placeholder="Search item or pilot…" autocomplete="off">
|
||||
<select id="order-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>
|
||||
<option value="commodities">Commodities</option>
|
||||
</select>
|
||||
<select id="order-status" aria-label="Filter by order status">
|
||||
<option value="">All statuses</option>
|
||||
<option value="open">Open</option>
|
||||
<option value="fulfilled">Fulfilled</option>
|
||||
</select>
|
||||
<select id="order-sort" aria-label="Sort orders">
|
||||
<option value="updated">Sort: Recently updated</option>
|
||||
<option value="name">Sort: Name</option>
|
||||
<option value="category">Sort: Category</option>
|
||||
<option value="quantity">Sort: Quantity</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="order-summary" class="inv-summary"></div>
|
||||
<div id="order-empty" class="empty-state hidden">
|
||||
<p>No orders yet.</p>
|
||||
<p class="hint">Log in, open any catalog item and use “Request this item” to set it up here.</p>
|
||||
</div>
|
||||
<div id="order-table-wrap" class="inv-table-wrap hidden">
|
||||
<table class="inv-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Category</th>
|
||||
<th>Qty</th>
|
||||
<th>Quality</th>
|
||||
<th>Notes</th>
|
||||
<th>Requested by</th>
|
||||
<th>Status</th>
|
||||
<th>Updated</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="order-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">×</button>
|
||||
<h2 id="modal-title">Item</h2>
|
||||
<div id="modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="confirm-backdrop" class="modal-backdrop hidden">
|
||||
<div class="modal modal-narrow" role="alertdialog" aria-modal="true"
|
||||
aria-labelledby="confirm-title" aria-describedby="confirm-message">
|
||||
<h2 id="confirm-title">Remove item</h2>
|
||||
<p id="confirm-message" class="modal-desc"></p>
|
||||
<div class="modal-actions">
|
||||
<button type="button" id="confirm-cancel" class="btn-secondary">Cancel</button>
|
||||
<button type="button" id="confirm-ok" class="btn-danger">Remove</button>
|
||||
</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">×</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>
|
||||
Reference in New Issue
Block a user