Первоначальная версия VidConf

2026-07-23 01:04:01 +03:00
commit 896455381a
335 changed files with 61527 additions and 0 deletions
--- a/design/mockups/admin.html
+++ b/design/mockups/admin.html
@@ -0,0 +1,232 @@
+<!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&#10;o.panina@company.ru&#10;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>