mirror of
https://github.com/wasrusgen/vizelberg-mockups.git
synced 2026-06-03 15:44:50 +00:00
VIZELBERG mockups: client & admin cabinets, brandbook, logos
This commit is contained in:
wasrusgen
commit
854acd1a81
420
app_admin.html
Normal file
420
app_admin.html
Normal file
@ -0,0 +1,420 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>VIZELBERG — Кабинет администратора</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||||||
|
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||||||
|
--line:rgba(47,74,60,.12); --soft:#8a978d; --bg:#f3eee5;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||||
|
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--bg);height:100vh;overflow:hidden}
|
||||||
|
.ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
|
||||||
|
.ic-sm{width:15px;height:15px}.ic-lg{width:26px;height:26px}
|
||||||
|
|
||||||
|
.app{display:grid;grid-template-columns:240px 1fr;height:100vh}
|
||||||
|
|
||||||
|
/* sidebar */
|
||||||
|
.side{background:var(--herbal);color:var(--cream);display:flex;flex-direction:column;padding:20px 14px}
|
||||||
|
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 20px}
|
||||||
|
.brand .lg{width:34px;height:34px;border-radius:11px;background:var(--gold);color:var(--herbal);display:flex;align-items:center;justify-content:center}
|
||||||
|
.brand .nm{font-weight:600;font-size:16px}
|
||||||
|
.brand .sb{font-size:9px;letter-spacing:2px;color:var(--sage);text-transform:uppercase}
|
||||||
|
.nav{display:flex;flex-direction:column;gap:3px;flex:1}
|
||||||
|
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:rgba(245,239,230,.72);cursor:pointer;font-size:13.5px;transition:.12s}
|
||||||
|
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
|
||||||
|
.nav a.on{background:var(--sage);color:#fff}
|
||||||
|
.nav .badge{margin-left:auto;background:var(--gold);color:var(--herbal);font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px}
|
||||||
|
.side .me{display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid rgba(255,255,255,.1);margin-top:10px}
|
||||||
|
.side .me .av{width:34px;height:34px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center}
|
||||||
|
.side .me .nm{font-size:13px}.side .me .rl{font-size:10px;color:var(--sage)}
|
||||||
|
|
||||||
|
/* main */
|
||||||
|
.main{display:flex;flex-direction:column;overflow:hidden}
|
||||||
|
.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 26px;flex:none}
|
||||||
|
.topbar h1{font-family:Georgia,serif;font-size:20px;color:var(--herbal)}
|
||||||
|
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:11px;padding:8px 13px;width:260px;color:var(--soft)}
|
||||||
|
.search input{border:none;background:none;outline:none;font-family:inherit;font-size:13px;width:100%;color:var(--ink)}
|
||||||
|
.tb-ic{width:38px;height:38px;border-radius:11px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--herbal);cursor:pointer;position:relative}
|
||||||
|
.tb-ic .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
|
||||||
|
|
||||||
|
.view{flex:1;overflow-y:auto;padding:26px}
|
||||||
|
.view{display:none}.view.on{display:block;animation:fade .2s}
|
||||||
|
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
||||||
|
|
||||||
|
/* generic */
|
||||||
|
.h2{font-family:Georgia,serif;font-size:18px;color:var(--herbal);margin:4px 0 14px}
|
||||||
|
.muted{color:var(--soft);font-size:12px}
|
||||||
|
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
|
||||||
|
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
||||||
|
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
||||||
|
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
|
||||||
|
|
||||||
|
/* KPI */
|
||||||
|
.kpi{display:flex;flex-direction:column;gap:8px}
|
||||||
|
.kpi .ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
|
||||||
|
.kpi .val{font-size:26px;font-weight:700;color:var(--herbal);font-family:Georgia,serif}
|
||||||
|
.kpi .lbl{font-size:12px;color:var(--soft)}
|
||||||
|
.kpi .tr{font-size:11px;font-weight:600}
|
||||||
|
.up{color:var(--sage)}.down{color:#c0584f}
|
||||||
|
|
||||||
|
/* table */
|
||||||
|
table{width:100%;border-collapse:collapse}
|
||||||
|
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--soft);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
|
||||||
|
td{padding:12px;border-bottom:1px solid var(--line);font-size:13px}
|
||||||
|
tr.clk{cursor:pointer;transition:.1s}
|
||||||
|
tr.clk:hover td{background:var(--cream)}
|
||||||
|
.who{display:flex;align-items:center;gap:10px}
|
||||||
|
.who .av{width:34px;height:34px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
|
||||||
|
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600}
|
||||||
|
.t-act{background:rgba(124,144,112,.18);color:#4d6249}
|
||||||
|
.t-warn{background:rgba(201,162,75,.2);color:#8a6d1f}
|
||||||
|
.t-end{background:rgba(192,88,79,.16);color:#a8453c}
|
||||||
|
.mini-bar{height:7px;width:90px;background:#e9e2d6;border-radius:5px;overflow:hidden;display:inline-block;vertical-align:middle}
|
||||||
|
.mini-bar i{display:block;height:7px;background:var(--sage);border-radius:5px}
|
||||||
|
|
||||||
|
.btn{background:var(--herbal);color:#fff;border:none;font-family:inherit;border-radius:11px;padding:10px 16px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:.12s}
|
||||||
|
.btn:active{transform:scale(.98)}
|
||||||
|
.btn.gold{background:var(--gold);color:#3a2e10}
|
||||||
|
.btn.outline{background:transparent;color:var(--herbal);border:1.5px solid var(--herbal)}
|
||||||
|
.btn.sm{padding:7px 12px;font-size:12px}
|
||||||
|
|
||||||
|
.head-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
|
||||||
|
.head-row .sp{margin-left:auto;display:flex;gap:10px}
|
||||||
|
|
||||||
|
/* client detail */
|
||||||
|
.back{display:inline-flex;align-items:center;gap:6px;color:var(--herbal);cursor:pointer;font-size:13px;margin-bottom:12px}
|
||||||
|
.back svg{transform:rotate(180deg)}
|
||||||
|
.prof{display:flex;align-items:center;gap:16px}
|
||||||
|
.prof .av{width:64px;height:64px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600}
|
||||||
|
.prof .nm{font-size:20px;font-weight:600;color:var(--herbal)}
|
||||||
|
.tabs{display:flex;gap:6px;margin:18px 0;border-bottom:1px solid var(--line)}
|
||||||
|
.tabs a{padding:9px 14px;font-size:13px;color:var(--soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
|
||||||
|
.tabs a.on{color:var(--herbal);border-color:var(--gold);font-weight:600}
|
||||||
|
.ctab{display:none}.ctab.on{display:block;animation:fade .2s}
|
||||||
|
.field{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
|
||||||
|
.field b{color:var(--herbal)}
|
||||||
|
|
||||||
|
/* menu builder */
|
||||||
|
.mb{display:grid;grid-template-columns:260px 1fr;gap:16px}
|
||||||
|
.dish{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;cursor:grab;font-size:12.5px;background:#fff}
|
||||||
|
.dish .ico{color:var(--sage)}
|
||||||
|
.day{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
|
||||||
|
.day h4{font-size:12px;color:var(--herbal);margin-bottom:8px;display:flex;align-items:center;gap:6px}
|
||||||
|
.slot{font-size:11.5px;color:var(--soft);padding:7px 9px;border:1px dashed var(--line);border-radius:9px;margin-bottom:6px}
|
||||||
|
.slot b{color:var(--ink);font-weight:600;display:block}
|
||||||
|
|
||||||
|
/* checkins */
|
||||||
|
.ci{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px;margin-bottom:10px;background:#fff}
|
||||||
|
.ci.flag{border-color:rgba(201,162,75,.5);background:rgba(201,162,75,.06)}
|
||||||
|
.ci .av{width:38px;height:38px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
|
||||||
|
|
||||||
|
/* messages */
|
||||||
|
.msglist{display:flex;flex-direction:column;gap:2px}
|
||||||
|
.mrow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;cursor:pointer}
|
||||||
|
.mrow:hover{background:#fff}
|
||||||
|
.mrow .av{width:40px;height:40px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:none}
|
||||||
|
.mrow .unread{width:9px;height:9px;border-radius:50%;background:var(--gold);margin-left:auto;flex:none}
|
||||||
|
|
||||||
|
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--herbal);color:#fff;padding:12px 20px;border-radius:13px;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:50;display:flex;align-items:center;gap:9px}
|
||||||
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
|
||||||
|
.legend-note{margin-top:8px;color:var(--soft);font-size:12px}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||||
|
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z"/><path d="M5 19c4-1 7-4 9-8"/></symbol>
|
||||||
|
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></symbol>
|
||||||
|
<symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.5 2.7-5 6-5s6 1.5 6 5"/><path d="M16 5.5a3 3 0 0 1 0 5.5M21 20c0-3-1.5-4.5-4-4.8"/></symbol>
|
||||||
|
<symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3 11h18a9 9 0 0 1-18 0z"/><path d="M2 11h20"/><path d="M9 7c0-1.5 1-2 1-3M13 7c0-1.5 1-2 1-3"/></symbol>
|
||||||
|
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12l4.5 4.5L19 7"/></symbol>
|
||||||
|
<symbol id="i-clip" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9 4h6v3H9zM9 11h6M9 15h4"/></symbol>
|
||||||
|
<symbol id="i-chat" viewBox="0 0 24 24"><path d="M5 5h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H10l-4 4v-4H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M8 9h8M8 12h5"/></symbol>
|
||||||
|
<symbol id="i-edit" viewBox="0 0 24 24"><path d="M5 19h14"/><path d="M14 5l5 5-9 9H5v-5z"/></symbol>
|
||||||
|
<symbol id="i-ruble" viewBox="0 0 24 24"><path d="M8 20V4h5a4 4 0 0 1 0 8H8"/><path d="M5 14h8M5 17h6"/></symbol>
|
||||||
|
<symbol id="i-trend" viewBox="0 0 24 24"><path d="M4 16l5-5 4 4 7-7"/><path d="M16 8h4v4"/></symbol>
|
||||||
|
<symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></symbol>
|
||||||
|
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></symbol>
|
||||||
|
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2H4.5z"/><path d="M10 20a2 2 0 0 0 4 0"/></symbol>
|
||||||
|
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20c0-4 3-6 6.5-6s6.5 2 6.5 6"/></symbol>
|
||||||
|
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13"/><path d="M12 6l6 6-6 6"/></symbol>
|
||||||
|
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||||||
|
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M6 21V4h12l-3 4 3 4H6"/></symbol>
|
||||||
|
<symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></symbol>
|
||||||
|
<symbol id="i-fire" viewBox="0 0 24 24"><path d="M12 3c1 3 4 4 4 8a4 4 0 0 1-8 0c0-1 .5-2 1-2.5C9 11 12 8 12 3z"/></symbol>
|
||||||
|
<symbol id="i-scale" viewBox="0 0 24 24"><circle cx="12" cy="13" r="8"/><path d="M12 13l4-4M12 5V3"/></symbol>
|
||||||
|
<symbol id="i-logout" viewBox="0 0 24 24"><path d="M14 4H6v16h8"/><path d="M10 12h10M17 9l3 3-3 3"/></symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="app">
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<aside class="side">
|
||||||
|
<div class="brand"><div class="lg"><svg class="ic ic-lg"><use href="#i-leaf"/></svg></div><div><div class="nm">vizelberg</div><div class="sb">admin</div></div></div>
|
||||||
|
<nav class="nav" id="nav">
|
||||||
|
<a class="on" data-v="dash"><svg class="ic"><use href="#i-grid"/></svg> Дашборд</a>
|
||||||
|
<a data-v="clients"><svg class="ic"><use href="#i-users"/></svg> Клиенты <span class="badge">42</span></a>
|
||||||
|
<a data-v="menu"><svg class="ic"><use href="#i-bowl"/></svg> Конструктор меню</a>
|
||||||
|
<a data-v="checkins"><svg class="ic"><use href="#i-clip"/></svg> Чек-ины <span class="badge">3</span></a>
|
||||||
|
<a data-v="messages"><svg class="ic"><use href="#i-chat"/></svg> Сообщения <span class="badge">5</span></a>
|
||||||
|
<a data-v="content"><svg class="ic"><use href="#i-edit"/></svg> Контент</a>
|
||||||
|
<a data-v="billing"><svg class="ic"><use href="#i-ruble"/></svg> Подписки</a>
|
||||||
|
<a data-v="analytics"><svg class="ic"><use href="#i-trend"/></svg> Аналитика</a>
|
||||||
|
<a data-v="settings"><svg class="ic"><use href="#i-gear"/></svg> Настройки</a>
|
||||||
|
</nav>
|
||||||
|
<div class="me"><div class="av"><svg class="ic ic-sm"><use href="#i-user"/></svg></div><div><div class="nm">Имя Фамилия</div><div class="rl">нутрициолог</div></div></div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- MAIN -->
|
||||||
|
<div class="main">
|
||||||
|
<div class="topbar">
|
||||||
|
<h1 id="title">Дашборд</h1>
|
||||||
|
<div class="search"><svg class="ic ic-sm"><use href="#i-search"/></svg><input placeholder="Поиск клиента, блюда, документа…" oninput="searchClients(this.value)"></div>
|
||||||
|
<div class="tb-ic" onclick="toast('5 новых сообщений')"><svg class="ic"><use href="#i-bell"/></svg><span class="dot"></span></div>
|
||||||
|
<div class="tb-ic" onclick="show('settings')"><svg class="ic"><use href="#i-gear"/></svg></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DASHBOARD -->
|
||||||
|
<div class="view on" id="v-dash">
|
||||||
|
<div class="grid4">
|
||||||
|
<div class="card kpi"><div class="ico" style="background:var(--sage)"><svg class="ic"><use href="#i-users"/></svg></div><div class="val">42</div><div class="lbl">Активных клиентов</div><div class="tr up">▲ +6 за месяц</div></div>
|
||||||
|
<div class="card kpi"><div class="ico" style="background:var(--gold)"><svg class="ic"><use href="#i-ruble"/></svg></div><div class="val">418k ₽</div><div class="lbl">Выручка (MRR)</div><div class="tr up">▲ +14%</div></div>
|
||||||
|
<div class="card kpi"><div class="ico" style="background:var(--herbal)"><svg class="ic"><use href="#i-clip"/></svg></div><div class="val">38</div><div class="lbl">Чек-инов сегодня</div><div class="tr"><span class="muted">3 требуют внимания</span></div></div>
|
||||||
|
<div class="card kpi"><div class="ico" style="background:var(--terra)"><svg class="ic"><use href="#i-trend"/></svg></div><div class="val">87%</div><div class="lbl">Удержание</div><div class="tr up">▲ +3%</div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid2" style="margin-top:16px">
|
||||||
|
<div class="card">
|
||||||
|
<div class="head-row"><b style="color:var(--herbal)">Требуют внимания сегодня</b><div class="sp"><button class="btn outline sm" onclick="show('checkins')">Все чек-ины</button></div></div>
|
||||||
|
<div class="ci flag"><div class="av">АП</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Анна П.</b><div class="muted">Пропустила ужин 2 дня · вес встал</div></div><button class="btn sm" onclick="toast('Открываю карточку Анны')">Разобрать</button></div>
|
||||||
|
<div class="ci flag"><div class="av">МК</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Мария К.</b><div class="muted">Жалуется на тягу к сладкому вечером</div></div><button class="btn sm" onclick="toast('Открываю карточку Марии')">Разобрать</button></div>
|
||||||
|
<div class="ci flag"><div class="av">ЕС</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Елена С.</b><div class="muted">Подписка истекает через 2 дня</div></div><button class="btn sm gold" onclick="toast('Отправлено напоминание о продлении')">Напомнить</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="head-row"><b style="color:var(--herbal)">Задачи на сегодня</b></div>
|
||||||
|
<div class="field"><span>Составить меню — 3 клиента</span><button class="btn sm gold" onclick="show('menu')"><svg class="ic ic-sm"><use href="#i-spark"/></svg> ИИ</button></div>
|
||||||
|
<div class="field"><span>Ответить в чате — 5 сообщений</span><button class="btn sm outline" onclick="show('messages')">Открыть</button></div>
|
||||||
|
<div class="field"><span>Опубликовать пост недели</span><button class="btn sm outline" onclick="show('content')">Контент</button></div>
|
||||||
|
<div class="field" style="border:none"><span>Разбор анализов — Ольга Т.</span><button class="btn sm outline" onclick="toast('Открываю анализы')">Открыть</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CLIENTS -->
|
||||||
|
<div class="view" id="v-clients">
|
||||||
|
<div class="head-row">
|
||||||
|
<span class="muted">42 клиента · 38 активных</span>
|
||||||
|
<div class="sp"><button class="btn outline sm"><svg class="ic ic-sm"><use href="#i-clip"/></svg> Фильтр</button><button class="btn sm" onclick="toast('Форма добавления клиента')"><svg class="ic ic-sm"><use href="#i-plus"/></svg> Добавить</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="padding:6px">
|
||||||
|
<table id="clientsTable">
|
||||||
|
<thead><tr><th>Клиент</th><th>Тариф</th><th>Прогресс к цели</th><th>Последний чек-ин</th><th>Статус</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="clk" onclick="show('client')"><td><div class="who"><div class="av">АП</div><div><b>Анна Петрова</b><div class="muted">Цель: −5 кг</div></div></div></td><td>Сопровождение 3 мес</td><td><span class="mini-bar"><i style="width:62%"></i></span> 62%</td><td class="muted">сегодня</td><td><span class="tag t-warn"><svg class="ic ic-sm"><use href="#i-flag"/></svg> внимание</span></td></tr>
|
||||||
|
<tr class="clk" onclick="show('client')"><td><div class="who"><div class="av">МК</div><div><b>Мария Кузнецова</b><div class="muted">Цель: ЖКТ</div></div></div></td><td>Поддержка</td><td><span class="mini-bar"><i style="width:45%"></i></span> 45%</td><td class="muted">вчера</td><td><span class="tag t-warn"><svg class="ic ic-sm"><use href="#i-flag"/></svg> внимание</span></td></tr>
|
||||||
|
<tr class="clk" onclick="show('client')"><td><div class="who"><div class="av">ОТ</div><div><b>Ольга Титова</b><div class="muted">Цель: набор массы</div></div></div></td><td>Сопровождение 3 мес</td><td><span class="mini-bar"><i style="width:78%"></i></span> 78%</td><td class="muted">сегодня</td><td><span class="tag t-act">активна</span></td></tr>
|
||||||
|
<tr class="clk" onclick="show('client')"><td><div class="who"><div class="av">ЕС</div><div><b>Елена Смирнова</b><div class="muted">Цель: −8 кг</div></div></div></td><td>Поддержка</td><td><span class="mini-bar"><i style="width:90%"></i></span> 90%</td><td class="muted">2 дня</td><td><span class="tag t-end">истекает</span></td></tr>
|
||||||
|
<tr class="clk" onclick="show('client')"><td><div class="who"><div class="av">ДВ</div><div><b>Дарья Волкова</b><div class="muted">Цель: энергия</div></div></div></td><td>Сопровождение 3 мес</td><td><span class="mini-bar"><i style="width:33%"></i></span> 33%</td><td class="muted">сегодня</td><td><span class="tag t-act">активна</span></td></tr>
|
||||||
|
<tr class="clk" onclick="show('client')"><td><div class="who"><div class="av">НИ</div><div><b>Наталья Иванова</b><div class="muted">Цель: −3 кг</div></div></div></td><td>Разовый разбор</td><td><span class="mini-bar"><i style="width:15%"></i></span> 15%</td><td class="muted">3 дня</td><td><span class="tag t-act">активна</span></td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CLIENT DETAIL -->
|
||||||
|
<div class="view" id="v-client">
|
||||||
|
<div class="back" onclick="show('clients')"><svg class="ic ic-sm"><use href="#i-arrow"/></svg> К списку клиентов</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="head-row" style="margin:0">
|
||||||
|
<div class="prof"><div class="av">АП</div><div><div class="nm">Анна Петрова</div><div class="muted">32 года · цель: −5 кг · на сопровождении 2 мес</div></div></div>
|
||||||
|
<div class="sp"><button class="btn outline sm" onclick="toast('Открываю чат с Анной')"><svg class="ic ic-sm"><use href="#i-chat"/></svg> Чат</button><button class="btn sm gold" onclick="show('menu')"><svg class="ic ic-sm"><use href="#i-spark"/></svg> Сгенерировать меню</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabs" id="ctabs">
|
||||||
|
<a class="on" data-c="ov">Обзор</a><a data-c="menu">Меню</a><a data-c="prog">Прогресс</a><a data-c="anal">Анализы</a>
|
||||||
|
</div>
|
||||||
|
<div class="ctab on" id="c-ov">
|
||||||
|
<div class="grid3">
|
||||||
|
<div class="card" style="background:var(--cream)"><div class="muted">Текущий вес</div><div class="kpi val" style="font-size:22px">68,4 кг</div><div class="tr up">−2,1 кг</div></div>
|
||||||
|
<div class="card" style="background:var(--cream)"><div class="muted">Калорийность</div><div class="kpi val" style="font-size:22px">1900</div><div class="muted">Б150 Ж63 У190</div></div>
|
||||||
|
<div class="card" style="background:var(--cream)"><div class="muted">Дисциплина</div><div class="kpi val" style="font-size:22px">82%</div><div class="muted">чек-ины 23/28</div></div>
|
||||||
|
</div>
|
||||||
|
<h4 style="margin:16px 0 8px;color:var(--herbal)">Заметки нутрициолога</h4>
|
||||||
|
<div class="card">Хорошо реагирует на сложные углеводы. Сложности с вечерними перекусами — добавить белковый перекус в 17:00. Контролировать сон.</div>
|
||||||
|
</div>
|
||||||
|
<div class="ctab" id="c-menu"><div class="card">Текущее меню на неделю · <a style="color:var(--gold);cursor:pointer" onclick="show('menu')">открыть в конструкторе →</a><div class="field" style="margin-top:8px"><span>Пн · Завтрак</span><b>Овсянка с ягодами</b></div><div class="field"><span>Пн · Обед</span><b>Гречка с индейкой</b></div><div class="field"><span>Пн · Ужин</span><b>Лосось с овощами</b></div></div></div>
|
||||||
|
<div class="ctab" id="c-prog"><div class="card"><h4 style="color:var(--herbal);margin-bottom:8px">Динамика веса</h4><svg viewBox="0 0 500 120" style="width:100%;height:140px"><polyline points="0,90 80,84 160,66 240,60 320,40 400,30 500,20" fill="none" stroke="#7C9070" stroke-width="3" stroke-linecap="round"/><line x1="0" y1="110" x2="500" y2="110" stroke="rgba(0,0,0,.1)"/></svg></div></div>
|
||||||
|
<div class="ctab" id="c-anal"><div class="card"><div class="field"><span>Ферритин</span><b style="color:var(--sage)">норма · 45</b></div><div class="field"><span>Витамин D</span><b style="color:#c0584f">низкий · 18</b></div><div class="field"><span>Глюкоза</span><b style="color:var(--sage)">норма · 4.9</b></div><button class="btn outline sm" style="margin-top:10px" onclick="toast('Загрузка нового результата')"><svg class="ic ic-sm"><use href="#i-plus"/></svg> Добавить анализ</button></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MENU BUILDER -->
|
||||||
|
<div class="view" id="v-menu">
|
||||||
|
<div class="head-row">
|
||||||
|
<span class="muted">Конструктор меню · клиент: <b style="color:var(--herbal)">Анна Петрова</b> (1900 ккал)</span>
|
||||||
|
<div class="sp"><button class="btn gold sm" onclick="aiMenu()"><svg class="ic ic-sm"><use href="#i-spark"/></svg> ИИ: собрать неделю</button><button class="btn sm" onclick="toast('Меню отправлено клиенту')"><svg class="ic ic-sm"><use href="#i-check"/></svg> Отправить клиенту</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="mb">
|
||||||
|
<div class="card">
|
||||||
|
<b style="color:var(--herbal);font-size:13px">База блюд</b>
|
||||||
|
<div class="muted" style="margin-bottom:10px">перетащи в день</div>
|
||||||
|
<div class="dish"><div class="ico"><svg class="ic ic-sm"><use href="#i-bowl"/></svg></div>Овсянка с ягодами · 320</div>
|
||||||
|
<div class="dish"><div class="ico"><svg class="ic ic-sm"><use href="#i-bowl"/></svg></div>Гречка с индейкой · 480</div>
|
||||||
|
<div class="dish"><div class="ico"><svg class="ic ic-sm"><use href="#i-bowl"/></svg></div>Лосось с овощами · 420</div>
|
||||||
|
<div class="dish"><div class="ico"><svg class="ic ic-sm"><use href="#i-bowl"/></svg></div>Творог с орехами · 240</div>
|
||||||
|
<div class="dish"><div class="ico"><svg class="ic ic-sm"><use href="#i-bowl"/></svg></div>Куриный суп · 310</div>
|
||||||
|
<button class="btn outline sm" style="width:100%;margin-top:6px" onclick="toast('Добавить новое блюдо в базу')"><svg class="ic ic-sm"><use href="#i-plus"/></svg> Новое блюдо</button>
|
||||||
|
</div>
|
||||||
|
<div class="grid3" id="weekGrid">
|
||||||
|
<div class="day"><h4><svg class="ic ic-sm"><use href="#i-fire"/></svg> Понедельник <span class="muted" style="margin-left:auto;font-weight:400">1900</span></h4><div class="slot"><b>Завтрак</b>Овсянка с ягодами</div><div class="slot"><b>Обед</b>Гречка с индейкой</div><div class="slot"><b>Ужин</b>Лосось с овощами</div></div>
|
||||||
|
<div class="day"><h4>Вторник <span class="muted" style="margin-left:auto;font-weight:400">—</span></h4><div class="slot">+ завтрак</div><div class="slot">+ обед</div><div class="slot">+ ужин</div></div>
|
||||||
|
<div class="day"><h4>Среда <span class="muted" style="margin-left:auto;font-weight:400">—</span></h4><div class="slot">+ завтрак</div><div class="slot">+ обед</div><div class="slot">+ ужин</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="legend-note">В рабочей версии: drag-and-drop блюд, авто-подсчёт КБЖУ по дню, ИИ-генерация под цель и ограничения клиента, сохранение шаблонов меню.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CHECKINS -->
|
||||||
|
<div class="view" id="v-checkins">
|
||||||
|
<div class="head-row"><span class="muted">38 чек-инов сегодня · 3 требуют внимания</span></div>
|
||||||
|
<div class="ci flag"><div class="av">АП</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Анна Петрова <span class="tag t-warn" style="margin-left:6px"><svg class="ic ic-sm"><use href="#i-flag"/></svg> флаг</span></b><div class="muted">Пропустила ужин 2 дня подряд · вес не снижается 5 дней</div></div><button class="btn sm" onclick="resolveCi(this)">Разобрать</button></div>
|
||||||
|
<div class="ci flag"><div class="av">МК</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Мария Кузнецова <span class="tag t-warn" style="margin-left:6px"><svg class="ic ic-sm"><use href="#i-flag"/></svg> флаг</span></b><div class="muted">Самочувствие: тяга к сладкому вечером, низкая энергия</div></div><button class="btn sm" onclick="resolveCi(this)">Разобрать</button></div>
|
||||||
|
<div class="ci flag"><div class="av">ДВ</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Дарья Волкова <span class="tag t-warn" style="margin-left:6px"><svg class="ic ic-sm"><use href="#i-flag"/></svg> флаг</span></b><div class="muted">Вода 3 дня ниже нормы · пропуск завтраков</div></div><button class="btn sm" onclick="resolveCi(this)">Разобрать</button></div>
|
||||||
|
<div class="ci"><div class="av">ОТ</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Ольга Титова</b><div class="muted">Всё по плану · вес +0,4 кг (набор) · энергия высокая</div></div><span class="tag t-act"><svg class="ic ic-sm"><use href="#i-check"/></svg> ок</span></div>
|
||||||
|
<div class="ci"><div class="av">НИ</div><div style="flex:1"><b style="color:var(--herbal);font-size:13px">Наталья Иванова</b><div class="muted">Чек-ин фото загружено · придерживается меню</div></div><span class="tag t-act"><svg class="ic ic-sm"><use href="#i-check"/></svg> ок</span></div>
|
||||||
|
<div class="legend-note">ИИ автоматически помечает флагом отклонения (пропуски, остановка прогресса, жалобы) — вы видите только тех, кому реально нужно внимание.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MESSAGES -->
|
||||||
|
<div class="view" id="v-messages">
|
||||||
|
<div class="head-row"><span class="muted">5 непрочитанных</span><div class="sp"><button class="btn outline sm" onclick="toast('ИИ подготовил черновики ответов')"><svg class="ic ic-sm"><use href="#i-spark"/></svg> ИИ-черновики ответов</button></div></div>
|
||||||
|
<div class="card msglist">
|
||||||
|
<div class="mrow" onclick="toast('Открываю диалог с Анной')"><div class="av">АП</div><div style="flex:1"><b>Анна Петрова</b><div class="muted">А можно заменить гречку на булгур?</div></div><span class="muted">5 мин</span><span class="unread"></span></div>
|
||||||
|
<div class="mrow" onclick="toast('Открываю диалог с Марией')"><div class="av">МК</div><div style="flex:1"><b>Мария Кузнецова</b><div class="muted">Вечером очень хочется сладкого, что делать?</div></div><span class="muted">22 мин</span><span class="unread"></span></div>
|
||||||
|
<div class="mrow" onclick="toast('Открываю диалог с Ольгой')"><div class="av">ОТ</div><div style="flex:1"><b>Ольга Титова</b><div class="muted">Спасибо, самочувствие отличное!</div></div><span class="muted">1 ч</span><span class="unread"></span></div>
|
||||||
|
<div class="mrow" onclick="toast('Открываю диалог с Дарьей')"><div class="av">ДВ</div><div style="flex:1"><b>Дарья Волкова</b><div class="muted">Прикрепила фото обеда</div></div><span class="muted">3 ч</span><span class="unread"></span></div>
|
||||||
|
<div class="mrow" onclick="toast('Открываю диалог с Еленой')"><div class="av">ЕС</div><div style="flex:1"><b>Елена Смирнова</b><div class="muted">Как продлить подписку?</div></div><span class="muted">5 ч</span><span class="unread"></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="view" id="v-content">
|
||||||
|
<div class="head-row"><span class="muted">Контент-планер</span><div class="sp"><button class="btn gold sm" onclick="toast('ИИ сгенерировал черновик поста')"><svg class="ic ic-sm"><use href="#i-spark"/></svg> ИИ: сгенерировать пост</button></div></div>
|
||||||
|
<div class="grid3">
|
||||||
|
<div class="card"><div class="tag t-warn">черновик</div><h4 style="color:var(--herbal);margin:8px 0 6px">5 мифов о завтраке</h4><div class="muted">Образовательный пост · Telegram-канал</div><button class="btn outline sm" style="margin-top:10px" onclick="toast('Редактирование поста')"><svg class="ic ic-sm"><use href="#i-edit"/></svg> Редактировать</button></div>
|
||||||
|
<div class="card"><div class="tag t-act">запланирован</div><h4 style="color:var(--herbal);margin:8px 0 6px">Рецепт: ужин за 15 минут</h4><div class="muted">Завтра 10:00 · сторис + пост</div><button class="btn outline sm" style="margin-top:10px" onclick="toast('Просмотр поста')">Просмотр</button></div>
|
||||||
|
<div class="card"><div class="tag t-end">идея</div><h4 style="color:var(--herbal);margin:8px 0 6px">Разбор анализов: витамин D</h4><div class="muted">Лид-магнит для воронки</div><button class="btn outline sm" style="margin-top:10px" onclick="toast('ИИ развернёт идею в пост')"><svg class="ic ic-sm"><use href="#i-spark"/></svg> Развернуть</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BILLING -->
|
||||||
|
<div class="view" id="v-billing">
|
||||||
|
<div class="grid4">
|
||||||
|
<div class="card kpi"><div class="muted">MRR</div><div class="val">418k ₽</div><div class="tr up">▲ +14%</div></div>
|
||||||
|
<div class="card kpi"><div class="muted">Средний чек</div><div class="val">9 950 ₽</div></div>
|
||||||
|
<div class="card kpi"><div class="muted">LTV клиента</div><div class="val">31 200 ₽</div><div class="tr up">▲ +8%</div></div>
|
||||||
|
<div class="card kpi"><div class="muted">Отток</div><div class="val">4,2%</div><div class="tr up">▼ хорошо</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="margin-top:16px;padding:6px">
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>Клиент</th><th>Тариф</th><th>Сумма</th><th>Дата</th><th>Статус</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td><div class="who"><div class="av">ОТ</div><b>Ольга Титова</b></div></td><td>Сопровождение 3 мес</td><td><b>24 900 ₽</b></td><td class="muted">сегодня</td><td><span class="tag t-act">оплачено</span></td></tr>
|
||||||
|
<tr><td><div class="who"><div class="av">ДВ</div><b>Дарья Волкова</b></div></td><td>Сопровождение 3 мес</td><td><b>24 900 ₽</b></td><td class="muted">вчера</td><td><span class="tag t-act">оплачено</span></td></tr>
|
||||||
|
<tr><td><div class="who"><div class="av">МК</div><b>Мария Кузнецова</b></div></td><td>Поддержка (продление)</td><td><b>4 900 ₽</b></td><td class="muted">2 дня</td><td><span class="tag t-act">оплачено</span></td></tr>
|
||||||
|
<tr><td><div class="who"><div class="av">ЕС</div><b>Елена Смирнова</b></div></td><td>Поддержка</td><td><b>4 900 ₽</b></td><td class="muted">истекает</td><td><span class="tag t-end">ожидает оплаты</span></td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ANALYTICS -->
|
||||||
|
<div class="view" id="v-analytics">
|
||||||
|
<div class="grid2">
|
||||||
|
<div class="card"><h4 style="color:var(--herbal);margin-bottom:10px">Выручка по месяцам</h4>
|
||||||
|
<svg viewBox="0 0 500 160" style="width:100%;height:170px">
|
||||||
|
<g fill="#7C9070">
|
||||||
|
<rect x="20" y="100" width="46" height="50" rx="4"/><rect x="90" y="80" width="46" height="70" rx="4"/><rect x="160" y="70" width="46" height="80" rx="4"/><rect x="230" y="55" width="46" height="95" rx="4"/><rect x="300" y="40" width="46" height="110" rx="4"/><rect x="370" y="22" width="46" height="128" rx="4" fill="#C9A24B"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<div class="muted">Дек · Янв · Фев · Мар · Апр · Май</div>
|
||||||
|
</div>
|
||||||
|
<div class="card"><h4 style="color:var(--herbal);margin-bottom:10px">Воронка</h4>
|
||||||
|
<div class="field"><span>Лид-магнит (бот)</span><b>820</b></div>
|
||||||
|
<div class="field"><span>Разовый разбор</span><b>156</b></div>
|
||||||
|
<div class="field"><span>Программа сопровождения</span><b>48</b></div>
|
||||||
|
<div class="field" style="border:none"><span>Продлили (подписка)</span><b>34</b></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid3" style="margin-top:16px">
|
||||||
|
<div class="card kpi"><div class="muted">Загрузка нутрициолога</div><div class="val">42 / 60</div><div class="muted">есть место для роста</div></div>
|
||||||
|
<div class="card kpi"><div class="muted">Конверсия разбор→программа</div><div class="val">31%</div><div class="tr up">▲ +5%</div></div>
|
||||||
|
<div class="card kpi"><div class="muted">Среднее удержание</div><div class="val">4,1 мес</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SETTINGS -->
|
||||||
|
<div class="view" id="v-settings">
|
||||||
|
<div class="grid3">
|
||||||
|
<div class="card"><h4 style="color:var(--herbal);margin-bottom:8px">Тарифы и цены</h4><div class="field"><span>Сопровождение 3 мес</span><b>24 900 ₽</b></div><div class="field"><span>Поддержка / мес</span><b>4 900 ₽</b></div><div class="field" style="border:none"><span>Разовый разбор</span><b>3 500 ₽</b></div><button class="btn outline sm" style="margin-top:10px" onclick="toast('Редактирование тарифов')"><svg class="ic ic-sm"><use href="#i-edit"/></svg> Изменить</button></div>
|
||||||
|
<div class="card"><h4 style="color:var(--herbal);margin-bottom:8px">Интеграции</h4><div class="field"><span>Telegram bot</span><b style="color:var(--sage)">подключён</b></div><div class="field"><span>MAX mini-app</span><b style="color:var(--sage)">подключён</b></div><div class="field" style="border:none"><span>Эквайринг / СБП</span><b style="color:var(--sage)">активен</b></div></div>
|
||||||
|
<div class="card"><h4 style="color:var(--herbal);margin-bottom:8px">ИИ-ассистент</h4><div class="field"><span>Генерация меню</span><b style="color:var(--sage)">вкл</b></div><div class="field"><span>Флаги чек-инов</span><b style="color:var(--sage)">вкл</b></div><div class="field" style="border:none"><span>Черновики ответов</span><b style="color:var(--sage)">вкл</b></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="toast" id="toast"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const titles={dash:'Дашборд',clients:'Клиенты',client:'Карточка клиента',menu:'Конструктор меню',checkins:'Чек-ины',messages:'Сообщения',content:'Контент',billing:'Подписки и платежи',analytics:'Аналитика',settings:'Настройки'};
|
||||||
|
function show(v){
|
||||||
|
document.querySelectorAll('.view').forEach(x=>x.classList.remove('on'));
|
||||||
|
document.getElementById('v-'+v).classList.add('on');
|
||||||
|
document.getElementById('title').textContent=titles[v]||'';
|
||||||
|
document.querySelectorAll('#nav a').forEach(a=>a.classList.toggle('on',a.dataset.v===v));
|
||||||
|
document.querySelector('.view.on').scrollTop=0;
|
||||||
|
}
|
||||||
|
document.querySelectorAll('#nav a').forEach(a=>a.onclick=()=>show(a.dataset.v));
|
||||||
|
|
||||||
|
// client detail tabs
|
||||||
|
document.querySelectorAll('#ctabs a').forEach(a=>a.onclick=()=>{
|
||||||
|
document.querySelectorAll('#ctabs a').forEach(x=>x.classList.remove('on'));a.classList.add('on');
|
||||||
|
document.querySelectorAll('.ctab').forEach(x=>x.classList.remove('on'));
|
||||||
|
document.getElementById('c-'+a.dataset.c).classList.add('on');
|
||||||
|
});
|
||||||
|
|
||||||
|
let t;function toast(m){const e=document.getElementById('toast');e.textContent=m;e.classList.add('show');clearTimeout(t);t=setTimeout(()=>e.classList.remove('show'),1900);}
|
||||||
|
|
||||||
|
function aiMenu(){
|
||||||
|
toast('ИИ собирает меню на неделю под цель −5 кг…');
|
||||||
|
setTimeout(()=>{
|
||||||
|
document.querySelectorAll('#weekGrid .day').forEach((d,i)=>{
|
||||||
|
if(i===0)return;
|
||||||
|
d.querySelector('h4 .muted').textContent='1900';
|
||||||
|
const slots=d.querySelectorAll('.slot');
|
||||||
|
const meals=[['Завтрак','Творог с орехами'],['Обед','Куриный суп'],['Ужин','Лосось с овощами']];
|
||||||
|
slots.forEach((s,k)=>{s.innerHTML='<b>'+meals[k][0]+'</b>'+meals[k][1];});
|
||||||
|
});
|
||||||
|
toast('Меню готово · проверьте и отправьте клиенту');
|
||||||
|
},1100);
|
||||||
|
}
|
||||||
|
function resolveCi(btn){
|
||||||
|
const ci=btn.closest('.ci');ci.classList.remove('flag');
|
||||||
|
ci.querySelector('.muted').textContent='Разобрано · скорректировано меню, отправлено сообщение';
|
||||||
|
btn.outerHTML='<span class="tag t-act"><svg class="ic ic-sm"><use href="#i-check"/></svg> решено</span>';
|
||||||
|
toast('Чек-ин обработан');
|
||||||
|
}
|
||||||
|
function searchClients(q){
|
||||||
|
q=q.toLowerCase();
|
||||||
|
document.querySelectorAll('#clientsTable tbody tr').forEach(r=>{
|
||||||
|
r.style.display=r.textContent.toLowerCase().includes(q)?'':'none';
|
||||||
|
});
|
||||||
|
if(q&&!document.getElementById('v-clients').classList.contains('on'))show('clients');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
362
app_interactive.html
Normal file
362
app_interactive.html
Normal file
@ -0,0 +1,362 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>VIZELBERG — Интерактивный прототип кабинета клиента</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||||||
|
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||||||
|
--line:rgba(47,74,60,.12); --soft:#8a978d;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||||
|
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:#e6ded2;
|
||||||
|
min-height:100vh;display:flex;gap:38px;align-items:flex-start;justify-content:center;padding:40px 20px;flex-wrap:wrap}
|
||||||
|
|
||||||
|
/* side help */
|
||||||
|
.help{max-width:300px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;position:sticky;top:40px}
|
||||||
|
.help .k{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:700}
|
||||||
|
.help h1{font-family:Georgia,serif;color:var(--herbal);font-size:20px;margin:8px 0 12px}
|
||||||
|
.help p{color:#5d6b62;font-size:13px;margin-bottom:12px}
|
||||||
|
.help ul{list-style:none;font-size:13px}
|
||||||
|
.help li{padding:7px 0;border-bottom:1px dashed var(--line);color:var(--herbal);display:flex;gap:8px;align-items:flex-start}
|
||||||
|
.help li b{color:var(--sage)}
|
||||||
|
.help .tip{margin-top:14px;background:var(--cream);border-radius:12px;padding:12px;font-size:12px;color:#5d6b62}
|
||||||
|
|
||||||
|
/* icons */
|
||||||
|
.ic{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
|
||||||
|
.ic-sm{width:16px;height:16px}.ic-lg{width:30px;height:30px}
|
||||||
|
|
||||||
|
/* device */
|
||||||
|
.phone{background:#1b251f;border-radius:42px;padding:11px;box-shadow:0 26px 60px rgba(27,37,31,.34);flex:none}
|
||||||
|
.screenwrap{width:330px;height:710px;background:var(--cream);border-radius:32px;overflow:hidden;position:relative}
|
||||||
|
.notch{height:26px;display:flex;align-items:center;justify-content:center}
|
||||||
|
.notch i{width:120px;height:24px;border-radius:0 0 16px 16px;background:#1b251f;margin-top:-2px}
|
||||||
|
|
||||||
|
/* screen routing */
|
||||||
|
.screen{position:absolute;inset:26px 0 0 0;display:none;flex-direction:column;animation:fade .25s ease}
|
||||||
|
.screen.active{display:flex}
|
||||||
|
@keyframes fade{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
|
||||||
|
|
||||||
|
.top{padding:8px 18px 10px;display:flex;align-items:center;gap:10px;color:var(--herbal)}
|
||||||
|
.top .logo{width:26px;height:26px;border-radius:9px;background:var(--herbal);color:var(--cream);display:flex;align-items:center;justify-content:center}
|
||||||
|
.top .ti{font-weight:600;font-size:14px}
|
||||||
|
.top .sp{margin-left:auto;color:var(--soft);cursor:pointer}
|
||||||
|
.back{cursor:pointer;color:var(--herbal);transform:rotate(180deg)}
|
||||||
|
|
||||||
|
.body{flex:1;overflow-y:auto;padding:6px 16px 14px;display:flex;flex-direction:column;gap:11px}
|
||||||
|
.body::-webkit-scrollbar{width:0}
|
||||||
|
.h{font-weight:600;color:var(--herbal);font-size:13px}
|
||||||
|
.muted{color:var(--soft);font-size:11px}
|
||||||
|
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:.12s}
|
||||||
|
.tile:active{transform:scale(.985)}
|
||||||
|
.tile.flat{cursor:default}
|
||||||
|
.row{display:flex;align-items:center;gap:11px}
|
||||||
|
.row .ico{color:var(--sage);flex:none}
|
||||||
|
.row .tx{flex:1}
|
||||||
|
.row .tx b{color:var(--herbal);font-weight:600;font-size:12.5px;display:block}
|
||||||
|
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:10.5px;color:var(--herbal);cursor:pointer}
|
||||||
|
.pill.on{background:var(--herbal);color:#fff;border-color:var(--herbal)}
|
||||||
|
.bar{height:8px;background:#e9e2d6;border-radius:6px;overflow:hidden}
|
||||||
|
.bar i{display:block;height:8px;border-radius:6px;background:var(--gold);transition:width .5s}
|
||||||
|
.bar.green i{background:var(--sage)}
|
||||||
|
.btn{background:var(--herbal);color:#fff;border:none;font-family:inherit;border-radius:13px;padding:13px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.12s}
|
||||||
|
.btn:active{transform:scale(.98)}
|
||||||
|
.btn.gold{background:var(--gold);color:#3a2e10}
|
||||||
|
.btn.outline{background:transparent;color:var(--herbal);border:1.5px solid var(--herbal)}
|
||||||
|
.btn.done{background:var(--sage)}
|
||||||
|
|
||||||
|
.tabbar{display:flex;justify-content:space-around;align-items:center;padding:10px 0 14px;background:#fff;border-top:1px solid var(--line)}
|
||||||
|
.tabbar a{color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;cursor:pointer}
|
||||||
|
.tabbar a.on{color:var(--herbal)}
|
||||||
|
.tabbar .fab{width:46px;height:46px;border-radius:50%;background:var(--gold);color:#3a2e10;display:flex;align-items:center;justify-content:center;margin-top:-28px;box-shadow:0 8px 18px rgba(201,162,75,.45);cursor:pointer}
|
||||||
|
|
||||||
|
/* onboarding */
|
||||||
|
.ob{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:16px;background:linear-gradient(180deg,#fbf7f0,#efe7da)}
|
||||||
|
.ob .badge{width:88px;height:88px;border-radius:26px;background:var(--herbal);color:var(--cream);display:flex;align-items:center;justify-content:center}
|
||||||
|
.ob h3{font-family:Georgia,serif;color:var(--herbal);font-size:21px}
|
||||||
|
.ob p{color:#5d6b62;font-size:13px;max-width:220px}
|
||||||
|
.dots{display:flex;gap:6px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--gold);width:20px;border-radius:4px}
|
||||||
|
|
||||||
|
/* chat */
|
||||||
|
.chat{flex:1;background:#e7e0d3;padding:14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
|
||||||
|
.chat::-webkit-scrollbar{width:0}
|
||||||
|
.msg{max-width:80%;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.45}
|
||||||
|
.in{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
|
||||||
|
.out{background:var(--sage);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
|
||||||
|
.inputbar{display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-top:1px solid var(--line)}
|
||||||
|
.inputbar input{flex:1;border:none;background:var(--cream);border-radius:18px;padding:9px 13px;font-size:11.5px;font-family:inherit;outline:none}
|
||||||
|
.inputbar .snd{width:34px;height:34px;border-radius:50%;background:var(--herbal);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
|
||||||
|
|
||||||
|
/* bottom sheet */
|
||||||
|
.sheet{position:absolute;inset:26px 0 0 0;background:rgba(27,37,31,.45);display:none;align-items:flex-end;z-index:20;animation:fade .2s}
|
||||||
|
.sheet.active{display:flex}
|
||||||
|
.sheet .panel{width:100%;background:#fff;border-radius:22px 22px 0 0;padding:18px 16px 22px;display:flex;flex-direction:column;gap:9px;animation:up .25s ease}
|
||||||
|
@keyframes up{from{transform:translateY(40px)}to{transform:none}}
|
||||||
|
.sheet .grab{width:42px;height:5px;background:var(--line);border-radius:3px;align-self:center;margin-bottom:6px}
|
||||||
|
|
||||||
|
/* toast */
|
||||||
|
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--herbal);color:#fff;padding:11px 18px;border-radius:14px;font-size:12px;opacity:0;pointer-events:none;transition:.3s;z-index:30;display:flex;align-items:center;gap:8px;white-space:nowrap}
|
||||||
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
|
||||||
|
@media(max-width:720px){.help{position:static}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- icons -->
|
||||||
|
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||||
|
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z"/><path d="M5 19c4-1 7-4 9-8"/></symbol>
|
||||||
|
<symbol id="i-home" viewBox="0 0 24 24"><path d="M4 11l8-6 8 6"/><path d="M6 10v9h12v-9"/><path d="M10 19v-5h4v5"/></symbol>
|
||||||
|
<symbol id="i-chart" viewBox="0 0 24 24"><path d="M5 20V4"/><path d="M5 20h15"/><path d="M9 20v-6"/><path d="M13 20v-9"/><path d="M17 20v-4"/></symbol>
|
||||||
|
<symbol id="i-chat" viewBox="0 0 24 24"><path d="M5 5h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H10l-4 4v-4H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M8 9h8M8 12h5"/></symbol>
|
||||||
|
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20c0-4 3-6 6.5-6s6.5 2 6.5 6"/></symbol>
|
||||||
|
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4"/></symbol>
|
||||||
|
<symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3 11h18a9 9 0 0 1-18 0z"/><path d="M2 11h20"/><path d="M9 7c0-1.5 1-2 1-3M13 7c0-1.5 1-2 1-3"/></symbol>
|
||||||
|
<symbol id="i-apple" viewBox="0 0 24 24"><path d="M12 8c-1.5-1.5-5-1.5-6 1.5s1 9 3.5 9c1 0 1.5-.6 2.5-.6s1.5.6 2.5.6c2.5 0 4.5-6 3.5-9s-4.5-3-6-1.5z"/><path d="M12 8c0-2 1-3 3-3.5"/></symbol>
|
||||||
|
<symbol id="i-fish" viewBox="0 0 24 24"><path d="M3 12c3-5 11-5 15 0-4 5-12 5-15 0z"/><path d="M18 12l3-3v6z"/><circle cx="8" cy="11" r=".8" fill="currentColor" stroke="none"/></symbol>
|
||||||
|
<symbol id="i-fire" viewBox="0 0 24 24"><path d="M12 3c1 3 4 4 4 8a4 4 0 0 1-8 0c0-1 .5-2 1-2.5C9 11 12 8 12 3z"/></symbol>
|
||||||
|
<symbol id="i-drop" viewBox="0 0 24 24"><path d="M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z"/></symbol>
|
||||||
|
<symbol id="i-scale" viewBox="0 0 24 24"><circle cx="12" cy="13" r="8"/><path d="M12 13l4-4"/><path d="M12 5V3"/></symbol>
|
||||||
|
<symbol id="i-camera" viewBox="0 0 24 24"><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.2"/></symbol>
|
||||||
|
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2H4.5z"/><path d="M10 20a2 2 0 0 0 4 0"/></symbol>
|
||||||
|
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||||||
|
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13"/><path d="M12 6l6 6-6 6"/></symbol>
|
||||||
|
<symbol id="i-card" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
|
||||||
|
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12l4.5 4.5L19 7"/></symbol>
|
||||||
|
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></symbol>
|
||||||
|
<symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6c-2-1.5-5-1.5-7-1v13c2-.5 5-.5 7 1 2-1.5 5-1.5 7-1V5c-2-.5-5-.5-7 1z"/><path d="M12 6v13"/></symbol>
|
||||||
|
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></symbol>
|
||||||
|
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20S4 14.5 4 9a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 5.5-8 11-8 11z"/></symbol>
|
||||||
|
<symbol id="i-send" viewBox="0 0 24 24"><path d="M4 12l16-7-7 16-2-7-7-2z"/></symbol>
|
||||||
|
<symbol id="i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="0.6" fill="currentColor" stroke="none"/></symbol>
|
||||||
|
<symbol id="i-gift" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="9" rx="1"/><path d="M3 10h18M12 10v9M12 10c-1-3-5-3-5-1s4 1 5 1zM12 10c1-3 5-3 5-1s-4 1-5 1z"/></symbol>
|
||||||
|
<symbol id="i-doc" viewBox="0 0 24 24"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4M9 12h6M9 16h6"/></symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- HELP PANEL -->
|
||||||
|
<aside class="help">
|
||||||
|
<div class="k">VIZELBERG · Prototype</div>
|
||||||
|
<h1>Кабинет клиента</h1>
|
||||||
|
<p>Кликай по кнопкам — прототип живой. Это клиентская часть (Telegram / MAX mini-app).</p>
|
||||||
|
<ul>
|
||||||
|
<li><b>›</b> Нижнее меню — переключает разделы</li>
|
||||||
|
<li><b>›</b> Блюдо в меню — открывает рецепт</li>
|
||||||
|
<li><b>›</b> Круглая кнопка «+» — быстрые действия</li>
|
||||||
|
<li><b>›</b> «Отметить съеденным» — обновляет калории</li>
|
||||||
|
<li><b>›</b> Чат — напиши и отправь сообщение</li>
|
||||||
|
<li><b>›</b> Тарифы → «Оформить» — отклик оплаты</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tip">💬 Походи по экранам и задавай мне вопросы: «что на экране прогресса», «как сделать оплату нагляднее», «добавь экран Х» — доработаю.</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- DEVICE -->
|
||||||
|
<div class="phone"><div class="screenwrap">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
|
||||||
|
<!-- ONBOARDING -->
|
||||||
|
<section class="screen active" id="s-onboard">
|
||||||
|
<div class="ob">
|
||||||
|
<div class="badge"><svg class="ic ic-lg"><use href="#i-leaf"/></svg></div>
|
||||||
|
<h3>Добро пожаловать<br>в VIZELBERG</h3>
|
||||||
|
<p>Персональное питание как система. Меню, контроль и поддержка — в одном месте.</p>
|
||||||
|
<div class="dots"><i class="on"></i><i></i><i></i></div>
|
||||||
|
<button class="btn gold" style="width:100%" onclick="go('s-home')">Начать <svg class="ic ic-sm"><use href="#i-arrow"/></svg></button>
|
||||||
|
<div class="muted" style="cursor:pointer" onclick="go('s-home')">Уже есть аккаунт? Войти</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HOME -->
|
||||||
|
<section class="screen" id="s-home">
|
||||||
|
<div class="top"><div class="logo"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div class="ti">Сегодня</div><div class="sp" onclick="toast('Уведомлений нет')"><svg class="ic"><use href="#i-bell"/></svg></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile flat" style="background:var(--herbal);color:var(--cream);border:none">
|
||||||
|
<div class="muted" style="color:var(--sage)">Среда, 27 мая</div>
|
||||||
|
<div class="row"><div class="ico" style="color:var(--gold)"><svg class="ic"><use href="#i-fire"/></svg></div><div class="tx"><b style="color:#fff" id="kcal">1400 / 1900 ккал</b></div></div>
|
||||||
|
<div class="bar"><i id="kcalbar" style="width:74%"></i></div>
|
||||||
|
</div>
|
||||||
|
<div class="h">План питания</div>
|
||||||
|
<div class="tile" onclick="go('s-recipe')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-sun"/></svg></div><div class="tx"><b>Завтрак</b><span class="muted">Овсянка с ягодами · 320 ккал</span></div><svg class="ic ic-sm" style="color:var(--sage)"><use href="#i-check"/></svg></div></div>
|
||||||
|
<div class="tile" onclick="go('s-recipe')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-bowl"/></svg></div><div class="tx"><b>Обед</b><span class="muted">Гречка + индейка · 480 ккал</span></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile" onclick="go('s-recipe')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-apple"/></svg></div><div class="tx"><b>Перекус</b><span class="muted">Яблоко + орехи · 180 ккал</span></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile" onclick="go('s-recipe')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-fish"/></svg></div><div class="tx"><b>Ужин</b><span class="muted">Лосось + овощи · 420 ккал</span></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile" style="background:var(--cream)" onclick="go('s-know')"><div class="row"><div class="ico" style="color:var(--gold)"><svg class="ic"><use href="#i-book"/></svg></div><div class="tx"><b>Совет дня</b><span class="muted">Как не переедать вечером →</span></div></div></div>
|
||||||
|
</div>
|
||||||
|
<nav class="tabbar" data-tab></nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- RECIPE -->
|
||||||
|
<section class="screen" id="s-recipe">
|
||||||
|
<div class="top"><div class="back" onclick="go('s-home')"><svg class="ic"><use href="#i-arrow"/></svg></div><div class="ti">Обед</div><div class="sp" onclick="toast('Добавлено в избранное')"><svg class="ic"><use href="#i-heart"/></svg></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile flat" style="align-items:center;background:var(--sage);border:none;padding:26px"><svg class="ic" style="width:60px;height:60px;color:#fff"><use href="#i-bowl"/></svg></div>
|
||||||
|
<div class="h">Гречка с индейкой и салатом</div>
|
||||||
|
<div class="row" style="gap:7px;flex-wrap:wrap">
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-fire"/></svg> 480 ккал</span>
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-clock"/></svg> 25 мин</span>
|
||||||
|
<span class="pill">Б 38 · Ж 14 · У 52</span>
|
||||||
|
</div>
|
||||||
|
<div class="h" style="margin-top:4px">Состав</div>
|
||||||
|
<div class="tile flat"><div class="muted" style="line-height:1.8">Гречка 60 г · Индейка 150 г<br>Огурец, помидор, зелень<br>Оливковое масло 1 ч.л.</div></div>
|
||||||
|
<button class="btn outline" onclick="toast('Открываю пошаговый рецепт')"><svg class="ic ic-sm"><use href="#i-doc"/></svg> Рецепт пошагово</button>
|
||||||
|
<button class="btn" id="eatBtn" onclick="eatMeal(this)"><svg class="ic ic-sm"><use href="#i-check"/></svg> Отметить съеденным</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PROGRESS -->
|
||||||
|
<section class="screen" id="s-progress">
|
||||||
|
<div class="top"><div class="logo"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div class="ti">Прогресс</div><div class="sp" onclick="toast('Выбор периода')"><svg class="ic"><use href="#i-cal"/></svg></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile flat"><div class="row"><div class="ico"><svg class="ic"><use href="#i-scale"/></svg></div><div class="tx"><b>Вес · 68,4 кг</b><span class="muted">−2,1 кг за месяц</span></div></div>
|
||||||
|
<svg viewBox="0 0 240 56" style="width:100%;height:56px"><polyline points="0,44 40,40 80,30 120,28 160,18 200,14 240,9" fill="none" stroke="#7C9070" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="tile" onclick="addWater()"><div class="row"><div class="ico"><svg class="ic"><use href="#i-drop"/></svg></div><div class="tx"><b>Вода <span class="muted" style="font-weight:400">(нажми +250 мл)</span></b></div><span class="muted" id="waterTxt">1,5 / 2,5 л</span></div><div class="bar green"><i id="waterBar" style="width:60%"></i></div></div>
|
||||||
|
<div class="tile flat"><div class="row"><div class="ico"><svg class="ic"><use href="#i-target"/></svg></div><div class="tx"><b>Цель недели</b></div><span class="muted">5/7 дней</span></div><div class="bar"><i style="width:71%"></i></div></div>
|
||||||
|
<div class="h">Самочувствие</div>
|
||||||
|
<div class="row" style="flex-wrap:wrap;gap:7px">
|
||||||
|
<span class="pill on"><svg class="ic ic-sm"><use href="#i-clock"/></svg> Сон 7ч</span>
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-fire"/></svg> Энергия ↑</span>
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-heart"/></svg> ЖКТ ОК</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn outline" onclick="toast('Камера: фото блюда')"><svg class="ic ic-sm"><use href="#i-camera"/></svg> Чек-ин фото</button>
|
||||||
|
</div>
|
||||||
|
<nav class="tabbar" data-tab></nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CHAT -->
|
||||||
|
<section class="screen" id="s-chat">
|
||||||
|
<div class="top"><div class="logo" style="background:var(--sage)"><svg class="ic ic-sm"><use href="#i-user"/></svg></div><div class="ti">Нутрициолог</div><div class="sp"><span class="pill" style="font-size:9px;color:var(--sage)">онлайн</span></div></div>
|
||||||
|
<div class="chat" id="chatBox">
|
||||||
|
<div class="msg in">Доброе утро! Как самочувствие на новом меню?</div>
|
||||||
|
<div class="msg out">Лучше! Энергии больше, не тянет на сладкое</div>
|
||||||
|
<div class="msg in">Отлично — работают сложные углеводы. Держим курс 🌿</div>
|
||||||
|
<div class="msg out">А можно заменить гречку на булгур?</div>
|
||||||
|
<div class="msg in">Да, по КБЖУ почти то же. Уже заменил в меню</div>
|
||||||
|
</div>
|
||||||
|
<div class="inputbar"><input id="chatInput" placeholder="Сообщение…" onkeydown="if(event.key==='Enter')sendMsg()"><div class="snd" onclick="sendMsg()"><svg class="ic ic-sm"><use href="#i-send"/></svg></div></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SUBSCRIPTION -->
|
||||||
|
<section class="screen" id="s-sub">
|
||||||
|
<div class="top"><div class="back" onclick="go('s-profile')"><svg class="ic"><use href="#i-arrow"/></svg></div><div class="ti">Тарифы</div><div class="sp"></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile flat" style="border:2px solid var(--gold)">
|
||||||
|
<div class="row"><div class="tx"><b>Сопровождение · 3 мес</b><span class="muted">меню + чат + контроль</span></div><span class="pill" style="background:var(--gold);color:#3a2e10;border:none">хит</span></div>
|
||||||
|
<div class="row"><div class="tx" style="font-size:17px;font-weight:700;color:var(--herbal)">24 900 ₽</div><span class="muted" style="text-decoration:line-through">29 000</span></div>
|
||||||
|
<button class="btn gold" onclick="pay()"><svg class="ic ic-sm"><use href="#i-card"/></svg> Оформить · СБП</button>
|
||||||
|
</div>
|
||||||
|
<div class="tile" onclick="toast('Выбран тариф «Поддержка»')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-leaf"/></svg></div><div class="tx"><b>Поддержка · 1 мес</b><span class="muted">меню + чек-ины</span></div><b style="color:var(--herbal)">4 900</b></div></div>
|
||||||
|
<div class="tile" onclick="toast('Выбран «Разовый разбор»')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-doc"/></svg></div><div class="tx"><b>Разовый разбор</b><span class="muted">анализы + рекомендации</span></div><b style="color:var(--herbal)">3 500</b></div></div>
|
||||||
|
<div class="tile" onclick="toast('Реферальная ссылка скопирована')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-gift"/></svg></div><div class="tx"><b>Пригласи подругу</b><span class="muted">−500 ₽ вам обеим</span></div></div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- KNOWLEDGE -->
|
||||||
|
<section class="screen" id="s-know">
|
||||||
|
<div class="top"><div class="logo"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div class="ti">База знаний</div><div class="sp"></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="row" style="gap:7px;flex-wrap:wrap">
|
||||||
|
<span class="pill on">Все</span><span class="pill">Питание</span><span class="pill">Привычки</span><span class="pill">Анализы</span>
|
||||||
|
</div>
|
||||||
|
<div class="tile" onclick="toast('Статья открыта')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-book"/></svg></div><div class="tx"><b>Как читать состав на этикетке</b><span class="muted">5 мин</span></div></div></div>
|
||||||
|
<div class="tile" onclick="toast('Статья открыта')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-drop"/></svg></div><div class="tx"><b>Сколько воды реально нужно</b><span class="muted">3 мин</span></div></div></div>
|
||||||
|
<div class="tile" onclick="toast('Статья открыта')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-clock"/></svg></div><div class="tx"><b>Интервальное питание: за и против</b><span class="muted">7 мин</span></div></div></div>
|
||||||
|
<div class="tile" onclick="toast('Статья открыта')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-fire"/></svg></div><div class="tx"><b>Белок: нормы и источники</b><span class="muted">6 мин</span></div></div></div>
|
||||||
|
<div class="tile" style="background:var(--cream)" onclick="toast('Видео-урок')"><div class="row"><div class="ico" style="color:var(--gold)"><svg class="ic"><use href="#i-target"/></svg></div><div class="tx"><b>Видео-урок недели</b><span class="muted">Завтрак за 10 минут</span></div></div></div>
|
||||||
|
</div>
|
||||||
|
<nav class="tabbar" data-tab></nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PROFILE -->
|
||||||
|
<section class="screen" id="s-profile">
|
||||||
|
<div class="top"><div class="ti">Профиль</div><div class="sp"></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile flat" style="align-items:center;gap:9px"><div class="logo" style="width:60px;height:60px;border-radius:50%;background:var(--sage)"><svg class="ic ic-lg"><use href="#i-user"/></svg></div><div class="h">Анна</div><span class="muted">Цель: −5 кг · здоровые привычки</span></div>
|
||||||
|
<div class="tile" onclick="toast('Цель и параметры')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-target"/></svg></div><div class="tx"><b>Моя цель и параметры</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile" onclick="toast('Раздел «Анализы»')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-doc"/></svg></div><div class="tx"><b>Мои анализы</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile" onclick="go('s-sub')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-card"/></svg></div><div class="tx"><b>Подписка и платежи</b><span class="muted">Активна до 27 авг</span></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile" onclick="toast('Настройка напоминаний')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-bell"/></svg></div><div class="tx"><b>Напоминания</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile" onclick="toast('Реферальная ссылка скопирована')"><div class="row"><div class="ico"><svg class="ic"><use href="#i-gift"/></svg></div><div class="tx"><b>Пригласить друзей</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
</div>
|
||||||
|
<nav class="tabbar" data-tab></nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ACTION SHEET -->
|
||||||
|
<div class="sheet" id="sheet" onclick="if(event.target===this)closeSheet()">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="grab"></div>
|
||||||
|
<div class="h" style="text-align:center;margin-bottom:4px">Быстрое действие</div>
|
||||||
|
<button class="btn outline" onclick="closeSheet();toast('Добавлен приём пищи')"><svg class="ic ic-sm"><use href="#i-plus"/></svg> Добавить блюдо</button>
|
||||||
|
<button class="btn outline" onclick="closeSheet();go('s-progress');addWater()"><svg class="ic ic-sm"><use href="#i-drop"/></svg> + Стакан воды</button>
|
||||||
|
<button class="btn outline" onclick="closeSheet();toast('Камера: чек-ин фото')"><svg class="ic ic-sm"><use href="#i-camera"/></svg> Фото-чекин</button>
|
||||||
|
<button class="btn outline" onclick="closeSheet();go('s-chat')"><svg class="ic ic-sm"><use href="#i-chat"/></svg> Написать нутрициологу</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="toast" id="toast"></div>
|
||||||
|
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const tabs=[
|
||||||
|
{id:'s-home',ic:'i-home',label:'Сегодня'},
|
||||||
|
{id:'s-progress',ic:'i-chart',label:'Прогресс'},
|
||||||
|
{fab:true},
|
||||||
|
{id:'s-chat',ic:'i-chat',label:'Чат'},
|
||||||
|
{id:'s-profile',ic:'i-user',label:'Профиль'},
|
||||||
|
];
|
||||||
|
function buildTabs(){
|
||||||
|
document.querySelectorAll('[data-tab]').forEach(nav=>{
|
||||||
|
const cur=nav.closest('.screen').id;
|
||||||
|
nav.innerHTML=tabs.map(t=>t.fab
|
||||||
|
? `<div class="fab" onclick="openSheet()"><svg class="ic"><use href="#i-plus"/></svg></div>`
|
||||||
|
: `<a class="${t.id===cur?'on':''}" onclick="go('${t.id}')"><svg class="ic"><use href="#${t.ic}"/></svg>${t.label}</a>`
|
||||||
|
).join('');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function go(id){
|
||||||
|
document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
|
||||||
|
document.getElementById(id).classList.add('active');
|
||||||
|
buildTabs();
|
||||||
|
const b=document.getElementById(id).querySelector('.body');if(b)b.scrollTop=0;
|
||||||
|
}
|
||||||
|
let t;
|
||||||
|
function toast(msg){
|
||||||
|
const el=document.getElementById('toast');el.textContent=msg;el.classList.add('show');
|
||||||
|
clearTimeout(t);t=setTimeout(()=>el.classList.remove('show'),1800);
|
||||||
|
}
|
||||||
|
function openSheet(){document.getElementById('sheet').classList.add('active')}
|
||||||
|
function closeSheet(){document.getElementById('sheet').classList.remove('active')}
|
||||||
|
|
||||||
|
function eatMeal(btn){
|
||||||
|
btn.classList.add('done');btn.innerHTML='<svg class="ic ic-sm"><use href="#i-check"/></svg> Отмечено';
|
||||||
|
document.getElementById('kcal').textContent='1880 / 1900 ккал';
|
||||||
|
document.getElementById('kcalbar').style.width='99%';
|
||||||
|
toast('+480 ккал · засчитано');
|
||||||
|
setTimeout(()=>go('s-home'),700);
|
||||||
|
}
|
||||||
|
let water=1.5;
|
||||||
|
function addWater(){
|
||||||
|
water=Math.min(2.5,Math.round((water+0.25)*100)/100);
|
||||||
|
document.getElementById('waterTxt').textContent=water.toString().replace('.',',')+' / 2,5 л';
|
||||||
|
document.getElementById('waterBar').style.width=(water/2.5*100)+'%';
|
||||||
|
if(water>=2.5)toast('Цель по воде достигнута!');else toast('+250 мл воды');
|
||||||
|
}
|
||||||
|
function sendMsg(){
|
||||||
|
const inp=document.getElementById('chatInput');const v=inp.value.trim();if(!v)return;
|
||||||
|
const box=document.getElementById('chatBox');
|
||||||
|
box.insertAdjacentHTML('beforeend',`<div class="msg out">${v.replace(/</g,'<')}</div>`);
|
||||||
|
inp.value='';box.scrollTop=box.scrollHeight;
|
||||||
|
setTimeout(()=>{
|
||||||
|
box.insertAdjacentHTML('beforeend',`<div class="msg in">Приняла! Отвечу в течение дня и поправлю меню при необходимости 🌿</div>`);
|
||||||
|
box.scrollTop=box.scrollHeight;
|
||||||
|
},900);
|
||||||
|
}
|
||||||
|
function pay(){
|
||||||
|
toast('Оплата прошла · подписка активна');
|
||||||
|
setTimeout(()=>go('s-home'),1200);
|
||||||
|
}
|
||||||
|
buildTabs();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
318
assets_kit.html
Normal file
318
assets_kit.html
Normal file
@ -0,0 +1,318 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>VIZELBERG — Визитки · Мини-приложение · Кнопки</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||||||
|
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||||||
|
--line:rgba(47,74,60,.12);
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
|
||||||
|
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
|
||||||
|
nav{position:sticky;top:0;background:rgba(245,239,230,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:20}
|
||||||
|
nav .wrap{display:flex;gap:20px;padding:14px 28px;font-size:13px}
|
||||||
|
nav a{color:var(--herbal);text-decoration:none;font-weight:600;opacity:.7}
|
||||||
|
nav a:hover{opacity:1}
|
||||||
|
header{background:var(--herbal);color:var(--cream);padding:54px 0;text-align:center}
|
||||||
|
header .k{font-size:12px;letter-spacing:6px;color:var(--gold);text-transform:uppercase}
|
||||||
|
header h1{font-family:Georgia,serif;font-size:26px;margin-top:10px}
|
||||||
|
section{padding:60px 0;border-bottom:1px solid var(--line)}
|
||||||
|
.kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:700}
|
||||||
|
h2{font-family:Georgia,serif;font-size:28px;color:var(--herbal);margin:8px 0 6px}
|
||||||
|
.sub{color:#5d6b62;max-width:660px;margin-bottom:28px}
|
||||||
|
h3{font-size:14px;color:var(--herbal);margin:30px 0 14px;letter-spacing:.4px;text-transform:uppercase;font-size:12px;letter-spacing:3px;color:#6c7a71}
|
||||||
|
|
||||||
|
/* ===== business cards ===== */
|
||||||
|
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
|
||||||
|
.bc{aspect-ratio:1.75/1;border-radius:16px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 30px rgba(47,74,60,.14);position:relative;overflow:hidden}
|
||||||
|
.bc .leaf-bg{position:absolute;right:-30px;bottom:-40px;opacity:.12}
|
||||||
|
.bc .nm{font-size:15px;font-weight:600}
|
||||||
|
.bc .role{font-size:11px;letter-spacing:1px;opacity:.85}
|
||||||
|
.bc .contacts{font-size:11px;line-height:1.7;opacity:.9}
|
||||||
|
.lbl{font-size:12px;color:#6c7a71;margin-top:10px;text-align:center}
|
||||||
|
|
||||||
|
/* ===== phones ===== */
|
||||||
|
.phones{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
|
||||||
|
.phone{background:#1c2620;border-radius:30px;padding:10px;box-shadow:0 14px 34px rgba(47,74,60,.2)}
|
||||||
|
.screen{background:var(--cream);border-radius:22px;overflow:hidden;aspect-ratio:9/19;display:flex;flex-direction:column;font-size:11px}
|
||||||
|
.tg-bar{background:var(--herbal);color:var(--cream);padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:11px}
|
||||||
|
.tg-bar .dot{width:20px;height:20px;border-radius:6px;background:var(--sage);display:flex;align-items:center;justify-content:center}
|
||||||
|
.scr-body{padding:12px;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:9px}
|
||||||
|
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
|
||||||
|
.tile b{color:var(--herbal);font-size:11px}
|
||||||
|
.muted{color:#8a978d;font-size:10px}
|
||||||
|
.bar{height:6px;background:#eee;border-radius:4px;margin-top:6px;overflow:hidden}
|
||||||
|
.bar i{display:block;height:6px;border-radius:4px;background:var(--gold)}
|
||||||
|
.btn-mini{background:var(--herbal);color:#fff;border-radius:10px;padding:8px;text-align:center;font-size:11px;font-weight:600}
|
||||||
|
.tabbar{display:flex;justify-content:space-around;padding:8px 0;background:#fff;border-top:1px solid var(--line);font-size:14px}
|
||||||
|
.tabbar span{opacity:.4}.tabbar span.on{opacity:1}
|
||||||
|
.chip{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:3px 9px;font-size:9.5px;color:var(--herbal);margin:2px 2px 0 0}
|
||||||
|
.msg{max-width:78%;padding:7px 10px;border-radius:12px;font-size:10px}
|
||||||
|
.msg.in{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
|
||||||
|
.msg.out{background:var(--sage);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
|
||||||
|
|
||||||
|
/* ===== buttons ===== */
|
||||||
|
.btn{font-family:inherit;border:none;cursor:pointer;border-radius:12px;font-weight:600;font-size:14px;padding:12px 24px;transition:.15s;display:inline-flex;align-items:center;gap:8px}
|
||||||
|
.btn-primary{background:var(--herbal);color:#fff}
|
||||||
|
.btn-primary:hover{background:#26402f}
|
||||||
|
.btn-accent{background:var(--gold);color:#3a2e10}
|
||||||
|
.btn-accent:hover{background:#b8923f}
|
||||||
|
.btn-sage{background:var(--sage);color:#fff}
|
||||||
|
.btn-sage:hover{background:#6c8061}
|
||||||
|
.btn-secondary{background:transparent;color:var(--herbal);border:1.5px solid var(--herbal)}
|
||||||
|
.btn-secondary:hover{background:var(--herbal);color:#fff}
|
||||||
|
.btn-ghost{background:var(--cream);color:var(--herbal)}
|
||||||
|
.btn-ghost:hover{background:#ece3d4}
|
||||||
|
.btn-pill{border-radius:30px}
|
||||||
|
.btn-lg{padding:16px 32px;font-size:16px}
|
||||||
|
.btn-sm{padding:8px 16px;font-size:12px}
|
||||||
|
.btn-block{display:flex;width:100%;justify-content:center}
|
||||||
|
.btn:disabled{opacity:.4;cursor:not-allowed}
|
||||||
|
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
|
||||||
|
.panel{border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:18px;background:#fff}
|
||||||
|
.panel .t{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:700}
|
||||||
|
.panel.dark{background:var(--herbal)}
|
||||||
|
.code{font-family:Consolas,monospace;font-size:11px;color:#8a978d}
|
||||||
|
@media(max-width:840px){.cards{grid-template-columns:1fr}.phones{grid-template-columns:repeat(2,1fr)}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav><div class="wrap">
|
||||||
|
<a href="#cards">Визитки</a>
|
||||||
|
<a href="#app">Мини-приложение</a>
|
||||||
|
<a href="#buttons">Кнопки сайта</a>
|
||||||
|
</div></nav>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="k">VIZELBERG · Asset Kit</div>
|
||||||
|
<h1>Визитки · Мини-приложение · Кнопки</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ============ BUSINESS CARDS ============ -->
|
||||||
|
<section id="cards"><div class="wrap">
|
||||||
|
<div class="kicker">01 · Визитки</div>
|
||||||
|
<h2>Варианты визиток</h2>
|
||||||
|
<p class="sub">Лицо и оборот в фирменной палитре. Формат 90×50 мм. Имя — плейсхолдер, заменим на реальное.</p>
|
||||||
|
|
||||||
|
<h3>Вариант A · тёмная (премиум)</h3>
|
||||||
|
<div class="cards">
|
||||||
|
<div>
|
||||||
|
<div class="bc" style="background:var(--herbal);color:var(--cream)">
|
||||||
|
<svg class="leaf-bg" width="160" height="160" viewBox="0 0 120 120"><path d="M20 80 C20 40 50 14 100 14 C90 64 60 90 20 80 Z" fill="#C9A24B"/></svg>
|
||||||
|
<svg width="150" height="40" viewBox="0 0 240 56" style="position:relative">
|
||||||
|
<circle cx="20" cy="28" r="14" fill="#C9A24B"/><path d="M12 24 C12 18 17 14 24 14 C22 21 18 26 12 28 Z" fill="#2F4A3C"/>
|
||||||
|
<text x="42" y="28" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#F5EFE6">vizelberg</text>
|
||||||
|
<text x="44" y="46" font-family="'Segoe UI',sans-serif" font-size="7.5" letter-spacing="1" fill="#E8A87C">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
<div style="position:relative">
|
||||||
|
<div class="nm">Имя Фамилия</div>
|
||||||
|
<div class="role">нутрициолог</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lbl">Лицо</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="bc" style="background:var(--herbal);color:var(--cream);align-items:flex-end;justify-content:center;text-align:right">
|
||||||
|
<div class="contacts">
|
||||||
|
@vizelberg<br>
|
||||||
|
+7 ··· ··· ·· ··<br>
|
||||||
|
hello@vizelberg.ru<br>
|
||||||
|
vizelberg.ru
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lbl">Оборот</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Вариант B · кремовая (мягкая)</h3>
|
||||||
|
<div class="cards">
|
||||||
|
<div>
|
||||||
|
<div class="bc" style="background:var(--cream);color:var(--herbal)">
|
||||||
|
<svg class="leaf-bg" width="160" height="160" viewBox="0 0 120 120"><path d="M20 80 C20 40 50 14 100 14 C90 64 60 90 20 80 Z" fill="#7C9070"/></svg>
|
||||||
|
<svg width="150" height="40" viewBox="0 0 240 56" style="position:relative">
|
||||||
|
<circle cx="20" cy="28" r="14" fill="#7C9070"/><path d="M12 24 C12 18 17 14 24 14 C22 21 18 26 12 28 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="42" y="28" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C">vizelberg</text>
|
||||||
|
<text x="44" y="46" font-family="'Segoe UI',sans-serif" font-size="7.5" letter-spacing="1" fill="#7C9070">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
<div style="position:relative">
|
||||||
|
<div class="nm">Имя Фамилия</div>
|
||||||
|
<div class="role" style="color:var(--sage)">нутрициолог · нутрициолог-консультант</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lbl">Лицо</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="bc" style="background:var(--sage);color:#fff;align-items:center;justify-content:center;text-align:center">
|
||||||
|
<svg width="60" height="60" viewBox="0 0 120 120"><circle cx="60" cy="60" r="40" fill="#F5EFE6"/><path d="M44 52 C44 40 52 32 66 32 C62 46 56 54 44 60 Z" fill="#7C9070"/></svg>
|
||||||
|
<div style="font-family:Georgia,serif;font-size:14px;margin-top:8px">нутрициология здоровья</div>
|
||||||
|
</div>
|
||||||
|
<div class="lbl">Оборот (знак)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Вариант C · золотой акцент (вертикальная)</h3>
|
||||||
|
<div class="cards" style="grid-template-columns:repeat(4,1fr)">
|
||||||
|
<div>
|
||||||
|
<div class="bc" style="aspect-ratio:1/1.75;background:var(--cream);color:var(--herbal);align-items:center;text-align:center;justify-content:space-between">
|
||||||
|
<svg width="46" height="46" viewBox="0 0 120 120"><circle cx="60" cy="60" r="40" fill="#C9A24B"/><path d="M44 52 C44 40 52 32 66 32 C62 46 56 54 44 60 Z" fill="#2F4A3C"/></svg>
|
||||||
|
<div>
|
||||||
|
<div style="font-family:Georgia,serif;font-size:18px">vizelberg</div>
|
||||||
|
<div style="font-size:7px;letter-spacing:0.5px;color:var(--sage)">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:10px;line-height:1.6">Имя Фамилия<br><span style="color:var(--sage)">нутрициолог</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="lbl">Вертикальная</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- ============ MINI APP ============ -->
|
||||||
|
<section id="app"><div class="wrap">
|
||||||
|
<div class="kicker">02 · Мини-приложение</div>
|
||||||
|
<h2>Экраны Telegram / MAX mini-app</h2>
|
||||||
|
<p class="sub">Клиентская часть: меню дня, трекинг, чат с нутрициологом, оплата подписки. Единый бэкенд — общий вид в обоих мессенджерах.</p>
|
||||||
|
<div class="phones">
|
||||||
|
|
||||||
|
<!-- screen 1: меню дня -->
|
||||||
|
<div>
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="tg-bar"><div class="dot"><svg width="12" height="12" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#F5EFE6"/></svg></div>vizelberg · Меню</div>
|
||||||
|
<div class="scr-body">
|
||||||
|
<div style="font-weight:600;color:var(--herbal)">Среда, 27 мая</div>
|
||||||
|
<div class="tile"><b>🍳 Завтрак</b><div class="muted">Овсянка с ягодами · 320 ккал</div></div>
|
||||||
|
<div class="tile"><b>🥗 Обед</b><div class="muted">Гречка + индейка + салат · 480 ккал</div></div>
|
||||||
|
<div class="tile"><b>🍎 Перекус</b><div class="muted">Яблоко + орехи · 180 ккал</div></div>
|
||||||
|
<div class="tile"><b>🐟 Ужин</b><div class="muted">Лосось + овощи · 420 ккал</div>
|
||||||
|
<div class="bar"><i style="width:74%"></i></div>
|
||||||
|
<div class="muted" style="margin-top:4px">1400 / 1900 ккал</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar"><span class="on">🍽️</span><span>📊</span><span>💬</span><span>👤</span></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="lbl">Меню дня</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- screen 2: трекинг -->
|
||||||
|
<div>
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="tg-bar"><div class="dot"><svg width="12" height="12" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#F5EFE6"/></svg></div>Прогресс</div>
|
||||||
|
<div class="scr-body">
|
||||||
|
<div class="tile"><b>Вес</b><div class="muted">68,4 кг · −2,1 кг за месяц</div>
|
||||||
|
<svg width="100%" height="40" viewBox="0 0 200 40"><polyline points="0,30 40,28 80,22 120,20 160,14 200,10" fill="none" stroke="#7C9070" stroke-width="3"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="tile"><b>Вода</b><div class="bar"><i style="width:60%;background:#7C9070"></i></div><div class="muted" style="margin-top:4px">1,5 / 2,5 л</div></div>
|
||||||
|
<div class="tile"><b>Самочувствие</b><div style="margin-top:4px"><span class="chip">сон 😴</span><span class="chip">энергия ⚡</span><span class="chip">ЖКТ 👍</span></div></div>
|
||||||
|
<div class="tile"><b>Чек-ин фото</b><div class="muted">+ добавить фото блюда</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar"><span>🍽️</span><span class="on">📊</span><span>💬</span><span>👤</span></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="lbl">Трекинг прогресса</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- screen 3: чат -->
|
||||||
|
<div>
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="tg-bar"><div class="dot"><svg width="12" height="12" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#F5EFE6"/></svg></div>Нутрициолог</div>
|
||||||
|
<div class="scr-body" style="background:#efe7da">
|
||||||
|
<div class="msg in">Доброе утро! Как самочувствие после нового меню? 🌿</div>
|
||||||
|
<div class="msg out">Лучше! Энергии больше, не тянет на сладкое</div>
|
||||||
|
<div class="msg in">Отлично 👏 Это работают сложные углеводы. Держим курс</div>
|
||||||
|
<div class="msg out">А можно заменить гречку на булгур?</div>
|
||||||
|
<div class="msg in">Да, по КБЖУ почти то же. Заменю в меню ✅</div>
|
||||||
|
<div style="margin-top:auto;display:flex;gap:6px"><div style="flex:1;background:#fff;border-radius:14px;padding:7px 10px;color:#8a978d;font-size:10px">Сообщение…</div><div class="dot" style="background:var(--herbal)"><span style="color:#fff">➤</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar"><span>🍽️</span><span>📊</span><span class="on">💬</span><span>👤</span></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="lbl">Чат с экспертом</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- screen 4: подписка/оплата -->
|
||||||
|
<div>
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="tg-bar"><div class="dot"><svg width="12" height="12" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#F5EFE6"/></svg></div>Подписка</div>
|
||||||
|
<div class="scr-body">
|
||||||
|
<div class="tile" style="border:2px solid var(--gold)"><b>Сопровождение · 3 мес</b><div class="muted">персональное меню + чат + контроль</div><div style="font-size:16px;font-weight:700;color:var(--herbal);margin-top:6px">24 900 ₽</div><span class="chip" style="background:var(--gold);color:#3a2e10;border:none">−15% хит</span></div>
|
||||||
|
<div class="tile"><b>Поддержка · 1 мес</b><div class="muted">меню + чек-ины</div><div style="font-weight:700;color:var(--herbal);margin-top:4px">4 900 ₽/мес</div></div>
|
||||||
|
<div class="tile"><b>Разовый разбор</b><div class="muted">анализы + рекомендации</div><div style="font-weight:700;color:var(--herbal);margin-top:4px">3 500 ₽</div></div>
|
||||||
|
<div class="btn-mini">Оформить подписку →</div>
|
||||||
|
<div class="muted" style="text-align:center">Оплата картой · СБП</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar"><span>🍽️</span><span>📊</span><span>💬</span><span class="on">👤</span></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="lbl">Подписка / оплата</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- ============ BUTTONS ============ -->
|
||||||
|
<section id="buttons"><div class="wrap">
|
||||||
|
<div class="kicker">03 · Кнопки сайта</div>
|
||||||
|
<h2>UI-кнопки для сайта</h2>
|
||||||
|
<p class="sub">Готовая библиотека кнопок в палитре бренда: иерархия, размеры, состояния. Скруглённые формы, мягкие hover-переходы.</p>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="t">Иерархия</div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<button class="btn btn-primary">Записаться на консультацию</button>
|
||||||
|
<button class="btn btn-accent">Оформить подписку</button>
|
||||||
|
<button class="btn btn-sage">Скачать меню</button>
|
||||||
|
</div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<button class="btn btn-secondary">Узнать подробнее</button>
|
||||||
|
<button class="btn btn-ghost">Бесплатный разбор</button>
|
||||||
|
</div>
|
||||||
|
<div class="code">.btn-primary (травяной) · .btn-accent (золото, главный CTA) · .btn-sage · .btn-secondary (контур) · .btn-ghost (крем)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="t">Размеры</div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<button class="btn btn-primary btn-sm">Маленькая</button>
|
||||||
|
<button class="btn btn-primary">Обычная</button>
|
||||||
|
<button class="btn btn-primary btn-lg">Крупная (Hero)</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="t">Скруглённые (pill) · с иконкой · во всю ширину</div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<button class="btn btn-accent btn-pill">Начать путь к здоровью</button>
|
||||||
|
<button class="btn btn-primary btn-pill">🌿 Получить меню</button>
|
||||||
|
<button class="btn btn-secondary btn-pill">Задать вопрос →</button>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-accent btn-block btn-lg btn-pill">Оформить сопровождение — 24 900 ₽</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="t">Состояния</div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<button class="btn btn-primary">Активна</button>
|
||||||
|
<button class="btn btn-primary" style="background:#26402f">Наведение (hover)</button>
|
||||||
|
<button class="btn btn-primary" disabled>Недоступна</button>
|
||||||
|
<button class="btn btn-sage">✓ Готово</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel dark">
|
||||||
|
<div class="t" style="color:var(--gold)">На тёмном фоне</div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<button class="btn btn-accent">Записаться</button>
|
||||||
|
<button class="btn" style="background:var(--cream);color:var(--herbal)">Подробнее</button>
|
||||||
|
<button class="btn" style="background:transparent;color:var(--cream);border:1.5px solid var(--cream)">Контур</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<div style="padding:46px 0;text-align:center;color:#6c7a71;font-size:13px;background:var(--cream)">
|
||||||
|
VIZELBERG · Asset Kit · 2026 — Превью на системных шрифтах. Концепция №6.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
431
brandbook.html
Normal file
431
brandbook.html
Normal file
@ -0,0 +1,431 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>VIZELBERG — Брендбук</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||||||
|
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||||||
|
--line:rgba(47,74,60,.12);
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
|
||||||
|
.wrap{max-width:1000px;margin:0 auto;padding:0 28px}
|
||||||
|
/* nav */
|
||||||
|
nav{position:sticky;top:0;background:rgba(245,239,230,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
|
||||||
|
nav .wrap{display:flex;gap:18px;flex-wrap:wrap;padding:12px 28px;font-size:13px}
|
||||||
|
nav a{color:var(--herbal);text-decoration:none;font-weight:600;opacity:.7}
|
||||||
|
nav a:hover{opacity:1}
|
||||||
|
/* cover */
|
||||||
|
.cover{background:var(--herbal);color:var(--cream);padding:90px 0 80px;text-align:center}
|
||||||
|
.cover .lead{font-size:13px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);margin-bottom:30px}
|
||||||
|
.cover h1{font-family:Georgia,serif;font-size:18px}
|
||||||
|
.cover .tag{margin-top:18px;color:var(--sage);letter-spacing:3px;font-size:14px}
|
||||||
|
/* sections */
|
||||||
|
section{padding:64px 0;border-bottom:1px solid var(--line)}
|
||||||
|
.kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:700}
|
||||||
|
h2{font-family:Georgia,serif;font-size:30px;color:var(--herbal);margin:8px 0 6px}
|
||||||
|
.sub{color:#5d6b62;max-width:640px;margin-bottom:30px}
|
||||||
|
h3{font-size:15px;color:var(--herbal);margin:26px 0 10px;letter-spacing:.4px}
|
||||||
|
p.note{color:#6c7a71;font-size:13.5px}
|
||||||
|
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
|
||||||
|
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||||||
|
.box{border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;align-items:center;justify-content:center;min-height:150px}
|
||||||
|
.box.cream{background:var(--cream)}
|
||||||
|
.box.dark{background:var(--herbal)}
|
||||||
|
.box.sage{background:var(--sage)}
|
||||||
|
.cap{font-size:12px;color:#6c7a71;margin-top:8px;text-align:center}
|
||||||
|
/* colors */
|
||||||
|
.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
|
||||||
|
.color{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
|
||||||
|
.color .chip{height:90px}
|
||||||
|
.color .meta{padding:12px;font-size:11.5px;line-height:1.5}
|
||||||
|
.color .meta b{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
|
||||||
|
.color .meta span{color:#6c7a71}
|
||||||
|
/* type */
|
||||||
|
.type-row{border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin-bottom:14px}
|
||||||
|
.type-row .lbl{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
|
||||||
|
.serif{font-family:Georgia,serif}
|
||||||
|
.scale span{display:block;color:var(--herbal)}
|
||||||
|
/* clear space */
|
||||||
|
.cs{position:relative;background:var(--cream);border-radius:16px;padding:40px}
|
||||||
|
.csbox{border:1px dashed var(--sage);padding:34px;display:inline-block;border-radius:10px;background:#fff}
|
||||||
|
/* misuse */
|
||||||
|
.dont{position:relative}
|
||||||
|
.dont .x{position:absolute;top:10px;right:12px;width:24px;height:24px;border-radius:50%;background:#c0584f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
|
||||||
|
/* voice */
|
||||||
|
.voice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
|
||||||
|
.voice .card{border:1px solid var(--line);border-radius:14px;padding:20px}
|
||||||
|
.voice .yes{border-left:4px solid var(--sage)}
|
||||||
|
.voice .no{border-left:4px solid #c0584f}
|
||||||
|
.voice h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
|
||||||
|
.voice .yes h4{color:var(--sage)} .voice .no h4{color:#c0584f}
|
||||||
|
.voice ul{list-style:none;font-size:14px}
|
||||||
|
.voice li{padding:5px 0;border-bottom:1px dashed var(--line)}
|
||||||
|
.pill{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:30px;padding:7px 16px;margin:4px 6px 0 0;font-size:13px;color:var(--herbal)}
|
||||||
|
/* mockups */
|
||||||
|
.card-mock{aspect-ratio:1.7/1;border-radius:14px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
|
||||||
|
.footer{padding:50px 0;text-align:center;color:#6c7a71;font-size:13px;background:var(--cream)}
|
||||||
|
@media(max-width:760px){.grid2,.voice{grid-template-columns:1fr}.grid3,.colors{grid-template-columns:1fr 1fr}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav><div class="wrap">
|
||||||
|
<a href="#logo">Логотип</a>
|
||||||
|
<a href="#build">Построение</a>
|
||||||
|
<a href="#space">Охранное поле</a>
|
||||||
|
<a href="#misuse">Запреты</a>
|
||||||
|
<a href="#color">Цвета</a>
|
||||||
|
<a href="#type">Типографика</a>
|
||||||
|
<a href="#icon">Иконка</a>
|
||||||
|
<a href="#voice">Tone of voice</a>
|
||||||
|
<a href="#apply">Носители</a>
|
||||||
|
</div></nav>
|
||||||
|
|
||||||
|
<header class="cover">
|
||||||
|
<div class="lead">Brand Book · v1.0</div>
|
||||||
|
<!-- primary logo on dark -->
|
||||||
|
<svg width="360" height="110" viewBox="0 0 360 110">
|
||||||
|
<circle cx="48" cy="52" r="22" fill="#C9A24B"/>
|
||||||
|
<path d="M37 47 C37 39 44 33 54 33 C51 43 46 49 37 52 Z" fill="#2F4A3C"/>
|
||||||
|
<text x="84" y="56" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="40" fill="#F5EFE6">vizelberg</text>
|
||||||
|
<text x="86" y="82" font-family="'Segoe UI',sans-serif" font-size="12" letter-spacing="1.5" fill="#E8A87C">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
<div class="tag">персональный бренд нутрициолога</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- LOGO -->
|
||||||
|
<section id="logo"><div class="wrap">
|
||||||
|
<div class="kicker">01 · Логотип</div>
|
||||||
|
<h2>Основной знак</h2>
|
||||||
|
<p class="sub">Логотип — это связка из трёх элементов: иконка-листок в круге, строчный шрифтовой знак «vizelberg» и слоган-дескриптор. Строчное начертание задаёт мягкий, дружелюбный и доступный характер бренда.</p>
|
||||||
|
<div class="grid2">
|
||||||
|
<div>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="320" height="100" viewBox="0 0 320 100">
|
||||||
|
<circle cx="42" cy="48" r="20" fill="#7C9070"/>
|
||||||
|
<path d="M32 43 C32 36 38 31 47 31 C44 40 40 45 32 48 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="74" y="52" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="36" fill="#2F4A3C">vizelberg</text>
|
||||||
|
<text x="76" y="75" font-family="'Segoe UI',sans-serif" font-size="11" letter-spacing="1.5" fill="#7C9070">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Основная версия — на светлом фоне</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box dark">
|
||||||
|
<svg width="320" height="100" viewBox="0 0 320 100">
|
||||||
|
<circle cx="42" cy="48" r="20" fill="#C9A24B"/>
|
||||||
|
<path d="M32 43 C32 36 38 31 47 31 C44 40 40 45 32 48 Z" fill="#2F4A3C"/>
|
||||||
|
<text x="74" y="52" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="36" fill="#F5EFE6">vizelberg</text>
|
||||||
|
<text x="76" y="75" font-family="'Segoe UI',sans-serif" font-size="11" letter-spacing="1.5" fill="#E8A87C">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Инверсная версия — на тёмном фоне</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Версии знака</h3>
|
||||||
|
<div class="grid3">
|
||||||
|
<div>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="200" height="64" viewBox="0 0 200 64">
|
||||||
|
<circle cx="28" cy="32" r="16" fill="#7C9070"/>
|
||||||
|
<path d="M20 28 C20 22 25 18 32 18 C30 25 26 30 20 32 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="52" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#2F4A3C">vizelberg</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Без слогана (компактный)</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="140" height="64" viewBox="0 0 140 64">
|
||||||
|
<text x="70" y="30" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C">vizelberg</text>
|
||||||
|
<text x="70" y="48" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="7" letter-spacing="0.3" fill="#7C9070">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Текстовая (без иконки)</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="80" height="64" viewBox="0 0 80 64">
|
||||||
|
<circle cx="40" cy="32" r="20" fill="#7C9070"/>
|
||||||
|
<path d="M30 27 C30 20 36 15 45 15 C42 24 38 29 30 32 Z" fill="#F5EFE6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Только иконка (фавикон/аватар)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="note" style="margin-top:18px">Чёрно-белая версия: знак строится в один цвет (100% травяной или 100% белый) для факсов, штампов, гравировки и одноцветной печати.</p>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- BUILD -->
|
||||||
|
<section id="build"><div class="wrap">
|
||||||
|
<div class="kicker">02 · Построение</div>
|
||||||
|
<h2>Сетка и пропорции</h2>
|
||||||
|
<p class="sub">Размер строится от высоты строчной буквы «x» (x-height). Диаметр иконки = 1,6×, отступ между иконкой и текстом = 0,8× от высоты заглавной.</p>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="420" height="150" viewBox="0 0 420 150">
|
||||||
|
<defs><pattern id="g" width="14" height="14" patternUnits="userSpaceOnUse"><path d="M14 0 L0 0 0 14" fill="none" stroke="rgba(124,144,112,.25)" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect x="20" y="20" width="380" height="110" fill="url(#g)"/>
|
||||||
|
<circle cx="62" cy="68" r="26" fill="#7C9070"/>
|
||||||
|
<path d="M49 61 C49 52 57 45 69 45 C66 57 60 64 49 68 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="104" y="78" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="44" fill="#2F4A3C">vizelberg</text>
|
||||||
|
<line x1="104" y1="92" x2="320" y2="92" stroke="#C9A24B" stroke-width="1"/>
|
||||||
|
<text x="106" y="112" font-family="'Segoe UI',sans-serif" font-size="13" letter-spacing="2" fill="#7C9070">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- CLEAR SPACE -->
|
||||||
|
<section id="space"><div class="wrap">
|
||||||
|
<div class="kicker">03 · Охранное поле и минимальный размер</div>
|
||||||
|
<h2>Свободное пространство</h2>
|
||||||
|
<p class="sub">Вокруг логотипа всегда сохраняется защитное поле, равное диаметру иконки-листка. В это поле не заходят другие элементы, текст и края макета.</p>
|
||||||
|
<div class="grid2">
|
||||||
|
<div>
|
||||||
|
<div class="cs">
|
||||||
|
<span class="csbox">
|
||||||
|
<svg width="240" height="50" viewBox="0 0 240 50">
|
||||||
|
<circle cx="22" cy="26" r="14" fill="#7C9070"/>
|
||||||
|
<path d="M14 22 C14 16 19 12 26 12 C24 19 20 24 14 26 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C">vizelberg</text>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Минимальное защитное поле = Ø иконки</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box cream" style="gap:30px">
|
||||||
|
<svg width="120" height="34" viewBox="0 0 240 50">
|
||||||
|
<circle cx="22" cy="26" r="14" fill="#7C9070"/>
|
||||||
|
<path d="M14 22 C14 16 19 12 26 12 C24 19 20 24 14 26 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C">vizelberg</text>
|
||||||
|
</svg>
|
||||||
|
<span class="cap" style="margin:0">→ мин. ширина<br>в печати: 28 мм<br>в цифре: 120 px</span>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Меньше — переходим на версию «только иконка»</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- MISUSE -->
|
||||||
|
<section id="misuse"><div class="wrap">
|
||||||
|
<div class="kicker">04 · Запреты</div>
|
||||||
|
<h2>Недопустимое использование</h2>
|
||||||
|
<p class="sub">Целостность знака неприкосновенна. Запрещено искажать пропорции, перекрашивать произвольно, наклонять и располагать на «шумном» фоне.</p>
|
||||||
|
<div class="grid3">
|
||||||
|
<div>
|
||||||
|
<div class="box cream dont"><span class="x">✕</span>
|
||||||
|
<svg width="160" height="50" viewBox="0 0 240 50"><circle cx="22" cy="26" r="14" fill="#7C9070"/><text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C" transform="skewX(-18)">vizelberg</text></svg>
|
||||||
|
</div><div class="cap">Не наклонять</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box cream dont"><span class="x">✕</span>
|
||||||
|
<svg width="160" height="50" viewBox="0 0 240 50" preserveAspectRatio="none"><circle cx="22" cy="26" r="14" fill="#c0584f"/><text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#3a6cd0">vizelberg</text></svg>
|
||||||
|
</div><div class="cap">Не перекрашивать вне палитры</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box dont" style="background:linear-gradient(45deg,#888,#ccc,#555)"><span class="x">✕</span>
|
||||||
|
<svg width="160" height="50" viewBox="0 0 240 50"><circle cx="22" cy="26" r="14" fill="#7C9070"/><text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#fff">vizelberg</text></svg>
|
||||||
|
</div><div class="cap">Не ставить на пёстрый фон</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- COLORS -->
|
||||||
|
<section id="color"><div class="wrap">
|
||||||
|
<div class="kicker">05 · Цвета</div>
|
||||||
|
<h2>Фирменная палитра</h2>
|
||||||
|
<p class="sub">Тёплая природная гамма: спокойный шалфейный и глубокий травяной как основа, кремовый фон, терракота и золото — акценты. Никакого «медицинского» голубого и кислотного зелёного.</p>
|
||||||
|
<div class="colors">
|
||||||
|
<div class="color"><div class="chip" style="background:#7C9070"></div><div class="meta"><b>Шалфей</b><span>HEX #7C9070<br>RGB 124·144·112<br>CMYK 35·15·40·15</span></div></div>
|
||||||
|
<div class="color"><div class="chip" style="background:#2F4A3C"></div><div class="meta"><b>Травяной</b><span>HEX #2F4A3C<br>RGB 47·74·60<br>CMYK 70·40·65·45</span></div></div>
|
||||||
|
<div class="color"><div class="chip" style="background:#F5EFE6;border-bottom:1px solid var(--line)"></div><div class="meta"><b>Крем</b><span>HEX #F5EFE6<br>RGB 245·239·230<br>CMYK 3·4·8·0</span></div></div>
|
||||||
|
<div class="color"><div class="chip" style="background:#E8A87C"></div><div class="meta"><b>Терракота</b><span>HEX #E8A87C<br>RGB 232·168·124<br>CMYK 5·40·52·0</span></div></div>
|
||||||
|
<div class="color"><div class="chip" style="background:#C9A24B"></div><div class="meta"><b>Золото</b><span>HEX #C9A24B<br>RGB 201·162·75<br>CMYK 22·35·80·5</span></div></div>
|
||||||
|
</div>
|
||||||
|
<h3>Пропорции использования</h3>
|
||||||
|
<div style="display:flex;height:42px;border-radius:10px;overflow:hidden;border:1px solid var(--line)">
|
||||||
|
<div style="flex:55;background:#F5EFE6"></div>
|
||||||
|
<div style="flex:22;background:#7C9070"></div>
|
||||||
|
<div style="flex:13;background:#2F4A3C"></div>
|
||||||
|
<div style="flex:6;background:#E8A87C"></div>
|
||||||
|
<div style="flex:4;background:#C9A24B"></div>
|
||||||
|
</div>
|
||||||
|
<p class="note" style="margin-top:8px">55% крем (фон) · 22% шалфей · 13% травяной · 6% терракота · 4% золото (акценты, премиум-детали).</p>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- TYPOGRAPHY -->
|
||||||
|
<section id="type"><div class="wrap">
|
||||||
|
<div class="kicker">06 · Типографика</div>
|
||||||
|
<h2>Шрифтовые пары</h2>
|
||||||
|
<p class="sub">Заголовки — гуманистический serif (тепло, экспертность). Текст и интерфейс — гротеск (чистота, читаемость). В превью системные аналоги; лицензионная пара указана.</p>
|
||||||
|
<div class="type-row">
|
||||||
|
<div class="lbl">Заголовки · Serif → Cormorant / PT Serif</div>
|
||||||
|
<div class="serif scale">
|
||||||
|
<span style="font-size:40px;color:var(--herbal)">Питание — это система</span>
|
||||||
|
<span style="font-size:24px;color:var(--sage)">Спокойно. Доказательно. По шагам.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="type-row">
|
||||||
|
<div class="lbl">Текст и интерфейс · Sans → Inter / Manrope</div>
|
||||||
|
<div class="scale" style="font-family:'Segoe UI',sans-serif">
|
||||||
|
<span style="font-size:18px;font-weight:600">Заголовок блока · 18 / 600</span>
|
||||||
|
<span style="font-size:15px">Основной текст · 15 / 400. Аа Бб Вв Гг Дд Ее · 1234567890</span>
|
||||||
|
<span style="font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)">Надзаголовок · 12 / caps / трекинг</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- APP ICON -->
|
||||||
|
<section id="icon"><div class="wrap">
|
||||||
|
<div class="kicker">07 · Иконка приложения</div>
|
||||||
|
<h2>Telegram & MAX mini-app</h2>
|
||||||
|
<p class="sub">Для аватара бота и иконки мини-приложения — версия «только листок» на сплошной заливке. Хорошо читается в маленьком размере.</p>
|
||||||
|
<div class="grid3">
|
||||||
|
<div>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<rect x="6" y="6" width="108" height="108" rx="26" fill="#2F4A3C"/>
|
||||||
|
<circle cx="60" cy="58" r="30" fill="#7C9070"/>
|
||||||
|
<path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#F5EFE6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Тёмная (основная)</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<rect x="6" y="6" width="108" height="108" rx="26" fill="#7C9070"/>
|
||||||
|
<path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="60" y="98" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-weight="700" font-size="13" letter-spacing="1" fill="#F5EFE6">vizelberg</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Шалфейная</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box cream">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<rect x="6" y="6" width="108" height="108" rx="26" fill="#F5EFE6" stroke="#C9A24B" stroke-width="1.5"/>
|
||||||
|
<circle cx="60" cy="58" r="30" fill="#C9A24B"/>
|
||||||
|
<path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#2F4A3C"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Светлая премиум</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- GRAPHIC ELEMENT -->
|
||||||
|
<section><div class="wrap">
|
||||||
|
<div class="kicker">08 · Графика</div>
|
||||||
|
<h2>Фирменный элемент — листок</h2>
|
||||||
|
<p class="sub">Листок из логотипа — основной паттерн. Используется как маркер списков, разделитель, водяной знак и текстура фона (низкая прозрачность).</p>
|
||||||
|
<div class="grid2">
|
||||||
|
<div>
|
||||||
|
<div class="box sage" style="position:relative;overflow:hidden">
|
||||||
|
<svg width="100%" height="150" viewBox="0 0 400 150" style="position:absolute;inset:0;opacity:.25">
|
||||||
|
<g fill="#F5EFE6">
|
||||||
|
<path d="M40 40 C40 28 48 20 62 20 C58 34 52 42 40 40 Z"/>
|
||||||
|
<path d="M160 90 C160 78 168 70 182 70 C178 84 172 92 160 90 Z"/>
|
||||||
|
<path d="M300 30 C300 18 308 10 322 10 C318 24 312 32 300 30 Z"/>
|
||||||
|
<path d="M250 110 C250 98 258 90 272 90 C268 104 262 112 250 110 Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<span style="position:relative;color:#fff;font-family:Georgia,serif;font-size:22px">паттерн фона</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box cream" style="flex-direction:column;align-items:flex-start;gap:10px">
|
||||||
|
<div style="display:flex;gap:10px;align-items:center"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#7C9070"/></svg><span>маркер списка / буллет</span></div>
|
||||||
|
<div style="display:flex;gap:10px;align-items:center"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#C9A24B"/></svg><span>акцентный маркер</span></div>
|
||||||
|
<div style="width:100%;display:flex;align-items:center;gap:8px;color:#6c7a71;font-size:13px"><span style="flex:1;height:1px;background:var(--sage)"></span><svg width="16" height="16" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#7C9070"/></svg><span style="flex:1;height:1px;background:var(--sage)"></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- VOICE -->
|
||||||
|
<section id="voice"><div class="wrap">
|
||||||
|
<div class="kicker">09 · Tone of voice</div>
|
||||||
|
<h2>Голос бренда</h2>
|
||||||
|
<p class="sub">VIZELBERG говорит как заботливый эксперт: спокойно, понятно, без морализаторства и запугивания. Объясняем «почему», а не приказываем «нельзя».</p>
|
||||||
|
<div style="margin-bottom:22px">
|
||||||
|
<span class="pill">тёплый</span><span class="pill">доказательный</span><span class="pill">поддерживающий</span><span class="pill">без чувства вины</span><span class="pill">конкретный</span><span class="pill">на «ты», по-доброму</span>
|
||||||
|
</div>
|
||||||
|
<div class="voice">
|
||||||
|
<div class="card yes"><h4>✓ Говорим так</h4><ul>
|
||||||
|
<li>«Давай разберём, что в твоём меню работает, а что мешает»</li>
|
||||||
|
<li>«Это не диета, а привычки, которые останутся с тобой»</li>
|
||||||
|
<li>«Сорвалась? Это нормально. Возвращаемся к плану без драмы»</li>
|
||||||
|
<li>«Вот почему организму это важно — простыми словами»</li>
|
||||||
|
</ul></div>
|
||||||
|
<div class="card no"><h4>✕ Не говорим так</h4><ul>
|
||||||
|
<li>«Запрещено есть после 18:00»</li>
|
||||||
|
<li>«Вредная еда убивает ваш организм»</li>
|
||||||
|
<li>«Срочно худейте к лету!»</li>
|
||||||
|
<li>«Минус 10 кг за неделю гарантированно»</li>
|
||||||
|
</ul></div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<!-- APPLICATIONS -->
|
||||||
|
<section id="apply"><div class="wrap">
|
||||||
|
<div class="kicker">10 · Носители</div>
|
||||||
|
<h2>Примеры применения</h2>
|
||||||
|
<p class="sub">Как бренд живёт на визитке, в шапке соцсетей и на экране приложения.</p>
|
||||||
|
<div class="grid3">
|
||||||
|
<!-- business card -->
|
||||||
|
<div>
|
||||||
|
<div class="card-mock" style="background:var(--herbal)">
|
||||||
|
<svg width="150" height="44" viewBox="0 0 240 60">
|
||||||
|
<circle cx="22" cy="30" r="15" fill="#C9A24B"/><path d="M14 26 C14 19 19 15 26 15 C24 22 20 27 14 30 Z" fill="#2F4A3C"/>
|
||||||
|
<text x="46" y="30" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#F5EFE6">vizelberg</text>
|
||||||
|
<text x="48" y="48" font-family="'Segoe UI',sans-serif" font-size="8" letter-spacing="1" fill="#E8A87C">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||||||
|
</svg>
|
||||||
|
<div style="color:var(--cream);font-size:11px;line-height:1.7">
|
||||||
|
<b>Имя Фамилия</b> · нутрициолог<br>
|
||||||
|
@vizelberg · +7 ··· ·· ··
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Визитка</div>
|
||||||
|
</div>
|
||||||
|
<!-- social header -->
|
||||||
|
<div>
|
||||||
|
<div class="card-mock" style="background:var(--sage);align-items:center;justify-content:center;text-align:center">
|
||||||
|
<div>
|
||||||
|
<svg width="60" height="60" viewBox="0 0 120 120" style="margin-bottom:6px"><circle cx="60" cy="60" r="40" fill="#F5EFE6"/><path d="M44 52 C44 40 52 32 66 32 C62 46 56 54 44 60 Z" fill="#7C9070"/></svg>
|
||||||
|
<div style="color:#fff;font-family:Georgia,serif;font-size:18px">vizelberg</div>
|
||||||
|
<div style="color:var(--cream);font-size:10px;letter-spacing:1px">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Шапка соцсети / аватар</div>
|
||||||
|
</div>
|
||||||
|
<!-- app screen -->
|
||||||
|
<div>
|
||||||
|
<div class="card-mock" style="background:var(--cream);padding:14px">
|
||||||
|
<div style="display:flex;align-items:center;gap:8px">
|
||||||
|
<svg width="26" height="26" viewBox="0 0 120 120"><rect width="120" height="120" rx="28" fill="#2F4A3C"/><circle cx="60" cy="58" r="30" fill="#7C9070"/><path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#F5EFE6"/></svg>
|
||||||
|
<span style="font-weight:600;color:var(--herbal);font-size:13px">Моё меню</span>
|
||||||
|
</div>
|
||||||
|
<div style="background:#fff;border-radius:10px;padding:10px;font-size:11px;color:#6c7a71;border:1px solid var(--line)">
|
||||||
|
<b style="color:var(--herbal)">Завтрак</b><br>Овсянка с ягодами · 320 ккал
|
||||||
|
<div style="height:6px;background:#eee;border-radius:4px;margin-top:8px"><div style="width:62%;height:6px;background:#C9A24B;border-radius:4px"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cap">Экран мини-приложения</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
VIZELBERG · Brand Book v1.0 · 2026 — Превью на системных шрифтах. На продакшн заменяются лицензионные пары Cormorant/PT Serif + Inter/Manrope.<br>
|
||||||
|
Логотип построен на концепции №6.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
87
index.html
Normal file
87
index.html
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>VIZELBERG — Прототипы</title>
|
||||||
|
<style>
|
||||||
|
:root{--sage:#7C9070;--herbal:#2F4A3C;--cream:#F5EFE6;--terra:#E8A87C;--gold:#C9A24B;--line:rgba(47,74,60,.12)}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;background:var(--cream);color:#23302a;min-height:100vh}
|
||||||
|
.hero{background:var(--herbal);color:var(--cream);padding:60px 24px 70px;text-align:center}
|
||||||
|
.hero .lg{width:64px;height:64px;border-radius:20px;background:var(--gold);color:var(--herbal);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
|
||||||
|
.hero h1{font-family:Georgia,serif;font-size:30px}
|
||||||
|
.hero .sl{color:var(--sage);letter-spacing:4px;font-size:13px;text-transform:uppercase;margin-top:8px}
|
||||||
|
.hero p{color:rgba(245,239,230,.8);margin-top:14px;font-size:14px}
|
||||||
|
.wrap{max-width:1000px;margin:-40px auto 0;padding:0 24px 60px}
|
||||||
|
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
|
||||||
|
a.card{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;text-decoration:none;color:inherit;box-shadow:0 8px 26px rgba(47,74,60,.08);transition:.15s}
|
||||||
|
a.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(47,74,60,.14)}
|
||||||
|
.card .ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
|
||||||
|
.card h3{color:var(--herbal);font-size:17px;margin-bottom:6px}
|
||||||
|
.card p{color:#6c7a71;font-size:13px}
|
||||||
|
.card .tag{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase}
|
||||||
|
.ic{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
footer{text-align:center;color:#6c7a71;font-size:12px;padding:24px}
|
||||||
|
@media(max-width:680px){.grid{grid-template-columns:1fr}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<svg width="0" height="0" style="position:absolute">
|
||||||
|
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z"/><path d="M5 19c4-1 7-4 9-8"/></symbol>
|
||||||
|
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></symbol>
|
||||||
|
<symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6c-2-1.5-5-1.5-7-1v13c2-.5 5-.5 7 1 2-1.5 5-1.5 7-1V5c-2-.5-5-.5-7 1z"/><path d="M12 6v13"/></symbol>
|
||||||
|
<symbol id="i-card" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
|
||||||
|
<symbol id="i-phone" viewBox="0 0 24 24"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></symbol>
|
||||||
|
<symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.5 2.7-5 6-5s6 1.5 6 5"/><path d="M16 5.5a3 3 0 0 1 0 5.5M21 20c0-3-1.5-4.5-4-4.8"/></symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="hero">
|
||||||
|
<div class="lg"><svg class="ic" style="width:32px;height:32px"><use href="#i-leaf"/></svg></div>
|
||||||
|
<h1>VIZELBERG</h1>
|
||||||
|
<div class="sl">нутрициология здоровья</div>
|
||||||
|
<p>Прототипы бренда и продукта · кликабельные макеты</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wrap"><div class="grid">
|
||||||
|
<a class="card" href="app_interactive.html">
|
||||||
|
<div class="ico" style="background:var(--sage)"><svg class="ic"><use href="#i-phone"/></svg></div>
|
||||||
|
<h3>Кабинет клиента</h3>
|
||||||
|
<p>Интерактивное мини-приложение (Telegram / MAX): меню, трекинг, чат, подписка. Всё кликается.</p>
|
||||||
|
<span class="tag">интерактив →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="app_admin.html">
|
||||||
|
<div class="ico" style="background:var(--herbal)"><svg class="ic"><use href="#i-users"/></svg></div>
|
||||||
|
<h3>Кабинет администратора</h3>
|
||||||
|
<p>Рабочий стол нутрициолога: клиенты, конструктор меню, чек-ины, биллинг, аналитика.</p>
|
||||||
|
<span class="tag">интерактив →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="brandbook.html">
|
||||||
|
<div class="ico" style="background:var(--gold)"><svg class="ic"><use href="#i-book"/></svg></div>
|
||||||
|
<h3>Брендбук</h3>
|
||||||
|
<p>Логотип, охранное поле, палитра, типографика, иконка приложения, tone of voice.</p>
|
||||||
|
<span class="tag">смотреть →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="logo_concepts.html">
|
||||||
|
<div class="ico" style="background:var(--terra)"><svg class="ic"><use href="#i-grid"/></svg></div>
|
||||||
|
<h3>10 концепций логотипа</h3>
|
||||||
|
<p>Варианты знака на светлом и тёмном фоне. Выбранная концепция — №6.</p>
|
||||||
|
<span class="tag">смотреть →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="assets_kit.html">
|
||||||
|
<div class="ico" style="background:var(--sage)"><svg class="ic"><use href="#i-card"/></svg></div>
|
||||||
|
<h3>Визитки · кнопки</h3>
|
||||||
|
<p>Варианты визиток, экраны приложения и библиотека UI-кнопок для сайта.</p>
|
||||||
|
<span class="tag">смотреть →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="miniapp_mockup.html">
|
||||||
|
<div class="ico" style="background:var(--herbal)"><svg class="ic"><use href="#i-phone"/></svg></div>
|
||||||
|
<h3>Мини-приложение (8 экранов)</h3>
|
||||||
|
<p>Статичный обзор всех экранов клиентского приложения + монохромный icon-set.</p>
|
||||||
|
<span class="tag">смотреть →</span>
|
||||||
|
</a>
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
<footer>VIZELBERG · Prototype Gallery · 2026</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
334
logo_concepts.html
Normal file
334
logo_concepts.html
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>VIZELBERG — 10 концепций логотипа</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||||||
|
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{
|
||||||
|
font-family:'Segoe UI',-apple-system,Roboto,sans-serif;
|
||||||
|
background:var(--cream); color:var(--ink);
|
||||||
|
padding:48px 32px; line-height:1.5;
|
||||||
|
}
|
||||||
|
.head{max-width:1200px;margin:0 auto 40px}
|
||||||
|
.head h1{font-size:30px;font-weight:700;letter-spacing:.5px;color:var(--herbal)}
|
||||||
|
.head p{color:#5d6b62;margin-top:8px;max-width:760px}
|
||||||
|
.palette{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
|
||||||
|
.sw{display:flex;flex-direction:column;align-items:center;font-size:11px;color:#5d6b62}
|
||||||
|
.sw i{width:46px;height:46px;border-radius:10px;display:block;margin-bottom:6px;border:1px solid rgba(0,0,0,.06)}
|
||||||
|
.grid{
|
||||||
|
max-width:1200px;margin:0 auto;
|
||||||
|
display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
background:#fff;border-radius:18px;overflow:hidden;
|
||||||
|
box-shadow:0 6px 24px rgba(47,74,60,.08);border:1px solid rgba(47,74,60,.06);
|
||||||
|
}
|
||||||
|
.card .num{
|
||||||
|
font-size:12px;font-weight:700;color:var(--gold);
|
||||||
|
padding:14px 18px 0;letter-spacing:1px;text-transform:uppercase;
|
||||||
|
}
|
||||||
|
.card .name{padding:2px 18px 0;font-weight:600;color:var(--herbal);font-size:15px}
|
||||||
|
.card .desc{padding:4px 18px 14px;color:#6c7a71;font-size:12.5px;min-height:36px}
|
||||||
|
.stage{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(47,74,60,.07)}
|
||||||
|
.light{background:var(--cream);display:flex;align-items:center;justify-content:center;padding:30px 16px;min-height:150px}
|
||||||
|
.dark{background:var(--herbal);display:flex;align-items:center;justify-content:center;padding:30px 16px;min-height:150px}
|
||||||
|
svg{max-width:100%;height:auto}
|
||||||
|
.footer{max-width:1200px;margin:34px auto 0;color:#6c7a71;font-size:13px}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="head">
|
||||||
|
<h1>VIZELBERG · 10 концепций логотипа</h1>
|
||||||
|
<p>Персональный экспертный бренд нутрициолога. Палитра: природный шалфейный + глубокий травяной, кремовый фон, тёплые терракота и золото как акценты. Каждый знак показан на светлом и тёмном фоне.</p>
|
||||||
|
<div class="palette">
|
||||||
|
<div class="sw"><i style="background:#7C9070"></i>#7C9070 шалфей</div>
|
||||||
|
<div class="sw"><i style="background:#2F4A3C"></i>#2F4A3C травяной</div>
|
||||||
|
<div class="sw"><i style="background:#F5EFE6"></i>#F5EFE6 крем</div>
|
||||||
|
<div class="sw"><i style="background:#E8A87C"></i>#E8A87C терракота</div>
|
||||||
|
<div class="sw"><i style="background:#C9A24B"></i>#C9A24B золото</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
<!-- 1 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">01</div>
|
||||||
|
<div class="name">Лист в букве V</div>
|
||||||
|
<div class="desc">Классический wordmark; буква V прорастает листом — еда + рост.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="280" height="80" viewBox="0 0 280 80">
|
||||||
|
<g>
|
||||||
|
<path d="M14 22 L26 58 L38 22" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M26 40 C26 28 34 18 46 16 C44 28 38 38 26 40 Z" fill="#7C9070"/>
|
||||||
|
<path d="M26 40 C26 30 30 22 38 19" stroke="#2F4A3C" stroke-width="1.6" fill="none"/>
|
||||||
|
</g>
|
||||||
|
<text x="56" y="50" font-family="Georgia,serif" font-size="30" letter-spacing="3" fill="#2F4A3C">IZELBERG</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="280" height="80" viewBox="0 0 280 80">
|
||||||
|
<g>
|
||||||
|
<path d="M14 22 L26 58 L38 22" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M26 40 C26 28 34 18 46 16 C44 28 38 38 26 40 Z" fill="#C9A24B"/>
|
||||||
|
<path d="M26 40 C26 30 30 22 38 19" stroke="#2F4A3C" stroke-width="1.6" fill="none"/>
|
||||||
|
</g>
|
||||||
|
<text x="56" y="50" font-family="Georgia,serif" font-size="30" letter-spacing="3" fill="#F5EFE6">IZELBERG</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">02</div>
|
||||||
|
<div class="name">Эмблема-кружок с ростком</div>
|
||||||
|
<div class="desc">Монограмма V и росток в круге — компактный знак для аватара/иконки.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<circle cx="60" cy="60" r="46" fill="none" stroke="#7C9070" stroke-width="3"/>
|
||||||
|
<path d="M42 44 L60 82 L78 44" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M60 60 C60 48 67 40 78 39 C76 50 70 58 60 60 Z" fill="#7C9070"/>
|
||||||
|
<circle cx="60" cy="60" r="46" fill="none" stroke="#C9A24B" stroke-width="1" stroke-dasharray="2 4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<circle cx="60" cy="60" r="46" fill="none" stroke="#C9A24B" stroke-width="3"/>
|
||||||
|
<path d="M42 44 L60 82 L78 44" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M60 60 C60 48 67 40 78 39 C76 50 70 58 60 60 Z" fill="#7C9070"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">03</div>
|
||||||
|
<div class="name">Тонкий serif (премиум)</div>
|
||||||
|
<div class="desc">Высокий межбуквенный интервал, аптечно-чистый. Доверие и экспертность.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="300" height="80" viewBox="0 0 300 80">
|
||||||
|
<text x="150" y="42" text-anchor="middle" font-family="'Times New Roman',serif" font-size="26" letter-spacing="8" fill="#2F4A3C">VIZELBERG</text>
|
||||||
|
<line x1="60" y1="56" x2="240" y2="56" stroke="#C9A24B" stroke-width="1"/>
|
||||||
|
<text x="150" y="70" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="6" fill="#7C9070">НУТРИЦИОЛОГИЯ</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="300" height="80" viewBox="0 0 300 80">
|
||||||
|
<text x="150" y="42" text-anchor="middle" font-family="'Times New Roman',serif" font-size="26" letter-spacing="8" fill="#F5EFE6">VIZELBERG</text>
|
||||||
|
<line x1="60" y1="56" x2="240" y2="56" stroke="#C9A24B" stroke-width="1"/>
|
||||||
|
<text x="150" y="70" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="6" fill="#C9A24B">НУТРИЦИОЛОГИЯ</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">04</div>
|
||||||
|
<div class="name">V из двух листьев / капли</div>
|
||||||
|
<div class="desc">Буква V собрана из двух листьев — природа, баланс, забота.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<path d="M60 84 C40 64 38 40 44 30 C58 40 62 62 60 84 Z" fill="#7C9070"/>
|
||||||
|
<path d="M60 84 C80 64 82 40 76 30 C62 40 58 62 60 84 Z" fill="#2F4A3C"/>
|
||||||
|
<path d="M52 34 C56 50 59 66 60 80" stroke="#F5EFE6" stroke-width="1.4" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<path d="M60 84 C40 64 38 40 44 30 C58 40 62 62 60 84 Z" fill="#7C9070"/>
|
||||||
|
<path d="M60 84 C80 64 82 40 76 30 C62 40 58 62 60 84 Z" fill="#C9A24B"/>
|
||||||
|
<path d="M52 34 C56 50 59 66 60 80" stroke="#2F4A3C" stroke-width="1.4" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">05</div>
|
||||||
|
<div class="name">Монограмма VB</div>
|
||||||
|
<div class="desc">Сплетённые V и B — лаконичный знак для печати, штампа, фавикона.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<rect x="20" y="20" width="80" height="80" rx="18" fill="none" stroke="#7C9070" stroke-width="3"/>
|
||||||
|
<path d="M38 40 L52 76 L60 56" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M64 40 L64 80 L78 80 C88 80 88 66 78 64 C86 62 86 50 76 50 L64 50" fill="none" stroke="#C9A24B" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<rect x="20" y="20" width="80" height="80" rx="18" fill="none" stroke="#C9A24B" stroke-width="3"/>
|
||||||
|
<path d="M38 40 L52 76 L60 56" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M64 40 L64 80 L78 80 C88 80 88 66 78 64 C86 62 86 50 76 50 L64 50" fill="none" stroke="#E8A87C" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 6 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">06</div>
|
||||||
|
<div class="name">Модерн lowercase + слоган</div>
|
||||||
|
<div class="desc">Мягкий строчный sans, дружелюбно и современно. Под мини-приложение.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="300" height="80" viewBox="0 0 300 80">
|
||||||
|
<circle cx="36" cy="40" r="16" fill="#7C9070"/>
|
||||||
|
<path d="M28 36 C28 30 33 26 40 26 C38 33 34 38 28 40 Z" fill="#F5EFE6"/>
|
||||||
|
<text x="62" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#2F4A3C">vizelberg</text>
|
||||||
|
<text x="63" y="58" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="0.8" fill="#7C9070">нутрициология здоровья</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="300" height="80" viewBox="0 0 300 80">
|
||||||
|
<circle cx="36" cy="40" r="16" fill="#C9A24B"/>
|
||||||
|
<path d="M28 36 C28 30 33 26 40 26 C38 33 34 38 28 40 Z" fill="#2F4A3C"/>
|
||||||
|
<text x="62" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#F5EFE6">vizelberg</text>
|
||||||
|
<text x="63" y="58" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="0.8" fill="#E8A87C">нутрициология здоровья</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 7 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">07</div>
|
||||||
|
<div class="name">Бейдж с колосом</div>
|
||||||
|
<div class="desc">Круглая печать-эмблема с колосом и инициалом — нутрициология/цельность.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<circle cx="60" cy="60" r="48" fill="none" stroke="#2F4A3C" stroke-width="2"/>
|
||||||
|
<circle cx="60" cy="60" r="42" fill="none" stroke="#C9A24B" stroke-width="1"/>
|
||||||
|
<line x1="60" y1="40" x2="60" y2="80" stroke="#7C9070" stroke-width="2"/>
|
||||||
|
<g stroke="#7C9070" stroke-width="2" fill="none">
|
||||||
|
<path d="M60 48 q8 -2 12 -8"/><path d="M60 48 q-8 -2 -12 -8"/>
|
||||||
|
<path d="M60 58 q8 -2 12 -8"/><path d="M60 58 q-8 -2 -12 -8"/>
|
||||||
|
<path d="M60 68 q8 -2 12 -8"/><path d="M60 68 q-8 -2 -12 -8"/>
|
||||||
|
</g>
|
||||||
|
<text x="60" y="100" text-anchor="middle" font-family="Georgia,serif" font-size="9" letter-spacing="4" fill="#2F4A3C">VIZELBERG</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<circle cx="60" cy="60" r="48" fill="none" stroke="#F5EFE6" stroke-width="2"/>
|
||||||
|
<circle cx="60" cy="60" r="42" fill="none" stroke="#C9A24B" stroke-width="1"/>
|
||||||
|
<line x1="60" y1="40" x2="60" y2="80" stroke="#C9A24B" stroke-width="2"/>
|
||||||
|
<g stroke="#C9A24B" stroke-width="2" fill="none">
|
||||||
|
<path d="M60 48 q8 -2 12 -8"/><path d="M60 48 q-8 -2 -12 -8"/>
|
||||||
|
<path d="M60 58 q8 -2 12 -8"/><path d="M60 58 q-8 -2 -12 -8"/>
|
||||||
|
<path d="M60 68 q8 -2 12 -8"/><path d="M60 68 q-8 -2 -12 -8"/>
|
||||||
|
</g>
|
||||||
|
<text x="60" y="100" text-anchor="middle" font-family="Georgia,serif" font-size="9" letter-spacing="4" fill="#F5EFE6">VIZELBERG</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 8 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">08</div>
|
||||||
|
<div class="name">Лист + ложка</div>
|
||||||
|
<div class="desc">Прямой символ нутрициологии: природа встречает приём пищи.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="280" height="90" viewBox="0 0 280 90">
|
||||||
|
<g transform="translate(20,18)">
|
||||||
|
<ellipse cx="26" cy="22" rx="13" ry="20" fill="#7C9070"/>
|
||||||
|
<path d="M26 4 L26 56" stroke="#F5EFE6" stroke-width="1.6"/>
|
||||||
|
<rect x="24" y="42" width="4" height="22" rx="2" fill="#C9A24B"/>
|
||||||
|
</g>
|
||||||
|
<text x="70" y="58" font-family="Georgia,serif" font-size="28" letter-spacing="2" fill="#2F4A3C">VIZELBERG</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="280" height="90" viewBox="0 0 280 90">
|
||||||
|
<g transform="translate(20,18)">
|
||||||
|
<ellipse cx="26" cy="22" rx="13" ry="20" fill="#C9A24B"/>
|
||||||
|
<path d="M26 4 L26 56" stroke="#2F4A3C" stroke-width="1.6"/>
|
||||||
|
<rect x="24" y="42" width="4" height="22" rx="2" fill="#E8A87C"/>
|
||||||
|
</g>
|
||||||
|
<text x="70" y="58" font-family="Georgia,serif" font-size="28" letter-spacing="2" fill="#F5EFE6">VIZELBERG</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 9 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">09</div>
|
||||||
|
<div class="name">Молекула + лист</div>
|
||||||
|
<div class="desc">Наука + природа: нутрициология как доказательный подход. Современно.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<g stroke="#7C9070" stroke-width="2.4" fill="none">
|
||||||
|
<line x1="60" y1="34" x2="38" y2="58"/><line x1="60" y1="34" x2="82" y2="58"/>
|
||||||
|
<line x1="38" y1="58" x2="60" y2="82"/><line x1="82" y1="58" x2="60" y2="82"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="60" cy="34" r="7" fill="#2F4A3C"/>
|
||||||
|
<circle cx="38" cy="58" r="7" fill="#C9A24B"/>
|
||||||
|
<circle cx="82" cy="58" r="7" fill="#E8A87C"/>
|
||||||
|
<path d="M60 82 C56 70 60 60 70 56 C70 68 66 78 60 82 Z" fill="#7C9070"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<g stroke="#F5EFE6" stroke-width="2.4" fill="none">
|
||||||
|
<line x1="60" y1="34" x2="38" y2="58"/><line x1="60" y1="34" x2="82" y2="58"/>
|
||||||
|
<line x1="38" y1="58" x2="60" y2="82"/><line x1="82" y1="58" x2="60" y2="82"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="60" cy="34" r="7" fill="#F5EFE6"/>
|
||||||
|
<circle cx="38" cy="58" r="7" fill="#C9A24B"/>
|
||||||
|
<circle cx="82" cy="58" r="7" fill="#E8A87C"/>
|
||||||
|
<path d="M60 82 C56 70 60 60 70 56 C70 68 66 78 60 82 Z" fill="#7C9070"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 10 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="num">10</div>
|
||||||
|
<div class="name">Рукописная подпись</div>
|
||||||
|
<div class="desc">Авторский почерк — максимум персонального бренда и женственности.</div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="light">
|
||||||
|
<svg width="300" height="80" viewBox="0 0 300 80">
|
||||||
|
<text x="40" y="50" font-family="'Brush Script MT','Segoe Script',cursive" font-size="40" fill="#2F4A3C">Vizelberg</text>
|
||||||
|
<path d="M40 58 C110 66 200 66 262 56" stroke="#C9A24B" stroke-width="2" fill="none"/>
|
||||||
|
<path d="M255 50 C262 52 265 54 262 56" stroke="#7C9070" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="dark">
|
||||||
|
<svg width="300" height="80" viewBox="0 0 300 80">
|
||||||
|
<text x="40" y="50" font-family="'Brush Script MT','Segoe Script',cursive" font-size="40" fill="#F5EFE6">Vizelberg</text>
|
||||||
|
<path d="M40 58 C110 66 200 66 262 56" stroke="#C9A24B" stroke-width="2" fill="none"/>
|
||||||
|
<path d="M255 50 C262 52 265 54 262 56" stroke="#E8A87C" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
Шрифты в превью системные (Georgia/Times/Segoe) — на финальном этапе заменяются на лицензионные пары (напр. serif: Cormorant/PT Serif; sans: Inter/Manrope). Выбери 1–2 концепции — доработаю в финальный лого-замок (горизонтальный + иконка + ч/б версия).
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
355
miniapp_mockup.html
Normal file
355
miniapp_mockup.html
Normal file
@ -0,0 +1,355 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>VIZELBERG — Мини-приложение · мокап-проект</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||||||
|
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||||||
|
--line:rgba(47,74,60,.12); --soft:#8a978d;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:#ede6db;line-height:1.55}
|
||||||
|
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
|
||||||
|
header{background:var(--herbal);color:var(--cream);padding:48px 0;text-align:center}
|
||||||
|
header .k{font-size:12px;letter-spacing:6px;color:var(--gold);text-transform:uppercase}
|
||||||
|
header h1{font-family:Georgia,serif;font-size:25px;margin-top:10px}
|
||||||
|
header p{color:var(--sage);font-size:14px;margin-top:6px}
|
||||||
|
.sec{padding:46px 0}
|
||||||
|
.sec h2{font-family:Georgia,serif;font-size:22px;color:var(--herbal);margin-bottom:6px}
|
||||||
|
.sec .d{color:#5d6b62;margin-bottom:26px;max-width:680px;font-size:14px}
|
||||||
|
|
||||||
|
/* icon system */
|
||||||
|
.ic{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
|
||||||
|
.ic-sm{width:16px;height:16px}
|
||||||
|
.ic-lg{width:30px;height:30px}
|
||||||
|
|
||||||
|
/* phones grid */
|
||||||
|
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
|
||||||
|
.col .cap{text-align:center;font-size:12px;color:#5d6b62;margin-top:10px;letter-spacing:.3px}
|
||||||
|
.phone{background:#1b251f;border-radius:34px;padding:9px;box-shadow:0 18px 40px rgba(27,37,31,.28)}
|
||||||
|
.screen{background:var(--cream);border-radius:26px;overflow:hidden;aspect-ratio:9/19.3;display:flex;flex-direction:column;position:relative}
|
||||||
|
.notch{height:22px;display:flex;align-items:center;justify-content:center}
|
||||||
|
.notch i{width:46px;height:5px;border-radius:3px;background:rgba(0,0,0,.12)}
|
||||||
|
|
||||||
|
.top{padding:6px 16px 10px;display:flex;align-items:center;gap:9px;color:var(--herbal)}
|
||||||
|
.top .logo{width:24px;height:24px;border-radius:8px;background:var(--herbal);color:var(--cream);display:flex;align-items:center;justify-content:center}
|
||||||
|
.top .ti{font-weight:600;font-size:12px}
|
||||||
|
.top .sp{margin-left:auto;color:var(--soft)}
|
||||||
|
|
||||||
|
.body{flex:1;overflow:hidden;padding:4px 14px 12px;display:flex;flex-direction:column;gap:9px;font-size:11px}
|
||||||
|
.h{font-weight:600;color:var(--herbal);font-size:12px}
|
||||||
|
.muted{color:var(--soft);font-size:10px}
|
||||||
|
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:5px}
|
||||||
|
.row{display:flex;align-items:center;gap:9px}
|
||||||
|
.row .ico{color:var(--sage);flex:none}
|
||||||
|
.row .tx{flex:1}
|
||||||
|
.row .tx b{color:var(--herbal);font-weight:600;font-size:11px;display:block}
|
||||||
|
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:3px 9px;font-size:9.5px;color:var(--herbal)}
|
||||||
|
.bar{height:7px;background:#e9e2d6;border-radius:5px;overflow:hidden}
|
||||||
|
.bar i{display:block;height:7px;border-radius:5px;background:var(--gold)}
|
||||||
|
.bar.green i{background:var(--sage)}
|
||||||
|
.ring{display:flex;align-items:center;justify-content:center}
|
||||||
|
.btn{background:var(--herbal);color:#fff;border-radius:12px;padding:11px;text-align:center;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
|
||||||
|
.btn.gold{background:var(--gold);color:#3a2e10}
|
||||||
|
.btn.outline{background:transparent;color:var(--herbal);border:1.5px solid var(--herbal)}
|
||||||
|
|
||||||
|
.tabbar{display:flex;justify-content:space-around;align-items:center;padding:9px 0 12px;background:#fff;border-top:1px solid var(--line);position:relative}
|
||||||
|
.tabbar a{color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:8px;text-decoration:none}
|
||||||
|
.tabbar a.on{color:var(--herbal)}
|
||||||
|
.tabbar .fab{width:42px;height:42px;border-radius:50%;background:var(--gold);color:#3a2e10;display:flex;align-items:center;justify-content:center;margin-top:-26px;box-shadow:0 8px 16px rgba(201,162,75,.4)}
|
||||||
|
|
||||||
|
/* chat */
|
||||||
|
.chat{background:#e7e0d3;flex:1;padding:12px 12px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
|
||||||
|
.msg{max-width:80%;padding:7px 10px;border-radius:13px;font-size:10px;line-height:1.4}
|
||||||
|
.in{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
|
||||||
|
.out{background:var(--sage);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
|
||||||
|
.inputbar{display:flex;gap:7px;align-items:center;padding:9px 12px;background:#fff;border-top:1px solid var(--line)}
|
||||||
|
.inputbar .f{flex:1;background:var(--cream);border-radius:16px;padding:7px 11px;color:var(--soft);font-size:10px}
|
||||||
|
.inputbar .snd{width:30px;height:30px;border-radius:50%;background:var(--herbal);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
|
||||||
|
|
||||||
|
/* onboarding */
|
||||||
|
.ob{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:14px;background:linear-gradient(180deg,#fbf7f0,#efe7da)}
|
||||||
|
.ob .badge{width:78px;height:78px;border-radius:24px;background:var(--herbal);color:var(--cream);display:flex;align-items:center;justify-content:center}
|
||||||
|
.ob h3{font-family:Georgia,serif;color:var(--herbal);font-size:18px}
|
||||||
|
.ob p{color:#5d6b62;font-size:11px;max-width:200px}
|
||||||
|
.dots{display:flex;gap:6px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--gold);width:18px;border-radius:4px}
|
||||||
|
|
||||||
|
.legend{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
|
||||||
|
.legend h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
|
||||||
|
.icons{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
|
||||||
|
.icons .it{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--herbal);font-size:10px;text-align:center}
|
||||||
|
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.icons{grid-template-columns:repeat(4,1fr)}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ===== SVG ICON SYMBOLS (monochrome line set) ===== -->
|
||||||
|
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||||
|
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z"/><path d="M5 19c4-1 7-4 9-8"/></symbol>
|
||||||
|
<symbol id="i-home" viewBox="0 0 24 24"><path d="M4 11l8-6 8 6"/><path d="M6 10v9h12v-9"/><path d="M10 19v-5h4v5"/></symbol>
|
||||||
|
<symbol id="i-chart" viewBox="0 0 24 24"><path d="M5 20V4"/><path d="M5 20h15"/><path d="M9 20v-6"/><path d="M13 20v-9"/><path d="M17 20v-4"/></symbol>
|
||||||
|
<symbol id="i-chat" viewBox="0 0 24 24"><path d="M5 5h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H10l-4 4v-4H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M8 9h8M8 12h5"/></symbol>
|
||||||
|
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20c0-4 3-6 6.5-6s6.5 2 6.5 6"/></symbol>
|
||||||
|
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4"/></symbol>
|
||||||
|
<symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3 11h18a9 9 0 0 1-18 0z"/><path d="M2 11h20"/><path d="M9 7c0-1.5 1-2 1-3M13 7c0-1.5 1-2 1-3"/></symbol>
|
||||||
|
<symbol id="i-apple" viewBox="0 0 24 24"><path d="M12 8c-1.5-1.5-5-1.5-6 1.5s1 9 3.5 9c1 0 1.5-.6 2.5-.6s1.5.6 2.5.6c2.5 0 4.5-6 3.5-9s-4.5-3-6-1.5z"/><path d="M12 8c0-2 1-3 3-3.5"/></symbol>
|
||||||
|
<symbol id="i-fish" viewBox="0 0 24 24"><path d="M3 12c3-5 11-5 15 0-4 5-12 5-15 0z"/><path d="M18 12l3-3v6z"/><circle cx="8" cy="11" r=".8" fill="currentColor" stroke="none"/></symbol>
|
||||||
|
<symbol id="i-fire" viewBox="0 0 24 24"><path d="M12 3c1 3 4 4 4 8a4 4 0 0 1-8 0c0-1 .5-2 1-2.5C9 11 12 8 12 3z"/></symbol>
|
||||||
|
<symbol id="i-drop" viewBox="0 0 24 24"><path d="M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z"/></symbol>
|
||||||
|
<symbol id="i-scale" viewBox="0 0 24 24"><circle cx="12" cy="13" r="8"/><path d="M12 13l4-4"/><path d="M12 5V3"/></symbol>
|
||||||
|
<symbol id="i-camera" viewBox="0 0 24 24"><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.2"/></symbol>
|
||||||
|
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2H4.5z"/><path d="M10 20a2 2 0 0 0 4 0"/></symbol>
|
||||||
|
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||||||
|
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13"/><path d="M12 6l6 6-6 6"/></symbol>
|
||||||
|
<symbol id="i-card" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
|
||||||
|
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12l4.5 4.5L19 7"/></symbol>
|
||||||
|
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></symbol>
|
||||||
|
<symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6c-2-1.5-5-1.5-7-1v13c2-.5 5-.5 7 1 2-1.5 5-1.5 7-1V5c-2-.5-5-.5-7 1z"/><path d="M12 6v13"/></symbol>
|
||||||
|
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></symbol>
|
||||||
|
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20S4 14.5 4 9a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 5.5-8 11-8 11z"/></symbol>
|
||||||
|
<symbol id="i-send" viewBox="0 0 24 24"><path d="M4 12l16-7-7 16-2-7-7-2z"/></symbol>
|
||||||
|
<symbol id="i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="0.6" fill="currentColor" stroke="none"/></symbol>
|
||||||
|
<symbol id="i-gift" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="9" rx="1"/><path d="M3 10h18M12 10v9M12 10c-1-3-5-3-5-1s4 1 5 1zM12 10c1-3 5-3 5-1s-4 1-5 1z"/></symbol>
|
||||||
|
<symbol id="i-doc" viewBox="0 0 24 24"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4M9 12h6M9 16h6"/></symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="k">VIZELBERG · Mini-App Project</div>
|
||||||
|
<h1>Клиентское мини-приложение</h1>
|
||||||
|
<p>Telegram & MAX · 8 экранов · монохромный icon-set</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="sec"><div class="wrap">
|
||||||
|
<h2>Поток экранов</h2>
|
||||||
|
<div class="d">Полный клиентский путь: онбординг → главный экран дня → меню/рецепт → прогресс → чат → подписка → знания → профиль. Все пиктограммы — единый линейный монохром (stroke в фирменном цвете), без эмодзи.</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
|
||||||
|
<!-- 1 ONBOARDING -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="ob">
|
||||||
|
<div class="badge"><svg class="ic ic-lg"><use href="#i-leaf"/></svg></div>
|
||||||
|
<h3>Добро пожаловать<br>в VIZELBERG</h3>
|
||||||
|
<p>Персональное питание как система. Меню, контроль и поддержка — в одном месте.</p>
|
||||||
|
<div class="dots"><i class="on"></i><i></i><i></i></div>
|
||||||
|
<div class="btn gold" style="width:100%">Начать <svg class="ic ic-sm"><use href="#i-arrow"/></svg></div>
|
||||||
|
<div class="muted">Уже есть аккаунт? Войти</div>
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">1 · Онбординг</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2 HOME / TODAY -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="top"><div class="logo"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div class="ti">Сегодня</div><div class="sp"><svg class="ic"><use href="#i-bell"/></svg></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile" style="background:var(--herbal);color:var(--cream);border:none">
|
||||||
|
<div class="muted" style="color:var(--sage)">Среда, 27 мая</div>
|
||||||
|
<div class="row"><div class="ico" style="color:var(--gold)"><svg class="ic"><use href="#i-fire"/></svg></div><div class="tx"><b style="color:#fff">1400 / 1900 ккал</b></div></div>
|
||||||
|
<div class="bar"><i style="width:74%"></i></div>
|
||||||
|
</div>
|
||||||
|
<div class="h">План питания</div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-sun"/></svg></div><div class="tx"><b>Завтрак</b><span class="muted">Овсянка с ягодами · 320 ккал</span></div><svg class="ic ic-sm" style="color:var(--sage)"><use href="#i-check"/></svg></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-bowl"/></svg></div><div class="tx"><b>Обед</b><span class="muted">Гречка + индейка · 480 ккал</span></div></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-apple"/></svg></div><div class="tx"><b>Перекус</b><span class="muted">Яблоко + орехи · 180 ккал</span></div></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-fish"/></svg></div><div class="tx"><b>Ужин</b><span class="muted">Лосось + овощи · 420 ккал</span></div></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar">
|
||||||
|
<a class="on"><svg class="ic"><use href="#i-home"/></svg>Сегодня</a>
|
||||||
|
<a><svg class="ic"><use href="#i-chart"/></svg>Прогресс</a>
|
||||||
|
<div class="fab"><svg class="ic"><use href="#i-plus"/></svg></div>
|
||||||
|
<a><svg class="ic"><use href="#i-chat"/></svg>Чат</a>
|
||||||
|
<a><svg class="ic"><use href="#i-user"/></svg>Профиль</a>
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">2 · Главный экран</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3 RECIPE -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="top"><div class="sp" style="margin:0;color:var(--herbal);transform:rotate(180deg)"><svg class="ic"><use href="#i-arrow"/></svg></div><div class="ti">Обед</div><div class="sp"><svg class="ic"><use href="#i-heart"/></svg></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile" style="align-items:center;background:var(--sage);border:none;padding:22px"><svg class="ic" style="width:54px;height:54px;color:#fff"><use href="#i-bowl"/></svg></div>
|
||||||
|
<div class="h">Гречка с индейкой и салатом</div>
|
||||||
|
<div class="row" style="gap:6px;flex-wrap:wrap">
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-fire"/></svg> 480 ккал</span>
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-clock"/></svg> 25 мин</span>
|
||||||
|
<span class="pill">Б 38 · Ж 14 · У 52</span>
|
||||||
|
</div>
|
||||||
|
<div class="h" style="margin-top:4px">Состав</div>
|
||||||
|
<div class="tile"><div class="muted" style="line-height:1.7">Гречка 60 г · Индейка 150 г<br>Огурец, помидор, зелень<br>Оливковое масло 1 ч.л.</div></div>
|
||||||
|
<div class="btn outline"><svg class="ic ic-sm"><use href="#i-doc"/></svg> Рецепт пошагово</div>
|
||||||
|
<div class="btn"><svg class="ic ic-sm"><use href="#i-check"/></svg> Отметить съеденным</div>
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">3 · Рецепт / блюдо</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4 PROGRESS -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="top"><div class="logo"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div class="ti">Прогресс</div><div class="sp"><svg class="ic"><use href="#i-cal"/></svg></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-scale"/></svg></div><div class="tx"><b>Вес · 68,4 кг</b><span class="muted">−2,1 кг за месяц</span></div></div>
|
||||||
|
<svg viewBox="0 0 200 46" style="width:100%;height:46px"><polyline points="0,36 35,33 70,26 105,24 140,16 175,12 200,8" fill="none" stroke="#7C9070" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-drop"/></svg></div><div class="tx"><b>Вода</b></div><span class="muted">1,5 / 2,5 л</span></div><div class="bar green"><i style="width:60%"></i></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-target"/></svg></div><div class="tx"><b>Цель недели</b></div><span class="muted">5/7 дней</span></div><div class="bar"><i style="width:71%"></i></div></div>
|
||||||
|
<div class="h">Самочувствие</div>
|
||||||
|
<div class="row" style="flex-wrap:wrap;gap:6px">
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-clock"/></svg> Сон 7ч</span>
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-fire"/></svg> Энергия ↑</span>
|
||||||
|
<span class="pill"><svg class="ic ic-sm"><use href="#i-heart"/></svg> ЖКТ ОК</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn outline"><svg class="ic ic-sm"><use href="#i-camera"/></svg> Чек-ин фото</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar">
|
||||||
|
<a><svg class="ic"><use href="#i-home"/></svg>Сегодня</a>
|
||||||
|
<a class="on"><svg class="ic"><use href="#i-chart"/></svg>Прогресс</a>
|
||||||
|
<div class="fab"><svg class="ic"><use href="#i-plus"/></svg></div>
|
||||||
|
<a><svg class="ic"><use href="#i-chat"/></svg>Чат</a>
|
||||||
|
<a><svg class="ic"><use href="#i-user"/></svg>Профиль</a>
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">4 · Прогресс / трекинг</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5 CHAT -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="top"><div class="logo"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div class="ti">Нутрициолог</div><div class="sp"><span class="pill" style="font-size:8px;color:var(--sage)">онлайн</span></div></div>
|
||||||
|
<div class="chat">
|
||||||
|
<div class="msg in">Доброе утро! Как самочувствие на новом меню?</div>
|
||||||
|
<div class="msg out">Лучше! Энергии больше, не тянет на сладкое</div>
|
||||||
|
<div class="msg in">Отлично — работают сложные углеводы. Держим курс</div>
|
||||||
|
<div class="msg out">А можно заменить гречку на булгур?</div>
|
||||||
|
<div class="msg in">Да, по КБЖУ почти то же. Уже заменил в меню</div>
|
||||||
|
<div class="msg in" style="display:flex;align-items:center;gap:6px"><svg class="ic ic-sm" style="color:var(--sage)"><use href="#i-doc"/></svg> Меню_неделя_22.pdf</div>
|
||||||
|
</div>
|
||||||
|
<div class="inputbar"><div class="f">Сообщение…</div><div class="snd"><svg class="ic ic-sm"><use href="#i-send"/></svg></div></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">5 · Чат с экспертом</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 6 SUBSCRIPTION -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="top"><div class="ti">Тарифы</div><div class="sp"></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile" style="border:2px solid var(--gold)">
|
||||||
|
<div class="row"><div class="tx"><b>Сопровождение · 3 мес</b><span class="muted">меню + чат + контроль</span></div><span class="pill" style="background:var(--gold);color:#3a2e10;border:none">хит</span></div>
|
||||||
|
<div class="row"><div class="tx" style="font-size:16px;font-weight:700;color:var(--herbal)">24 900 ₽</div><span class="muted" style="text-decoration:line-through">29 000</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-leaf"/></svg></div><div class="tx"><b>Поддержка · 1 мес</b><span class="muted">меню + чек-ины</span></div><b style="color:var(--herbal)">4 900</b></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-doc"/></svg></div><div class="tx"><b>Разовый разбор</b><span class="muted">анализы + рекомендации</span></div><b style="color:var(--herbal)">3 500</b></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-gift"/></svg></div><div class="tx"><b>Пригласи подругу</b><span class="muted">−500 ₽ вам обеим</span></div></div></div>
|
||||||
|
<div class="btn gold"><svg class="ic ic-sm"><use href="#i-card"/></svg> Оформить · СБП</div>
|
||||||
|
<div class="muted" style="text-align:center">Оплата картой или СБП. Отмена в любой момент</div>
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">6 · Подписка / оплата</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 7 KNOWLEDGE -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="top"><div class="logo"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div class="ti">База знаний</div><div class="sp"></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="row" style="gap:6px;flex-wrap:wrap">
|
||||||
|
<span class="pill">Все</span><span class="pill">Питание</span><span class="pill">Привычки</span><span class="pill">Анализы</span>
|
||||||
|
</div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-book"/></svg></div><div class="tx"><b>Как читать состав на этикетке</b><span class="muted">5 мин чтения</span></div></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-drop"/></svg></div><div class="tx"><b>Сколько воды реально нужно</b><span class="muted">3 мин</span></div></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-clock"/></svg></div><div class="tx"><b>Интервальное питание: за и против</b><span class="muted">7 мин</span></div></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-fire"/></svg></div><div class="tx"><b>Белок: нормы и источники</b><span class="muted">6 мин</span></div></div></div>
|
||||||
|
<div class="tile" style="background:var(--cream)"><div class="row"><div class="ico" style="color:var(--gold)"><svg class="ic"><use href="#i-target"/></svg></div><div class="tx"><b>Видео-урок недели</b><span class="muted">Завтрак за 10 минут</span></div></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar">
|
||||||
|
<a><svg class="ic"><use href="#i-home"/></svg>Сегодня</a>
|
||||||
|
<a><svg class="ic"><use href="#i-chart"/></svg>Прогресс</a>
|
||||||
|
<div class="fab"><svg class="ic"><use href="#i-plus"/></svg></div>
|
||||||
|
<a><svg class="ic"><use href="#i-chat"/></svg>Чат</a>
|
||||||
|
<a><svg class="ic"><use href="#i-user"/></svg>Профиль</a>
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">7 · База знаний</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 8 PROFILE -->
|
||||||
|
<div class="col">
|
||||||
|
<div class="phone"><div class="screen">
|
||||||
|
<div class="notch"><i></i></div>
|
||||||
|
<div class="top"><div class="ti">Профиль</div><div class="sp"></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="tile" style="align-items:center;gap:8px"><div class="logo" style="width:54px;height:54px;border-radius:50%;background:var(--sage)"><svg class="ic ic-lg"><use href="#i-user"/></svg></div><div class="h">Анна</div><span class="muted">Цель: −5 кг · здоровые привычки</span></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-target"/></svg></div><div class="tx"><b>Моя цель и параметры</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-doc"/></svg></div><div class="tx"><b>Мои анализы</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-card"/></svg></div><div class="tx"><b>Подписка и платежи</b><span class="muted">Активна до 27 авг</span></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-bell"/></svg></div><div class="tx"><b>Напоминания</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
<div class="tile"><div class="row"><div class="ico"><svg class="ic"><use href="#i-gift"/></svg></div><div class="tx"><b>Пригласить друзей</b></div><svg class="ic ic-sm" style="color:var(--soft)"><use href="#i-arrow"/></svg></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabbar">
|
||||||
|
<a><svg class="ic"><use href="#i-home"/></svg>Сегодня</a>
|
||||||
|
<a><svg class="ic"><use href="#i-chart"/></svg>Прогресс</a>
|
||||||
|
<div class="fab"><svg class="ic"><use href="#i-plus"/></svg></div>
|
||||||
|
<a><svg class="ic"><use href="#i-chat"/></svg>Чат</a>
|
||||||
|
<a class="on"><svg class="ic"><use href="#i-user"/></svg>Профиль</a>
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
<div class="cap">8 · Профиль</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ICON LEGEND -->
|
||||||
|
<div class="legend">
|
||||||
|
<h3>Монохромный icon-set</h3>
|
||||||
|
<div class="icons">
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-leaf"/></svg>лого</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-home"/></svg>дом</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-chart"/></svg>прогресс</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-chat"/></svg>чат</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-user"/></svg>профиль</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-sun"/></svg>завтрак</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-bowl"/></svg>обед</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-apple"/></svg>перекус</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-fish"/></svg>ужин</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-fire"/></svg>калории</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-drop"/></svg>вода</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-scale"/></svg>вес</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-target"/></svg>цель</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-camera"/></svg>фото</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-bell"/></svg>напоминания</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-cal"/></svg>календарь</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-clock"/></svg>время</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-heart"/></svg>избранное</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-book"/></svg>знания</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-doc"/></svg>документ</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-card"/></svg>оплата</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-gift"/></svg>реферал</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-check"/></svg>готово</div>
|
||||||
|
<div class="it"><svg class="ic"><use href="#i-send"/></svg>отправить</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
<div style="padding:40px 0;text-align:center;color:#5d6b62;font-size:13px">
|
||||||
|
VIZELBERG · Mini-App Project · 2026 — иконки на чистом SVG (stroke, единый стиль). Системные шрифты в превью.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user