simbiot-harness/artifacts/shkor-beauty-prototype.html

443 lines
24 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shkor beauty — корейская косметика в Минске (прототип витрины)</title>
<meta name="description" content="Shkor beauty — витрина магазина корейской косметики: уход за лицом, телом и волосами. Прототип каталога, заказы пока не принимаются.">
<style>
:root{
--ink:#1c1a17; --paper:#faf7f2; --card:#ffffff; --line:#e4ddd2;
--acc:#0e7a5f; --acc-soft:#e7f2ee; --muted:#6f6a61; --sale:#b3352c;
--sans:"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.note{font-family:var(--mono);font-size:12px;background:var(--ink);color:#f4f0e6;padding:6px 0;text-align:center}
.note b{color:#8fd4bd}
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.hbar{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.logo span{color:var(--acc)}
.logo small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.search{flex:1;display:flex}
.search input{flex:1;border:1px solid var(--line);border-right:none;padding:10px 14px;font:inherit;font-size:14px;background:var(--paper);border-radius:6px 0 0 6px;outline:none}
.search input:focus{border-color:var(--acc)}
.search button{border:none;background:var(--acc);color:#fff;padding:0 16px;border-radius:0 6px 6px 0;cursor:pointer;font:inherit;font-size:14px}
.hlinks{display:flex;gap:16px;font-size:14px;white-space:nowrap}
.hlinks a:hover{color:var(--acc)}
nav.cats{display:flex;gap:4px;overflow-x:auto;padding:0 0 10px;font-size:14px}
nav.cats a{padding:6px 12px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
nav.cats a:hover{border-color:var(--acc);color:var(--acc)}
nav.cats a.all{background:var(--acc-soft);color:var(--acc);font-weight:600}
.hero{background:linear-gradient(180deg,var(--acc-soft),var(--paper));border-bottom:1px solid var(--line)}
.hero .wrap{display:flex;gap:40px;align-items:center;padding-top:52px;padding-bottom:52px;flex-wrap:wrap}
.hero h1{font-size:clamp(30px,4.5vw,46px);line-height:1.1;letter-spacing:-.02em;max-width:16ch}
.hero p{margin-top:14px;max-width:48ch;color:var(--muted);font-size:17px}
.hero .btn{display:inline-block;margin-top:22px;background:var(--acc);color:#fff;padding:13px 26px;border-radius:6px;font-weight:600}
.hero .btn.ghost{background:transparent;color:var(--acc);border:1.5px solid var(--acc);margin-left:10px}
.hero .btn.ghost:hover{background:var(--acc-soft)}
.hero .btn:hover{filter:brightness(1.08)}
.rhythm{flex:1;min-width:260px;display:flex;align-items:flex-end;gap:4px;height:120px;opacity:.9}
.rhythm span{flex:1;background:var(--acc);border-radius:3px 3px 0 0;animation:grow 2.8s ease-in-out infinite}
@keyframes grow{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.rhythm span:nth-child(3n){background:var(--ink)}
section{padding:46px 0}
h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;margin-bottom:6px}
.sub{color:var(--muted);font-size:15px;margin-bottom:24px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 18px;transition:transform .15s ease,border-color .15s ease}
.cat:hover{transform:translateY(-2px);border-color:var(--acc)}
.cat .ic{width:38px;height:38px;border-radius:8px;background:var(--acc-soft);margin-bottom:12px;position:relative}
.cat .ic::after{content:"";position:absolute;inset:11px;background:var(--acc);border-radius:50%}
.cat.a .ic::after{border-radius:2px}
.cat.b .ic::after{height:6px;top:16px}
.cat.c .ic::after{width:6px;left:16px}
.cat.d .ic::after{border-radius:50%;inset:14px 11px}
.cat h3{font-size:16px;margin-bottom:4px}
.cat p{font-size:13px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chips a{font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.chips a:hover{border-color:var(--acc);color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.p{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s ease}
.p:hover{box-shadow:0 6px 18px rgba(28,26,23,.08)}
.ph{aspect-ratio:1/1;background:var(--acc-soft);display:flex;align-items:center;justify-content:center;position:relative}
.ph .b{font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--acc);border:1.5px solid var(--acc);padding:8px 14px;border-radius:4px;background:var(--card)}
.ph .tag{position:absolute;top:10px;left:10px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px}
.ph .tag.new{background:var(--acc)}
.pb{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.pb .cat-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pb .brand{font-size:12px;font-weight:700;color:var(--acc);margin-top:4px}
.pb h3{font-size:14.5px;font-weight:400;line-height:1.35;margin:4px 0 10px;flex:1}
.price{display:flex;align-items:baseline;gap:8px}
.price .now{font-size:17px;font-weight:700}
.price .old{font-size:13px;color:var(--muted);text-decoration:line-through}
.p button{margin-top:12px;border:1.5px solid var(--ink);background:transparent;padding:9px;font:inherit;font-size:13.5px;font-weight:600;border-radius:6px;cursor:pointer;transition:.15s}
.p button:hover{background:var(--ink);color:#fff}
.brands{display:flex;flex-wrap:wrap;gap:10px}
.brands span{font-family:var(--mono);font-size:13px;border:1px solid var(--line);padding:8px 16px;border-radius:6px;background:var(--card);color:var(--muted)}
.brands span:hover{color:var(--acc);border-color:var(--acc)}
.dark{background:var(--ink);color:#f4f0e6}
.dark .sub{color:#b9b2a4}
.dark form{display:flex;gap:10px;max-width:480px;margin-top:8px;flex-wrap:wrap}
.dark input{flex:1;min-width:200px;border:1px solid #4a453d;background:transparent;color:inherit;padding:12px 14px;border-radius:6px;font:inherit;outline:none}
.dark input:focus{border-color:var(--acc)}
.dark button{background:var(--acc);border:none;color:#fff;padding:12px 22px;border-radius:6px;font:inherit;font-weight:600;cursor:pointer}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:8px}
.plan-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px}
.plan-card h3{font-size:20px}
.plan-price{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 14px}
.plan-card ul{list-style:none;margin:0 0 18px}
.plan-card li{padding:6px 0 6px 22px;position:relative;font-size:14.5px;color:#3d3a34}
.plan-card li:before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700}
.plan-card .btn{display:inline-block;background:var(--acc);color:#fff;padding:10px 18px;border-radius:6px;font-weight:600}
.plan-card.featured{border:2px solid var(--acc);box-shadow:0 6px 24px rgba(14,122,95,.12)}
.plan-card code{font-family:var(--mono);font-size:12px;background:var(--acc-soft);color:var(--acc);padding:1px 5px;border-radius:4px}
#reqform{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;max-width:760px}
#reqform button{margin-top:4px}
footer{padding:30px 0 40px;color:var(--muted);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer .proto{font-family:var(--mono);font-size:12px}
footer .flinks{display:flex;gap:18px;font-size:13.5px}
footer .flinks a{text-decoration:underline;color:var(--muted)}
footer .flinks a:hover{color:var(--acc)}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;opacity:0;transition:.25s ease;z-index:9}
#toast.show{transform:translate(-50%,0);opacity:1}
@media (max-width:720px){
.hlinks{display:none}
.hero .wrap{padding-top:34px;padding-bottom:34px}
.rhythm{display:none}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
</style>
</head>
<body>
<div class="note">Витрина работает: AI-ассистент подбирает уход, заявки принимаются (Lite-план). Оплата онлайн — на шаге 2.</div>
<header>
<div class="wrap">
<div class="hbar">
<a class="logo" href="#">Shkor <span>beauty</span><small>корейская косметика · Минск</small></a>
<div class="search">
<input type="search" placeholder="Поиск: тонер, пэды, гидрофильное масло…">
<button>Найти</button>
</div>
<div class="hlinks">
<a href="#catalog">Каталог</a>
<a href="#brands">Бренды</a>
<a href="#plans">Магазинам</a>
<a href="#sub">Подписка</a>
</div>
</div>
<nav class="cats" aria-label="Разделы">
<a class="all" href="#catalog">Весь каталог</a>
<a href="#face">Уход за лицом</a>
<a href="#body">Уход за телом</a>
<a href="#hair">Уход за волосами</a>
<a href="#makeup">Декоративная косметика</a>
<a href="#acc">Аксессуары</a>
</nav>
</div>
</header>
<div class="hero">
<div class="wrap">
<div>
<h1>Корейский уход — AI подберёт, привезём за 1 день</h1>
<p>Каталог проверенных K-beauty брендов в Минске + AI-ассистент: разберёт состояние кожи, соберёт рутину и примет заявку. Доставка по Беларуси.</p>
<a class="btn" href="#catalog">Смотреть каталог</a> <a class="btn ghost" href="#request">Оставить заявку</a>
</div>
<div class="rhythm" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<section id="catalog">
<div class="wrap">
<h2>Каталог</h2>
<p class="sub">Пять разделов, как у эталона рынка — структура навигации Korealab.</p>
<div class="catgrid">
<a class="cat a" href="#face"><span class="ic"></span><h3>Уход за лицом</h3><p>Очищение, тонеры, сыворотки, маски, SPF</p></a>
<a class="cat b" href="#body"><span class="ic"></span><h3>Уход за телом</h3><p>Гели для душа, лосьоны, кремы для рук</p></a>
<a class="cat c" href="#hair"><span class="ic"></span><h3>Уход за волосами</h3><p>Шампуни, маски, ампулы, филлеры</p></a>
<a class="cat d" href="#makeup"><span class="ic"></span><h3>Декоративная косметика</h3><p>Тинты, BB-кремы, бальзамы для губ</p></a>
<a class="cat a" href="#acc"><span class="ic"></span><h3>Аксессуары</h3><p>Спонжи, пады, пилочки, зеркала</p></a>
</div>
</div>
</section>
<section id="face" style="padding-top:0">
<div class="wrap">
<h2>Уход за лицом</h2>
<p class="sub">Подкатегории первого уровня — быстрый вход в нужный шаг рутины.</p>
<div class="chips">
<a href="#demo">Очищение</a><a href="#demo">Тонизирование</a><a href="#demo">Сыворотки и эссенции</a>
<a href="#demo">Патчи для глаз</a><a href="#demo">Тканевые маски</a><a href="#demo">Кремы</a>
<a href="#demo">Солнцезащитные средства</a><a href="#demo">Средства с кислотами</a>
</div>
<div class="grid" id="demo">
<article class="p">
<div class="ph"><span class="tag">−30%</span><span class="b">SKIN627</span></div>
<div class="pb">
<span class="cat-l">Сыворотки</span><span class="brand">SKIN627</span>
<h3>Увлажняющая сыворотка для лица Hyaluron Centella Ampoule</h3>
<div class="price"><span class="now">35,00 руб.</span><span class="old">50,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="tag new">Новинка</span><span class="b">JMsolution</span></div>
<div class="pb">
<span class="cat-l">Пэды</span><span class="brand">JMsolution</span>
<h3>Увлажняющие пэды с гиалуроновой кислотой Multi Hyaluronic</h3>
<div class="price"><span class="now">59,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="b">Beauty of Joseon</span></div>
<div class="pb">
<span class="cat-l">SPF</span><span class="brand">Beauty of Joseon</span>
<h3>Солнцезащитный гель Relief Sun SPF50+ PA++++</h3>
<div class="price"><span class="now">49,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="tag">−25%</span><span class="b">Biodance</span></div>
<div class="pb">
<span class="cat-l">Маски</span><span class="brand">Biodance</span>
<h3>Коллагеновая маска-пленка Collagen Wrapping Peel-off Mask</h3>
<div class="price"><span class="now">12,00 руб.</span><span class="old">16,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="b">Anua</span></div>
<div class="pb">
<span class="cat-l">Тонеры</span><span class="brand">Anua</span>
<h3>Успокаивающий тонер с сердечником Centella Toner 77%</h3>
<div class="price"><span class="now">62,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="b">Banila Co</span></div>
<div class="pb">
<span class="cat-l">Очищение</span><span class="brand">Banila Co</span>
<h3>Гидрофильное масло Clean It Zero Original</h3>
<div class="price"><span class="now">54,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="b">SKIN627</span></div>
<div class="pb">
<span class="cat-l">Сыворотки</span><span class="brand">SKIN627</span>
<h3>Сыворотка для лица с ретинолом Retinol Pantenol Ampoule</h3>
<div class="price"><span class="now">35,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="tag new">Новинка</span><span class="b">A'PIEU</span></div>
<div class="pb">
<span class="cat-l">Патчи</span><span class="brand">A'PIEU</span>
<h3>Патчи для глаз с молочной кислотой Milk One-Day Perfector</h3>
<div class="price"><span class="now">18,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
</div>
</div>
</section>
<section id="body" style="padding-top:0">
<div class="wrap">
<h2>Уход за телом и волосами</h2>
<p class="sub">Витрина разделов вне лица — по мотивам карточек эталона.</p>
<div class="grid">
<article class="p">
<div class="ph"><span class="b">WEPROVE</span></div>
<div class="pb">
<span class="cat-l">Для душа</span><span class="brand">WEPROVE</span>
<h3>Обновляющий гель для душа Renewing Aloe Shower Gel</h3>
<div class="price"><span class="now">29,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="tag">−15%</span><span class="b">WEPROVE</span></div>
<div class="pb">
<span class="cat-l">Шампуни</span><span class="brand">WEPROVE</span>
<h3>Восстанавливающий шампунь Daily Hair Repairing Shampoo</h3>
<div class="price"><span class="now">23,60 руб.</span><span class="old">27,80 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="b">Care:Nel</span></div>
<div class="pb">
<span class="cat-l">Кремы для рук</span><span class="brand">Care:Nel</span>
<h3>Питательный крем для рук с ши и центеллой</h3>
<div class="price"><span class="now">14,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
<article class="p">
<div class="ph"><span class="b">Ciracle</span></div>
<div class="pb">
<span class="cat-l">Аксессуары</span><span class="brand">Ciracle</span>
<h3>Силиконовый спонж для умывания с чехлом</h3>
<div class="price"><span class="now">9,00 руб.</span></div>
<button>В корзину</button>
</div>
</article>
</div>
</div>
</section>
<section id="brands">
<div class="wrap">
<h2>Бренды</h2>
<p class="sub">Формат «Алфавит брендов» как у эталона — вход через доверие к марке.</p>
<div class="brands">
<span>A'PIEU</span><span>ANSKIN</span><span>Anua</span><span>Atopalm</span>
<span>AXIS-Y</span><span>Banila Co</span><span>Beauty of Joseon</span><span>Biodance</span>
<span>Care:Nel</span><span>Celimax</span><span>Cos de Baha</span><span>JMsolution</span>
<span>SKIN627</span><span>WEPROVE</span>
</div>
</div>
</section>
<section id="plans">
<div class="wrap">
<h2>Магазинам корейской косметики</h2>
<p class="sub">Shkor beauty — это AI-ассистент витрины (B2B): подбор ухода, заказы и заявки — единое API для вашего сайта и любых агентов. Оператор сервиса — Shkor Labs LLC.</p>
<div class="plan-grid">
<div class="plan-card">
<h3>Lite</h3>
<p class="plan-price">базовый план</p>
<ul>
<li>Витрина с каталогом и брендами</li>
<li>Форма заявки → общая база заказов</li>
<li>Заявки приходят с пометкой <code>plan=lite</code></li>
<li>Договор с магазином лично: телефон/мессенджер</li>
</ul>
<a class="btn" href="#request">Начать с заявки</a>
</div>
<div class="plan-card featured">
<h3>Full</h3>
<p class="plan-price">полный каталог + заказы</p>
<ul>
<li>Всё из Lite</li>
<li>Полный каталог и корзина</li>
<li>Онлайн-оплата и статусы доставки</li>
<li>Агентный API: analyze → recommend → order</li>
</ul>
<a class="btn" href="#request">Подключить Full</a>
</div>
</div>
</div>
</section>
<section class="dark" id="request">
<div class="wrap">
<h2>Оставить заявку</h2>
<p class="sub">Расскажите, что нужно — подберём уход или подключим магазин. Заявка пишется в общую базу заказов, ответим в течение дня.</p>
<form id="reqform">
<input type="text" name="name" placeholder="Имя" required>
<input type="tel" name="phone" placeholder="+375 XX XXX-XX-XX" required>
<input type="text" name="note" placeholder="Что подобрать? (сухая кожа, SPF, тонер…)">
<button type="submit">Отправить</button>
</form>
<p class="sub" id="reqstatus" style="margin-top:10px"></p>
</div>
</section>
<section class="dark" id="sub">
<div class="wrap">
<h2>Подписка на поступления</h2>
<p class="sub">Одно письмо в неделю: новинки, скидки и разборы составов. Без спама.</p>
<form onsubmit="event.preventDefault();toast('Прототип: подписка не подключена')">
<input type="email" placeholder="your@email.com" required>
<button>Подписаться</button>
</form>
</div>
</section>
<footer>
<div class="wrap">
<div>Shkor beauty — витрина корейской косметики + AI-ассистент. Оператор сервиса: <b>Shkor Labs LLC</b> (Wyoming, USA) · <a href="mailto:alex.shkor@gmail.com" style="text-decoration:underline">alex.shkor@gmail.com</a></div>
<div class="flinks">
<a href="/privacy.html">Privacy Policy</a>
<a href="/terms.html">Terms of Service</a>
<a href="/disclaimer.html">Disclaimer</a>
<a href="/about.html">About &amp; Contacts</a>
</div>
<div class="proto">собрано харнесом Simbiot · кооператив 42 · cil.by</div>
</div>
</footer>
<div id="toast" role="status"></div>
<script>
function toast(t){
var el=document.getElementById('toast');
el.textContent=t;el.classList.add('show');
clearTimeout(el._t);el._t=setTimeout(function(){el.classList.remove('show')},2200);
}
document.querySelectorAll('.p button').forEach(function(b){
b.addEventListener('click',function(){
var card=b.closest('.pb'), h=card?card.querySelector('h3'):null;
var note=document.getElementById('reqform').note;
if(h&&note) note.value='Интересует: '+h.textContent;
document.getElementById('request').scrollIntoView({behavior:'smooth'});
toast('Добавлено в заявку — оставьте контакты ниже');
});
});
document.getElementById('reqform').addEventListener('submit',function(e){
e.preventDefault();
var f=e.target, st=document.getElementById('reqstatus');
st.textContent='Отправляем…';
fetch('/api/call',{method:'POST',headers:{'Content-Type':'application/json'},
body:JSON.stringify({name:'submit_request',arguments:{name:f.name.value.trim(),phone:f.phone.value.trim(),note:f.note.value.trim()}})
}).then(function(r){return r.json()}).then(function(d){
var res=d.result||d;
if(res.order_id){st.textContent='Заявка принята: '+res.order_id+'. Свяжемся в течение дня.';f.reset();}
else{st.textContent='Не получилось: '+(res.error||JSON.stringify(res));}
}).catch(function(err){st.textContent='Сеть недоступна — напишите на alex.shkor@gmail.com';});
});
</script>
</body>
</html>