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).
483 lines
30 KiB
HTML
483 lines
30 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 — Поиск участка · 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, body { height:100%; }
|
||
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; overflow:hidden; }
|
||
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); z-index:50; position:relative; }
|
||
.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; }
|
||
|
||
/* === main entry layout: map full + floating panel === */
|
||
.stage { position:relative; height:calc(100vh - 38px - 56px); background:#eef1f5; overflow:hidden; }
|
||
|
||
/* === map === */
|
||
.map { position:absolute; inset:0; }
|
||
.map svg { width:100%; height:100%; display:block; }
|
||
.map .grid line { stroke:#dde2ea; stroke-width:0.5; }
|
||
.map .water { fill:#cdd9e8; }
|
||
.map .road { fill:none; stroke:#fff; stroke-width:6; }
|
||
.map .road-edge { fill:none; stroke:#dde2ea; stroke-width:7.5; }
|
||
.map .road-minor { fill:none; stroke:#fff; stroke-width:3.5; }
|
||
.map .road-minor-edge { fill:none; stroke:#dde2ea; stroke-width:4.5; }
|
||
.map .district { fill:#fff; stroke:#dde2ea; stroke-width:0.6; }
|
||
.map .district-label { font-family:var(--font-body); font-size:11px; font-weight:600; fill:#5b6066; letter-spacing:0.04em; text-transform:uppercase; pointer-events:none; }
|
||
.map .parcel { stroke:#fff; stroke-width:1; cursor:pointer; transition:transform .12s, filter .12s; transform-origin:center; transform-box:fill-box; }
|
||
.map .parcel:hover { filter:brightness(0.92); }
|
||
.map .parcel.sel { stroke:#0F172A; stroke-width:2.5; filter:drop-shadow(0 4px 10px rgba(15,23,42,0.32)); }
|
||
.map .pin { cursor:pointer; }
|
||
.map .pin circle.dot { fill:var(--accent); stroke:#fff; stroke-width:3; }
|
||
.map .pin.sel circle.dot { fill:var(--accent-2); }
|
||
.map .pin.sel circle.halo { fill:none; stroke:var(--accent-2); stroke-width:2; opacity:0.5; }
|
||
|
||
/* === legend (bottom-left) === */
|
||
.legend { position:absolute; left:24px; bottom:24px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:10px; padding:14px 16px; box-shadow:0 4px 14px -8px rgba(15,23,42,0.18); min-width:240px; }
|
||
.legend h4 { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-secondary); font-weight:600; margin-bottom:8px; }
|
||
.legend ul { list-style:none; display:grid; gap:6px; }
|
||
.legend li { display:grid; grid-template-columns:14px 1fr auto; gap:8px; align-items:center; font-size:12.5px; color:var(--fg-secondary); }
|
||
.legend li i { display:inline-block; width:12px; height:12px; border-radius:3px; }
|
||
.legend li b { color:var(--fg-primary); font-weight:500; font-variant-numeric:tabular-nums; }
|
||
|
||
/* === scale/zoom (bottom-right) === */
|
||
.map-ctrl { position:absolute; right:24px; bottom:24px; display:flex; flex-direction:column; gap:8px; }
|
||
.map-ctrl button { width:36px; height:36px; border:1px solid var(--border-card); background:var(--bg-card); border-radius:8px; box-shadow:0 4px 14px -8px rgba(15,23,42,0.18); font-size:18px; color:var(--fg-secondary); display:grid; place-items:center; }
|
||
.map-ctrl button:hover { color:var(--fg-primary); border-color:var(--border-strong); }
|
||
.map-scale { position:absolute; right:80px; bottom:32px; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--fg-secondary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,0.85); padding:4px 8px; border-radius:4px; }
|
||
.map-scale i { width:60px; height:3px; background:var(--fg-primary); position:relative; }
|
||
.map-scale i::before, .map-scale i::after { content:''; position:absolute; width:1px; height:8px; background:var(--fg-primary); top:-2px; }
|
||
.map-scale i::before { left:0; }
|
||
.map-scale i::after { right:0; }
|
||
|
||
/* === floating entry panel (top-left) === */
|
||
.entry { position:absolute; left:24px; top:24px; width:380px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:14px; box-shadow:0 12px 36px -16px rgba(15,23,42,0.22); }
|
||
.entry-hd { padding:18px 20px 14px; border-bottom:1px solid var(--border-soft); }
|
||
.entry-hd .eyebrow { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-tertiary); font-weight:600; margin-bottom:6px; }
|
||
.entry-hd h1 { font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-0.01em; }
|
||
.entry-hd .or { color:var(--fg-secondary); font-weight:400; }
|
||
.entry-bd { padding:16px 20px; }
|
||
.input-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:stretch; }
|
||
.input { position:relative; }
|
||
.input input { width:100%; height:44px; padding:0 14px 0 38px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg-card); font:inherit; font-size:14px; color:var(--fg-primary); font-variant-numeric:tabular-nums; letter-spacing:0.01em; }
|
||
.input input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
|
||
.input::before { content:''; position:absolute; left:12px; top:50%; width:18px; height:18px; transform:translateY(-50%); background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2373767E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") center/contain no-repeat; }
|
||
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; padding:0 18px; border:0; border-radius:8px; 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; }
|
||
.btn-secondary:hover { filter:brightness(0.95); }
|
||
.btn-ghost { background:transparent; color:var(--fg-primary); border:1px solid var(--border-card); height:36px; padding:0 14px; font-size:12.5px; font-weight:500; }
|
||
.btn-ghost:hover { border-color:var(--border-strong); background:var(--bg-card-alt); }
|
||
|
||
.entry-help { display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:12px; color:var(--fg-secondary); line-height:1.5; }
|
||
.entry-help i { width:14px; height:14px; border-radius:50%; border:1px solid var(--border-strong); display:grid; place-items:center; font-size:10px; color:var(--fg-tertiary); flex:none; margin-top:1px; }
|
||
.entry-fmt { display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; padding:1px 6px; border-radius:4px; background:var(--bg-card-alt); border:1px solid var(--border-soft); color:var(--fg-primary); }
|
||
|
||
.entry-or { display:flex; align-items:center; gap:10px; margin:14px 0 6px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-tertiary); }
|
||
.entry-or::before, .entry-or::after { content:''; flex:1; height:1px; background:var(--border-soft); }
|
||
.entry-or span { font-weight:600; }
|
||
|
||
.entry-recent { padding:8px 20px 18px; }
|
||
.entry-recent h5 { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fg-secondary); font-weight:600; margin:6px 0 8px; }
|
||
.entry-recent ul { list-style:none; display:grid; gap:4px; }
|
||
.entry-recent li a { display:grid; grid-template-columns:1fr auto; gap:8px; padding:8px 10px; border-radius:6px; font-size:12.5px; color:var(--fg-primary); }
|
||
.entry-recent li a:hover { background:var(--bg-card-alt); }
|
||
.entry-recent li .meta { color:var(--fg-tertiary); font-size:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
|
||
.entry-recent .cad { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--accent); }
|
||
.entry-recent .desc { color:var(--fg-secondary); font-size:11.5px; margin-top:2px; }
|
||
|
||
/* === floating selected-parcel card (right side, appears when pin selected) === */
|
||
.sel-card { position:absolute; right:24px; top:24px; width:340px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:14px; box-shadow:0 12px 36px -16px rgba(15,23,42,0.22); overflow:hidden; }
|
||
.sel-hd { padding:14px 18px; background:var(--bg-headline); color:var(--fg-on-dark); }
|
||
.sel-hd .tag { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-2); font-weight:600; }
|
||
.sel-hd .cad { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:#fff; margin-top:4px; }
|
||
.sel-hd .verdict { font-size:12.5px; color:var(--fg-on-dark-muted); margin-top:6px; line-height:1.45; }
|
||
.sel-hd .verdict b { color:#fff; font-weight:600; }
|
||
.sel-body { padding:14px 18px; }
|
||
.sel-row { display:grid; grid-template-columns:1fr auto; gap:8px; padding:8px 0; border-top:1px solid var(--border-soft); font-size:12.5px; }
|
||
.sel-row:first-child { border-top:0; padding-top:0; }
|
||
.sel-row .l { color:var(--fg-secondary); }
|
||
.sel-row .v { color:var(--fg-primary); font-weight:500; font-variant-numeric:tabular-nums; }
|
||
.sel-row .v.good { color:var(--success); }
|
||
.sel-row .v.warn { color:var(--warn); }
|
||
.sel-foot { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 18px; background:var(--bg-card-alt); border-top:1px solid var(--border-soft); }
|
||
.sel-foot .btn { height:36px; font-size:12.5px; padding:0 12px; }
|
||
|
||
/* === bottom-center stats bar === */
|
||
.stats { position:absolute; left:50%; transform:translateX(-50%); top:24px; display:flex; gap:0; background:var(--bg-card); border:1px solid var(--border-card); border-radius:10px; box-shadow:0 4px 14px -8px rgba(15,23,42,0.18); overflow:hidden; }
|
||
.stats .s { padding:8px 16px; font-size:12px; color:var(--fg-secondary); border-right:1px solid var(--border-soft); display:flex; gap:6px; align-items:baseline; }
|
||
.stats .s:last-child { border-right:0; }
|
||
.stats .s b { color:var(--fg-primary); font-weight:600; font-variant-numeric:tabular-nums; }
|
||
.stats .s.live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--success); display:inline-block; margin-right:4px; animation:pulse 2s infinite; }
|
||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
|
||
|
||
/* === filters bar (top-center under stats, optional) === */
|
||
.filters { position:absolute; left:430px; right:380px; top:24px; display:flex; gap:8px; flex-wrap:wrap; }
|
||
.filters .chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:6px; font-size:12.5px; font-weight:500; color:var(--fg-secondary); background:var(--bg-card); border:1px solid var(--border-card); }
|
||
.filters .chip[aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-soft); }
|
||
.filters .chip .x { color:var(--fg-tertiary); font-size:14px; line-height:1; }
|
||
|
||
@media (max-width:1280px) {
|
||
.filters { left:430px; right:380px; }
|
||
}
|
||
@media (max-width:1180px) {
|
||
.filters { display:none; }
|
||
.stats { display:none; }
|
||
}
|
||
|
||
/* === tablet (≤1024px): keep map full, shrink panels === */
|
||
@media (max-width:1024px) {
|
||
.entry { width:340px; left:16px; top:16px; }
|
||
.sel-card { width:300px; right:16px; top:16px; }
|
||
.legend { left:16px; bottom:16px; min-width:200px; padding:12px 14px; }
|
||
.legend li { font-size:12px; }
|
||
.map-ctrl { right:16px; bottom:16px; }
|
||
.map-scale { right:64px; bottom:24px; }
|
||
.topbar nav.main { gap:14px; font-size:12.5px; }
|
||
}
|
||
|
||
/* === narrow tablet / large mobile (≤860px): stack map + panels === */
|
||
@media (max-width:860px) {
|
||
body { overflow:auto; }
|
||
.stage { height:auto; min-height:auto; overflow:visible; display:flex; flex-direction:column; }
|
||
.topbar-inner { padding:0 16px; height:52px; }
|
||
.topbar nav.main { display:none; }
|
||
.topbar-user .who { padding:5px 10px; font-size:12px; }
|
||
|
||
/* map becomes a fixed-aspect strip at top + a positioning context */
|
||
.map { position:relative; inset:auto; height:380px; border-bottom:1px solid var(--border-card); order:0; }
|
||
.map svg { height:100%; }
|
||
|
||
/* hide overlay controls on small screens — keep map clean */
|
||
.legend, .map-scale { display:none; }
|
||
/* zoom anchors to top-right of map area (map height 380px, .stage is relative) */
|
||
.map-ctrl { position:absolute; top:12px; right:12px; bottom:auto; flex-direction:column; gap:6px; z-index:10; }
|
||
.map-ctrl button { width:30px; height:30px; font-size:14px; }
|
||
|
||
/* entry panel moves below map, full-width */
|
||
.entry { position:relative; left:auto; top:auto; right:auto; width:auto; margin:16px; border-radius:12px; box-shadow:none; }
|
||
.entry-hd { padding:14px 16px 12px; }
|
||
.entry-hd h1 { font-size:16px; }
|
||
.entry-hd h1 br { display:none; }
|
||
.entry-hd .or { display:block; font-size:13px; color:var(--fg-tertiary); margin-top:2px; }
|
||
.entry-bd { padding:12px 16px; }
|
||
.input-row { grid-template-columns:1fr; }
|
||
.input input { height:42px; }
|
||
.btn { height:42px; }
|
||
.entry-help { font-size:11.5px; }
|
||
.entry-recent { padding:6px 16px 14px; }
|
||
.entry-recent li a { grid-template-columns:1fr; gap:2px; padding:8px 10px; }
|
||
.entry-recent li .meta { font-size:10.5px; }
|
||
|
||
/* sel-card moves below entry */
|
||
.sel-card { position:relative; right:auto; top:auto; width:auto; margin:0 16px 16px; box-shadow:none; }
|
||
.sel-hd { padding:12px 16px; }
|
||
.sel-body { padding:12px 16px; }
|
||
.sel-foot { padding:10px 16px; }
|
||
}
|
||
|
||
/* === phone (≤520px): compact further === */
|
||
@media (max-width:520px) {
|
||
.dev-nav { gap:10px; padding:0 10px; }
|
||
.dev-nav .dev-label { font-size:10.5px; }
|
||
.dev-nav .dev-hint { display:none; }
|
||
.topbar-inner { padding:0 12px; }
|
||
.brand { font-size:14px; }
|
||
.map { height:280px; }
|
||
.map-ctrl { top:8px; right:8px; }
|
||
.entry { margin:12px; }
|
||
.sel-card { margin:0 12px 12px; }
|
||
.sel-foot { grid-template-columns:1fr; }
|
||
.topbar-user .who .avatar { display:none; }
|
||
}
|
||
</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" aria-current="page">/site-finder</a>
|
||
<a href="site-finder-analysis.html">/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>
|
||
|
||
<main class="stage">
|
||
|
||
<!-- ============ MAP ============ -->
|
||
<div class="map">
|
||
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-label="Карта Екатеринбурга">
|
||
<defs>
|
||
<pattern id="bgGrid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||
<line x1="0" y1="0" x2="40" y2="0" />
|
||
<line x1="0" y1="0" x2="0" y2="40" />
|
||
</pattern>
|
||
</defs>
|
||
<rect width="1600" height="900" fill="#f0f2f5" />
|
||
<g class="grid">
|
||
<rect width="1600" height="900" fill="url(#bgGrid)" stroke="none" />
|
||
</g>
|
||
|
||
<!-- districts (simplified Ekaterinburg polygons) -->
|
||
<g>
|
||
<path class="district" d="M120,180 L380,140 L500,260 L420,420 L200,440 Z" />
|
||
<path class="district" d="M500,260 L760,180 L900,300 L820,500 L600,520 L420,420 Z" />
|
||
<path class="district" d="M760,180 L1020,160 L1180,300 L1080,420 L900,300 Z" />
|
||
<path class="district" d="M1180,300 L1400,260 L1480,440 L1380,580 L1180,560 L1080,420 Z" />
|
||
<path class="district" d="M900,300 L1080,420 L1180,560 L1020,640 L820,620 L820,500 Z" />
|
||
<path class="district" d="M420,420 L600,520 L820,500 L820,620 L640,720 L420,700 L300,580 L200,440 Z" />
|
||
<path class="district" d="M820,620 L1020,640 L1180,560 L1380,580 L1340,760 L1140,780 L920,800 L640,720 Z" />
|
||
<text class="district-label" x="280" y="320" text-anchor="middle">Верх-Исетский</text>
|
||
<text class="district-label" x="660" y="380" text-anchor="middle">Ленинский</text>
|
||
<text class="district-label" x="940" y="240" text-anchor="middle">Кировский</text>
|
||
<text class="district-label" x="1280" y="380" text-anchor="middle">Орджоникидзевский</text>
|
||
<text class="district-label" x="920" y="560" text-anchor="middle">Октябрьский</text>
|
||
<text class="district-label" x="440" y="600" text-anchor="middle">Чкаловский</text>
|
||
<text class="district-label" x="1020" y="730" text-anchor="middle">Академический</text>
|
||
</g>
|
||
|
||
<!-- water (Iset river) -->
|
||
<path class="water" d="M540,40 C 580,180 720,300 700,440 C 680,580 760,680 740,820 L780,840 C 820,700 720,580 760,440 C 800,300 660,180 600,40 Z" opacity="0.85" />
|
||
<path class="water" d="M260,520 C 360,540 420,580 480,640 L460,680 C 380,620 300,580 240,560 Z" opacity="0.7" />
|
||
|
||
<!-- roads (major) -->
|
||
<g>
|
||
<path class="road-edge" d="M40,440 L1560,460" />
|
||
<path class="road" d="M40,440 L1560,460" />
|
||
<path class="road-edge" d="M820,40 L820,860" />
|
||
<path class="road" d="M820,40 L820,860" />
|
||
<path class="road-edge" d="M180,140 L1380,820" />
|
||
<path class="road" d="M180,140 L1380,820" />
|
||
</g>
|
||
<!-- roads (minor) -->
|
||
<g>
|
||
<path class="road-minor-edge" d="M120,300 L1480,340" />
|
||
<path class="road-minor" d="M120,300 L1480,340" />
|
||
<path class="road-minor-edge" d="M120,620 L1480,640" />
|
||
<path class="road-minor" d="M120,620 L1480,640" />
|
||
<path class="road-minor-edge" d="M460,40 L500,860" />
|
||
<path class="road-minor" d="M460,40 L500,860" />
|
||
<path class="road-minor-edge" d="M1180,40 L1180,860" />
|
||
<path class="road-minor" d="M1180,40 L1180,860" />
|
||
</g>
|
||
|
||
<!-- parcels (clickable polygons) -->
|
||
<g>
|
||
<!-- vacant lots -->
|
||
<polygon class="parcel" fill="#DCFCE7" points="240,360 320,360 320,420 240,420" data-cad="66:41:0501012:18" />
|
||
<polygon class="parcel" fill="#DBEAFE" points="640,290 720,290 720,350 640,350" data-cad="66:41:0701102:7" />
|
||
<polygon class="parcel" fill="#FEF3C7" points="1100,330 1180,330 1180,400 1100,400" data-cad="66:41:0301045:11" />
|
||
<polygon class="parcel" fill="#DBEAFE" points="980,560 1060,560 1060,620 980,620" data-cad="66:41:0801009:3" />
|
||
<polygon class="parcel sel" fill="#DCFCE7" points="940,680 1080,680 1080,760 940,760" data-cad="66:41:0701045:42" data-selected="true" />
|
||
<polygon class="parcel" fill="#FEE2E2" points="520,560 600,560 600,620 520,620" data-cad="66:41:0601023:9" />
|
||
<polygon class="parcel" fill="#FEF3C7" points="1280,500 1360,500 1360,570 1280,570" data-cad="66:41:0901014:5" />
|
||
<polygon class="parcel" fill="#DBEAFE" points="380,260 460,260 460,320 380,320" data-cad="66:41:0501007:2" />
|
||
</g>
|
||
|
||
<!-- pin for selected (Akademicheskij district) -->
|
||
<g class="pin sel" transform="translate(1010,720)">
|
||
<circle class="halo" r="22"></circle>
|
||
<circle class="dot" r="9"></circle>
|
||
</g>
|
||
|
||
<!-- other developer/competitor markers (faint) -->
|
||
<g fill="#94A3B8" opacity="0.55">
|
||
<circle cx="280" cy="380" r="4"></circle>
|
||
<circle cx="680" cy="320" r="4"></circle>
|
||
<circle cx="1140" cy="370" r="4"></circle>
|
||
<circle cx="1020" cy="600" r="4"></circle>
|
||
<circle cx="560" cy="600" r="4"></circle>
|
||
<circle cx="1320" cy="540" r="4"></circle>
|
||
<circle cx="420" cy="290" r="4"></circle>
|
||
<circle cx="900" cy="450" r="4"></circle>
|
||
<circle cx="760" cy="680" r="4"></circle>
|
||
<circle cx="1240" cy="700" r="4"></circle>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- ============ ENTRY PANEL (left) ============ -->
|
||
<section class="entry">
|
||
<header class="entry-hd">
|
||
<div class="eyebrow">site finder</div>
|
||
<h1>Введите номер участка<br><span class="or">или кликните на карту →</span></h1>
|
||
</header>
|
||
<div class="entry-bd">
|
||
<form class="input-row" onsubmit="event.preventDefault();window.location='site-finder-analysis.html'">
|
||
<div class="input">
|
||
<input type="text" placeholder="66:41:0701045:42" autocomplete="off" value="66:41:0701045:42" />
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Анализ →</button>
|
||
</form>
|
||
<p class="entry-help">
|
||
<i>i</i>
|
||
Кадастровый номер из ЕГРН в формате <span class="entry-fmt">XX:XX:XXXXXXX:NN</span>. Поддерживаем Свердловскую область, Челябинскую, Тюменскую.
|
||
</p>
|
||
<div class="entry-or"><span>или</span></div>
|
||
<button type="button" class="btn btn-ghost" style="width:100%; justify-content:center;">↗ Загрузить выписку ЕГРН (PDF)</button>
|
||
</div>
|
||
<div class="entry-recent">
|
||
<h5>Недавние участки</h5>
|
||
<ul>
|
||
<li><a href="site-finder-analysis.html">
|
||
<span><span class="cad">66:41:0701045:42</span> <span class="desc">· Академический, 0,82 га · собств. ООО «УралЗем»</span></span>
|
||
<span class="meta">сегодня</span>
|
||
</a></li>
|
||
<li><a href="site-finder-analysis.html">
|
||
<span><span class="cad">66:41:0301045:11</span> <span class="desc">· Кировский, 1,40 га · муниципальная</span></span>
|
||
<span class="meta">вчера</span>
|
||
</a></li>
|
||
<li><a href="site-finder-analysis.html">
|
||
<span><span class="cad">66:41:0801009:3</span> <span class="desc">· Октябрьский, 0,54 га · частная</span></span>
|
||
<span class="meta">3 дня</span>
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FILTERS BAR (top) ============ -->
|
||
<div class="filters">
|
||
<button class="chip" aria-pressed="true">Свободные участки <span class="x">×</span></button>
|
||
<button class="chip" aria-pressed="true">от 0,3 га <span class="x">×</span></button>
|
||
<button class="chip">+ ВРИ многоэтажка</button>
|
||
<button class="chip">+ собственность</button>
|
||
<button class="chip">+ район</button>
|
||
</div>
|
||
|
||
<!-- ============ STATS (top-center) ============ -->
|
||
<div class="stats">
|
||
<div class="s">показано <b>148</b> участков</div>
|
||
<div class="s">подходят <b>34</b></div>
|
||
<div class="s live">обновлено <b>16 мин назад</b></div>
|
||
</div>
|
||
|
||
<!-- ============ SELECTED PARCEL CARD (right) ============ -->
|
||
<aside class="sel-card" aria-label="Выбранный участок">
|
||
<header class="sel-hd">
|
||
<div class="tag">подходит под комфорт-класс</div>
|
||
<div class="cad">66:41:0701045:42</div>
|
||
<p class="verdict">Академический район · <b>0,82 га</b> · собственность ООО «УралЗем». Score <b>78/100</b>. Окно дефицита 80+ м².</p>
|
||
</header>
|
||
<div class="sel-body">
|
||
<div class="sel-row"><span class="l">Район</span><span class="v">Академический</span></div>
|
||
<div class="sel-row"><span class="l">Площадь</span><span class="v">0,82 га</span></div>
|
||
<div class="sel-row"><span class="l">Форма собственности</span><span class="v">Частная</span></div>
|
||
<div class="sel-row"><span class="l">Текущий ВРИ</span><span class="v">Многоэтажная застройка</span></div>
|
||
<div class="sel-row"><span class="l">Медиана цены, район</span><span class="v">186 тыс ₽/м²</span></div>
|
||
<div class="sel-row"><span class="l">Sold % соседей</span><span class="v good">62%</span></div>
|
||
<div class="sel-row"><span class="l">Конкуренция в радиусе 1 км</span><span class="v warn">7 ЖК</span></div>
|
||
</div>
|
||
<div class="sel-foot">
|
||
<button type="button" class="btn btn-ghost">↗ Карточка ЕГРН</button>
|
||
<a href="site-finder-analysis.html" class="btn btn-primary">Анализ →</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ============ LEGEND (bottom-left) ============ -->
|
||
<div class="legend">
|
||
<h4>Раскраска участков</h4>
|
||
<ul>
|
||
<li><i style="background:#DCFCE7;"></i><span>свободные, score > 70</span><b>34</b></li>
|
||
<li><i style="background:#DBEAFE;"></i><span>в работе, нужен анализ</span><b>62</b></li>
|
||
<li><i style="background:#FEF3C7;"></i><span>обременения / спорный ВРИ</span><b>38</b></li>
|
||
<li><i style="background:#FEE2E2;"></i><span>не подходит</span><b>14</b></li>
|
||
<li><i style="background:#94A3B8;border-radius:50%;"></i><span>конкуренты (ЖК в продаже)</span><b>74</b></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ============ MAP CONTROLS (bottom-right) ============ -->
|
||
<div class="map-scale"><i></i> 2 км</div>
|
||
<div class="map-ctrl">
|
||
<button type="button" aria-label="Слои">⊞</button>
|
||
<button type="button" aria-label="Увеличить">＋</button>
|
||
<button type="button" aria-label="Уменьшить">－</button>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<script>
|
||
// simple parcel click: select + navigate-ish
|
||
document.querySelectorAll('.parcel').forEach(p => {
|
||
p.addEventListener('click', () => {
|
||
document.querySelectorAll('.parcel').forEach(x => x.classList.remove('sel'));
|
||
p.classList.add('sel');
|
||
// for demo: update cadastral in input + selected card
|
||
const cad = p.getAttribute('data-cad');
|
||
const inp = document.querySelector('.input input');
|
||
if (inp) inp.value = cad;
|
||
const sel = document.querySelector('.sel-hd .cad');
|
||
if (sel) sel.textContent = cad;
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|