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).
571 lines
29 KiB
HTML
571 lines
29 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>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 {
|
||
/* surface */
|
||
--bg-app: #F6F7F9;
|
||
--bg-card: #FFFFFF;
|
||
--bg-card-alt: #FAFBFC;
|
||
--bg-headline: #0F172A;
|
||
/* borders */
|
||
--border-soft: #EEF0F3;
|
||
--border-card: #E6E8EC;
|
||
--border-strong: #D1D5DB;
|
||
/* text */
|
||
--fg-primary: #111111;
|
||
--fg-secondary: #5B6066;
|
||
--fg-tertiary: #73767E;
|
||
--fg-on-dark: #E2E8F0;
|
||
--fg-on-dark-muted: #94A3B8;
|
||
/* brand */
|
||
--accent: #1D4ED8;
|
||
--accent-hover: #1E40AF;
|
||
--accent-soft: #DBEAFE;
|
||
--accent-2: #F2994A;
|
||
/* semantic */
|
||
--success: #0A7A3A;
|
||
--success-soft: #DCFCE7;
|
||
--warn: #9A6700;
|
||
--warn-soft: #FEF3C7;
|
||
--danger: #B3261E;
|
||
--danger-soft: #FEE2E2;
|
||
/* viz */
|
||
--viz-1: #1D4ED8;
|
||
--viz-2: #0EA5E9;
|
||
--viz-3: #14B8A6;
|
||
--viz-4: #F59E0B;
|
||
--viz-5: #8B5CF6;
|
||
|
||
font-variant-numeric: tabular-nums;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
html, body { margin: 0; }
|
||
body {
|
||
background: var(--bg-app);
|
||
color: var(--fg-primary);
|
||
font: 14px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-rendering: optimizeLegibility;
|
||
font-variant-numeric: tabular-nums;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
a { color: var(--accent); text-decoration: none; }
|
||
a:hover { color: var(--accent-hover); }
|
||
ul { margin: 0; padding: 0; list-style: none; }
|
||
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-align: left; }
|
||
|
||
/* preview nav (formerly dev-nav) */
|
||
.dev-nav {
|
||
position: sticky; top: 0; z-index: 100;
|
||
display: flex; align-items: center; gap: 18px;
|
||
padding: 0 20px; height: 38px;
|
||
background: var(--bg-headline); color: #fff;
|
||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
font: 12px/1 'Inter', system-ui, sans-serif;
|
||
}
|
||
.dev-nav .dev-label {
|
||
color: rgba(255,255,255,0.65); letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px;
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
}
|
||
.dev-nav .dev-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
|
||
.dev-nav .dev-tabs { display: inline-flex; gap: 2px; align-items: center; }
|
||
.dev-nav .dev-tabs a {
|
||
padding: 6px 10px; border-radius: 6px;
|
||
color: rgba(255,255,255,0.72); font-size: 12px; letter-spacing: 0.01em;
|
||
transition: background .15s, color .15s;
|
||
}
|
||
.dev-nav .dev-tabs a:hover { color: #fff; background: rgba(255,255,255,0.08); }
|
||
.dev-nav .dev-tabs a[aria-current="page"] { color: var(--bg-headline); background: var(--accent-2); font-weight: 600; }
|
||
@media print { .dev-nav { display: none !important; } }
|
||
@media (max-width: 720px) {
|
||
.dev-nav { gap: 12px; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||
.dev-nav .dev-label { display: none; }
|
||
}
|
||
|
||
/* topbar */
|
||
.topbar {
|
||
background: var(--bg-card);
|
||
border-bottom: 1px solid var(--border-card);
|
||
}
|
||
.topbar-inner {
|
||
max-width: 1280px; margin: 0 auto; padding: 16px 24px;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-primary); font-weight: 700; letter-spacing: -0.01em; font-size: 16px; }
|
||
.brand-mark { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #2563EB); display: inline-block; }
|
||
.topbar-meta { display: inline-flex; gap: 18px; align-items: center; color: var(--fg-secondary); font-size: 12px; }
|
||
.topbar-meta b { color: var(--fg-primary); font-weight: 600; }
|
||
.topbar-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); display: inline-block; }
|
||
|
||
/* main layout */
|
||
main { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
|
||
.lede { margin-bottom: 28px; max-width: 880px; }
|
||
.eyebrow {
|
||
display: inline-block;
|
||
font: 500 11px/1 'Inter', system-ui, sans-serif;
|
||
letter-spacing: 0.06em; text-transform: uppercase;
|
||
color: var(--accent); margin-bottom: 12px;
|
||
}
|
||
h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 12px; }
|
||
.deck { font-size: 16px; line-height: 1.55; color: var(--fg-secondary); max-width: 760px; }
|
||
.meta {
|
||
margin-top: 20px;
|
||
display: flex; flex-wrap: wrap; gap: 0;
|
||
border: 1px solid var(--border-card); border-radius: 12px;
|
||
background: var(--bg-card); overflow: hidden;
|
||
}
|
||
.meta li {
|
||
flex: 1 1 0; min-width: 140px;
|
||
padding: 14px 18px;
|
||
border-right: 1px solid var(--border-card);
|
||
font-size: 12px; color: var(--fg-secondary);
|
||
}
|
||
.meta li:last-child { border-right: 0; }
|
||
.meta li b { display: block; font-size: 18px; font-weight: 600; color: var(--fg-primary); letter-spacing: -0.01em; margin-bottom: 2px; }
|
||
|
||
/* cards grid */
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
margin-top: 24px;
|
||
}
|
||
.card {
|
||
display: flex; flex-direction: column;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-card);
|
||
border-radius: 12px; overflow: hidden;
|
||
color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s;
|
||
}
|
||
.card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(15,23,42,0.08); }
|
||
.card:hover .card-link { color: var(--accent-hover); }
|
||
.card:hover .card-link::after { transform: translateX(2px); }
|
||
.card.featured { grid-column: span 2; }
|
||
.card.featured .thumb { height: 220px; }
|
||
|
||
.thumb {
|
||
height: 160px;
|
||
border-bottom: 1px solid var(--border-card);
|
||
background: var(--bg-card-alt);
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.thumb svg { display: block; width: 100%; height: 100%; }
|
||
|
||
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
|
||
.card-eyebrow {
|
||
display: inline-block; font: 500 10px/1 'Inter', system-ui, sans-serif;
|
||
letter-spacing: 0.08em; text-transform: uppercase;
|
||
color: var(--fg-tertiary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.card h3 { font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px; }
|
||
.card .card-lede { color: var(--fg-secondary); font-size: 13.5px; line-height: 1.5; flex: 1; }
|
||
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
|
||
.card-tag {
|
||
font: 500 10.5px/1 'Inter', system-ui, sans-serif;
|
||
letter-spacing: 0.02em; color: var(--fg-secondary);
|
||
background: var(--bg-card-alt);
|
||
border: 1px solid var(--border-card);
|
||
padding: 4px 8px; border-radius: 6px;
|
||
}
|
||
.card-link {
|
||
margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent);
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.card-link::after { content: '→'; transition: transform .15s; }
|
||
|
||
/* note */
|
||
.note {
|
||
margin-top: 28px;
|
||
border: 1px solid var(--warn);
|
||
background: var(--warn-soft);
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
|
||
font-size: 13px; color: var(--fg-primary);
|
||
}
|
||
.note svg { width: 18px; height: 18px; color: var(--warn); margin-top: 1px; }
|
||
.note b { font-weight: 600; }
|
||
.note p { margin: 0; }
|
||
|
||
/* footer */
|
||
footer {
|
||
max-width: 1280px; margin: 0 auto; padding: 24px;
|
||
color: var(--fg-tertiary); font-size: 12px;
|
||
border-top: 1px solid var(--border-card);
|
||
display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
|
||
}
|
||
|
||
/* thumb illustrations — abstract page hints */
|
||
.t-landing { background: linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%); }
|
||
.t-analytics { background: #FAFBFC; }
|
||
.t-developers { background: #FAFBFC; }
|
||
.t-sf-landing { background: linear-gradient(180deg, #F6F7F9, #EEF0F3); }
|
||
.t-sf-analysis { background: var(--bg-headline); }
|
||
|
||
@media (max-width: 1100px) {
|
||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||
.card.featured { grid-column: span 2; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
main { padding: 20px 16px 48px; }
|
||
.grid { grid-template-columns: 1fr; gap: 12px; }
|
||
.card.featured { grid-column: span 1; }
|
||
.card.featured .thumb { height: 160px; }
|
||
h1 { font-size: 24px; }
|
||
.meta li { flex: 1 1 50%; border-right: 0; border-bottom: 1px solid var(--border-card); }
|
||
.meta li:nth-last-child(-n+1) { border-bottom: 0; }
|
||
.topbar-inner { padding: 12px 16px; }
|
||
.topbar-meta { font-size: 11px; gap: 10px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<aside class="dev-nav" aria-label="Preview navigation">
|
||
<span class="dev-label">Превью · gendsgn</span>
|
||
<nav class="dev-tabs" aria-label="Превью страницы">
|
||
<a href="index.html" aria-current="page">обзор</a>
|
||
<a href="landing.html">лендинг</a>
|
||
<a href="analytics.html">/analytics</a>
|
||
<a href="developers.html">/developers</a>
|
||
<a href="site-finder.html">/site-finder</a>
|
||
<a href="site-finder-analysis.html">/site-finder/анализ</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<header class="topbar">
|
||
<div class="topbar-inner">
|
||
<a href="index.html" class="brand"><span class="brand-mark" aria-hidden="true"></span> gendsgn</a>
|
||
<div class="topbar-meta">
|
||
<span>обзор макетов</span>
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<span><b>5</b> экранов</span>
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<span>UI brief · v1</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<section class="lede">
|
||
<span class="eyebrow">Превью нового сайта</span>
|
||
<h1>Фасад для пилотных девелоперов</h1>
|
||
<p class="deck">Маркетинговый лендинг и четыре продуктовых экрана: рыночная аналитика по Свердловской области, топ-15 девелоперов с velocity-картой, поиск участка по кадастру и детальный анализ с sidebar-навигацией. Сделано по UI brief — Inter, tabular-nums, density-first как DOM.РФ / Bloomberg.</p>
|
||
<ul class="meta">
|
||
<li><b>5</b>экранов</li>
|
||
<li><b>Inter</b>tabular numerics</li>
|
||
<li><b>1280 px</b>desktop · до 412 px responsive</li>
|
||
<li><b>v1</b>UI brief · черновик</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
|
||
<!-- Card 1 — Landing (featured, спанит на 2 колонки) -->
|
||
<a class="card featured" href="landing.html">
|
||
<div class="thumb t-landing">
|
||
<svg viewBox="0 0 720 220" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- top nav -->
|
||
<rect x="0" y="0" width="720" height="32" fill="#FFFFFF"/>
|
||
<rect x="0" y="31" width="720" height="1" fill="#E6E8EC"/>
|
||
<rect x="24" y="11" width="60" height="10" rx="2" fill="#111111"/>
|
||
<rect x="540" y="11" width="44" height="10" rx="2" fill="#E6E8EC"/>
|
||
<rect x="600" y="11" width="44" height="10" rx="2" fill="#E6E8EC"/>
|
||
<rect x="654" y="9" width="48" height="14" rx="3" fill="#1D4ED8"/>
|
||
<!-- hero text -->
|
||
<rect x="40" y="56" width="60" height="9" rx="2" fill="#F2994A"/>
|
||
<rect x="40" y="76" width="380" height="20" rx="2" fill="#0F172A"/>
|
||
<rect x="40" y="102" width="320" height="20" rx="2" fill="#0F172A"/>
|
||
<rect x="40" y="136" width="280" height="9" rx="2" fill="#73767E"/>
|
||
<rect x="40" y="152" width="240" height="9" rx="2" fill="#73767E"/>
|
||
<rect x="40" y="180" width="100" height="22" rx="4" fill="#1D4ED8"/>
|
||
<rect x="148" y="180" width="80" height="22" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<!-- hero illustration -->
|
||
<rect x="460" y="56" width="232" height="146" rx="10" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<!-- paradox bars -->
|
||
<rect x="478" y="78" width="36" height="10" rx="2" fill="#5B6066"/>
|
||
<rect x="478" y="94" width="200" height="12" rx="2" fill="#EEF0F3"/>
|
||
<rect x="478" y="94" width="84" height="12" rx="2" fill="#5B6066"/>
|
||
<rect x="478" y="118" width="36" height="10" rx="2" fill="#0A7A3A"/>
|
||
<rect x="478" y="134" width="200" height="12" rx="2" fill="#DCFCE7"/>
|
||
<rect x="478" y="134" width="156" height="12" rx="2" fill="#0A7A3A"/>
|
||
<rect x="478" y="160" width="160" height="9" rx="2" fill="#E6E8EC"/>
|
||
<rect x="478" y="176" width="120" height="9" rx="2" fill="#E6E8EC"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-eyebrow">Маркетинговый лендинг</span>
|
||
<h3>Лендинг для пилотных девелоперов</h3>
|
||
<p class="card-lede">Hero «Спрос смещается быстрее, чем ваш портфель», парадокс «что строят / что продают» по 5 сегментам, три продуктовых модуля, прайс 30 тыс ₽/мес с честным дисклеймером pre-revenue, FAQ.</p>
|
||
<div class="card-tags">
|
||
<span class="card-tag">Hero + parados</span>
|
||
<span class="card-tag">3 product cards</span>
|
||
<span class="card-tag">Pricing</span>
|
||
<span class="card-tag">FAQ</span>
|
||
</div>
|
||
<span class="card-link">Открыть превью</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Card 2 — Analytics -->
|
||
<a class="card" href="analytics.html">
|
||
<div class="thumb t-analytics">
|
||
<svg viewBox="0 0 360 160" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- headline-bar -->
|
||
<rect x="16" y="16" width="328" height="22" rx="4" fill="#0F172A"/>
|
||
<rect x="24" y="22" width="36" height="10" rx="2" fill="#F2994A"/>
|
||
<rect x="68" y="23" width="220" height="8" rx="2" fill="#E2E8F0"/>
|
||
<!-- kpi row -->
|
||
<rect x="16" y="46" width="78" height="36" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="98" y="46" width="78" height="36" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="180" y="46" width="78" height="36" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="262" y="46" width="82" height="36" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="20" y="52" width="32" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="102" y="52" width="32" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="184" y="52" width="32" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="266" y="52" width="32" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="20" y="62" width="48" height="12" rx="2" fill="#111111"/>
|
||
<rect x="102" y="62" width="42" height="12" rx="2" fill="#111111"/>
|
||
<rect x="184" y="62" width="44" height="12" rx="2" fill="#111111"/>
|
||
<rect x="266" y="62" width="50" height="12" rx="2" fill="#111111"/>
|
||
<!-- map -->
|
||
<rect x="16" y="90" width="328" height="58" rx="6" fill="#FAFBFC" stroke="#E6E8EC"/>
|
||
<path d="M 60 132 Q 120 100 180 116 T 320 122" stroke="#D1D5DB" stroke-width="1" fill="none"/>
|
||
<circle cx="80" cy="118" r="5" fill="#B3261E"/>
|
||
<circle cx="120" cy="106" r="6" fill="#F59E0B"/>
|
||
<circle cx="156" cy="122" r="4" fill="#0EA5E9"/>
|
||
<circle cx="190" cy="112" r="7" fill="#1D4ED8"/>
|
||
<circle cx="226" cy="118" r="5" fill="#14B8A6"/>
|
||
<circle cx="262" cy="108" r="6" fill="#1D4ED8"/>
|
||
<circle cx="296" cy="122" r="4" fill="#0EA5E9"/>
|
||
<circle cx="328" cy="116" r="5" fill="#B3261E"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-eyebrow">Продуктовый экран</span>
|
||
<h3>/analytics — Свердловский рынок</h3>
|
||
<p class="card-lede">Headline-вердикт о дефиците 80+ м², 4 KPI выше fold, карта новостроек по sold %, парадокс портфеля vs реальные сделки, treemap районов.</p>
|
||
<div class="card-tags">
|
||
<span class="card-tag">Headline-bar</span>
|
||
<span class="card-tag">Карта</span>
|
||
<span class="card-tag">Treemap</span>
|
||
</div>
|
||
<span class="card-link">Открыть превью</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Card 3 — Developers -->
|
||
<a class="card" href="developers.html">
|
||
<div class="thumb t-developers">
|
||
<svg viewBox="0 0 360 160" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- KPI row -->
|
||
<rect x="16" y="16" width="78" height="34" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="98" y="16" width="78" height="34" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="180" y="16" width="78" height="34" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="262" y="16" width="82" height="34" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="20" y="22" width="30" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="20" y="32" width="44" height="11" rx="2" fill="#111111"/>
|
||
<rect x="102" y="22" width="32" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="102" y="32" width="42" height="11" rx="2" fill="#111111"/>
|
||
<rect x="184" y="22" width="28" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="184" y="32" width="40" height="11" rx="2" fill="#0A7A3A"/>
|
||
<rect x="266" y="22" width="34" height="5" rx="1" fill="#73767E"/>
|
||
<rect x="266" y="32" width="48" height="11" rx="2" fill="#111111"/>
|
||
<!-- leaderboard table -->
|
||
<rect x="16" y="58" width="200" height="90" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="16" y="58" width="200" height="14" rx="6" fill="#FAFBFC"/>
|
||
<line x1="16" y1="72" x2="216" y2="72" stroke="#E6E8EC" stroke-width="1"/>
|
||
<line x1="16" y1="90" x2="216" y2="90" stroke="#EEF0F3" stroke-width="1"/>
|
||
<line x1="16" y1="108" x2="216" y2="108" stroke="#EEF0F3" stroke-width="1"/>
|
||
<line x1="16" y1="126" x2="216" y2="126" stroke="#EEF0F3" stroke-width="1"/>
|
||
<rect x="24" y="63" width="42" height="6" rx="1" fill="#73767E"/>
|
||
<rect x="120" y="63" width="42" height="6" rx="1" fill="#73767E"/>
|
||
<rect x="172" y="63" width="32" height="6" rx="1" fill="#73767E"/>
|
||
<rect x="24" y="78" width="64" height="8" rx="1" fill="#111111"/>
|
||
<rect x="120" y="79" width="36" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="172" y="79" width="28" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="24" y="96" width="58" height="8" rx="1" fill="#111111"/>
|
||
<rect x="120" y="97" width="36" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="172" y="97" width="28" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="24" y="114" width="68" height="8" rx="1" fill="#111111"/>
|
||
<rect x="120" y="115" width="36" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="172" y="115" width="28" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="24" y="132" width="54" height="8" rx="1" fill="#111111"/>
|
||
<rect x="120" y="133" width="36" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="172" y="133" width="28" height="6" rx="1" fill="#5B6066"/>
|
||
<!-- velocity scatter -->
|
||
<rect x="222" y="58" width="122" height="90" rx="6" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<line x1="234" y1="138" x2="334" y2="138" stroke="#D1D5DB" stroke-width="1"/>
|
||
<line x1="234" y1="138" x2="234" y2="68" stroke="#D1D5DB" stroke-width="1"/>
|
||
<circle cx="248" cy="120" r="3" fill="#5B6066"/>
|
||
<circle cx="262" cy="108" r="4" fill="#5B6066"/>
|
||
<circle cx="278" cy="98" r="3" fill="#0EA5E9"/>
|
||
<circle cx="294" cy="86" r="5" fill="#1D4ED8"/>
|
||
<circle cx="306" cy="106" r="3" fill="#F59E0B"/>
|
||
<circle cx="318" cy="116" r="4" fill="#5B6066"/>
|
||
<circle cx="328" cy="92" r="3" fill="#14B8A6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-eyebrow">Продуктовый экран</span>
|
||
<h3>/developers — Топ-15 девелоперов</h3>
|
||
<p class="card-lede">Search + leaderboard на 15 девелоперов, scatter «Velocity vs объём» с осями (X: тыс м², Y: Δ sold % за 14 мес), сравнение PRINZIP с топ-2 за 14 месяцев.</p>
|
||
<div class="card-tags">
|
||
<span class="card-tag">Leaderboard</span>
|
||
<span class="card-tag">Scatter</span>
|
||
<span class="card-tag">Export CSV</span>
|
||
</div>
|
||
<span class="card-link">Открыть превью</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Card 4 — Site Finder Landing -->
|
||
<a class="card" href="site-finder.html">
|
||
<div class="thumb t-sf-landing">
|
||
<svg viewBox="0 0 360 160" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- map background -->
|
||
<rect x="0" y="0" width="360" height="160" fill="#F6F7F9"/>
|
||
<!-- river -->
|
||
<path d="M 0 90 Q 80 60 160 100 T 360 90" stroke="#DBEAFE" stroke-width="14" fill="none"/>
|
||
<!-- streets grid -->
|
||
<g stroke="#EEF0F3" stroke-width="1">
|
||
<line x1="0" y1="40" x2="360" y2="40"/>
|
||
<line x1="0" y1="120" x2="360" y2="120"/>
|
||
<line x1="80" y1="0" x2="80" y2="160"/>
|
||
<line x1="220" y1="0" x2="220" y2="160"/>
|
||
<line x1="290" y1="0" x2="290" y2="160"/>
|
||
</g>
|
||
<!-- input card (floating) -->
|
||
<rect x="16" y="16" width="160" height="58" rx="8" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="26" y="24" width="42" height="6" rx="1" fill="#73767E"/>
|
||
<rect x="26" y="36" width="120" height="20" rx="4" fill="#FAFBFC" stroke="#E6E8EC"/>
|
||
<rect x="32" y="42" width="74" height="6" rx="1" fill="#111111"/>
|
||
<rect x="26" y="62" width="48" height="8" rx="2" fill="#1D4ED8"/>
|
||
<!-- selected parcel highlight -->
|
||
<rect x="218" y="92" width="52" height="44" rx="4" fill="#DBEAFE" stroke="#1D4ED8" stroke-dasharray="3 3" stroke-width="1.5"/>
|
||
<!-- pins -->
|
||
<circle cx="120" cy="60" r="5" fill="#5B6066"/>
|
||
<circle cx="170" cy="30" r="5" fill="#0A7A3A"/>
|
||
<circle cx="250" cy="50" r="5" fill="#F59E0B"/>
|
||
<circle cx="310" cy="80" r="5" fill="#5B6066"/>
|
||
<circle cx="200" cy="140" r="5" fill="#B3261E"/>
|
||
<circle cx="120" cy="130" r="5" fill="#0EA5E9"/>
|
||
<!-- selected card (floating right) -->
|
||
<rect x="200" y="16" width="144" height="62" rx="8" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="210" y="24" width="44" height="6" rx="1" fill="#F2994A"/>
|
||
<rect x="210" y="34" width="90" height="9" rx="2" fill="#111111"/>
|
||
<rect x="210" y="50" width="60" height="6" rx="1" fill="#73767E"/>
|
||
<rect x="210" y="60" width="40" height="6" rx="1" fill="#73767E"/>
|
||
<rect x="278" y="58" width="56" height="14" rx="3" fill="#1D4ED8"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-eyebrow">Site Finder · Screen 1</span>
|
||
<h3>/site-finder — карта-first entry</h3>
|
||
<p class="card-lede">Полноэкранная SVG-карта Екатеринбурга, поле кадастра с примером формата, недавние участки, sticky-карточка выбранного парцела с 7 параметрами и кнопками «Карточка ЕГРН» + «Анализ».</p>
|
||
<div class="card-tags">
|
||
<span class="card-tag">Карта-first</span>
|
||
<span class="card-tag">Кадастр</span>
|
||
</div>
|
||
<span class="card-link">Открыть превью</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Card 5 — Site Finder Analysis -->
|
||
<a class="card" href="site-finder-analysis.html">
|
||
<div class="thumb t-sf-analysis">
|
||
<svg viewBox="0 0 360 160" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- top bar -->
|
||
<rect x="0" y="0" width="360" height="22" fill="#0F172A"/>
|
||
<rect x="12" y="8" width="44" height="7" rx="1" fill="#94A3B8"/>
|
||
<rect x="68" y="8" width="120" height="7" rx="1" fill="#E2E8F0"/>
|
||
<!-- sidebar -->
|
||
<rect x="0" y="22" width="92" height="138" fill="#FFFFFF"/>
|
||
<line x1="92" y1="22" x2="92" y2="160" stroke="#E6E8EC"/>
|
||
<rect x="10" y="34" width="20" height="6" rx="1" fill="#5B6066"/>
|
||
<!-- 5 sidebar items, item 3 active -->
|
||
<rect x="8" y="48" width="76" height="14" rx="4" fill="#FAFBFC"/>
|
||
<circle cx="14" cy="55" r="2" fill="#73767E"/>
|
||
<rect x="22" y="52" width="52" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="8" y="64" width="76" height="14" rx="4" fill="#FAFBFC"/>
|
||
<circle cx="14" cy="71" r="2" fill="#73767E"/>
|
||
<rect x="22" y="68" width="46" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="8" y="80" width="76" height="14" rx="4" fill="#DBEAFE"/>
|
||
<circle cx="14" cy="87" r="2" fill="#1D4ED8"/>
|
||
<rect x="22" y="84" width="56" height="6" rx="1" fill="#1D4ED8"/>
|
||
<rect x="8" y="96" width="76" height="14" rx="4" fill="#FAFBFC"/>
|
||
<circle cx="14" cy="103" r="2" fill="#73767E"/>
|
||
<rect x="22" y="100" width="48" height="6" rx="1" fill="#5B6066"/>
|
||
<rect x="8" y="112" width="76" height="14" rx="4" fill="#FAFBFC"/>
|
||
<circle cx="14" cy="119" r="2" fill="#73767E"/>
|
||
<rect x="22" y="116" width="50" height="6" rx="1" fill="#5B6066"/>
|
||
<!-- main pane -->
|
||
<rect x="92" y="22" width="268" height="138" fill="#F6F7F9"/>
|
||
<!-- headline -->
|
||
<rect x="104" y="34" width="244" height="22" rx="4" fill="#0F172A"/>
|
||
<rect x="112" y="40" width="32" height="10" rx="2" fill="#F2994A"/>
|
||
<rect x="150" y="41" width="148" height="8" rx="2" fill="#E2E8F0"/>
|
||
<!-- 4 settings -->
|
||
<rect x="104" y="62" width="58" height="16" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="166" y="62" width="58" height="16" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="228" y="62" width="58" height="16" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="290" y="62" width="58" height="16" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<!-- planning previews -->
|
||
<rect x="104" y="86" width="58" height="40" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="110" y="92" width="46" height="20" rx="2" fill="#FAFBFC"/>
|
||
<rect x="166" y="86" width="58" height="40" rx="4" fill="#FFFFFF" stroke="#1D4ED8"/>
|
||
<rect x="172" y="92" width="46" height="20" rx="2" fill="#DBEAFE"/>
|
||
<rect x="228" y="86" width="58" height="40" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="234" y="92" width="46" height="20" rx="2" fill="#FAFBFC"/>
|
||
<rect x="290" y="86" width="58" height="40" rx="4" fill="#FFFFFF" stroke="#E6E8EC"/>
|
||
<rect x="296" y="92" width="46" height="20" rx="2" fill="#FAFBFC"/>
|
||
<!-- recommendation bar -->
|
||
<rect x="104" y="132" width="244" height="20" rx="4" fill="#0F172A"/>
|
||
<rect x="112" y="138" width="120" height="8" rx="2" fill="#E2E8F0"/>
|
||
<rect x="284" y="135" width="58" height="14" rx="3" fill="#F2994A"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-eyebrow">Site Finder · Screen 2 + 3</span>
|
||
<h3>/site-finder/анализ — sidebar на 5 разделов</h3>
|
||
<p class="card-lede">Sidebar: Инфо / Сети 1–1,5 км / Продажи конкурентов (3.1/3.2/3.3) / Оценка / Атмосфера. Раздел 3 — 8-секционный модуль с 4 настройками и 4 выводами (планировки с превью, остатки, ассортимент vs скорость, рекомендация).</p>
|
||
<div class="card-tags">
|
||
<span class="card-tag">Sidebar nav</span>
|
||
<span class="card-tag">8-секц. модуль</span>
|
||
<span class="card-tag">JS pane-switch</span>
|
||
</div>
|
||
<span class="card-link">Открыть превью</span>
|
||
</div>
|
||
</a>
|
||
|
||
</section>
|
||
|
||
<aside class="note" role="note">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" 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>
|
||
<p><b>Все цифры — иллюстративные.</b> KPI, имена девелоперов, цены м², проценты sold, координаты пинов и кадастровые номера синтезированы под Свердловскую область для презентации макетов. Реальные fixtures из DOM.РФ / Rosreestr / Yandex Realty подключаются на этапе интеграции с продакшн-API.</p>
|
||
</aside>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<span>gendsgn · превью v1 · собрано из UI brief</span>
|
||
<span>5 экранов · Inter + tabular-nums · brief HEX-палитра</span>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|