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)
109 lines
4.2 KiB
HTML
109 lines
4.2 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>Песочница _lab</title>
|
|
<link rel="stylesheet" href="/css/main.css" />
|
|
<link rel="stylesheet" href="/_lab/lab.css" />
|
|
<style>
|
|
.lab-index {
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
padding: clamp(2.5rem, 6vw, 4rem) var(--space) 6rem;
|
|
}
|
|
.lab-index__h1 {
|
|
font-family: var(--font-accent);
|
|
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
.lab-index__sub {
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
margin: 0 0 2.5rem;
|
|
max-width: 40rem;
|
|
}
|
|
.lab-index__list {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
|
}
|
|
.lab-index__card {
|
|
display: block;
|
|
padding: 1.25rem 1.5rem;
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
box-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.1), 4px 8px 8px hsla(0, 0%, 0%, 0.15);
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
.lab-index__card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.1), 4px 8px 12px hsla(0, 0%, 0%, 0.22);
|
|
}
|
|
.lab-index__title {
|
|
font-family: var(--font-accent);
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
.lab-index__desc {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
}
|
|
.lab-index__note {
|
|
margin-top: 2.5rem;
|
|
padding: 1rem 1.25rem;
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
|
border: 1px solid var(--line);
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
color: var(--text-muted);
|
|
}
|
|
.lab-index__note code {
|
|
font-family: var(--font);
|
|
padding: 0.1em 0.35em;
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in srgb, var(--text) 8%, transparent);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-mesh-bg" aria-hidden="true"></div>
|
|
<main class="lab-index">
|
|
<h1 class="lab-index__h1">Песочница _lab</h1>
|
|
<p class="lab-index__sub">
|
|
Стенды для настройки видa элементов без сборки сайта. Правишь
|
|
<code>public/css/main.css</code> или файл стенда — страница перезагружается сама (live-reload
|
|
сервера <code>npm run serve</code>). Когда вид готов, переносишь компонент в
|
|
<code>src/pages/**</code> и собираешь <code>npm run build:pages</code>.
|
|
</p>
|
|
|
|
<div class="lab-index__list">
|
|
<a class="lab-index__card" href="/_lab/neu-card.html">
|
|
<div class="lab-index__title">neu-card</div>
|
|
<div class="lab-index__desc">
|
|
Неуморфная карточка: токены, состояния, текстура, вложенность.
|
|
</div>
|
|
</a>
|
|
<a class="lab-index__card" href="/_lab/template.html">
|
|
<div class="lab-index__title">template</div>
|
|
<div class="lab-index__desc">Пустой шаблон для нового стенда.</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="lab-index__note">
|
|
<strong>Как добавить стенд:</strong> скопируй <code>/_lab/template.html</code> в
|
|
<code>/_lab/<имя>.html</code>, поправь заголовок и секции. Стили компонента — в
|
|
<code>public/css/main.css</code>, обвязка стенда — в <code>/_lab/lab.css</code>.
|
|
Переключатель темы подключается автоматически через <code>lab.js</code>.
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|