wasrusgen/zov-tech
1
0
Fork 0
mirror of https://github.com/wasrusgen/zov-tech.git synced 2026-06-03 18:24:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

miniapp: redraw fridge pictograms in style D (3D perspective with shadow)

Browse Source
This commit is contained in:
wasrusgen 2026-05-10 23:33:07 +03:00
parent 8991e7890d
commit cd5d92ea17
1 changed files with 289 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

475
miniapp/preview-fridges.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#FBF7F0"> <meta name="theme-color" content="#FBF7F0">
<title>Превью пиктограмм · Холодильники</title> <title>Превью пиктограмм · Холодильники · 3D</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <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">
@ -31,11 +31,7 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.wrap { .wrap { max-width: 720px; margin: 0 auto; padding: 24px 20px 80px; }
max-width: 720px;
margin: 0 auto;
padding: 24px 20px 80px;
}
h1 { h1 {
font-family: "Newsreader", Georgia, serif; font-family: "Newsreader", Georgia, serif;
font-style: italic; font-style: italic;
@ -55,11 +51,7 @@
color: var(--muted); color: var(--muted);
margin-bottom: 4px; margin-bottom: 4px;
} }
.lede { .lede { color: var(--muted); margin: 0 0 32px; font-size: 14px; }
color: var(--muted);
margin: 0 0 32px;
font-size: 14px;
}
.section-label { .section-label {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
font-size: 11px; font-size: 11px;
@ -72,22 +64,13 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.section-label::after { .section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.grid { .grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
} }
@media (min-width: 540px) { @media (min-width: 540px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
.grid { grid-template-columns: 1fr 1fr 1fr; }
}
.card { .card {
background: #fff; background: #fff;
border: 1px solid var(--line); border: 1px solid var(--line);
@ -102,14 +85,8 @@
} }
.card:active { background: var(--warm); transform: scale(0.98); } .card:active { background: var(--warm); transform: scale(0.98); }
.card.active { border-color: var(--walnut); background: var(--warm); } .card.active { border-color: var(--walnut); background: var(--warm); }
.pict { width: 96px; height: 128px; }
.pict {
width: 96px;
height: 128px;
color: var(--walnut);
}
.pict svg { width: 100%; height: 100%; display: block; } .pict svg { width: 100%; height: 100%; display: block; }
.name { .name {
font-family: "Geist", sans-serif; font-family: "Geist", sans-serif;
font-size: 13.5px; font-size: 13.5px;
@ -127,7 +104,6 @@
color: var(--muted); color: var(--muted);
text-align: center; text-align: center;
} }
.footer-note { .footer-note {
margin-top: 40px; margin-top: 40px;
padding: 16px; padding: 16px;
@ -146,10 +122,46 @@
</style> </style>
</head> </head>
<body> <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="wrap">
<div class="kicker">Превью v2 · Editorial Calm</div> <div class="kicker">Превью v3 · 3D перспектива</div>
<h1>Холодильники.<br><em style="color: var(--walnut)">Подбор по типу</em></h1> <h1>Холодильники.<br><em style="color: var(--walnut)">Подбор по типу</em></h1>
<p class="lede">Структура с правильным разделением: колонны теперь во встроенных, морозильная камера осталась в отдельностоящих.</p> <p class="lede">Стиль D — мягкая тень, градиентный корпус, фронтальная перспектива. Холод — светлый верх, мороз — тёплый низ.</p>
<!-- Шаг 1 — главный выбор --> <!-- Шаг 1 — главный выбор -->
<div class="section-label">Шаг 1 · тип установки</div> <div class="section-label">Шаг 1 · тип установки</div>
@ -157,13 +169,21 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Встроенный --> <!-- Встроенный — корпус в нише -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <svg viewBox="0 0 96 128">
<rect x="14" y="8" width="68" height="112" rx="3"/> <!-- ниша (стенки кухни) -->
<line x1="14" y1="46" x2="82" y2="46"/> <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"/>
<line x1="78" y1="22" x2="78" y2="34"/> <!-- тень -->
<line x1="78" y1="58" x2="78" y2="106"/> <rect x="18" y="12" width="68" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
<rect x="6" y="4" width="84" height="120" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/> <!-- корпус -->
<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> </svg>
</div> </div>
<div class="name">Встроенный</div> <div class="name">Встроенный</div>
@ -172,14 +192,24 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Отдельностоящий --> <!-- Отдельностоящий — соло, с ножками -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <svg viewBox="0 0 96 128">
<rect x="14" y="8" width="68" height="112" rx="6"/> <!-- тень -->
<line x1="14" y1="46" x2="82" y2="46"/> <rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
<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"/> <rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
<line x1="22" y1="120" x2="22" y2="126"/> <!-- блик -->
<line x1="74" y1="120" x2="74" y2="126"/> <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> </svg>
</div> </div>
<div class="name">Отдельностоящий</div> <div class="name">Отдельностоящий</div>
@ -193,15 +223,20 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Однокамерный встроенный --> <!-- Однокамерный встроенный — одна холодная зона, полки -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <svg viewBox="0 0 96 128">
<rect x="14" y="8" width="68" height="112" rx="3"/> <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"/>
<line x1="78" y1="22" x2="78" y2="106"/> <rect x="18" y="12" width="68" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
<rect x="6" y="4" width="84" height="120" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/> <rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.6"/>
<!-- 3 полки внутри: холод --> <rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-sheen)"/>
<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="30" x2="74" y2="30" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
<line x1="22" y1="88" x2="74" y2="88" stroke-dasharray="2 4" opacity="0.6"/> <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> </svg>
</div> </div>
<div class="name">Однокамерный</div> <div class="name">Однокамерный</div>
@ -210,18 +245,27 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Двухкамерный встроенный --> <!-- Двухкамерный встроенный — холод сверху + мороз снизу -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <svg viewBox="0 0 96 128">
<rect x="14" y="8" width="68" height="112" rx="3"/> <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"/>
<line x1="14" y1="40" x2="82" y2="40"/> <rect x="18" y="12" width="68" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
<line x1="78" y1="18" x2="78" y2="32"/> <rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
<line x1="78" y1="48" x2="78" y2="110"/> <rect x="14" y="8" width="68" height="112" rx="4" fill="url(#g-sheen)"/>
<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="14" y1="64" x2="82" y2="64" stroke="#6B4A2B" stroke-width="1.4"/>
<!-- полки в нижней (холод) --> <!-- полки холода (верх) -->
<line x1="22" y1="60" x2="74" y2="60" stroke-dasharray="2 4" opacity="0.5"/> <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="80" x2="74" y2="80" stroke-dasharray="2 4" opacity="0.5"/> <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="100" x2="74" y2="100" stroke-dasharray="2 4" opacity="0.5"/> <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> </svg>
</div> </div>
<div class="name">Двухкамерный</div> <div class="name">Двухкамерный</div>
@ -230,17 +274,21 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Холодильная колонна — узкая высокая, полки --> <!-- Холодильная колонна встроенная — узкая высокая, полки -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <svg viewBox="0 0 96 128">
<rect x="28" y="6" width="40" height="116" rx="3"/> <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"/>
<line x1="64" y1="18" x2="64" y2="110"/> <rect x="32" y="12" width="40" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
<rect x="22" y="2" width="52" height="124" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/> <rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.6"/>
<!-- 5 полок --> <rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-sheen)"/>
<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="34" y1="22" x2="62" y2="22" stroke="#6B4A2B" stroke-width="1" 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="34" y1="38" x2="62" y2="38" stroke="#6B4A2B" stroke-width="1" 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="34" y1="54" x2="62" y2="54" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.5"/>
<line x1="32" y1="102" x2="62" y2="102" 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> </svg>
</div> </div>
<div class="name">Холодильная колонна</div> <div class="name">Холодильная колонна</div>
@ -249,25 +297,22 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Морозильная колонна — узкая высокая, ящики --> <!-- Морозильная колонна встроенная — узкая высокая, ящики, ❄ -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <svg viewBox="0 0 96 128">
<rect x="28" y="6" width="40" height="116" rx="3"/> <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"/>
<line x1="64" y1="18" x2="64" y2="110"/> <rect x="32" y="12" width="40" height="112" rx="4" fill="#6B4A2B" opacity="0.1"/>
<rect x="22" y="2" width="52" height="124" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.55"/> <rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-freeze)" stroke="#6B4A2B" stroke-width="1.6"/>
<!-- 5 ящиков-разделителей --> <rect x="28" y="8" width="40" height="112" rx="4" fill="url(#g-sheen)"/>
<line x1="28" y1="28" x2="68" y2="28"/> <!-- ❄ вверху -->
<line x1="28" y1="48" x2="68" y2="48"/> <text x="48" y="24" font-family="JetBrains Mono" font-size="9" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
<line x1="28" y1="68" x2="68" y2="68"/> <!-- ящики -->
<line x1="28" y1="88" x2="68" y2="88"/> <rect x="34" y="30" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="28" y1="108" x2="68" y2="108"/> <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"/>
<line x1="40" y1="18" x2="56" y2="18"/> <rect x="34" y="78" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="40" y1="38" x2="56" y2="38"/> <rect x="34" y="94" width="28" height="12" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="40" y1="58" x2="56" y2="58"/> <!-- ручка -->
<line x1="40" y1="78" x2="56" y2="78"/> <rect x="62.5" y="28" width="2.5" height="84" rx="1" fill="#6B4A2B"/>
<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> </svg>
</div> </div>
<div class="name">Морозильная колонна</div> <div class="name">Морозильная колонна</div>
@ -276,26 +321,34 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Пара колонн — две узкие рядом --> <!-- Пара колонн встроенная — холод + мороз рядом -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <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="10" y="6" width="36" height="116" rx="3"/> <rect x="6" y="8" width="36" height="112" rx="3" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.4"/>
<line x1="42" y1="18" x2="42" y2="110"/> <rect x="6" y="8" width="36" height="112" rx="3" fill="url(#g-sheen)"/>
<line x1="16" y1="26" x2="38" y2="26" stroke-dasharray="2 3" opacity="0.5"/> <line x1="10" y1="20" x2="38" y2="20" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
<line x1="16" y1="46" x2="38" y2="46" stroke-dasharray="2 3" 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="16" y1="66" x2="38" y2="66" stroke-dasharray="2 3" 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="16" y1="86" x2="38" y2="86" stroke-dasharray="2 3" 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="16" y1="106" x2="38" y2="106" stroke-dasharray="2 3" 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="50" y="6" width="36" height="116" rx="3"/> <rect x="46" y="8" width="36" height="112" rx="3" fill="url(#g-freeze)" stroke="#6B4A2B" stroke-width="1.4"/>
<line x1="54" y1="18" x2="54" y2="110"/> <rect x="46" y="8" width="36" height="112" rx="3" fill="url(#g-sheen)"/>
<line x1="50" y1="32" x2="86" y2="32"/> <text x="64" y="20" font-family="JetBrains Mono" font-size="7" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
<line x1="50" y1="56" x2="86" y2="56"/> <rect x="51" y="26" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
<line x1="50" y1="80" x2="86" y2="80"/> <rect x="51" y="40" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
<line x1="50" y1="104" x2="86" y2="104"/> <rect x="51" y="54" width="26" height="10" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
<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="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="4" y="2" width="88" height="124" rx="5" stroke-dasharray="3 3" stroke-width="1" opacity="0.45"/> <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> </svg>
</div> </div>
<div class="name">Пара колонн</div> <div class="name">Пара колонн</div>
@ -309,15 +362,22 @@
<button class="card"> <button class="card">
<div class="pict"> <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"/> <svg viewBox="0 0 96 128">
<rect x="69" y="20" width="3" height="86" rx="1.5" fill="currentColor" opacity="0.85"/> <rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
<line x1="22" y1="120" x2="22" y2="126"/> <rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-cold)" stroke="#6B4A2B" stroke-width="1.6"/>
<line x1="74" y1="120" x2="74" y2="126"/> <rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-sheen)"/>
<!-- 3 полки --> <!-- полки -->
<line x1="22" y1="40" x2="74" y2="40" stroke-dasharray="2 3" opacity="0.5"/> <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="62" x2="74" y2="62" stroke-dasharray="2 3" opacity="0.5"/> <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="84" x2="74" y2="84" stroke-dasharray="2 3" opacity="0.5"/> <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> </svg>
</div> </div>
<div class="name">Однокамерный</div> <div class="name">Однокамерный</div>
@ -326,18 +386,29 @@
<button class="card"> <button class="card">
<div class="pict"> <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"/> <svg viewBox="0 0 96 128">
<line x1="14" y1="78" x2="82" y2="78"/> <rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
<rect x="69" y="18" width="3" height="48" rx="1.5" fill="currentColor" opacity="0.85"/> <rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
<rect x="69" y="88" width="3" height="22" rx="1.5" fill="currentColor" opacity="0.85"/> <rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-sheen)"/>
<line x1="22" y1="120" x2="22" y2="126"/> <!-- раздел дверей -->
<line x1="74" y1="120" x2="74" y2="126"/> <line x1="14" y1="62" x2="82" y2="62" stroke="#6B4A2B" stroke-width="1.4"/>
<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="22" x2="74" y2="22" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
<line x1="22" y1="30" x2="68" y2="30" stroke-dasharray="2 3" opacity="0.4"/> <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="48" x2="68" y2="48" stroke-dasharray="2 3" opacity="0.4"/> <line x1="22" y1="54" x2="74" y2="54" stroke="#6B4A2B" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"/>
<line x1="22" y1="66" x2="68" y2="66" stroke-dasharray="2 3" opacity="0.4"/> <!-- ящики мороза -->
<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> </svg>
</div> </div>
<div class="name">Двухкамерный</div> <div class="name">Двухкамерный</div>
@ -346,20 +417,35 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <!-- Side-by-Side отдельностоящий — мороз слева, холод справа -->
<rect x="10" y="8" width="76" height="112" rx="6"/> <svg viewBox="0 0 96 128">
<line x1="48" y1="8" x2="48" y2="120"/> <rect x="14" y="12" width="76" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
<rect x="42" y="18" width="3" height="94" rx="1.5" fill="currentColor" opacity="0.85"/> <rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-sbs)" stroke="#6B4A2B" stroke-width="1.6"/>
<rect x="51" y="18" width="3" height="94" rx="1.5" fill="currentColor" opacity="0.85"/> <rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-sheen)"/>
<line x1="20" y1="120" x2="20" y2="126"/> <!-- центральный раздел -->
<line x1="76" y1="120" x2="76" y2="126"/> <line x1="48" y1="8" x2="48" y2="116" stroke="#6B4A2B" stroke-width="1.4"/>
<!-- левая половина — мороз, правая — холод --> <!-- мороз слева: ❄ + ящики -->
<text x="28" y="22" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.7">❄</text> <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"/>
<line x1="56" y1="38" x2="80" y2="38" stroke-dasharray="2 3" opacity="0.4"/> <rect x="16" y="42" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
<line x1="56" y1="58" x2="80" y2="58" stroke-dasharray="2 3" opacity="0.4"/> <rect x="16" y="56" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
<line x1="56" y1="78" x2="80" y2="78" stroke-dasharray="2 3" opacity="0.4"/> <rect x="16" y="70" width="28" height="11" rx="1" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1"/>
<line x1="56" y1="98" x2="80" y2="98" stroke-dasharray="2 3" opacity="0.4"/> <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> </svg>
</div> </div>
<div class="name">Side-by-Side</div> <div class="name">Side-by-Side</div>
@ -368,20 +454,33 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <!-- French Door — две двери сверху (холод), ящик снизу (мороз) -->
<rect x="10" y="8" width="76" height="112" rx="6"/> <svg viewBox="0 0 96 128">
<line x1="10" y1="74" x2="86" y2="74"/> <rect x="14" y="12" width="76" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
<line x1="48" y1="8" x2="48" y2="74"/> <rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-twoch)" stroke="#6B4A2B" stroke-width="1.6"/>
<rect x="42" y="20" width="3" height="44" rx="1.5" fill="currentColor" opacity="0.85"/> <rect x="10" y="8" width="76" height="108" rx="6" fill="url(#g-sheen)"/>
<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="10" y1="68" x2="86" y2="68" stroke="#6B4A2B" stroke-width="1.4"/>
<line x1="20" y1="120" x2="20" y2="126"/> <!-- верхняя — раздел на 2 двери -->
<line x1="76" y1="120" x2="76" y2="126"/> <line x1="48" y1="8" x2="48" y2="68" stroke="#6B4A2B" stroke-width="1.4"/>
<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="16" y1="24" x2="42" y2="24" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
<line x1="54" y1="38" x2="78" y2="38" stroke-dasharray="2 3" opacity="0.4"/> <line x1="54" y1="24" x2="80" y2="24" stroke="#6B4A2B" stroke-width="0.9" stroke-dasharray="2 2" opacity="0.5"/>
<line x1="18" y1="58" x2="42" y2="58" stroke-dasharray="2 3" opacity="0.4"/> <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="58" x2="78" y2="58" stroke-dasharray="2 3" opacity="0.4"/> <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> </svg>
</div> </div>
<div class="name">French Door</div> <div class="name">French Door</div>
@ -390,22 +489,23 @@
<button class="card"> <button class="card">
<div class="pict"> <div class="pict">
<!-- Морозильная камера (отдельный морозильник) — пухлый, с ящиками --> <!-- Морозильная камера отдельностоящая — отдельный морозильник -->
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"> <svg viewBox="0 0 96 128">
<rect x="14" y="8" width="68" height="112" rx="6"/> <rect x="18" y="12" width="68" height="108" rx="6" fill="#6B4A2B" opacity="0.1"/>
<!-- 4 ящика --> <rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-freeze)" stroke="#6B4A2B" stroke-width="1.6"/>
<line x1="14" y1="36" x2="82" y2="36"/> <rect x="14" y="8" width="68" height="108" rx="6" fill="url(#g-sheen)"/>
<line x1="14" y1="62" x2="82" y2="62"/> <!-- ❄ -->
<line x1="14" y1="88" x2="82" y2="88"/> <text x="48" y="24" font-family="JetBrains Mono" font-size="11" fill="#6B4A2B" stroke="none" text-anchor="middle">❄</text>
<line x1="14" y1="112" x2="82" y2="112"/> <!-- ящики -->
<!-- ручки --> <rect x="20" y="32" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="38" y1="24" x2="58" y2="24"/> <rect x="20" y="50" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="38" y1="50" x2="58" y2="50"/> <rect x="20" y="68" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="38" y1="76" x2="58" y2="76"/> <rect x="20" y="86" width="56" height="14" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="38" y1="102" x2="58" y2="102"/> <rect x="20" y="104" width="56" height="8" rx="1.5" fill="#FBF7F0" stroke="#6B4A2B" stroke-width="1.1"/>
<line x1="22" y1="120" x2="22" y2="126"/> <!-- ножки -->
<line x1="74" y1="120" x2="74" y2="126"/> <rect x="22" y="116" width="6" height="6" rx="1" fill="#6B4A2B"/>
<text x="48" y="18" text-anchor="middle" font-family="JetBrains Mono" font-size="11" fill="currentColor" stroke="none" opacity="0.85">❄</text> <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> </svg>
</div> </div>
<div class="name">Морозильная камера</div> <div class="name">Морозильная камера</div>
@ -414,14 +514,17 @@
</div> </div>
<div class="footer-note"> <div class="footer-note">
<div class="title">Что поменялось vs v1</div> <div class="title">Визуальный язык v3 — что общего</div>
<ul style="margin: 0 0 0 16px; padding: 0; line-height: 1.6;"> <ul style="margin: 0 0 0 16px; padding: 0; line-height: 1.6;">
<li>«Колонна» перенесена из <em>отдельностоящих</em> во <em>встроенные</em></li> <li><strong>Холод</strong> — белый/кремовый градиент, пунктирные полки</li>
<li>Колонн стало <strong>три</strong>: холодильная (полки), морозильная (ящики, ❄), пара (рядом)</li> <li><strong>Мороз</strong> — тёплый ореховый градиент, кремовые ящики-рамки, ❄</li>
<li>В каждой пиктограмме теперь визуально показано <em>содержимое</em> — полки для холода, ящики для мороза</li> <li><strong>Встроенный</strong> — пунктирная рамка ниши снаружи корпуса</li>
<li>«Морозильная камера» остаётся в <em>отдельностоящих</em> — это отдельный морозильник (не колонна)</li> <li><strong>Отдельностоящий</strong> — ножки + лёгкая линия пола</li>
<li><strong>Тень</strong> — сдвиг 4px вниз-вправо, орех @10%, мягкая</li>
<li><strong>Блик</strong> — диагональная полоска белого сверху-слева для объёма</li>
</ul> </ul>
</div> </div>
</div> </div>
</body> </body>
</html> </html>