233 lines
19 KiB
HTML
233 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>VidConf — Админка</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" href="../tokens.css">
|
||
<style>
|
||
html { min-width: 1280px; }
|
||
|
||
.app-shell { display: flex; min-height: 100vh; }
|
||
|
||
/* ---------- Сайдбар ---------- */
|
||
.sidebar { width: 260px; flex-shrink: 0; background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; }
|
||
.brand-mark { display: inline-flex; align-items: center; gap: 8px; font: var(--text-h3); color: var(--color-ink-700); padding: 0 var(--space-2); margin-bottom: var(--space-8); }
|
||
.brand-mark .logo-mark { width: 22px; height: 22px; flex-shrink: 0; }
|
||
|
||
.side-nav { display: flex; flex-direction: column; gap: 2px; }
|
||
.side-link {
|
||
display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md);
|
||
font: var(--text-body); font-weight: 600; color: var(--color-ink-500); text-decoration: none;
|
||
}
|
||
.side-link:hover { background: var(--color-bg-alt); color: var(--color-ink-900); }
|
||
.side-link.is-active { background: var(--color-bg-alt); color: var(--color-ink-700); }
|
||
.side-link .icon { color: inherit; }
|
||
|
||
.side-footer { margin-top: auto; padding: var(--space-3) var(--space-2); border-top: 1px solid var(--color-border); }
|
||
.avatar-btn { display: flex; align-items: center; gap: 8px; padding: 8px 0; width: 100%; background: none; border: none; text-align: left; }
|
||
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-ink-700); color: #fff; display:flex; align-items:center; justify-content:center; font: var(--text-caption); text-transform: none; letter-spacing: 0; flex-shrink: 0; }
|
||
.avatar-btn div strong { display: block; font: var(--text-body); color: var(--color-ink-900); }
|
||
.avatar-btn div span { font: 12px var(--font-body); color: var(--color-ink-500); }
|
||
|
||
/* ---------- Контент ---------- */
|
||
main { flex: 1; padding: var(--space-8); max-width: 1220px; }
|
||
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-6); }
|
||
.page-head h1 { font: var(--text-display-lg); font-family: var(--font-display); color: var(--color-ink-700); margin: 0 0 6px; }
|
||
.page-head p { font: var(--text-body-lg); color: var(--color-ink-500); margin: 0; }
|
||
|
||
.btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-family: var(--font-body); white-space: nowrap; transition: background var(--transition-fast), box-shadow var(--transition-fast); }
|
||
.btn-primary { background: var(--color-accent); color: var(--color-accent-text); font: var(--text-body); font-weight: 700; padding: 11px 22px; border-radius: var(--radius-full); }
|
||
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
|
||
.btn-secondary { background: transparent; color: var(--color-ink-700); border: 1.5px solid var(--color-border-pill); font: var(--text-body); font-weight: 600; padding: 9px 18px; border-radius: var(--radius-full); }
|
||
.btn-secondary:hover { background: var(--color-bg-alt); }
|
||
.btn-danger { background: var(--color-danger); color: #fff; font: var(--text-body); font-weight: 700; padding: 9px 18px; border-radius: var(--radius-full); }
|
||
|
||
/* Стат-виджеты (glass) */
|
||
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
|
||
.stat-glass {
|
||
background: var(--color-surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-glass); border-radius: var(--radius-xl);
|
||
padding: var(--space-5); background-color: var(--color-bg-alt);
|
||
}
|
||
.stat-glass strong { display: block; font: var(--text-display-xl); font-family: var(--font-display); font-size: 36px; color: var(--color-ink-700); }
|
||
.stat-glass span { font: var(--text-body); color: var(--color-ink-500); }
|
||
|
||
/* Табы разделов */
|
||
.section-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
|
||
.section-tab { padding: 10px 4px; margin-right: var(--space-6); background: none; border: none; border-bottom: 2px solid transparent; font: var(--text-body-lg); font-weight: 600; color: var(--color-ink-500); }
|
||
.section-tab.is-active { color: var(--color-ink-700); border-color: var(--color-accent-active); }
|
||
|
||
.toolbar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-4); }
|
||
.search-wrap { position: relative; width: 320px; }
|
||
.search-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-ink-400); }
|
||
.search-wrap input { width: 100%; font: var(--text-body); padding: 9px 12px 9px 38px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); }
|
||
.search-wrap input:focus { outline: none; border-color: var(--color-focus-ring); }
|
||
|
||
/* Таблица */
|
||
.table-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); overflow: hidden; margin-bottom: var(--space-8); }
|
||
table { width: 100%; border-collapse: collapse; }
|
||
thead th { text-align: left; background: var(--color-bg-alt); font: var(--text-caption); color: var(--color-ink-500); padding: 12px 20px; text-transform: uppercase; }
|
||
tbody td { padding: 14px 20px; font: var(--text-body-lg); color: var(--color-ink-900); border-top: 1px solid var(--color-border); }
|
||
tbody tr:hover { background: var(--color-bg-alt); }
|
||
|
||
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); font: var(--text-caption); white-space: nowrap; }
|
||
.badge-free { background: var(--color-success-bg); color: var(--color-success); }
|
||
.badge-busy { background: var(--color-danger-bg); color: var(--color-danger); }
|
||
.badge-booked { background: var(--color-warning-bg); color: var(--color-warning); }
|
||
.badge-locked { background: var(--color-bg-alt); color: var(--color-ink-700); }
|
||
.badge-role-admin { background: var(--color-ink-700); color: #fff; }
|
||
.badge-role-user { background: var(--color-bg-alt); color: var(--color-ink-500); }
|
||
|
||
.row-actions { display: flex; gap: 6px; }
|
||
.icon-btn { width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-500); display:flex; align-items:center; justify-content:center; }
|
||
.icon-btn:hover { border-color: var(--color-border-strong); color: var(--color-ink-900); }
|
||
.icon-btn.danger:hover { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-bg); }
|
||
|
||
.user-cell { display: flex; align-items: center; gap: 10px; }
|
||
.user-cell .avatar { width: 32px; height: 32px; font-size: 12px; }
|
||
.user-cell div span { display: block; font: 13px var(--font-body); color: var(--color-ink-500); }
|
||
|
||
/* Секция рассылки */
|
||
.invite-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-6); display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); }
|
||
.invite-card h2 { font: var(--text-h2); margin: 0 0 4px; color: var(--color-ink-900); }
|
||
.invite-card p.desc { font: var(--text-body); color: var(--color-ink-500); margin: 0 0 var(--space-5); }
|
||
.invite-card textarea {
|
||
width: 100%; min-height: 140px; font: var(--text-body-lg); color: var(--color-ink-900); font-family: var(--font-mono);
|
||
padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); resize: vertical;
|
||
}
|
||
.invite-card textarea:focus { outline: none; border-color: var(--color-focus-ring); }
|
||
.invite-side { background: var(--color-bg-alt); border-radius: var(--radius-xl); padding: var(--space-5); }
|
||
.invite-side h3 { font: var(--text-h3); margin: 0 0 var(--space-3); color: var(--color-ink-900); }
|
||
.invite-side ul { margin: 0 0 var(--space-5); padding-left: 18px; font: var(--text-body); color: var(--color-ink-500); }
|
||
.invite-side li { margin-bottom: 6px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<svg style="display:none">
|
||
<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-video" viewBox="0 0 24 24"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="m22 8-6 4 6 4V8Z"/></symbol>
|
||
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
|
||
<symbol id="i-users" 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-mail" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 6 10 7 10-7"/></symbol>
|
||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol>
|
||
<symbol id="i-plus" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></symbol>
|
||
<symbol id="i-pencil" viewBox="0 0 24 24"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></symbol>
|
||
<symbol id="i-trash" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></symbol>
|
||
<symbol id="i-send" viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></symbol>
|
||
<symbol id="i-check-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></symbol>
|
||
<symbol id="i-ban" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/></symbol>
|
||
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></symbol>
|
||
</svg>
|
||
|
||
<div class="app-shell">
|
||
|
||
<aside class="sidebar">
|
||
<div class="brand-mark"><svg class="logo-mark" viewBox="0 0 32 32" fill="none" aria-hidden="true"><polygon points="21,16 18.5,20.3 13.5,20.3 11,16 13.5,11.7 18.5,11.7" fill="currentColor"/><circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="2.6" stroke-dasharray="12 6"/></svg> VidConf</div>
|
||
<nav class="side-nav">
|
||
<a class="side-link is-active" href="#rooms"><svg class="icon" style="width:18px;height:18px"><use href="#i-video"/></svg>Конференции</a>
|
||
<a class="side-link" href="#closed"><svg class="icon" style="width:18px;height:18px"><use href="#i-lock"/></svg>Закрытые конференции</a>
|
||
<a class="side-link" href="#users"><svg class="icon" style="width:18px;height:18px"><use href="#i-users"/></svg>Пользователи</a>
|
||
<a class="side-link" href="#invites"><svg class="icon" style="width:18px;height:18px"><use href="#i-mail"/></svg>Рассылка приглашений</a>
|
||
</nav>
|
||
<div class="side-footer">
|
||
<button class="avatar-btn"><span class="avatar">АИ</span><div><strong>Анна Иванова</strong><span>Администратор</span></div></button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main>
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>Администрирование</h1>
|
||
<p>Управление конференциями, доступом и пользователями VidConf</p>
|
||
</div>
|
||
<button class="btn btn-primary"><svg class="icon" style="width:16px;height:16px"><use href="#i-plus"/></svg>Добавить конференцию</button>
|
||
</div>
|
||
|
||
<section class="stat-grid">
|
||
<div class="stat-glass"><strong>100</strong><span>Всего конференций</span></div>
|
||
<div class="stat-glass"><strong>12</strong><span>Активны сейчас</span></div>
|
||
<div class="stat-glass"><strong>34</strong><span>Забронировано сегодня</span></div>
|
||
<div class="stat-glass"><strong>248</strong><span>Пользователей</span></div>
|
||
</section>
|
||
|
||
<div class="section-tabs">
|
||
<button class="section-tab is-active">Конференции</button>
|
||
<button class="section-tab">Закрытые конференции</button>
|
||
<button class="section-tab">Пользователи</button>
|
||
<button class="section-tab">Рассылка приглашений</button>
|
||
</div>
|
||
|
||
<!-- ===================== КОНФЕРЕНЦИИ ===================== -->
|
||
<div class="toolbar-row">
|
||
<div class="search-wrap"><svg class="icon"><use href="#i-search"/></svg><input type="text" placeholder="Поиск конференции…"></div>
|
||
<span style="font:14px var(--font-body); color:var(--color-ink-500)">Показано 6 из 100</span>
|
||
</div>
|
||
|
||
<div class="table-card">
|
||
<table>
|
||
<thead><tr><th>Конференция</th><th>Вместимость</th><th>Статус</th><th>Тип</th><th></th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Переговорная №01</td><td>8 мест</td><td><span class="badge badge-free"><svg class="icon" style="width:12px;height:12px"><use href="#i-check-circle"/></svg>Свободна</span></td><td>Открытая</td>
|
||
<td><div class="row-actions"><button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:16px;height:16px"><use href="#i-pencil"/></svg></button><button class="icon-btn danger" aria-label="Удалить"><svg class="icon" style="width:16px;height:16px"><use href="#i-trash"/></svg></button></div></td></tr>
|
||
<tr><td>Переговорная №02</td><td>10 мест</td><td><span class="badge badge-busy"><svg class="icon" style="width:12px;height:12px"><use href="#i-ban"/></svg>Занята</span></td><td>Открытая</td>
|
||
<td><div class="row-actions"><button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:16px;height:16px"><use href="#i-pencil"/></svg></button><button class="icon-btn danger" aria-label="Удалить"><svg class="icon" style="width:16px;height:16px"><use href="#i-trash"/></svg></button></div></td></tr>
|
||
<tr><td>Переговорная №04</td><td>12 мест</td><td><span class="badge badge-locked"><svg class="icon" style="width:12px;height:12px"><use href="#i-lock"/></svg>По паролю</span></td><td>Закрытая</td>
|
||
<td><div class="row-actions"><button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:16px;height:16px"><use href="#i-pencil"/></svg></button><button class="icon-btn danger" aria-label="Удалить"><svg class="icon" style="width:16px;height:16px"><use href="#i-trash"/></svg></button></div></td></tr>
|
||
<tr><td>Переговорная №42</td><td>16 мест</td><td><span class="badge badge-booked"><svg class="icon" style="width:12px;height:12px"><use href="#i-clock"/></svg>Забронирована</span></td><td>Открытая</td>
|
||
<td><div class="row-actions"><button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:16px;height:16px"><use href="#i-pencil"/></svg></button><button class="icon-btn danger" aria-label="Удалить"><svg class="icon" style="width:16px;height:16px"><use href="#i-trash"/></svg></button></div></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ===================== ПОЛЬЗОВАТЕЛИ ===================== -->
|
||
<div class="page-head" style="margin-bottom: var(--space-4)"><h2 style="font:var(--text-h2); color:var(--color-ink-900); margin:0">Пользователи</h2></div>
|
||
<div class="table-card">
|
||
<table>
|
||
<thead><tr><th>Пользователь</th><th>Роль</th><th>Регистрация</th><th>Статус</th><th></th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="user-cell"><span class="avatar">АИ</span><div>Анна Иванова<span>a.ivanova@vidconf.dev</span></div></div></td>
|
||
<td><span class="badge badge-role-admin">Администратор</span></td>
|
||
<td>03.02.2026</td>
|
||
<td><span class="badge badge-free"><svg class="icon" style="width:12px;height:12px"><use href="#i-check-circle"/></svg>Активен</span></td>
|
||
<td><div class="row-actions"><button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:16px;height:16px"><use href="#i-pencil"/></svg></button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="user-cell"><span class="avatar">МК</span><div>Мария Кузнецова<span>m.kuznetsova@company.ru</span></div></div></td>
|
||
<td><span class="badge badge-role-user">Пользователь</span></td>
|
||
<td>15.07.2026</td>
|
||
<td><span class="badge badge-booked"><svg class="icon" style="width:12px;height:12px"><use href="#i-clock"/></svg>Ждёт подтверждения</span></td>
|
||
<td><div class="row-actions"><button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:16px;height:16px"><use href="#i-pencil"/></svg></button><button class="icon-btn danger" aria-label="Удалить"><svg class="icon" style="width:16px;height:16px"><use href="#i-trash"/></svg></button></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ===================== РАССЫЛКА ПРИГЛАШЕНИЙ ===================== -->
|
||
<div class="page-head" style="margin-bottom: var(--space-4)"><h2 style="font:var(--text-h2); color:var(--color-ink-900); margin:0">Рассылка приглашений</h2></div>
|
||
<div class="invite-card">
|
||
<div>
|
||
<h2>Пригласить новых пользователей</h2>
|
||
<p class="desc">Каждый адрес получит письмо со ссылкой регистрации, действительной 7 дней.</p>
|
||
<textarea placeholder="i.sokolov@company.ru o.panina@company.ru v.sedykh@company.ru">i.sokolov@company.ru
|
||
o.panina@company.ru
|
||
v.sedykh@company.ru</textarea>
|
||
<button class="btn btn-primary" style="margin-top: var(--space-4)"><svg class="icon" style="width:16px;height:16px"><use href="#i-send"/></svg>Отправить приглашения (3)</button>
|
||
</div>
|
||
<div class="invite-side">
|
||
<h3>Последняя рассылка</h3>
|
||
<ul>
|
||
<li>28.06.2026 · 12 приглашений</li>
|
||
<li>9 приняли, 3 ожидают</li>
|
||
</ul>
|
||
<button class="btn btn-secondary" style="width:100%; justify-content:center">Посмотреть журнал</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|