258 lines
No EOL
9.3 KiB
HTML
258 lines
No EOL
9.3 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="stylesheet" href="signal-admin-users.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">Cyan & Red</span>
|
||
</div>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<button class="nav-item" type="button">Sessions</button>
|
||
<button class="nav-item nav-item--active" type="button">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">
|
||
<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"
|
||
>
|
||
Light
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="theme-button"
|
||
data-theme="dark"
|
||
aria-checked="false"
|
||
role="radio"
|
||
>
|
||
Dark
|
||
</button>
|
||
</div>
|
||
<button class="profile-chip" type="button">
|
||
<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"
|
||
/>
|
||
</div>
|
||
<div class="field-inline">
|
||
<label for="role-filter" class="field-label">Role</label>
|
||
<select id="role-filter" name="role-filter">
|
||
<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">
|
||
<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">
|
||
Cyan marks primary admin actions. Red is reserved for destructive updates.
|
||
</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">
|
||
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">
|
||
<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="active">
|
||
<dl class="detail-list">
|
||
<div>
|
||
<dt>Name</dt>
|
||
<dd id="detail-name">Jules Hart</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Email</dt>
|
||
<dd id="detail-email">jules@example.org</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Role</dt>
|
||
<dd id="detail-role">Member</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Status</dt>
|
||
<dd id="detail-status">Suspended</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Total sessions</dt>
|
||
<dd id="detail-sessions">7</dd>
|
||
</div>
|
||
</dl>
|
||
|
||
<section class="detail-preferences">
|
||
<h3>Distraction-aware settings</h3>
|
||
<ul class="detail-flags">
|
||
<li>
|
||
<span class="flag-dot flag-dot--enabled"></span>
|
||
Session layout uses neutral surfaces and one cyan primary.
|
||
</li>
|
||
<li>
|
||
<span class="flag-dot flag-dot--enabled"></span>
|
||
Motion reduced according to `prefers-reduced-motion`.
|
||
</li>
|
||
<li>
|
||
<span class="flag-dot flag-dot--disabled"></span>
|
||
Daily summary emails disabled.
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="detail-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.js"></script>
|
||
</body>
|
||
</html> |