254 lines
16 KiB
HTML
254 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="ru" data-theme="shell-dark">
|
||
<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>
|
||
/* =====================================================================
|
||
* ТЁМНЫЙ ВАРИАНТ ОБОЛОЧКИ — ПРЕДЛОЖЕНИЕ, НЕ УТВЕРЖДЕНО.
|
||
* Разметка и контент идентичны design/mockups/join.html 1:1, меняется
|
||
* только цветовая схема — палитра переиспользует токены комнаты
|
||
* конференции. Обоснование цветов — design/mockups/dark/README.md.
|
||
* ===================================================================== */
|
||
:root {
|
||
color-scheme: dark;
|
||
|
||
--color-bg: #1E1E1E;
|
||
--color-bg-alt: #242424;
|
||
--color-surface: #2A2A2A;
|
||
--color-surface-glass: rgba(51, 51, 51, .55);
|
||
|
||
--color-border: #3F3F3F;
|
||
--color-border-strong: #585858;
|
||
--color-border-pill: #7FDDA8;
|
||
|
||
--color-ink-900: #E8E8E8;
|
||
--color-ink-700: #7FDDA8;
|
||
--color-ink-500: #B0B0B0;
|
||
--color-ink-400: #5D9A78;
|
||
--color-ink-300: #7A7A7A;
|
||
|
||
--color-accent: #7FDDA8;
|
||
--color-accent-hover: #75CA9A;
|
||
--color-accent-active: #6CB78C;
|
||
--color-accent-text: #10331F;
|
||
|
||
--color-success: #7FDDA8;
|
||
--color-success-bg: rgba(127, 221, 168, .14);
|
||
--color-success-dot: #7FDDA8;
|
||
|
||
--color-danger: #EB93A1;
|
||
--color-danger-bg: rgba(235, 147, 161, .14);
|
||
--color-danger-dot: #EB93A1;
|
||
--color-danger-solid: #B85468;
|
||
--color-danger-solid-hover: #B9495F;
|
||
|
||
--color-warning: #D6A83D;
|
||
--color-warning-bg: rgba(214, 168, 61, .16);
|
||
--color-warning-dot: #D6A83D;
|
||
|
||
--color-focus-ring: #D6A83D;
|
||
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
|
||
--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);
|
||
--shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
|
||
--shadow-glass: 0 8px 24px rgba(0, 0, 0, .45);
|
||
}
|
||
|
||
.theme-toggle { display: inline-flex; gap: 2px; background: var(--color-bg-alt); padding: 4px; border-radius: var(--radius-full); border: 1px solid var(--color-border); }
|
||
.theme-toggle-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--color-ink-500); display: flex; align-items: center; justify-content: center; }
|
||
.theme-toggle-btn .icon { width: 16px; height: 16px; }
|
||
.theme-toggle-btn:hover { color: var(--color-ink-900); }
|
||
.theme-toggle-btn.is-active { background: var(--color-surface); color: var(--color-ink-700); box-shadow: var(--shadow-sm); }
|
||
|
||
/*
|
||
* Подключение к конференции (фаза R1, пивот) — три состояния одного flow:
|
||
* (а) ввод ссылки/номера, (б) «представиться» для гостя (имя обязательно,
|
||
* email факультативно — для саммари), (в) пароль закрытой конференции.
|
||
*/
|
||
|
||
html { min-width: 1280px; }
|
||
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); }
|
||
|
||
.topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-8); }
|
||
.brand-mark { display: inline-flex; align-items: center; gap: 8px; font: var(--text-h3); color: var(--color-ink-700); text-decoration: none; }
|
||
.brand-mark .logo-mark { width: 22px; height: 22px; flex-shrink: 0; }
|
||
|
||
main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--space-6) var(--space-8) var(--space-16); gap: var(--space-16); }
|
||
|
||
.screen-block { width: 100%; max-width: 440px; }
|
||
.screen-label { font: var(--text-caption); color: var(--color-ink-400); margin: 0 0 var(--space-3); text-align: center; }
|
||
.screen-label b { color: var(--color-ink-700); }
|
||
|
||
.flow-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-8); }
|
||
.flow-icon { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-bg-alt); color: var(--color-ink-700); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); }
|
||
.flow-icon .icon { width: 24px; height: 24px; }
|
||
.flow-card h1 { font: var(--text-h1); color: var(--color-ink-900); margin: 0 0 var(--space-2); text-align: center; }
|
||
.flow-card .flow-sub { font: var(--text-body-lg); color: var(--color-ink-500); margin: 0 0 var(--space-6); text-align: center; }
|
||
|
||
.field { margin-bottom: var(--space-5); }
|
||
.field label { display: flex; align-items: center; gap: 6px; font: var(--text-body); font-weight: 600; color: var(--color-ink-900); margin-bottom: var(--space-2); }
|
||
.field-optional { font-weight: 400; color: var(--color-ink-400); }
|
||
.input-wrap { position: relative; }
|
||
.input-wrap .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-ink-400); }
|
||
.input-wrap input {
|
||
width: 100%; font: var(--text-body-lg); color: var(--color-ink-900);
|
||
padding: 11px 14px 11px 42px; border-radius: var(--radius-md); border: 1px solid var(--color-border);
|
||
background: var(--color-surface); outline: none;
|
||
}
|
||
.input-wrap input::placeholder { color: var(--color-ink-300); }
|
||
.input-wrap input:hover { border-color: var(--color-border-strong); }
|
||
.input-wrap input:focus { border-color: var(--color-focus-ring); box-shadow: 0 0 0 3px rgba(214,168,61,.18); }
|
||
.input-wrap .toggle-eye { left: auto; right: 14px; background: none; border: none; padding: 0; cursor: pointer; }
|
||
.field-hint { margin-top: var(--space-2); font: var(--text-body); color: var(--color-ink-500); }
|
||
.field.has-error input { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(235,147,161,.18); }
|
||
.error-msg { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); font: var(--text-body); color: var(--color-danger); }
|
||
|
||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; cursor: pointer; font-family: var(--font-body); 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-lg); font-weight: 700; padding: 13px 24px; border-radius: var(--radius-full); }
|
||
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
|
||
.btn-primary:active { background: var(--color-accent-active); }
|
||
.btn-primary[disabled] { background: rgba(122,122,122,.35); color: var(--color-ink-300); cursor: not-allowed; }
|
||
.btn-secondary { background: transparent; color: var(--color-ink-700); border: 1.5px solid var(--color-border-pill); font: var(--text-body-lg); font-weight: 600; padding: 12px 24px; border-radius: var(--radius-full); }
|
||
.btn-secondary:hover { background: var(--color-bg-alt); }
|
||
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
|
||
|
||
.link-back { display: block; text-align: center; margin-top: var(--space-5); font: var(--text-body); font-weight: 600; color: var(--color-ink-500); text-decoration: none; }
|
||
.link-back:hover { color: var(--color-ink-700); }
|
||
|
||
/* Плашка целевой конференции (состояния б/в) */
|
||
.target-conf { display: flex; align-items: center; gap: 12px; background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); }
|
||
.target-conf .icon-wrap { width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-ink-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.target-conf strong { display: block; font: var(--text-body); color: var(--color-ink-900); }
|
||
.target-conf span { font: var(--text-mono-sm); color: var(--color-ink-500); }
|
||
|
||
.divider { border: none; border-top: 1px solid var(--color-border); width: 100%; max-width: 720px; margin: 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<svg style="display:none">
|
||
<symbol id="i-link2" viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><line x1="8" y1="12" x2="16" y2="12"/></symbol>
|
||
<symbol id="i-hash" viewBox="0 0 24 24"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></symbol>
|
||
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M6 21v-2a6 6 0 0 1 12 0v2"/></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-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-eye" viewBox="0 0 24 24"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></symbol>
|
||
<symbol id="i-eye-off" viewBox="0 0 24 24"><path d="M3 3l18 18"/><path d="M10.58 10.58a2 2 0 0 0 2.83 2.83"/><path d="M9.88 5.09A9.77 9.77 0 0 1 12 5c6.5 0 10 7 10 7a13.16 13.16 0 0 1-3.06 4.06M6.1 6.1A13.16 13.16 0 0 0 2 12s3.5 7 10 7a9.77 9.77 0 0 0 4.9-1.3"/></symbol>
|
||
<symbol id="i-arrow-right" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></symbol>
|
||
<symbol id="i-alert" viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></symbol>
|
||
<symbol id="i-video" viewBox="0 0 24 24"><path d="M15 6H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-2.5l5 3.5V7l-5 3.5V8a2 2 0 0 0-2-2z"/></symbol>
|
||
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></symbol>
|
||
<symbol id="i-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/></symbol>
|
||
</svg>
|
||
|
||
<header class="topbar">
|
||
<a class="brand-mark" href="lobby.html"><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</a>
|
||
<div class="theme-toggle" role="group" aria-label="Переключить тему оформления">
|
||
<button class="theme-toggle-btn" type="button" aria-pressed="false" aria-label="Светлая тема"><svg class="icon"><use href="#i-sun"/></svg></button>
|
||
<button class="theme-toggle-btn is-active" type="button" aria-pressed="true" aria-label="Тёмная тема"><svg class="icon"><use href="#i-moon"/></svg></button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<!-- ===================== (а) ВВОД ССЫЛКИ ИЛИ НОМЕРА ===================== -->
|
||
<section class="screen-block">
|
||
<p class="screen-label">Экран: <b>ввод ссылки или номера</b></p>
|
||
<div class="flow-card">
|
||
<div class="flow-icon" aria-hidden="true"><svg class="icon"><use href="#i-link2"/></svg></div>
|
||
<h1>Подключиться к конференции</h1>
|
||
<p class="flow-sub">Вставьте ссылку-приглашение или введите номер конференции</p>
|
||
|
||
<form>
|
||
<div class="field">
|
||
<label for="join-input">Ссылка или номер</label>
|
||
<div class="input-wrap">
|
||
<svg class="icon"><use href="#i-hash"/></svg>
|
||
<input id="join-input" type="text" placeholder="vidconf.ru/j/... или 8842 104" value="8842 104">
|
||
</div>
|
||
<p class="field-hint">Найдите номер или ссылку в приглашении организатора</p>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Продолжить <svg class="icon"><use href="#i-arrow-right"/></svg></button>
|
||
</form>
|
||
<a href="lobby.html" class="link-back">Назад в лобби</a>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ===================== (б) ПРЕДСТАВИТЬСЯ (ГОСТЬ) ===================== -->
|
||
<section class="screen-block">
|
||
<p class="screen-label">Экран: <b>представиться (гость)</b></p>
|
||
<div class="flow-card">
|
||
<div class="target-conf">
|
||
<span class="icon-wrap" aria-hidden="true"><svg class="icon" style="width:18px;height:18px"><use href="#i-video"/></svg></span>
|
||
<div><strong>Синк по релизу 2.4</strong><span>№ 8842 104</span></div>
|
||
</div>
|
||
|
||
<div class="flow-icon" aria-hidden="true"><svg class="icon"><use href="#i-user"/></svg></div>
|
||
<h1>Как вас зовут?</h1>
|
||
<p class="flow-sub">У вас нет аккаунта VidConf — представьтесь, чтобы войти как гость</p>
|
||
|
||
<form>
|
||
<div class="field">
|
||
<label for="guest-name">Имя<span class="field-optional">· обязательно</span></label>
|
||
<div class="input-wrap">
|
||
<svg class="icon"><use href="#i-user"/></svg>
|
||
<input id="guest-name" type="text" placeholder="Как к вам обращаться" value="Пётр Волков">
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label for="guest-email">Email<span class="field-optional">· необязательно</span></label>
|
||
<div class="input-wrap">
|
||
<svg class="icon"><use href="#i-mail"/></svg>
|
||
<input id="guest-email" type="email" placeholder="you@mail.ru">
|
||
</div>
|
||
<p class="field-hint">Укажите, если хотите получить саммари конференции на почту</p>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Войти в конференцию <svg class="icon"><use href="#i-arrow-right"/></svg></button>
|
||
</form>
|
||
<a href="join.html" class="link-back">Назад</a>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ===================== (в) ПАРОЛЬ ЗАКРЫТОЙ КОНФЕРЕНЦИИ ===================== -->
|
||
<section class="screen-block">
|
||
<p class="screen-label">Экран: <b>пароль закрытой конференции</b> (с состоянием ошибки)</p>
|
||
<div class="flow-card">
|
||
<div class="target-conf">
|
||
<span class="icon-wrap" aria-hidden="true"><svg class="icon" style="width:18px;height:18px"><use href="#i-lock"/></svg></span>
|
||
<div><strong>Итоги квартала</strong><span>№ 4471 208 · закрытая</span></div>
|
||
</div>
|
||
|
||
<div class="flow-icon" aria-hidden="true"><svg class="icon"><use href="#i-lock"/></svg></div>
|
||
<h1>Введите пароль</h1>
|
||
<p class="flow-sub">Эта конференция закрыта — доступ только по паролю от организатора</p>
|
||
|
||
<form>
|
||
<div class="field has-error">
|
||
<label for="join-pass">Пароль конференции</label>
|
||
<div class="input-wrap">
|
||
<svg class="icon"><use href="#i-lock"/></svg>
|
||
<input id="join-pass" type="password" placeholder="••••••••" value="wrongpass">
|
||
<button type="button" class="toggle-eye" aria-label="Показать пароль">
|
||
<svg class="icon"><use href="#i-eye"/></svg>
|
||
</button>
|
||
</div>
|
||
<p class="error-msg"><svg class="icon" style="width:16px;height:16px"><use href="#i-alert"/></svg> Неверный пароль, попробуйте ещё раз</p>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Войти <svg class="icon"><use href="#i-arrow-right"/></svg></button>
|
||
</form>
|
||
<a href="join.html" class="link-back">Назад</a>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|