559 lines
36 KiB
HTML
559 lines
36 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/calendar.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); }
|
||
|
||
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: var(--color-accent-text); display:flex; align-items:center; justify-content:center; font: var(--text-caption); text-transform: none; letter-spacing: 0; }
|
||
.avatar-btn .user-name { font: var(--text-body); font-weight: 600; color: var(--color-ink-900); }
|
||
|
||
main { padding: var(--space-8); max-width: 1440px; 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; max-width: 560px; }
|
||
|
||
.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-primary:disabled { background: rgba(122,122,122,.3); 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); 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); }
|
||
.btn-danger:hover { filter: brightness(0.92); }
|
||
.btn-text { background: none; border: none; color: var(--color-danger); font: var(--text-body); font-weight: 600; padding: 4px; }
|
||
.btn-text:hover { text-decoration: underline; }
|
||
.btn.full { width: 100%; justify-content: center; }
|
||
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
|
||
|
||
/* ---------- Основной грид: неделя + карточка создания ---------- */
|
||
.layout-grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-6); align-items: start; }
|
||
|
||
.week-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-6); }
|
||
.week-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
|
||
.date-nav { display: flex; align-items: center; gap: var(--space-3); }
|
||
.date-nav button { width: 34px; height: 34px; 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; }
|
||
.date-nav button:hover { border-color: var(--color-border-strong); color: var(--color-ink-900); }
|
||
.date-nav span { font: var(--text-h3); color: var(--color-ink-900); min-width: 200px; text-align: center; }
|
||
.view-toggle { display: flex; gap: 4px; background: var(--color-bg-alt); padding: 4px; border-radius: var(--radius-full); }
|
||
.view-toggle button { padding: 7px 16px; border-radius: var(--radius-full); border: none; background: transparent; font: var(--text-body); font-weight: 600; color: var(--color-ink-500); }
|
||
.view-toggle button.is-active { background: var(--color-surface); color: var(--color-ink-700); box-shadow: var(--shadow-sm); }
|
||
|
||
.week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
|
||
.day-col { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-height: 460px; }
|
||
.day-col.is-today { background: rgba(127,221,168,.10); }
|
||
.day-col-head { text-align: center; padding-bottom: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
|
||
.day-col-head .dow { display: block; font: var(--text-caption); color: var(--color-ink-500); }
|
||
.day-col-head .dom { display: block; font: var(--text-h3); color: var(--color-ink-900); margin-top: 2px; }
|
||
.day-col.is-today .day-col-head .dom { color: var(--color-ink-700); }
|
||
|
||
.conf-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: left; }
|
||
.conf-chip:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
|
||
.chip-time { display: flex; align-items: center; gap: 4px; font: var(--text-caption); color: var(--color-ink-500); text-transform: none; letter-spacing: normal; }
|
||
.chip-title { display: flex; align-items: center; gap: 6px; font: var(--text-body); font-weight: 700; color: var(--color-ink-900); }
|
||
.chip-meta { display: flex; align-items: center; gap: 10px; font: 12px var(--font-body); color: var(--color-ink-500); }
|
||
.chip-meta .meta-item { display: flex; align-items: center; gap: 4px; }
|
||
|
||
.conf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-full); font: var(--text-caption); font-size: 11px; width: fit-content; }
|
||
.conf-badge.scheduled { background: var(--color-warning-bg); color: var(--color-warning); }
|
||
.conf-badge.pinned { background: var(--color-bg-alt); color: var(--color-ink-700); border: 1px solid var(--color-border-strong); }
|
||
.conf-badge.live { background: var(--color-success-bg); color: var(--color-success); }
|
||
.conf-badge.cancelled { background: var(--color-danger-bg); color: var(--color-danger); }
|
||
|
||
.conf-chip.is-cancelled { opacity: .6; }
|
||
.conf-chip.is-cancelled .chip-title { text-decoration: line-through; color: var(--color-ink-500); }
|
||
|
||
.day-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font: var(--text-body); color: var(--color-ink-300); padding: var(--space-4) 0; }
|
||
|
||
/* ---------- Карточка создания / редактирования ---------- */
|
||
.create-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-6); position: sticky; top: 96px; }
|
||
.create-card h2 { font: var(--text-h2); color: var(--color-ink-900); margin: 0 0 var(--space-5); display: flex; align-items: center; gap: 8px; }
|
||
|
||
.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 input, .field textarea, .field select {
|
||
width: 100%; font: var(--text-body-lg); color: var(--color-ink-900);
|
||
padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
}
|
||
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-focus-ring); box-shadow: 0 0 0 3px rgba(214,168,61,.18); }
|
||
.field-row { display: flex; gap: var(--space-3); }
|
||
.field-row .field { flex: 1; }
|
||
.field-hint { font: 12px var(--font-body); color: var(--color-ink-500); margin: 6px 2px 0; }
|
||
|
||
/* Тумблер (используется и для «закрытая по паролю», и для «закрепить») */
|
||
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
|
||
.toggle-copy strong { display: block; font: var(--text-body); color: var(--color-ink-900); }
|
||
.toggle-copy span { font: 12px var(--font-body); color: var(--color-ink-500); }
|
||
.switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
|
||
.switch input { opacity: 0; width: 0; height: 0; }
|
||
.slider { position: absolute; inset: 0; background: var(--color-border-strong); border-radius: var(--radius-full); transition: background var(--transition-fast); cursor: pointer; }
|
||
.slider::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition: transform var(--transition-fast); }
|
||
.switch input:checked + .slider { background: var(--color-accent-active); }
|
||
.switch input:checked + .slider::before { transform: translateX(20px); }
|
||
.switch input:focus-visible + .slider { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
|
||
|
||
.password-block { display: none; margin-top: var(--space-4); }
|
||
.toggle-block:has(#pw-toggle:checked) .password-block { display: block; }
|
||
|
||
/* ---------- Блок повторений (recurrence) ---------- */
|
||
.pin-block .recurrence-panel { display: none; }
|
||
.pin-block:has(input[type="checkbox"]:checked) .recurrence-panel {
|
||
display: flex; flex-direction: column; gap: var(--space-2);
|
||
margin-top: var(--space-4); padding-top: var(--space-4);
|
||
border-top: 1px dashed var(--color-border);
|
||
}
|
||
|
||
.recurrence-option-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
|
||
cursor: pointer; font: var(--text-body); font-weight: 600; color: var(--color-ink-900);
|
||
transition: border-color var(--transition-fast), background var(--transition-fast);
|
||
}
|
||
.recurrence-option-row input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-ink-700); flex-shrink: 0; }
|
||
.recurrence-option:has(input:checked) .recurrence-option-row { border-color: var(--color-ink-700); background: var(--color-bg-alt); }
|
||
|
||
.recurrence-sub { display: none; padding: var(--space-3) 12px 4px 38px; }
|
||
.recurrence-option:has(input:checked) .recurrence-sub { display: block; }
|
||
|
||
.weekday-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
|
||
.weekday-chip {
|
||
width: 34px; height: 34px; border-radius: 50%;
|
||
border: 1.5px solid var(--color-border); background: var(--color-surface);
|
||
font: var(--text-caption); color: var(--color-ink-500);
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.weekday-chip.is-selected { background: var(--color-ink-700); border-color: var(--color-ink-700); color: var(--color-accent-text); }
|
||
|
||
.recurrence-hint { font: 12px var(--font-body); color: var(--color-ink-500); margin-top: 8px; }
|
||
|
||
/* ---------- Доп. состояния (ниже основного грида) ---------- */
|
||
.states-section { margin-top: var(--space-10); }
|
||
.states-head { margin-bottom: var(--space-5); }
|
||
.states-head h2 { font: var(--text-h1); color: var(--color-ink-900); margin: 0 0 4px; }
|
||
.states-head p { font: var(--text-body-lg); color: var(--color-ink-500); margin: 0; }
|
||
.states-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
|
||
|
||
.state-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-6); }
|
||
.screen-label { font: var(--text-caption); color: var(--color-ink-400); margin: 0 0 var(--space-4); }
|
||
.screen-label b { color: var(--color-ink-700); }
|
||
|
||
.next-occurrence { display: flex; align-items: center; gap: 8px; background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 10px 14px; font: var(--text-body); color: var(--color-ink-700); font-weight: 600; margin-bottom: var(--space-5); }
|
||
|
||
.btn-row { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
|
||
.btn-row .btn { flex: 1; justify-content: center; }
|
||
.danger-link-row { text-align: center; margin-top: var(--space-4); }
|
||
|
||
.cancel-alert { display: flex; gap: 10px; background: var(--color-warning-bg); border: 1px solid rgba(214,168,61,.35); color: var(--color-warning); border-radius: var(--radius-md); padding: var(--space-4); font: var(--text-body); margin-bottom: var(--space-5); }
|
||
.cancel-alert strong { display: block; margin-bottom: 2px; color: var(--color-ink-900); }
|
||
.cancel-options { display: flex; flex-direction: column; gap: var(--space-3); }
|
||
.cancel-options .btn { width: 100%; justify-content: center; }
|
||
|
||
/* ---------- Патч: заливка danger-кнопок отдельным «глубоким» тоном (не совпадает
|
||
с pastel-текстовым --color-danger, чтобы белый текст держал контраст) ---------- */
|
||
.btn-danger { background: var(--color-danger-solid); }
|
||
.btn-danger:hover { background: var(--color-danger-solid-hover); filter: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<svg style="display:none">
|
||
<symbol id="i-chevron-left" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></symbol>
|
||
<symbol id="i-chevron-right" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></symbol>
|
||
<symbol id="i-calendar" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></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-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-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-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-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-play" viewBox="0 0 24 24"><polygon points="6 3 20 12 6 21 6 3"/></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-x" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></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">
|
||
<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 is-active">Календарь</a>
|
||
<a href="my-conferences.html" class="nav-link">Мои конференции</a>
|
||
<a href="admin.html" class="nav-link">Админка</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>
|
||
<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>Запланируйте разовую встречу или закрепите постоянную конференцию с повторением — рабочая неделя 14–18 июля</p>
|
||
</div>
|
||
<button class="btn btn-primary"><svg class="icon" style="width:16px;height:16px"><use href="#i-plus"/></svg>Новая конференция</button>
|
||
</div>
|
||
|
||
<div class="layout-grid">
|
||
|
||
<!-- ===================== СЕТКА КОНФЕРЕНЦИЙ ПО ДНЯМ ===================== -->
|
||
<section class="week-card">
|
||
<div class="week-toolbar">
|
||
<div class="date-nav">
|
||
<button aria-label="Предыдущая неделя"><svg class="icon" style="width:16px;height:16px"><use href="#i-chevron-left"/></svg></button>
|
||
<span>14 — 18 июля 2026</span>
|
||
<button aria-label="Следующая неделя"><svg class="icon" style="width:16px;height:16px"><use href="#i-chevron-right"/></svg></button>
|
||
</div>
|
||
<div class="view-toggle">
|
||
<button class="is-active">Неделя</button>
|
||
<button>Месяц</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="week-grid">
|
||
|
||
<div class="day-col">
|
||
<div class="day-col-head"><span class="dow">ПН</span><span class="dom">14</span></div>
|
||
<button class="conf-chip">
|
||
<span class="conf-badge scheduled"><svg class="icon" style="width:11px;height:11px"><use href="#i-clock"/></svg>Запланирована</span>
|
||
<span class="chip-time">09:00–09:15</span>
|
||
<span class="chip-title">Дейли команды</span>
|
||
<span class="chip-meta"><span class="meta-item"><svg class="icon" style="width:12px;height:12px"><use href="#i-users"/></svg>6</span></span>
|
||
</button>
|
||
<div class="day-empty">Свободный день</div>
|
||
</div>
|
||
|
||
<div class="day-col is-today">
|
||
<div class="day-col-head"><span class="dow">ВТ</span><span class="dom">15</span></div>
|
||
<button class="conf-chip">
|
||
<span class="conf-badge pinned"><svg class="icon" style="width:11px;height:11px"><use href="#i-repeat"/></svg>Закреплена</span>
|
||
<span class="chip-time">11:00–11:45</span>
|
||
<span class="chip-title">Ревью спринта</span>
|
||
<span class="chip-meta"><span class="meta-item"><svg class="icon" style="width:12px;height:12px"><use href="#i-users"/></svg>8</span></span>
|
||
</button>
|
||
<button class="conf-chip">
|
||
<span class="conf-badge live"><svg class="icon" style="width:11px;height:11px"><use href="#i-play"/></svg>Идёт сейчас</span>
|
||
<span class="chip-time">14:00–…</span>
|
||
<span class="chip-title"><svg class="icon" style="width:13px;height:13px;flex-shrink:0"><use href="#i-lock"/></svg>Синк по релизу 2.4</span>
|
||
<span class="chip-meta"><span class="meta-item"><svg class="icon" style="width:12px;height:12px"><use href="#i-users"/></svg>4</span></span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="day-col">
|
||
<div class="day-col-head"><span class="dow">СР</span><span class="dom">16</span></div>
|
||
<button class="conf-chip is-cancelled">
|
||
<span class="conf-badge cancelled"><svg class="icon" style="width:11px;height:11px"><use href="#i-x"/></svg>Отменена</span>
|
||
<span class="chip-time">10:00–10:30</span>
|
||
<span class="chip-title">Собес: Frontend</span>
|
||
</button>
|
||
<div class="day-empty">Свободный день</div>
|
||
</div>
|
||
|
||
<div class="day-col">
|
||
<div class="day-col-head"><span class="dow">ЧТ</span><span class="dom">17</span></div>
|
||
<button class="conf-chip">
|
||
<span class="conf-badge pinned"><svg class="icon" style="width:11px;height:11px"><use href="#i-repeat"/></svg>Закреплена</span>
|
||
<span class="chip-time">11:00–11:45</span>
|
||
<span class="chip-title">Ревью спринта</span>
|
||
<span class="chip-meta"><span class="meta-item"><svg class="icon" style="width:12px;height:12px"><use href="#i-users"/></svg>8</span></span>
|
||
</button>
|
||
<button class="conf-chip">
|
||
<span class="conf-badge scheduled"><svg class="icon" style="width:11px;height:11px"><use href="#i-clock"/></svg>Запланирована</span>
|
||
<span class="chip-time">15:00–15:30</span>
|
||
<span class="chip-title">1:1 с руководителем</span>
|
||
<span class="chip-meta"><span class="meta-item"><svg class="icon" style="width:12px;height:12px"><use href="#i-users"/></svg>2</span></span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="day-col">
|
||
<div class="day-col-head"><span class="dow">ПТ</span><span class="dom">18</span></div>
|
||
<button class="conf-chip">
|
||
<span class="conf-badge scheduled"><svg class="icon" style="width:11px;height:11px"><use href="#i-clock"/></svg>Запланирована</span>
|
||
<span class="chip-time">12:00–13:00</span>
|
||
<span class="chip-title"><svg class="icon" style="width:13px;height:13px;flex-shrink:0"><use href="#i-lock"/></svg>Итоги квартала</span>
|
||
<span class="chip-meta"><span class="meta-item"><svg class="icon" style="width:12px;height:12px"><use href="#i-users"/></svg>14</span></span>
|
||
</button>
|
||
<div class="day-empty">Ещё нет конференций</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== КАРТОЧКА СОЗДАНИЯ (состояние: создание, пусто) ===================== -->
|
||
<aside class="create-card" id="create-card">
|
||
<h2><svg class="icon"><use href="#i-calendar"/></svg>Новая конференция</h2>
|
||
|
||
<form>
|
||
<div class="field">
|
||
<label>Название</label>
|
||
<input type="text" placeholder="Например, Синк по релизу 2.4">
|
||
</div>
|
||
<div class="field-row">
|
||
<div class="field"><label>Дата</label><input type="text" value="21.07.2026"></div>
|
||
<div class="field"><label>Время</label><input type="text" value="10:00–10:30"></div>
|
||
</div>
|
||
<div class="field">
|
||
<label>Участники (email через запятую)</label>
|
||
<textarea rows="2" placeholder="i.sokolov@company.ru, m.kuznetsova@company.ru"></textarea>
|
||
</div>
|
||
|
||
<div class="toggle-block">
|
||
<div class="toggle-row" style="border-top:none; padding-top:0">
|
||
<div class="toggle-copy"><strong>Закрытая по паролю</strong><span>Вход только по паролю, включая гостей</span></div>
|
||
<label class="switch"><input type="checkbox" id="pw-toggle"><span class="slider"></span></label>
|
||
</div>
|
||
<div class="password-block field">
|
||
<label><svg class="icon" style="width:14px;height:14px"><use href="#i-lock"/></svg>Пароль конференции</label>
|
||
<input type="password" placeholder="Минимум 6 символов">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pin-block">
|
||
<div class="toggle-row">
|
||
<div class="toggle-copy"><strong>Закрепить постоянную конференцию</strong><span>Сохранится и попадёт в «Мои конференции», не исчезнет после встречи</span></div>
|
||
<label class="switch"><input type="checkbox" id="pin-toggle"><span class="slider"></span></label>
|
||
</div>
|
||
|
||
<!-- Раскрывается по клику на тумблер выше (CSS :has(), без JS) -->
|
||
<div class="recurrence-panel">
|
||
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row">
|
||
<input type="radio" name="recurrence" checked>
|
||
По дням недели, еженедельно
|
||
</label>
|
||
<div class="recurrence-sub">
|
||
<div class="weekday-toggles">
|
||
<span class="weekday-chip">ПН</span>
|
||
<span class="weekday-chip is-selected">ВТ</span>
|
||
<span class="weekday-chip">СР</span>
|
||
<span class="weekday-chip is-selected">ЧТ</span>
|
||
<span class="weekday-chip">ПТ</span>
|
||
<span class="weekday-chip">СБ</span>
|
||
<span class="weekday-chip">ВС</span>
|
||
</div>
|
||
<p class="recurrence-hint">Ближайшие: вторник 21 июля, четверг 23 июля</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row">
|
||
<input type="radio" name="recurrence">
|
||
Раз в 2 недели
|
||
</label>
|
||
<div class="recurrence-sub">
|
||
<div class="field-row">
|
||
<div class="field" style="margin-bottom:0"><label>Начиная с</label><input type="text" value="21.07.2026"></div>
|
||
<div class="field" style="margin-bottom:0"><label>День недели</label><select><option>Вторник</option><option>Среда</option></select></div>
|
||
</div>
|
||
<p class="recurrence-hint">Следующие: 4 августа, 18 августа</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row">
|
||
<input type="radio" name="recurrence">
|
||
Раз в месяц
|
||
</label>
|
||
<div class="recurrence-sub">
|
||
<div class="field"><label>Число месяца</label><input type="text" value="31" inputmode="numeric"></div>
|
||
<p class="recurrence-hint">Если в месяце нет такого числа — переносится на последний день месяца (напр. 28/29 февраля)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row">
|
||
<input type="radio" name="recurrence">
|
||
Каждые N дней
|
||
</label>
|
||
<div class="recurrence-sub">
|
||
<div class="field-row">
|
||
<div class="field" style="margin-bottom:0"><label>N (дней)</label><input type="text" value="10" inputmode="numeric"></div>
|
||
<div class="field" style="margin-bottom:0"><label>Начиная с</label><input type="text" value="21.07.2026"></div>
|
||
</div>
|
||
<p class="recurrence-hint">Ближайшие: через 10, 20, 30 дней</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary full" style="margin-top: var(--space-5)">Создать конференцию</button>
|
||
</form>
|
||
</aside>
|
||
|
||
</div>
|
||
|
||
<!-- ===================== ДОП. СОСТОЯНИЯ: РЕДАКТИРОВАНИЕ И ОТМЕНА ===================== -->
|
||
<section class="states-section">
|
||
<div class="states-head">
|
||
<h2>Другие состояния карточки</h2>
|
||
<p>Раскрытая карточка с закреплением, редактирование существующей закреплённой конференции и отмена вхождения/всех повторений.</p>
|
||
</div>
|
||
|
||
<div class="states-grid">
|
||
|
||
<!-- Состояние: редактирование существующей закреплённой конференции -->
|
||
<div class="state-card">
|
||
<p class="screen-label">Состояние: <b>редактирование закреплённой конференции</b></p>
|
||
|
||
<div class="next-occurrence">
|
||
<svg class="icon" style="width:16px;height:16px"><use href="#i-clock"/></svg>
|
||
Следующее вхождение: вторник, 22 июля, 11:00
|
||
</div>
|
||
|
||
<form>
|
||
<div class="field"><label>Название</label><input type="text" value="Ревью спринта"></div>
|
||
<div class="field-row">
|
||
<div class="field"><label>Время</label><input type="text" value="11:00–11:45"></div>
|
||
<div class="field"><label>Участники</label><input type="text" value="8 человек"></div>
|
||
</div>
|
||
|
||
<div class="pin-block">
|
||
<div class="toggle-row" style="border-top:none; padding-top:0">
|
||
<div class="toggle-copy"><strong>Закреплена</strong><span>Повторяется по расписанию</span></div>
|
||
<label class="switch"><input type="checkbox" id="pin-toggle-edit" checked><span class="slider"></span></label>
|
||
</div>
|
||
<div class="recurrence-panel">
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row">
|
||
<input type="radio" name="recurrence-edit" checked>
|
||
По дням недели, еженедельно
|
||
</label>
|
||
<div class="recurrence-sub">
|
||
<div class="weekday-toggles">
|
||
<span class="weekday-chip">ПН</span>
|
||
<span class="weekday-chip is-selected">ВТ</span>
|
||
<span class="weekday-chip">СР</span>
|
||
<span class="weekday-chip is-selected">ЧТ</span>
|
||
<span class="weekday-chip">ПТ</span>
|
||
<span class="weekday-chip">СБ</span>
|
||
<span class="weekday-chip">ВС</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row"><input type="radio" name="recurrence-edit">Раз в 2 недели</label>
|
||
</div>
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row"><input type="radio" name="recurrence-edit">Раз в месяц</label>
|
||
</div>
|
||
<div class="recurrence-option">
|
||
<label class="recurrence-option-row"><input type="radio" name="recurrence-edit">Каждые N дней</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-row">
|
||
<button type="submit" class="btn btn-primary">Сохранить изменения</button>
|
||
<button type="button" class="btn btn-secondary">Открепить</button>
|
||
</div>
|
||
<div class="danger-link-row">
|
||
<button type="button" class="btn-text">Удалить конференцию навсегда</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Состояние: отмена одной / всех повторяющихся -->
|
||
<div class="state-card">
|
||
<p class="screen-label">Состояние: <b>отмена вхождения повторяющейся конференции</b></p>
|
||
|
||
<div class="cancel-alert">
|
||
<svg class="icon" style="width:18px;height:18px;flex-shrink:0;margin-top:1px"><use href="#i-alert"/></svg>
|
||
<div><strong>«Ревью спринта» — вторник, 22 июля, 11:00</strong>Это повторяющаяся конференция (по вторникам и четвергам). Что отменить?</div>
|
||
</div>
|
||
|
||
<div class="cancel-options">
|
||
<button class="btn btn-secondary"><svg class="icon" style="width:16px;height:16px"><use href="#i-x"/></svg>Отменить только это вхождение</button>
|
||
<button class="btn btn-danger"><svg class="icon" style="width:16px;height:16px"><use href="#i-x"/></svg>Отменить все повторения</button>
|
||
</div>
|
||
<div class="danger-link-row">
|
||
<button type="button" class="btn-text" style="color: var(--color-ink-500)">Оставить как есть</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|