267 lines
12 KiB
Markdown
267 lines
12 KiB
Markdown
# Техническое задание: 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
|