12 KiB
12 KiB
Техническое задание: QazFlat — сервис аналитики недвижимости Казахстана
1. Общее описание
Название: QazFlat
Слоган: «Аналитика рынка недвижимости Казахстана»
Тип: Одностраничный аналитический сервис (SPA)
Цель: Пользователь выбирает город и параметры квартиры → видит текущую цену, динамику за 2 года и оценку «дороже/дешевле рынка»
2. Структура страниц
2.1 Главная страница (/)
Блоки:
- Header — логотип QazFlat + навигация (Главная | Цены | Аналитика | Города)
- Hero — заголовок + подзаголовок + форма поиска
- Фильтры поиска:
- Город (select: Алматы, Астана, Шымкент, Караганда, Актобе, Тараз, Павлодар, Усть-Каменогорск, Семей, Атырау, Костанай, Кызылорда)
- Комнат (1, 2, 3, 4+)
- Тип дома (любой, панельный, кирпичный, монолитный, блочный)
- Год постройки (от — до, 1960–2026)
- Площадь (от — до, 20–200 м²)
- Цена (от — до, 5–500 млн ₸)
- Кнопка «Показать аналитику» — запускает расчёт
- Результаты аналитики (появляются после клика):
- Средняя цена квартиры: XX,X млн ₸
- Средняя цена за м²: XXX тыс. ₸
- Изменение за 2 года: +X,X%
- Изменение за последний год: +X,X%
- График «Цена за 1 м² — последние 24 месяца» (canvas, Chart.js через CDN)
- Таблица городов — сравнение цен по всем городам
- Калькулятор сравнения — форма для ввода конкретной квартиры + вывод «дороже/дешевле на X%»
- Footer — © 2026 QazFlat. Аналитика рынка недвижимости Казахстана
2.2 Страница «Цены» (/prices.html)
Контент:
- Таблица со всеми городами: Город | Средняя цена м² | За год | За 2 года | Количество объявлений
- Сортировка по цене (по убыванию)
- Цветовая индикация: зелёный (рост >10%), жёлтый (5–10%), красный (<5%)
2.3 Страница «Аналитика» (/analytics.html)
Контент:
- 3 больших графика:
- Динамика цен по Алматы (24 месяца)
- Динамика цен по Астане (24 месяца)
- Сравнение городов (бар-чарт)
- Статистика: медианная цена, минимальная, максимальная, количество объявлений
2.4 Страница «Города» (/cities.html)
Контент:
- Карточки городов (12 городов)
- На карточке: название, средняя цена м², изменение за год, кнопка «Подробнее»
- При клике — модальное окно с детальной статистикой города
3. Данные (моковые)
3.1 Города и цены (средняя цена за м², тыс. ₸)
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 месяца (Алматы, пример)
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 Формулы расчёта
// Средняя цена квартиры = средняя цена м² × средняя площадь (60 м² для 2-комн)
// Изменение за год = (текущая - год назад) / год назад × 100
// Изменение за 2 года = (текущая - 2 года назад) / 2 года назад × 100
// Отклонение от рынка = (цена_квартиры / площадь) / средняя_цена_м² × 100 - 100
4. Дизайн-система
4.1 Цветовая палитра
--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 Типографика
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 Поиск и фильтрация
- Пользователь выбирает город + параметры
- Клик «Показать аналитику»
- JS фильтрует мок-данные
- Показываются: средняя цена, цена м², динамика, график
6.2 Калькулятор сравнения
- Пользователь вводит: цена, площадь, город, комнатность
- JS считает: цена м² квартиры vs средняя по рынку
- Вывод: «На X% дороже/дешевле рынка» + цветовая индикация
6.3 Графики
- Chart.js, line chart
- Ось X: месяцы (24 шт)
- Ось Y: цена за м² (тыс. ₸)
- Плавная линия, точки, тултипы при наведении
7. Контент (тексты)
7.1 Hero
Заголовок: «Аналитика рынка недвижимости Казахстана»
Подзаголовок: «Сравнивайте цены квартир, отслеживайте динамику и находите выгодные предложения за 30 секунд»
7.2 Калькулятор
Заголовок: «Оценить квартиру»
Подзаголовок: «Введите параметры — мы сравним с рынком»
7.3 Footer
«© 2026 QazFlat. Аналитика рынка недвижимости Казахстана. Данные носят информационный характер.»
8. Этапы реализации
- ✅ Создать design.md (это файл)
- ⏳ index.html — главная страница (hero + фильтры + результаты + график)
- ⏳ script.js — данные + логика фильтрации + калькулятор + Chart.js
- ⏳ prices.html — таблица городов
- ⏳ analytics.html — 3 графика
- ⏳ cities.html — карточки городов
- ⏳ Тест: открыть в браузере, проверить фильтры, калькулятор, графики
- ⏳ Финальная полировка (отступы, цвета, тексты)
9. Метрики успеха
- Пользователь находит нужную информацию ≤ 3 кликов
- Калькулятор выдаёт результат ≤ 1 сек
- График читается на мобильном
- Все 12 городов в таблице
- Нет ошибок в консоли
Утверждено: пользователь согласился на концепцию
Дата: 21.08.2026
Версия: 1.0