# 🎯 Визуальная схема: Как работает мультибрендинг

```
┌─────────────────────────────────────────────────────────┐
│              ЗАПУСК ПРИЛОЖЕНИЯ                          │
└─────────────────────────────────────────────────────────┘
                          │
                          ├──────────────┬──────────────┐
                          │              │              │
                          ▼              ▼              ▼
               ┌──────────────┐ ┌──────────┐ ┌─────────────┐
               │   ng serve   │ │ng serve  │ │  ng build   │
               │              │ │ --config │ │  --config   │
               │ (Dexar Dev)  │ │   novo   │ │novo-product.│
               └──────────────┘ └──────────┘ └─────────────┘
                      │              │              │
                      ▼              ▼              ▼
          ┌───────────────────────────────────────────────┐
          │         ANGULAR.JSON выбирает:                │
          │  • Какой environment.ts использовать          │
          │  • Какую тему (SCSS) подключить               │
          │  • Куда сохранить сборку (dist/)              │
          └───────────────────────────────────────────────┘
                      │              │              │
                      ▼              ▼              ▼
       ┌────────────────────┐ ┌─────────────┐ ┌──────────────┐
       │  environment.ts    │ │environment. │ │environment.  │
       │  (Dexar)           │ │ novo.ts     │ │novo.prod.ts  │
       │                    │ │ (novo)      │ │ (novo Prod)  │
       │ • brandName        │ │• brandName  │ │• brandName   │
       │ • apiUrl           │ │• apiUrl     │ │• apiUrl      │
       │ • theme: 'dexar'   │ │• theme:novo │ │• theme: novo │
       │ • colors: purple   │ │• colors:    │ │• colors:     │
       │ • email            │ │  green 🟢   │ │  green 🟢    │
       └────────────────────┘ └─────────────┘ └──────────────┘
                      │              │              │
                      ▼              ▼              ▼
          ┌───────────────────────────────────────────────┐
          │        ТЕМА (SCSS) загружается:               │
          │  • dexar.theme.scss → фиолетовый 🟣          │
          │  • novo.theme.scss → зеленый 🟢              │
          │                                                │
          │  CSS переменные устанавливаются:              │
          │  --primary-color                              │
          │  --gradient-hero                              │
          │  --shadow-lg и т.д.                          │
          └───────────────────────────────────────────────┘
                              │
                              ▼
          ┌────────────────────────────────────────────────┐
          │         КОМПОНЕНТЫ читают данные:              │
          │                                                │
          │  HeaderComponent                              │
          │    brandName = environment.brandFullName      │
          │    → "Dexar Market" ИЛИ "novo Market"        │
          │                                                │
          │  FooterComponent                              │
          │    brandName = environment.brandName          │
          │    email = environment.contactEmail           │
          │                                                │
          │  HomeComponent                                │
          │    brandName = environment.brandFullName      │
          │                                                │
          │  ApiService                                   │
          │    baseUrl = environment.apiUrl               │
          │    → api.dexarmarket.ru ИЛИ api.novomarket.ru│
          └────────────────────────────────────────────────┘
                              │
                              ▼
          ┌─────────────────────────────────────────────────┐
          │           РЕЗУЛЬТАТ В БРАУЗЕРЕ:                 │
          │                                                 │
          │  🟣 DEXAR MARKET          🟢 novo MARKET       │
          │  ────────────────          ─────────────       │
          │  Название: Dexar Market    Название: novo      │
          │  Цвета: фиолетовый         Цвета: зеленый     │
          │  Hero: фиолетовый фон      Hero: зеленый фон  │
          │  Кнопки: #667eea           Кнопки: #10b981    │
          │  API: dexarmarket.ru       API: novomarket.ru │
          │  Email: info@dexarmarket   Email: info@novo... │
          └─────────────────────────────────────────────────┘
```

## 🔄 Поток данных:

```
Команда запуска → angular.json → Environment файл → Тема (CSS) → Компоненты → Браузер
                                       │                │
                                       ├── Переменные   ├── CSS vars
                                       │   (JS)         │   (SCSS)
                                       │                │
                                       └── brandName    └── --primary-color
                                           apiUrl           --gradient-hero
                                           email            и т.д.
```

## 🎨 Цветовая схема:

### Dexar (Фиолетовый) 🟣:
```
Primary:    #667eea ███████
Secondary:  #764ba2 ███████
Accent:     #f093fb ███████
Gradient:   #667eea → #764ba2
```

### novo (Зеленый) 🟢:
```
Primary:    #10b981 ███████
Secondary:  #14b8a6 ███████
Accent:     #34d399 ███████
Gradient:   #10b981 → #14b8a6
```

## 📦 Структура файлов:

```
Dexarmarket/
├── src/
│   ├── environments/           ← Конфигурации брендов
│   │   ├── environment.ts                (Dexar Dev)
│   │   ├── environment.production.ts     (Dexar Prod)
│   │   ├── environment.novo.ts           (novo Dev) 🆕
│   │   └── environment.novo.production.ts (novo Prod) 🆕
│   │
│   ├── styles/
│   │   └── themes/            ← Цветовые темы
│   │       ├── dexar.theme.scss (фиолетовый)
│   │       └── novo.theme.scss  (зеленый) 🆕
│   │
│   └── app/
│       ├── components/        ← Используют environment
│       │   ├── header/          (brandName)
│       │   └── footer/          (brandName, email)
│       ├── pages/
│       │   └── home/            (brandName)
│       └── services/
│           └── api.service.ts   (apiUrl)
│
├── angular.json               ← Конфигурации сборки 🔧
├── package.json               ← NPM scripts 🔧
│
└── dist/                      ← Результаты сборки
    ├── dexarmarket/            (после build:dexar)
    └── novomarket/             (после build:novo) 🆕
```

## 🚀 Команды и их эффект:

```bash
# Команда                    Environment            Тема        Порт   Результат
npm start                  → environment.ts      → dexar.scss → 4200 → Dexar 🟣
npm run start:novo         → environment.novo.ts → novo.scss  → 4201 → novo 🟢
npm run build:dexar        → environment.prod.ts → dexar.scss → dist/dexarmarket/
npm run build:novo         → environment.novo... → novo.scss  → dist/novomarket/
```

## 💡 Как добавить 3-й бренд (например "Blue Market"):

1. Создать `environment.blue.ts` и `environment.blue.production.ts`
2. Создать `blue.theme.scss` с синими цветами
3. Добавить конфигурации в `angular.json`
4. Добавить скрипты в `package.json`
5. Готово! `npm run start:blue`

Легко! 🎉