100 lines
11 KiB
HTML
100 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="UmbraTrans administration and management">
|
||
<title>Control panel · UmbraTrans</title>
|
||
<link rel="icon" type="image/jpeg" href="../assets/umbratrans-icon.jpg">
|
||
<link rel="stylesheet" href="../assets/styles.css">
|
||
</head>
|
||
<body class="admin-page">
|
||
<div class="admin-shell">
|
||
<header class="admin-topbar">
|
||
<a class="brand-lockup" href="../index.html"><img class="brand-image" src="../assets/umbratrans-icon.jpg" alt="" aria-hidden="true"><span>UmbraTrans</span></a>
|
||
<div class="admin-context"><span class="status-pill status-pill--info">Control panel</span><span class="admin-context-name">System administration</span></div>
|
||
<div class="admin-top-actions"><span class="admin-user"><span class="avatar avatar--admin">OP</span> Operator</span><a class="admin-exit" href="../index.html">Exit admin ↗</a></div>
|
||
</header>
|
||
<div class="admin-layout">
|
||
<aside class="admin-sidebar" aria-label="Administration navigation">
|
||
<div class="admin-nav-label">Overview</div>
|
||
<a class="admin-nav-link admin-nav-link--active" href="#dashboard"><span>▦</span>Dashboard</a>
|
||
<a class="admin-nav-link" href="#accounts"><span>♙</span>Accounts</a>
|
||
<a class="admin-nav-link" href="#projects"><span>◈</span>Projects</a>
|
||
<div class="admin-nav-label admin-nav-label--spaced">Operations</div>
|
||
<a class="admin-nav-link" href="#maintenance"><span>⚙</span>Maintenance</a>
|
||
<a class="admin-nav-link" href="#statistics"><span>⌁</span>Statistics</a>
|
||
<a class="admin-nav-link" href="#audit"><span>≡</span>Audit log</a>
|
||
<div class="admin-sidebar-footer"><span class="status-dot status-dot--good"></span> Prototype environment<br><small>No production data connected</small></div>
|
||
</aside>
|
||
<main class="admin-main" id="dashboard">
|
||
<div class="admin-banner"><strong>Prototype control panel</strong><span>Buttons demonstrate the intended management flow. No accounts, passwords, or database records are changed.</span></div>
|
||
<section class="admin-heading">
|
||
<div><p class="eyebrow">Administration</p><h1>System overview</h1><p>Manage identities, project access, maintenance, and service health.</p></div>
|
||
<button class="button button--primary" id="open-account-modal">＋ Provision account</button>
|
||
</section>
|
||
|
||
<section class="admin-stat-grid" aria-label="System statistics">
|
||
<article class="admin-stat"><span class="admin-stat-label">Active users</span><strong>24</strong><small><span class="trend-up">↑ 3</span> this month</small></article>
|
||
<article class="admin-stat"><span class="admin-stat-label">Organizations</span><strong>3</strong><small>2 active · 1 pending</small></article>
|
||
<article class="admin-stat"><span class="admin-stat-label">Projects</span><strong>11</strong><small><span class="trend-up">↑ 2</span> in production</small></article>
|
||
<article class="admin-stat"><span class="admin-stat-label">Worker health</span><strong class="health-value"><span class="status-dot status-dot--good"></span>Good</strong><small>Last check 2 min ago</small></article>
|
||
</section>
|
||
|
||
<div class="admin-columns">
|
||
<section class="admin-card" id="accounts">
|
||
<div class="admin-card-heading"><div><p class="eyebrow">Identity</p><h2>Accounts</h2></div><button class="admin-text-button" data-demo-action="Account filtering is not connected in the prototype">View all →</button></div>
|
||
<div class="admin-table-wrap"><table class="admin-table"><thead><tr><th>User</th><th>Organization</th><th>Role</th><th>Status</th><th>Last activity</th></tr></thead><tbody>
|
||
<tr><td><div class="table-user"><span class="avatar avatar--small avatar--violet">AM</span><span><strong>Alex Morgan</strong><small>alex@example.com</small></span></div></td><td>Northstar Media</td><td>Project manager</td><td><span class="status-pill status-pill--success">Active</span></td><td>4 min ago</td></tr>
|
||
<tr><td><div class="table-user"><span class="avatar avatar--small avatar--blue">SK</span><span><strong>Sam Kline</strong><small>sam@example.com</small></span></div></td><td>Northstar Media</td><td>Translator</td><td><span class="status-pill status-pill--info">MFA enabled</span></td><td>18 min ago</td></tr>
|
||
<tr><td><div class="table-user"><span class="avatar avatar--small avatar--amber">JR</span><span><strong>Jamie Reed</strong><small>jamie@example.com</small></span></div></td><td>Harbor House</td><td>Audio director</td><td><span class="status-pill status-pill--warning">Temp password</span></td><td>Never</td></tr>
|
||
<tr><td><div class="table-user"><span class="avatar avatar--small avatar--rose">TP</span><span><strong>Taylor Price</strong><small>taylor@example.com</small></span></div></td><td>Harbor House</td><td>Viewer</td><td><span class="status-pill status-pill--muted">Invited</span></td><td>Never</td></tr>
|
||
</tbody></table></div>
|
||
</section>
|
||
<section class="admin-card" id="projects">
|
||
<div class="admin-card-heading"><div><p class="eyebrow">Tenancy</p><h2>Projects</h2></div><button class="admin-text-button" data-demo-action="Project management is not connected in the prototype">Manage →</button></div>
|
||
<div class="admin-project-list">
|
||
<div class="admin-project-row"><span class="project-mark project-mark--purple">DH</span><div><strong>Deal Hunter</strong><small>Northstar Media · 4 locales</small></div><span class="status-pill status-pill--warning">Audio in progress</span></div>
|
||
<div class="admin-project-row"><span class="project-mark project-mark--blue">TI</span><div><strong>Treasure Island</strong><small>Northstar Media · 2 locales</small></div><span class="status-pill status-pill--success">Ready for review</span></div>
|
||
<div class="admin-project-row"><span class="project-mark project-mark--teal">LD</span><div><strong>Last Dwarf</strong><small>Harbor House · 1 locale</small></div><span class="status-pill status-pill--muted">Draft</span></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<section class="admin-card admin-card--maintenance" id="maintenance">
|
||
<div class="admin-card-heading"><div><p class="eyebrow">Operations</p><h2>Maintenance</h2></div><span class="status-pill status-pill--success">All systems nominal</span></div>
|
||
<div class="maintenance-grid">
|
||
<div class="maintenance-item"><span class="maintenance-icon maintenance-icon--green">✓</span><div><strong>Audio workers</strong><small>3 online · 0 stalled</small></div><button class="admin-text-button" data-demo-action="Worker controls are not connected in the prototype">Inspect</button></div>
|
||
<div class="maintenance-item"><span class="maintenance-icon maintenance-icon--purple">↻</span><div><strong>Background jobs</strong><small>42 queued · 3 retrying</small></div><button class="admin-text-button" data-demo-action="Queue controls are not connected in the prototype">Inspect</button></div>
|
||
<div class="maintenance-item"><span class="maintenance-icon maintenance-icon--blue">◫</span><div><strong>Storage</strong><small>Object storage connected</small></div><button class="admin-text-button" data-demo-action="Storage controls are not connected in the prototype">Inspect</button></div>
|
||
<div class="maintenance-item"><span class="maintenance-icon maintenance-icon--amber">!</span><div><strong>Password policy</strong><small>2 temporary accounts pending first login</small></div><button class="admin-text-button" data-demo-action="Account policy is not connected in the prototype">Review</button></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="admin-columns admin-columns--lower" id="statistics">
|
||
<section class="admin-card"><div class="admin-card-heading"><div><p class="eyebrow">Usage</p><h2>Production activity</h2></div><span class="muted-label">Last 30 days</span></div><div class="admin-chart-placeholder"><div class="chart-bars"><i style="height:38%"></i><i style="height:52%"></i><i style="height:46%"></i><i style="height:68%"></i><i style="height:58%"></i><i style="height:82%"></i><i style="height:72%"></i><i style="height:94%"></i><i style="height:78%"></i><i style="height:88%"></i><i style="height:64%"></i><i style="height:76%"></i></div><div class="chart-axis"><span>Aug 26</span><span>Sep 09</span><span>Sep 26</span></div></div></section>
|
||
<section class="admin-card" id="audit"><div class="admin-card-heading"><div><p class="eyebrow">Traceability</p><h2>Recent audit events</h2></div><button class="admin-text-button" data-demo-action="Audit export is not connected in the prototype">Export →</button></div><div class="audit-list"><div><span class="audit-dot audit-dot--purple"></span><p><strong>Project access updated</strong><small>Alex Morgan · 4 min ago</small></p></div><div><span class="audit-dot audit-dot--blue"></span><p><strong>Translation batch approved</strong><small>Sam Kline · 18 min ago</small></p></div><div><span class="audit-dot audit-dot--amber"></span><p><strong>Temporary account provisioned</strong><small>Operator · 1 hr ago</small></p></div></div></section>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="account-modal" hidden>
|
||
<section class="modal" role="dialog" aria-modal="true" aria-labelledby="account-modal-title">
|
||
<div class="modal-heading"><div><p class="eyebrow">Identity</p><h2 id="account-modal-title">Provision an account</h2></div><button class="modal-close" id="close-account-modal" aria-label="Close">×</button></div>
|
||
<div class="modal-notice"><strong>Prototype only.</strong> A real implementation would issue either a one-time temporary password or an OIDC enrollment invitation. The temporary password is never displayed again and must be changed at first login.</div>
|
||
<form id="account-form" class="stack-form">
|
||
<label for="account-name">Full name</label><input id="account-name" type="text" placeholder="Taylor Price" required>
|
||
<label for="account-email">Email address</label><input id="account-email" type="email" placeholder="taylor@example.com" required>
|
||
<label for="account-org">Organization</label><select id="account-org"><option>Northstar Media</option><option>Harbor House</option></select>
|
||
<label for="account-role">Initial role</label><select id="account-role"><option>Viewer</option><option>Translator</option><option>Audio director</option><option>Project manager</option></select>
|
||
<label class="checkbox-row"><input id="oidc-enrollment" type="checkbox"> Use OIDC enrollment instead of a temporary password</label>
|
||
<div class="modal-actions"><button type="button" class="button button--ghost" id="cancel-account-modal">Cancel</button><button type="submit" class="button button--primary">Create prototype account</button></div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
||
<script src="../assets/admin.js"></script>
|
||
</body>
|
||
</html>
|