105 lines
3.7 KiB
Markdown
105 lines
3.7 KiB
Markdown
|
# ✅ Обновлено: Все документы с динамическим брендингом
|
|||
|
|
|
|||
|
|
## Что сделано:
|
|||
|
|
|
|||
|
|
### 1. **Все компоненты получили environment переменные**
|
|||
|
|
|
|||
|
|
Обновлены TypeScript файлы:
|
|||
|
|
- ✅ `company-details.component.ts`
|
|||
|
|
- ✅ `payment-terms.component.ts`
|
|||
|
|
- ✅ `privacy-policy.component.ts`
|
|||
|
|
- ✅ `return-policy.component.ts`
|
|||
|
|
- ✅ `public-offer.component.ts`
|
|||
|
|
- ✅ `about.component.ts`
|
|||
|
|
- ✅ `contacts.component.ts`
|
|||
|
|
- ✅ `delivery.component.ts`
|
|||
|
|
- ✅ `guarantee.component.ts`
|
|||
|
|
- ✅ `faq.component.ts` (уже был обновлен ранее)
|
|||
|
|
|
|||
|
|
Теперь в каждом есть:
|
|||
|
|
```typescript
|
|||
|
|
brandName = environment.brandName;
|
|||
|
|
brandFullName = environment.brandFullName;
|
|||
|
|
contactEmail = environment.contactEmail;
|
|||
|
|
// и другие переменные
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. **Создан общий файл стилей**
|
|||
|
|
|
|||
|
|
✅ `src/styles/shared-legal.scss` - единый файл стилей для всех документов с:
|
|||
|
|
- CSS переменными для цветов бренда
|
|||
|
|
- Красивыми анимациями
|
|||
|
|
- Стильным оформлением заголовков с градиентами
|
|||
|
|
- Hover эффектами
|
|||
|
|
- Адаптивностью для мобильных
|
|||
|
|
- Цвета автоматически меняются под тему!
|
|||
|
|
|
|||
|
|
### 3. **Все SCSS файлы используют общий стиль**
|
|||
|
|
|
|||
|
|
Заменены на простой импорт:
|
|||
|
|
```scss
|
|||
|
|
@import '../../../../styles/shared-legal.scss';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎨 Что изменилось в дизайне:
|
|||
|
|
|
|||
|
|
### Dexar Market (фиолетовый):
|
|||
|
|
- Заголовки H1 с фиолетовым подчеркиванием
|
|||
|
|
- H2 с фиолетовым акцентом слева
|
|||
|
|
- Секции с фиолетовой границей
|
|||
|
|
- Ссылки с фиолетовыми hover эффектами
|
|||
|
|
|
|||
|
|
### novo Market (зеленый):
|
|||
|
|
- Заголовки H1 с зеленым подчеркиванием
|
|||
|
|
- H2 с зеленым акцентом слева
|
|||
|
|
- Секции с зеленой границей
|
|||
|
|
- Ссылки с зелеными hover эффектами
|
|||
|
|
|
|||
|
|
## 📝 Теперь в шаблонах можно использовать:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<h1>{{ brandName }}</h1>
|
|||
|
|
<p>Контактный email: {{ contactEmail }}</p>
|
|||
|
|
<p>Поддержка: {{ supportEmail }}</p>
|
|||
|
|
<p>Телефон РФ: {{ phones.russia }}</p>
|
|||
|
|
<p>Телефон Армения: {{ phones.armenia }}</p>
|
|||
|
|
<p>Домен: {{ domain }}</p>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎯 Следующий шаг:
|
|||
|
|
|
|||
|
|
Обновите HTML шаблоны документов, заменив жестко заданные названия на переменные:
|
|||
|
|
|
|||
|
|
### Пример:
|
|||
|
|
**Было:**
|
|||
|
|
```html
|
|||
|
|
<h1>Публичная оферта Dexarmarket</h1>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Стало:**
|
|||
|
|
```html
|
|||
|
|
<h1>Публичная оферта {{ brandName }}</h1>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## ✨ Что вы получили:
|
|||
|
|
|
|||
|
|
1. ✅ Динамическое название бренда везде
|
|||
|
|
2. ✅ Автоматическое переключение цветов под тему
|
|||
|
|
3. ✅ Единый стиль для всех документов
|
|||
|
|
4. ✅ Легкая поддержка (один файл стилей)
|
|||
|
|
5. ✅ Красивые анимации и эффекты
|
|||
|
|
6. ✅ Адаптивный дизайн
|
|||
|
|
|
|||
|
|
## 🚀 Проверка:
|
|||
|
|
|
|||
|
|
Запустите:
|
|||
|
|
```bash
|
|||
|
|
npm run start:novo
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Откройте любую страницу документов и увидите:
|
|||
|
|
- 🟢 Зеленые акценты и подчеркивания
|
|||
|
|
- 🟢 Плавные анимации появления
|
|||
|
|
- 🟢 Красивые hover эффекты
|
|||
|
|
- 🟢 Название "novo Market" в заголовках
|