SHA256
qandClaude Opus 5.5
2e62616b46
Палитра «Сияние» по умолчанию, новые роли цветов. Лента канала: плоские записи, ряд действий с равным шагом иконок, дата у записи. Обсуждение со строкой ввода, личный чат, шторки. Вход и регистрация: стартовый экран (надпись «СИЯНИЕ», сияние мандалы), настройки входа со статусами серверов, статус логина в одну строку, вход с другого устройства (код, таймер, шаги), сохранение ключей с переключателями. Корневые разделы – заголовок по центру; фильтр чатов – переключатель; уведомления – список как в чатах; фото – просмотр на весь экран. Общее: один зазор под шапкой (--page-top-gap), переключатели высотой с поле ввода, второстепенные кнопки по одной роли (в том числе на экранах устройств и серверов), иконки только из ui-icon.js, полоса прокрутки скрыта, среднее тире в текстах интерфейса. Что нужно от сервера и разработчика – docs/UI-Design/UI-v4-for-dev.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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>
|