f1bc821c2b
4 HTML mockups (landing/site-finder/analytics/monitoring) — alternative designs для audit-review без замены существующих React-страниц. - Caddy file_server на handle_path /preview/* (внутри gendsgn.ru block) - Bind mount ./preview:/srv/preview:ro в caddy container - basic auth: user=preview / pwd shared via private channel - Static, isolated — не влияет на /, /site-finder, /analytics (Next.js routes)
518 lines
36 KiB
HTML
518 lines
36 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>/analytics/developers — Топ-15 девелоперов · gendsgn</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg-app:#F6F7F9; --bg-card:#FFFFFF; --bg-card-alt:#FAFBFC; --bg-headline:#0F172A;
|
||
--border-soft:#EEF0F3; --border-card:#E6E8EC; --border-strong:#D1D5DB;
|
||
--fg-primary:#111111; --fg-secondary:#5B6066; --fg-tertiary:#73767E;
|
||
--fg-on-dark:#E2E8F0; --fg-on-dark-muted:#94A3B8;
|
||
--accent:#1D4ED8; --accent-hover:#1E40AF; --accent-soft:#DBEAFE; --accent-2:#F2994A;
|
||
--success:#0A7A3A; --success-soft:#DCFCE7;
|
||
--warn:#9A6700; --warn-soft:#FEF3C7;
|
||
--danger:#B3261E; --danger-soft:#FEE2E2;
|
||
--viz-1:#1D4ED8; --viz-2:#0EA5E9; --viz-3:#14B8A6; --viz-4:#F59E0B; --viz-5:#8B5CF6;
|
||
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
|
||
}
|
||
* { box-sizing:border-box; margin:0; padding:0; }
|
||
html { background:var(--bg-app); }
|
||
body { font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--fg-primary); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
|
||
a { color:inherit; text-decoration:none; }
|
||
button { font:inherit; cursor:pointer; }
|
||
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
|
||
.wrap { max-width:1440px; margin:0 auto; padding:0 24px; }
|
||
|
||
.dev-nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:18px; height:38px; padding:0 18px; background:#0b0f1a; color:rgba(255,255,255,0.92); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; letter-spacing:0.04em; border-bottom:1px solid rgba(255,255,255,0.08); }
|
||
.dev-nav .dev-label { display:inline-flex; align-items:center; gap:8px; color:#fbbf24; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; white-space:nowrap; }
|
||
.dev-nav .dev-label::before { content:''; width:6px; height:6px; border-radius:50%; background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,0.22); }
|
||
.dev-nav .dev-tabs { display:inline-flex; gap:2px; align-items:center; }
|
||
.dev-nav .dev-sep { width:1px; height:16px; background:rgba(255,255,255,0.16); margin:0 6px; }
|
||
.dev-nav .dev-tabs a { padding:5px 11px; border-radius:5px; color:rgba(255,255,255,0.62); transition:background .12s,color .12s; }
|
||
.dev-nav .dev-tabs a:hover { color:#fff; background:rgba(255,255,255,0.08); }
|
||
.dev-nav .dev-tabs a[aria-current="page"] { color:#0b0f1a; background:#fbbf24; font-weight:600; }
|
||
.dev-nav .dev-hint { margin-left:auto; color:rgba(255,255,255,0.36); white-space:nowrap; }
|
||
@media print { .dev-nav { display:none !important; } }
|
||
|
||
.topbar { background:var(--bg-card); border-bottom:1px solid var(--border-card); }
|
||
.topbar-inner { display:flex; align-items:center; justify-content:space-between; height:56px; }
|
||
.brand { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--fg-primary); letter-spacing:-0.01em; }
|
||
.brand-mark { width:22px; height:22px; border-radius:6px; background:var(--accent); display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; }
|
||
.brand-mark::before { content:'gd'; }
|
||
.topbar-user { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--fg-secondary); }
|
||
.topbar-user .who { display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:6px; background:var(--bg-card-alt); border:1px solid var(--border-card); }
|
||
.topbar-user .avatar { width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:600; font-size:10px; }
|
||
|
||
.crumbs { display:flex; gap:8px; align-items:center; padding-top:16px; font-size:12.5px; color:var(--fg-secondary); }
|
||
.crumbs a { color:var(--fg-secondary); }
|
||
.crumbs a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
|
||
.crumbs .sep { color:var(--fg-tertiary); }
|
||
.crumbs .last { color:var(--fg-primary); }
|
||
|
||
.page-head { padding:8px 0 16px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
|
||
.page-head h1 { font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-0.01em; }
|
||
.page-head .sub { font-size:13px; color:var(--fg-secondary); margin-top:4px; }
|
||
.page-head .right { display:flex; gap:8px; align-items:center; }
|
||
|
||
.a-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border-card); margin-bottom:16px; overflow-x:auto; }
|
||
.a-tabs a { padding:10px 14px; font-size:13px; font-weight:500; color:var(--fg-secondary); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
|
||
.a-tabs a:hover { color:var(--fg-primary); }
|
||
.a-tabs a[aria-current="page"] { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
|
||
|
||
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
|
||
.kpi { background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; padding:16px 18px; }
|
||
.kpi .label { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-secondary); font-weight:500; }
|
||
.kpi .value { font-size:28px; line-height:1.15; font-weight:600; color:var(--fg-primary); letter-spacing:-0.015em; margin-top:8px; }
|
||
.kpi .value small { font-size:14px; color:var(--fg-secondary); font-weight:500; margin-left:4px; }
|
||
.kpi .hint { font-size:12.5px; color:var(--fg-secondary); margin-top:6px; }
|
||
.kpi .delta { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; margin-top:8px; padding:2px 8px; border-radius:4px; font-variant-numeric:tabular-nums; }
|
||
.kpi .delta.pos { color:var(--success); background:var(--success-soft); }
|
||
.kpi .delta.neg { color:var(--danger); background:var(--danger-soft); }
|
||
.kpi.who-kpi .value { font-size:20px; line-height:1.2; }
|
||
.kpi.who-kpi .badge-row { display:flex; gap:4px; margin-top:8px; }
|
||
|
||
.section { background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; padding:20px; margin-bottom:24px; }
|
||
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
|
||
.section-head h2 { font-size:18px; line-height:1.25; font-weight:600; letter-spacing:-0.01em; }
|
||
.section-head .sub { font-size:12.5px; color:var(--fg-secondary); margin-top:4px; }
|
||
.section-head .right { display:flex; gap:8px; align-items:center; }
|
||
|
||
.btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 16px; border-radius:8px; font-weight:500; font-size:13.5px; border:1px solid transparent; transition:all .12s; }
|
||
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
|
||
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
|
||
.btn-secondary { background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
|
||
.btn-secondary:hover { filter:brightness(0.94); }
|
||
.btn-tertiary { background:transparent; color:var(--fg-primary); border-color:var(--border-card); }
|
||
.btn-tertiary:hover { border-color:var(--fg-primary); }
|
||
.btn-compact { height:32px; padding:0 12px; font-size:12.5px; border-radius:6px; }
|
||
|
||
.chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:14px; font-size:12px; font-weight:500; color:var(--fg-secondary); background:transparent; border:1px solid var(--border-card); transition:all .12s; cursor:pointer; }
|
||
.chip:hover { color:var(--fg-primary); border-color:var(--fg-secondary); }
|
||
.chip[aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-soft); }
|
||
|
||
.badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; }
|
||
.badge.success { color:var(--success); background:var(--success-soft); }
|
||
.badge.warn { color:var(--warn); background:var(--warn-soft); }
|
||
.badge.danger { color:var(--danger); background:var(--danger-soft); }
|
||
|
||
/* ============ SEARCH ============ */
|
||
.search { position:relative; }
|
||
.search input { height:32px; padding:0 12px 0 32px; border:1px solid var(--border-strong); border-radius:6px; background:var(--bg-card); font:inherit; font-size:13px; color:var(--fg-primary); width:240px; }
|
||
.search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
|
||
.search::before { content:''; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; border:1.5px solid var(--fg-tertiary); border-radius:50%; box-shadow:5px 5px 0 -3px var(--fg-tertiary); pointer-events:none; }
|
||
|
||
/* ============ LEADERBOARD TABLE ============ */
|
||
.lb-wrap { overflow-x:auto; }
|
||
.lb { width:100%; border-collapse:collapse; min-width:920px; }
|
||
.lb th { font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-secondary); font-weight:500; text-align:left; padding:10px 8px; border-bottom:1px solid var(--border-card); background:var(--bg-card-alt); white-space:nowrap; }
|
||
.lb th:not(:nth-child(-n+2)) { text-align:right; }
|
||
.lb td { font-size:13px; padding:12px 8px; border-bottom:1px solid var(--border-soft); color:var(--fg-primary); }
|
||
.lb td:not(:nth-child(-n+2)) { text-align:right; font-variant-numeric:tabular-nums; }
|
||
.lb tr:last-child td { border-bottom:0; }
|
||
.lb tr:hover { background:var(--bg-card-alt); cursor:pointer; }
|
||
.lb tr.selected { background:var(--accent-soft); }
|
||
.lb tr.selected td { color:var(--fg-primary); }
|
||
.lb tr.selected td:first-child { color:var(--accent); font-weight:600; }
|
||
.lb .rank { color:var(--fg-tertiary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; width:32px; }
|
||
.lb .name { color:var(--fg-primary); font-weight:500; }
|
||
.lb .name .sub { font-size:11px; color:var(--fg-secondary); font-weight:400; margin-top:2px; }
|
||
.lb .pill { display:inline-flex; align-items:center; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
|
||
.lb .pill.pos { color:var(--success); background:var(--success-soft); }
|
||
.lb .pill.neg { color:var(--danger); background:var(--danger-soft); }
|
||
.lb .pill.flat { color:var(--fg-secondary); background:var(--bg-card-alt); }
|
||
.lb-foot { padding-top:12px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--fg-secondary); }
|
||
|
||
/* ============ VELOCITY SCATTER ============ */
|
||
.scatter-wrap { position:relative; height:380px; padding:16px 0 32px 48px; }
|
||
.scatter-wrap svg { width:100%; height:100%; display:block; }
|
||
.axis-x-label { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--fg-secondary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
|
||
.axis-y-label { position:absolute; top:50%; left:-8px; transform:translateY(-50%) rotate(-90deg); transform-origin:center; font-size:11px; color:var(--fg-secondary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
|
||
|
||
/* ============ COMPARE CHART ============ */
|
||
.compare-wrap { position:relative; height:280px; padding:8px 0 24px 48px; }
|
||
.compare-wrap svg { width:100%; height:100%; display:block; }
|
||
.legend-row { display:flex; gap:24px; padding-top:8px; }
|
||
.legend-row .leg { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--fg-primary); }
|
||
.legend-row .leg .sw { width:14px; height:8px; border-radius:2px; }
|
||
.legend-row .leg .meta { color:var(--fg-secondary); margin-left:4px; }
|
||
|
||
@media (max-width:1100px) {
|
||
.kpi-row { grid-template-columns:repeat(2,1fr); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<aside class="dev-nav" aria-label="Dev navigation">
|
||
<span class="dev-label">DEV · ТОЛЬКО ДЛЯ РАЗРАБОТКИ</span>
|
||
<nav class="dev-tabs" aria-label="WIP страницы">
|
||
<a href="landing.html">лендинг</a>
|
||
<a href="analytics.html">/analytics</a>
|
||
<a href="site-finder.html">/recommend</a>
|
||
<a href="monitoring.html" aria-current="page">/developers</a>
|
||
<span class="dev-sep"></span>
|
||
<a href="audit.html">audit (live)</a>
|
||
<a href="gendsgn-audit.html">audit (отчёт)</a>
|
||
</nav>
|
||
<span class="dev-hint">временная панель · скроется в print</span>
|
||
</aside>
|
||
|
||
<header class="topbar">
|
||
<div class="wrap topbar-inner">
|
||
<div style="display:flex;align-items:center;gap:24px;">
|
||
<a href="landing.html" class="brand"><span class="brand-mark"></span><span>gendsgn</span></a>
|
||
</div>
|
||
<div class="topbar-user">
|
||
<span style="font-size:12px;color:var(--fg-tertiary);">Свердловская обл. · 2025-Q1</span>
|
||
<div class="who"><div class="avatar">AD</div>Алексей · PRINZIP (demo)</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="wrap">
|
||
|
||
<nav class="crumbs" aria-label="Breadcrumb">
|
||
<a href="landing.html">gendsgn</a>
|
||
<span class="sep">/</span>
|
||
<a href="analytics.html">analytics</a>
|
||
<span class="sep">/</span>
|
||
<span class="last">developers — топ-15 девелоперов</span>
|
||
</nav>
|
||
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>Топ-15 девелоперов Свердловской области</h1>
|
||
<div class="sub">Выбран: <b>PRINZIP</b> · кликните на строку leaderboard, чтобы сравнить с другим девелопером</div>
|
||
</div>
|
||
<div class="right">
|
||
<button class="btn btn-tertiary btn-compact">Снимок PDF</button>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="a-tabs" aria-label="Разделы аналитики">
|
||
<a href="analytics.html">Свердл рынок</a>
|
||
<a href="site-finder.html">Рекомендатор</a>
|
||
<a href="monitoring.html" aria-current="page">Девелоперы</a>
|
||
<a href="#">PRINZIP · профиль</a>
|
||
<a href="#">Объекты</a>
|
||
</nav>
|
||
|
||
<!-- 4 KPI for selected dev -->
|
||
<div class="kpi-row">
|
||
<div class="kpi who-kpi">
|
||
<div class="label">Девелопер</div>
|
||
<div class="value">PRINZIP</div>
|
||
<div class="hint">Екатеринбург · с 2007 г.</div>
|
||
<div class="badge-row">
|
||
<span class="badge success">комфорт</span>
|
||
<span class="badge warn">бизнес</span>
|
||
</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="label">Объём в Свердл</div>
|
||
<div class="value">412<small>тыс м²</small></div>
|
||
<div class="hint">14 ЖК в активной фазе</div>
|
||
<span class="delta pos">↑ +28 тыс vs Q4 2025</span>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="label">Sold % (медиана)</div>
|
||
<div class="value">74<small>%</small></div>
|
||
<div class="hint">по 14 ЖК в продаже</div>
|
||
<span class="delta pos">+13 пп vs рынок (61 %)</span>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="label">Средний метраж</div>
|
||
<div class="value">58<small>м²</small></div>
|
||
<div class="hint">взвешенно по лотности</div>
|
||
<span class="delta neg">−9 м² vs рынок (67 м²)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LEADERBOARD -->
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>Leaderboard — топ-15 по объёму</h2>
|
||
<div class="sub">Sticky первая колонка при scroll · клик по строке → drawer с профилем девелопера</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="search"><input type="text" placeholder="Поиск девелопера…" /></div>
|
||
<button class="chip" aria-pressed="true">все классы</button>
|
||
<button class="chip">комфорт</button>
|
||
<button class="chip">бизнес</button>
|
||
<button class="btn btn-secondary btn-compact">Export CSV ⤓</button>
|
||
</div>
|
||
</div>
|
||
<div class="lb-wrap">
|
||
<table class="lb">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>Девелопер</th>
|
||
<th>Объём, тыс м²</th>
|
||
<th>ЖК</th>
|
||
<th>Sold %</th>
|
||
<th>Δ 14 мес</th>
|
||
<th>Ср. цена ₽/м²</th>
|
||
<th>Ср. метраж</th>
|
||
<th>Топ-район</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="selected"><td class="rank">01</td><td class="name">PRINZIP<div class="sub">14 ЖК · комфорт+бизнес</div></td><td>412</td><td>14</td><td>74 %</td><td><span class="pill pos">+8,2 пп</span></td><td>173</td><td>58</td><td>Академический</td></tr>
|
||
<tr><td class="rank">02</td><td class="name">Брусника<div class="sub">11 ЖК · комфорт+бизнес</div></td><td>368</td><td>11</td><td>71 %</td><td><span class="pill pos">+5,1 пп</span></td><td>198</td><td>61</td><td>Центр</td></tr>
|
||
<tr><td class="rank">03</td><td class="name">Атомстройкомплекс<div class="sub">9 ЖК · комфорт</div></td><td>342</td><td>9</td><td>64 %</td><td><span class="pill pos">+2,8 пп</span></td><td>156</td><td>54</td><td>ВИЗ</td></tr>
|
||
<tr><td class="rank">04</td><td class="name">Форум-групп<div class="sub">8 ЖК · комфорт+бизнес</div></td><td>298</td><td>8</td><td>62 %</td><td><span class="pill flat">+0,4 пп</span></td><td>182</td><td>63</td><td>Юго-Запад</td></tr>
|
||
<tr><td class="rank">05</td><td class="name">КОРТРОС<div class="sub">6 ЖК · бизнес+премиум</div></td><td>284</td><td>6</td><td>54 %</td><td><span class="pill neg">−3,2 пп</span></td><td>224</td><td>72</td><td>Пионерский</td></tr>
|
||
<tr><td class="rank">06</td><td class="name">Атлас Девелопмент<div class="sub">7 ЖК · комфорт</div></td><td>241</td><td>7</td><td>52 %</td><td><span class="pill neg">−4,8 пп</span></td><td>141</td><td>52</td><td>Уралмаш</td></tr>
|
||
<tr><td class="rank">07</td><td class="name">Эталон<div class="sub">5 ЖК · бизнес</div></td><td>198</td><td>5</td><td>48 %</td><td><span class="pill neg">−6,1 пп</span></td><td>167</td><td>59</td><td>Центр</td></tr>
|
||
<tr><td class="rank">08</td><td class="name">Унистрой<div class="sub">5 ЖК · комфорт</div></td><td>182</td><td>5</td><td>67 %</td><td><span class="pill pos">+3,4 пп</span></td><td>148</td><td>55</td><td>Уктус</td></tr>
|
||
<tr><td class="rank">09</td><td class="name">Атмосфера<div class="sub">4 ЖК · комфорт</div></td><td>156</td><td>4</td><td>69 %</td><td><span class="pill pos">+4,1 пп</span></td><td>152</td><td>57</td><td>Пионерский</td></tr>
|
||
<tr><td class="rank">10</td><td class="name">Эфес<div class="sub">4 ЖК · бизнес+премиум</div></td><td>142</td><td>4</td><td>58 %</td><td><span class="pill flat">+0,8 пп</span></td><td>211</td><td>76</td><td>Центр</td></tr>
|
||
<tr><td class="rank">11</td><td class="name">Семь<div class="sub">3 ЖК · комфорт</div></td><td>128</td><td>3</td><td>72 %</td><td><span class="pill pos">+6,7 пп</span></td><td>167</td><td>56</td><td>ВИЗ</td></tr>
|
||
<tr><td class="rank">12</td><td class="name">Гринстрой<div class="sub">3 ЖК · комфорт</div></td><td>116</td><td>3</td><td>49 %</td><td><span class="pill neg">−5,4 пп</span></td><td>134</td><td>51</td><td>Сортировка</td></tr>
|
||
<tr><td class="rank">13</td><td class="name">Лидер<div class="sub">3 ЖК · комфорт</div></td><td>104</td><td>3</td><td>61 %</td><td><span class="pill pos">+1,2 пп</span></td><td>158</td><td>54</td><td>Уралмаш</td></tr>
|
||
<tr><td class="rank">14</td><td class="name">Гранд<div class="sub">3 ЖК · бизнес</div></td><td>96</td><td>3</td><td>44 %</td><td><span class="pill neg">−8,1 пп</span></td><td>189</td><td>68</td><td>Юго-Запад</td></tr>
|
||
<tr><td class="rank">15</td><td class="name">УГМК-Девел.<div class="sub">2 ЖК · бизнес+премиум</div></td><td>84</td><td>2</td><td>56 %</td><td><span class="pill flat">+0,2 пп</span></td><td>231</td><td>74</td><td>Верх. Пышма</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="lb-foot">
|
||
<span>Показано 15 из 87 девелоперов в выборке. Порог — > 20 тыс м² в активной фазе.</span>
|
||
<a href="#" style="color:var(--accent);font-weight:500;">Показать все 87 →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VELOCITY SCATTER -->
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>Velocity-карта — объём против Δ sold %</h2>
|
||
<div class="sub">Кто продаёт быстрее в своём масштабе · ось X — тыс. м² в активной фазе · ось Y — Δ sold % за 14 мес</div>
|
||
</div>
|
||
<div class="right">
|
||
<button class="chip" aria-pressed="true">все классы</button>
|
||
<button class="chip">комфорт</button>
|
||
<button class="chip">бизнес+премиум</button>
|
||
<button class="btn btn-secondary btn-compact">Export PNG ⤓</button>
|
||
</div>
|
||
</div>
|
||
<div class="scatter-wrap">
|
||
<svg viewBox="0 0 1000 380" preserveAspectRatio="xMidYMid meet">
|
||
<!-- grid -->
|
||
<g stroke="#EEF0F3" stroke-width="1">
|
||
<line x1="0" y1="60" x2="1000" y2="60"/>
|
||
<line x1="0" y1="120" x2="1000" y2="120"/>
|
||
<line x1="0" y1="190" x2="1000" y2="190"/>
|
||
<line x1="0" y1="260" x2="1000" y2="260"/>
|
||
<line x1="0" y1="320" x2="1000" y2="320"/>
|
||
<line x1="200" y1="0" x2="200" y2="380" stroke-dasharray="2,4"/>
|
||
<line x1="400" y1="0" x2="400" y2="380" stroke-dasharray="2,4"/>
|
||
<line x1="600" y1="0" x2="600" y2="380" stroke-dasharray="2,4"/>
|
||
<line x1="800" y1="0" x2="800" y2="380" stroke-dasharray="2,4"/>
|
||
</g>
|
||
<!-- zero line -->
|
||
<line x1="0" y1="190" x2="1000" y2="190" stroke="#5B6066" stroke-width="1.5"/>
|
||
<text x="6" y="184" font-family="ui-monospace,Menlo" font-size="10" fill="#5B6066">0 пп — рынок</text>
|
||
|
||
<!-- quadrant labels -->
|
||
<text x="990" y="36" text-anchor="end" font-family="ui-monospace,Menlo" font-size="10" fill="#0A7A3A" font-weight="600">быстрее рынка</text>
|
||
<text x="990" y="360" text-anchor="end" font-family="ui-monospace,Menlo" font-size="10" fill="#B3261E" font-weight="600">медленнее рынка</text>
|
||
|
||
<!-- y axis labels -->
|
||
<g font-family="ui-monospace,Menlo" font-size="10" fill="#73767E">
|
||
<text x="-4" y="64" text-anchor="end">+10</text>
|
||
<text x="-4" y="124" text-anchor="end">+5</text>
|
||
<text x="-4" y="194" text-anchor="end">0</text>
|
||
<text x="-4" y="264" text-anchor="end">−5</text>
|
||
<text x="-4" y="324" text-anchor="end">−10</text>
|
||
</g>
|
||
<!-- x axis labels -->
|
||
<g font-family="ui-monospace,Menlo" font-size="10" fill="#73767E">
|
||
<text x="0" y="376">0</text>
|
||
<text x="200" y="376" text-anchor="middle">100</text>
|
||
<text x="400" y="376" text-anchor="middle">200</text>
|
||
<text x="600" y="376" text-anchor="middle">300</text>
|
||
<text x="800" y="376" text-anchor="middle">400</text>
|
||
<text x="998" y="376" text-anchor="end">500</text>
|
||
</g>
|
||
|
||
<!-- dots -->
|
||
<g>
|
||
<!-- PRINZIP (focused) -->
|
||
<circle cx="824" cy="92" r="14" fill="#1D4ED8" opacity="0.18"/>
|
||
<circle cx="824" cy="92" r="8" fill="#1D4ED8" stroke="#fff" stroke-width="2"/>
|
||
<text x="838" y="96" font-family="Inter" font-size="12" font-weight="600" fill="#1D4ED8">PRINZIP · +8,2</text>
|
||
|
||
<circle cx="736" cy="129" r="7" fill="#0EA5E9" stroke="#fff" stroke-width="2"/>
|
||
<text x="748" y="133" font-family="Inter" font-size="11" fill="#5B6066">Брусника · +5,1</text>
|
||
|
||
<circle cx="684" cy="151" r="7" fill="#14B8A6" stroke="#fff" stroke-width="2"/>
|
||
<text x="696" y="155" font-family="Inter" font-size="11" fill="#5B6066">Атомстройком. · +2,8</text>
|
||
|
||
<circle cx="596" cy="185" r="6" fill="#94A3B8" stroke="#fff" stroke-width="2"/>
|
||
<text x="608" y="189" font-family="Inter" font-size="11" fill="#73767E">Форум-групп</text>
|
||
|
||
<circle cx="568" cy="234" r="6" fill="#F59E0B" stroke="#fff" stroke-width="2"/>
|
||
<text x="580" y="238" font-family="Inter" font-size="11" fill="#5B6066">КОРТРОС · −3,2</text>
|
||
|
||
<circle cx="482" cy="258" r="6" fill="#F59E0B" stroke="#fff" stroke-width="2"/>
|
||
<text x="494" y="262" font-family="Inter" font-size="11" fill="#5B6066">Атлас Девел.</text>
|
||
|
||
<circle cx="396" cy="278" r="6" fill="#B3261E" stroke="#fff" stroke-width="2"/>
|
||
<text x="408" y="282" font-family="Inter" font-size="11" fill="#5B6066">Эталон · −6,1</text>
|
||
|
||
<circle cx="364" cy="142" r="6" fill="#14B8A6" stroke="#fff" stroke-width="2"/>
|
||
<text x="376" y="146" font-family="Inter" font-size="11" fill="#5B6066">Унистрой</text>
|
||
|
||
<circle cx="312" cy="138" r="5" fill="#14B8A6" stroke="#fff" stroke-width="2"/>
|
||
<text x="324" y="142" font-family="Inter" font-size="11" fill="#5B6066">Атмосфера</text>
|
||
|
||
<circle cx="284" cy="186" r="5" fill="#94A3B8" stroke="#fff" stroke-width="2"/>
|
||
<text x="296" y="190" font-family="Inter" font-size="11" fill="#5B6066">Эфес</text>
|
||
|
||
<circle cx="256" cy="108" r="5" fill="#14B8A6" stroke="#fff" stroke-width="2"/>
|
||
<text x="266" y="112" font-family="Inter" font-size="11" fill="#5B6066">Семь · +6,7</text>
|
||
|
||
<circle cx="232" cy="266" r="5" fill="#F59E0B" stroke="#fff" stroke-width="2"/>
|
||
<text x="244" y="270" font-family="Inter" font-size="11" fill="#5B6066">Гринстрой</text>
|
||
|
||
<circle cx="208" cy="178" r="4" fill="#94A3B8" stroke="#fff" stroke-width="2"/>
|
||
<text x="218" y="182" font-family="Inter" font-size="10.5" fill="#73767E">Лидер</text>
|
||
|
||
<circle cx="192" cy="298" r="4" fill="#B3261E" stroke="#fff" stroke-width="2"/>
|
||
<text x="202" y="302" font-family="Inter" font-size="10.5" fill="#73767E">Гранд</text>
|
||
|
||
<circle cx="168" cy="188" r="4" fill="#94A3B8" stroke="#fff" stroke-width="2"/>
|
||
<text x="178" y="192" font-family="Inter" font-size="10.5" fill="#73767E">УГМК-Девел.</text>
|
||
</g>
|
||
</svg>
|
||
<div class="axis-y-label">Δ sold % за 14 мес</div>
|
||
<div class="axis-x-label">Объём, тыс. м² в активной фазе</div>
|
||
</div>
|
||
<div style="display:flex;gap:24px;padding-top:12px;font-size:12px;color:var(--fg-secondary);flex-wrap:wrap;">
|
||
<span><b style="color:var(--fg-primary);">Размер точки</b> — число ЖК в портфеле</span>
|
||
<span><b style="color:var(--fg-primary);">Цвет</b> — статус velocity (зелёный — растёт, красный — падает)</span>
|
||
<span style="margin-left:auto;color:var(--fg-tertiary);">38 / 40 ЖК в выборке · 2 объекта < 6 мес в продаже исключены</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPARE LINE -->
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>Сравнение sold % — PRINZIP vs топ-2</h2>
|
||
<div class="sub">Кумулятивный sold % помесячно по всему портфелю; PRINZIP жирнее, Брусника и Атомстройком. для контекста</div>
|
||
</div>
|
||
<div class="right">
|
||
<button class="chip" aria-pressed="true">vs топ-2</button>
|
||
<button class="chip">vs Брусника</button>
|
||
<button class="chip">vs Атомстройком.</button>
|
||
<button class="btn btn-secondary btn-compact">Export CSV ⤓</button>
|
||
</div>
|
||
</div>
|
||
<div class="compare-wrap">
|
||
<svg viewBox="0 0 1000 280" preserveAspectRatio="xMidYMid meet">
|
||
<g stroke="#EEF0F3" stroke-width="1">
|
||
<line x1="0" y1="56" x2="1000" y2="56"/>
|
||
<line x1="0" y1="112" x2="1000" y2="112"/>
|
||
<line x1="0" y1="168" x2="1000" y2="168"/>
|
||
<line x1="0" y1="224" x2="1000" y2="224"/>
|
||
</g>
|
||
<!-- PRINZIP -->
|
||
<polyline fill="none" stroke="#1D4ED8" stroke-width="3" points="0,210 70,196 140,180 210,164 280,150 350,134 420,118 490,104 560,92 630,80 700,72 770,66 840,60 910,56 980,52"/>
|
||
<g fill="#1D4ED8">
|
||
<circle cx="0" cy="210" r="3.5"/><circle cx="140" cy="180" r="3.5"/><circle cx="280" cy="150" r="3.5"/><circle cx="420" cy="118" r="3.5"/>
|
||
<circle cx="560" cy="92" r="3.5"/><circle cx="700" cy="72" r="3.5"/><circle cx="840" cy="60" r="3.5"/><circle cx="980" cy="52" r="3.5"/>
|
||
</g>
|
||
<!-- Брусника -->
|
||
<polyline fill="none" stroke="#0EA5E9" stroke-width="2" points="0,218 70,210 140,198 210,184 280,168 350,154 420,138 490,128 560,116 630,108 700,100 770,94 840,88 910,82 980,78"/>
|
||
<!-- Атомстройком. -->
|
||
<polyline fill="none" stroke="#14B8A6" stroke-width="2" points="0,226 70,220 140,212 210,202 280,192 350,180 420,170 490,160 560,150 630,140 700,132 770,124 840,118 910,112 980,108"/>
|
||
<!-- y axis labels -->
|
||
<g font-family="ui-monospace,Menlo" font-size="10" fill="#73767E">
|
||
<text x="-4" y="60" text-anchor="end">100 %</text>
|
||
<text x="-4" y="116" text-anchor="end">75 %</text>
|
||
<text x="-4" y="172" text-anchor="end">50 %</text>
|
||
<text x="-4" y="228" text-anchor="end">25 %</text>
|
||
</g>
|
||
<!-- x labels -->
|
||
<g font-family="ui-monospace,Menlo" font-size="9" fill="#73767E">
|
||
<text x="0" y="276">фев 25</text>
|
||
<text x="140" y="276" text-anchor="middle">апр</text>
|
||
<text x="280" y="276" text-anchor="middle">июн</text>
|
||
<text x="420" y="276" text-anchor="middle">авг</text>
|
||
<text x="560" y="276" text-anchor="middle">окт</text>
|
||
<text x="700" y="276" text-anchor="middle">дек</text>
|
||
<text x="840" y="276" text-anchor="middle">фев 26</text>
|
||
<text x="996" y="276" text-anchor="end">мар 26</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="legend-row">
|
||
<span class="leg"><span class="sw" style="background:#1D4ED8;height:10px;"></span>PRINZIP <span class="meta">74 % · +8,2 пп</span></span>
|
||
<span class="leg"><span class="sw" style="background:#0EA5E9"></span>Брусника <span class="meta">71 % · +5,1 пп</span></span>
|
||
<span class="leg"><span class="sw" style="background:#14B8A6"></span>Атомстройком. <span class="meta">64 % · +2,8 пп</span></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DRAWER (right-side) placeholder mock -->
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>Карточка выбранного девелопера — PRINZIP</h2>
|
||
<div class="sub">Открывается drawer'ом справа при клике на строку leaderboard (не navigate)</div>
|
||
</div>
|
||
<div class="right">
|
||
<a href="#" class="btn btn-tertiary btn-compact">Открыть профиль →</a>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
|
||
<div>
|
||
<h3 style="font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--fg-secondary);margin-bottom:8px;">Концентрация по районам</h3>
|
||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||
<div style="display:grid;grid-template-columns:120px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>Академический</span><div style="height:6px;background:var(--accent);border-radius:3px;width:62%;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">62 %</span></div>
|
||
<div style="display:grid;grid-template-columns:120px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>Центр</span><div style="height:6px;background:var(--accent);border-radius:3px;width:18%;opacity:0.7;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">18 %</span></div>
|
||
<div style="display:grid;grid-template-columns:120px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>Юго-Запад</span><div style="height:6px;background:var(--accent);border-radius:3px;width:11%;opacity:0.55;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">11 %</span></div>
|
||
<div style="display:grid;grid-template-columns:120px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>Пионерский</span><div style="height:6px;background:var(--accent);border-radius:3px;width:6%;opacity:0.4;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">6 %</span></div>
|
||
<div style="display:grid;grid-template-columns:120px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>ВИЗ</span><div style="height:6px;background:var(--accent);border-radius:3px;width:3%;opacity:0.4;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">3 %</span></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--fg-secondary);margin-bottom:8px;">Распределение по комнатности</h3>
|
||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||
<div style="display:grid;grid-template-columns:80px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>Студии</span><div style="height:6px;background:#93C5FD;border-radius:3px;width:18%;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">18 %</span></div>
|
||
<div style="display:grid;grid-template-columns:80px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>1-к</span><div style="height:6px;background:#60A5FA;border-radius:3px;width:34%;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">34 %</span></div>
|
||
<div style="display:grid;grid-template-columns:80px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>2-к</span><div style="height:6px;background:#3B82F6;border-radius:3px;width:28%;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">28 %</span></div>
|
||
<div style="display:grid;grid-template-columns:80px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>3-к</span><div style="height:6px;background:#1D4ED8;border-radius:3px;width:14%;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">14 %</span></div>
|
||
<div style="display:grid;grid-template-columns:80px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;"><span>4+</span><div style="height:6px;background:#1E3A8A;border-radius:3px;width:6%;"></div><span style="text-align:right;font-variant-numeric:tabular-nums;">6 %</span></div>
|
||
</div>
|
||
<div style="margin-top:12px;padding:8px 12px;background:var(--warn-soft);border-radius:6px;font-size:11.5px;color:var(--fg-primary);">
|
||
<b style="color:var(--warn);">Gap vs рынок:</b> доля 3к/4+ — 20 % vs 44 % рыночного спроса. Недозагрузка в большом сегменте.
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--fg-secondary);margin-bottom:8px;">Топ-5 ЖК · drill-in</h3>
|
||
<table class="lb" style="min-width:0;">
|
||
<thead><tr><th>ЖК</th><th>Sold %</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="name"><a href="#" style="color:var(--accent);">Каменные палатки</a></td><td><span class="pill pos">78 %</span></td></tr>
|
||
<tr><td class="name"><a href="#" style="color:var(--accent);">Хрустальный</a></td><td><span class="pill pos">81 %</span></td></tr>
|
||
<tr><td class="name"><a href="#" style="color:var(--accent);">Прогресс</a></td><td><span class="pill pos">72 %</span></td></tr>
|
||
<tr><td class="name"><a href="#" style="color:var(--accent);">Светлая роща</a></td><td><span class="pill pos">69 %</span></td></tr>
|
||
<tr><td class="name"><a href="#" style="color:var(--accent);">Парк-холл</a></td><td><span class="pill flat">52 %</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|