mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
43 lines
3.1 KiB
Markdown
43 lines
3.1 KiB
Markdown
# refs-html — статические снимки нового дизайна
|
||
|
||
Отформатированный HTML, вытащенный из Next-референса `refs/`, чтобы смотреть
|
||
макеты как референс по разметке и классам: открыл файл в браузере — увидел
|
||
дизайн.
|
||
|
||
## Файлы
|
||
|
||
| Файл | Маршрут в нашем приложении (audit) | Что показывает |
|
||
| ------------------------- | -------------------------------------- | --------------------------------------------------- |
|
||
| `demo.html` | `/preview/demo` | Пайплайн-воркспейс + панель превью |
|
||
| `list-tools.html` | `/preview/list-tools` | Каталог инструментов (группы, поиск, фильтры) |
|
||
| `gradient.html` | `/preview/tools/linear-gradient-png` | Инструмент «Градиент»: настройки + превью + CSS |
|
||
| `background-remover.html` | `/preview/tools/remove-background-png` | Инструмент «Удаление фона»: сравнение source/result |
|
||
|
||
> `index.html` не используется: в Next-рефе это зеркало `demo` (главная == `/easy-png-tools/demo`),
|
||
> а в нашем приложении `/preview` — своя страница (воркспейс). Файл не генерируется
|
||
> экстрактором (`scripts/extract-static.mjs` пропускает `index.html`) и исключён
|
||
> из аудита (`EXCLUDE` в `web/scripts/audit.mjs`).
|
||
|
||
## Особенности
|
||
|
||
- **Это статика без JS**: все `<script>` удалены, интерактивности нет.
|
||
Тумблеры/кнопки/слайдеры не кликаются — это витрина состояний по умолчанию.
|
||
- Разметка отформатирована (отступы), CSS темы заинлайнен и причёсан —
|
||
файлы автономны, работают с `file://`.
|
||
- Тема по умолчанию: `gradient.html` и `background-remover.html` отрисованы
|
||
в тёмной (так в коде рефа), `index.html`/`demo.html` — в светлой. Чтобы
|
||
посмотреть светлый вариант тёмных страниц — убрать класс `dark-mode` у
|
||
`.app-shell`; для тёмной главной — добавить его же.
|
||
- Источник правды по пикселям — код в `refs/`; здесь только витрина.
|
||
|
||
## Как перегенерировать
|
||
|
||
```powershell
|
||
cd refs
|
||
pnpm install # если ещё не ставили
|
||
node node_modules\next\dist\bin\next build # output: 'export' включён в next.config.mjs
|
||
node extract-static.mjs .next\server\app ..\refs-html # форматирование, инлайн-CSS, без скриптов
|
||
```
|
||
|
||
Скрипт: `refs/extract-static.mjs`.
|