root
a0dda98b83
- build-pages.mjs: per-locale page/partial overrides (*.en.html), i18n token
resolution with ru fallback, <html lang> + assetPrefix per locale
- UI dictionaries src/i18n/{ru,en}.json; lang-switch partial
- headers/footer/partials converted to {{i18n:…}} tokens
- root-absolute static asset refs so /en/ subpath loads css/js/vendor
- EN content: homepage (index.en.html + partials) and cookie-policy.en.html
(cookie-policy body translated via apinex.bond /v1/tools/translator)
75 lines
3.9 KiB
HTML
75 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" data-theme="dark" data-radius="medium" data-font="geologica">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<title>Стенд: <название элемента></title>
|
|
<!--
|
|
Базовый шаблон песочницы _lab.
|
|
Правила:
|
|
- Сборка НЕ нужна. Правишь public/css/main.css или этот файл → страница сама
|
|
перезагрузится (live-reload сервера npm run serve).
|
|
- Стили компонента живут в public/css/main.css. Сюда пишешь только обвязку стенда.
|
|
- Скрипт темы (lab.js) переиспользуется как есть — даёт переключатель темы/радиуса.
|
|
- Чтобы добавить новый стенд: скопируй этот файл в public/_lab/<имя>.html,
|
|
поправь заголовок и секции. Готовый элемент потом встрой в src/pages/**.
|
|
-->
|
|
<link rel="stylesheet" href="/css/main.css" />
|
|
<link rel="stylesheet" href="/_lab/lab.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-mesh-bg" aria-hidden="true"></div>
|
|
|
|
<main class="lab">
|
|
<header class="lab__head">
|
|
<h1 class="lab__h1"><название элемента></h1>
|
|
<p class="lab__sub">
|
|
Стенд для настройки вида. Сборка не нужна: правим <code>public/css/main.css</code> →
|
|
страница перезагрузится сама. Переключатель темы в правом нижнем углу.
|
|
</p>
|
|
<nav class="lab__nav" aria-label="Разделы стенда">
|
|
<a href="#sec-demo">Демо</a>
|
|
<a href="#sec-tokens">Токены</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Копируй эту секцию под каждый аспект настройки -->
|
|
<section class="lab__sec" id="sec-demo">
|
|
<h2 class="lab__h2">Демо</h2>
|
|
<p class="lab__note">Опиши, что смотрим. Здесь — сам элемент во всех состояниях.</p>
|
|
<div class="lab__row lab__row--wrap lab__depth">
|
|
<!-- Пример карточки из готового компонента neu-card: -->
|
|
<article class="neu-card">
|
|
<span class="neu-card__title">Состояние</span>
|
|
<span class="neu-card__meta">Подпись</span>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="lab__sec" id="sec-tokens">
|
|
<h2 class="lab__h2">Токены</h2>
|
|
<p class="lab__note">Числа, которыми управляется вид. Значение по умолчанию — в скобках.</p>
|
|
<div class="lab__tokens">
|
|
<dl class="lab__token">
|
|
<dt><code>--neu-bg</code> <span>--bg-elevated</span></dt>
|
|
<dd>Нейтральная заливка карточки.</dd>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="lab-switch" role="group" aria-label="Настройки стенда">
|
|
<button type="button" class="lab-switch__btn" data-lab-theme="light">Светлая</button>
|
|
<button type="button" class="lab-switch__btn" data-lab-theme="dark">Тёмная</button>
|
|
<span class="lab-switch__sep" aria-hidden="true"></span>
|
|
<button type="button" class="lab-switch__btn" data-lab-radius="soft">R·</button>
|
|
<button type="button" class="lab-switch__btn" data-lab-radius="medium">R·</button>
|
|
<button type="button" class="lab-switch__btn" data-lab-radius="strong">R·</button>
|
|
</div>
|
|
|
|
<script type="module" src="/_lab/lab.js"></script>
|
|
<script type="module" src="/_lab/live-reload.js"></script>
|
|
</body>
|
|
</html>
|