301 lines
12 KiB
HTML
301 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>QazFlat — Аналитика рынка недвижимости Казахстана</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
:root {
|
||
--accent: #00b8cc;
|
||
--accent-hover: #009aa8;
|
||
--success: #10b981;
|
||
--warning: #f59e0b;
|
||
--danger: #ef4444;
|
||
}
|
||
.btn-primary {
|
||
background: var(--accent);
|
||
transition: background 0.2s;
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--accent-hover);
|
||
}
|
||
.card {
|
||
background: #f9fafb;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
.stat-value {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
}
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
margin-top: 4px;
|
||
}
|
||
.trend-up { color: var(--success); }
|
||
.trend-down { color: var(--danger); }
|
||
input, select {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
padding: 10px 14px;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
}
|
||
input:focus, select:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px rgba(0, 184, 204, 0.1);
|
||
}
|
||
.nav-link {
|
||
color: #6b7280;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-link:hover, .nav-link.active {
|
||
color: var(--accent);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white text-gray-900">
|
||
|
||
<!-- Header -->
|
||
<header class="border-b border-gray-200">
|
||
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2">
|
||
<path d="M3 21h18M5 21V7l8-4 8 4v14M8 21v-4a2 2 0 012-2h4a2 2 0 012 2v4"/>
|
||
</svg>
|
||
<span class="text-xl font-bold">QazFlat</span>
|
||
</div>
|
||
<nav class="hidden md:flex gap-6">
|
||
<a href="#home" class="nav-link active">Главная</a>
|
||
<a href="#prices" class="nav-link">Цены</a>
|
||
<a href="#analytics" class="nav-link">Аналитика</a>
|
||
<a href="#cities" class="nav-link">Города</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero -->
|
||
<section id="home" class="py-16">
|
||
<div class="max-w-4xl mx-auto px-4 text-center">
|
||
<h1 class="text-4xl md:text-5xl font-bold mb-4">Аналитика рынка недвижимости Казахстана</h1>
|
||
<p class="text-lg text-gray-600 mb-8">Сравнивайте цены квартир, отслеживайте динамику и находите выгодные предложения за 30 секунд</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Search & Filters -->
|
||
<section class="py-8">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<div class="card">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Город</label>
|
||
<select id="filter-city">
|
||
<option value="Алматы">Алматы</option>
|
||
<option value="Астана">Астана</option>
|
||
<option value="Шымкент">Шымкент</option>
|
||
<option value="Караганда">Караганда</option>
|
||
<option value="Актобе">Актобе</option>
|
||
<option value="Тараз">Тараз</option>
|
||
<option value="Павлодар">Павлодар</option>
|
||
<option value="Усть-Каменогорск">Усть-Каменогорск</option>
|
||
<option value="Семей">Семей</option>
|
||
<option value="Атырау">Атырау</option>
|
||
<option value="Костанай">Костанай</option>
|
||
<option value="Кызылорда">Кызылорда</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Комнат</label>
|
||
<select id="filter-rooms">
|
||
<option value="1">1</option>
|
||
<option value="2" selected>2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4+</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Тип дома</label>
|
||
<select id="filter-type">
|
||
<option value="any">Любой</option>
|
||
<option value="панельный">Панельный</option>
|
||
<option value="кирпичный">Кирпичный</option>
|
||
<option value="монолитный">Монолитный</option>
|
||
<option value="блочный">Блочный</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Площадь, м²</label>
|
||
<div class="flex gap-2">
|
||
<input type="number" id="filter-area-from" placeholder="От" value="50">
|
||
<input type="number" id="filter-area-to" placeholder="До" value="70">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Год постройки</label>
|
||
<div class="flex gap-2">
|
||
<input type="number" id="filter-year-from" placeholder="От" value="2015">
|
||
<input type="number" id="filter-year-to" placeholder="До" value="2025">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Цена, млн ₸</label>
|
||
<div class="flex gap-2">
|
||
<input type="number" id="filter-price-from" placeholder="От" value="20">
|
||
<input type="number" id="filter-price-to" placeholder="До" value="50">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button onclick="showAnalytics()" class="btn-primary text-white px-6 py-3 rounded-lg font-medium w-full md:w-auto">
|
||
Показать аналитику
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Analytics Results -->
|
||
<section id="results" class="py-8 hidden">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<h2 class="text-2xl font-bold mb-6">Результаты аналитики</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||
<div class="card">
|
||
<div class="stat-value" id="stat-avg-price">32,5 млн ₸</div>
|
||
<div class="stat-label">Средняя цена квартиры</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="stat-value" id="stat-price-m2">650 тыс. ₸</div>
|
||
<div class="stat-label">Средняя цена за м²</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="stat-value trend-up" id="stat-year2">+18,4%</div>
|
||
<div class="stat-label">Изменение за 2 года</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="stat-value trend-up" id="stat-year1">+7,2%</div>
|
||
<div class="stat-label">Изменение за последний год</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-8">
|
||
<h3 class="text-lg font-semibold mb-4">Цена за 1 м² — последние 24 месяца</h3>
|
||
<canvas id="priceChart" height="80"></canvas>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cities Table -->
|
||
<section id="prices" class="py-8">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<h2 class="text-2xl font-bold mb-6">Цены по городам</h2>
|
||
<div class="card overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead>
|
||
<tr class="border-b text-left text-sm text-gray-600">
|
||
<th class="pb-3 font-medium">Город</th>
|
||
<th class="pb-3 font-medium">Средняя цена м²</th>
|
||
<th class="pb-3 font-medium">За год</th>
|
||
<th class="pb-3 font-medium">За 2 года</th>
|
||
<th class="pb-3 font-medium">Объявлений</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="cities-table"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Calculator -->
|
||
<section class="py-8">
|
||
<div class="max-w-4xl mx-auto px-4">
|
||
<div class="card">
|
||
<h2 class="text-2xl font-bold mb-2">Оценить квартиру</h2>
|
||
<p class="text-gray-600 mb-6">Введите параметры — мы сравним с рынком</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Город</label>
|
||
<select id="calc-city">
|
||
<option value="Алматы">Алматы</option>
|
||
<option value="Астана">Астана</option>
|
||
<option value="Шымкент">Шымкент</option>
|
||
<option value="Караганда">Караганда</option>
|
||
<option value="Актобе">Актобе</option>
|
||
<option value="Тараз">Тараз</option>
|
||
<option value="Павлодар">Павлодар</option>
|
||
<option value="Усть-Каменогорск">Усть-Каменогорск</option>
|
||
<option value="Семей">Семей</option>
|
||
<option value="Атырау">Атырау</option>
|
||
<option value="Костанай">Костанай</option>
|
||
<option value="Кызылорда">Кызылорда</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Цена, млн ₸</label>
|
||
<input type="number" id="calc-price" placeholder="35">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Площадь, м²</label>
|
||
<input type="number" id="calc-area" placeholder="60">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-2">Комнат</label>
|
||
<select id="calc-rooms">
|
||
<option value="1">1</option>
|
||
<option value="2" selected>2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4+</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button onclick="calculateComparison()" class="btn-primary text-white px-6 py-3 rounded-lg font-medium w-full md:w-auto">
|
||
Сравнить с рынком
|
||
</button>
|
||
<div id="calc-result" class="mt-6 hidden">
|
||
<div class="text-center py-6">
|
||
<div id="calc-diff" class="text-4xl font-bold mb-2">+7,9%</div>
|
||
<div id="calc-message" class="text-lg">дороже средней цены рынка</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Analytics Charts -->
|
||
<section id="analytics" class="py-8">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<h2 class="text-2xl font-bold mb-6">Аналитика</h2>
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<div class="card lg:col-span-2">
|
||
<h3 class="text-lg font-semibold mb-4">Динамика цен: Алматы</h3>
|
||
<canvas id="almatyChart" height="100"></canvas>
|
||
</div>
|
||
<div class="card">
|
||
<h3 class="text-lg font-semibold mb-4">Сравнение городов</h3>
|
||
<canvas id="citiesChart" height="200"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cities Cards -->
|
||
<section id="cities" class="py-8">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<h2 class="text-2xl font-bold mb-6">Города</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" id="cities-cards"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="border-t border-gray-200 py-8 mt-16">
|
||
<div class="max-w-6xl mx-auto px-4 text-center text-gray-600 text-sm">
|
||
© 2026 QazFlat. Аналитика рынка недвижимости Казахстана. Данные носят информационный характер.
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|