mirror of
https://github.com/wasrusgen/zov-tech.git
synced 2026-06-03 15:04:50 +00:00
fix(preview): correct fridge taxonomy — columns moved to built-in (3 variants: cold, freeze, pair); morozilka stays in freestanding
This commit is contained in:
wasrusgen
parent
f2e3333846
commit
fe51f44bd9
@ -147,9 +147,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="kicker">Превью · Editorial Calm</div>
|
||||
<div class="kicker">Превью v2 · Editorial Calm</div>
|
||||
<h1>Холодильники.<br><em style="color: var(--walnut)">Подбор по типу</em></h1>
|
||||
<p class="lede">Семь силуэтных пиктограмм для wizard-выбора в MiniApp. Стиль: line-art, обводка walnut, без заливки. Размер ~96×128 px на карточке.</p>
|
||||
<p class="lede">Структура с правильным разделением: колонны теперь во встроенных, морозильная камера осталась в отдельностоящих.</p>
|
||||
|
||||
<!-- Шаг 1 — главный выбор -->
|
||||
<div class="section-label">Шаг 1 · тип установки</div>
|
||||
@ -157,14 +157,12 @@
|
||||
|
||||
<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>
|
||||
@ -174,14 +172,12 @@
|
||||
|
||||
<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>
|
||||
@ -191,8 +187,8 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Если выбран встроенный, что показываем дальше -->
|
||||
<div class="section-label">Если встроенный · камеры</div>
|
||||
<!-- ВСТРОЕННЫЙ -->
|
||||
<div class="section-label">если встроенный · тип</div>
|
||||
<div class="grid">
|
||||
|
||||
<button class="card">
|
||||
@ -202,53 +198,134 @@
|
||||
<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"/>
|
||||
<!-- внутреннее полое пространство — намёк на одну камеру -->
|
||||
<line x1="22" y1="20" x2="22" y2="108" stroke-dasharray="2 4" stroke-width="0.8" opacity="0.5"/>
|
||||
<!-- 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>
|
||||
<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="42" x2="82" y2="42"/>
|
||||
<line x1="78" y1="18" x2="78" y2="34"/>
|
||||
<line x1="78" y1="50" x2="78" y2="110"/>
|
||||
<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>
|
||||
<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="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>
|
||||
<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"/>
|
||||
@ -257,46 +334,32 @@
|
||||
<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>
|
||||
<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="40" x2="82" y2="40"/>
|
||||
<line x1="14" y1="68" x2="82" y2="68"/>
|
||||
<line x1="14" y1="96" x2="82" y2="96"/>
|
||||
<!-- горизонтальные ручки ящиков -->
|
||||
<line x1="40" y1="28" x2="56" y2="28"/>
|
||||
<line x1="40" y1="56" x2="56" y2="56"/>
|
||||
<line x1="40" y1="84" x2="56" y2="84"/>
|
||||
<line x1="40" y1="112" x2="56" y2="112"/>
|
||||
<line x1="22" y1="120" x2="22" y2="126"/>
|
||||
<line x1="74" y1="120" x2="74" y2="126"/>
|
||||
<text x="48" y="22" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.7">❄</text>
|
||||
</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" 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>
|
||||
@ -305,19 +368,20 @@
|
||||
|
||||
<button class="card">
|
||||
<div class="pict">
|
||||
<!-- French Door — две верхние дверки + одна нижняя -->
|
||||
<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="116" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="currentColor" stroke="none" opacity="0.7">❄</text>
|
||||
<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>
|
||||
@ -326,25 +390,36 @@
|
||||
|
||||
<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="24" y="4" width="48" height="120" rx="4"/>
|
||||
<rect x="60" y="14" width="3" height="100" rx="1.5" fill="currentColor" opacity="0.85"/>
|
||||
<!-- встройка показана пунктиром -->
|
||||
<rect x="18" y="0" width="60" height="128" rx="6" stroke-dasharray="3 3" stroke-width="1" opacity="0.45"/>
|
||||
<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>
|
||||
<div class="name">Морозильная камера</div>
|
||||
<div class="hint">отдельный морозильник</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="footer-note">
|
||||
<div class="title">Что оцениваем</div>
|
||||
<div class="title">Что поменялось vs v1</div>
|
||||
<ul style="margin: 0 0 0 16px; padding: 0; line-height: 1.6;">
|
||||
<li>Понятно ли где какой тип <em>с одного взгляда</em></li>
|
||||
<li>Узнаваемы ли SbS / French Door / Колонна без подписей</li>
|
||||
<li>Editorial-стиль (line-art, walnut, серый paper) — ОК или хочется фотореалистично</li>
|
||||
<li>«Колонна» перенесена из <em>отдельностоящих</em> во <em>встроенные</em></li>
|
||||
<li>Колонн стало <strong>три</strong>: холодильная (полки), морозильная (ящики, ❄), пара (рядом)</li>
|
||||
<li>В каждой пиктограмме теперь визуально показано <em>содержимое</em> — полки для холода, ящики для мороза</li>
|
||||
<li>«Морозильная камера» остаётся в <em>отдельностоящих</em> — это отдельный морозильник (не колонна)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user