add diaposine

2026-06-03 13:52:39 +05:00
parent cc6ceac3a0
commit 01f5b90c99
5 changed files with 169 additions and 0 deletions
@@ -0,0 +1,67 @@
+# DemoOverlay — индикация демо-режима
+
+## Контекст
+
+Демо-режим активируется через `VITE_DEMO_MODE=true` (`client/.env.local`). Сейчас есть только `DemoBanner` (Alert в потоке страницы, не фиксированный). Нужно добавить постоянную визуальную индикацию — оверлей, который не мешает взаимодействию с сайтом.
+
+## Что делаем
+
+Новый компонент `DemoOverlay` в `client/src/shared/ui/DemoOverlay.tsx`.
+
+Два фиксированных слоя, оба `pointer-events: none`:
+
+1. **Водяной знак** — крупная надпись «ДЕМО», полупрозрачная, повёрнута на ~-30°, по центру экрана.
+2. **Плашка** — правый нижний угол, скруглённая полупрозрачная тёмная плашка с текстом «ДЕМО-РЕЖИМ».
+
+Оба рендерятся только при `IS_DEMO_MODE === true`.
+
+## Размещение
+
+В `App.tsx` на одном уровне с `<NoiseOverlay />`, вне роутов:
+
+```tsx
+<NoiseOverlay />
+<DemoOverlay />
+```
+
+`DemoBanner` (существующий Alert в MainLayout) — не трогаем, остаётся как есть.
+
+## Водяной знак
+
+- Текст: `ДЕМО`
+- Размер шрифта: `10vw` (адаптивный)
+- Поворот: `rotate(-30deg)`
+- Цвет: `rgba(0,0,0,0.04)` (тёмная тема: `rgba(255,255,255,0.04)`)
+- Позиция: `position: fixed`, `inset: 0`, центрирование через flex
+- z-index: `9990`
+
+## Плашка
+
+- Текст: `ДЕМО-РЕЖИМ`
+- Позиция: `position: fixed`, `bottom: 16px`, `right: 16px`
+- Фон: `rgba(0,0,0,0.6)` (тёмная тема: `rgba(255,255,255,0.08)`)
+- Цвет текста: `#fff` (тёмная тема: `rgba(255,255,255,0.6)`)
+- Паддинги: `6px 16px`
+- Скругление: `8px`
+- Размер шрифта: `12px`, `font-weight: 600`
+- z-index: `9991`
+
+## Тёмная тема
+
+Компонент читает тему через `useTheme()` из MUI и применяет соответствующие цвета для watermark и плашки.
+
+## Тесты
+
+Проверяем:
+- Компонент рендерится когда `IS_DEMO_MODE === true` (водяной знак + плашка видны)
+- Компонент не рендерится когда `IS_DEMO_MODE === false`
+- Плашка в правом нижнем углу (проверяем CSS-свойства)
+- `pointer-events: none` на обоих элементах
+
+## Файлы
+
+| Действие | Файл |
+|----------|------|
+| Создать | `client/src/shared/ui/DemoOverlay.tsx` |
+| Изменить | `client/src/app/App.tsx` |
+| Создать | `client/src/shared/ui/__tests__/DemoOverlay.test.tsx` |