Files
vidconf/design/mockups/my-conferences.html

355 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
/*
* «Мои конференции» (фаза R1, пивот) — новый экран: список закреплённых
* (постоянных, с повторением) и предстоящих разовых конференций
* пользователя. У каждой — ссылка и номер с копированием, ближайшее
* вхождение/дата и кнопка входа. Завершённые — переход к саммари, а не
* повторный вход (незакреплённая конференция после завершения недоступна
* для входа).
*/
html { min-width: 1280px; }
.topbar {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-4) var(--space-8);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.brand-mark { display: inline-flex; align-items: center; gap: 8px; font: var(--text-h3); color: var(--color-ink-700); }
.brand-mark .logo-mark { width: 22px; height: 22px; flex-shrink: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--space-5); }
.nav-link { font: var(--text-body); font-weight: 600; color: var(--color-ink-500); text-decoration: none; }
.nav-link.is-active { color: var(--color-ink-700); }
.avatar-btn { display: flex; align-items: center; gap: 8px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 6px 14px 6px 6px; }
.avatar { width: 28px; height: 28px; 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; }
/* Каскад-баг гейта (2026-07-16, 3-я итерация): было `.avatar-btn span`
(0,1,1) — перебивало `.avatar { color:#fff }` (0,1,0), инициалы
рендерились тёмным ink-900 на индиго-заливке (нечитаемо). Селектор имени
сделан адресным — задевает только `.user-name`, не пересекается с
`.avatar` ни при каком порядке правил. См. DESIGN_SYSTEM.md §1.5. */
.avatar-btn .user-name { font: var(--text-body); font-weight: 600; color: var(--color-ink-900); }
main { padding: var(--space-8); max-width: 1280px; margin: 0 auto; }
.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-primary:active { background: var(--color-accent-active); }
.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); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.filters { display: flex; gap: 8px; margin-bottom: var(--space-6); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); background: var(--color-surface); font: var(--text-body); font-weight: 600; color: var(--color-ink-500); }
.chip.is-active { border-color: var(--color-ink-700); color: var(--color-ink-700); background: var(--color-bg-alt); }
.conf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.conf-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.conf-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.conf-card.is-ended { opacity: .85; }
.conf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.conf-title-wrap h3 { margin: 0 0 4px; font: var(--text-h3); color: var(--color-ink-900); display: flex; align-items: center; gap: 6px; }
.conf-title-wrap p { margin: 0; font: var(--text-body); color: var(--color-ink-500); }
.conf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-full); font: var(--text-caption); white-space: nowrap; }
.conf-badge.pinned { background: var(--color-bg-alt); color: var(--color-ink-700); border: 1px solid var(--color-border-strong); }
.conf-badge.scheduled { background: var(--color-warning-bg); color: var(--color-warning); }
.conf-badge.ended { background: var(--color-bg-alt); color: var(--color-ink-500); }
.conf-meta-row { display: flex; align-items: center; gap: var(--space-4); font: var(--text-body); color: var(--color-ink-500); }
.conf-meta-row .meta-item { display: flex; align-items: center; gap: 6px; }
.pills-row { display: flex; gap: var(--space-3); }
.pill-group { flex: 1; min-width: 0; }
.pill-label { display: block; font: var(--text-caption); color: var(--color-ink-400); margin-bottom: 4px; }
.code-pill { display: flex; align-items: center; gap: 6px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 6px 6px 6px 14px; }
.pill-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-mono-sm); color: var(--color-ink-700); }
.copy-btn { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--color-surface); color: var(--color-ink-500); display: flex; align-items: center; justify-content: center; transition: color var(--transition-fast), box-shadow var(--transition-fast); }
.copy-btn:hover { color: var(--color-ink-700); box-shadow: var(--shadow-sm); }
.copy-btn .icon-check { display: none; color: var(--color-success); }
.copy-btn.is-copied .icon-copy { display: none; }
.copy-btn.is-copied .icon-check { display: block; }
.copy-toast {
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
background: var(--color-ink-900); color: #fff; font: var(--text-caption); text-transform: none; letter-spacing: normal;
padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity var(--transition-fast);
}
.copy-btn.is-copied .copy-toast { opacity: 1; }
.conf-card-footer { display: flex; gap: var(--space-3); margin-top: auto; }
.conf-card-footer .btn { flex: 1; justify-content: center; }
.icon-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; 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); }
</style>
</head>
<body>
<svg style="display:none">
<symbol id="i-repeat" viewBox="0 0 24 24"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></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>
<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-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-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></symbol>
<symbol id="i-play" viewBox="0 0 24 24"><polygon points="6 3 20 12 6 21 6 3"/></symbol>
<symbol id="i-pencil" viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></symbol>
<symbol id="i-file-text" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></symbol>
</svg>
<header class="topbar">
<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="topbar-right">
<a href="lobby.html" class="nav-link">Лобби</a>
<a href="calendar.html" class="nav-link">Календарь</a>
<a href="my-conferences.html" class="nav-link is-active">Мои конференции</a>
<a href="admin.html" class="nav-link">Админка</a>
<button class="avatar-btn"><span class="avatar">АИ</span><span class="user-name">Анна Иванова</span></button>
</nav>
</header>
<main>
<div class="page-head">
<div>
<h1>Мои конференции</h1>
<p>5 конференций · 3 закреплённые с повторением</p>
</div>
<a href="calendar.html" class="btn btn-primary">Запланировать новую</a>
</div>
<div class="filters">
<button class="chip is-active">Все</button>
<button class="chip"><svg class="icon" style="width:14px;height:14px"><use href="#i-repeat"/></svg>Закреплённые</button>
<button class="chip"><svg class="icon" style="width:14px;height:14px"><use href="#i-clock"/></svg>Предстоящие</button>
<button class="chip">Завершённые</button>
</div>
<section class="conf-grid">
<!-- Закреплена, еженедельно -->
<article class="conf-card">
<div class="conf-card-head">
<div class="conf-title-wrap">
<h3>Ревью спринта</h3>
<p>По вторникам и четвергам, 11:0011:45</p>
</div>
<span class="conf-badge pinned"><svg class="icon" style="width:12px;height:12px"><use href="#i-repeat"/></svg>Закреплена</span>
</div>
<div class="conf-meta-row">
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-clock"/></svg>Ближайшее: вт, 22 июля, 11:00</span>
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-users"/></svg>8 участников</span>
</div>
<div class="pills-row">
<div class="pill-group">
<span class="pill-label">Ссылка</span>
<div class="code-pill">
<span class="pill-value">vidconf.ru/j/sprint-review</span>
<button class="copy-btn" data-copy="https://vidconf.ru/j/sprint-review" aria-label="Скопировать ссылку">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
<div class="pill-group">
<span class="pill-label">Номер</span>
<div class="code-pill">
<span class="pill-value">8842 104</span>
<button class="copy-btn" data-copy="8842 104" aria-label="Скопировать номер">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
</div>
<div class="conf-card-footer">
<a href="room.html" class="btn btn-primary"><svg class="icon" style="width:16px;height:16px"><use href="#i-play"/></svg>Войти</a>
<button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:17px;height:17px"><use href="#i-pencil"/></svg></button>
</div>
</article>
<!-- Закреплена, ежемесячно, закрытая паролем -->
<article class="conf-card">
<div class="conf-card-head">
<div class="conf-title-wrap">
<h3><svg class="icon" style="width:15px;height:15px;flex-shrink:0"><use href="#i-lock"/></svg>Синк по релизу 2.4</h3>
<p>Раз в месяц, 15-го числа, 14:0015:00</p>
</div>
<span class="conf-badge pinned"><svg class="icon" style="width:12px;height:12px"><use href="#i-repeat"/></svg>Закреплена</span>
</div>
<div class="conf-meta-row">
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-clock"/></svg>Ближайшее: 15 августа, 14:00</span>
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-users"/></svg>4 участника</span>
</div>
<div class="pills-row">
<div class="pill-group">
<span class="pill-label">Ссылка</span>
<div class="code-pill">
<span class="pill-value">vidconf.ru/j/release-sync</span>
<button class="copy-btn" data-copy="https://vidconf.ru/j/release-sync" aria-label="Скопировать ссылку">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
<div class="pill-group">
<span class="pill-label">Номер</span>
<div class="code-pill">
<span class="pill-value">5217 933</span>
<button class="copy-btn" data-copy="5217 933" aria-label="Скопировать номер">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
</div>
<div class="conf-card-footer">
<a href="join.html" class="btn btn-primary"><svg class="icon" style="width:16px;height:16px"><use href="#i-lock"/></svg>Войти по паролю</a>
<button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:17px;height:17px"><use href="#i-pencil"/></svg></button>
</div>
</article>
<!-- Предстоящая, разовая -->
<article class="conf-card">
<div class="conf-card-head">
<div class="conf-title-wrap">
<h3>1:1 с руководителем</h3>
<p>Разовая · 21 июля, 15:0015:30</p>
</div>
<span class="conf-badge scheduled"><svg class="icon" style="width:12px;height:12px"><use href="#i-clock"/></svg>Предстоящая</span>
</div>
<div class="conf-meta-row">
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-users"/></svg>2 участника</span>
</div>
<div class="pills-row">
<div class="pill-group">
<span class="pill-label">Ссылка</span>
<div class="code-pill">
<span class="pill-value">vidconf.ru/j/one-on-one</span>
<button class="copy-btn" data-copy="https://vidconf.ru/j/one-on-one" aria-label="Скопировать ссылку">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
<div class="pill-group">
<span class="pill-label">Номер</span>
<div class="code-pill">
<span class="pill-value">2094 471</span>
<button class="copy-btn" data-copy="2094 471" aria-label="Скопировать номер">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
</div>
<div class="conf-card-footer">
<button class="btn btn-secondary" style="flex:1" disabled><svg class="icon" style="width:16px;height:16px"><use href="#i-clock"/></svg>Начнётся через 3 дня</button>
<button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:17px;height:17px"><use href="#i-pencil"/></svg></button>
</div>
</article>
<!-- Завершена (незакреплённая — повторный вход недоступен, только саммари) -->
<article class="conf-card is-ended">
<div class="conf-card-head">
<div class="conf-title-wrap">
<h3>Итоги квартала</h3>
<p>Разовая · 29 июня, 12:0013:00</p>
</div>
<span class="conf-badge ended"><svg class="icon" style="width:12px;height:12px"><use href="#i-check-circle"/></svg>Завершена</span>
</div>
<div class="conf-meta-row">
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-users"/></svg>14 участников</span>
</div>
<div class="conf-card-footer">
<a href="email-summary.html" class="btn btn-secondary" style="flex:1"><svg class="icon" style="width:16px;height:16px"><use href="#i-file-text"/></svg>Открыть саммари</a>
</div>
</article>
<!-- Закреплена, каждые N дней -->
<article class="conf-card">
<div class="conf-card-head">
<div class="conf-title-wrap">
<h3>Ежеквартальный отчёт</h3>
<p>Каждые 90 дней, 10:0011:00</p>
</div>
<span class="conf-badge pinned"><svg class="icon" style="width:12px;height:12px"><use href="#i-repeat"/></svg>Закреплена</span>
</div>
<div class="conf-meta-row">
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-clock"/></svg>Ближайшее: 3 октября, 10:00</span>
<span class="meta-item"><svg class="icon" style="width:15px;height:15px"><use href="#i-users"/></svg>22 участника</span>
</div>
<div class="pills-row">
<div class="pill-group">
<span class="pill-label">Ссылка</span>
<div class="code-pill">
<span class="pill-value">vidconf.ru/j/q-report</span>
<button class="copy-btn" data-copy="https://vidconf.ru/j/q-report" aria-label="Скопировать ссылку">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
<div class="pill-group">
<span class="pill-label">Номер</span>
<div class="code-pill">
<span class="pill-value">6630 812</span>
<button class="copy-btn" data-copy="6630 812" aria-label="Скопировать номер">
<svg class="icon icon-copy" style="width:14px;height:14px"><use href="#i-copy"/></svg>
<svg class="icon icon-check" style="width:14px;height:14px"><use href="#i-check"/></svg>
<span class="copy-toast" aria-hidden="true">Скопировано</span>
</button>
</div>
</div>
</div>
<div class="conf-card-footer">
<button class="btn btn-secondary" style="flex:1" disabled><svg class="icon" style="width:16px;height:16px"><use href="#i-clock"/></svg>Начнётся 3 октября</button>
<button class="icon-btn" aria-label="Редактировать"><svg class="icon" style="width:17px;height:17px"><use href="#i-pencil"/></svg></button>
</div>
</article>
</section>
</main>
<script>
// Копирование ссылки/номера в буфер обмена + временная подсказка «Скопировано».
document.querySelectorAll('.copy-btn').forEach((btn) => {
const originalLabel = btn.getAttribute('aria-label');
btn.addEventListener('click', () => {
const text = btn.dataset.copy || '';
if (navigator.clipboard) { navigator.clipboard.writeText(text).catch(() => {}); }
btn.classList.add('is-copied');
btn.setAttribute('aria-label', 'Скопировано');
setTimeout(() => {
btn.classList.remove('is-copied');
btn.setAttribute('aria-label', originalLabel);
}, 1500);
});
});
</script>
</body>
</html>