# 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` на одном уровне с ``, вне роутов: ```tsx ``` `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` |