106 lines
4.9 KiB
HTML
106 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark">
|
|
<meta name="theme-color" content="#101714">
|
|
<title>Домовой — твой помощник</title>
|
|
<link rel="stylesheet" href="/assets/chat.css">
|
|
</head>
|
|
<body>
|
|
<main class="assistant-shell">
|
|
<section id="login-view" class="auth-view">
|
|
<div class="auth-card" aria-live="polite">
|
|
<div class="brand-block">
|
|
<span class="brand-mark" aria-hidden="true">Д</span>
|
|
<div>
|
|
<p class="brand-kicker">личный диалог</p>
|
|
<h1>Домовой</h1>
|
|
</div>
|
|
</div>
|
|
<p class="auth-copy">Войдите, чтобы открыть спокойный чат с вашим помощником.</p>
|
|
<form id="login-form" class="login-form">
|
|
<label for="username">Логин</label>
|
|
<input id="username" autocomplete="username" required autofocus>
|
|
<label for="password">Пароль</label>
|
|
<div class="input-with-action">
|
|
<input id="password" type="password" autocomplete="current-password" required>
|
|
<button id="toggle-password" class="icon-button" type="button" aria-label="Показать пароль">показать</button>
|
|
</div>
|
|
<button id="login-button" type="submit">Открыть чат</button>
|
|
<p id="login-error" role="alert"></p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="chat-view" class="chat-view" hidden>
|
|
<header class="assistant-header">
|
|
<div class="header-brand">
|
|
<span class="brand-mark" aria-hidden="true">Д</span>
|
|
<div>
|
|
<p class="brand-kicker">твой спокойный ассистент</p>
|
|
<h1>Домовой</h1>
|
|
</div>
|
|
</div>
|
|
<div class="session-state" aria-live="polite">
|
|
<span id="connection-state" class="status-pill"></span>
|
|
<button id="logout" class="ghost-button" type="button" aria-label="Выйти">Выйти</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="human-nav" aria-label="Разделы Домового" role="tablist">
|
|
<button class="nav-tab active" data-tab="chat-panel" role="tab" aria-selected="true" aria-controls="chat-panel" id="tab-chat" type="button">Чат</button>
|
|
<button class="nav-tab" data-tab="today-panel" role="tab" aria-selected="false" aria-controls="today-panel" id="tab-today" type="button">Сегодня</button>
|
|
<button class="nav-tab" data-tab="history-panel" role="tab" aria-selected="false" aria-controls="history-panel" id="tab-history" type="button">История</button>
|
|
</nav>
|
|
|
|
<section class="surface-panel active-panel" id="chat-panel" role="tabpanel" aria-labelledby="tab-chat">
|
|
<div class="panel-toolbar">
|
|
<div>
|
|
<h2>Чат</h2>
|
|
<p>Пишите обычные фразы. Я отвечу спокойно и по делу.</p>
|
|
</div>
|
|
<p id="active-focus" class="focus-chip" hidden></p>
|
|
</div>
|
|
<div id="messages" class="messages" aria-live="polite"></div>
|
|
<form id="chat-form" class="composer">
|
|
<label class="visually-hidden" for="message">Ваше сообщение</label>
|
|
<textarea id="message" rows="3" maxlength="16384" placeholder="Напишите, чем помочь" required></textarea>
|
|
<div class="composer-actions">
|
|
<button id="send" class="primary-button" type="submit">Отправить</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="today-panel" class="surface-panel attention-surface" hidden role="tabpanel" aria-labelledby="tab-today">
|
|
<div class="panel-toolbar">
|
|
<div>
|
|
<h2>Сегодня</h2>
|
|
<p id="today-subtitle">Что сейчас требует твоего внимания</p>
|
|
</div>
|
|
<button id="refresh-today" class="ghost-button" type="button">Обновить</button>
|
|
</div>
|
|
<div id="today-list" class="attention-list"></div>
|
|
</section>
|
|
|
|
<section id="history-panel" class="surface-panel history-surface" hidden role="tabpanel" aria-labelledby="tab-history">
|
|
<div class="panel-toolbar">
|
|
<div>
|
|
<h2>История</h2>
|
|
<p>Сообщения текущего браузерного сеанса</p>
|
|
</div>
|
|
<button id="clear-history" class="ghost-button" type="button">Очистить</button>
|
|
</div>
|
|
<div id="history-list" class="history-list"></div>
|
|
</section>
|
|
</section>
|
|
<p id="status-bar" class="status-bar" aria-live="polite"></p>
|
|
</main>
|
|
|
|
<div id="composer-error" class="composer-error" role="status" aria-live="polite"></div>
|
|
|
|
<script src="/assets/chat.js"></script>
|
|
</body>
|
|
</html>
|