# Техническое задание: QazFlat — сервис аналитики недвижимости Казахстана

## 1. Общее описание

**Название:** QazFlat  
**Слоган:** «Аналитика рынка недвижимости Казахстана»  
**Тип:** Одностраничный аналитический сервис (SPA)  
**Цель:** Пользователь выбирает город и параметры квартиры → видит текущую цену, динамику за 2 года и оценку «дороже/дешевле рынка»

---

## 2. Структура страниц

### 2.1 Главная страница (/)

**Блоки:**
1. **Header** — логотип QazFlat + навигация (Главная | Цены | Аналитика | Города)
2. **Hero** — заголовок + подзаголовок + форма поиска
3. **Фильтры поиска:**
   - Город (select: Алматы, Астана, Шымкент, Караганда, Актобе, Тараз, Павлодар, Усть-Каменогорск, Семей, Атырау, Костанай, Кызылорда)
   - Комнат (1, 2, 3, 4+)
   - Тип дома (любой, панельный, кирпичный, монолитный, блочный)
   - Год постройки (от — до, 1960–2026)
   - Площадь (от — до, 20–200 м²)
   - Цена (от — до, 5–500 млн ₸)
4. **Кнопка «Показать аналитику»** — запускает расчёт
5. **Результаты аналитики** (появляются после клика):
   - Средняя цена квартиры: XX,X млн ₸
   - Средняя цена за м²: XXX тыс. ₸
   - Изменение за 2 года: +X,X%
   - Изменение за последний год: +X,X%
   - График «Цена за 1 м² — последние 24 месяца» (canvas, Chart.js через CDN)
6. **Таблица городов** — сравнение цен по всем городам
7. **Калькулятор сравнения** — форма для ввода конкретной квартиры + вывод «дороже/дешевле на X%»
8. **Footer** — © 2026 QazFlat. Аналитика рынка недвижимости Казахстана

### 2.2 Страница «Цены» (/prices.html)

**Контент:**
- Таблица со всеми городами: Город | Средняя цена м² | За год | За 2 года | Количество объявлений
- Сортировка по цене (по убыванию)
- Цветовая индикация: зелёный (рост >10%), жёлтый (5–10%), красный (<5%)

### 2.3 Страница «Аналитика» (/analytics.html)

**Контент:**
- 3 больших графика:
  1. Динамика цен по Алматы (24 месяца)
  2. Динамика цен по Астане (24 месяца)
  3. Сравнение городов (бар-чарт)
- Статистика: медианная цена, минимальная, максимальная, количество объявлений

### 2.4 Страница «Города» (/cities.html)

**Контент:**
- Карточки городов (12 городов)
- На карточке: название, средняя цена м², изменение за год, кнопка «Подробнее»
- При клике — модальное окно с детальной статистикой города

---

## 3. Данные (моковые)

### 3.1 Города и цены (средняя цена за м², тыс. ₸)

```js
const CITIES = {
  "Алматы": { price: 650, year1: 7.2, year2: 18.4, count: 12450 },
  "Астана": { price: 580, year1: 5.8, year2: 15.1, count: 8920 },
  "Шымкент": { price: 390, year1: 6.1, year2: 14.7, count: 4560 },
  "Караганда": { price: 320, year1: 4.2, year2: 12.3, count: 3210 },
  "Актобе": { price: 340, year1: 5.1, year2: 13.8, count: 2180 },
  "Тараз": { price: 290, year1: 3.9, year2: 11.2, count: 1540 },
  "Павлодар": { price: 310, year1: 4.5, year2: 12.9, count: 1890 },
  "Усть-Каменогорск": { price: 360, year1: 5.3, year2: 14.1, count: 1670 },
  "Семей": { price: 280, year1: 3.7, year2: 10.8, count: 1230 },
  "Атырау": { price: 420, year1: 6.8, year2: 16.2, count: 1980 },
  "Костанай": { price: 300, year1: 4.1, year2: 11.5, count: 1450 },
  "Кызылорда": { price: 330, year1: 4.8, year2: 13.1, count: 1120 }
};
```

### 3.2 Динамика за 24 месяца (Алматы, пример)

```js
const ALMATY_HISTORY = [
  { month: "Янв 2024", price: 550 }, { month: "Фев 2024", price: 555 },
  { month: "Мар 2024", price: 560 }, { month: "Апр 2024", price: 565 },
  { month: "Май 2024", price: 572 }, { month: "Июн 2024", price: 578 },
  { month: "Июл 2024", price: 585 }, { month: "Авг 2024", price: 590 },
  { month: "Сен 2024", price: 598 }, { month: "Окт 2024", price: 605 },
  { month: "Ноя 2024", price: 612 }, { month: "Дек 2024", price: 620 },
  { month: "Янв 2025", price: 625 }, { month: "Фев 2025", price: 630 },
  { month: "Мар 2025", price: 635 }, { month: "Апр 2025", price: 640 },
  { month: "Май 2025", price: 645 }, { month: "Июн 2025", price: 648 },
  { month: "Июл 2025", price: 650 }, { month: "Авг 2025", price: 652 },
  { month: "Сен 2025", price: 655 }, { month: "Окт 2025", price: 658 },
  { month: "Ноя 2025", price: 660 }, { month: "Дек 2025", price: 665 }
];
```

### 3.3 Формулы расчёта

```js
// Средняя цена квартиры = средняя цена м² × средняя площадь (60 м² для 2-комн)
// Изменение за год = (текущая - год назад) / год назад × 100
// Изменение за 2 года = (текущая - 2 года назад) / 2 года назад × 100
// Отклонение от рынка = (цена_квартиры / площадь) / средняя_цена_м² × 100 - 100
```

---

## 4. Дизайн-система

### 4.1 Цветовая палитра

```css
--bg: #ffffff;           /* белый фон */
--text: #1a1a1a;         /* основной текст */
--text-secondary: #6b7280;  /* вторичный текст */
--accent: #00b8cc;       /* бирюзовый акцент */
--accent-hover: #009aa8; /* акцент при наведении */
--success: #10b981;      /* зелёный (рост, выгодно) */
--warning: #f59e0b;      /* жёлтый (умеренный рост) */
--danger: #ef4444;       /* красный (падение, дорого) */
--border: #e5e7eb;       /* границы */
--card-bg: #f9fafb;      /* фон карточек */
```

### 4.2 Типографика

```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

h1: 48px / 600 (hero)
h2: 32px / 600 (заголовки секций)
h3: 20px / 500 (карточки)
body: 16px / 400
small: 14px / 400
```

### 4.3 Компоненты

**Кнопка:**
- padding: 12px 24px
- border-radius: 8px
- font-weight: 500
- transition: 0.2s

**Карточка:**
- padding: 24px
- border-radius: 12px
- background: #f9fafb
- box-shadow: 0 1px 3px rgba(0,0,0,0.1)

**Инпут:**
- padding: 10px 14px
- border: 1px solid #e5e7eb
- border-radius: 8px
- font-size: 16px

---

## 5. Технические требования

### 5.1 Стек

- HTML5, CSS3, Vanilla JS (ES6+)
- Tailwind CSS через CDN (для прототипа)
- Chart.js через CDN (графики)
- БЕЗ сборки, БЕЗ npm, БЕЗ фреймворков

### 5.2 Файлы

```
/srv/opencode/workspaces/users/zhuldyzkhan/soglasno-dannogo-zadaniya-so/
├── index.html          # Главная страница
├── prices.html         # Страница «Цены»
├── analytics.html      # Страница «Аналитика»
├── cities.html         # Страница «Города»
├── style.css           # Кастомные стили (если нужно)
└── script.js           # Логика + данные + графики
```

### 5.3 Адаптивность

- Мобильная версия: один столбец, фильтры в аккордеоне
- Планшет: два столбца
- Десктоп: 3–4 столбца

### 5.4 Производительность

- Загрузка страницы < 2 сек
- График рендерится < 500 мс
- Фильтры работают без перезагрузки (JS)

---

## 6. Функционал

### 6.1 Поиск и фильтрация

1. Пользователь выбирает город + параметры
2. Клик «Показать аналитику»
3. JS фильтрует мок-данные
4. Показываются: средняя цена, цена м², динамика, график

### 6.2 Калькулятор сравнения

1. Пользователь вводит: цена, площадь, город, комнатность
2. JS считает: цена м² квартиры vs средняя по рынку
3. Вывод: «На X% дороже/дешевле рынка» + цветовая индикация

### 6.3 Графики

- Chart.js, line chart
- Ось X: месяцы (24 шт)
- Ось Y: цена за м² (тыс. ₸)
- Плавная линия, точки, тултипы при наведении

---

## 7. Контент (тексты)

### 7.1 Hero

**Заголовок:** «Аналитика рынка недвижимости Казахстана»  
**Подзаголовок:** «Сравнивайте цены квартир, отслеживайте динамику и находите выгодные предложения за 30 секунд»

### 7.2 Калькулятор

**Заголовок:** «Оценить квартиру»  
**Подзаголовок:** «Введите параметры — мы сравним с рынком»

### 7.3 Footer

«© 2026 QazFlat. Аналитика рынка недвижимости Казахстана. Данные носят информационный характер.»

---

## 8. Этапы реализации

1. ✅ Создать design.md (это файл)
2. ⏳ index.html — главная страница (hero + фильтры + результаты + график)
3. ⏳ script.js — данные + логика фильтрации + калькулятор + Chart.js
4. ⏳ prices.html — таблица городов
5. ⏳ analytics.html — 3 графика
6. ⏳ cities.html — карточки городов
7. ⏳ Тест: открыть в браузере, проверить фильтры, калькулятор, графики
8. ⏳ Финальная полировка (отступы, цвета, тексты)

---

## 9. Метрики успеха

- Пользователь находит нужную информацию ≤ 3 кликов
- Калькулятор выдаёт результат ≤ 1 сек
- График читается на мобильном
- Все 12 городов в таблице
- Нет ошибок в консоли

---

**Утверждено:** пользователь согласился на концепцию  
**Дата:** 21.08.2026  
**Версия:** 1.0