mirror of
https://github.com/wasrusgen/zov-tech.git
synced 2026-06-03 19:04:49 +00:00
531 lines
31 KiB
HTML
531 lines
31 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>Превью пиктограмм · Холодильники · 3D</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; }
|
||
.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>
|
||
|
||
<!-- Global SVG defs — gradients shared across all pictograms -->
|
||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||
<defs>
|
||
<!-- холод: вертикальный, белый сверху → кремовый снизу -->
|
||
<linearGradient id="g-cold" x1="0" x2="0" y1="0" y2="1">
|
||
<stop offset="0" stop-color="#FFFFFF"/>
|
||
<stop offset="1" stop-color="#F5EDDC"/>
|
||
</linearGradient>
|
||
<!-- мороз: вертикальный, кремовый сверху → ореховый снизу -->
|
||
<linearGradient id="g-freeze" x1="0" x2="0" y1="0" y2="1">
|
||
<stop offset="0" stop-color="#F0E3C8"/>
|
||
<stop offset="1" stop-color="#D8C9A8"/>
|
||
</linearGradient>
|
||
<!-- двухкамерный: резкий переход cold→freeze посередине -->
|
||
<linearGradient id="g-twoch" x1="0" x2="0" y1="0" y2="1">
|
||
<stop offset="0" stop-color="#FFFFFF"/>
|
||
<stop offset="0.48" stop-color="#FBF7F0"/>
|
||
<stop offset="0.52" stop-color="#F0E3C8"/>
|
||
<stop offset="1" stop-color="#D8C9A8"/>
|
||
</linearGradient>
|
||
<!-- side-by-side: горизонтальный, мороз слева → холод справа -->
|
||
<linearGradient id="g-sbs" x1="0" x2="1" y1="0" y2="0">
|
||
<stop offset="0" stop-color="#D8C9A8"/>
|
||
<stop offset="0.48" stop-color="#F0E3C8"/>
|
||
<stop offset="0.52" stop-color="#FBF7F0"/>
|
||
<stop offset="1" stop-color="#FFFFFF"/>
|
||
</linearGradient>
|
||
<!-- блик-полоска на корпусе (накладывается сверху) -->
|
||
<linearGradient id="g-sheen" x1="0" x2="1" y1="0" y2="0">
|
||
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.5"/>
|
||
<stop offset="0.3" stop-color="#FFFFFF" stop-opacity="0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
|
||
<div class="wrap">
|
||
<div class="kicker">Превью v3 · 3D перспектива</div>
|
||
<h1>Холодильники.<br><em style="color: var(--walnut)">Подбор по типу</em></h1>
|
||
<p class="lede">Стиль D — мягкая тень, градиентный корпус, фронтальная перспектива. Холод — светлый верх, мороз — тёплый низ.</p>
|
||
|
||
<!-- Шаг 1 — главный выбор -->
|
||
<div class="section-label">Шаг 1 · тип установки</div>
|
||
<div class="grid">
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Встроенный — корпус в нише -->
|
||
<svg viewBox="0 0 96 128">
|
||
<!-- ниша (стенки кухни) -->
|
||
<rect x="4" y="2" width="88" height="124" rx="4" fill="none" stroke="#6B4A2B" stroke-width="1.1" stroke-dasharray="3 3" opacity="0.45"/>
|
||
<!-- тень -->
|
||
<rect x="18" y="12" width="68" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
|
||
<!-- корпус -->
|
||
<rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<!-- блик -->
|
||
<rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-sheen)"/>
|
||
<!-- раздел на 2 двери -->
|
||
<line x1="14" y1="62" x2="82" y2="62" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<!-- ручки -->
|
||
<rect x="76" y="16" width="3" height="38" rx="1.5" fill="#6B4A2B"/>
|
||
<rect x="76" y="68" width="3" height="44" rx="1.5" fill="#6B4A2B"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Встроенный</div>
|
||
<div class="hint">под фасад</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Отдельностоящий — соло, с ножками -->
|
||
<svg viewBox="0 0 96 128">
|
||
<!-- тень -->
|
||
<rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
|
||
<!-- корпус -->
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<!-- блик -->
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-sheen)"/>
|
||
<!-- раздел дверей -->
|
||
<line x1="14" y1="60" x2="82" y2="60" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<!-- ручки -->
|
||
<rect x="76" y="16" width="3" height="36" rx="1.5" fill="#6B4A2B"/>
|
||
<rect x="76" y="66" width="3" height="42" rx="1.5" fill="#6B4A2B"/>
|
||
<!-- ножки -->
|
||
<rect x="22" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<rect x="68" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<!-- линия пола -->
|
||
<line x1="6" y1="124" x2="90" y2="124" stroke="#6B4A2B" stroke-width="0.8" opacity="0.35"/>
|
||
</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">
|
||
<rect x="4" y="2" width="88" height="124" rx="4" fill="none" stroke="#6B4A2B" stroke-width="1.1" stroke-dasharray="3 3" opacity="0.45"/>
|
||
<rect x="18" y="12" width="68" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-sheen)"/>
|
||
<!-- полки холода -->
|
||
<line x1="22" y1="30" x2="74" y2="30" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="50" x2="74" y2="50" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="70" x2="74" y2="70" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="90" x2="74" y2="90" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="110" x2="74" y2="110" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<!-- ручка -->
|
||
<rect x="76" y="16" width="3" height="96" rx="1.5" fill="#6B4A2B"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Однокамерный</div>
|
||
<div class="hint">только холод</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Двухкамерный встроенный — холод сверху + мороз снизу -->
|
||
<svg viewBox="0 0 96 128">
|
||
<rect x="4" y="2" width="88" height="124" rx="4" fill="none" stroke="#6B4A2B" stroke-width="1.1" stroke-dasharray="3 3" opacity="0.45"/>
|
||
<rect x="18" y="12" width="68" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-sheen)"/>
|
||
<!-- раздел дверей -->
|
||
<line x1="14" y1="64" x2="82" y2="64" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<!-- полки холода (верх) -->
|
||
<line x1="22" y1="22" x2="74" y2="22" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="38" x2="74" y2="38" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="54" x2="74" y2="54" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<!-- ящики мороза (низ) -->
|
||
<rect x="20" y="72" width="56" height="11" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="87" width="56" height="11" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="102" width="56" height="11" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<!-- ❄ -->
|
||
<text x="76" y="78" font-family="JetBrains Mono" font-size="7" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
|
||
<!-- ручки -->
|
||
<rect x="78" y="14" width="2.5" height="40" rx="1" fill="#6B4A2B"/>
|
||
<rect x="78" y="70" width="2.5" height="46" rx="1" fill="#6B4A2B"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Двухкамерный</div>
|
||
<div class="hint">холод + мороз в одном</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Холодильная колонна встроенная — узкая высокая, полки -->
|
||
<svg viewBox="0 0 96 128">
|
||
<rect x="20" y="2" width="56" height="124" rx="4" fill="none" stroke="#6B4A2B" stroke-width="1.1" stroke-dasharray="3 3" opacity="0.45"/>
|
||
<rect x="32" y="12" width="40" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-sheen)"/>
|
||
<!-- полки -->
|
||
<line x1="34" y1="22" x2="62" y2="22" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="34" y1="38" x2="62" y2="38" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="34" y1="54" x2="62" y2="54" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="34" y1="70" x2="62" y2="70" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="34" y1="86" x2="62" y2="86" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<line x1="34" y1="102" x2="62" y2="102" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.5"/>
|
||
<!-- ручка -->
|
||
<rect x="62.5" y="16" width="2.5" height="96" rx="1" fill="#6B4A2B"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Холодильная колонна</div>
|
||
<div class="hint">только холод · высокая</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Морозильная колонна встроенная — узкая высокая, ящики, ❄ -->
|
||
<svg viewBox="0 0 96 128">
|
||
<rect x="20" y="2" width="56" height="124" rx="4" fill="none" stroke="#6B4A2B" stroke-width="1.1" stroke-dasharray="3 3" opacity="0.45"/>
|
||
<rect x="32" y="12" width="40" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-freeze)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-sheen)"/>
|
||
<!-- ❄ вверху -->
|
||
<text x="48" y="24" font-family="JetBrains Mono" font-size="9" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
|
||
<!-- ящики -->
|
||
<rect x="34" y="30" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="34" y="46" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="34" y="62" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="34" y="78" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="34" y="94" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<!-- ручка -->
|
||
<rect x="62.5" y="28" width="2.5" height="84" rx="1" fill="#6B4A2B"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Морозильная колонна</div>
|
||
<div class="hint">только мороз · высокая</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Пара колонн встроенная — холод + мороз рядом -->
|
||
<svg viewBox="0 0 96 128">
|
||
<!-- общая ниша -->
|
||
<rect x="2" y="2" width="92" height="124" rx="4" fill="none" stroke="#6B4A2B" stroke-width="1.1" stroke-dasharray="3 3" opacity="0.45"/>
|
||
<!-- тени -->
|
||
<rect x="10" y="12" width="36" height="112" rx="3" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="50" y="12" width="36" height="112" rx="3" fill="#6B4A2B" opacity="0.1"/>
|
||
<!-- холодильная (левая) -->
|
||
<rect x="6" y="8" width="36" height="112" rx="3" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<rect x="6" y="8" width="36" height="112" rx="3" fill="url(#g-sheen)"/>
|
||
<line x1="10" y1="20" x2="38" y2="20" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="10" y1="36" x2="38" y2="36" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="10" y1="52" x2="38" y2="52" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="10" y1="68" x2="38" y2="68" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="10" y1="84" x2="38" y2="84" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="10" y1="100" x2="38" y2="100" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<rect x="36.5" y="14" width="2" height="100" rx="0.8" fill="#6B4A2B"/>
|
||
<!-- морозильная (правая) -->
|
||
<rect x="46" y="8" width="36" height="112" rx="3" fill="url(#g-freeze)" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<rect x="46" y="8" width="36" height="112" rx="3" fill="url(#g-sheen)"/>
|
||
<text x="64" y="20" font-family="JetBrains Mono" font-size="7" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
|
||
<rect x="51" y="26" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="51" y="40" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="51" y="54" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="51" y="68" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="51" y="82" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="51" y="96" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="45.5" y="14" width="2" height="100" rx="0.8" fill="#6B4A2B"/>
|
||
</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">
|
||
<rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-sheen)"/>
|
||
<!-- полки -->
|
||
<line x1="22" y1="30" x2="74" y2="30" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="50" x2="74" y2="50" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="70" x2="74" y2="70" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="90" x2="74" y2="90" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<!-- ручка -->
|
||
<rect x="76" y="16" width="3" height="92" rx="1.5" fill="#6B4A2B"/>
|
||
<!-- ножки -->
|
||
<rect x="22" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<rect x="68" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<line x1="6" y1="124" x2="90" y2="124" stroke="#6B4A2B" stroke-width="0.8" opacity="0.35"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Однокамерный</div>
|
||
<div class="hint">мини · бар</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Двухкамерный отдельностоящий — морозилка снизу -->
|
||
<svg viewBox="0 0 96 128">
|
||
<rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-sheen)"/>
|
||
<!-- раздел дверей -->
|
||
<line x1="14" y1="62" x2="82" y2="62" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<!-- полки холода -->
|
||
<line x1="22" y1="22" x2="74" y2="22" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="38" x2="74" y2="38" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<line x1="22" y1="54" x2="74" y2="54" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
|
||
<!-- ящики мороза -->
|
||
<rect x="20" y="70" width="56" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="86" width="56" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="102" width="56" height="11" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<text x="76" y="78" font-family="JetBrains Mono" font-size="7" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
|
||
<!-- ручки -->
|
||
<rect x="78" y="14" width="2.5" height="40" rx="1" fill="#6B4A2B"/>
|
||
<rect x="78" y="68" width="2.5" height="42" rx="1" fill="#6B4A2B"/>
|
||
<!-- ножки -->
|
||
<rect x="22" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<rect x="68" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<line x1="6" y1="124" x2="90" y2="124" stroke="#6B4A2B" stroke-width="0.8" opacity="0.35"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Двухкамерный</div>
|
||
<div class="hint">морозилка снизу</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- Side-by-Side отдельностоящий — мороз слева, холод справа -->
|
||
<svg viewBox="0 0 96 128">
|
||
<rect x="14" y="12" width="76" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-sbs)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-sheen)"/>
|
||
<!-- центральный раздел -->
|
||
<line x1="48" y1="8" x2="48" y2="116" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<!-- мороз слева: ❄ + ящики -->
|
||
<text x="29" y="22" font-family="JetBrains Mono" font-size="7" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
|
||
<rect x="16" y="28" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="16" y="42" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="16" y="56" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="16" y="70" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="16" y="84" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<rect x="16" y="98" width="28" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
|
||
<!-- холод справа: полки -->
|
||
<line x1="52" y1="22" x2="82" y2="22" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="52" y1="38" x2="82" y2="38" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="52" y1="54" x2="82" y2="54" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="52" y1="70" x2="82" y2="70" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="52" y1="86" x2="82" y2="86" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="52" y1="102" x2="82" y2="102" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<!-- ручки у центрального раздела -->
|
||
<rect x="42" y="16" width="2.5" height="92" rx="1" fill="#6B4A2B"/>
|
||
<rect x="51.5" y="16" width="2.5" height="92" rx="1" fill="#6B4A2B"/>
|
||
<!-- ножки -->
|
||
<rect x="18" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<rect x="72" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<line x1="6" y1="124" x2="90" y2="124" stroke="#6B4A2B" stroke-width="0.8" opacity="0.35"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Side-by-Side</div>
|
||
<div class="hint">распашной · 2 двери</div>
|
||
</button>
|
||
|
||
<button class="card">
|
||
<div class="pict">
|
||
<!-- French Door — две двери сверху (холод), ящик снизу (мороз) -->
|
||
<svg viewBox="0 0 96 128">
|
||
<rect x="14" y="12" width="76" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-sheen)"/>
|
||
<!-- горизонтальный раздел -->
|
||
<line x1="10" y1="68" x2="86" y2="68" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<!-- верхняя — раздел на 2 двери -->
|
||
<line x1="48" y1="8" x2="48" y2="68" stroke="#6B4A2B" stroke-width="1.4"/>
|
||
<!-- полки холода (по обе стороны) -->
|
||
<line x1="16" y1="24" x2="42" y2="24" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="54" y1="24" x2="80" y2="24" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="16" y1="40" x2="42" y2="40" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="54" y1="40" x2="80" y2="40" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="16" y1="56" x2="42" y2="56" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<line x1="54" y1="56" x2="80" y2="56" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
|
||
<!-- ручки сверху (две, у раздела) -->
|
||
<rect x="42" y="16" width="2.5" height="44" rx="1" fill="#6B4A2B"/>
|
||
<rect x="51.5" y="16" width="2.5" height="44" rx="1" fill="#6B4A2B"/>
|
||
<!-- ящик мороза -->
|
||
<rect x="16" y="76" width="64" height="32" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<text x="48" y="96" font-family="JetBrains Mono" font-size="9" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
|
||
<line x1="38" y1="92" x2="58" y2="92" stroke="#6B4A2B" stroke-width="1.5" stroke-linecap="round" opacity="0"/>
|
||
<!-- ножки -->
|
||
<rect x="18" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<rect x="72" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<line x1="6" y1="124" x2="90" y2="124" stroke="#6B4A2B" stroke-width="0.8" opacity="0.35"/>
|
||
</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">
|
||
<rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-freeze)" stroke="#6B4A2B" stroke-width="1.6"/>
|
||
<rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-sheen)"/>
|
||
<!-- ❄ -->
|
||
<text x="48" y="24" font-family="JetBrains Mono" font-size="11" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
|
||
<!-- ящики -->
|
||
<rect x="20" y="32" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="50" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="68" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="86" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<rect x="20" y="104" width="56" height="8" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
|
||
<!-- ножки -->
|
||
<rect x="22" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<rect x="68" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
|
||
<line x1="6" y1="124" x2="90" y2="124" stroke="#6B4A2B" stroke-width="0.8" opacity="0.35"/>
|
||
</svg>
|
||
</div>
|
||
<div class="name">Морозильная камера</div>
|
||
<div class="hint">отдельный морозильник</div>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="footer-note">
|
||
<div class="title">Визуальный язык v3 — что общего</div>
|
||
<ul style="margin: 0 0 0 16px; padding: 0; line-height: 1.6;">
|
||
<li><strong>Холод</strong> — белый/кремовый градиент, пунктирные полки</li>
|
||
<li><strong>Мороз</strong> — тёплый ореховый градиент, кремовые ящики-рамки, ❄</li>
|
||
<li><strong>Встроенный</strong> — пунктирная рамка ниши снаружи корпуса</li>
|
||
<li><strong>Отдельностоящий</strong> — ножки + лёгкая линия пола</li>
|
||
<li><strong>Тень</strong> — сдвиг 4px вниз-вправо, орех @10%, мягкая</li>
|
||
<li><strong>Блик</strong> — диагональная полоска белого сверху-слева для объёма</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|