96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import { getFaceLevel } from '../domain/index/index-level';
|
||
|
||
const INITIAL_INDEX = 0;
|
||
|
||
export const App = () => {
|
||
const faceLevel = getFaceLevel(INITIAL_INDEX);
|
||
|
||
return (
|
||
<main className="app-shell">
|
||
<header className="app-header">
|
||
<div className="brand-lockup">
|
||
<span className="brand-mark" aria-hidden="true">
|
||
MI
|
||
</span>
|
||
<div>
|
||
<p className="eyebrow">Индикатор встречи</p>
|
||
<h1>Max Index</h1>
|
||
</div>
|
||
</div>
|
||
<p className="privacy-note">
|
||
<span aria-hidden="true" /> Локально, без записи
|
||
</p>
|
||
</header>
|
||
|
||
<section className="meeting-stage" aria-labelledby="index-heading">
|
||
<div className="character-zone">
|
||
<p className="status-pill">
|
||
<span aria-hidden="true" /> Пауза
|
||
</p>
|
||
|
||
<div
|
||
className="face-frame"
|
||
data-face-level={faceLevel}
|
||
role="img"
|
||
aria-label="Спокойное лицо персонажа"
|
||
>
|
||
<div className="face-ear face-ear-left" />
|
||
<div className="face-ear face-ear-right" />
|
||
<div className="face-character">
|
||
<div className="face-brow face-brow-left" />
|
||
<div className="face-brow face-brow-right" />
|
||
<div className="face-eye face-eye-left" />
|
||
<div className="face-eye face-eye-right" />
|
||
<div className="face-mouth" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="capture-state">
|
||
<strong>Микрофон не подключён</strong>
|
||
<span>Прослушивание выключено</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="index-zone">
|
||
<p className="eyebrow" id="index-heading">
|
||
Индекс встречи
|
||
</p>
|
||
<p className="index-value" aria-label="Индекс: 0 из 100">
|
||
<strong>{INITIAL_INDEX}</strong>
|
||
<span>/100</span>
|
||
</p>
|
||
<progress value={INITIAL_INDEX} max="100">
|
||
{INITIAL_INDEX}%
|
||
</progress>
|
||
|
||
<p className="foundation-copy">
|
||
Каркас готов. Следующий этап подключит локальное распознавание
|
||
речи.
|
||
</p>
|
||
|
||
<div className="controls" aria-label="Управление прослушиванием">
|
||
<button type="button" className="primary-action" disabled>
|
||
Начать
|
||
</button>
|
||
<button type="button" className="secondary-action" disabled>
|
||
Сбросить
|
||
</button>
|
||
</div>
|
||
<p className="control-hint">
|
||
Управление станет доступно после подключения первого сквозного
|
||
среза.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer className="last-trigger">
|
||
<div>
|
||
<span>Последнее срабатывание</span>
|
||
<strong>Пока ничего</strong>
|
||
</div>
|
||
<p>История хранится только в текущей сессии.</p>
|
||
</footer>
|
||
</main>
|
||
);
|
||
};
|