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).
2051 lines
83 KiB
HTML
2051 lines
83 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Trade-In · PRINZIP — Оценка квартиры</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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
/* surface */
|
||
--bg: oklch(99% 0.002 240);
|
||
--surface: oklch(100% 0 0);
|
||
--surface-2: oklch(97.5% 0.004 240);
|
||
--surface-3: oklch(96% 0.006 240);
|
||
/* ink */
|
||
--fg: oklch(18% 0.012 250);
|
||
--fg-2: oklch(32% 0.014 250);
|
||
--muted: oklch(50% 0.012 250);
|
||
--muted-2: oklch(62% 0.010 250);
|
||
/* lines */
|
||
--border: oklch(92% 0.005 250);
|
||
--border-2: oklch(88% 0.006 250);
|
||
--border-strong: oklch(80% 0.008 250);
|
||
/* accents */
|
||
--accent: oklch(54% 0.18 258);
|
||
--accent-ink: oklch(36% 0.16 258);
|
||
--accent-soft: oklch(96% 0.03 258);
|
||
--accent-2: oklch(64% 0.17 50); /* orange — warn / secondary */
|
||
--accent-2-soft: oklch(96% 0.05 70);
|
||
--success: oklch(56% 0.14 150);
|
||
--success-soft: oklch(96% 0.04 150);
|
||
--danger: oklch(56% 0.20 25);
|
||
--danger-soft: oklch(96% 0.04 25);
|
||
/* viz palette (price bars / sources) */
|
||
--viz-1: oklch(56% 0.16 258);
|
||
--viz-2: oklch(60% 0.16 200);
|
||
--viz-3: oklch(64% 0.15 150);
|
||
--viz-4: oklch(70% 0.15 80);
|
||
--viz-5: oklch(66% 0.17 30);
|
||
/* type */
|
||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
/* layout */
|
||
--radius: 10px;
|
||
--radius-sm: 6px;
|
||
--radius-lg: 14px;
|
||
--shadow-sm: 0 1px 2px rgba(16,24,40,.04);
|
||
--shadow-md: 0 4px 18px -6px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.04);
|
||
--container: 1320px;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
html { -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font: 15px/1.55 var(--font-sans);
|
||
font-feature-settings: 'cv11', 'ss03';
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||
[data-tnum] { font-variant-numeric: tabular-nums; }
|
||
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.012em; color: var(--fg); }
|
||
p { margin: 0; }
|
||
a { color: var(--accent); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
/* ============================================================
|
||
HEADER (white-label — PRINZIP wordmark slot)
|
||
============================================================ */
|
||
.topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
background: color-mix(in oklch, var(--surface) 92%, transparent);
|
||
backdrop-filter: saturate(140%) blur(12px);
|
||
-webkit-backdrop-filter: saturate(140%) blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.topbar-inner {
|
||
max-width: var(--container);
|
||
margin: 0 auto;
|
||
padding: 12px 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28px;
|
||
}
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
font-size: 13px;
|
||
color: var(--fg);
|
||
}
|
||
.brand-mark {
|
||
width: 28px; height: 28px;
|
||
background: var(--fg);
|
||
color: var(--surface);
|
||
border-radius: 6px;
|
||
display: grid; place-items: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
.brand-name { letter-spacing: 0.22em; }
|
||
.brand-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
|
||
.brand-product {
|
||
font-weight: 500;
|
||
letter-spacing: 0.04em;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
}
|
||
.top-nav {
|
||
display: flex;
|
||
gap: 22px;
|
||
margin-left: auto;
|
||
align-items: center;
|
||
}
|
||
.top-nav a {
|
||
color: var(--fg-2);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
.top-nav a.is-active { color: var(--fg); }
|
||
.top-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 7px 12px;
|
||
border: 1px solid var(--border-2);
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--fg);
|
||
background: var(--surface);
|
||
}
|
||
.top-user {
|
||
width: 30px; height: 30px;
|
||
border-radius: 50%;
|
||
background: var(--surface-3);
|
||
border: 1px solid var(--border);
|
||
display: grid; place-items: center;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--fg-2);
|
||
}
|
||
|
||
/* ============================================================
|
||
PAGE HEAD
|
||
============================================================ */
|
||
.page {
|
||
max-width: var(--container);
|
||
margin: 0 auto;
|
||
padding: 28px 28px 96px;
|
||
}
|
||
.crumbs {
|
||
display: flex; align-items: center; gap: 8px;
|
||
color: var(--muted-2);
|
||
font-size: 12px;
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 14px;
|
||
}
|
||
.crumbs span { color: var(--muted); }
|
||
.crumbs em { font-style: normal; color: var(--fg-2); }
|
||
.page-title {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.page-title h1 {
|
||
font-size: 30px;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.page-meta {
|
||
display: inline-flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pill {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--border-2);
|
||
background: var(--surface);
|
||
font-size: 12px;
|
||
color: var(--fg-2);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
|
||
.pill .dot.danger { background: var(--danger); }
|
||
.pill .dot.warn { background: var(--accent-2); }
|
||
.pill .dot.muted { background: var(--muted-2); }
|
||
.pill .mono { font-size: 11px; }
|
||
.page-subtitle {
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
max-width: 720px;
|
||
}
|
||
|
||
/* ============================================================
|
||
MAIN GRID (sticky form / result column)
|
||
============================================================ */
|
||
.layout {
|
||
display: grid;
|
||
grid-template-columns: 360px 1fr;
|
||
gap: 40px;
|
||
margin-top: 28px;
|
||
align-items: start;
|
||
}
|
||
|
||
/* ---- form ---- */
|
||
.form-card {
|
||
position: sticky;
|
||
top: 84px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
max-height: calc(100vh - 104px);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.form-head {
|
||
padding: 16px 18px;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex; align-items: center; gap: 12px;
|
||
}
|
||
.form-head h2 {
|
||
font-size: 14px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.form-head .form-step {
|
||
margin-left: auto;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.form-body {
|
||
padding: 16px 18px 8px;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
.field { margin-bottom: 12px; }
|
||
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||
.field-row.triple { grid-template-columns: 1fr 1fr 1fr; }
|
||
label.field-label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
font-size: 12px;
|
||
color: var(--fg-2);
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
}
|
||
label.field-label .req { color: var(--accent-2); font-size: 11px; }
|
||
label.field-label .hint { color: var(--muted-2); font-size: 11px; font-weight: 400; }
|
||
.control {
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--border-2);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--surface);
|
||
color: var(--fg);
|
||
font: 13px/1.4 var(--font-sans);
|
||
transition: border-color .12s, box-shadow .12s, background .12s;
|
||
}
|
||
.control:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
|
||
}
|
||
.control[readonly] { background: var(--surface-2); color: var(--fg-2); }
|
||
.control-with-icon { position: relative; }
|
||
.control-with-icon .control { padding-left: 32px; }
|
||
.control-with-icon .icon {
|
||
position: absolute;
|
||
left: 9px; top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 16px; height: 16px;
|
||
color: var(--muted-2);
|
||
pointer-events: none;
|
||
}
|
||
.control-with-suffix { position: relative; }
|
||
.control-with-suffix .suffix {
|
||
position: absolute;
|
||
right: 12px; top: 50%;
|
||
transform: translateY(-50%);
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
pointer-events: none;
|
||
}
|
||
select.control {
|
||
appearance: none;
|
||
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
|
||
background-position: calc(100% - 14px) center, calc(100% - 10px) center;
|
||
background-size: 4px 4px, 4px 4px;
|
||
background-repeat: no-repeat;
|
||
padding-right: 26px;
|
||
}
|
||
.autocomplete {
|
||
position: relative;
|
||
}
|
||
.ac-list {
|
||
position: absolute;
|
||
top: calc(100% + 4px);
|
||
left: 0; right: 0;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-2);
|
||
border-radius: var(--radius-sm);
|
||
box-shadow: var(--shadow-md);
|
||
z-index: 10;
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
display: none;
|
||
}
|
||
.ac-list.is-open { display: block; }
|
||
.ac-item {
|
||
padding: 8px 10px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
display: flex; gap: 8px;
|
||
align-items: baseline;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.ac-item:last-child { border-bottom: 0; }
|
||
.ac-item:hover, .ac-item.is-focus { background: var(--accent-soft); }
|
||
.ac-item .ac-main { color: var(--fg); }
|
||
.ac-item .ac-sub { color: var(--muted); font-size: 11px; margin-left: auto; font-family: var(--font-mono); }
|
||
.file-drop {
|
||
border: 1px dashed var(--border-strong);
|
||
border-radius: var(--radius-sm);
|
||
padding: 14px 12px;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
background: var(--surface-2);
|
||
}
|
||
.file-drop b { color: var(--fg-2); font-weight: 500; }
|
||
.form-foot {
|
||
padding: 12px 18px 16px;
|
||
border-top: 1px solid var(--border);
|
||
background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--surface-2) 60%, transparent) 40%);
|
||
}
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
font: 500 13px/1 var(--font-sans);
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
transition: background .12s, transform .04s, box-shadow .12s;
|
||
}
|
||
.btn:active { transform: translateY(1px); }
|
||
.btn-primary {
|
||
width: 100%;
|
||
background: var(--fg);
|
||
color: var(--surface);
|
||
padding: 12px 14px;
|
||
font-weight: 600;
|
||
}
|
||
.btn-primary:hover { background: oklch(28% 0.018 250); }
|
||
.btn-accent {
|
||
background: var(--accent);
|
||
color: var(--surface);
|
||
}
|
||
.btn-accent:hover { background: var(--accent-ink); }
|
||
.btn-ghost {
|
||
background: var(--surface);
|
||
color: var(--fg);
|
||
border-color: var(--border-2);
|
||
}
|
||
.btn-ghost:hover { background: var(--surface-2); }
|
||
.form-foot-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 8px;
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
}
|
||
.form-foot-meta .mono { font-size: 11px; }
|
||
.form-foot-meta .ok { color: var(--success); }
|
||
|
||
/* ============================================================
|
||
RESULT COLUMN — shared
|
||
============================================================ */
|
||
.result-col { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
overflow: hidden;
|
||
}
|
||
.card-head {
|
||
padding: 18px 22px 14px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.section-kicker {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.16em;
|
||
color: var(--muted-2);
|
||
text-transform: uppercase;
|
||
margin-bottom: 4px;
|
||
}
|
||
.card-head h2 {
|
||
font-size: 19px;
|
||
letter-spacing: -0.012em;
|
||
}
|
||
.card-head .card-meta {
|
||
text-align: right;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
.card-head .card-meta b { color: var(--fg); font-weight: 600; }
|
||
.card-body { padding: 22px; }
|
||
.card-foot { padding: 12px 22px; background: var(--surface-2); border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
|
||
|
||
/* ============================================================
|
||
PROGRESS BLOCK
|
||
============================================================ */
|
||
.progress-card { background: var(--surface); }
|
||
.progress-summary {
|
||
display: flex;
|
||
gap: 22px;
|
||
align-items: baseline;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 16px;
|
||
}
|
||
.progress-summary .lead {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
.progress-summary .num-done {
|
||
font-family: var(--font-mono);
|
||
font-size: 22px;
|
||
font-weight: 500;
|
||
color: var(--fg);
|
||
}
|
||
.progress-summary .num-done .total { color: var(--muted-2); font-weight: 400; }
|
||
.progress-overall {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
height: 4px;
|
||
background: var(--surface-3);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.progress-overall .bar {
|
||
height: 100%;
|
||
width: 64%;
|
||
background: linear-gradient(90deg, var(--accent) 0%, var(--viz-3) 100%);
|
||
transition: width .3s ease;
|
||
}
|
||
.progress-eta {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.06em;
|
||
color: var(--muted-2);
|
||
}
|
||
.progress-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 0 28px;
|
||
}
|
||
.progress-row {
|
||
display: grid;
|
||
grid-template-columns: 18px 110px 1fr auto;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 9px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 13px;
|
||
}
|
||
.progress-row:last-child, .progress-row:nth-last-child(2) { border-bottom: 0; }
|
||
.progress-row .status-icon {
|
||
width: 16px; height: 16px;
|
||
display: grid; place-items: center;
|
||
}
|
||
.status-icon.done { color: var(--success); }
|
||
.status-icon.loading { color: var(--accent); animation: spin 1.1s linear infinite; }
|
||
.status-icon.error { color: var(--danger); }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.progress-row .src-name {
|
||
color: var(--fg);
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.progress-row .src-bar {
|
||
height: 4px;
|
||
background: var(--surface-3);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.progress-row .src-bar > i {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: var(--p, 100%);
|
||
background: var(--accent);
|
||
transition: width .3s ease;
|
||
}
|
||
.progress-row.is-loading .src-bar > i { background: linear-gradient(90deg, var(--accent), transparent); }
|
||
.progress-row.is-error .src-bar > i { background: var(--danger-soft); }
|
||
.progress-row .src-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
letter-spacing: -0.01em;
|
||
white-space: nowrap;
|
||
}
|
||
.progress-row .src-value b { color: var(--fg); font-weight: 500; }
|
||
|
||
/* ============================================================
|
||
HERO (Section 1)
|
||
============================================================ */
|
||
.hero-card .card-body { padding: 0; }
|
||
.hero-top {
|
||
display: grid;
|
||
grid-template-columns: 320px 1fr;
|
||
gap: 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.hero-photo {
|
||
aspect-ratio: 4/3;
|
||
position: relative;
|
||
background: linear-gradient(135deg, oklch(85% 0.02 250), oklch(78% 0.025 240));
|
||
overflow: hidden;
|
||
}
|
||
.hero-photo .photo-meta {
|
||
position: absolute;
|
||
bottom: 10px; left: 12px;
|
||
display: inline-flex; gap: 6px;
|
||
padding: 4px 8px;
|
||
background: rgba(20, 22, 30, 0.7);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: 4px;
|
||
color: rgba(255,255,255,.9);
|
||
font: 500 10px/1 var(--font-mono);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
/* placeholder window/blocks pattern to suggest a building photo */
|
||
.hero-photo::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(180deg, transparent 55%, rgba(8,12,20,.55) 100%),
|
||
repeating-linear-gradient(
|
||
0deg,
|
||
oklch(82% 0.018 250) 0 14px,
|
||
oklch(76% 0.020 250) 14px 18px
|
||
),
|
||
repeating-linear-gradient(
|
||
90deg,
|
||
transparent 0 22px,
|
||
rgba(255,255,255,.10) 22px 24px,
|
||
transparent 24px 36px
|
||
);
|
||
background-blend-mode: normal, multiply, normal;
|
||
}
|
||
.hero-photo::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 30% 18% 6% 18%;
|
||
background:
|
||
repeating-linear-gradient(90deg, oklch(80% 0.02 250) 0 24px, oklch(74% 0.02 250) 24px 28px),
|
||
repeating-linear-gradient(0deg, transparent 0 20px, rgba(255,255,255,.18) 20px 22px);
|
||
border-top: 1px solid rgba(255,255,255,.2);
|
||
border-left: 1px solid rgba(255,255,255,.2);
|
||
}
|
||
.hero-meta {
|
||
padding: 20px 22px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.hero-address {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.012em;
|
||
margin-bottom: 4px;
|
||
}
|
||
.hero-cad {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 12px;
|
||
}
|
||
.meta-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px 20px;
|
||
margin-top: 4px;
|
||
}
|
||
.meta-grid .meta-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
font-size: 13px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px dashed var(--border-2);
|
||
}
|
||
.meta-grid .meta-row .k { color: var(--muted); }
|
||
.meta-grid .meta-row .v { color: var(--fg); font-weight: 500; }
|
||
.meta-grid .meta-row .v.mono { font-family: var(--font-mono); }
|
||
|
||
.hero-bars {
|
||
padding: 18px 22px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 22px;
|
||
}
|
||
.bar-block .bar-head {
|
||
display: flex; justify-content: space-between; align-items: baseline;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
letter-spacing: 0.02em;
|
||
margin-bottom: 8px;
|
||
}
|
||
.bar-block .bar-head .bar-title { color: var(--fg-2); font-weight: 500; }
|
||
.bar-block .bar-head .bar-cv { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }
|
||
|
||
.pricebar {
|
||
position: relative;
|
||
height: 56px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.pricebar .axis {
|
||
position: absolute;
|
||
left: 0; right: 0; top: 22px;
|
||
height: 6px;
|
||
background: var(--surface-3);
|
||
border-radius: 3px;
|
||
}
|
||
.pricebar .axis .range {
|
||
position: absolute;
|
||
top: 0; bottom: 0;
|
||
background: linear-gradient(90deg, var(--viz-1), var(--viz-2));
|
||
border-radius: 3px;
|
||
}
|
||
.pricebar .axis .median {
|
||
position: absolute;
|
||
top: -3px; bottom: -3px;
|
||
width: 2px;
|
||
background: var(--fg);
|
||
}
|
||
.pricebar .endpoint {
|
||
position: absolute;
|
||
top: 0;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.pricebar .endpoint .endpoint-val {
|
||
font: 600 13px/1 var(--font-mono);
|
||
color: var(--fg);
|
||
white-space: nowrap;
|
||
}
|
||
.pricebar .endpoint .endpoint-tick {
|
||
width: 1px;
|
||
height: 14px;
|
||
background: var(--border-strong);
|
||
margin-top: 4px;
|
||
}
|
||
.pricebar .median-label {
|
||
position: absolute;
|
||
bottom: 0;
|
||
transform: translateX(-50%);
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--fg-2);
|
||
padding: 2px 6px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-2);
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
.pricebar .exp {
|
||
position: absolute;
|
||
top: 36px;
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
color: var(--muted-2);
|
||
letter-spacing: 0.04em;
|
||
white-space: nowrap;
|
||
}
|
||
.pricebar .exp.left { left: 0; }
|
||
.pricebar .exp.right { right: 0; }
|
||
|
||
.hero-warnings {
|
||
padding: 18px 22px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.warn-row {
|
||
display: grid;
|
||
grid-template-columns: 22px 1fr;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
font-size: 13px;
|
||
color: var(--fg-2);
|
||
line-height: 1.5;
|
||
}
|
||
.warn-row .ic {
|
||
width: 22px; height: 22px;
|
||
border-radius: 50%;
|
||
background: var(--accent-2-soft);
|
||
color: var(--accent-2);
|
||
display: grid; place-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
FILTER + SOURCE chips
|
||
============================================================ */
|
||
.filters {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.chip {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 4px 9px;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
color: var(--fg-2);
|
||
}
|
||
.chip .k { color: var(--muted); font-size: 11px; }
|
||
.chip .v { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
|
||
|
||
.sources {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.source-chip {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 4px 10px 4px 8px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
color: var(--fg-2);
|
||
font-weight: 500;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.source-chip.is-error { color: var(--muted-2); }
|
||
.source-chip .src-dot {
|
||
width: 8px; height: 8px;
|
||
border-radius: 2px;
|
||
}
|
||
.source-chip .src-dot.cian { background: var(--viz-3); }
|
||
.source-chip .src-dot.avito { background: var(--viz-5); }
|
||
.source-chip .src-dot.dom { background: var(--viz-1); }
|
||
.source-chip .src-dot.yandex { background: var(--viz-4); }
|
||
.source-chip .src-dot.rosreestr { background: var(--fg); }
|
||
.source-chip .src-dot.etagi { background: var(--viz-2); }
|
||
.source-chip .src-dot.restate { background: var(--viz-2); }
|
||
.source-chip .src-dot.n1 { background: var(--muted-2); }
|
||
.source-chip .src-dot.domrf { background: var(--accent-2); }
|
||
|
||
/* ============================================================
|
||
LISTINGS / DEALS Section (2 & 3) — count strip + filters + bar + table
|
||
============================================================ */
|
||
.count-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 22px;
|
||
padding: 16px 22px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--surface-2);
|
||
}
|
||
.count-cell .label {
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 4px;
|
||
}
|
||
.count-cell .value {
|
||
font-family: var(--font-mono);
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: var(--fg);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.count-cell .value .unit {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
margin-left: 4px;
|
||
font-weight: 400;
|
||
}
|
||
.count-cell .sub {
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.filters-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 14px 22px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.filters-row .lbl {
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.pricebar-block {
|
||
padding: 18px 22px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
table.dt {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
table.dt thead th {
|
||
text-align: left;
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
font-weight: 500;
|
||
padding: 12px 18px;
|
||
background: var(--surface-2);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
table.dt thead th.num,
|
||
table.dt tbody td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||
table.dt tbody td {
|
||
padding: 13px 18px;
|
||
border-bottom: 1px solid var(--border);
|
||
vertical-align: middle;
|
||
color: var(--fg);
|
||
}
|
||
table.dt tbody tr:last-child td { border-bottom: 0; }
|
||
table.dt tbody td .addr {
|
||
display: flex; flex-direction: column; gap: 2px;
|
||
}
|
||
table.dt tbody td .addr .a-main { color: var(--fg); font-weight: 500; }
|
||
table.dt tbody td .addr .a-sub { color: var(--muted); font-size: 11px; font-family: var(--font-mono); }
|
||
table.dt tbody td .src-mini {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 2px 6px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
}
|
||
table.dt tbody td .src-mini .src-dot { width: 6px; height: 6px; border-radius: 1.5px; }
|
||
table.dt .row-link {
|
||
display: inline-flex;
|
||
width: 22px; height: 22px;
|
||
align-items: center; justify-content: center;
|
||
color: var(--muted-2);
|
||
border-radius: 4px;
|
||
}
|
||
table.dt .row-link:hover { background: var(--surface-2); color: var(--accent); }
|
||
|
||
.table-foot {
|
||
padding: 12px 22px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
background: var(--surface-2);
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.table-foot a { font-family: var(--font-mono); font-size: 12px; }
|
||
|
||
/* warning banner */
|
||
.warn-banner {
|
||
display: grid;
|
||
grid-template-columns: 22px 1fr;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
padding: 14px 22px;
|
||
background: var(--accent-2-soft);
|
||
border-top: 1px solid color-mix(in oklch, var(--accent-2) 25%, var(--border));
|
||
font-size: 13px;
|
||
color: var(--fg-2);
|
||
line-height: 1.5;
|
||
}
|
||
.warn-banner .ic {
|
||
width: 22px; height: 22px;
|
||
border-radius: 50%;
|
||
background: color-mix(in oklch, var(--accent-2) 25%, var(--surface));
|
||
color: var(--accent-2);
|
||
display: grid; place-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.warn-banner b { color: var(--fg); font-weight: 600; }
|
||
|
||
/* ============================================================
|
||
OFFER Section (4)
|
||
============================================================ */
|
||
table.offer-tbl {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
table.offer-tbl thead th {
|
||
text-align: left;
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
font-weight: 500;
|
||
padding: 14px 18px;
|
||
background: var(--surface-2);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
table.offer-tbl thead th.col-trade,
|
||
table.offer-tbl thead th.col-self {
|
||
text-align: right;
|
||
}
|
||
table.offer-tbl tbody td {
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--border);
|
||
vertical-align: top;
|
||
color: var(--fg);
|
||
}
|
||
table.offer-tbl tbody td.col-trade,
|
||
table.offer-tbl tbody td.col-self {
|
||
text-align: right;
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
table.offer-tbl tbody td.col-trade {
|
||
color: var(--success);
|
||
font-weight: 500;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
table.offer-tbl tbody td.col-self {
|
||
color: var(--fg);
|
||
}
|
||
table.offer-tbl tbody td .item-name {
|
||
font-weight: 500;
|
||
color: var(--fg);
|
||
margin-bottom: 2px;
|
||
}
|
||
table.offer-tbl tbody td .item-sub {
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
}
|
||
table.offer-tbl tfoot td {
|
||
padding: 16px 18px;
|
||
background: var(--fg);
|
||
color: var(--surface);
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
font-size: 14px;
|
||
}
|
||
table.offer-tbl tfoot td.col-trade,
|
||
table.offer-tbl tfoot td.col-self {
|
||
text-align: right;
|
||
font-family: var(--font-mono);
|
||
}
|
||
table.offer-tbl tfoot td.col-trade { color: oklch(78% 0.14 150); }
|
||
|
||
.advantages {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 14px;
|
||
padding: 22px;
|
||
border-top: 1px solid var(--border);
|
||
background: var(--surface-2);
|
||
}
|
||
.advantage {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.advantage .adv-ic {
|
||
width: 32px; height: 32px;
|
||
border-radius: 8px;
|
||
background: var(--accent-soft);
|
||
color: var(--accent);
|
||
display: grid; place-items: center;
|
||
margin-bottom: 4px;
|
||
}
|
||
.advantage h4 {
|
||
font-size: 14px;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.advantage p {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.offer-cta {
|
||
padding: 22px;
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid var(--border);
|
||
background: var(--surface);
|
||
flex-wrap: wrap;
|
||
}
|
||
.offer-cta-text {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
.offer-cta-text b { color: var(--fg); font-weight: 600; }
|
||
.offer-cta-buttons {
|
||
display: inline-flex; gap: 10px;
|
||
}
|
||
|
||
/* ============================================================
|
||
Footer
|
||
============================================================ */
|
||
.page-foot {
|
||
max-width: var(--container);
|
||
margin: 32px auto 0;
|
||
padding: 22px 28px 32px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
border-top: 1px solid var(--border);
|
||
flex-wrap: wrap;
|
||
}
|
||
.page-foot a { color: var(--muted); }
|
||
.page-foot a:hover { color: var(--fg); }
|
||
|
||
/* ============================================================
|
||
Responsive
|
||
============================================================ */
|
||
@media (max-width: 1100px) {
|
||
.layout { grid-template-columns: 1fr; }
|
||
.form-card { position: static; max-height: none; }
|
||
.hero-top { grid-template-columns: 1fr; }
|
||
.hero-photo { aspect-ratio: 16/9; }
|
||
.progress-list { grid-template-columns: 1fr; }
|
||
.advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@media (max-width: 720px) {
|
||
.page { padding: 16px 16px 64px; }
|
||
.topbar-inner { padding: 12px 16px; gap: 14px; flex-wrap: wrap; }
|
||
.top-nav { gap: 12px; }
|
||
.page-title { flex-direction: column; align-items: flex-start; }
|
||
.page-title h1 { font-size: 24px; }
|
||
.count-strip { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
|
||
.meta-grid { grid-template-columns: 1fr; }
|
||
table.dt thead { display: none; }
|
||
table.dt tbody td { padding: 8px 14px; display: block; border-bottom: 0; }
|
||
table.dt tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
||
table.offer-tbl, table.offer-tbl thead, table.offer-tbl tbody, table.offer-tbl tr, table.offer-tbl th, table.offer-tbl td { display: block; }
|
||
table.offer-tbl thead { display: none; }
|
||
table.offer-tbl tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
|
||
table.offer-tbl tbody td { padding: 4px 0; text-align: left !important; }
|
||
.advantages { grid-template-columns: 1fr; }
|
||
.offer-cta { flex-direction: column; align-items: stretch; }
|
||
.offer-cta-buttons { justify-content: stretch; }
|
||
.offer-cta-buttons .btn { flex: 1; }
|
||
.card-head { flex-direction: column; align-items: flex-start; }
|
||
.card-head .card-meta { text-align: left; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
TOPBAR — PRINZIP white-label
|
||
============================================================ -->
|
||
<header class="topbar">
|
||
<div class="topbar-inner">
|
||
<div class="brand">
|
||
<div class="brand-mark">P</div>
|
||
<span class="brand-name">PRINZIP</span>
|
||
</div>
|
||
<div class="brand-sep"></div>
|
||
<span class="brand-product">Trade-In · Оценка</span>
|
||
<nav class="top-nav" aria-label="Top navigation">
|
||
<a href="#" class="is-active">Оценка</a>
|
||
<a href="#">Лиды</a>
|
||
<a href="#">Каталог ЖК</a>
|
||
<a href="#">Настройки</a>
|
||
</nav>
|
||
<a href="#" class="top-cta">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||
Поддержка
|
||
</a>
|
||
<div class="top-user" title="Алексей К., менеджер">АК</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="page">
|
||
<div class="crumbs">
|
||
<span>Главная</span> <em>›</em>
|
||
<span>Trade-In</span> <em>›</em>
|
||
<span style="color:var(--fg)">Новая оценка</span>
|
||
</div>
|
||
|
||
<div class="page-title">
|
||
<div>
|
||
<h1>Оценка квартиры на вторичке</h1>
|
||
<p class="page-subtitle" style="margin-top:8px">
|
||
Агрегируем оценки 7 источников + аналоги в продаже + фактические сделки.
|
||
Время сбора — <span class="num">30–60 сек</span>.
|
||
</p>
|
||
</div>
|
||
<div class="page-meta">
|
||
<span class="pill"><span class="dot"></span><span>Отчёт</span> <span class="mono">EKB-2485</span></span>
|
||
<span class="pill"><span class="dot muted"></span><span>Дата</span> <span class="mono">12.05.2026</span></span>
|
||
<span class="pill"><span class="dot warn"></span><span>Срок данных до</span> <span class="mono">11.06.2026</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
MAIN LAYOUT
|
||
============================================================ -->
|
||
<div class="layout">
|
||
|
||
<!-- ===== FORM (sticky left) ===== -->
|
||
<aside class="form-card" aria-label="Параметры квартиры">
|
||
<div class="form-head">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent)"><path d="M3 21v-7l9-7 9 7v7h-6v-6h-6v6z"/></svg>
|
||
<h2>Параметры квартиры</h2>
|
||
<span class="form-step">шаг 1/1</span>
|
||
</div>
|
||
|
||
<div class="form-body">
|
||
|
||
<div class="field autocomplete" id="ac-addr">
|
||
<label class="field-label" for="addr">Адрес <span class="hint">Yandex / Dadata</span><span class="req">обязательно</span></label>
|
||
<div class="control-with-icon">
|
||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
<input class="control" id="addr" type="text" autocomplete="off"
|
||
value="г. Екатеринбург, ул. Софьи Перовской, 119 кв. 368" />
|
||
</div>
|
||
<div class="ac-list" id="ac-list">
|
||
<div class="ac-item is-focus">
|
||
<span class="ac-main">г. Екатеринбург, ул. Софьи Перовской, 119 кв. 368</span>
|
||
<span class="ac-sub">42.9 м² · 2-к</span>
|
||
</div>
|
||
<div class="ac-item">
|
||
<span class="ac-main">г. Екатеринбург, ул. Софьи Перовской, 119 кв. 12</span>
|
||
<span class="ac-sub">38.4 м² · 1-к</span>
|
||
</div>
|
||
<div class="ac-item">
|
||
<span class="ac-main">г. Екатеринбург, ул. Софьи Перовской, 121</span>
|
||
<span class="ac-sub">панельный, 1979</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="field-label" for="cad">Кадастровый номер <span class="hint">опционально</span></label>
|
||
<div class="control-with-suffix">
|
||
<input class="control mono" id="cad" type="text" value="66:41:0204041:1208" />
|
||
<span class="suffix">Росреестр</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field-row">
|
||
<div class="field">
|
||
<label class="field-label" for="area">Площадь <span class="req">*</span></label>
|
||
<div class="control-with-suffix">
|
||
<input class="control mono" id="area" type="number" step="0.1" value="42.9" />
|
||
<span class="suffix">м²</span>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label" for="rooms">Комнат <span class="req">*</span></label>
|
||
<select class="control" id="rooms">
|
||
<option>Студия</option>
|
||
<option>1-к</option>
|
||
<option selected>2-к</option>
|
||
<option>3-к</option>
|
||
<option>4-к+</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field-row">
|
||
<div class="field">
|
||
<label class="field-label" for="floor">Этаж <span class="req">*</span></label>
|
||
<input class="control mono" id="floor" type="number" value="3" />
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label" for="totalfloor">Всего этажей</label>
|
||
<input class="control mono" id="totalfloor" type="number" value="9" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field-row">
|
||
<div class="field">
|
||
<label class="field-label" for="year">Год постройки</label>
|
||
<input class="control mono" id="year" type="number" value="1978" />
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label" for="type">Тип дома</label>
|
||
<select class="control" id="type">
|
||
<option selected>Панельный</option>
|
||
<option>Кирпичный</option>
|
||
<option>Монолит</option>
|
||
<option>Блочный</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="field-label" for="repair">Состояние ремонта</label>
|
||
<select class="control" id="repair">
|
||
<option>Без отделки</option>
|
||
<option selected>Требует ремонта</option>
|
||
<option>Косметический</option>
|
||
<option>Качественный</option>
|
||
<option>Дизайнерский</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field-row">
|
||
<div class="field">
|
||
<label class="field-label" for="balcony">Балкон / Лоджия</label>
|
||
<select class="control" id="balcony">
|
||
<option>Нет</option>
|
||
<option selected>1 балкон</option>
|
||
<option>1 лоджия</option>
|
||
<option>2+</option>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label" for="wc">Санузел</label>
|
||
<select class="control" id="wc">
|
||
<option selected>Раздельный</option>
|
||
<option>Совмещённый</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="field-label" for="kind">Тип квартиры</label>
|
||
<select class="control" id="kind">
|
||
<option>Студия</option>
|
||
<option>Евро-формат</option>
|
||
<option selected>Классическая</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="field-label">Фото квартиры <span class="hint">опционально</span></label>
|
||
<div class="file-drop">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted-2)"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||
<div style="margin-top:6px"><b>Перетащите файлы</b> или нажмите чтобы выбрать</div>
|
||
<div style="margin-top:2px; font-size:11px">JPG / PNG / HEIC до 10 МБ</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-foot">
|
||
<button class="btn btn-primary" type="button">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Оценить квартиру
|
||
</button>
|
||
<div class="form-foot-meta">
|
||
<span>Кэш по адресу — <span class="num">24 ч</span></span>
|
||
<span class="ok">● готов к запросу</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ===== RESULT COLUMN ===== -->
|
||
<section class="result-col">
|
||
|
||
<!-- =============== PROGRESS =============== -->
|
||
<article class="card progress-card" id="progress">
|
||
<div class="card-head">
|
||
<div>
|
||
<div class="section-kicker">Шаг B · Агрегация</div>
|
||
<h2>Сбор данных по квартире</h2>
|
||
</div>
|
||
<div class="card-meta">
|
||
<div class="num-done"><span data-tnum>4</span><span class="total"> / 7</span> источников</div>
|
||
<div style="margin-top:4px">медиана: <b class="mono" style="color:var(--fg)">4.16 млн ₽</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="progress-summary">
|
||
<span class="lead">Идёт параллельный запрос к 7 сервисам — Celery group, timeout 90 сек.</span>
|
||
<div class="progress-overall"><div class="bar" style="width:64%"></div></div>
|
||
<span class="progress-eta">≈ 22 СЕК ДО ЗАВЕРШЕНИЯ</span>
|
||
</div>
|
||
|
||
<div class="progress-list">
|
||
|
||
<div class="progress-row is-done">
|
||
<span class="status-icon done">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</span>
|
||
<span class="src-name">Циан</span>
|
||
<span class="src-bar"><i style="--p:100%"></i></span>
|
||
<span class="src-value"><b>4.10 млн</b> · 47 объявл.</span>
|
||
</div>
|
||
|
||
<div class="progress-row is-done">
|
||
<span class="status-icon done">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</span>
|
||
<span class="src-name">Авито Оценка</span>
|
||
<span class="src-bar"><i style="--p:100%; background:var(--viz-5)"></i></span>
|
||
<span class="src-value"><b>4.20 млн</b> · 31 объявл.</span>
|
||
</div>
|
||
|
||
<div class="progress-row is-loading">
|
||
<span class="status-icon loading">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
||
</span>
|
||
<span class="src-name">ДомКлик Прайс</span>
|
||
<span class="src-bar"><i style="--p:72%"></i></span>
|
||
<span class="src-value">12 ипотечных сделок в доме…</span>
|
||
</div>
|
||
|
||
<div class="progress-row is-done">
|
||
<span class="status-icon done">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</span>
|
||
<span class="src-name">Я.Недвижимость</span>
|
||
<span class="src-bar"><i style="--p:100%; background:var(--viz-4)"></i></span>
|
||
<span class="src-value"><b>4.00 млн</b> · 28 объявл.</span>
|
||
</div>
|
||
|
||
<div class="progress-row is-loading">
|
||
<span class="status-icon loading">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
||
</span>
|
||
<span class="src-name">Restate</span>
|
||
<span class="src-bar"><i style="--p:24%"></i></span>
|
||
<span class="src-value">сбор аналогов…</span>
|
||
</div>
|
||
|
||
<div class="progress-row is-error">
|
||
<span class="status-icon error">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</span>
|
||
<span class="src-name">N1.ru</span>
|
||
<span class="src-bar"><i style="--p:0%"></i></span>
|
||
<span class="src-value" style="color:var(--danger)">timeout — нет ответа</span>
|
||
</div>
|
||
|
||
<div class="progress-row is-loading">
|
||
<span class="status-icon loading">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
||
</span>
|
||
<span class="src-name">Дом.РФ</span>
|
||
<span class="src-bar"><i style="--p:48%"></i></span>
|
||
<span class="src-value">кадастровая + рыночная…</span>
|
||
</div>
|
||
|
||
<div class="progress-row is-done">
|
||
<span class="status-icon done">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</span>
|
||
<span class="src-name">Росреестр (внутр.)</span>
|
||
<span class="src-bar"><i style="--p:100%; background:var(--fg)"></i></span>
|
||
<span class="src-value"><b>12 сделок</b> · 10.2025–05.2026</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-foot">
|
||
<span class="mono" style="font-size:11px; letter-spacing:0.06em">CACHE-KEY · </span>
|
||
<span class="mono" style="font-size:11px">addr=66:41:0204041:1208 · area=42.9 · rooms=2 · repair=req</span>
|
||
·
|
||
<span>при недоступности источника частичный результат не блокируется</span>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- =============== SECTION 1 · HERO / SUMMARY =============== -->
|
||
<article class="card hero-card" id="section-hero">
|
||
<div class="card-head">
|
||
<div>
|
||
<div class="section-kicker">Секция 1 · Сводка</div>
|
||
<h2>Анализ рынка и расчёт выкупной стоимости</h2>
|
||
</div>
|
||
<div class="card-meta">
|
||
<div>Источник: <b>агрегация 4/7</b></div>
|
||
<div style="margin-top:4px">Достоверность · <b style="color:var(--success)">средняя</b> · CV 6.2%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-top">
|
||
<div class="hero-photo" role="img" aria-label="Фото фасада дома (плейсхолдер)">
|
||
<div class="photo-meta">Циан · ID 304119872 · 12.05.2026</div>
|
||
</div>
|
||
<div class="hero-meta">
|
||
<div class="hero-address">г. Екатеринбург, ул. Софьи Перовской, 119 кв. 368</div>
|
||
<div class="hero-cad">КАД · 66:41:0204041:1208 · ЭТАЖ 3/9 · ИНДЕКС 620089</div>
|
||
|
||
<div class="meta-grid">
|
||
<div class="meta-row"><span class="k">Год постройки</span><span class="v mono">1978</span></div>
|
||
<div class="meta-row"><span class="k">Тип дома</span><span class="v">Панельный</span></div>
|
||
<div class="meta-row"><span class="k">Этаж</span><span class="v mono">3 / 9</span></div>
|
||
<div class="meta-row"><span class="k">Площадь</span><span class="v mono">42.9 м²</span></div>
|
||
<div class="meta-row"><span class="k">Планировка</span><span class="v">2-к, классическая</span></div>
|
||
<div class="meta-row"><span class="k">Состояние</span><span class="v">Требует ремонта</span></div>
|
||
<div class="meta-row"><span class="k">Балкон / Лоджия</span><span class="v mono">1 / 0</span></div>
|
||
<div class="meta-row"><span class="k">Санузел</span><span class="v">Раздельный</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-bars">
|
||
<div class="bar-block">
|
||
<div class="bar-head">
|
||
<span class="bar-title">Диапазон цен в объявлениях <span style="color:var(--muted-2)">(без учёта ремонта)</span></span>
|
||
<span class="bar-cv">медиана · 4.16 млн ₽</span>
|
||
</div>
|
||
<div class="pricebar">
|
||
<div class="axis">
|
||
<div class="range" style="left:8%; right:8%"></div>
|
||
<div class="median" style="left:50%"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:8%">
|
||
<div class="endpoint-val">3.4 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:92%">
|
||
<div class="endpoint-val">4.3 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="median-label" style="left:50%; top:-2px">4.16 млн ₽</div>
|
||
<div class="exp left">ЭКСПОЗИЦИЯ · 4 ДНЕЙ</div>
|
||
<div class="exp right">118 ДНЕЙ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bar-block">
|
||
<div class="bar-head">
|
||
<span class="bar-title">Диапазон цен по фактическим сделкам</span>
|
||
<span class="bar-cv">медиана · 3.95 млн ₽</span>
|
||
</div>
|
||
<div class="pricebar">
|
||
<div class="axis">
|
||
<div class="range" style="left:10%; right:14%; background:linear-gradient(90deg,var(--viz-3),var(--viz-4))"></div>
|
||
<div class="median" style="left:46%"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:10%">
|
||
<div class="endpoint-val">3.4 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:86%">
|
||
<div class="endpoint-val">4.3 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="median-label" style="left:46%; top:-2px">3.95 млн ₽</div>
|
||
<div class="exp left">ЭКСПОЗИЦИЯ · 10 ДНЕЙ</div>
|
||
<div class="exp right">228 ДНЕЙ</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-warnings">
|
||
<div class="warn-row">
|
||
<span class="ic">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
</span>
|
||
<div>Цены в объявлениях ≠ реальная сделка — разница <b>5–12%</b> по данным Росреестра.</div>
|
||
</div>
|
||
<div class="warn-row">
|
||
<span class="ic">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
</span>
|
||
<div>Косметический ремонт <b class="num">400–600 тыс ₽</b> повышает стоимость на <b class="num">150–250 тыс ₽</b>.</div>
|
||
</div>
|
||
<div class="warn-row">
|
||
<span class="ic">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
</span>
|
||
<div>Самостоятельная продажа = до <b>15% потерь</b> на торге, риелторе, нотариусе и аренде.</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- =============== SECTION 2 · LISTINGS =============== -->
|
||
<article class="card" id="section-listings">
|
||
<div class="card-head">
|
||
<div>
|
||
<div class="section-kicker">Секция 2 · Рынок</div>
|
||
<h2>Объявления — аналогичные квартиры в продаже</h2>
|
||
</div>
|
||
<div class="card-meta">
|
||
<div>Обновлено: <b class="mono">12.05.2026 · 14:22</b></div>
|
||
<div style="margin-top:4px">Источников: <b>5 / 7</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="count-strip">
|
||
<div class="count-cell">
|
||
<div class="label">Объявлений по аналогам</div>
|
||
<div class="value"><span data-tnum>47</span><span class="unit">шт</span></div>
|
||
<div class="sub">из 5 источников за 30 дней</div>
|
||
</div>
|
||
<div class="count-cell">
|
||
<div class="label">Из них с учётом ремонта</div>
|
||
<div class="value"><span data-tnum>5</span><span class="unit">шт</span></div>
|
||
<div class="sub">«Требует ремонта», ±1 категория</div>
|
||
</div>
|
||
<div class="count-cell">
|
||
<div class="label">Медиана / разброс</div>
|
||
<div class="value"><span data-tnum>4.16</span><span class="unit">млн ₽</span></div>
|
||
<div class="sub">CV 6.2% · надёжно</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters-row">
|
||
<span class="lbl">Фильтр</span>
|
||
<div class="filters">
|
||
<span class="chip"><span class="k">Расстояние</span><span class="v">±1 км</span></span>
|
||
<span class="chip"><span class="k">Тип</span><span class="v">Эконом · <2000</span></span>
|
||
<span class="chip"><span class="k">Год</span><span class="v">1976 – 1981</span></span>
|
||
<span class="chip"><span class="k">Площадь</span><span class="v">42.1 – 47.0 м²</span></span>
|
||
<span class="chip"><span class="k">Планировка</span><span class="v">2-к</span></span>
|
||
<span class="chip"><span class="k">Состояние</span><span class="v">Требует ремонта</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters-row">
|
||
<span class="lbl">Источники</span>
|
||
<div class="sources">
|
||
<span class="source-chip"><span class="src-dot yandex"></span> Я.Недвижимость · <span class="mono" style="color:var(--muted)">28</span></span>
|
||
<span class="source-chip"><span class="src-dot cian"></span> Циан · <span class="mono" style="color:var(--muted)">47</span></span>
|
||
<span class="source-chip"><span class="src-dot dom"></span> ДомКлик · <span class="mono" style="color:var(--muted)">19</span></span>
|
||
<span class="source-chip"><span class="src-dot avito"></span> Avito · <span class="mono" style="color:var(--muted)">31</span></span>
|
||
<span class="source-chip is-error"><span class="src-dot n1"></span> N1.ru · <span class="mono">— timeout</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pricebar-block">
|
||
<div class="bar-head">
|
||
<span class="bar-title" style="color:var(--fg-2); font-size:12px; letter-spacing:0.04em">ДИАПАЗОН ЦЕН В ОБЪЯВЛЕНИЯХ · 4.16 МЛН ₽ медиана</span>
|
||
<span class="bar-cv">диапазон — 4 / 118 дней экспозиции</span>
|
||
</div>
|
||
<div class="pricebar">
|
||
<div class="axis">
|
||
<div class="range" style="left:5%; right:5%"></div>
|
||
<div class="median" style="left:54%"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:5%">
|
||
<div class="endpoint-val">3.4 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:30%" title="P25">
|
||
<div class="endpoint-val mono" style="font-weight:500; color:var(--muted)">4.0</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:78%" title="P75">
|
||
<div class="endpoint-val mono" style="font-weight:500; color:var(--muted)">4.4</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:95%">
|
||
<div class="endpoint-val">4.6 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="median-label" style="left:54%; top:-2px">4.16 млн ₽</div>
|
||
<div class="exp left">P25 · 4.0 МЛН</div>
|
||
<div class="exp right">P75 · 4.4 МЛН</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="dt" aria-label="Примеры аналогичных объектов">
|
||
<thead>
|
||
<tr>
|
||
<th>Адрес</th>
|
||
<th>Источник</th>
|
||
<th class="num">₽ / м²</th>
|
||
<th class="num">Стоимость</th>
|
||
<th class="num">Экспозиция</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, проезд Теплоходный, 11</span>
|
||
<span class="a-sub">42.5 м² · 2-к · панель 1977</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot cian"></span> Циан</span></td>
|
||
<td class="num">101 176</td>
|
||
<td class="num">4 300 000</td>
|
||
<td class="num">4 дн.</td>
|
||
<td><a href="#" class="row-link" aria-label="Открыть"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Автомагистральная, 11</span>
|
||
<span class="a-sub">43.0 м² · 2-к · панель 1979</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot avito"></span> Avito</span></td>
|
||
<td class="num">104 651</td>
|
||
<td class="num">4 500 000</td>
|
||
<td class="num">22 дн.</td>
|
||
<td><a href="#" class="row-link"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Бебеля, 136</span>
|
||
<span class="a-sub">44.7 м² · 2-к · панель 1981</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot yandex"></span> Я.Недв</span></td>
|
||
<td class="num">94 854</td>
|
||
<td class="num">4 240 000</td>
|
||
<td class="num">48 дн.</td>
|
||
<td><a href="#" class="row-link"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Софьи Перовской, 109</span>
|
||
<span class="a-sub">42.1 м² · 2-к · панель 1976</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot dom"></span> ДомКлик</span></td>
|
||
<td class="num">95 011</td>
|
||
<td class="num">4 000 000</td>
|
||
<td class="num">73 дн.</td>
|
||
<td><a href="#" class="row-link"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Декабристов, 27</span>
|
||
<span class="a-sub">47.0 м² · 2-к · панель 1978</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot cian"></span> Циан</span></td>
|
||
<td class="num">76 596</td>
|
||
<td class="num">3 600 000</td>
|
||
<td class="num">118 дн.</td>
|
||
<td><a href="#" class="row-link"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="table-foot">
|
||
<span>Показано <b style="color:var(--fg)">5 из 47</b> объявлений · отсортировано по релевантности</span>
|
||
<a href="#" class="mono">Показать все →</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- =============== SECTION 3 · ACTUAL DEALS =============== -->
|
||
<article class="card" id="section-deals">
|
||
<div class="card-head">
|
||
<div>
|
||
<div class="section-kicker">Секция 3 · Сделки</div>
|
||
<h2>Фактические сделки по аналогичным квартирам</h2>
|
||
</div>
|
||
<div class="card-meta">
|
||
<div>Период: <b class="mono">10.2025 – 05.2026</b></div>
|
||
<div style="margin-top:4px">Источников: <b>3 / 3</b> · ground truth</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="count-strip">
|
||
<div class="count-cell">
|
||
<div class="label">Сделок по аналогам</div>
|
||
<div class="value"><span data-tnum>12</span><span class="unit">шт</span></div>
|
||
<div class="sub">подтверждено Росреестром</div>
|
||
</div>
|
||
<div class="count-cell">
|
||
<div class="label">Период</div>
|
||
<div class="value"><span class="num" style="font-size:16px">10.25 – 05.26</span></div>
|
||
<div class="sub">7 месяцев · разница к рынку −7%</div>
|
||
</div>
|
||
<div class="count-cell">
|
||
<div class="label">Медиана / разброс</div>
|
||
<div class="value"><span data-tnum>3.95</span><span class="unit">млн ₽</span></div>
|
||
<div class="sub">10 – 228 дней экспозиции</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters-row">
|
||
<span class="lbl">Фильтр</span>
|
||
<div class="filters">
|
||
<span class="chip"><span class="k">Расстояние</span><span class="v">±1 км</span></span>
|
||
<span class="chip"><span class="k">Тип</span><span class="v">Эконом · <2000</span></span>
|
||
<span class="chip"><span class="k">Год</span><span class="v">1977 – 1979</span></span>
|
||
<span class="chip"><span class="k">Площадь</span><span class="v">38.0 – 47.3 м²</span></span>
|
||
<span class="chip"><span class="k">Планировка</span><span class="v">2-к</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters-row">
|
||
<span class="lbl">Источники</span>
|
||
<div class="sources">
|
||
<span class="source-chip"><span class="src-dot etagi"></span> Этажи · <span class="mono" style="color:var(--muted)">7 сделок</span></span>
|
||
<span class="source-chip"><span class="src-dot dom"></span> ДомКлик · <span class="mono" style="color:var(--muted)">3 ипотеки</span></span>
|
||
<span class="source-chip"><span class="src-dot rosreestr"></span> Росреестр · <span class="mono" style="color:var(--muted)">12 ДДУ/пер.</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pricebar-block">
|
||
<div class="bar-head">
|
||
<span class="bar-title" style="color:var(--fg-2); font-size:12px; letter-spacing:0.04em">ДИАПАЗОН ЦЕН ПО ФАКТ. СДЕЛКАМ · 3.95 МЛН ₽ медиана</span>
|
||
<span class="bar-cv">экспозиция 10 / 228 дней</span>
|
||
</div>
|
||
<div class="pricebar">
|
||
<div class="axis">
|
||
<div class="range" style="left:8%; right:12%; background:linear-gradient(90deg,var(--viz-3),var(--viz-4))"></div>
|
||
<div class="median" style="left:46%"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:8%">
|
||
<div class="endpoint-val">3.4 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="endpoint" style="left:88%">
|
||
<div class="endpoint-val">4.3 млн</div>
|
||
<div class="endpoint-tick"></div>
|
||
</div>
|
||
<div class="median-label" style="left:46%; top:-2px">3.95 млн ₽</div>
|
||
<div class="exp left">ЭКСПОЗИЦИЯ · 10 ДНЕЙ</div>
|
||
<div class="exp right">228 ДНЕЙ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="warn-banner">
|
||
<span class="ic">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
</span>
|
||
<div>По данным реальных сделок квартиры продаются в среднем на <b class="num">5–12%</b> дешевле, чем заявлено в объявлениях. Используйте сделочную медиану <b class="num">3.95 млн ₽</b> как базу для выкупной цены.</div>
|
||
</div>
|
||
|
||
<table class="dt" aria-label="Примеры фактических сделок">
|
||
<thead>
|
||
<tr>
|
||
<th>Адрес</th>
|
||
<th>Источник</th>
|
||
<th class="num">₽ / м²</th>
|
||
<th class="num">Стоимость</th>
|
||
<th class="num">Экспозиция</th>
|
||
<th class="num">Дата</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Софьи Перовской, 115</span>
|
||
<span class="a-sub">42.9 м² · 2-к · панель 1978</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot rosreestr"></span> Росреестр</span></td>
|
||
<td class="num">99 068</td>
|
||
<td class="num">4 250 000</td>
|
||
<td class="num">10 дн.</td>
|
||
<td class="num">04.2026</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Бебеля, 138</span>
|
||
<span class="a-sub">44.1 м² · 2-к · панель 1979</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot etagi"></span> Этажи</span></td>
|
||
<td class="num">93 197</td>
|
||
<td class="num">4 110 000</td>
|
||
<td class="num">47 дн.</td>
|
||
<td class="num">02.2026</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Татищева, 84</span>
|
||
<span class="a-sub">38.0 м² · 2-к · панель 1977</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot dom"></span> ДомКлик</span></td>
|
||
<td class="num">94 737</td>
|
||
<td class="num">3 600 000</td>
|
||
<td class="num">95 дн.</td>
|
||
<td class="num">12.2025</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Викулова, 33</span>
|
||
<span class="a-sub">47.3 м² · 2-к · панель 1979</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot rosreestr"></span> Росреестр</span></td>
|
||
<td class="num">90 909</td>
|
||
<td class="num">4 300 000</td>
|
||
<td class="num">228 дн.</td>
|
||
<td class="num">11.2025</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="addr">
|
||
<span class="a-main">Екб, ул. Заводская, 32/1</span>
|
||
<span class="a-sub">42.5 м² · 2-к · панель 1978</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="src-mini"><span class="src-dot etagi"></span> Этажи</span></td>
|
||
<td class="num">80 000</td>
|
||
<td class="num">3 400 000</td>
|
||
<td class="num">142 дн.</td>
|
||
<td class="num">10.2025</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="table-foot">
|
||
<span>Показано <b style="color:var(--fg)">5 из 12</b> фактических сделок</span>
|
||
<a href="#" class="mono">Показать все →</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- =============== SECTION 4 · OFFER =============== -->
|
||
<article class="card" id="section-offer">
|
||
<div class="card-head">
|
||
<div>
|
||
<div class="section-kicker">Секция 4 · Оффер</div>
|
||
<h2>Формирование выкупной стоимости</h2>
|
||
</div>
|
||
<div class="card-meta">
|
||
<div>База расчёта: <b class="mono">3.95 млн ₽</b></div>
|
||
<div style="margin-top:4px">Параметры настраиваемые в админке девелопера</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="offer-tbl" aria-label="Сравнение trade-in и самостоятельной продажи">
|
||
<thead>
|
||
<tr>
|
||
<th>Статья расходов</th>
|
||
<th class="col-trade">Через Trade-In</th>
|
||
<th class="col-self">Самостоятельная продажа</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="item-name">Торг покупателей</div>
|
||
<div class="item-sub">5–15% от цены объявления</div>
|
||
</td>
|
||
<td class="col-trade">не применимо</td>
|
||
<td class="col-self">182 500 – 547 500 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="item-name">Услуги риелтора</div>
|
||
<div class="item-sub">2–3% от цены сделки</div>
|
||
</td>
|
||
<td class="col-trade">бесплатно</td>
|
||
<td class="col-self">69 350 – 104 025 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="item-name">Аренда жилья после сделки</div>
|
||
<div class="item-sub">1-к квартира на 3 месяца</div>
|
||
</td>
|
||
<td class="col-trade">бесплатно</td>
|
||
<td class="col-self">90 000 – 150 000 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="item-name">Юридическое сопровождение</div>
|
||
<div class="item-sub">проверка документов, договор, регистрация</div>
|
||
</td>
|
||
<td class="col-trade">бесплатно</td>
|
||
<td class="col-self">от 19 250 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="item-name">Расходы на рекламу</div>
|
||
<div class="item-sub">платные показы Циан / Авито, 3 мес</div>
|
||
</td>
|
||
<td class="col-trade">бесплатно</td>
|
||
<td class="col-self">4 000 – 36 000 ₽</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td>Общие финансовые потери</td>
|
||
<td class="col-trade">— 0 ₽</td>
|
||
<td class="col-self">365 100 – 856 775 ₽</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
|
||
<div class="warn-banner">
|
||
<span class="ic">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
</span>
|
||
<div>Издержки при самостоятельной продаже сопоставимы со скидкой <b>9–22%</b> от рыночной цены. <b>Trade-In закрывает их полностью</b>, а цена в новостройке фиксируется на момент оценки.</div>
|
||
</div>
|
||
|
||
<!-- 4 advantages -->
|
||
<div class="advantages">
|
||
<div class="advantage">
|
||
<div class="adv-ic">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg>
|
||
</div>
|
||
<h4>Экономия времени</h4>
|
||
<p>Берём на себя показы, переговоры и поиск покупателей. Менеджеру остаётся только подписать ДКП.</p>
|
||
</div>
|
||
<div class="advantage">
|
||
<div class="adv-ic">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||
</div>
|
||
<h4>Юридическая безопасность</h4>
|
||
<p>Проверяем чистоту документов, ЕГРН, прописанных и обременения. Исключаем риски для клиента.</p>
|
||
</div>
|
||
<div class="advantage">
|
||
<div class="adv-ic">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="5" x2="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>
|
||
</div>
|
||
<h4>Фиксированная цена новостройки</h4>
|
||
<p>Сохраняем выбранную планировку в каталоге PRINZIP по цене на момент оценки — до закрытия сделки.</p>
|
||
</div>
|
||
<div class="advantage">
|
||
<div class="adv-ic">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
||
</div>
|
||
<h4>Гарантия цены</h4>
|
||
<p>Снимаем риск колебаний рынка — выкупная стоимость зафиксирована в оффере на 30 дней.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="offer-cta">
|
||
<div class="offer-cta-text">
|
||
<b>Готовы отправить оффер клиенту?</b><br/>
|
||
PDF-отчёт + персональный оффер по выкупной цене — за 1 клик.
|
||
</div>
|
||
<div class="offer-cta-buttons">
|
||
<button class="btn btn-ghost" type="button">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
Скачать PDF
|
||
</button>
|
||
<button class="btn btn-accent" type="button">
|
||
Связаться с менеджером
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="page-foot">
|
||
<div>
|
||
PRINZIP Trade-In · v0.2 · <span class="mono">data: brusnika-obmen-style</span>
|
||
</div>
|
||
<div style="display:flex; gap:18px">
|
||
<a href="#">Документация</a>
|
||
<a href="#">API</a>
|
||
<a href="#">Кэш и SLA</a>
|
||
<a href="#">Источники данных</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Address autocomplete demo behavior
|
||
(function () {
|
||
var ac = document.getElementById('ac-addr');
|
||
if (!ac) return;
|
||
var input = ac.querySelector('#addr');
|
||
var list = document.getElementById('ac-list');
|
||
function open(){ list.classList.add('is-open'); }
|
||
function close(){ list.classList.remove('is-open'); }
|
||
input.addEventListener('focus', open);
|
||
input.addEventListener('input', open);
|
||
document.addEventListener('click', function (e) {
|
||
if (!ac.contains(e.target)) close();
|
||
});
|
||
list.querySelectorAll('.ac-item').forEach(function (el) {
|
||
el.addEventListener('click', function () {
|
||
input.value = el.querySelector('.ac-main').textContent;
|
||
close();
|
||
});
|
||
});
|
||
})();
|
||
|
||
// Subtle live progress simulation — bumps loading bars + countdown
|
||
(function () {
|
||
var loadingRows = document.querySelectorAll('.progress-row.is-loading .src-bar > i');
|
||
var ovBar = document.querySelector('.progress-overall .bar');
|
||
var eta = document.querySelector('.progress-eta');
|
||
if (!loadingRows.length || !ovBar) return;
|
||
|
||
var etaSec = 22;
|
||
var ovPct = parseFloat(ovBar.style.width) || 64;
|
||
var timer = setInterval(function () {
|
||
etaSec = Math.max(2, etaSec - 1);
|
||
ovPct = Math.min(94, ovPct + 1.2);
|
||
ovBar.style.width = ovPct + '%';
|
||
eta.textContent = '≈ ' + etaSec + ' СЕК ДО ЗАВЕРШЕНИЯ';
|
||
loadingRows.forEach(function (el) {
|
||
var cur = parseFloat(el.style.getPropertyValue('--p')) || 30;
|
||
if (cur < 95) el.style.setProperty('--p', Math.min(95, cur + 3.5) + '%');
|
||
});
|
||
}, 1200);
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|