337 lines
22 KiB
HTML
337 lines
22 KiB
HTML
<!doctype html>
|
||
<html lang="ru" data-theme="room">
|
||
<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; }
|
||
body { background: var(--color-room-bg); color: var(--color-room-text-primary); overflow-x: hidden; }
|
||
|
||
.room-shell { display: flex; flex-direction: column; height: 100vh; }
|
||
|
||
/* ---------- Топбар ---------- */
|
||
.room-topbar {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: var(--space-3) var(--space-6);
|
||
background: var(--color-room-surface);
|
||
border-bottom: 1px solid var(--color-room-tile-border);
|
||
flex-shrink: 0;
|
||
}
|
||
.room-title-block h1 { font: var(--text-h3); margin: 0 0 2px; color: var(--color-room-text-primary); }
|
||
.room-title-block p { font: var(--text-body); margin: 0; color: var(--color-room-text-secondary); display:flex; align-items:center; gap:8px; }
|
||
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-room-danger); box-shadow: 0 0 0 3px rgba(235,147,161,.3); }
|
||
|
||
.layout-switch { display: flex; align-items: center; gap: var(--space-2); }
|
||
.icon-btn {
|
||
width: 40px; height: 40px; border-radius: var(--radius-md);
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: transparent; border: 1px solid transparent; color: var(--color-room-text-secondary);
|
||
}
|
||
.icon-btn:hover { background: var(--color-room-tile-hover); color: var(--color-room-text-primary); }
|
||
.icon-btn.is-active { background: var(--color-room-tile); color: var(--color-room-speaker-ring); border-color: var(--color-room-speaker-ring); }
|
||
|
||
/* ---------- Основная область: превью + крупные плитки + чат ---------- */
|
||
.room-main { display: flex; flex: 1; min-height: 0; }
|
||
.stage { flex: 1; display: flex; flex-direction: column; padding: var(--space-5) var(--space-6); gap: var(--space-4); min-width: 0; }
|
||
|
||
.preview-row { display: flex; align-items: center; gap: var(--space-3); }
|
||
.preview-scroll { display: flex; gap: var(--space-3); overflow-x: auto; flex: 1; padding-bottom: 4px; }
|
||
.preview-scroll::-webkit-scrollbar { height: 6px; }
|
||
.preview-scroll::-webkit-scrollbar-thumb { background: var(--color-room-tile-border); border-radius: 3px; }
|
||
|
||
.scroll-arrow {
|
||
width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
|
||
background: var(--color-room-surface); border: 1px solid var(--color-room-tile-border);
|
||
color: var(--color-room-text-secondary); display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.scroll-arrow:hover { color: var(--color-room-text-primary); }
|
||
|
||
.tile {
|
||
position: relative; background: var(--color-room-tile); border-radius: var(--radius-lg);
|
||
border: 1px solid var(--color-room-tile-border); overflow: hidden;
|
||
}
|
||
.tile-preview { width: 160px; height: 100px; flex-shrink: 0; }
|
||
.tile-name {
|
||
position: absolute; top: 8px; left: 8px; font: var(--text-body);
|
||
font-weight: 600; color: var(--color-room-text-primary);
|
||
background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: var(--radius-sm);
|
||
max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.tile-preview .tile-name { font-size: 12px; padding: 1px 6px; }
|
||
.tile-avatar {
|
||
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.tile-avatar svg { width: 38%; height: 38%; color: #555; }
|
||
.tile-preview .tile-avatar svg { width: 30%; height: 30%; }
|
||
|
||
.mic-indicator {
|
||
position: absolute; bottom: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%;
|
||
background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.mic-indicator.on { color: var(--color-room-mic-on); }
|
||
.mic-indicator.off { color: var(--color-room-mic-off); }
|
||
.mic-indicator .icon { width: 15px; height: 15px; }
|
||
.tile-preview .mic-indicator { width: 20px; height: 20px; bottom: 6px; left: 6px; }
|
||
.tile-preview .mic-indicator .icon { width: 12px; height: 12px; }
|
||
|
||
.tile.is-speaking { border: var(--border-speaker) solid var(--color-room-speaker-ring); box-shadow: var(--shadow-speaker-glow); }
|
||
|
||
.stage-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); min-height: 0; }
|
||
.tile-large { min-height: 0; }
|
||
.tile-corner-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: .85; }
|
||
.tile-corner-actions button { width: 30px; height: 30px; border-radius: var(--radius-sm); background: rgba(0,0,0,.35); border: none; color: var(--color-room-text-primary); display:flex; align-items:center; justify-content:center; }
|
||
.tile-corner-actions button:hover { background: rgba(0,0,0,.55); }
|
||
|
||
.video-off-badge {
|
||
position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.4);
|
||
border-radius: var(--radius-sm); padding: 4px 8px; display:flex; align-items:center; gap:4px;
|
||
font: var(--text-caption); color: var(--color-room-text-secondary); text-transform:none; letter-spacing:normal;
|
||
}
|
||
|
||
/* ---------- Панель чата ---------- */
|
||
.chat-panel {
|
||
width: 320px; flex-shrink: 0; background: var(--color-room-surface-raised);
|
||
border-left: 1px solid var(--color-room-tile-border);
|
||
display: flex; flex-direction: column; box-shadow: var(--shadow-room-panel);
|
||
}
|
||
.chat-head { display:flex; align-items:center; justify-content:space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-room-tile-border); }
|
||
.chat-head h2 { font: var(--text-h3); margin: 0; }
|
||
.chat-head button { background: none; border: none; color: var(--color-room-text-secondary); }
|
||
.chat-head button:hover { color: var(--color-room-text-primary); }
|
||
|
||
.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
|
||
.msg .msg-meta { display:flex; align-items:baseline; gap: 8px; margin-bottom: 4px; }
|
||
.msg .msg-author { font: var(--text-body); font-weight: 700; color: var(--color-room-mic-on); }
|
||
.msg .msg-time { font: 12px var(--font-body); color: var(--color-room-text-tertiary); }
|
||
.msg .msg-bubble { background: var(--color-room-tile); border-radius: var(--radius-md); padding: 10px 14px; font: var(--text-body); color: var(--color-room-text-primary); }
|
||
|
||
.chat-input-row { padding: var(--space-4); border-top: 1px solid var(--color-room-tile-border); display: flex; gap: 8px; }
|
||
.chat-input-row input {
|
||
flex: 1; background: var(--color-room-tile); border: 1px solid var(--color-room-tile-border);
|
||
border-radius: var(--radius-full); padding: 10px 16px; color: var(--color-room-text-primary); font: var(--text-body-lg);
|
||
}
|
||
.chat-input-row input::placeholder { color: var(--color-room-text-tertiary); }
|
||
.chat-input-row button {
|
||
width: 42px; height: 42px; border-radius: 50%; background: var(--color-room-mic-on); border: none;
|
||
color: #10331f; display:flex; align-items:center; justify-content:center; flex-shrink:0;
|
||
}
|
||
|
||
/* ---------- Нижний тулбар ---------- */
|
||
.room-toolbar {
|
||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||
background: var(--color-room-surface); border-top: 1px solid var(--color-room-tile-border);
|
||
padding: var(--space-3) var(--space-6); flex-shrink: 0;
|
||
}
|
||
.tb-btn {
|
||
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||
background: transparent; border: none; padding: 8px 18px; border-radius: var(--radius-md);
|
||
color: var(--color-room-text-primary); min-width: 76px;
|
||
}
|
||
.tb-btn .icon-shell {
|
||
width: 48px; height: 48px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
|
||
border: 1.5px solid var(--color-room-tile-border); background: var(--color-room-tile);
|
||
}
|
||
.tb-btn span.label { font: var(--text-caption); text-transform: none; letter-spacing: normal; color: var(--color-room-text-secondary); font-weight: 500; }
|
||
.tb-btn:hover .icon-shell { background: var(--color-room-tile-hover); }
|
||
|
||
.tb-btn.is-on .icon-shell { color: var(--color-room-text-primary); }
|
||
.tb-btn.is-off .icon-shell { background: var(--color-room-mic-off); border-color: var(--color-room-mic-off); color: #3a0f16; }
|
||
.tb-btn.is-off span.label { color: var(--color-room-mic-off); font-weight: 700; }
|
||
|
||
.tb-btn.is-positive-active .icon-shell { background: var(--color-room-mic-on); border-color: var(--color-room-mic-on); color: #0e3320; }
|
||
.tb-btn.is-positive-active span.label { color: var(--color-room-mic-on); font-weight: 700; }
|
||
|
||
.tb-btn.is-panel-open .icon-shell { background: var(--color-room-surface-raised); border-color: var(--color-room-speaker-ring); color: var(--color-room-speaker-ring); }
|
||
|
||
.tb-btn.danger .icon-shell { border-color: var(--color-room-danger); color: var(--color-room-danger); background: transparent; }
|
||
.tb-btn.danger:hover .icon-shell { background: var(--color-room-danger-bg); color: #fff; border-color: var(--color-room-danger-bg); }
|
||
.tb-btn.danger span.label { color: var(--color-room-danger); font-weight: 700; }
|
||
|
||
.badge-count {
|
||
position: absolute; top: -2px; right: -2px; background: var(--color-room-mic-on); color: #0e3320;
|
||
font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
|
||
/* ---------- Демонстрация состояния "чат свёрнут" ---------- */
|
||
.collapsed-demo {
|
||
margin-top: var(--space-6); padding: var(--space-5) var(--space-6);
|
||
background: var(--color-room-surface); border-top: 1px solid var(--color-room-tile-border);
|
||
}
|
||
.collapsed-demo p.label { font: var(--text-caption); color: var(--color-room-text-secondary); text-transform: none; letter-spacing: normal; margin: 0 0 10px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<svg style="display:none">
|
||
<symbol id="i-mic" viewBox="0 0 24 24"><path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v1a7 7 0 0 1-14 0v-1"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="8" y1="22" x2="16" y2="22"/></symbol>
|
||
<symbol id="i-mic-off" viewBox="0 0 24 24"><path d="M9 9v3a3 3 0 0 0 4.24 2.73"/><path d="M15 9.34V5a3 3 0 0 0-5.94-.6"/><path d="M19 10v1a7 7 0 0 1-11.5 5.34"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="8" y1="22" x2="16" y2="22"/><line x1="2" y1="2" x2="22" y2="22"/></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-video-off" viewBox="0 0 24 24"><path d="M16 16v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1"/><path d="M9.5 6H14a2 2 0 0 1 2 2v4.5"/><path d="m22 8-6 4"/><line x1="2" y1="2" x2="22" y2="22"/></symbol>
|
||
<symbol id="i-share" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><path d="M9 10.5 12 7l3 3.5"/><line x1="12" y1="7" x2="12" y2="14"/></symbol>
|
||
<symbol id="i-chat" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="3"/><path d="m7 17-3 4v-4"/></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-logout" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></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-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></symbol>
|
||
<symbol id="i-columns" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></symbol>
|
||
<symbol id="i-grid2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/><line x1="3" y1="12" x2="21" y2="12"/></symbol>
|
||
<symbol id="i-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></symbol>
|
||
<symbol id="i-maximize" viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></symbol>
|
||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></symbol>
|
||
<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-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-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>
|
||
</svg>
|
||
|
||
<div class="room-shell">
|
||
|
||
<header class="room-topbar">
|
||
<div class="room-title-block">
|
||
<h1>Переговорная №42 · Спринт-ревью команды платформы</h1>
|
||
<p><span class="rec-dot" aria-hidden="true"></span> Идёт запись · 00:24:11 · 8 участников</p>
|
||
</div>
|
||
<div class="layout-switch">
|
||
<button class="icon-btn is-active" aria-label="Раскладка: лента + спикер"><svg class="icon"><use href="#i-grid"/></svg></button>
|
||
<button class="icon-btn" aria-label="Раскладка: колонки"><svg class="icon"><use href="#i-columns"/></svg></button>
|
||
<button class="icon-btn" aria-label="Раскладка: равная сетка"><svg class="icon"><use href="#i-grid2"/></svg></button>
|
||
<button class="icon-btn" aria-label="Настройки"><svg class="icon"><use href="#i-settings"/></svg></button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="room-main">
|
||
<section class="stage">
|
||
|
||
<!-- Лента превью участников -->
|
||
<div class="preview-row">
|
||
<button class="scroll-arrow" aria-label="Прокрутить влево"><svg class="icon" style="width:16px;height:16px"><use href="#i-chevron-left"/></svg></button>
|
||
<div class="preview-scroll">
|
||
<div class="tile tile-preview">
|
||
<div class="tile-name">Дмитрий Кошелев</div>
|
||
<div class="tile-avatar"><svg class="icon"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator off"><svg class="icon"><use href="#i-mic-off"/></svg></div>
|
||
</div>
|
||
<div class="tile tile-preview">
|
||
<div class="tile-name">Ольга Панина</div>
|
||
<div class="tile-avatar"><svg class="icon"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator off"><svg class="icon"><use href="#i-mic-off"/></svg></div>
|
||
</div>
|
||
<div class="tile tile-preview">
|
||
<div class="tile-name">Виктор Седых</div>
|
||
<div class="tile-avatar"><svg class="icon"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator on"><svg class="icon"><use href="#i-mic"/></svg></div>
|
||
</div>
|
||
<div class="tile tile-preview">
|
||
<div class="tile-name">Настя Титова</div>
|
||
<div class="tile-avatar"><svg class="icon"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator off"><svg class="icon"><use href="#i-mic-off"/></svg></div>
|
||
</div>
|
||
<div class="tile tile-preview">
|
||
<div class="tile-name">Роман Матвеев</div>
|
||
<div class="tile-avatar"><svg class="icon"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator on"><svg class="icon"><use href="#i-mic"/></svg></div>
|
||
</div>
|
||
<div class="tile tile-preview">
|
||
<div class="tile-name">Елена Жукова</div>
|
||
<div class="tile-avatar"><svg class="icon"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator off"><svg class="icon"><use href="#i-mic-off"/></svg></div>
|
||
</div>
|
||
</div>
|
||
<button class="scroll-arrow" aria-label="Прокрутить вправо"><svg class="icon" style="width:16px;height:16px"><use href="#i-chevron-right"/></svg></button>
|
||
</div>
|
||
|
||
<!-- Крупные плитки: активный спикер + участник -->
|
||
<div class="stage-tiles">
|
||
<div class="tile tile-large is-speaking">
|
||
<div class="tile-name">Игорь Соколов</div>
|
||
<div class="tile-corner-actions">
|
||
<button aria-label="Развернуть на весь экран"><svg class="icon" style="width:16px;height:16px"><use href="#i-maximize"/></svg></button>
|
||
<button aria-label="Ещё действия"><svg class="icon" style="width:16px;height:16px"><use href="#i-more"/></svg></button>
|
||
</div>
|
||
<div class="tile-avatar"><svg class="icon" style="color:#8a8a8a"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator on"><svg class="icon"><use href="#i-mic"/></svg></div>
|
||
</div>
|
||
<div class="tile tile-large">
|
||
<div class="tile-name">Мария Кузнецова</div>
|
||
<div class="tile-corner-actions">
|
||
<button aria-label="Развернуть на весь экран"><svg class="icon" style="width:16px;height:16px"><use href="#i-maximize"/></svg></button>
|
||
<button aria-label="Ещё действия"><svg class="icon" style="width:16px;height:16px"><use href="#i-more"/></svg></button>
|
||
</div>
|
||
<div class="tile-avatar"><svg class="icon" style="color:#8a8a8a"><use href="#i-user"/></svg></div>
|
||
<div class="mic-indicator off"><svg class="icon"><use href="#i-mic-off"/></svg></div>
|
||
<div class="video-off-badge"><svg class="icon" style="width:12px;height:12px"><use href="#i-video-off"/></svg>Камера выключена</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Панель чата: РАЗВЁРНУТОЕ состояние -->
|
||
<aside class="chat-panel">
|
||
<div class="chat-head">
|
||
<h2>Чат встречи</h2>
|
||
<button aria-label="Свернуть чат"><svg class="icon"><use href="#i-x"/></svg></button>
|
||
</div>
|
||
<div class="chat-messages">
|
||
<div class="msg">
|
||
<div class="msg-meta"><span class="msg-author">Виктор Седых</span><span class="msg-time">14:02</span></div>
|
||
<div class="msg-bubble">Отправил ссылку на дизайн-макеты в описании встречи</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="msg-meta"><span class="msg-author">Ольга Панина</span><span class="msg-time">14:03</span></div>
|
||
<div class="msg-bubble">Принято, посмотрю после демо API</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="msg-meta"><span class="msg-author">Игорь Соколов</span><span class="msg-time">14:05</span></div>
|
||
<div class="msg-bubble">Начинаем со спринт-ревью, затем — блок вопросов</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-input-row">
|
||
<input type="text" placeholder="Написать сообщение…">
|
||
<button aria-label="Отправить"><svg class="icon" style="width:18px;height:18px"><use href="#i-send"/></svg></button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<!-- Нижний тулбар -->
|
||
<footer class="room-toolbar">
|
||
<button class="tb-btn is-off">
|
||
<span class="icon-shell"><svg class="icon"><use href="#i-mic-off"/></svg></span>
|
||
<span class="label">Микрофон</span>
|
||
</button>
|
||
<button class="tb-btn is-on">
|
||
<span class="icon-shell"><svg class="icon"><use href="#i-video"/></svg></span>
|
||
<span class="label">Камера</span>
|
||
</button>
|
||
<button class="tb-btn is-positive-active">
|
||
<span class="icon-shell"><svg class="icon"><use href="#i-share"/></svg></span>
|
||
<span class="label">Демонстрация</span>
|
||
</button>
|
||
<button class="tb-btn is-panel-open">
|
||
<span class="icon-shell" style="position:relative"><svg class="icon"><use href="#i-chat"/></svg><span class="badge-count">3</span></span>
|
||
<span class="label">Чат</span>
|
||
</button>
|
||
<button class="tb-btn is-on">
|
||
<span class="icon-shell"><svg class="icon"><use href="#i-users"/></svg></span>
|
||
<span class="label">Участники</span>
|
||
</button>
|
||
<button class="tb-btn danger">
|
||
<span class="icon-shell"><svg class="icon"><use href="#i-logout"/></svg></span>
|
||
<span class="label">Выйти</span>
|
||
</button>
|
||
</footer>
|
||
|
||
<!-- Документация состояния: чат свёрнут -->
|
||
<div class="collapsed-demo">
|
||
<p class="label">Справочно — состояние тулбара, когда панель чата свёрнута (иконка без подсветки, счётчик непрочитанных сохраняется):</p>
|
||
<button class="tb-btn is-on" style="display:inline-flex">
|
||
<span class="icon-shell" style="position:relative"><svg class="icon"><use href="#i-chat"/></svg><span class="badge-count">3</span></span>
|
||
<span class="label">Чат</span>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|