Add green-bean inventory and cupping features
Ports inventory management and SCA-style cupping scoring from hope_roaster: lot tracking with audit-logged consumption, cupping sessions with server-authoritative scoring and a live radar chart, and links from the planner (draw-from-lot, open-cupping-session). Also fixes the Blend/Single-origin toggle layout, replaces tooltips with an in-context "why" teaching layer, and stages the planner UI into pre-roast vs. post-roast phases.
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Account — Roast Planner</title>
|
||||
<link rel="stylesheet" href="/app.css" />
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
||||
<meta name="theme-color" content="#A8481A" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<nav class="side-nav" id="side-nav" aria-label="Main navigation">
|
||||
<div class="side-nav-brand">
|
||||
<span class="brand-mark" aria-hidden="true">◐</span>
|
||||
<span class="brand-name">Roast Planner</span>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<a class="nav-item" href="/app"
|
||||
><span class="nav-icon" aria-hidden="true">◐</span
|
||||
><span class="nav-label">Planner</span></a
|
||||
>
|
||||
<a class="nav-item" href="#your-plans"
|
||||
><span class="nav-icon" aria-hidden="true">▤</span
|
||||
><span class="nav-label">Plans</span></a
|
||||
>
|
||||
<a class="nav-item" href="/inventory"
|
||||
><span class="nav-icon" aria-hidden="true">▥</span
|
||||
><span class="nav-label">Inventory</span></a
|
||||
>
|
||||
<a class="nav-item" href="/cupping"
|
||||
><span class="nav-icon" aria-hidden="true">◒</span
|
||||
><span class="nav-label">Cupping</span></a
|
||||
>
|
||||
<a class="nav-item" href="/account" aria-current="page"
|
||||
><span class="nav-icon" aria-hidden="true">◔</span
|
||||
><span class="nav-label">Account</span></a
|
||||
>
|
||||
<a class="nav-item hidden" id="nav-admin" href="/admin"
|
||||
><span class="nav-icon" aria-hidden="true">⚙</span
|
||||
><span class="nav-label">Admin</span></a
|
||||
>
|
||||
</div>
|
||||
<div class="nav-spacer"></div>
|
||||
<button
|
||||
class="icon-btn nav-collapse-toggle"
|
||||
type="button"
|
||||
id="nav-collapse"
|
||||
aria-label="Collapse navigation"
|
||||
title="Collapse navigation"
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<div class="nav-user">
|
||||
<div class="nav-user-avatar" id="nav-user-avatar" aria-hidden="true"></div>
|
||||
<div class="nav-user-detail">
|
||||
<span class="nav-user-email" id="account-email"></span>
|
||||
<button class="nav-user-logout" type="button" id="btn-logout">
|
||||
Log out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="app-workspace" id="app-workspace">
|
||||
<header class="app-header">
|
||||
<div class="header-row-top">
|
||||
<button
|
||||
class="icon-btn nav-hamburger"
|
||||
type="button"
|
||||
id="nav-hamburger"
|
||||
aria-label="Open navigation"
|
||||
aria-expanded="false"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<div class="brand">
|
||||
<div class="brand-text">
|
||||
<h1>Account</h1>
|
||||
<p class="brand-sub">Profile, security, plans, and devices</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="drawer-overlay hidden" id="drawer-overlay"></div>
|
||||
|
||||
<main class="page-content">
|
||||
<section class="panel-card" id="profile">
|
||||
<div class="panel-head">
|
||||
<h2>Profile</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>
|
||||
<strong id="profile-email"></strong>
|
||||
<span class="badge badge-admin hidden" id="profile-role-admin"
|
||||
>Admin</span
|
||||
>
|
||||
</p>
|
||||
<p class="muted" id="profile-since"></p>
|
||||
<p class="subhead">Change email</p>
|
||||
<form id="email-form" class="inline-form">
|
||||
<label class="field"
|
||||
><span class="field-label">New email</span
|
||||
><input
|
||||
class="field-input"
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
/></label>
|
||||
<label class="field"
|
||||
><span class="field-label">Current password</span
|
||||
><input
|
||||
class="field-input"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/></label>
|
||||
<button class="primary-btn" type="submit">Update email</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-card" id="security">
|
||||
<div class="panel-head">
|
||||
<h2>Security</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p class="subhead">Change password</p>
|
||||
<form id="password-form" class="inline-form">
|
||||
<label class="field"
|
||||
><span class="field-label">Current password</span
|
||||
><input
|
||||
class="field-input"
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/></label>
|
||||
<label class="field"
|
||||
><span class="field-label">New password</span
|
||||
><input
|
||||
class="field-input"
|
||||
type="password"
|
||||
name="newPassword"
|
||||
required
|
||||
minlength="12"
|
||||
autocomplete="new-password"
|
||||
/></label>
|
||||
<label class="field"
|
||||
><span class="field-label">Confirm new password</span
|
||||
><input
|
||||
class="field-input"
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
required
|
||||
minlength="12"
|
||||
autocomplete="new-password"
|
||||
/></label>
|
||||
<button class="primary-btn" type="submit">
|
||||
Update password
|
||||
</button>
|
||||
</form>
|
||||
<p class="subhead">Active sessions</p>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table" id="sessions-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Last seen</th>
|
||||
<th>Expires</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="sessions-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="ghost-btn" type="button" id="btn-revoke-others">
|
||||
Sign out everywhere else
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-card" id="your-plans">
|
||||
<div class="panel-head">
|
||||
<h2>Your plans</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="table-wrap">
|
||||
<table class="data-table" id="plans-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Updated</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="plans-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-card" id="app">
|
||||
<div class="panel-head">
|
||||
<h2>App</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p class="muted">
|
||||
Install Roast Planner for a focused, offline-capable
|
||||
workspace. Updates wait for your confirmation so an
|
||||
in-progress plan is never discarded.
|
||||
</p>
|
||||
<button id="btn-install" type="button" class="primary-btn hidden">
|
||||
Install Roast Planner
|
||||
</button>
|
||||
<button id="btn-refresh" type="button" class="ghost-btn hidden">
|
||||
Update ready — refresh safely
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-card danger-zone" id="danger">
|
||||
<div class="panel-head">
|
||||
<h2>Danger zone</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p class="muted">
|
||||
Deleting your account permanently removes your plans and
|
||||
cannot be undone.
|
||||
</p>
|
||||
<form id="delete-form" class="inline-form">
|
||||
<label class="field"
|
||||
><span class="field-label"
|
||||
>Type your email to confirm</span
|
||||
><input class="field-input" type="email" name="confirmEmail" required
|
||||
/></label>
|
||||
<label class="field"
|
||||
><span class="field-label">Password</span
|
||||
><input
|
||||
class="field-input"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/></label>
|
||||
<button class="ghost-btn" type="submit" style="border-color:var(--fail);color:var(--fail)">
|
||||
Delete my account
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/js/account.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user