6d9eddc8e9
Заменяем устаревшие preview-странички (старая landing.html из PR #279) на новый набор из аудита gendsgn.ru: - public/analytics.html (44KB) - public/developers.html (37KB) - public/index.html (30KB) - public/landing.html (41KB, replaces PR #279 version) - public/site-finder.html (31KB) - public/site-finder-analysis.html (86KB) - public/tradein.html (85KB) — новая страничка trade-in Все 7 файлов self-contained HTML (inline assets) → доступны после deploy по URL https://gendsgn.ru/<filename>.html. Не пересекаются с Next.js routes (расширение .html — public/ wins).
1112 lines
84 KiB
HTML
1112 lines
84 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>/site-finder/анализ — 66:41:0701045:42 · 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;
|
||
--prediction-band: rgba(14,165,233,0.18);
|
||
--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; }
|
||
|
||
/* === dev nav === */
|
||
.dev-nav { position:sticky; top:0; z-index:200; 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; flex-wrap:nowrap; overflow:auto; }
|
||
.dev-nav .dev-sep { width:1px; height:16px; background:rgba(255,255,255,0.16); margin:0 6px; flex:none; }
|
||
.dev-nav .dev-tabs a { padding:5px 10px; border-radius:5px; color:rgba(255,255,255,0.62); transition:background .12s,color .12s; white-space:nowrap; }
|
||
.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 === */
|
||
.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; padding:0 24px; }
|
||
.topbar-left { display:flex; align-items:center; gap:32px; }
|
||
.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 nav.main { display:flex; gap:18px; font-size:13px; color:var(--fg-secondary); }
|
||
.topbar nav.main a { padding:6px 0; border-bottom:2px solid transparent; }
|
||
.topbar nav.main a[aria-current="page"] { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
|
||
.topbar nav.main a:hover { color:var(--fg-primary); }
|
||
.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 === */
|
||
.crumbs-wrap { background:var(--bg-card); border-bottom:1px solid var(--border-card); }
|
||
.crumbs { display:flex; gap:10px; align-items:center; padding:14px 24px; 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); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
|
||
.crumbs .pill { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--success-soft); color:var(--success); font-size:11.5px; font-weight:600; }
|
||
.crumbs .pill::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--success); }
|
||
|
||
/* === layout === */
|
||
.layout { display:grid; grid-template-columns:300px 1fr; gap:0; align-items:stretch; min-height:calc(100vh - 38px - 56px - 49px); }
|
||
|
||
/* === sidebar === */
|
||
.side { background:var(--bg-card); border-right:1px solid var(--border-card); position:sticky; top:0; align-self:start; }
|
||
.side-hd { padding:18px 20px 12px; }
|
||
.side-hd .eyebrow { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-tertiary); font-weight:600; }
|
||
.side-hd h2 { font-size:13px; font-weight:600; margin-top:4px; }
|
||
.side ul { list-style:none; padding:0 12px 12px; display:grid; gap:2px; }
|
||
.side > ul > li > a, .side > ul > li > button.sec-toggle { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:center; padding:10px 12px; border-radius:8px; font-size:13.5px; color:var(--fg-primary); text-align:left; border:0; background:transparent; width:100%; transition:background .12s; }
|
||
.side > ul > li > a:hover, .side > ul > li > button.sec-toggle:hover { background:var(--bg-card-alt); }
|
||
.side > ul > li > a.active, .side > ul > li > button.sec-toggle.active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
|
||
.side > ul > li > a .n, .side > ul > li > button.sec-toggle .n { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--fg-tertiary); font-weight:500; display:inline-grid; place-items:center; height:22px; border-radius:5px; }
|
||
.side > ul > li > a.active .n, .side > ul > li > button.sec-toggle.active .n { color:var(--accent); background:rgba(29,78,216,0.12); }
|
||
.side .sub-list { list-style:none; padding:4px 0 4px 38px; display:grid; gap:2px; }
|
||
.side .sub-list li a { display:block; padding:6px 12px; border-radius:6px; font-size:12.5px; color:var(--fg-secondary); }
|
||
.side .sub-list li a:hover { background:var(--bg-card-alt); color:var(--fg-primary); }
|
||
.side .sub-list li a.active { color:var(--accent); font-weight:500; }
|
||
.side-foot { padding:14px 20px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--fg-tertiary); line-height:1.5; }
|
||
.side-foot b { color:var(--fg-secondary); font-weight:500; }
|
||
|
||
/* === main === */
|
||
.main { padding:24px 28px 64px; min-width:0; }
|
||
|
||
/* === pane visibility === */
|
||
.pane { display:none; }
|
||
.pane.active { display:block; }
|
||
|
||
/* === headline bar === */
|
||
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
|
||
.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; }
|
||
|
||
.headline-bar { background:var(--bg-headline); color:var(--fg-on-dark); border-radius:12px; padding:16px 20px; display:flex; align-items:center; gap:16px; margin-bottom:16px; }
|
||
.headline-bar .tag { font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--accent-2); white-space:nowrap; }
|
||
.headline-bar .verdict { font-size:15px; font-weight:500; line-height:1.4; color:var(--fg-on-dark); }
|
||
.headline-bar .verdict b { color:#fff; font-weight:600; }
|
||
.headline-bar .caveat { margin-left:auto; font-size:11.5px; color:var(--fg-on-dark-muted); white-space:nowrap; }
|
||
|
||
/* === KPI === */
|
||
.kpi-row { display:grid; gap:12px; margin-bottom:24px; }
|
||
.kpi-row-4 { grid-template-columns:repeat(4,1fr); }
|
||
.kpi-row-3 { grid-template-columns:repeat(3,1fr); }
|
||
.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; }
|
||
.delta { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:600; padding:2px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; }
|
||
.delta.pos { background:var(--success-soft); color:var(--success); }
|
||
.delta.neg { background:var(--danger-soft); color:var(--danger); }
|
||
.delta.neu { background:var(--bg-card-alt); color:var(--fg-tertiary); }
|
||
|
||
/* === section === */
|
||
.section { background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; padding:20px; margin-bottom:16px; }
|
||
.section-hd { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px; }
|
||
.section-hd h2 { font-size:18px; font-weight:600; letter-spacing:-0.005em; }
|
||
.section-hd .sub { font-size:12.5px; color:var(--fg-secondary); margin-top:4px; }
|
||
.section-hd .right { display:flex; gap:8px; align-items:center; }
|
||
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border:0; border-radius:6px; font-weight:600; font-size:13px; transition:background .12s, color .12s; white-space:nowrap; }
|
||
.btn-primary { background:var(--accent); color:#fff; }
|
||
.btn-primary:hover { background:var(--accent-hover); }
|
||
.btn-secondary { background:var(--accent-2); color:#fff; height:32px; padding:0 12px; font-size:12.5px; }
|
||
.btn-secondary:hover { filter:brightness(0.95); }
|
||
.btn-ghost { background:transparent; color:var(--fg-primary); border:1px solid var(--border-card); height:32px; padding:0 12px; font-size:12.5px; font-weight:500; }
|
||
.btn-ghost:hover { border-color:var(--border-strong); background:var(--bg-card-alt); }
|
||
|
||
/* === pane 1: parcel info === */
|
||
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
|
||
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
|
||
.minimap { background:var(--bg-card-alt); border:1px solid var(--border-soft); border-radius:8px; aspect-ratio:16/10; overflow:hidden; position:relative; }
|
||
.minimap svg { width:100%; height:100%; display:block; }
|
||
.meta-list { list-style:none; }
|
||
.meta-list li { display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 0; border-top:1px solid var(--border-soft); font-size:13px; }
|
||
.meta-list li:first-child { border-top:0; padding-top:0; }
|
||
.meta-list .l { color:var(--fg-secondary); }
|
||
.meta-list .v { color:var(--fg-primary); font-weight:500; font-variant-numeric:tabular-nums; }
|
||
.meta-list .v.good { color:var(--success); }
|
||
.meta-list .v.warn { color:var(--warn); }
|
||
|
||
.poi-list { display:grid; gap:8px; }
|
||
.poi { display:grid; grid-template-columns:32px 1fr auto auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--border-soft); border-radius:8px; font-size:12.5px; background:var(--bg-card-alt); }
|
||
.poi .ico { width:28px; height:28px; border-radius:6px; background:var(--bg-card); display:grid; place-items:center; font-size:14px; color:var(--accent); border:1px solid var(--border-soft); }
|
||
.poi .name { color:var(--fg-primary); font-weight:500; }
|
||
.poi .desc { color:var(--fg-secondary); font-size:11.5px; margin-top:1px; }
|
||
.poi .d { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--fg-secondary); }
|
||
.poi .walk { font-size:11px; color:var(--fg-tertiary); }
|
||
|
||
/* === pane 2: utility schematic === */
|
||
.util-schem { background:var(--bg-card-alt); border:1px solid var(--border-soft); border-radius:10px; padding:18px; }
|
||
.util-schem svg { width:100%; height:auto; display:block; }
|
||
.util-table { width:100%; border-collapse:collapse; font-size:13px; }
|
||
.util-table th { text-align:left; font-weight:600; color:var(--fg-secondary); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--border-card); background:var(--bg-card-alt); }
|
||
.util-table td { padding:12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
|
||
.util-table tr:last-child td { border-bottom:0; }
|
||
.util-table tbody tr:hover { background:var(--bg-card-alt); }
|
||
.util-table .util-name { display:flex; align-items:center; gap:8px; font-weight:500; }
|
||
.util-table .util-name i { width:10px; height:10px; border-radius:3px; }
|
||
.util-table .num { font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
|
||
.util-table .owner { color:var(--fg-secondary); font-size:12px; }
|
||
.util-table .status-ok { color:var(--success); font-weight:600; }
|
||
.util-table .status-warn { color:var(--warn); font-weight:600; }
|
||
.util-table .status-bad { color:var(--danger); font-weight:600; }
|
||
|
||
/* === pane 3: competitors detail (Screen 3 = 8 sections) === */
|
||
.settings-bar { background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; padding:16px 18px; margin-bottom:16px; }
|
||
.settings-bar h3 { font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-secondary); font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
|
||
.settings-bar h3::after { content:''; flex:1; height:1px; background:var(--border-soft); }
|
||
.settings-bar h3 .n { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:4px; background:var(--accent-soft); color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; font-weight:700; letter-spacing:0; }
|
||
.settings-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
|
||
.set { padding:0; }
|
||
.set .lab { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-secondary); font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
|
||
.set .lab .num { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:4px; background:var(--bg-card-alt); border:1px solid var(--border-soft); color:var(--fg-tertiary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; }
|
||
.set .val { font-size:15px; font-weight:600; color:var(--fg-primary); margin-bottom:6px; font-variant-numeric:tabular-nums; }
|
||
.set .val small { color:var(--fg-secondary); font-weight:400; font-size:12.5px; margin-left:4px; }
|
||
/* slider */
|
||
.slider { position:relative; height:24px; }
|
||
.slider-track { position:absolute; top:11px; left:0; right:0; height:3px; background:var(--border-card); border-radius:2px; }
|
||
.slider-fill { position:absolute; top:11px; left:0; height:3px; background:var(--accent); border-radius:2px; }
|
||
.slider-thumb { position:absolute; top:7px; width:12px; height:12px; background:#fff; border:2px solid var(--accent); border-radius:50%; transform:translateX(-6px); }
|
||
.slider-ticks { display:flex; justify-content:space-between; font-size:10.5px; color:var(--fg-tertiary); margin-top:4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
|
||
/* toggle */
|
||
.toggle-row { display:flex; gap:8px; align-items:center; padding:4px 0; }
|
||
.toggle { width:34px; height:20px; border-radius:10px; background:var(--accent); position:relative; flex:none; }
|
||
.toggle::after { content:''; position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.18); }
|
||
.toggle.off { background:var(--border-card); }
|
||
.toggle.off::after { right:auto; left:2px; }
|
||
.toggle-row .t { font-size:13px; color:var(--fg-primary); font-weight:500; }
|
||
.toggle-row .d { font-size:11px; color:var(--fg-tertiary); margin-top:2px; }
|
||
.note { display:flex; gap:6px; align-items:flex-start; margin-top:6px; padding:6px 8px; background:var(--warn-soft); border-radius:4px; font-size:11px; color:var(--warn); line-height:1.4; }
|
||
.note::before { content:'i'; flex:none; width:14px; height:14px; border-radius:50%; background:var(--warn); color:#fff; display:grid; place-items:center; font-size:9px; font-weight:700; margin-top:1px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-style:italic; }
|
||
|
||
/* output sections numbered chip */
|
||
.out-h { display:flex; align-items:center; gap:10px; }
|
||
.out-h .num { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; background:var(--bg-headline); color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:700; }
|
||
|
||
/* planning grid */
|
||
.planning-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
|
||
.plan { background:var(--bg-card); border:1px solid var(--border-card); border-radius:10px; overflow:hidden; transition:border-color .12s, transform .12s; cursor:pointer; }
|
||
.plan:hover { border-color:var(--border-strong); }
|
||
.plan-img { aspect-ratio:1/1; background:var(--bg-card-alt); border-bottom:1px solid var(--border-soft); display:grid; place-items:center; position:relative; overflow:hidden; }
|
||
.plan-img svg { width:78%; height:78%; }
|
||
.plan-img .badge { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:4px; font-size:10.5px; font-weight:600; background:rgba(255,255,255,0.94); color:var(--fg-primary); }
|
||
.plan-img .badge.hot { background:var(--success); color:#fff; }
|
||
.plan-img .badge.cold { background:var(--danger); color:#fff; }
|
||
.plan-img .price-tag { position:absolute; bottom:8px; right:8px; padding:3px 8px; border-radius:4px; background:rgba(15,23,42,0.84); color:#fff; font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums; }
|
||
.plan-info { padding:10px 12px 12px; }
|
||
.plan-info .title { font-size:13px; font-weight:600; }
|
||
.plan-info .meta { font-size:11.5px; color:var(--fg-secondary); margin-top:2px; }
|
||
.plan-info .row { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; font-size:11.5px; }
|
||
.plan-info .row b { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600; }
|
||
.plan-info .sold-bar { margin-top:6px; height:4px; background:var(--bg-card-alt); border-radius:2px; overflow:hidden; }
|
||
.plan-info .sold-bar i { display:block; height:100%; background:var(--success); border-radius:2px; }
|
||
|
||
/* остатки table */
|
||
.stock-table { width:100%; border-collapse:collapse; font-size:13px; }
|
||
.stock-table th { text-align:left; font-weight:600; color:var(--fg-secondary); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--border-card); background:var(--bg-card-alt); white-space:nowrap; }
|
||
.stock-table th.r { text-align:right; }
|
||
.stock-table td { padding:12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
|
||
.stock-table td.r { text-align:right; font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
|
||
.stock-table tr:last-child td { border-bottom:0; }
|
||
.stock-table tbody tr:hover { background:var(--bg-card-alt); }
|
||
.stock-table .jk { display:flex; align-items:center; gap:10px; }
|
||
.stock-table .jk-mark { width:32px; height:32px; border-radius:6px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; flex:none; }
|
||
.stock-table .jk-name { font-weight:600; font-size:13px; }
|
||
.stock-table .jk-dev { font-size:11.5px; color:var(--fg-secondary); }
|
||
.left-bar { display:inline-flex; align-items:center; gap:6px; }
|
||
.left-bar .bar { width:80px; height:5px; background:var(--bg-card-alt); border-radius:3px; overflow:hidden; }
|
||
.left-bar .bar i { display:block; height:100%; background:var(--viz-4); }
|
||
.left-bar .bar i.high { background:var(--danger); }
|
||
.left-bar .bar i.low { background:var(--success); }
|
||
|
||
/* velocity chart */
|
||
.vchart { display:grid; grid-template-columns:1fr; gap:0; }
|
||
.vchart svg { width:100%; height:auto; }
|
||
|
||
/* recommendation card */
|
||
.reco { background:linear-gradient(135deg, var(--bg-headline) 0%, #1e293b 100%); color:var(--fg-on-dark); border-radius:14px; padding:24px 26px; }
|
||
.reco .eyebrow { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-2); font-weight:700; margin-bottom:10px; }
|
||
.reco h2 { font-size:22px; color:#fff; line-height:1.3; font-weight:600; letter-spacing:-0.005em; margin-bottom:6px; }
|
||
.reco .lede { font-size:14px; color:var(--fg-on-dark); line-height:1.55; max-width:780px; }
|
||
.reco-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:18px; border-top:1px solid rgba(255,255,255,0.12); padding-top:16px; }
|
||
.reco-stat { padding:0 18px; border-right:1px solid rgba(255,255,255,0.12); }
|
||
.reco-stat:first-child { padding-left:0; }
|
||
.reco-stat:last-child { border-right:0; }
|
||
.reco-stat .l { font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-on-dark-muted); font-weight:600; }
|
||
.reco-stat .v { font-size:24px; font-weight:600; color:#fff; margin-top:6px; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
|
||
.reco-stat .v small { font-size:13px; color:var(--fg-on-dark-muted); font-weight:500; margin-left:4px; }
|
||
.reco-stat .h { font-size:11.5px; color:var(--fg-on-dark-muted); margin-top:4px; }
|
||
.reco-foot { display:flex; gap:10px; margin-top:20px; }
|
||
.reco-foot .btn-primary { background:var(--accent-2); color:#fff; }
|
||
.reco-foot .btn-primary:hover { filter:brightness(0.96); }
|
||
.reco-foot .btn-ghost { background:rgba(255,255,255,0.05); color:#fff; border-color:rgba(255,255,255,0.12); }
|
||
.reco-foot .btn-ghost:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.22); }
|
||
|
||
/* pane 4: оценка */
|
||
.score-hero { display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; }
|
||
.score-ring { width:180px; height:180px; }
|
||
.score-ring text.num { font-family:var(--font-body); font-size:46px; font-weight:600; fill:var(--fg-primary); letter-spacing:-0.02em; }
|
||
.score-ring text.lab { font-family:var(--font-body); font-size:11px; fill:var(--fg-secondary); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
|
||
.breakdown { list-style:none; display:grid; gap:10px; }
|
||
.breakdown li { display:grid; grid-template-columns:200px 1fr 56px; gap:14px; align-items:center; font-size:13px; }
|
||
.breakdown .name { color:var(--fg-primary); font-weight:500; }
|
||
.breakdown .name small { color:var(--fg-tertiary); font-size:11px; font-weight:400; display:block; margin-top:1px; }
|
||
.breakdown .bar { height:8px; background:var(--bg-card-alt); border-radius:4px; overflow:hidden; }
|
||
.breakdown .bar i { display:block; height:100%; background:var(--viz-1); border-radius:4px; }
|
||
.breakdown .bar i.warn { background:var(--viz-4); }
|
||
.breakdown .bar i.bad { background:var(--danger); }
|
||
.breakdown .val { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:600; color:var(--fg-primary); text-align:right; }
|
||
.gate-banner { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:10px; background:var(--success-soft); border:1px solid rgba(10,122,58,0.25); margin-top:18px; }
|
||
.gate-banner .ico { width:32px; height:32px; border-radius:8px; background:var(--success); color:#fff; display:grid; place-items:center; font-size:18px; font-weight:700; flex:none; }
|
||
.gate-banner .body h4 { font-size:14px; font-weight:600; color:var(--success); margin-bottom:4px; }
|
||
.gate-banner .body p { font-size:12.5px; color:var(--fg-primary); line-height:1.5; }
|
||
|
||
/* pane 5: environment */
|
||
.aqi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
|
||
.aqi { background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; padding:16px 18px; }
|
||
.aqi .lab { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-secondary); font-weight:500; }
|
||
.aqi .val { font-size:24px; font-weight:600; margin-top:8px; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
|
||
.aqi .val small { font-size:12px; color:var(--fg-secondary); font-weight:500; margin-left:4px; }
|
||
.aqi .grade { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; margin-top:6px; }
|
||
.aqi .grade.good { background:var(--success-soft); color:var(--success); }
|
||
.aqi .grade.warn { background:var(--warn-soft); color:var(--warn); }
|
||
.aqi .grade.bad { background:var(--danger-soft); color:var(--danger); }
|
||
.wind-rose { aspect-ratio:1; background:var(--bg-card-alt); border:1px solid var(--border-soft); border-radius:10px; padding:14px; }
|
||
.wind-rose svg { width:100%; height:100%; }
|
||
.season-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
|
||
.season { padding:12px; background:var(--bg-card-alt); border:1px solid var(--border-soft); border-radius:8px; }
|
||
.season .s { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-secondary); font-weight:600; }
|
||
.season .t { font-size:22px; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums; }
|
||
.season .t small { font-size:11px; color:var(--fg-secondary); font-weight:500; margin-left:4px; }
|
||
.season .d { font-size:11.5px; color:var(--fg-secondary); margin-top:4px; line-height:1.4; }
|
||
|
||
/* helper colors */
|
||
.c-supply { color:var(--fg-secondary); }
|
||
.c-demand { color:var(--success); }
|
||
|
||
/* === responsive === */
|
||
|
||
/* ≤1280px: tighter grids */
|
||
@media (max-width:1280px) {
|
||
.layout { grid-template-columns:260px 1fr; }
|
||
.main { padding:20px 22px 52px; }
|
||
.reco-grid { grid-template-columns:repeat(2,1fr); }
|
||
.reco-stat { padding:14px 0 0; border-right:0; border-top:1px solid rgba(255,255,255,0.12); }
|
||
.reco-stat:first-child { padding-left:0; border-top:0; padding-top:0; }
|
||
.reco-stat:nth-child(2) { border-top:0; padding-top:0; }
|
||
.reco-stat:nth-child(odd) { padding-right:18px; }
|
||
}
|
||
|
||
/* ≤1080px: turn sidebar into horizontal tabs above main */
|
||
@media (max-width:1080px) {
|
||
.layout { display:block; min-height:0; }
|
||
.side { position:relative; top:auto; align-self:auto; border-right:0; border-bottom:1px solid var(--border-card); }
|
||
.side-hd { display:none; }
|
||
.side > ul { display:flex; gap:6px; padding:10px 16px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
|
||
.side > ul::-webkit-scrollbar { height:0; }
|
||
.side > ul > li { flex:none; }
|
||
.side > ul > li > a, .side > ul > li > button.sec-toggle { grid-template-columns:22px auto; padding:8px 12px; font-size:12.5px; white-space:nowrap; border:1px solid var(--border-card); }
|
||
.side > ul > li > a.active, .side > ul > li > button.sec-toggle.active { background:var(--accent); color:#fff; border-color:var(--accent); }
|
||
.side > ul > li > a.active .n, .side > ul > li > button.sec-toggle.active .n { color:#fff; background:rgba(255,255,255,0.18); }
|
||
.side .sub-list { display:none; }
|
||
.side-foot { display:none; }
|
||
.main { padding:20px 22px 52px; }
|
||
|
||
.planning-grid { grid-template-columns:repeat(3,1fr); }
|
||
.settings-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
|
||
.grid-2, .grid-3 { grid-template-columns:1fr 1fr; }
|
||
.aqi-grid { grid-template-columns:repeat(2,1fr); }
|
||
.season-grid { grid-template-columns:repeat(2,1fr); }
|
||
}
|
||
|
||
/* ≤860px: collapse to single column, wrap headline + page head */
|
||
@media (max-width:860px) {
|
||
.topbar-inner { padding:0 16px; height:52px; }
|
||
.topbar nav.main { display:none; }
|
||
.topbar-user .who { font-size:12px; padding:5px 10px; }
|
||
.crumbs { padding:12px 16px; flex-wrap:wrap; gap:6px 10px; font-size:12px; }
|
||
.crumbs .pill { margin-left:0; }
|
||
.main { padding:16px 14px 48px; }
|
||
.page-head { flex-direction:column; align-items:stretch; gap:10px; }
|
||
.page-head .right { justify-content:flex-start; flex-wrap:wrap; }
|
||
.page-head h1 { font-size:20px; }
|
||
.headline-bar { flex-direction:column; align-items:flex-start; gap:8px; padding:14px 16px; }
|
||
.headline-bar .caveat { margin-left:0; white-space:normal; }
|
||
.kpi-row-4, .kpi-row-3 { grid-template-columns:repeat(2,1fr); }
|
||
.section { padding:16px; }
|
||
.section-hd { flex-direction:column; align-items:stretch; gap:10px; }
|
||
.section-hd .right { justify-content:flex-start; flex-wrap:wrap; }
|
||
.planning-grid { grid-template-columns:repeat(2,1fr); }
|
||
.grid-2, .grid-3 { grid-template-columns:1fr; }
|
||
.score-hero { grid-template-columns:1fr; gap:18px; justify-items:center; text-align:center; }
|
||
.score-hero .breakdown { width:100%; text-align:left; }
|
||
.breakdown li { grid-template-columns:140px 1fr 48px; gap:10px; font-size:12.5px; }
|
||
|
||
/* tables: horizontal scroll on the containing section */
|
||
.section:has(> .util-table), .section:has(> .stock-table) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
||
.util-table, .stock-table { min-width:560px; }
|
||
.stock-table .jk-name { font-size:12.5px; }
|
||
.stock-table .jk-dev { font-size:11px; }
|
||
|
||
.reco { padding:18px 18px; border-radius:12px; }
|
||
.reco h2 { font-size:19px; }
|
||
.reco-grid { grid-template-columns:1fr 1fr; }
|
||
.reco-stat { padding:12px 14px 0 0; }
|
||
.reco-stat:nth-child(odd) { padding-right:14px; }
|
||
.reco-stat .v { font-size:20px; }
|
||
.reco-foot { flex-direction:column; }
|
||
.reco-foot .btn { width:100%; }
|
||
}
|
||
|
||
/* ≤520px: phone */
|
||
@media (max-width:520px) {
|
||
.dev-nav { gap:10px; padding:0 10px; }
|
||
.dev-nav .dev-hint { display:none; }
|
||
.topbar-inner { padding:0 12px; }
|
||
.topbar-user .who .avatar { display:none; }
|
||
.brand { font-size:14px; }
|
||
.crumbs { font-size:11.5px; }
|
||
.main { padding:14px 12px 40px; }
|
||
.page-head h1 { font-size:18px; }
|
||
.kpi-row-4, .kpi-row-3 { grid-template-columns:1fr; }
|
||
.kpi .value { font-size:24px; }
|
||
.planning-grid { grid-template-columns:1fr; }
|
||
.aqi-grid { grid-template-columns:1fr 1fr; }
|
||
.season-grid { grid-template-columns:1fr 1fr; }
|
||
.reco-grid { grid-template-columns:1fr; }
|
||
.reco-stat { padding:12px 0 0 0; }
|
||
.reco-stat:nth-child(odd) { padding-right:0; }
|
||
.breakdown li { grid-template-columns:1fr; gap:4px; padding:8px 0; border-top:1px solid var(--border-soft); }
|
||
.breakdown li:first-child { border-top:0; }
|
||
.breakdown .val { text-align:left; }
|
||
.section-hd h2 { font-size:16px; }
|
||
.settings-grid { grid-template-columns:1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="dev-nav">
|
||
<span class="dev-label">Превью · gendsgn</span>
|
||
<nav class="dev-tabs" aria-label="Превью страницы">
|
||
<a href="index.html">обзор</a>
|
||
<a href="landing.html">лендинг</a>
|
||
<a href="analytics.html">/analytics</a>
|
||
<a href="site-finder.html">/site-finder</a>
|
||
<a href="site-finder-analysis.html" aria-current="page">/site-finder/анализ</a>
|
||
<span class="dev-sep" aria-hidden="true"></span>
|
||
<a href="developers.html">/developers</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<header class="topbar">
|
||
<div class="topbar-inner">
|
||
<div class="topbar-left">
|
||
<a href="landing.html" class="brand"><span class="brand-mark" aria-hidden="true"></span> gendsgn</a>
|
||
<nav class="main">
|
||
<a href="site-finder.html" aria-current="page">Поиск участка</a>
|
||
<a href="analytics.html">Аналитика рынка</a>
|
||
<a href="developers.html">Девелоперы</a>
|
||
<a>Мои подборки</a>
|
||
</nav>
|
||
</div>
|
||
<div class="topbar-user">
|
||
<span class="who"><span class="avatar">АК</span> Алексей К. · PRINZIP</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="crumbs-wrap">
|
||
<div class="crumbs">
|
||
<a href="site-finder.html">← К карте</a>
|
||
<span class="sep">·</span>
|
||
<span class="last">66:41:0701045:42</span>
|
||
<span class="sep">·</span>
|
||
<span>Академический район</span>
|
||
<span class="sep">·</span>
|
||
<span>0,82 га</span>
|
||
<span class="pill">анализ свежий · 8 мин</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
|
||
<!-- ============ SIDEBAR ============ -->
|
||
<aside class="side">
|
||
<header class="side-hd">
|
||
<div class="eyebrow">анализ</div>
|
||
<h2>66:41:0701045:42</h2>
|
||
</header>
|
||
<ul role="navigation">
|
||
<li><a href="#" class="nav-link active" data-pane="p1"><span class="n">1</span><span>Инфо об участке</span></a></li>
|
||
<li><a href="#" class="nav-link" data-pane="p2"><span class="n">2</span><span>Сети и точки подключения</span></a></li>
|
||
<li>
|
||
<button type="button" class="sec-toggle nav-link" data-pane="p3"><span class="n">3</span><span>Продажи конкурентов</span></button>
|
||
<ul class="sub-list">
|
||
<li><a href="#" data-pane="p3" data-sub="3.1">3.1 Настройки выборки</a></li>
|
||
<li><a href="#" data-pane="p3" data-sub="3.2">3.2 Планировки</a></li>
|
||
<li><a href="#" data-pane="p3" data-sub="3.3">3.3 Остатки и скорость</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#" class="nav-link" data-pane="p4"><span class="n">4</span><span>Оценка участка</span></a></li>
|
||
<li><a href="#" class="nav-link" data-pane="p5"><span class="n">5</span><span>Атмосфера / воздух</span></a></li>
|
||
</ul>
|
||
<footer class="side-foot">
|
||
<b>Источники</b><br>
|
||
ЕГРН · DOM.РФ · Rosreestr ДДУ · НСПД · Open-Meteo · 2GIS POI
|
||
</footer>
|
||
</aside>
|
||
|
||
<!-- ============ MAIN ============ -->
|
||
<main class="main">
|
||
|
||
<!-- ===== PANE 1: ИНФО ОБ УЧАСТКЕ ===== -->
|
||
<section class="pane active" id="p1">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>1. Инфо об участке</h1>
|
||
<p class="sub">Кадастровые данные ЕГРН · POI 2GIS · ВРИ из НСПД</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-secondary">↗ Export PDF</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="headline-bar">
|
||
<span class="tag">подходит</span>
|
||
<span class="verdict">Участок <b>0,82 га</b> в Академическом · <b>комфорт-класс</b> · собственность ООО «УралЗем» · sold% соседей <b>62%</b> при медиане города 48%.</span>
|
||
<span class="caveat">данные ЕГРН на 16.05.2026</span>
|
||
</div>
|
||
|
||
<div class="kpi-row kpi-row-4">
|
||
<div class="kpi">
|
||
<div class="label">Площадь</div>
|
||
<div class="value">0,82 <small>га</small></div>
|
||
<div class="hint">8 200 м² · ВРИ 2.6 многоэтажка</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="label">Район</div>
|
||
<div class="value" style="font-size:22px;">Академический</div>
|
||
<div class="hint">8 км до центра · трамвай 23</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="label">Медиана цены</div>
|
||
<div class="value">186 <small>тыс ₽/м²</small></div>
|
||
<div class="hint">+11% за 6 мес <span class="delta pos">+11%</span></div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="label">Score участка</div>
|
||
<div class="value">78<small>/100</small></div>
|
||
<div class="hint">верхний квартиль по району <span class="delta pos">+12</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<div>
|
||
<h2>Расположение</h2>
|
||
<p class="sub">Граница участка по ЕГРН + ключевые POI в радиусе 1 км</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-ghost">Смотреть в большой карте ↗</button>
|
||
</div>
|
||
</div>
|
||
<div class="grid-2" style="align-items:start;">
|
||
<div class="minimap">
|
||
<svg viewBox="0 0 600 380" preserveAspectRatio="xMidYMid slice">
|
||
<defs>
|
||
<pattern id="g1" width="30" height="30" patternUnits="userSpaceOnUse"><line x1="0" y1="0" x2="30" y2="0" stroke="#dde2ea" stroke-width="0.5"/><line x1="0" y1="0" x2="0" y2="30" stroke="#dde2ea" stroke-width="0.5"/></pattern>
|
||
</defs>
|
||
<rect width="600" height="380" fill="#f0f2f5"/>
|
||
<rect width="600" height="380" fill="url(#g1)"/>
|
||
<!-- streets -->
|
||
<path d="M0,180 L600,200" stroke="#dde2ea" stroke-width="9" fill="none"/>
|
||
<path d="M0,180 L600,200" stroke="#fff" stroke-width="6" fill="none"/>
|
||
<path d="M280,0 L300,380" stroke="#dde2ea" stroke-width="7" fill="none"/>
|
||
<path d="M280,0 L300,380" stroke="#fff" stroke-width="4.5" fill="none"/>
|
||
<!-- parcel highlighted -->
|
||
<polygon points="230,170 380,160 390,260 240,280" fill="#DCFCE7" stroke="#0F172A" stroke-width="2.5"/>
|
||
<text x="310" y="225" text-anchor="middle" font-size="10" font-weight="600" fill="#0F172A" font-family="Inter">66:41:0701045:42</text>
|
||
<!-- POIs -->
|
||
<g font-family="Inter" font-size="9" fill="#5b6066">
|
||
<circle cx="120" cy="100" r="6" fill="#1D4ED8"/><text x="132" y="103">м. Чкаловская (4 мин)</text>
|
||
<circle cx="460" cy="80" r="6" fill="#14B8A6"/><text x="472" y="83">Парк УрФУ (8 мин)</text>
|
||
<circle cx="180" cy="320" r="6" fill="#F2994A"/><text x="192" y="323">Школа №197 (6 мин)</text>
|
||
<circle cx="500" cy="300" r="6" fill="#F2994A"/><text x="450" y="320">МЦК «Орбита»</text>
|
||
<circle cx="80" cy="240" r="6" fill="#8B5CF6"/><text x="92" y="243">Перекрёсток</text>
|
||
</g>
|
||
<!-- 1km radius -->
|
||
<circle cx="310" cy="220" r="170" fill="none" stroke="#1D4ED8" stroke-width="1" stroke-dasharray="4 4" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<ul class="meta-list">
|
||
<li><span class="l">Кадастровый номер</span><span class="v mono">66:41:0701045:42</span></li>
|
||
<li><span class="l">Адрес</span><span class="v">ул. Краснолесья, уч. 14</span></li>
|
||
<li><span class="l">Площадь</span><span class="v">8 234 м² (0,82 га)</span></li>
|
||
<li><span class="l">Категория земель</span><span class="v">Земли населённых пунктов</span></li>
|
||
<li><span class="l">ВРИ (актуальный)</span><span class="v">2.6 Многоэтажная застройка</span></li>
|
||
<li><span class="l">Форма собственности</span><span class="v">Частная</span></li>
|
||
<li><span class="l">Правообладатель</span><span class="v">ООО «УралЗем»</span></li>
|
||
<li><span class="l">Дата регистрации</span><span class="v">14.03.2022</span></li>
|
||
<li><span class="l">Обременения</span><span class="v good">Нет</span></li>
|
||
<li><span class="l">Красные линии в границах</span><span class="v warn">Касание с СЗО ВЛ-110</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<div><h2>Точки притяжения (POI) в радиусе 1 км</h2><p class="sub">2GIS · OpenStreetMap · сортировка по weighted score</p></div>
|
||
<div class="right"><button type="button" class="btn btn-secondary">↗ Export CSV</button></div>
|
||
</div>
|
||
<div class="poi-list">
|
||
<div class="poi"><div class="ico">M</div><div><div class="name">Станция метро «Чкаловская»</div><div class="desc">Зелёная линия, северный вход</div></div><div class="d">420 м</div><div class="walk">4 мин пеш.</div></div>
|
||
<div class="poi"><div class="ico">P</div><div><div class="name">Парк УрФУ</div><div class="desc">7,2 га · детская инфраструктура</div></div><div class="d">680 м</div><div class="walk">8 мин пеш.</div></div>
|
||
<div class="poi"><div class="ico">S</div><div><div class="name">Школа №197</div><div class="desc">МАОУ · 1240 учеников · рейтинг 4.2</div></div><div class="d">540 м</div><div class="walk">6 мин пеш.</div></div>
|
||
<div class="poi"><div class="ico">S</div><div><div class="name">Гимназия «Корифей»</div><div class="desc">Частная · 380 учеников</div></div><div class="d">820 м</div><div class="walk">10 мин пеш.</div></div>
|
||
<div class="poi"><div class="ico">K</div><div><div class="name">Детсад №524</div><div class="desc">Муницип · 240 мест · очередь 18 чел.</div></div><div class="d">310 м</div><div class="walk">3 мин пеш.</div></div>
|
||
<div class="poi"><div class="ico">$</div><div><div class="name">Перекрёсток</div><div class="desc">2 400 м² · 7:00–23:00</div></div><div class="d">470 м</div><div class="walk">5 мин пеш.</div></div>
|
||
<div class="poi"><div class="ico">H</div><div><div class="name">ГКБ №40</div><div class="desc">Многопрофильная больница</div></div><div class="d">1,1 км</div><div class="walk">13 мин пеш.</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PANE 2: СЕТИ И ТОЧКИ ПОДКЛЮЧЕНИЯ ===== -->
|
||
<section class="pane" id="p2">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>2. Сети и точки подключения</h1>
|
||
<p class="sub">Энергетическая, тепловая, водопроводная, газовая в радиусе 1–1,5 км · НСПД + reverse-engineered энергоплан</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-secondary">↗ Export DWG</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="headline-bar">
|
||
<span class="tag">подключаемо</span>
|
||
<span class="verdict">Все 4 ресурса в зоне <b>≤ 320 м</b>. Узкое место — <b>газ 1,4 км</b>, но для жилого многоквартирного не критично (центральное отопление от ТГК-9).</span>
|
||
<span class="caveat">данные НСПД на Q1 2026</span>
|
||
</div>
|
||
|
||
<div class="kpi-row kpi-row-4">
|
||
<div class="kpi"><div class="label">Теплоснабжение</div><div class="value">240<small> м</small></div><div class="hint">ТГК-9 · магистраль Ø500 <span class="delta pos">резерв 18 Гкал/ч</span></div></div>
|
||
<div class="kpi"><div class="label">Водоснабжение</div><div class="value">180<small> м</small></div><div class="hint">МУП «Водоканал» · колодец ВК-241</div></div>
|
||
<div class="kpi"><div class="label">Электричество</div><div class="value">320<small> м</small></div><div class="hint">ПС 110/10 «Академ» <span class="delta pos">резерв 9 МВт</span></div></div>
|
||
<div class="kpi"><div class="label">Газ</div><div class="value">1,4<small> км</small></div><div class="hint">ГРС-3 «Уралмаш» <span class="delta neu">для МКД не требуется</span></div></div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<div><h2>Схема сетей в радиусе 1,5 км</h2><p class="sub">Условные обозначения по СП 18.13330.2019</p></div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-ghost">Слои</button>
|
||
<button type="button" class="btn btn-secondary">↗ Открыть в НСПД</button>
|
||
</div>
|
||
</div>
|
||
<div class="util-schem">
|
||
<svg viewBox="0 0 1100 460" preserveAspectRatio="xMidYMid meet" aria-label="Схема сетей">
|
||
<defs>
|
||
<pattern id="g2" width="40" height="40" patternUnits="userSpaceOnUse"><line x1="0" y1="0" x2="40" y2="0" stroke="#e6e8ec" stroke-width="0.5"/><line x1="0" y1="0" x2="0" y2="40" stroke="#e6e8ec" stroke-width="0.5"/></pattern>
|
||
</defs>
|
||
<rect width="1100" height="460" fill="#fafbfc"/>
|
||
<rect width="1100" height="460" fill="url(#g2)"/>
|
||
|
||
<!-- radius rings -->
|
||
<circle cx="550" cy="230" r="120" fill="none" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 4"/>
|
||
<circle cx="550" cy="230" r="240" fill="none" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 4"/>
|
||
<text x="675" y="232" font-family="Inter" font-size="10" fill="#94a3b8">1 км</text>
|
||
<text x="795" y="232" font-family="Inter" font-size="10" fill="#94a3b8">1,5 км</text>
|
||
|
||
<!-- утилиты: тепло (красная), вода (синяя), электро (жёлтая), газ (оранжевая) -->
|
||
<!-- тепло -->
|
||
<path d="M40,140 L1060,160" stroke="#B3261E" stroke-width="3.5" fill="none"/>
|
||
<path d="M520,140 L550,225" stroke="#B3261E" stroke-width="2.5" fill="none" stroke-dasharray="4 3"/>
|
||
<circle cx="520" cy="140" r="6" fill="#B3261E"/>
|
||
<text x="500" y="128" font-family="Inter" font-size="10" font-weight="600" fill="#B3261E">ТК-118 · 240 м</text>
|
||
|
||
<!-- вода -->
|
||
<path d="M0,300 L1100,290" stroke="#0EA5E9" stroke-width="3" fill="none"/>
|
||
<path d="M550,295 L550,232" stroke="#0EA5E9" stroke-width="2.5" fill="none" stroke-dasharray="4 3"/>
|
||
<circle cx="550" cy="295" r="6" fill="#0EA5E9"/>
|
||
<text x="560" y="312" font-family="Inter" font-size="10" font-weight="600" fill="#0EA5E9">ВК-241 · 180 м</text>
|
||
|
||
<!-- электро -->
|
||
<path d="M820,80 L820,460" stroke="#F59E0B" stroke-width="3" fill="none" stroke-dasharray="8 4"/>
|
||
<path d="M820,228 L555,228" stroke="#F59E0B" stroke-width="2.5" fill="none" stroke-dasharray="4 3"/>
|
||
<polygon points="820,228 810,222 810,234" fill="#F59E0B"/>
|
||
<text x="780" y="76" font-family="Inter" font-size="10" font-weight="600" fill="#F59E0B">ВЛ-110 «Академ» · 320 м</text>
|
||
|
||
<!-- газ (за пределы рамки уходит) -->
|
||
<path d="M40,440 L1060,440" stroke="#8B5CF6" stroke-width="2.5" fill="none" opacity="0.5" stroke-dasharray="6 3"/>
|
||
<text x="900" y="430" font-family="Inter" font-size="10" font-weight="600" fill="#8B5CF6" opacity="0.7">ГРС «Уралмаш» · 1,4 км ↓</text>
|
||
|
||
<!-- участок -->
|
||
<polygon points="500,200 600,200 605,255 495,260" fill="#DCFCE7" stroke="#0F172A" stroke-width="2"/>
|
||
<text x="550" y="234" text-anchor="middle" font-family="Inter" font-size="11" font-weight="600" fill="#0F172A">участок</text>
|
||
<text x="550" y="248" text-anchor="middle" font-family="Inter" font-size="9" fill="#0F172A">0,82 га</text>
|
||
|
||
<!-- legend bottom -->
|
||
<g font-family="Inter" font-size="11" transform="translate(40,420)">
|
||
<rect width="14" height="3" y="3" fill="#B3261E"/><text x="22" y="9" fill="#5b6066">тепло</text>
|
||
<rect width="14" height="3" y="3" x="100" fill="#0EA5E9"/><text x="122" y="9" fill="#5b6066">вода</text>
|
||
<rect width="14" height="3" y="3" x="200" fill="#F59E0B"/><text x="222" y="9" fill="#5b6066">электро 10 кВ</text>
|
||
<rect width="14" height="3" y="3" x="330" fill="#8B5CF6"/><text x="352" y="9" fill="#5b6066">газ</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<div><h2>Точки подключения</h2><p class="sub">Координаты, владелец сети, доступный резерв, оценка стоимости подключения</p></div>
|
||
<div class="right"><button type="button" class="btn btn-secondary">↗ Export CSV</button></div>
|
||
</div>
|
||
<table class="util-table">
|
||
<thead><tr><th>Ресурс</th><th>Точка</th><th>Координаты</th><th>Владелец</th><th>Расстояние</th><th>Резерв</th><th>Стоимость подкл.</th><th>Статус</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><div class="util-name"><i style="background:#B3261E;"></i>Тепло</div></td><td class="num">ТК-118</td><td class="num">56,838 / 60,597</td><td class="owner">ТГК-9</td><td class="num">240 м</td><td class="num">18 Гкал/ч</td><td class="num">3,4 млн ₽</td><td class="status-ok">подключаемо</td></tr>
|
||
<tr><td><div class="util-name"><i style="background:#0EA5E9;"></i>Вода</div></td><td class="num">ВК-241</td><td class="num">56,839 / 60,598</td><td class="owner">МУП «Водоканал»</td><td class="num">180 м</td><td class="num">280 м³/сут</td><td class="num">1,8 млн ₽</td><td class="status-ok">подключаемо</td></tr>
|
||
<tr><td><div class="util-name"><i style="background:#F59E0B;"></i>Электро 10 кВ</div></td><td class="num">ПС «Академ»</td><td class="num">56,840 / 60,600</td><td class="owner">МРСК Урала</td><td class="num">320 м</td><td class="num">9 МВт</td><td class="num">12,6 млн ₽</td><td class="status-ok">подключаемо</td></tr>
|
||
<tr><td><div class="util-name"><i style="background:#8B5CF6;"></i>Газ среднего давл.</div></td><td class="num">ГРС-3</td><td class="num">56,832 / 60,612</td><td class="owner">Газпром Е-бург</td><td class="num">1,4 км</td><td class="num">недостаточно</td><td class="num">≈ 28 млн ₽</td><td class="status-warn">альтернатива</td></tr>
|
||
<tr><td><div class="util-name"><i style="background:#5B6066;"></i>Канализация</div></td><td class="num">КК-89</td><td class="num">56,839 / 60,599</td><td class="owner">МУП «Водоканал»</td><td class="num">210 м</td><td class="num">240 м³/сут</td><td class="num">2,1 млн ₽</td><td class="status-ok">подключаемо</td></tr>
|
||
<tr><td><div class="util-name"><i style="background:#14B8A6;"></i>Ливневая</div></td><td class="num">ЛК-32</td><td class="num">56,838 / 60,594</td><td class="owner">Адм. Е-бурга</td><td class="num">280 м</td><td class="num">—</td><td class="num">0,9 млн ₽</td><td class="status-ok">подключаемо</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PANE 3: ПРОДАЖИ КОНКУРЕНТОВ (Screen 3 — 8 секций: 1-4 настройки + 5-8 вывод) ===== -->
|
||
<section class="pane" id="p3">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>3. Продажи конкурентов</h1>
|
||
<p class="sub">DOM.РФ ДДУ-выгрузка + Rosreestr 6,83 млн ДДУ · обновление еженедельно</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-ghost">Сравнить с другим участком</button>
|
||
<button type="button" class="btn btn-secondary">↗ Export Excel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="headline-bar">
|
||
<span class="tag">окно дефицита открыто</span>
|
||
<span class="verdict">В выборке <b>7 ЖК</b> · <b>1 482 квартиры в продаже</b> · средняя скорость <b>22 ДДУ/мес</b> · 80+ м² составляют <b>11% портфеля</b>, но <b>37% спроса</b> → конкурент Forum даёт <b>+86% уход</b>.</span>
|
||
<span class="caveat">данные на 16.05.2026</span>
|
||
</div>
|
||
|
||
<!-- ===== SETTINGS (1-4) ===== -->
|
||
<div class="settings-bar">
|
||
<h3><span class="n">▸</span> Настройки выборки <span style="margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;text-transform:none;font-size:11px;color:var(--fg-tertiary);">пп. 1–4</span></h3>
|
||
<div class="settings-grid">
|
||
<div class="set">
|
||
<div class="lab"><span class="num">1</span> Радиус выборки</div>
|
||
<div class="val">2,5<small> км</small></div>
|
||
<div class="slider"><div class="slider-track"></div><div class="slider-fill" style="width:38%;"></div><div class="slider-thumb" style="left:38%;"></div></div>
|
||
<div class="slider-ticks"><span>1</span><span>2</span><span>3</span><span>4</span><span>5 км</span></div>
|
||
</div>
|
||
<div class="set">
|
||
<div class="lab"><span class="num">2</span> Только строящиеся</div>
|
||
<div class="toggle-row"><span class="toggle"></span><span><span class="t">включено</span><div class="d">+3 мес от срока ввода</div></span></div>
|
||
<div class="toggle-row" style="margin-top:6px;"><span class="toggle"></span><span><span class="t">не показывать сданное</span><div class="d">скрыто 4 ЖК · 312 квартир</div></span></div>
|
||
</div>
|
||
<div class="set">
|
||
<div class="lab"><span class="num">3</span> Период продаж</div>
|
||
<div class="val">−6 мес <small>от 16.11.2025</small></div>
|
||
<div class="slider"><div class="slider-track"></div><div class="slider-fill" style="width:50%;"></div><div class="slider-thumb" style="left:50%;"></div></div>
|
||
<div class="slider-ticks"><span>3</span><span>6</span><span>9</span><span>12</span><span>24 мес</span></div>
|
||
</div>
|
||
<div class="set">
|
||
<div class="lab"><span class="num">4</span> Только квартиры</div>
|
||
<div class="toggle-row"><span class="toggle"></span><span><span class="t">flat_type = «Квартира»</span><div class="d">машиноместа, кладовые, апартам. — скрыто</div></span></div>
|
||
<div class="note">данных по парковкам — есть, но по этому ЖК и Брусника не разделяют. Дам знать когда подключим.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== OUTPUTS (5-8) ===== -->
|
||
|
||
<!-- 5. Планировки -->
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<div>
|
||
<h2 class="out-h"><span class="num">5</span> Планировки конкурентов</h2>
|
||
<p class="sub">12 уникальных типов · сгруппированы по комнатности и площади · картинки из DOM.РФ скрапера</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-ghost">Все 12 →</button>
|
||
<button type="button" class="btn btn-secondary">↗ Export PNG</button>
|
||
</div>
|
||
</div>
|
||
<div class="planning-grid">
|
||
|
||
<!-- 1 -->
|
||
<div class="plan">
|
||
<div class="plan-img">
|
||
<span class="badge cold">−47%</span>
|
||
<svg viewBox="0 0 100 100"><rect x="5" y="5" width="90" height="90" fill="none" stroke="#0F172A" stroke-width="2"/><line x1="55" y1="5" x2="55" y2="95" stroke="#0F172A" stroke-width="1.4"/><line x1="55" y1="50" x2="95" y2="50" stroke="#0F172A" stroke-width="1.4"/><text x="28" y="55" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">кухня-гост</text><text x="75" y="32" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">спальня</text><text x="75" y="74" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">с/у</text></svg>
|
||
<span class="price-tag">7,8 млн</span>
|
||
</div>
|
||
<div class="plan-info">
|
||
<div class="title">1-комн «евро» 38 м²</div>
|
||
<div class="meta">встречается у 5 из 7 ЖК · 312 шт</div>
|
||
<div class="row"><span class="c-supply">предложение</span><b>312</b></div>
|
||
<div class="row"><span class="c-demand">продано/мес</span><b>9</b></div>
|
||
<div class="sold-bar"><i style="width:31%;background:var(--danger);"></i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2 -->
|
||
<div class="plan">
|
||
<div class="plan-img">
|
||
<span class="badge">±0</span>
|
||
<svg viewBox="0 0 100 100"><rect x="5" y="5" width="90" height="90" fill="none" stroke="#0F172A" stroke-width="2"/><line x1="50" y1="5" x2="50" y2="95" stroke="#0F172A" stroke-width="1.4"/><line x1="50" y1="50" x2="95" y2="50" stroke="#0F172A" stroke-width="1.4"/><text x="28" y="55" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">гост</text><text x="73" y="32" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">спальня</text><text x="73" y="74" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">кухня</text></svg>
|
||
<span class="price-tag">10,1 млн</span>
|
||
</div>
|
||
<div class="plan-info">
|
||
<div class="title">1-комн классика 46 м²</div>
|
||
<div class="meta">встречается у 4 из 7 ЖК · 184 шт</div>
|
||
<div class="row"><span class="c-supply">предложение</span><b>184</b></div>
|
||
<div class="row"><span class="c-demand">продано/мес</span><b>16</b></div>
|
||
<div class="sold-bar"><i style="width:52%;"></i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3 -->
|
||
<div class="plan">
|
||
<div class="plan-img">
|
||
<span class="badge">+12%</span>
|
||
<svg viewBox="0 0 100 100"><rect x="5" y="5" width="90" height="90" fill="none" stroke="#0F172A" stroke-width="2"/><line x1="45" y1="5" x2="45" y2="95" stroke="#0F172A" stroke-width="1.4"/><line x1="45" y1="55" x2="95" y2="55" stroke="#0F172A" stroke-width="1.4"/><line x1="70" y1="55" x2="70" y2="95" stroke="#0F172A" stroke-width="1.4"/><text x="25" y="55" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">кухня-гост</text><text x="68" y="32" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">сп.1</text><text x="58" y="78" text-anchor="middle" font-family="Inter" font-size="5.5" fill="#5b6066">сп.2</text><text x="83" y="78" text-anchor="middle" font-family="Inter" font-size="5.5" fill="#5b6066">с/у</text></svg>
|
||
<span class="price-tag">14,4 млн</span>
|
||
</div>
|
||
<div class="plan-info">
|
||
<div class="title">2-комн «евро» 62 м²</div>
|
||
<div class="meta">встречается у 6 из 7 ЖК · 238 шт</div>
|
||
<div class="row"><span class="c-supply">предложение</span><b>238</b></div>
|
||
<div class="row"><span class="c-demand">продано/мес</span><b>24</b></div>
|
||
<div class="sold-bar"><i style="width:71%;background:var(--success);"></i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4 — HOT -->
|
||
<div class="plan">
|
||
<div class="plan-img">
|
||
<span class="badge hot">+86%</span>
|
||
<svg viewBox="0 0 100 100"><rect x="5" y="5" width="90" height="90" fill="none" stroke="#0F172A" stroke-width="2"/><line x1="42" y1="5" x2="42" y2="95" stroke="#0F172A" stroke-width="1.4"/><line x1="42" y1="50" x2="95" y2="50" stroke="#0F172A" stroke-width="1.4"/><line x1="68" y1="5" x2="68" y2="50" stroke="#0F172A" stroke-width="1.4"/><line x1="65" y1="50" x2="65" y2="95" stroke="#0F172A" stroke-width="1.4"/><text x="22" y="48" text-anchor="middle" font-family="Inter" font-size="5.5" fill="#5b6066">кухня</text><text x="22" y="58" text-anchor="middle" font-family="Inter" font-size="5.5" fill="#5b6066">-гост</text><text x="55" y="32" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">сп.1</text><text x="82" y="32" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">сп.2</text><text x="52" y="74" text-anchor="middle" font-family="Inter" font-size="6" fill="#5b6066">сп.3</text><text x="82" y="74" text-anchor="middle" font-family="Inter" font-size="5.5" fill="#5b6066">с/у</text></svg>
|
||
<span class="price-tag">19,2 млн</span>
|
||
</div>
|
||
<div class="plan-info">
|
||
<div class="title">3-комн 84 м²</div>
|
||
<div class="meta">только у 2 из 7 ЖК · 38 шт</div>
|
||
<div class="row"><span class="c-supply">предложение</span><b>38</b></div>
|
||
<div class="row"><span class="c-demand">продано/мес</span><b>14</b></div>
|
||
<div class="sold-bar"><i style="width:96%;background:var(--success);"></i></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. Остатки -->
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<div>
|
||
<h2 class="out-h"><span class="num">6</span> Остатки (нераспроданное)</h2>
|
||
<p class="sub">flats_total − flats_sold по каждому ЖК в выборке · сортировка по абс. остатку</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-ghost">Только 80+ м²</button>
|
||
<button type="button" class="btn btn-secondary">↗ Export CSV</button>
|
||
</div>
|
||
</div>
|
||
<table class="stock-table">
|
||
<thead><tr><th>ЖК</th><th>Срок ввода</th><th class="r">Всего, шт</th><th class="r">Продано</th><th class="r">Остаток</th><th>Доля остатка</th><th class="r">Sold%</th><th class="r">Δ за 14 мес</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><div class="jk"><div class="jk-mark">ФР</div><div><div class="jk-name">Forum «Краснолесье»</div><div class="jk-dev">Форум-групп · 2 очередь</div></div></div></td><td>IV кв 2026</td><td class="r">412</td><td class="r">266</td><td class="r">146</td><td><span class="left-bar"><span class="bar"><i style="width:35%;" class="low"></i></span> 35%</span></td><td class="r">64%</td><td class="r"><span class="delta pos">+18 пп</span></td></tr>
|
||
<tr><td><div class="jk"><div class="jk-mark">БР</div><div><div class="jk-name">Брусника «Академ-парк»</div><div class="jk-dev">Брусника · 3 очередь</div></div></div></td><td>II кв 2026</td><td class="r">368</td><td class="r">280</td><td class="r">88</td><td><span class="left-bar"><span class="bar"><i style="width:24%;" class="low"></i></span> 24%</span></td><td class="r">76%</td><td class="r"><span class="delta pos">+24 пп</span></td></tr>
|
||
<tr><td><div class="jk"><div class="jk-mark">ЭТ</div><div><div class="jk-name">Эталон «Чкаловский»</div><div class="jk-dev">Эталон · 1 очередь</div></div></div></td><td>I кв 2027</td><td class="r">284</td><td class="r">112</td><td class="r">172</td><td><span class="left-bar"><span class="bar"><i style="width:61%;" class="high"></i></span> 61%</span></td><td class="r">39%</td><td class="r"><span class="delta neg">−6 пп</span></td></tr>
|
||
<tr><td><div class="jk"><div class="jk-mark">КР</div><div><div class="jk-name">Кортрос «Преображенский»</div><div class="jk-dev">КОРТРОС · 2 очередь</div></div></div></td><td>III кв 2026</td><td class="r">196</td><td class="r">138</td><td class="r">58</td><td><span class="left-bar"><span class="bar"><i style="width:30%;" class="low"></i></span> 30%</span></td><td class="r">70%</td><td class="r"><span class="delta pos">+12 пп</span></td></tr>
|
||
<tr><td><div class="jk"><div class="jk-mark">УН</div><div><div class="jk-name">Унистрой «Юг-1»</div><div class="jk-dev">Унистрой · 4 очередь</div></div></div></td><td>IV кв 2026</td><td class="r">142</td><td class="r">38</td><td class="r">104</td><td><span class="left-bar"><span class="bar"><i style="width:73%;" class="high"></i></span> 73%</span></td><td class="r">27%</td><td class="r"><span class="delta neg">−14 пп</span></td></tr>
|
||
<tr><td><div class="jk"><div class="jk-mark">АС</div><div><div class="jk-name">Атомстрой «Уралмаш»</div><div class="jk-dev">Атомстройкомплекс · 1 очередь</div></div></div></td><td>I кв 2027</td><td class="r">80</td><td class="r">26</td><td class="r">54</td><td><span class="left-bar"><span class="bar"><i style="width:68%;" class="high"></i></span> 68%</span></td><td class="r">32%</td><td class="r"><span class="delta pos">+4 пп</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 7. Ассортимент и скорость продаж -->
|
||
<div class="section">
|
||
<div class="section-hd">
|
||
<div>
|
||
<h2 class="out-h"><span class="num">7</span> Ассортимент и скорость продаж</h2>
|
||
<p class="sub">−6 мес от сегодня · разрез по room_bucket × area_bin · ось Y — ДДУ/мес</p>
|
||
</div>
|
||
<div class="right"><button type="button" class="btn btn-secondary">↗ Export PNG</button></div>
|
||
</div>
|
||
<div class="vchart">
|
||
<svg viewBox="0 0 980 320" preserveAspectRatio="xMidYMid meet" aria-label="Скорость продаж по сегментам">
|
||
<!-- Y axis grid -->
|
||
<g font-family="Inter" font-size="10" fill="#73767e">
|
||
<line x1="60" y1="20" x2="60" y2="280" stroke="#e6e8ec"/>
|
||
<line x1="60" y1="280" x2="960" y2="280" stroke="#e6e8ec"/>
|
||
<line x1="60" y1="220" x2="960" y2="220" stroke="#eef0f3" stroke-dasharray="2 3"/>
|
||
<line x1="60" y1="160" x2="960" y2="160" stroke="#eef0f3" stroke-dasharray="2 3"/>
|
||
<line x1="60" y1="100" x2="960" y2="100" stroke="#eef0f3" stroke-dasharray="2 3"/>
|
||
<line x1="60" y1="40" x2="960" y2="40" stroke="#eef0f3" stroke-dasharray="2 3"/>
|
||
<text x="50" y="284" text-anchor="end">0</text>
|
||
<text x="50" y="224" text-anchor="end">10</text>
|
||
<text x="50" y="164" text-anchor="end">20</text>
|
||
<text x="50" y="104" text-anchor="end">30</text>
|
||
<text x="50" y="44" text-anchor="end">40</text>
|
||
<text x="20" y="155" text-anchor="middle" transform="rotate(-90 20,155)" fill="#5b6066" font-weight="500">ДДУ / мес</text>
|
||
</g>
|
||
|
||
<!-- bars: groups by room_bucket; supply (grey) + demand (emerald) -->
|
||
<!-- group 1: 1-комн до 40 -->
|
||
<g>
|
||
<rect x="100" y="160" width="34" height="120" fill="#94A3B8"/>
|
||
<rect x="138" y="240" width="34" height="40" fill="#0A7A3A"/>
|
||
<text x="155" y="298" text-anchor="middle" font-family="Inter" font-size="10.5" fill="#5b6066">1к до 40</text>
|
||
</g>
|
||
<!-- group 2: 1-комн 40-50 -->
|
||
<g>
|
||
<rect x="220" y="200" width="34" height="80" fill="#94A3B8"/>
|
||
<rect x="258" y="216" width="34" height="64" fill="#0A7A3A"/>
|
||
<text x="275" y="298" text-anchor="middle" font-family="Inter" font-size="10.5" fill="#5b6066">1к 40-50</text>
|
||
</g>
|
||
<!-- group 3: 2-комн до 55 -->
|
||
<g>
|
||
<rect x="340" y="180" width="34" height="100" fill="#94A3B8"/>
|
||
<rect x="378" y="184" width="34" height="96" fill="#0A7A3A"/>
|
||
<text x="395" y="298" text-anchor="middle" font-family="Inter" font-size="10.5" fill="#5b6066">2к до 55</text>
|
||
</g>
|
||
<!-- group 4: 2-комн евро 55-70 -->
|
||
<g>
|
||
<rect x="460" y="100" width="34" height="180" fill="#94A3B8"/>
|
||
<rect x="498" y="136" width="34" height="144" fill="#0A7A3A"/>
|
||
<text x="515" y="298" text-anchor="middle" font-family="Inter" font-size="10.5" fill="#5b6066">2к евро 55-70</text>
|
||
</g>
|
||
<!-- group 5: 3-комн 70-85 -->
|
||
<g>
|
||
<rect x="580" y="220" width="34" height="60" fill="#94A3B8"/>
|
||
<rect x="618" y="196" width="34" height="84" fill="#0A7A3A"/>
|
||
<text x="635" y="298" text-anchor="middle" font-family="Inter" font-size="10.5" fill="#5b6066">3к 70-85 ⚡</text>
|
||
</g>
|
||
<!-- group 6: 3-комн 85-110 -->
|
||
<g>
|
||
<rect x="700" y="240" width="34" height="40" fill="#94A3B8"/>
|
||
<rect x="738" y="208" width="34" height="72" fill="#0A7A3A"/>
|
||
<text x="755" y="298" text-anchor="middle" font-family="Inter" font-size="10.5" fill="#5b6066">3к 85-110 ⚡</text>
|
||
</g>
|
||
<!-- group 7: 4+ комн 110+ -->
|
||
<g>
|
||
<rect x="820" y="260" width="34" height="20" fill="#94A3B8"/>
|
||
<rect x="858" y="232" width="34" height="48" fill="#0A7A3A"/>
|
||
<text x="875" y="298" text-anchor="middle" font-family="Inter" font-size="10.5" fill="#5b6066">4к+ 110+ ⚡</text>
|
||
</g>
|
||
|
||
<!-- legend -->
|
||
<g font-family="Inter" font-size="11" transform="translate(680,30)">
|
||
<rect width="12" height="12" fill="#94A3B8"/><text x="18" y="10" fill="#5b6066">предложение, шт ×0.1</text>
|
||
<rect x="160" width="12" height="12" fill="#0A7A3A"/><text x="178" y="10" fill="#5b6066">ДДУ / мес</text>
|
||
</g>
|
||
<!-- annotation -->
|
||
<g>
|
||
<line x1="650" y1="60" x2="650" y2="190" stroke="#F2994A" stroke-dasharray="3 3"/>
|
||
<text x="660" y="60" font-family="Inter" font-size="10.5" font-weight="600" fill="#F2994A">окно дефицита 70+ м²</text>
|
||
<text x="660" y="74" font-family="Inter" font-size="10.5" fill="#F2994A">спрос > предложение</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. Рекомендация -->
|
||
<div class="reco">
|
||
<div class="eyebrow">🜂 рекомендация — наша</div>
|
||
<h2>Строить комфорт-микс с креном в 3-комн евро 70–85 м² (35% портфеля)</h2>
|
||
<p class="lede">Дефицит 80+ м² в радиусе 2,5 км — реальный (37% спроса при 11% предложения). Forum «Краснолесье» забирает 86% этого спроса с одной типологии «3-комн 84 м²». Своя конкурентная позиция: тот же бакет с лучшей кухней-гостиной (24+ м²) и панорамным остеклением спальни. Цену держать 230 тыс ₽/м² против 215 тыс у Forum — рынок проглотит, sold % сохранится > 60% к месяцу 14.</p>
|
||
<div class="reco-grid">
|
||
<div class="reco-stat"><div class="l">Площадь застройки</div><div class="v">12 600<small> м²</small></div><div class="h">≈ 180 квартир</div></div>
|
||
<div class="reco-stat"><div class="l">Прогноз выручки</div><div class="v">2,4<small> млрд ₽</small></div><div class="h">из них 1,1 млрд — 3к</div></div>
|
||
<div class="reco-stat"><div class="l">Срок 80% продаж</div><div class="v">22<small> мес</small></div><div class="h">от старта продаж</div></div>
|
||
<div class="reco-stat"><div class="l">Liquidity score</div><div class="v">B+</div><div class="h">медиана городa: B−</div></div>
|
||
</div>
|
||
<div class="reco-foot">
|
||
<button type="button" class="btn btn-primary">→ Передать в Generative Design</button>
|
||
<button type="button" class="btn btn-ghost">↗ Export сценарий (PDF)</button>
|
||
<button type="button" class="btn btn-ghost">Сохранить в подборку</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PANE 4: ОЦЕНКА УЧАСТКА ===== -->
|
||
<section class="pane" id="p4">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>4. Оценка участка</h1>
|
||
<p class="sub">Композитный score 0–100 · веса калибруются под класс жилья</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-secondary">↗ Export PDF</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="headline-bar">
|
||
<span class="tag">верхний квартиль</span>
|
||
<span class="verdict">Score <b>78/100</b> · верхний квартиль по Свердл (медиана города 56) · единственное узкое место — <b>касание с СЗО ВЛ-110</b>, требует согласования.</span>
|
||
<span class="caveat">калибровка на 2 142 ДДУ</span>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="score-hero">
|
||
<svg class="score-ring" viewBox="0 0 200 200">
|
||
<circle cx="100" cy="100" r="84" fill="none" stroke="#eef0f3" stroke-width="14"/>
|
||
<circle cx="100" cy="100" r="84" fill="none" stroke="#1D4ED8" stroke-width="14" stroke-dasharray="412.6" stroke-dashoffset="91" transform="rotate(-90 100 100)" stroke-linecap="round"/>
|
||
<text class="num" x="100" y="106" text-anchor="middle">78</text>
|
||
<text class="lab" x="100" y="135" text-anchor="middle">из 100</text>
|
||
</svg>
|
||
<div>
|
||
<ul class="breakdown">
|
||
<li><span class="name">Локация и транспорт<small>метро 420 м · школа 540 м · парк 680 м</small></span><div class="bar"><i style="width:88%;"></i></div><span class="val">88</span></li>
|
||
<li><span class="name">Спрос в районе<small>sold % 62% · окно 80+ м² открыто</small></span><div class="bar"><i style="width:84%;"></i></div><span class="val">84</span></li>
|
||
<li><span class="name">Инженерные сети<small>тепло/вода/электро ≤ 320 м</small></span><div class="bar"><i style="width:80%;"></i></div><span class="val">80</span></li>
|
||
<li><span class="name">Конкуренция<small>7 ЖК в 1 км · Forum доминирует</small></span><div class="bar"><i class="warn" style="width:64%;"></i></div><span class="val">64</span></li>
|
||
<li><span class="name">Цена / маржинальность<small>+11% за 6 мес · потолок 230 тыс ₽/м²</small></span><div class="bar"><i style="width:74%;"></i></div><span class="val">74</span></li>
|
||
<li><span class="name">Юр-ограничения<small>СЗО ВЛ-110 в границах</small></span><div class="bar"><i class="bad" style="width:52%;"></i></div><span class="val">52</span></li>
|
||
<li><span class="name">Экология / атмосфера<small>AQI 38 · преобл. ЮЗ ветер</small></span><div class="bar"><i style="width:82%;"></i></div><span class="val">82</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="gate-banner">
|
||
<div class="ico">✓</div>
|
||
<div class="body">
|
||
<h4>Gate: ПРОЙДЕНО (по умолчанию для комфорт-класса)</h4>
|
||
<p>Все 4 обязательных критерия выполнены: ВРИ совместим (1), все 4 ресурса в 1,5 км (2), sold % района > 45% (3), score > 65 (4). Замечание: СЗО ВЛ-110 — требует согласования с МРСК Урала до начала проектирования (12–16 недель).</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PANE 5: АТМОСФЕРА / ВОЗДУХ ===== -->
|
||
<section class="pane" id="p5">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>5. Атмосфера и климат</h1>
|
||
<p class="sub">Open-Meteo · ФГБУ «УГМС-Урал» · roza vetrov по последним 5 годам</p>
|
||
</div>
|
||
<div class="right">
|
||
<button type="button" class="btn btn-secondary">↗ Export CSV</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="headline-bar">
|
||
<span class="tag">пригодно</span>
|
||
<span class="verdict">AQI <b>38</b> (good) · преобладающий ветер <b>ЮЗ</b> (38% времени) → промзона Уралмаш в наветренной стороне → <b>низкий риск</b> износа от выбросов.</span>
|
||
<span class="caveat">5-летний период</span>
|
||
</div>
|
||
|
||
<div class="aqi-grid">
|
||
<div class="aqi"><div class="lab">AQI индекс</div><div class="val">38</div><span class="grade good">good</span><div class="hint" style="font-size:12.5px;color:var(--fg-secondary);margin-top:6px;">медиана города 52</div></div>
|
||
<div class="aqi"><div class="lab">PM2.5</div><div class="val">9 <small>мкг/м³</small></div><span class="grade good">≤ 12</span><div class="hint" style="font-size:12.5px;color:var(--fg-secondary);margin-top:6px;">норма ВОЗ — 15</div></div>
|
||
<div class="aqi"><div class="lab">NO₂</div><div class="val">28 <small>мкг/м³</small></div><span class="grade warn">умерен.</span><div class="hint" style="font-size:12.5px;color:var(--fg-secondary);margin-top:6px;">влияние трамвайной линии</div></div>
|
||
<div class="aqi"><div class="lab">Шум днём</div><div class="val">54 <small>дБА</small></div><span class="grade good">в норме</span><div class="hint" style="font-size:12.5px;color:var(--fg-secondary);margin-top:6px;">СН 2.2.4/2.1.8.562-96 ≤ 55</div></div>
|
||
</div>
|
||
|
||
<div class="grid-2" style="margin-top:16px;">
|
||
<div class="section" style="margin-bottom:0;">
|
||
<div class="section-hd"><div><h2>Роза ветров</h2><p class="sub">направление преобладающего ветра · 5-летняя статистика УГМС</p></div></div>
|
||
<div class="wind-rose">
|
||
<svg viewBox="0 0 220 220" aria-label="Роза ветров">
|
||
<circle cx="110" cy="110" r="90" fill="none" stroke="#eef0f3"/>
|
||
<circle cx="110" cy="110" r="60" fill="none" stroke="#eef0f3" stroke-dasharray="2 3"/>
|
||
<circle cx="110" cy="110" r="30" fill="none" stroke="#eef0f3" stroke-dasharray="2 3"/>
|
||
<!-- 8 directions -->
|
||
<g font-family="Inter" font-size="10" fill="#5b6066" font-weight="600">
|
||
<text x="110" y="16" text-anchor="middle">С</text>
|
||
<text x="204" y="114" text-anchor="middle">В</text>
|
||
<text x="110" y="212" text-anchor="middle">Ю</text>
|
||
<text x="16" y="114" text-anchor="middle">З</text>
|
||
<text x="178" y="46" text-anchor="middle">СВ</text>
|
||
<text x="178" y="182" text-anchor="middle">ЮВ</text>
|
||
<text x="42" y="182" text-anchor="middle">ЮЗ</text>
|
||
<text x="42" y="46" text-anchor="middle">СЗ</text>
|
||
</g>
|
||
<!-- petals (sample distribution) -->
|
||
<path d="M110,110 L100,40 Q110,20 120,40 Z" fill="#1D4ED8" opacity="0.6"/><!-- N 12% -->
|
||
<path d="M110,110 L160,60 Q172,60 165,75 Z" fill="#1D4ED8" opacity="0.5"/><!-- NE 9% -->
|
||
<path d="M110,110 L195,100 Q204,110 195,120 Z" fill="#1D4ED8" opacity="0.45"/><!-- E 7% -->
|
||
<path d="M110,110 L165,165 Q170,178 152,170 Z" fill="#1D4ED8" opacity="0.4"/><!-- SE 6% -->
|
||
<path d="M110,110 L120,180 Q110,200 100,180 Z" fill="#1D4ED8" opacity="0.55"/><!-- S 10% -->
|
||
<path d="M110,110 L52,168 Q40,160 50,148 Z" fill="#1D4ED8" opacity="0.95"/><!-- SW 38% — dominant -->
|
||
<path d="M110,110 L20,110 Q14,98 28,92 Z" fill="#1D4ED8" opacity="0.5"/><!-- W 8% -->
|
||
<path d="M110,110 L48,52 Q60,42 70,55 Z" fill="#1D4ED8" opacity="0.4"/><!-- NW 6% -->
|
||
<circle cx="110" cy="110" r="6" fill="#0F172A"/>
|
||
</svg>
|
||
</div>
|
||
<p class="hint" style="font-size:12.5px;color:var(--fg-secondary);margin-top:10px;">Доминирует ЮЗ (38%) — комбинат «Уралмаш» в наветренной стороне → выбросы уходят на восток, в направлении ЕКАД. Для участка это <b style="color:var(--success);">благоприятный фактор</b>.</p>
|
||
</div>
|
||
|
||
<div class="section" style="margin-bottom:0;">
|
||
<div class="section-hd"><div><h2>Сезонная погода</h2><p class="sub">средние значения за 5 лет · Open-Meteo</p></div></div>
|
||
<div class="season-grid">
|
||
<div class="season"><div class="s">зима</div><div class="t">−12<small>°C</small></div><div class="d">снежн. покров 87 дн · риск гололёда на парковке</div></div>
|
||
<div class="season"><div class="s">весна</div><div class="t">+6<small>°C</small></div><div class="d">паводок 1,2 м · район выше отметки 295</div></div>
|
||
<div class="season"><div class="s">лето</div><div class="t">+22<small>°C</small></div><div class="d">волны жары до +34 — нужно остекл. ≤ 35% юж. фасадов</div></div>
|
||
<div class="season"><div class="s">осень</div><div class="t">+8<small>°C</small></div><div class="d">осадки 180 мм · нагрузка на ливневую</div></div>
|
||
</div>
|
||
<ul class="meta-list" style="margin-top:16px;">
|
||
<li><span class="l">Солнечных дней / год</span><span class="v">118</span></li>
|
||
<li><span class="l">Глубина промерзания</span><span class="v">1,8 м (фундамент свайно-плитный)</span></li>
|
||
<li><span class="l">Расчётная сейсмика</span><span class="v">5 баллов MSK · норма по СП 14.13330</span></li>
|
||
<li><span class="l">Уровень грунтовых вод</span><span class="v">−5,6 м (норма для свайного)</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// sidebar pane switching
|
||
const links = document.querySelectorAll('[data-pane]');
|
||
const panes = document.querySelectorAll('.pane');
|
||
links.forEach(a => {
|
||
a.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
const id = a.getAttribute('data-pane');
|
||
panes.forEach(p => p.classList.toggle('active', p.id === id));
|
||
document.querySelectorAll('.nav-link').forEach(n => n.classList.remove('active'));
|
||
const topNav = document.querySelector('.nav-link[data-pane="' + id + '"]');
|
||
if (topNav) topNav.classList.add('active');
|
||
// sub-link styling
|
||
document.querySelectorAll('.sub-list a').forEach(s => s.classList.remove('active'));
|
||
if (a.classList.contains('sub-list-anchor') || a.closest('.sub-list')) {
|
||
a.classList.add('active');
|
||
}
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|