189 lines
No EOL
8.9 KiB
HTML
189 lines
No EOL
8.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Signal Admin – Users</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="color-scheme" content="light dark" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" />
|
||
<link rel="stylesheet" href="signal-dashboard-users-ink.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<aside class="sidebar" aria-label="Main navigation">
|
||
<div class="sidebar-brand">
|
||
<div class="sidebar-sigil" aria-hidden="true"><span></span></div>
|
||
<div class="sidebar-title">
|
||
<span class="sidebar-name">Signal Admin</span>
|
||
<span class="sidebar-sub">Ivory & Ink</span>
|
||
</div>
|
||
</div>
|
||
<nav class="sidebar-nav" role="navigation" aria-label="Main menu">
|
||
<button class="nav-item" type="button" aria-current="page">Sessions</button>
|
||
<button class="nav-item nav-item--active" type="button" aria-current="page">Users</button>
|
||
<button class="nav-item" type="button">Teams</button>
|
||
<button class="nav-item" type="button">Settings</button>
|
||
<button class="nav-item" type="button">Audit log</button>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main class="main-area" role="main">
|
||
<header class="top-bar">
|
||
<div class="top-bar-left">
|
||
<h1 class="page-title">Users</h1>
|
||
<p class="page-subtitle">
|
||
Manage access, roles and distraction-aware preferences per user.
|
||
</p>
|
||
</div>
|
||
<div class="top-bar-right">
|
||
<div class="theme-toggle" aria-label="Theme" role="radiogroup">
|
||
<button type="button" class="theme-button" data-theme="light" data-active="true" aria-checked="true" role="radio" aria-label="Light theme">Light</button>
|
||
<button type="button" class="theme-button" data-theme="dark" aria-checked="false" role="radio" aria-label="Dark theme">Dark</button>
|
||
</div>
|
||
<button class="profile-chip" type="button" aria-label="User menu">
|
||
<span class="profile-initials" aria-hidden="true">PJ</span>
|
||
<span class="profile-name">Patrick</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="toolbar" aria-label="User filters and actions">
|
||
<div class="toolbar-left">
|
||
<div class="field-inline">
|
||
<label for="user-search" class="field-label">Search</label>
|
||
<input id="user-search" name="user-search" type="search" placeholder="Find users by name or email" aria-label="Search users by name or email" />
|
||
</div>
|
||
<div class="field-inline">
|
||
<label for="role-filter" class="field-label">Role</label>
|
||
<select id="role-filter" name="role-filter" aria-label="Filter by role">
|
||
<option value="all">All roles</option>
|
||
<option value="admin">Admin</option>
|
||
<option value="maintainer">Maintainer</option>
|
||
<option value="member">Member</option>
|
||
<option value="guest">Guest</option>
|
||
</select>
|
||
</div>
|
||
<div class="field-inline">
|
||
<label for="status-filter" class="field-label">Status</label>
|
||
<select id="status-filter" name="status-filter" aria-label="Filter by status">
|
||
<option value="all">All statuses</option>
|
||
<option value="active">Active</option>
|
||
<option value="invited">Invited</option>
|
||
<option value="suspended">Suspended</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<button class="secondary-btn" type="button">Export users</button>
|
||
<button class="primary-btn" type="button"><span aria-hidden="true"></span><span>Invite user</span></button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="layout-grid">
|
||
<section class="panel panel--table" aria-label="User table">
|
||
<header class="panel-header">
|
||
<h2 class="panel-title">User list</h2>
|
||
<p class="panel-subtitle">Neutral surfaces with one primary ink colour for main actions.</p>
|
||
</header>
|
||
<div class="table-shell" role="region" aria-label="Users">
|
||
<table class="data-table" id="user-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col"><input type="checkbox" aria-label="Select all users" /></th>
|
||
<th scope="col">Name</th>
|
||
<th scope="col">Email</th>
|
||
<th scope="col">Role</th>
|
||
<th scope="col">Status</th>
|
||
<th scope="col">Sessions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr data-user="alex@example.org">
|
||
<td><input type="checkbox" aria-label="Select user" /></td>
|
||
<td>Alex Rivera</td>
|
||
<td>alex@example.org</td>
|
||
<td>Admin</td>
|
||
<td><span class="status status--ok">Active</span></td>
|
||
<td>42</td>
|
||
</tr>
|
||
<tr data-user="lee@example.org">
|
||
<td><input type="checkbox" aria-label="Select user" /></td>
|
||
<td>Lee Chen</td>
|
||
<td>lee@example.org</td>
|
||
<td>Maintainer</td>
|
||
<td><span class="status status--ok">Active</span></td>
|
||
<td>18</td>
|
||
</tr>
|
||
<tr data-user="sam@example.org">
|
||
<td><input type="checkbox" aria-label="Select user" /></td>
|
||
<td>Sam K.</td>
|
||
<td>sam@example.org</td>
|
||
<td>Member</td>
|
||
<td><span class="status status--warn">Invited</span></td>
|
||
<td>0</td>
|
||
</tr>
|
||
<tr data-user="jules@example.org">
|
||
<td><input type="checkbox" aria-label="Select user" /></td>
|
||
<td>Jules Hart</td>
|
||
<td>jules@example.org</td>
|
||
<td>Member</td>
|
||
<td><span class="status status--error">Suspended</span></td>
|
||
<td>7</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<footer class="table-footer">
|
||
<div class="table-summary" aria-live="polite">Showing 4 of 128 users.</div>
|
||
<div class="table-actions">
|
||
<button class="secondary-btn" type="button">Clear selection</button>
|
||
<button class="danger-btn" type="button">Remove selected</button>
|
||
</div>
|
||
</footer>
|
||
</section>
|
||
|
||
<aside class="panel panel--detail" aria-label="User details">
|
||
<header class="panel-header">
|
||
<h2 class="panel-title">User details</h2>
|
||
<p class="panel-subtitle">Select a user to review roles, status and distraction-aware settings.</p>
|
||
</header>
|
||
|
||
<div class="detail-empty" data-state="empty" role="status" aria-live="polite">
|
||
<p>No user selected.</p>
|
||
<p class="detail-hint">Choose one row on the left to keep a single focused user view.</p>
|
||
</div>
|
||
|
||
<div class="detail-body" data-state="inactive" hidden>
|
||
<dl class="detail-list">
|
||
<div><dt>Name</dt><dd id="detail-name">—</dd></div>
|
||
<div><dt>Email</dt><dd id="detail-email">—</dd></div>
|
||
<div><dt>Role</dt><dd id="detail-role">—</dd></div>
|
||
<div><dt>Status</dt><dd id="detail-status">—</dd></div>
|
||
<div><dt>Total sessions</dt><dd id="detail-sessions">—</dd></div>
|
||
</dl>
|
||
|
||
<section class="detail-preferences" aria-label="Distraction-aware settings">
|
||
<h3>Distraction-aware settings</h3>
|
||
<ul class="detail-flags">
|
||
<li><span class="flag-dot flag-dot--enabled" aria-hidden="true"></span>Session layout uses neutral ivory surfaces and one ink primary.</li>
|
||
<li><span class="flag-dot flag-dot--enabled" aria-hidden="true"></span>Motion reduced according to <code>prefers-reduced-motion</code>.</li>
|
||
<li><span class="flag-dot flag-dot--disabled" aria-hidden="true"></span>Daily summary emails disabled.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="detail-actions" aria-label="User actions">
|
||
<button class="secondary-btn" type="button">Edit roles</button>
|
||
<button class="primary-btn primary-btn--small" type="button"><span aria-hidden="true"></span><span>Reset password</span></button>
|
||
<button class="danger-btn" type="button">Suspend user</button>
|
||
</section>
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="signal-admin-users-ink.js" defer></script>
|
||
</body>
|
||
</html> |