mirror of
https://github.com/wasrusgen/zov-tech.git
synced 2026-06-03 15:44:47 +00:00
428 lines
20 KiB
HTML
428 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#FBF7F0">
|
||
<title>Превью пиктограмм · Холодильники</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Newsreader:ital,wght@0,400..600;1,400..600&family=JetBrains+Mono:wght@400;500&display=swap">
|
||
<style>
|
||
:root {
|
||
--paper: #FBF7F0;
|
||
--ink: #1F1A14;
|
||
--muted: #8B8275;
|
||
--line: rgba(31, 26, 20, 0.18);
|
||
--walnut: #6B4A2B;
|
||
--terracotta: #B85A2D;
|
||
--warm: #F5EDDC;
|
||
--r: 16px;
|
||
}
|
||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||
html, body { margin: 0; padding: 0; }
|
||
body {
|
||
font-family: "Geist", system-ui, sans-serif;
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
font-size: 15px;
|
||
line-height: 1.45;
|
||
letter-spacing: -0.01em;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
.wrap {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
padding: 24px 20px 80px;
|
||
}
|
||
h1 {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-size: 36px;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.02em;
|
||
margin: 0 0 8px;
|
||
color: var(--ink);
|
||
}
|
||
.kicker {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 4px;
|
||
}
|
||
.lede {
|
||
color: var(--muted);
|
||
margin: 0 0 32px;
|
||
font-size: 14px;
|
||
}
|
||
.section-label {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin: 32px 0 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.section-label::after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--line);
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
@media (min-width: 540px) {
|
||
.grid { grid-template-columns: 1fr 1fr 1fr; }
|
||
}
|
||
|
||
.card {
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r);
|
||
padding: 16px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.12s;
|
||
}
|
||
.card:active { background: var(--warm); transform: scale(0.98); }
|
||
.card.active { border-color: var(--walnut); background: var(--warm); }
|
||
|
||
.pict {
|
||
width: 96px;
|
||
height: 128px;
|
||
color: var(--walnut);
|
||
}
|
||
.pict svg { width: 100%; height: 100%; display: block; }
|
||
|
||
.name {
|
||
font-family: "Geist", sans-serif;
|
||
font-size: 13.5px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
letter-spacing: -0.01em;
|
||
color: var(--ink);
|
||
}
|
||
.hint {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9.5px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-note {
|
||
margin-top: 40px;
|
||
padding: 16px;
|
||
background: var(--warm);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r);
|
||
font-size: 13.5px;
|
||
color: var(--ink);
|
||
}
|
||
.footer-note .title {
|
||
font-family: "Newsreader", Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 18px;
|
||
margin-bottom: 6px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="kicker">Превью v2 · Editorial Calm</div>
|
||
<h1>Холодильники.<br><em style="color: var(--walnut)">Подбор по типу</em></h1>
|
||
<p class="lede">Структура с правильным разделением: колонны теперь во встроенных, морозильная камера осталась в отдельностоящих.</p>
|
||
|
||
<!-- Шаг 1 — главный выбор -->
|
||
<div class="section-label">Шаг 1 · тип установки</div>
|
||
<div class="grid">
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Встроенный -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="14" y="8" width="68" height="112" rx="3"/>
|
||
<line x1="14" y1="46" x2="82" y2="46"/>
|
||
<line x1="78" y1="22" x2="78" y2="34"/>
|
||
<line x1="78" y1="58" x2="78" y2="106"/>
|
||
<rect x="6" y="4" width="84" height="120" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Встроенный</div>
|
||
<div class="hint">под фасад</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Отдельностоящий -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="14" y="8" width="68" height="112" rx="6"/>
|
||
<line x1="14" y1="46" x2="82" y2="46"/>
|
||
<rect x="69" y="18" width="3" height="20" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<rect x="69" y="56" width="3" height="50" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<line x1="22" y1="120" x2="22" y2="126"/>
|
||
<line x1="74" y1="120" x2="74" y2="126"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Отдельностоящий</div>
|
||
<div class="hint">соло на полу</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ВСТРОЕННЫЙ -->
|
||
<div class="section-label">если встроенный · тип</div>
|
||
<div class="grid">
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Однокамерный встроенный -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="14" y="8" width="68" height="112" rx="3"/>
|
||
<line x1="78" y1="22" x2="78" y2="106"/>
|
||
<rect x="6" y="4" width="84" height="120" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/>
|
||
<!-- 3 полки внутри: холод -->
|
||
<line x1="22" y1="36" x2="74" y2="36" stroke-dasharray="2 4" opacity="0.6"/>
|
||
<line x1="22" y1="62" x2="74" y2="62" stroke-dasharray="2 4" opacity="0.6"/>
|
||
<line x1="22" y1="88" x2="74" y2="88" stroke-dasharray="2 4" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Однокамерный</div>
|
||
<div class="hint">только холод</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Двухкамерный встроенный -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="14" y="8" width="68" height="112" rx="3"/>
|
||
<line x1="14" y1="40" x2="82" y2="40"/>
|
||
<line x1="78" y1="18" x2="78" y2="32"/>
|
||
<line x1="78" y1="48" x2="78" y2="110"/>
|
||
<rect x="6" y="4" width="84" height="120" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/>
|
||
<text x="48" y="28" text-anchor="middle" font-family="JetBrains Mono" font-size="9" font-weight="500" fill="currentColor" stroke="none" opacity="0.7">❄</text>
|
||
<!-- полки в нижней (холод) -->
|
||
<line x1="22" y1="60" x2="74" y2="60" stroke-dasharray="2 4" opacity="0.5"/>
|
||
<line x1="22" y1="80" x2="74" y2="80" stroke-dasharray="2 4" opacity="0.5"/>
|
||
<line x1="22" y1="100" x2="74" y2="100" stroke-dasharray="2 4" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Двухкамерный</div>
|
||
<div class="hint">холод + мороз в одном</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Холодильная колонна — узкая высокая, полки -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="28" y="6" width="40" height="116" rx="3"/>
|
||
<line x1="64" y1="18" x2="64" y2="110"/>
|
||
<rect x="22" y="2" width="52" height="124" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/>
|
||
<!-- 5 полок -->
|
||
<line x1="32" y1="22" x2="62" y2="22" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="32" y1="42" x2="62" y2="42" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="32" y1="62" x2="62" y2="62" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="32" y1="82" x2="62" y2="82" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="32" y1="102" x2="62" y2="102" stroke-dasharray="2 3" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Холодильная колонна</div>
|
||
<div class="hint">только холод · высокая</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Морозильная колонна — узкая высокая, ящики -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="28" y="6" width="40" height="116" rx="3"/>
|
||
<line x1="64" y1="18" x2="64" y2="110"/>
|
||
<rect x="22" y="2" width="52" height="124" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/>
|
||
<!-- 5 ящиков-разделителей -->
|
||
<line x1="28" y1="28" x2="68" y2="28"/>
|
||
<line x1="28" y1="48" x2="68" y2="48"/>
|
||
<line x1="28" y1="68" x2="68" y2="68"/>
|
||
<line x1="28" y1="88" x2="68" y2="88"/>
|
||
<line x1="28" y1="108" x2="68" y2="108"/>
|
||
<!-- горизонтальные ручки на ящиках -->
|
||
<line x1="40" y1="18" x2="56" y2="18"/>
|
||
<line x1="40" y1="38" x2="56" y2="38"/>
|
||
<line x1="40" y1="58" x2="56" y2="58"/>
|
||
<line x1="40" y1="78" x2="56" y2="78"/>
|
||
<line x1="40" y1="98" x2="56" y2="98"/>
|
||
<line x1="40" y1="118" x2="56" y2="118"/>
|
||
<text x="48" y="12" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.85">❄</text>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Морозильная колонна</div>
|
||
<div class="hint">только мороз · высокая</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Пара колонн — две узкие рядом -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<!-- холодильная (левая) -->
|
||
<rect x="10" y="6" width="36" height="116" rx="3"/>
|
||
<line x1="42" y1="18" x2="42" y2="110"/>
|
||
<line x1="16" y1="26" x2="38" y2="26" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="16" y1="46" x2="38" y2="46" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="16" y1="66" x2="38" y2="66" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="16" y1="86" x2="38" y2="86" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="16" y1="106" x2="38" y2="106" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<!-- морозильная (правая) -->
|
||
<rect x="50" y="6" width="36" height="116" rx="3"/>
|
||
<line x1="54" y1="18" x2="54" y2="110"/>
|
||
<line x1="50" y1="32" x2="86" y2="32"/>
|
||
<line x1="50" y1="56" x2="86" y2="56"/>
|
||
<line x1="50" y1="80" x2="86" y2="80"/>
|
||
<line x1="50" y1="104" x2="86" y2="104"/>
|
||
<text x="68" y="14" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.85">❄</text>
|
||
<!-- общая встроенная рамка -->
|
||
<rect x="4" y="2" width="88" height="124" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.45"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Пара колонн</div>
|
||
<div class="hint">холод + мороз · рядом</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ОТДЕЛЬНОСТОЯЩИЙ -->
|
||
<div class="section-label">если отдельностоящий · тип</div>
|
||
<div class="grid">
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="14" y="8" width="68" height="112" rx="6"/>
|
||
<rect x="69" y="20" width="3" height="86" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<line x1="22" y1="120" x2="22" y2="126"/>
|
||
<line x1="74" y1="120" x2="74" y2="126"/>
|
||
<!-- 3 полки -->
|
||
<line x1="22" y1="40" x2="74" y2="40" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="22" y1="62" x2="74" y2="62" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="22" y1="84" x2="74" y2="84" stroke-dasharray="2 3" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Однокамерный</div>
|
||
<div class="hint">мини · бар</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="14" y="8" width="68" height="112" rx="6"/>
|
||
<line x1="14" y1="78" x2="82" y2="78"/>
|
||
<rect x="69" y="18" width="3" height="48" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<rect x="69" y="88" width="3" height="22" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<line x1="22" y1="120" x2="22" y2="126"/>
|
||
<line x1="74" y1="120" x2="74" y2="126"/>
|
||
<text x="48" y="103" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.7">❄</text>
|
||
<!-- холодильная часть -->
|
||
<line x1="22" y1="30" x2="68" y2="30" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="22" y1="48" x2="68" y2="48" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="22" y1="66" x2="68" y2="66" stroke-dasharray="2 3" opacity="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Двухкамерный</div>
|
||
<div class="hint">морозилка снизу</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="10" y="8" width="76" height="112" rx="6"/>
|
||
<line x1="48" y1="8" x2="48" y2="120"/>
|
||
<rect x="42" y="18" width="3" height="94" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<rect x="51" y="18" width="3" height="94" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<line x1="20" y1="120" x2="20" y2="126"/>
|
||
<line x1="76" y1="120" x2="76" y2="126"/>
|
||
<!-- левая половина — мороз, правая — холод -->
|
||
<text x="28" y="22" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.7">❄</text>
|
||
<!-- полки в правой части -->
|
||
<line x1="56" y1="38" x2="80" y2="38" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="56" y1="58" x2="80" y2="58" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="56" y1="78" x2="80" y2="78" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="56" y1="98" x2="80" y2="98" stroke-dasharray="2 3" opacity="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Side-by-Side</div>
|
||
<div class="hint">распашной · 2 двери</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="10" y="8" width="76" height="112" rx="6"/>
|
||
<line x1="10" y1="74" x2="86" y2="74"/>
|
||
<line x1="48" y1="8" x2="48" y2="74"/>
|
||
<rect x="42" y="20" width="3" height="44" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<rect x="51" y="20" width="3" height="44" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||
<line x1="36" y1="96" x2="60" y2="96"/>
|
||
<line x1="20" y1="120" x2="20" y2="126"/>
|
||
<line x1="76" y1="120" x2="76" y2="126"/>
|
||
<text x="48" y="118" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.7">❄</text>
|
||
<line x1="18" y1="38" x2="42" y2="38" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="54" y1="38" x2="78" y2="38" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="18" y1="58" x2="42" y2="58" stroke-dasharray="2 3" opacity="0.4"/>
|
||
<line x1="54" y1="58" x2="78" y2="58" stroke-dasharray="2 3" opacity="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">French Door</div>
|
||
<div class="hint">2 двери · морозилка-ящик</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Морозильная камера (отдельный морозильник) — пухлый, с ящиками -->
|
||
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
|
||
<rect x="14" y="8" width="68" height="112" rx="6"/>
|
||
<!-- 4 ящика -->
|
||
<line x1="14" y1="36" x2="82" y2="36"/>
|
||
<line x1="14" y1="62" x2="82" y2="62"/>
|
||
<line x1="14" y1="88" x2="82" y2="88"/>
|
||
<line x1="14" y1="112" x2="82" y2="112"/>
|
||
<!-- ручки -->
|
||
<line x1="38" y1="24" x2="58" y2="24"/>
|
||
<line x1="38" y1="50" x2="58" y2="50"/>
|
||
<line x1="38" y1="76" x2="58" y2="76"/>
|
||
<line x1="38" y1="102" x2="58" y2="102"/>
|
||
<line x1="22" y1="120" x2="22" y2="126"/>
|
||
<line x1="74" y1="120" x2="74" y2="126"/>
|
||
<text x="48" y="18" text-anchor="middle" font-family="JetBrains Mono" font-size="11" fill="currentColor" stroke="none" opacity="0.85">❄</text>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Морозильная камера</div>
|
||
<div class="hint">отдельный морозильник</div>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="footer-note">
|
||
<div class="title">Что поменялось vs v1</div>
|
||
<ul style="margin: 0 0 0 16px; padding: 0; line-height: 1.6;">
|
||
<li>«Колонна» перенесена из <em>отдельностоящих</em> во <em>встроенные</em></li>
|
||
<li>Колонн стало <strong>три</strong>: холодильная (полки), морозильная (ящики, ❄), пара (рядом)</li>
|
||
<li>В каждой пиктограмме теперь визуально показано <em>содержимое</em> — полки для холода, ящики для мороза</li>
|
||
<li>«Морозильная камера» остаётся в <em>отдельностоящих</em> — это отдельный морозильник (не колонна)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|