SHA256
35 lines
3.5 KiB
HTML
35 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>SHiNE — четыре направления UI</title>
|
|
<link rel="stylesheet" href="mockups.css">
|
|
<script src="mockups.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<header class="studio-header">
|
|
<a class="brand" href="index.html" aria-label="SHiNE — все варианты"><span class="brand-spark">✳</span> SHiNE<span class="brand-caption">DESIGN STUDY / 01</span></a>
|
|
<span class="draft-label">Концепции · сентябрь 2026</span>
|
|
</header>
|
|
<main>
|
|
<section class="intro">
|
|
<div><div class="eyebrow">КАНАЛЫ / СООБЩЕНИЯ / ОТВЕТЫ</div><h1>Ближе к разговору.</h1><p>Четыре характера. Один привычный путь от канала к ответу.<br>Выберите экран и сравните — или нажмите на элементы внутри макета.</p></div>
|
|
<div class="intro-note"><span>01—04</span><p>Меньше визуального шума.<br>Больше места людям и мыслям.</p></div>
|
|
</section>
|
|
<section class="review-bar" aria-label="Управление просмотром">
|
|
<div class="screen-switch" role="group" aria-label="Экран для всех вариантов">
|
|
<button class="review-button selected" data-screen="list" aria-pressed="true">01 Каналы</button>
|
|
<button class="review-button" data-screen="feed" aria-pressed="false">02 Сообщения</button>
|
|
<button class="review-button" data-screen="thread" aria-pressed="false">03 Ветка</button>
|
|
<button class="review-button" data-screen="reply" aria-pressed="false">04 Ответ</button>
|
|
</div>
|
|
<div class="review-options"><label>Роль <select id="role"><option value="reader">Читатель</option><option value="owner">Владелец</option></select></label><label class="keyboard-option"><input type="checkbox" id="keyboard"> Макет клавиатуры</label><a class="compare-link" href="index.html">Все варианты ↗</a></div>
|
|
</section>
|
|
<div id="gallery" class="gallery"></div>
|
|
<section class="decision-note"><span class="eyebrow">С ЧЕГО НАЧАТЬ ОБСУЖДЕНИЕ</span><h2>Сначала удобство. Затем характер.</h2><div class="decision-grid"><p><b>01 / Читаемость</b>Где комфортнее читать длинный пост и замечать новый ответ?</p><p><b>02 / Плотность</b>Нужны просторные сообщения или больше содержимого на одном экране?</p><p><b>03 / Окно ответа</b>Полный экран или лист поверх ветки? Проверьте с макетом клавиатуры.</p></div><p class="disclaimer">Демонстрационные данные. Отправка и реакции работают только внутри этой страницы. Поиск фильтрует примеры. Другие разделы приложения не проектировались. <a href="../DESIGN.md">Дизайн-документ ↗</a></p></section>
|
|
</main>
|
|
<footer class="studio-footer"><span>SHiNE / пространство для общения</span><span>Рабочий материал · не финальный дизайн</span></footer>
|
|
</body>
|
|
</html>
|