Ship K-design admin with multi-channel support and polish.
continuous-integration/drone/push Build is passing

Replace placeholder admin pages with the design system, add analytics/customers/categories/inventory/settings, channel pricing and order sources, plus skeleton loaders and clean motion.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Rafał MiczekandCursor committed 2026-10-17 13:46:21 +02:00
1 parent 1890b50e0d
commit da85370936
102 files changed
+20282 -2153

No files matched your search

+51
View File
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Login — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="login-page">
<div class="card login-card">
<div class="login-brand">
<span class="mark" style="width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: grid; place-items: center"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
iLED Admin
</div>
<p class="login-sub">Sign in to manage catalog, orders, and marketing.</p>
<!-- Demo error: remove class hidden to show -->
<div class="form-error mb-16" id="login-error" hidden>
Invalid email or password. Admin role required.
</div>
<form class="stack" action="02-dashboard.html" method="get">
<div class="field">
<label for="email">Email</label>
<input class="input" id="email" name="email" type="email" placeholder="admin@iled.pl" value="admin@iled.pl" required />
</div>
<div class="field">
<label for="password">Password</label>
<input class="input" id="password" name="password" type="password" placeholder="••••••••" value="Admin123!" required />
</div>
<button class="btn btn-primary w-full" type="submit" style="height: 42px; margin-top: 4px">
Sign in
</button>
<button class="btn btn-ghost w-full" type="button" id="demo-error">
Demo: show error state
</button>
</form>
<p class="field-hint" style="margin-top: 20px; text-align: center">
<a href="index.html">← Mock gallery</a>
</p>
</div>
</div>
<script>
document.getElementById("demo-error").addEventListener("click", function () {
document.getElementById("login-error").hidden = false;
});
</script>
<script src="assets/admin-k.js"></script>
</body>
</html>
+291
View File
@@ -0,0 +1,291 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dashboard — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link is-active" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale" aria-label="Locale">
<button type="button" class="is-active">PL</button>
<button type="button">EN</button>
<button type="button">DE</button>
<button type="button">CS</button>
</div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>Dashboard</h1>
<p class="page-purpose">What needs attention today — orders, stock, and reviews.</p>
</div>
<div class="page-actions">
<a class="btn btn-secondary" href="05-orders.html">View orders</a>
<a class="btn btn-primary" href="05-orders.html">Open pick list</a>
</div>
</div>
<div class="card card-pad hidden" data-demo-loading>
<div class="stack">
<div class="skeleton" style="width: 40%"></div>
<div class="skeleton" style="width: 70%"></div>
<div class="skeleton" style="width: 55%"></div>
</div>
</div>
<div class="state-box card hidden" data-demo-empty>
<strong>All clear</strong>
No alerts right now. New orders and stock issues will appear here.
</div>
<div data-demo-content>
<div class="alert-strip">
<a class="alert-pill danger" href="12-inventory.html">
<span class="dot" style="background: var(--danger)"></span>
3 low-stock SKUs
</a>
<a class="alert-pill warn" href="05-orders.html">
<span class="dot" style="background: var(--warning)"></span>
5 awaiting payment
</a>
<a class="alert-pill info" href="09-reviews.html">
<span class="dot" style="background: var(--info)"></span>
4 reviews to moderate
</a>
<a class="alert-pill warn" href="05-orders.html">
<span class="dot" style="background: var(--warning)"></span>
2 labels not generated
</a>
</div>
<div class="grid grid-4 mb-16">
<a class="card kpi" href="05-orders.html">
<div class="kpi-label">Orders today</div>
<div class="kpi-value">12</div>
<div class="kpi-meta">+3 vs yesterday</div>
</a>
<div class="card kpi">
<div class="kpi-label">Revenue today</div>
<div class="kpi-value">4&nbsp;280&nbsp;zł</div>
<div class="kpi-meta">AOV 356,67 zł</div>
</div>
<a class="card kpi" href="05-orders.html">
<div class="kpi-label">Pending fulfillment</div>
<div class="kpi-value">7</div>
<div class="kpi-meta">Paid · ready to pick</div>
</a>
<a class="card kpi" href="12-inventory.html">
<div class="kpi-label">Low stock</div>
<div class="kpi-value">3</div>
<div class="kpi-meta">Threshold ≤ 5</div>
</a>
</div>
<div class="grid grid-2 mb-16">
<div class="card">
<div class="card-head">
<h2>Needs action — orders</h2>
<a class="btn btn-ghost btn-sm" href="05-orders.html">All</a>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th>Order</th>
<th>Status</th>
<th>Handled by</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell-strong">#ILED-1042</td>
<td><span class="badge badge-warning">Pending payment</span></td>
<td class="cell-muted">—</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
<tr>
<td class="cell-strong">#ILED-1041</td>
<td><span class="badge badge-info">Paid · pick</span></td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm">AK</span>
<span class="name">Anna K.</span>
</span>
</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
<tr>
<td class="cell-strong">#ILED-1039</td>
<td><span class="badge badge-accent">Label missing</span></td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm avatar-muted">MW</span>
<span class="name">Marek W.</span>
</span>
</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
<tr>
<td class="cell-strong">#ILED-1037</td>
<td><span class="badge badge-info">Processing</span></td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm">AK</span>
<span class="name">Anna K.</span>
</span>
</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-head">
<h2>Low stock</h2>
<a class="btn btn-ghost btn-sm" href="12-inventory.html">Inventory</a>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th>SKU</th>
<th>Qty</th>
<th>Threshold</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="cell-strong">Lampa LED Black</div>
<div class="cell-muted">LED-BLK-01</div>
</td>
<td><span class="badge badge-danger">2</span></td>
<td class="cell-muted">5</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="12-inventory.html">Restock</a></td>
</tr>
<tr>
<td>
<div class="cell-strong">Lampa LED Gold</div>
<div class="cell-muted">LED-GLD-01</div>
</td>
<td><span class="badge badge-warning">4</span></td>
<td class="cell-muted">5</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="12-inventory.html">Restock</a></td>
</tr>
<tr>
<td>
<div class="cell-strong">LED Strip 5m</div>
<div class="cell-muted">LED-STR-5</div>
</td>
<td><span class="badge badge-danger">1</span></td>
<td class="cell-muted">5</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="12-inventory.html">Restock</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="grid grid-2">
<div class="card">
<div class="card-head">
<h2>Orders — last 14 days</h2>
<span class="cell-muted">Count</span>
</div>
<div class="card-pad">
<div class="chart-canvas-wrap">
<canvas id="ordersChart" aria-label="Orders last 14 days"></canvas>
</div>
</div>
</div>
<div class="card">
<div class="card-head">
<h2>Pending reviews</h2>
<a class="btn btn-ghost btn-sm" href="09-reviews.html">Moderate</a>
</div>
<div class="section-block">
<div class="flex gap-12 items-center">
<div class="thumb"></div>
<div style="flex: 1; min-width: 0">
<div class="cell-strong">Lampa LED Black</div>
<div class="stars">★★★★☆</div>
<div class="cell-muted">“Światło jest świetne, montaż łatwy…”</div>
</div>
<a class="btn btn-primary btn-sm" href="09-reviews.html">Review</a>
</div>
</div>
<div class="section-block">
<div class="flex gap-12 items-center">
<div class="thumb"></div>
<div style="flex: 1; min-width: 0">
<div class="cell-strong">LED Strip 5m</div>
<div class="stars">★★★☆☆</div>
<div class="cell-muted">“Kolory OK, instrukcja mogłaby…”</div>
</div>
<a class="btn btn-primary btn-sm" href="09-reviews.html">Review</a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<script src="assets/admin-k.js"></script>
</body>
</html>
+276
View File
@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Products — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link is-active" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content" data-tabs-host>
<div class="page-header">
<div>
<h1>Products</h1>
<p class="page-purpose">Manage sellable catalog, warehouses, and product groups.</p>
</div>
<div class="page-actions">
<a class="btn btn-secondary" href="11-categories.html">Categories</a>
<a class="btn btn-primary" href="04-product-form.html">Add product</a>
</div>
</div>
<div class="tabs" data-tabs role="tablist">
<button type="button" class="tab is-active" data-tab="products">Products</button>
<button type="button" class="tab" data-tab="warehouses">Warehouses</button>
<button type="button" class="tab" data-tab="groups">Groups</button>
</div>
<div class="tab-panel is-active" data-panel="products">
<div class="card">
<div class="toolbar">
<div class="search-wrap">
<span class="search-icon">⌕</span>
<input class="input" type="search" placeholder="Search name, SKU, EAN…" />
</div>
<select class="select">
<option>All statuses</option>
<option>Active</option>
<option>Inactive</option>
</select>
<select class="select">
<option>All groups</option>
<option>Desk lamps</option>
<option>Strips</option>
</select>
<label class="flex items-center gap-8" style="font-size: 13px; color: var(--text-secondary)">
<input type="checkbox" class="check" checked /> Low stock
</label>
<select class="select">
<option>Sort: Name</option>
<option>Price</option>
<option>Stock</option>
</select>
<div class="toolbar-spacer"></div>
<button type="button" class="btn btn-secondary btn-sm" disabled>Bulk (0)</button>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th><input type="checkbox" class="check" data-select-all /></th>
<th>Product</th>
<th>SKU / EAN</th>
<th>Price</th>
<th>Stock</th>
<th>Reserved</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" /></td>
<td>
<div class="row-product">
<div class="thumb"></div>
<div>
<div class="cell-strong">Lampa LED Black</div>
<div class="cell-muted">Desk lamps · Bestseller</div>
</div>
</div>
</td>
<td><div>LED-BLK-01</div><div class="cell-muted">5901234567890</div></td>
<td class="cell-strong">299,00 zł</td>
<td><span class="badge badge-danger">2</span> <span class="cell-muted">WH1:1 WH2:1</span></td>
<td class="cell-muted">1</td>
<td><span class="badge badge-success">Active</span></td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="04-product-form.html">Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" /></td>
<td>
<div class="row-product">
<div class="thumb"></div>
<div>
<div class="cell-strong">Lampa LED Gold</div>
<div class="cell-muted">Desk lamps</div>
</div>
</div>
</td>
<td><div>LED-GLD-01</div><div class="cell-muted">5901234567891</div></td>
<td class="cell-strong">329,00 zł</td>
<td><span class="badge badge-warning">4</span> <span class="cell-muted">WH1:3 WH2:1</span></td>
<td class="cell-muted">0</td>
<td><span class="badge badge-success">Active</span></td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="04-product-form.html">Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" /></td>
<td>
<div class="row-product">
<div class="thumb"></div>
<div>
<div class="cell-strong">LED Strip 5m</div>
<div class="cell-muted">Strips · New</div>
</div>
</div>
</td>
<td><div>LED-STR-5</div><div class="cell-muted">5901234567892</div></td>
<td class="cell-strong">149,00 zł</td>
<td><span class="badge badge-danger">1</span> <span class="cell-muted">WH1:1</span></td>
<td class="cell-muted">2</td>
<td><span class="badge badge-success">Active</span></td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="04-product-form.html">Edit</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" /></td>
<td>
<div class="row-product">
<div class="thumb"></div>
<div>
<div class="cell-strong">Lampa LED White</div>
<div class="cell-muted">Desk lamps</div>
</div>
</div>
</td>
<td><div>LED-WHT-01</div><div class="cell-muted">5901234567893</div></td>
<td class="cell-strong">289,00 zł</td>
<td>24 <span class="cell-muted">WH1:18 WH2:6</span></td>
<td class="cell-muted">3</td>
<td><span class="badge badge-neutral">Inactive</span></td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="04-product-form.html">Edit</a></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<span>Showing 1–4 of 4</span>
<div class="pagination-btns">
<button type="button" class="btn btn-secondary btn-sm" disabled>Prev</button>
<button type="button" class="btn btn-secondary btn-sm" disabled>Next</button>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="warehouses">
<div class="card">
<div class="card-head">
<h2>Warehouses</h2>
<button type="button" class="btn btn-primary btn-sm">Add warehouse</button>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr><th>Name</th><th>Code</th><th>Address</th><th>Products with stock</th><th></th></tr>
</thead>
<tbody>
<tr>
<td class="cell-strong">Warszawa Central</td>
<td>WH1</td>
<td class="cell-muted">ul. Przykładowa 1, Warszawa</td>
<td>12</td>
<td class="text-right"><button type="button" class="btn btn-secondary btn-sm">Edit</button></td>
</tr>
<tr>
<td class="cell-strong">Kraków Hub</td>
<td>WH2</td>
<td class="cell-muted">ul. Magazynowa 8, Kraków</td>
<td>9</td>
<td class="text-right"><button type="button" class="btn btn-secondary btn-sm">Edit</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-panel" data-panel="groups">
<div class="card">
<div class="card-head">
<h2>Product groups</h2>
<button type="button" class="btn btn-primary btn-sm">Add group</button>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr><th>Name</th><th>Slug</th><th>Products</th><th></th></tr>
</thead>
<tbody>
<tr>
<td class="cell-strong">Desk lamps</td>
<td class="cell-muted">desk-lamps</td>
<td>8</td>
<td class="text-right"><button type="button" class="btn btn-secondary btn-sm">Edit</button></td>
</tr>
<tr>
<td class="cell-strong">Strips</td>
<td class="cell-muted">strips</td>
<td>4</td>
<td class="text-right"><button type="button" class="btn btn-secondary btn-sm">Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="card-pad">
<p class="field-hint" style="margin: 0">
Prefer storefront structure? Manage <a href="11-categories.html">Categories</a> separately.
</p>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+208
View File
@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Edit product — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link is-active" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content" data-tabs-host>
<div class="page-header">
<div>
<h1>Edit product</h1>
<p class="page-purpose">Lampa LED Black · LED-BLK-01 — sectioned editor for faster edits.</p>
</div>
<div class="page-actions">
<a class="btn btn-secondary" href="03-products.html">Cancel</a>
<button type="button" class="btn btn-primary">Save product</button>
</div>
</div>
<div class="tabs" data-tabs role="tablist">
<button type="button" class="tab is-active" data-tab="basics">Basics</button>
<button type="button" class="tab" data-tab="locales">Locales</button>
<button type="button" class="tab" data-tab="media">Media</button>
<button type="button" class="tab" data-tab="stock">Stock</button>
<button type="button" class="tab" data-tab="seo">SEO</button>
</div>
<div class="tab-panel is-active" data-panel="basics">
<div class="card">
<div class="section-block">
<h3>Identity</h3>
<div class="grid grid-2">
<div class="field"><label>Slug</label><input class="input" value="lampa-led-black" /></div>
<div class="field"><label>Model</label><input class="input" value="ILED-BLK" /></div>
<div class="field"><label>Product code</label><input class="input" value="LED-BLK-01" /></div>
<div class="field"><label>EAN</label><input class="input" value="5901234567890" /></div>
</div>
</div>
<div class="section-block">
<h3>Pricing &amp; catalog</h3>
<div class="grid grid-2">
<div class="field"><label>Price (PLN)</label><input class="input" type="number" value="299" /></div>
<div class="field"><label>30-day lowest price</label><input class="input" type="number" value="279" /></div>
<div class="field">
<label>Group</label>
<select class="select"><option>Desk lamps</option><option>Strips</option></select>
</div>
<div class="field">
<label>Category</label>
<select class="select"><option>Lamps › Desk</option><option>Strips › RGB</option></select>
<span class="field-hint">Wired to Categories (new).</span>
</div>
<div class="field"><label>Delivery hours</label><input class="input" type="number" value="48" /></div>
</div>
<div class="flex gap-12 mt-16" style="flex-wrap: wrap">
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> Active</label>
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> Bestseller</label>
<label class="flex items-center gap-8"><input type="checkbox" class="check" /> New</label>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="locales">
<div class="card">
<div class="section-block">
<h3>Polish (PL)</h3>
<div class="stack">
<div class="field"><label>Name</label><input class="input" value="Lampa LED Black" /></div>
<div class="field"><label>Short description</label><textarea class="textarea" style="min-height: 72px">Elegancka lampa biurkowa LED w czarnej obudowie.</textarea></div>
<div class="field"><label>Full description</label><textarea class="textarea">Pełny opis produktu…</textarea></div>
</div>
</div>
<div class="section-block">
<h3>English (EN)</h3>
<div class="stack">
<div class="field"><label>Name</label><input class="input" value="LED Lamp Black" /></div>
<div class="field"><label>Short description</label><textarea class="textarea" style="min-height: 72px">Elegant black LED desk lamp.</textarea></div>
</div>
</div>
<div class="card-pad"><span class="field-hint">DE / CS follow the same pattern (collapsed in mock).</span></div>
</div>
</div>
<div class="tab-panel" data-panel="media">
<div class="card">
<div class="card-head">
<h2>Images</h2>
<button type="button" class="btn btn-primary btn-sm">Upload</button>
</div>
<div class="card-pad">
<div class="grid grid-3">
<div class="card" style="padding: 12px">
<div class="thumb" style="width: 100%; height: 140px; border-radius: 8px"></div>
<div class="field mt-16"><label>Alt text (PL)</label><input class="input" value="Lampa LED Black — widok front" /></div>
<label class="flex items-center gap-8 mt-16"><input type="checkbox" class="check" checked /> Primary</label>
</div>
<div class="card" style="padding: 12px; border-style: dashed">
<div class="state-box" style="padding: 48px 12px">
<strong>Add image</strong>
Drop file or paste URL
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="stock">
<div class="card">
<div class="section-block">
<h3>Per warehouse</h3>
<div class="table-wrap">
<table class="data">
<thead><tr><th>Warehouse</th><th>Quantity</th><th>Reserved</th><th>Available</th></tr></thead>
<tbody>
<tr>
<td class="cell-strong">Warszawa Central (WH1)</td>
<td><input class="input" type="number" value="1" style="width: 100px; height: 32px" /></td>
<td class="cell-muted">1</td>
<td>0</td>
</tr>
<tr>
<td class="cell-strong">Kraków Hub (WH2)</td>
<td><input class="input" type="number" value="1" style="width: 100px; height: 32px" /></td>
<td class="cell-muted">0</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section-block">
<div class="field" style="max-width: 200px">
<label>Low-stock threshold</label>
<input class="input" type="number" value="5" />
<span class="field-hint">Overrides store default from Settings.</span>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="seo">
<div class="card section-block">
<h3>Search &amp; sharing</h3>
<div class="stack">
<div class="field"><label>Meta title (PL)</label><input class="input" value="Lampa LED Black | iLED" /></div>
<div class="field"><label>Meta description (PL)</label><textarea class="textarea" style="min-height: 80px">Kup lampę LED Black w sklepie iLED. Szybka dostawa.</textarea></div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+337
View File
@@ -0,0 +1,337 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Orders — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link is-active" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu">
<svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg>
</button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip" title="Signed in as Anna Kowalska">
<span class="avatar">AK</span>
Anna K.
</div>
</div>
</header>
<main class="content" data-tabs-host>
<div class="page-header">
<div>
<h1>Orders</h1>
<p class="page-purpose">Fulfill and resolve — select many to pick, invoice, or label in one go.</p>
</div>
<div class="page-actions">
<button type="button" class="btn btn-secondary">Export CSV</button>
</div>
</div>
<div class="tabs" data-tabs role="tablist">
<button type="button" class="tab is-active" data-tab="list">List</button>
<button type="button" class="tab" data-tab="pick">Pick list</button>
</div>
<div class="tab-panel is-active" data-panel="list">
<div class="card">
<div class="toolbar">
<div class="search-wrap">
<svg class="ico ico-sm search-icon" aria-hidden="true"><use href="#i-search"></use></svg>
<input class="input" type="search" placeholder="Order #, email…" />
</div>
<select class="select">
<option>All statuses</option>
<option>Pending payment</option>
<option>Paid</option>
<option>Processing</option>
<option>Shipped</option>
</select>
<select class="select">
<option>All payments</option>
<option>Pending</option>
<option>Completed</option>
<option>Failed</option>
</select>
<input class="input" type="month" value="2026-10" style="min-width: 150px" />
<div class="toolbar-spacer"></div>
<select class="select"><option>Sort: Newest</option><option>Total</option><option>Number</option></select>
</div>
<div class="bulk-bar" data-bulk-bar>
<span class="count" data-bulk-count>0 selected</span>
<button type="button" class="btn btn-primary btn-sm">
<svg class="ico" aria-hidden="true"><use href="#i-pick"></use></svg>
Collect / pick
</button>
<button type="button" class="btn btn-secondary btn-sm">
<svg class="ico" aria-hidden="true"><use href="#i-invoice"></use></svg>
Generate invoices
</button>
<button type="button" class="btn btn-secondary btn-sm">
<svg class="ico" aria-hidden="true"><use href="#i-label"></use></svg>
Generate labels
</button>
<span class="cell-muted" style="margin-left: auto">Actions attributed to Anna K.</span>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th><input type="checkbox" class="check" data-select-all aria-label="Select all" /></th>
<th>Order</th>
<th>Customer</th>
<th>Total</th>
<th>Payment</th>
<th>Fulfillment</th>
<th>Handled by</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" aria-label="Select #ILED-1042" /></td>
<td>
<div class="cell-strong">#ILED-1042</div>
<div class="cell-muted">17 Oct 10:24</div>
</td>
<td>anna.kowalska@mail.pl</td>
<td class="cell-strong">299,00 zł</td>
<td><span class="badge badge-warning">Pending</span></td>
<td><span class="badge badge-neutral">—</span></td>
<td class="cell-muted">—</td>
<td class="cell-muted">2h</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" aria-label="Select #ILED-1041" checked /></td>
<td>
<div class="cell-strong">#ILED-1041</div>
<div class="cell-muted">17 Oct 09:01</div>
</td>
<td>jan.nowak@mail.pl</td>
<td class="cell-strong">478,00 zł</td>
<td><span class="badge badge-success">Paid</span></td>
<td><span class="badge badge-info">Ready to pick</span></td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm">AK</span>
<span class="name">Anna K.</span>
</span>
</td>
<td class="cell-muted">3h</td>
<td class="text-right"><a class="btn btn-primary btn-sm" href="06-order-detail.html">Pick</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" aria-label="Select #ILED-1039" checked /></td>
<td>
<div class="cell-strong">#ILED-1039</div>
<div class="cell-muted">16 Oct 18:40</div>
</td>
<td>m.wisniewska@mail.pl</td>
<td class="cell-strong">149,00 zł</td>
<td><span class="badge badge-success">Paid</span></td>
<td><span class="badge badge-accent">Label missing</span></td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm avatar-muted">MW</span>
<span class="name">Marek W.</span>
</span>
</td>
<td class="cell-muted">18h</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" aria-label="Select #ILED-1037" /></td>
<td>
<div class="cell-strong">#ILED-1037</div>
<div class="cell-muted">16 Oct 14:12</div>
</td>
<td>piotr.z@mail.pl</td>
<td class="cell-strong">628,00 zł</td>
<td><span class="badge badge-success">Paid</span></td>
<td><span class="badge badge-info">Processing</span></td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm">AK</span>
<span class="name">Anna K.</span>
</span>
</td>
<td class="cell-muted">22h</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" aria-label="Select #ILED-1030" /></td>
<td>
<div class="cell-strong">#ILED-1030</div>
<div class="cell-muted">15 Oct 11:05</div>
</td>
<td>ola@mail.pl</td>
<td class="cell-strong">329,00 zł</td>
<td><span class="badge badge-success">Paid</span></td>
<td><span class="badge badge-success">Shipped</span></td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm avatar-muted">MW</span>
<span class="name">Marek W.</span>
</span>
</td>
<td class="cell-muted">2d</td>
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<span>Showing 1–5 of 128 · Tip: select rows for bulk pick / invoice / label</span>
<div class="pagination-btns">
<button type="button" class="btn btn-secondary btn-sm" disabled>Prev</button>
<button type="button" class="btn btn-secondary btn-sm">Next</button>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="pick">
<div class="card mb-16">
<div class="toolbar">
<select class="select"><option>Warehouse: Warszawa Central</option><option>Kraków Hub</option></select>
<label class="flex items-center gap-8" style="font-size: 13px"><input type="checkbox" class="check" /> Show collected</label>
<div class="toolbar-spacer"></div>
<span class="handled-by">
<span class="avatar avatar-sm">AK</span>
Picking as <span class="name">Anna K.</span>
</span>
<button type="button" class="btn btn-secondary btn-sm">Refresh</button>
</div>
<div class="bulk-bar is-visible" data-bulk-bar>
<span class="count" data-bulk-count>2 orders selected</span>
<button type="button" class="btn btn-primary btn-sm">
<svg class="ico" aria-hidden="true"><use href="#i-pick"></use></svg>
Collect selected
</button>
<button type="button" class="btn btn-secondary btn-sm">
<svg class="ico" aria-hidden="true"><use href="#i-label"></use></svg>
Labels for selected
</button>
</div>
</div>
<div class="card mb-16">
<div class="card-head">
<div class="flex items-center gap-12">
<input type="checkbox" class="check" checked aria-label="Select order" />
<div>
<h2>#ILED-1041 · jan.nowak@mail.pl</h2>
<span class="cell-muted">2 lines · DHL · claimed by Anna K.</span>
</div>
</div>
<button type="button" class="btn btn-primary btn-sm">Collect order</button>
</div>
<div class="table-wrap">
<table class="data">
<thead><tr><th>Product</th><th>Qty</th><th>Location</th><th>Collected by</th><th></th></tr></thead>
<tbody>
<tr>
<td class="cell-strong">Lampa LED Black</td>
<td>1</td>
<td class="cell-muted">WH1 · A-12</td>
<td class="cell-muted">—</td>
<td class="text-right"><button type="button" class="btn btn-secondary btn-sm">Collect line</button></td>
</tr>
<tr>
<td class="cell-strong">LED Strip 5m</td>
<td>1</td>
<td class="cell-muted">WH1 · B-03</td>
<td class="cell-muted">—</td>
<td class="text-right"><button type="button" class="btn btn-secondary btn-sm">Collect line</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-head">
<div class="flex items-center gap-12">
<input type="checkbox" class="check" checked aria-label="Select order" />
<div>
<h2>#ILED-1037 · piotr.z@mail.pl</h2>
<span class="cell-muted">1 line · DPD · claimed by Anna K.</span>
</div>
</div>
<button type="button" class="btn btn-primary btn-sm">Collect order</button>
</div>
<div class="table-wrap">
<table class="data">
<thead><tr><th>Product</th><th>Qty</th><th>Location</th><th>Collected by</th><th></th></tr></thead>
<tbody>
<tr>
<td class="cell-strong">Lampa LED Gold</td>
<td>2</td>
<td class="cell-muted">WH1 · A-08</td>
<td>
<span class="handled-by">
<span class="avatar avatar-sm avatar-muted">MW</span>
<span class="name">Marek W.</span>
</span>
</td>
<td class="text-right"><button type="button" class="btn btn-secondary btn-sm" disabled>Collected</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+252
View File
@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Order #ILED-1041 — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link is-active" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu">
<svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg>
</button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>#ILED-1041</h1>
<p class="page-purpose">
<span class="badge badge-success">Paid</span>
<span class="badge badge-info">Ready to pick</span>
· 17 Oct 2026, 09:01 · DHL
· Claimed by
<span class="handled-by" style="display: inline-flex; vertical-align: middle; margin-left: 4px">
<span class="avatar avatar-sm">AK</span>
<span class="name">Anna K.</span>
</span>
</p>
</div>
<div class="page-actions">
<a class="btn btn-secondary" href="05-orders.html">Back</a>
<button type="button" class="btn btn-secondary">
<svg class="ico" aria-hidden="true"><use href="#i-invoice"></use></svg>
Invoice
</button>
<button type="button" class="btn btn-primary">
<svg class="ico" aria-hidden="true"><use href="#i-label"></use></svg>
Generate label
</button>
</div>
</div>
<div class="split">
<div class="stack" style="gap: 16px">
<div class="card">
<div class="card-head"><h2>Line items</h2></div>
<div class="table-wrap">
<table class="data">
<thead><tr><th>Product</th><th>Qty</th><th>Pick from</th><th>Unit</th><th>Total</th><th>Picked by</th><th></th></tr></thead>
<tbody>
<tr>
<td>
<div class="row-product">
<div class="thumb"></div>
<div>
<div class="cell-strong">Lampa LED Black</div>
<div class="cell-muted">LED-BLK-01</div>
</div>
</div>
</td>
<td>1</td>
<td>
<select class="select" style="height: 32px; min-width: 120px">
<option>WH1</option>
<option>WH2</option>
</select>
</td>
<td>299,00 zł</td>
<td class="cell-strong">299,00 zł</td>
<td class="cell-muted">—</td>
<td><button type="button" class="btn btn-secondary btn-sm">Collect</button></td>
</tr>
<tr>
<td>
<div class="row-product">
<div class="thumb"></div>
<div>
<div class="cell-strong">LED Strip 5m</div>
<div class="cell-muted">LED-STR-5</div>
</div>
</div>
</td>
<td>1</td>
<td>
<select class="select" style="height: 32px; min-width: 120px">
<option>WH1</option>
<option>WH2</option>
</select>
</td>
<td>149,00 zł</td>
<td class="cell-strong">149,00 zł</td>
<td class="cell-muted">—</td>
<td><button type="button" class="btn btn-secondary btn-sm">Collect</button></td>
</tr>
</tbody>
</table>
</div>
<div class="section-block">
<div class="flex justify-between"><span class="muted">Subtotal</span><span>448,00 zł</span></div>
<div class="flex justify-between mt-16"><span class="muted">Delivery</span><span>30,00 zł</span></div>
<div class="flex justify-between mt-16"><span class="muted">Discount</span><span>−0,00 zł</span></div>
<div class="flex justify-between mt-16 cell-strong" style="font-size: 16px"><span>Total (incl. VAT)</span><span>478,00 zł</span></div>
</div>
</div>
<div class="card">
<div class="card-head"><h2>Internal note</h2></div>
<div class="card-pad">
<textarea class="textarea" placeholder="Visible only to admins…">Customer asked for gift wrap.</textarea>
<div class="flex justify-between items-center mt-16">
<span class="cell-muted">Last edit: Anna K. · 17 Oct 09:12</span>
<button type="button" class="btn btn-secondary btn-sm">Save note</button>
</div>
</div>
</div>
</div>
<div class="stack" style="gap: 16px">
<div class="card">
<div class="card-head"><h2>Status</h2></div>
<div class="card-pad stack">
<div class="field">
<label>Order status</label>
<select class="select">
<option>Pending payment</option>
<option selected>Paid</option>
<option>Processing</option>
<option>Shipped</option>
<option>Completed</option>
<option>Cancelled</option>
</select>
</div>
<button type="button" class="btn btn-primary">Update status</button>
<button type="button" class="btn btn-secondary">
<svg class="ico" aria-hidden="true"><use href="#i-pick"></use></svg>
Collect entire order
</button>
<p class="field-hint" style="margin: 0">Status changes are logged with your admin identity.</p>
</div>
</div>
<div class="card">
<div class="card-head"><h2>Customer &amp; shipping</h2></div>
<div class="section-block">
<div class="cell-strong">Jan Nowak</div>
<div class="cell-muted"><a href="10-customers.html">jan.nowak@mail.pl</a></div>
<div class="cell-muted">+48 600 100 200</div>
</div>
<div class="section-block">
<h3>Delivery</h3>
<div>DHL Parcelshop</div>
<div class="cell-muted">ul. Długa 12, 00-238 Warszawa</div>
<div class="cell-muted mt-16">Locker / point: DHL-WAW-12</div>
</div>
<div class="section-block">
<h3>Shipment</h3>
<div class="cell-muted">No tracking yet</div>
<div class="flex gap-8 mt-16">
<button type="button" class="btn btn-primary btn-sm">
<svg class="ico" aria-hidden="true"><use href="#i-label"></use></svg>
Generate label
</button>
<button type="button" class="btn btn-secondary btn-sm" disabled>Download</button>
</div>
</div>
</div>
<div class="card">
<div class="card-head"><h2>Activity · who handled what</h2></div>
<div class="card-pad">
<ul class="timeline">
<li>
<div class="t-title">Claimed for picking</div>
<div class="t-meta">17 Oct · 09:10</div>
<div class="activity-actor">
<span class="avatar avatar-sm">AK</span>
<span class="cell-strong">Anna Kowalska</span>
</div>
</li>
<li>
<div class="t-title">Payment completed</div>
<div class="t-meta">17 Oct · 09:05 · PayU</div>
<div class="activity-actor">
<span class="avatar avatar-sm avatar-muted">SYS</span>
<span class="cell-muted">System</span>
</div>
</li>
<li>
<div class="t-title">Order placed</div>
<div class="t-meta">17 Oct · 09:01</div>
<div class="activity-actor">
<span class="avatar avatar-sm avatar-muted">CUS</span>
<span class="cell-muted">Customer</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+197
View File
@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Promotions — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link is-active" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>Promotions</h1>
<p class="page-purpose">Run campaigns and promo codes without confusion.</p>
</div>
<div class="page-actions">
<button type="button" class="btn btn-primary">New promotion</button>
</div>
</div>
<div class="grid grid-3 mb-16">
<div class="card kpi">
<div class="kpi-label">Active promotions</div>
<div class="kpi-value">3</div>
</div>
<div class="card kpi">
<div class="kpi-label">Redemptions (30d)</div>
<div class="kpi-value">86</div>
</div>
<div class="card kpi">
<div class="kpi-label">Discount given</div>
<div class="kpi-value">4&nbsp;120&nbsp;zł</div>
</div>
</div>
<div class="split">
<div class="card">
<div class="toolbar">
<div class="search-wrap">
<span class="search-icon">⌕</span>
<input class="input" type="search" placeholder="Search promotions…" />
</div>
<select class="select"><option>All</option><option>Active</option><option>Inactive</option></select>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr><th>Name</th><th>Type</th><th>Window</th><th>Status</th></tr>
</thead>
<tbody>
<tr class="is-selected" style="cursor: pointer">
<td>
<div class="cell-strong">Autumn 10%</div>
<div class="cell-muted">Min order 150 zł</div>
</td>
<td><span class="badge badge-accent">Percent</span></td>
<td class="cell-muted">1–31 Oct</td>
<td><span class="badge badge-success">Active</span></td>
</tr>
<tr style="cursor: pointer">
<td>
<div class="cell-strong">Free shipping weekend</div>
<div class="cell-muted">No min</div>
</td>
<td><span class="badge badge-info">Free shipping</span></td>
<td class="cell-muted">18–19 Oct</td>
<td><span class="badge badge-neutral">Scheduled</span></td>
</tr>
<tr style="cursor: pointer">
<td>
<div class="cell-strong">Welcome −30 zł</div>
<div class="cell-muted">Reward on paid order</div>
</td>
<td><span class="badge badge-warning">Fixed</span></td>
<td class="cell-muted">Ongoing</td>
<td><span class="badge badge-success">Active</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="stack" style="gap: 16px">
<div class="card">
<div class="card-head">
<h2>Autumn 10%</h2>
<button type="button" class="btn btn-secondary btn-sm">Deactivate</button>
</div>
<div class="section-block">
<h3>Benefit</h3>
<div class="grid grid-2">
<div class="field"><label>Type</label><select class="select"><option selected>Percent</option><option>Fixed</option><option>Free shipping</option></select></div>
<div class="field"><label>Value</label><input class="input" value="10" /></div>
</div>
</div>
<div class="section-block">
<h3>Requirements</h3>
<div class="grid grid-2">
<div class="field"><label>Min order</label><input class="input" value="150" /></div>
<div class="field"><label>Valid from</label><input class="input" type="date" value="2026-10-01" /></div>
<div class="field"><label>Valid to</label><input class="input" type="date" value="2026-10-31" /></div>
</div>
</div>
<div class="section-block">
<h3>Banner (storefront)</h3>
<div class="field"><label>Headline PL</label><input class="input" value="Jesienna promocja −10%" /></div>
<div class="field mt-16"><label>Highlighted code</label><input class="input" value="JESIEN10" /></div>
</div>
</div>
<div class="card">
<div class="card-head">
<h2>Codes</h2>
<button type="button" class="btn btn-primary btn-sm">Generate</button>
</div>
<div class="card-pad">
<div class="flex justify-between items-center mb-16">
<div>
<div class="cell-strong">JESIEN10</div>
<div class="cell-muted">Max 500 · used 214</div>
</div>
<span class="badge badge-success">Active</span>
</div>
<div class="progress" aria-label="Usage"><span style="width: 43%"></span></div>
<div class="flex gap-8 mt-16">
<button type="button" class="btn btn-secondary btn-sm">Copy</button>
<button type="button" class="btn btn-ghost btn-sm">Deactivate</button>
</div>
</div>
<div class="section-block">
<div class="flex justify-between items-center">
<div>
<div class="cell-strong">JESIEN10-VIP</div>
<div class="cell-muted">Max 50 · used 12</div>
</div>
<span class="badge badge-success">Active</span>
</div>
<div class="progress mt-16"><span style="width: 24%"></span></div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+194
View File
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Newsletter — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link is-active" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content" data-tabs-host>
<div class="page-header">
<div>
<h1>Newsletter</h1>
<p class="page-purpose">Communicate with subscribers — compose, preview, send safely.</p>
</div>
<div class="page-actions">
<button type="button" class="btn btn-secondary">Export subscribers</button>
</div>
</div>
<div class="tabs" data-tabs role="tablist">
<button type="button" class="tab is-active" data-tab="compose">Compose</button>
<button type="button" class="tab" data-tab="subscribers">Subscribers</button>
<button type="button" class="tab" data-tab="campaigns">Campaigns</button>
</div>
<div class="tab-panel is-active" data-panel="compose">
<div class="split">
<div class="card">
<div class="card-head"><h2>Campaign composer</h2></div>
<div class="card-pad stack">
<div class="field">
<label>Subject</label>
<input class="input" value="Jesienne nowości iLED — −10% z kodem JESIEN10" />
</div>
<div class="field">
<label>HTML body</label>
<textarea class="textarea" style="min-height: 200px">&lt;h1&gt;Witaj w iLED&lt;/h1&gt;
&lt;p&gt;Sprawdź nasze lampy LED i skorzystaj z kodu &lt;strong&gt;JESIEN10&lt;/strong&gt;.&lt;/p&gt;</textarea>
</div>
<div class="field">
<label>Schedule (optional)</label>
<input class="input" type="datetime-local" />
<span class="field-hint">Leave empty to send immediately after confirm.</span>
</div>
<div class="flex gap-8">
<button type="button" class="btn btn-secondary">Save draft</button>
<button type="button" class="btn btn-primary">Send to 1&nbsp;248 subscribers</button>
</div>
</div>
</div>
<div class="card">
<div class="card-head"><h2>Preview</h2><span class="badge badge-neutral">Inbox</span></div>
<div class="card-pad">
<div class="preview-pane">
<div class="cell-muted" style="margin-bottom: 12px">From: newsletter@iled.pl</div>
<div class="cell-strong" style="font-size: 16px; margin-bottom: 16px">Jesienne nowości iLED — −10% z kodem JESIEN10</div>
<h1 style="font-size: 22px; margin: 0 0 12px">Witaj w iLED</h1>
<p style="margin: 0; color: var(--text-secondary)">
Sprawdź nasze lampy LED i skorzystaj z kodu <strong>JESIEN10</strong>.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="subscribers">
<div class="card">
<div class="toolbar">
<div class="search-wrap">
<span class="search-icon">⌕</span>
<input class="input" type="search" placeholder="Search email…" />
</div>
<select class="select"><option>All</option><option>Active</option><option>Inactive</option></select>
<div class="toolbar-spacer"></div>
<span class="cell-muted">1 248 subscribers</span>
</div>
<div class="table-wrap">
<table class="data">
<thead><tr><th>Email</th><th>Joined</th><th>Status</th></tr></thead>
<tbody>
<tr>
<td class="cell-strong">anna.kowalska@mail.pl</td>
<td class="cell-muted">12 Sep 2026</td>
<td><span class="badge badge-success">Active</span></td>
</tr>
<tr>
<td class="cell-strong">jan.nowak@mail.pl</td>
<td class="cell-muted">03 Oct 2026</td>
<td><span class="badge badge-success">Active</span></td>
</tr>
<tr>
<td class="cell-strong">old.user@mail.pl</td>
<td class="cell-muted">01 Jan 2026</td>
<td><span class="badge badge-neutral">Unsubscribed</span></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<span>Showing 1–3 of 1 248</span>
<div class="pagination-btns">
<button type="button" class="btn btn-secondary btn-sm" disabled>Prev</button>
<button type="button" class="btn btn-secondary btn-sm">Next</button>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="campaigns">
<div class="card">
<div class="table-wrap">
<table class="data">
<thead><tr><th>Subject</th><th>Sent</th><th>Recipients</th><th>Status</th></tr></thead>
<tbody>
<tr>
<td class="cell-strong">Back to school lighting</td>
<td class="cell-muted">01 Sep 2026</td>
<td>1 102</td>
<td><span class="badge badge-success">Sent</span></td>
</tr>
<tr>
<td class="cell-strong">Summer sale draft</td>
<td class="cell-muted">—</td>
<td>—</td>
<td><span class="badge badge-neutral">Draft</span></td>
</tr>
<tr>
<td class="cell-strong">Welcome series #1</td>
<td class="cell-muted">Scheduled 20 Oct</td>
<td>1 248</td>
<td><span class="badge badge-info">Scheduled</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+181
View File
@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Reviews — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link is-active" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>Reviews</h1>
<p class="page-purpose">Queue-first moderation — protect trust on the storefront.</p>
</div>
<div class="page-actions">
<button type="button" class="btn btn-secondary" disabled>Bulk approve (0)</button>
</div>
</div>
<div class="card">
<div class="toolbar">
<select class="select">
<option selected>Pending</option>
<option>Approved</option>
<option>Rejected</option>
<option>All</option>
</select>
<select class="select">
<option>All stars</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>1–2</option>
</select>
<div class="search-wrap">
<span class="search-icon">⌕</span>
<input class="input" type="search" placeholder="Search content or author…" />
</div>
<div class="toolbar-spacer"></div>
<span class="badge badge-warning">4 pending</span>
</div>
<div class="section-block">
<div class="flex gap-12 items-center" style="align-items: flex-start">
<input type="checkbox" class="check" style="margin-top: 4px" />
<div class="thumb thumb-lg"></div>
<div style="flex: 1; min-width: 0">
<div class="flex justify-between gap-12" style="flex-wrap: wrap">
<div>
<div class="cell-strong">Lampa LED Black</div>
<div class="cell-muted">Anna K. · 16 Oct 2026</div>
</div>
<div class="stars">★★★★☆</div>
</div>
<p style="margin: 10px 0 0; font-size: 14px">
Światło jest świetne, montaż łatwy. Paczka doszła szybko. Polecam!
</p>
<div class="field mt-16">
<label>Public reply (optional)</label>
<textarea class="textarea" style="min-height: 64px" placeholder="Dziękujemy za opinię…"></textarea>
</div>
<div class="flex gap-8 mt-16">
<button type="button" class="btn btn-primary btn-sm">Approve</button>
<button type="button" class="btn btn-danger btn-sm">Reject</button>
<button type="button" class="btn btn-secondary btn-sm">Approve + reply</button>
</div>
</div>
</div>
</div>
<div class="section-block">
<div class="flex gap-12 items-center" style="align-items: flex-start">
<input type="checkbox" class="check" style="margin-top: 4px" />
<div class="thumb thumb-lg"></div>
<div style="flex: 1; min-width: 0">
<div class="flex justify-between gap-12" style="flex-wrap: wrap">
<div>
<div class="cell-strong">LED Strip 5m</div>
<div class="cell-muted">Marek W. · 15 Oct 2026</div>
</div>
<div class="stars">★★★☆☆</div>
</div>
<p style="margin: 10px 0 0; font-size: 14px">
Kolory OK, instrukcja mogłaby być jaśniejsza. Działa jak trzeba.
</p>
<div class="flex gap-8 mt-16">
<button type="button" class="btn btn-primary btn-sm">Approve</button>
<button type="button" class="btn btn-danger btn-sm">Reject</button>
<button type="button" class="btn btn-secondary btn-sm">Reply</button>
</div>
</div>
</div>
</div>
<div class="section-block">
<div class="flex gap-12 items-center" style="align-items: flex-start">
<input type="checkbox" class="check" style="margin-top: 4px" />
<div class="thumb thumb-lg"></div>
<div style="flex: 1; min-width: 0">
<div class="flex justify-between gap-12" style="flex-wrap: wrap">
<div>
<div class="cell-strong">Lampa LED Gold</div>
<div class="cell-muted">Ola · 14 Oct 2026</div>
</div>
<div class="stars">★★★★★</div>
</div>
<p style="margin: 10px 0 0; font-size: 14px">
Piękny kolor złota, idealna na biurko. Kupię drugą.
</p>
<div class="flex gap-8 mt-16">
<button type="button" class="btn btn-primary btn-sm">Approve</button>
<button type="button" class="btn btn-danger btn-sm">Reject</button>
</div>
</div>
</div>
</div>
<div class="pagination">
<span>Showing 1–3 of 4 pending</span>
<div class="pagination-btns">
<button type="button" class="btn btn-secondary btn-sm" disabled>Prev</button>
<button type="button" class="btn btn-secondary btn-sm">Next</button>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+200
View File
@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Customers — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link is-active" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>Customers</h1>
<p class="page-purpose">Find buyers and see order history — CRM light for shop ops.</p>
</div>
</div>
<div class="split">
<div class="card">
<div class="toolbar">
<div class="search-wrap">
<span class="search-icon">⌕</span>
<input class="input" type="search" placeholder="Email, name, phone…" />
</div>
<select class="select"><option>All</option><option>Active</option><option>Blocked</option></select>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th>Customer</th>
<th>Orders</th>
<th>LTV</th>
<th>Last order</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="is-selected" style="cursor: pointer">
<td>
<div class="cell-strong">Jan Nowak</div>
<div class="cell-muted">jan.nowak@mail.pl</div>
</td>
<td>5</td>
<td class="cell-strong">2&nbsp;140&nbsp;zł</td>
<td class="cell-muted">17 Oct</td>
<td><span class="badge badge-success">Active</span></td>
</tr>
<tr style="cursor: pointer">
<td>
<div class="cell-strong">Anna Kowalska</div>
<div class="cell-muted">anna.kowalska@mail.pl</div>
</td>
<td>2</td>
<td class="cell-strong">628&nbsp;zł</td>
<td class="cell-muted">17 Oct</td>
<td><span class="badge badge-success">Active</span></td>
</tr>
<tr style="cursor: pointer">
<td>
<div class="cell-strong">Maria Wiśniewska</div>
<div class="cell-muted">m.wisniewska@mail.pl</div>
</td>
<td>1</td>
<td class="cell-strong">149&nbsp;zł</td>
<td class="cell-muted">16 Oct</td>
<td><span class="badge badge-success">Active</span></td>
</tr>
<tr style="cursor: pointer">
<td>
<div class="cell-strong">Spam Account</div>
<div class="cell-muted">spam@example.com</div>
</td>
<td>0</td>
<td class="cell-muted">0 zł</td>
<td class="cell-muted">—</td>
<td><span class="badge badge-danger">Blocked</span></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<span>Showing 1–4 of 842</span>
<div class="pagination-btns">
<button type="button" class="btn btn-secondary btn-sm" disabled>Prev</button>
<button type="button" class="btn btn-secondary btn-sm">Next</button>
</div>
</div>
</div>
<div class="stack" style="gap: 16px">
<div class="card">
<div class="card-head">
<h2>Jan Nowak</h2>
<button type="button" class="btn btn-danger btn-sm">Block</button>
</div>
<div class="section-block">
<div class="cell-muted">Email</div>
<div class="cell-strong">jan.nowak@mail.pl</div>
<div class="cell-muted mt-16">Phone</div>
<div>+48 600 100 200</div>
<div class="cell-muted mt-16">Joined</div>
<div>03 Mar 2025</div>
</div>
<div class="section-block">
<h3>Addresses</h3>
<div class="cell-strong">Billing</div>
<div class="cell-muted">ul. Krótka 4 / 12, 00-001 Warszawa</div>
<div class="cell-strong mt-16">Shipping default</div>
<div class="cell-muted">Same as billing · prefers InPost</div>
</div>
<div class="section-block">
<h3>Notes</h3>
<textarea class="textarea" style="min-height: 72px">VIP — often buys desk lamps. Prefers DHL.</textarea>
<button type="button" class="btn btn-secondary btn-sm mt-16">Save note</button>
</div>
</div>
<div class="card">
<div class="card-head"><h2>Order history</h2></div>
<div class="table-wrap">
<table class="data">
<thead><tr><th>Order</th><th>Total</th><th>Status</th></tr></thead>
<tbody>
<tr>
<td><a class="cell-strong" href="06-order-detail.html">#ILED-1041</a></td>
<td>478,00 zł</td>
<td><span class="badge badge-info">Ready to pick</span></td>
</tr>
<tr>
<td><a class="cell-strong" href="06-order-detail.html">#ILED-0988</a></td>
<td>329,00 zł</td>
<td><span class="badge badge-success">Completed</span></td>
</tr>
<tr>
<td><a class="cell-strong" href="06-order-detail.html">#ILED-0912</a></td>
<td>598,00 zł</td>
<td><span class="badge badge-success">Completed</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+162
View File
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Categories — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link is-active" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>Categories</h1>
<p class="page-purpose">Structure the storefront catalog. Assign products from the product form.</p>
</div>
<div class="page-actions">
<button type="button" class="btn btn-primary">Add category</button>
</div>
</div>
<div class="split">
<div class="card">
<div class="card-head">
<h2>Tree</h2>
<span class="cell-muted">Drag reorder — mock</span>
</div>
<div class="card-pad">
<div class="tree-item is-active">
<span>▾</span>
<div style="flex: 1">
<div class="cell-strong">Lamps</div>
<div class="cell-muted">slug: lamps</div>
</div>
<span class="badge badge-neutral">8</span>
<span class="badge badge-success">On</span>
</div>
<div class="tree-children">
<div class="tree-item">
<span>·</span>
<div style="flex: 1">
<div class="cell-strong">Desk</div>
<div class="cell-muted">lamps/desk</div>
</div>
<span class="badge badge-neutral">5</span>
<span class="badge badge-success">On</span>
</div>
<div class="tree-item">
<span>·</span>
<div style="flex: 1">
<div class="cell-strong">Floor</div>
<div class="cell-muted">lamps/floor</div>
</div>
<span class="badge badge-neutral">3</span>
<span class="badge badge-success">On</span>
</div>
</div>
<div class="tree-item mt-16">
<span>▾</span>
<div style="flex: 1">
<div class="cell-strong">Strips</div>
<div class="cell-muted">slug: strips</div>
</div>
<span class="badge badge-neutral">4</span>
<span class="badge badge-success">On</span>
</div>
<div class="tree-children">
<div class="tree-item">
<span>·</span>
<div style="flex: 1">
<div class="cell-strong">RGB</div>
<div class="cell-muted">strips/rgb</div>
</div>
<span class="badge badge-neutral">2</span>
<span class="badge badge-success">On</span>
</div>
<div class="tree-item">
<span>·</span>
<div style="flex: 1">
<div class="cell-strong">White</div>
<div class="cell-muted">strips/white</div>
</div>
<span class="badge badge-neutral">2</span>
<span class="badge badge-neutral">Off</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-head">
<h2>Edit · Lamps</h2>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
<div class="card-pad stack">
<div class="field"><label>Slug</label><input class="input" value="lamps" /></div>
<div class="field"><label>Parent</label><select class="select"><option selected>— Root —</option><option>Strips</option></select></div>
<div class="field"><label>Name (PL)</label><input class="input" value="Lampy" /></div>
<div class="field"><label>Name (EN)</label><input class="input" value="Lamps" /></div>
<div class="field"><label>Description (PL)</label><textarea class="textarea" style="min-height: 80px">Kategoria lamp biurkowych i podłogowych.</textarea></div>
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> Active on storefront</label>
<div class="flex gap-8">
<button type="button" class="btn btn-primary">Save</button>
<a class="btn btn-secondary" href="03-products.html">View products</a>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+238
View File
@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link is-active" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content" data-tabs-host>
<div class="page-header">
<div>
<h1>Inventory</h1>
<p class="page-purpose">Stock health across warehouses — alerts first, then matrix.</p>
</div>
<div class="page-actions">
<a class="btn btn-secondary" href="13-settings.html">Default threshold</a>
<button type="button" class="btn btn-primary">Adjust stock</button>
</div>
</div>
<div class="alert-strip">
<span class="alert-pill danger">
<span class="dot" style="background: var(--danger)"></span>
3 SKUs at or below threshold
</span>
<span class="alert-pill warn">
<span class="dot" style="background: var(--warning)"></span>
6 units reserved in open orders
</span>
</div>
<div class="tabs" data-tabs role="tablist">
<button type="button" class="tab is-active" data-tab="alerts">Low stock</button>
<button type="button" class="tab" data-tab="matrix">Warehouse matrix</button>
</div>
<div class="tab-panel is-active" data-panel="alerts">
<div class="card">
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th>Product</th>
<th>Available</th>
<th>Reserved</th>
<th>Threshold</th>
<th>WH1</th>
<th>WH2</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="cell-strong">Lampa LED Black</div>
<div class="cell-muted">LED-BLK-01</div>
</td>
<td><span class="badge badge-danger">1</span></td>
<td>1</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td class="text-right">
<button type="button" class="btn btn-primary btn-sm">Restock</button>
<a class="btn btn-ghost btn-sm" href="04-product-form.html">Product</a>
</td>
</tr>
<tr>
<td>
<div class="cell-strong">Lampa LED Gold</div>
<div class="cell-muted">LED-GLD-01</div>
</td>
<td><span class="badge badge-warning">4</span></td>
<td>0</td>
<td>5</td>
<td>3</td>
<td>1</td>
<td class="text-right">
<button type="button" class="btn btn-primary btn-sm">Restock</button>
<a class="btn btn-ghost btn-sm" href="04-product-form.html">Product</a>
</td>
</tr>
<tr>
<td>
<div class="cell-strong">LED Strip 5m</div>
<div class="cell-muted">LED-STR-5</div>
</td>
<td><span class="badge badge-danger">0</span></td>
<td>2</td>
<td>5</td>
<td>1</td>
<td>0</td>
<td class="text-right">
<button type="button" class="btn btn-primary btn-sm">Restock</button>
<a class="btn btn-ghost btn-sm" href="04-product-form.html">Product</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Quick adjust drawer mock -->
<div class="card mt-16">
<div class="card-head"><h2>Quick adjust · Lampa LED Black</h2></div>
<div class="card-pad">
<div class="grid grid-3">
<div class="field"><label>Warehouse</label><select class="select"><option>Warszawa Central (WH1)</option><option>Kraków Hub (WH2)</option></select></div>
<div class="field"><label>New quantity</label><input class="input" type="number" value="12" /></div>
<div class="field"><label>Reason</label><input class="input" placeholder="Delivery received…" /></div>
</div>
<div class="flex gap-8 mt-16">
<button type="button" class="btn btn-primary">Apply</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-panel="matrix">
<div class="card">
<div class="toolbar">
<div class="search-wrap">
<span class="search-icon">⌕</span>
<input class="input" type="search" placeholder="Filter SKU…" />
</div>
<div class="toolbar-spacer"></div>
<span class="cell-muted">Available = stock − reserved</span>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th>SKU</th>
<th>WH1 qty</th>
<th>WH2 qty</th>
<th>Total</th>
<th>Reserved</th>
<th>Available</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell-strong">LED-BLK-01</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td class="cell-strong">LED-GLD-01</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>0</td>
<td>4</td>
</tr>
<tr>
<td class="cell-strong">LED-STR-5</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td><span class="badge badge-danger">−1†</span></td>
</tr>
<tr>
<td class="cell-strong">LED-WHT-01</td>
<td>18</td>
<td>6</td>
<td>24</td>
<td>3</td>
<td>21</td>
</tr>
</tbody>
</table>
</div>
<div class="card-pad">
<span class="field-hint">† Negative available means oversell risk — fulfill from another warehouse or restock.</span>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+248
View File
@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Settings — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link is-active" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button><button type="button">DE</button><button type="button">CS</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>Settings</h1>
<p class="page-purpose">Store ops config — mock until settings APIs exist in Phase 2.</p>
</div>
<div class="page-actions">
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<div class="split settings-layout">
<div class="card">
<nav class="settings-nav" data-settings-nav aria-label="Settings sections">
<a href="#store" class="is-active">Store profile</a>
<a href="#locales">Locales &amp; currency</a>
<a href="#inventory">Inventory</a>
<a href="#shipping">Shipping</a>
<a href="#email">Email</a>
<a href="#team">Team</a>
<a href="#account">My account</a>
</nav>
</div>
<div class="stack" style="gap: 16px">
<div class="card" id="store" data-settings-section>
<div class="card-head"><h2>Store profile</h2></div>
<div class="card-pad stack">
<div class="field"><label>Store name</label><input class="input" value="iLED" /></div>
<div class="field"><label>Support email</label><input class="input" value="hello@iled.pl" /></div>
<div class="field"><label>Storefront URL</label><input class="input" value="https://shop.zea.lt" /></div>
<div class="field"><label>Legal company name</label><input class="input" value="iLED Sp. z o.o." /></div>
</div>
</div>
<div class="card hidden" id="locales" data-settings-section>
<div class="card-head"><h2>Locales &amp; currency</h2></div>
<div class="card-pad stack">
<div class="field"><label>Default locale</label><select class="select"><option selected>pl-PL</option><option>en</option><option>de</option><option>cs</option></select></div>
<div class="field"><label>Currency</label><select class="select"><option selected>PLN</option><option>EUR</option></select></div>
<div class="field"><label>Enabled locales</label>
<div class="flex gap-12 mt-16" style="flex-wrap: wrap">
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> PL</label>
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> EN</label>
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> DE</label>
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> CS</label>
</div>
</div>
</div>
</div>
<div class="card hidden" id="inventory" data-settings-section>
<div class="card-head"><h2>Inventory defaults</h2></div>
<div class="card-pad stack">
<div class="field" style="max-width: 240px">
<label>Default low-stock threshold</label>
<input class="input" type="number" value="5" />
<span class="field-hint">Used when a product has no override. Drives Dashboard &amp; Inventory alerts.</span>
</div>
</div>
</div>
<div class="card hidden" id="shipping" data-settings-section>
<div class="card-head"><h2>Shipping carriers</h2></div>
<div class="card-pad">
<div class="table-wrap">
<table class="data">
<thead><tr><th>Carrier</th><th>Enabled</th><th>Mode</th></tr></thead>
<tbody>
<tr>
<td class="cell-strong">InPost</td>
<td><input type="checkbox" class="check" checked /></td>
<td><span class="badge badge-warning">Sandbox</span></td>
</tr>
<tr>
<td class="cell-strong">DHL</td>
<td><input type="checkbox" class="check" checked /></td>
<td><span class="badge badge-warning">Sandbox</span></td>
</tr>
<tr>
<td class="cell-strong">DPD</td>
<td><input type="checkbox" class="check" checked /></td>
<td><span class="badge badge-warning">Sandbox</span></td>
</tr>
</tbody>
</table>
</div>
<p class="field-hint" style="margin: 14px 0 0">Credentials stay in server config — this UI only toggles visibility / sandbox flags (Phase 2).</p>
</div>
</div>
<div class="card hidden" id="email" data-settings-section>
<div class="card-head"><h2>Email / newsletter</h2></div>
<div class="card-pad stack">
<div class="field"><label>From name</label><input class="input" value="iLED" /></div>
<div class="field"><label>From address</label><input class="input" value="newsletter@iled.pl" /></div>
<div class="field"><label>Reply-to</label><input class="input" value="hello@iled.pl" /></div>
</div>
</div>
<div class="card hidden" id="team" data-settings-section>
<div class="card-head">
<h2>Team · multi-admin</h2>
<button type="button" class="btn btn-primary btn-sm">Invite admin</button>
</div>
<div class="card-pad">
<p class="field-hint" style="margin: 0 0 14px">
Every pick, invoice, label, and status change is attributed to the signed-in admin.
</p>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th>Admin</th>
<th>Role</th>
<th>Last active</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="handled-by">
<span class="avatar avatar-sm">AK</span>
<span>
<span class="name">Anna Kowalska</span>
<div class="cell-muted">anna.k@iled.pl</div>
</span>
</span>
</td>
<td><span class="badge badge-accent">Owner</span></td>
<td class="cell-muted">Now</td>
<td><span class="badge badge-success">Active</span></td>
<td class="text-right"><button type="button" class="btn btn-ghost btn-sm">Edit</button></td>
</tr>
<tr>
<td>
<span class="handled-by">
<span class="avatar avatar-sm avatar-muted">MW</span>
<span>
<span class="name">Marek Wiśniewski</span>
<div class="cell-muted">marek.w@iled.pl</div>
</span>
</span>
</td>
<td><span class="badge badge-info">Ops</span></td>
<td class="cell-muted">16 Oct 18:40</td>
<td><span class="badge badge-success">Active</span></td>
<td class="text-right"><button type="button" class="btn btn-ghost btn-sm">Edit</button></td>
</tr>
<tr>
<td>
<span class="handled-by">
<span class="avatar avatar-sm avatar-muted">OK</span>
<span>
<span class="name">Ola Kamińska</span>
<div class="cell-muted">ola.k@iled.pl</div>
</span>
</span>
</td>
<td><span class="badge badge-neutral">Marketing</span></td>
<td class="cell-muted">14 Oct</td>
<td><span class="badge badge-success">Active</span></td>
<td class="text-right"><button type="button" class="btn btn-ghost btn-sm">Edit</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card hidden" id="account" data-settings-section>
<div class="card-head"><h2>My account</h2></div>
<div class="card-pad stack">
<div class="field"><label>Display name</label><input class="input" value="Anna Kowalska" /></div>
<div class="field"><label>Email</label><input class="input" value="anna.k@iled.pl" disabled /></div>
<div class="field"><label>New password</label><input class="input" type="password" placeholder="••••••••" /></div>
<div class="field"><label>Confirm password</label><input class="input" type="password" placeholder="••••••••" /></div>
<span class="field-hint">Your name appears on order activity (pick, invoice, label).</span>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+54
View File
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Analytics — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link is-active" href="14-analytics.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Analytics</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
</aside>
<div class="main">
<header class="topbar"><div class="topbar-left"></div></header>
<main class="content">
<div class="page-header">
<div>
<h1>Analytics</h1>
<p class="page-purpose">What sells, expected revenue vs previous period, and channel mix. Live in Angular admin.</p>
</div>
</div>
<div class="kpi-grid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px">
<div class="card card-pad"><div class="cell-muted">Revenue</div><div class="kpi-value">—</div></div>
<div class="card card-pad"><div class="cell-muted">Orders</div><div class="kpi-value">—</div></div>
<div class="card card-pad"><div class="cell-muted">AOV</div><div class="kpi-value">—</div></div>
<div class="card card-pad"><div class="cell-muted">Units</div><div class="kpi-value">—</div></div>
</div>
<div class="card">
<div class="card-head"><h2>Top products</h2></div>
<div class="card-pad muted">Implemented in Angular admin at <code>/analytics</code> — top sellers, trend chart, channel breakdown.</div>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+45
View File
@@ -0,0 +1,45 @@
# iLED Admin — K-design mocks (Phase 1)
Interactive HTML mocks for the admin redesign. No build step.
## Open
1. Open [`index.html`](index.html) in a browser, or
2. From repo root: `start design/admin/index.html` (Windows)
Shared assets: [`assets/admin-k.css`](assets/admin-k.css), [`assets/admin-k.js`](assets/admin-k.js).
## Screens
| File | Purpose |
|------|---------|
| `01-login.html` | Auth |
| `02-dashboard.html` | Action center (alerts, queues, KPIs) |
| `14-analytics.html` | Sales analytics (Angular `/analytics`) |
| `03-products.html` | Catalog + warehouses + groups |
| `04-product-form.html` | Sectioned product editor |
| `05-orders.html` | Order list + pick list |
| `06-order-detail.html` | Fulfillment detail |
| `07-promotions.html` | Campaigns & codes |
| `08-newsletter.html` | Composer / subscribers / campaigns |
| `09-reviews.html` | Moderation queue |
| `10-customers.html` | Customer CRM (new) |
| `11-categories.html` | Category tree (new) |
| `12-inventory.html` | Low stock & warehouse matrix (new) |
| `13-settings.html` | Store settings (new) |
Shell reference: [`shell.html`](shell.html).
## Visual direction
- Cool gray background, white surfaces, hairline borders
- Accent `#FFBC39` only on CTAs, active nav, key alerts
- Dense tables, calm Inter scale for admin density
- Clean stroke SVG icons (sprite in `admin-k.js`)
## Ops extras (mock)
- **Bulk actions** on Orders: select rows → Collect / pick, Generate invoices, Generate labels
- **Multi-admin**: topbar shows signed-in admin; “Handled by” on lists; activity log on order detail; Team in Settings
- **Motion**: staggered page reveal, card lift, bulk-bar slide (respects `prefers-reduced-motion`)
- **Charts**: Chart.js animated bar chart on Dashboard (`cdn.jsdelivr.net` + `#ordersChart`)
+38
View File
@@ -0,0 +1,38 @@
<!-- Shared nav snippet reference (SVG icons). Active link: add class is-active -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="14-analytics.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Analytics</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot">
<a class="btn btn-secondary w-full" href="01-login.html">Log out</a>
</div>
</aside>
File diff suppressed because it is too large. Load diff
+245
View File
@@ -0,0 +1,245 @@
(function () {
"use strict";
function qs(sel, root) {
return (root || document).querySelector(sel);
}
function qsa(sel, root) {
return Array.prototype.slice.call((root || document).querySelectorAll(sel));
}
/* Inject clean stroke icon sprite once */
if (!qs("#admin-icon-sprite")) {
var sprite = document.createElementNS("http://www.w3.org/2000/svg", "svg");
sprite.id = "admin-icon-sprite";
sprite.setAttribute("aria-hidden", "true");
sprite.style.cssText =
"position:absolute;width:0;height:0;overflow:hidden";
sprite.innerHTML = [
'<symbol id="i-bulb" viewBox="0 0 24 24"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12c.6.6 1 1.5 1 2.4V18h6v-1.6c0-.9.4-1.8 1-2.4A7 7 0 0 0 12 2z"/></symbol>',
'<symbol id="i-dashboard" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></symbol>',
'<symbol id="i-orders" viewBox="0 0 24 24"><circle cx="9" cy="20" r="1"/><circle cx="17" cy="20" r="1"/><path d="M3 3h2l2.4 12.3a2 2 0 0 0 2 1.7h7.8a2 2 0 0 0 2-1.6L21 8H6"/></symbol>',
'<symbol id="i-inventory" viewBox="0 0 24 24"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/></symbol>',
'<symbol id="i-products" viewBox="0 0 24 24"><path d="M16.5 9.4 7.5 4.2"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/></symbol>',
'<symbol id="i-categories" viewBox="0 0 24 24"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h10"/></symbol>',
'<symbol id="i-customers" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>',
'<symbol id="i-promotions" viewBox="0 0 24 24"><path d="M19 5 5 19"/><circle cx="7.5" cy="7.5" r="2.5"/><circle cx="16.5" cy="16.5" r="2.5"/></symbol>',
'<symbol id="i-newsletter" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></symbol>',
'<symbol id="i-reviews" viewBox="0 0 24 24"><path d="m12 3 2.5 6.5L21 11l-5 4.2L17.5 22 12 18.5 6.5 22 8 15.2 3 11l6.5-1.5L12 3z"/></symbol>',
'<symbol id="i-settings" viewBox="0 0 24 24"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></symbol>',
'<symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></symbol>',
'<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>',
'<symbol id="i-pick" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></symbol>',
'<symbol id="i-invoice" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h8"/><path d="M8 9h2"/></symbol>',
'<symbol id="i-label" viewBox="0 0 24 24"><path d="M20.6 13.1 13.1 20.6a2 2 0 0 1-2.8 0L3 13.4V4h9.4l8.2 8.2a2 2 0 0 1 0 2.9z"/><circle cx="7.5" cy="7.5" r="1.5"/></symbol>',
'<symbol id="i-team" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>',
].join("");
document.body.insertBefore(sprite, document.body.firstChild);
}
/* Mobile nav */
var menuBtn = qs("[data-menu-toggle]");
var closeBtns = qsa("[data-menu-close]");
function openNav() {
document.body.classList.add("nav-open");
}
function closeNav() {
document.body.classList.remove("nav-open");
}
if (menuBtn) {
menuBtn.addEventListener("click", openNav);
}
closeBtns.forEach(function (btn) {
btn.addEventListener("click", closeNav);
});
/* Tabs */
qsa("[data-tabs]").forEach(function (root) {
var tabs = qsa(".tab", root);
var host = root.closest("[data-tabs-host]") || root.parentElement;
var panels = qsa(".tab-panel", host);
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
var id = tab.getAttribute("data-tab");
tabs.forEach(function (t) {
t.classList.toggle("is-active", t === tab);
});
panels.forEach(function (p) {
p.classList.toggle("is-active", p.getAttribute("data-panel") === id);
});
});
});
});
/* Locale switcher */
qsa(".locale").forEach(function (group) {
qsa("button", group).forEach(function (btn) {
btn.addEventListener("click", function () {
qsa("button", group).forEach(function (b) {
b.classList.remove("is-active");
});
btn.classList.add("is-active");
});
});
});
/* Row select + bulk bar */
function updateBulkBar(scope) {
var root = scope || document;
var bars = qsa("[data-bulk-bar]", root);
bars.forEach(function (bar) {
var card = bar.closest(".card") || document;
var checked = qsa(
'tbody input[type="checkbox"]:checked',
card
).length;
bar.classList.toggle("is-visible", checked > 0);
var countEl = qs("[data-bulk-count]", bar);
if (countEl) {
countEl.textContent =
checked + (checked === 1 ? " selected" : " selected");
}
});
}
qsa("[data-select-all]").forEach(function (master) {
master.addEventListener("change", function () {
var table = master.closest("table") || master.closest(".card");
qsa('tbody input[type="checkbox"]', table).forEach(function (cb) {
cb.checked = master.checked;
var tr = cb.closest("tr");
if (tr) tr.classList.toggle("is-selected", master.checked);
});
updateBulkBar(master.closest(".card"));
});
});
qsa('table.data tbody input[type="checkbox"]').forEach(function (cb) {
cb.addEventListener("change", function () {
var tr = cb.closest("tr");
if (tr) tr.classList.toggle("is-selected", cb.checked);
updateBulkBar(cb.closest(".card"));
});
});
updateBulkBar();
/* Settings section nav */
function activateSettings(href) {
if (!href || href.charAt(0) !== "#") return;
qsa("[data-settings-nav] a").forEach(function (a) {
a.classList.toggle("is-active", a.getAttribute("href") === href);
});
qsa("[data-settings-section]").forEach(function (sec) {
sec.classList.toggle("hidden", "#" + sec.id !== href);
});
}
qsa("[data-settings-nav] a").forEach(function (link) {
link.addEventListener("click", function (e) {
var href = link.getAttribute("href");
if (!href || href.charAt(0) !== "#") return;
e.preventDefault();
activateSettings(href);
if (history.replaceState) {
history.replaceState(null, "", href);
}
});
});
if (qsa("[data-settings-nav]").length && location.hash) {
activateSettings(location.hash);
}
/* Stagger reveal on page load */
qsa(".content > *").forEach(function (el, i) {
if (el.classList.contains("reveal")) return;
el.classList.add("reveal");
if (i > 0 && i < 6) {
el.classList.add("reveal-delay-" + Math.min(i, 5));
}
});
/* Chart.js dashboard chart */
var chartCanvas = qs("#ordersChart");
if (chartCanvas && typeof Chart !== "undefined") {
new Chart(chartCanvas, {
type: "bar",
data: {
labels: [
"04", "05", "06", "07", "08", "09", "10",
"11", "12", "13", "14", "15", "16", "17",
],
datasets: [
{
label: "Orders",
data: [4, 6, 5, 8, 7, 10, 9, 5, 7, 11, 9, 13, 10, 14],
backgroundColor: "rgba(255, 188, 57, 0.85)",
hoverBackgroundColor: "rgba(240, 168, 32, 1)",
borderRadius: 6,
borderSkipped: false,
maxBarThickness: 28,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 900, easing: "easeOutQuart" },
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: "#111827",
padding: 10,
cornerRadius: 8,
displayColors: false,
},
},
scales: {
x: {
grid: { display: false },
ticks: {
color: "#9ca3af",
font: { size: 10, family: "Inter" },
},
border: { display: false },
},
y: {
beginAtZero: true,
grid: { color: "#f3f4f6" },
ticks: {
color: "#9ca3af",
font: { size: 11, family: "Inter" },
precision: 0,
},
border: { display: false },
},
},
},
});
}
/* Dashboard state demos */
if (location.search.indexOf("empty=1") !== -1) {
qsa("[data-demo-content]").forEach(function (el) {
el.classList.add("hidden");
});
qsa("[data-demo-empty]").forEach(function (el) {
el.classList.remove("hidden");
});
}
if (location.search.indexOf("loading=1") !== -1) {
qsa("[data-demo-content]").forEach(function (el) {
el.classList.add("hidden");
});
qsa("[data-demo-loading]").forEach(function (el) {
el.classList.remove("hidden");
});
}
})();
+93
View File
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>iLED Admin — K-design mocks</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="gallery">
<div class="login-brand" style="margin-bottom: 12px">
<span class="mark" style="width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: grid; place-items: center"><svg class="ico" style="width:16px;height:16px" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
iLED Admin · Phase 1 mocks
</div>
<h1>K-design mock gallery</h1>
<p class="gallery-lead">
Korean SaaS aesthetic — airy surfaces, refined tables, iLED yellow used sparingly.
Open any screen below. Dashboard state demos:
<a href="02-dashboard.html?empty=1">empty</a> ·
<a href="02-dashboard.html?loading=1">loading</a>.
</p>
<div class="gallery-grid">
<a class="gallery-card" href="01-login.html">
<span class="num">01</span>
<h2>Login</h2>
<p>Centered auth card with error state.</p>
</a>
<a class="gallery-card" href="02-dashboard.html">
<span class="num">02</span>
<h2>Dashboard</h2>
<p>Alerts, KPIs, order queue, low stock, chart.</p>
</a>
<a class="gallery-card" href="03-products.html">
<span class="num">03</span>
<h2>Products</h2>
<p>Dense catalog table, warehouses &amp; groups tabs.</p>
</a>
<a class="gallery-card" href="04-product-form.html">
<span class="num">04</span>
<h2>Product form</h2>
<p>Sectioned editor: basics, locales, media, stock.</p>
</a>
<a class="gallery-card" href="05-orders.html">
<span class="num">05</span>
<h2>Orders</h2>
<p>List + pick-list fulfillment mode.</p>
</a>
<a class="gallery-card" href="06-order-detail.html">
<span class="num">06</span>
<h2>Order detail</h2>
<p>Timeline, shipping, pick, notes, invoice.</p>
</a>
<a class="gallery-card" href="07-promotions.html">
<span class="num">07</span>
<h2>Promotions</h2>
<p>Campaigns, codes, redemption summary.</p>
</a>
<a class="gallery-card" href="08-newsletter.html">
<span class="num">08</span>
<h2>Newsletter</h2>
<p>Composer, preview, subscribers, campaigns.</p>
</a>
<a class="gallery-card" href="09-reviews.html">
<span class="num">09</span>
<h2>Reviews</h2>
<p>Queue-first moderation with reply.</p>
</a>
<a class="gallery-card" href="10-customers.html">
<span class="num">10</span>
<h2>Customers <span class="new">NEW</span></h2>
<p>CRM list + customer detail panel.</p>
</a>
<a class="gallery-card" href="11-categories.html">
<span class="num">11</span>
<h2>Categories <span class="new">NEW</span></h2>
<p>Catalog structure with edit drawer.</p>
</a>
<a class="gallery-card" href="12-inventory.html">
<span class="num">12</span>
<h2>Inventory <span class="new">NEW</span></h2>
<p>Low-stock alerts &amp; warehouse matrix.</p>
</a>
<a class="gallery-card" href="13-settings.html">
<span class="num">13</span>
<h2>Settings <span class="new">NEW</span></h2>
<p>Store, thresholds, shipping, email.</p>
</a>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>
+74
View File
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Shell reference — iLED Admin</title>
<link rel="stylesheet" href="assets/admin-k.css" />
</head>
<body>
<div class="sidebar-backdrop" data-menu-close></div>
<div class="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
<span>iLED Admin</span>
</div>
<nav class="sidebar-nav" aria-label="Main">
<div class="nav-group">
<div class="nav-group-label">Ops</div>
<a class="nav-link is-active" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Catalog</div>
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
</div>
<div class="nav-group">
<div class="nav-group-label">People</div>
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
</div>
<div class="nav-group">
<div class="nav-group-label">Marketing</div>
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
</div>
<div class="nav-group">
<div class="nav-group-label">System</div>
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
</div>
</nav>
<div class="sidebar-foot">
<a class="btn btn-secondary w-full" href="01-login.html">Log out</a>
</div>
</aside>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
<span class="muted" style="font-size:13px">Shell reference</span>
</div>
<div class="topbar-right">
<div class="locale"><button type="button" class="is-active">PL</button><button type="button">EN</button></div>
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<h1>Shell</h1>
<p class="page-purpose">Shared chrome reference for all admin mocks.</p>
</div>
</div>
<div class="card card-pad">
<p class="muted" style="margin:0">Use this layout on every authenticated page. Nav groups: Ops, Catalog, People, Marketing, System.</p>
</div>
</main>
</div>
</div>
<script src="assets/admin-k.js"></script>
</body>
</html>