mirror of
https://github.com/wasrusgen/vizelberg-mockups.git
synced 2026-06-03 13:24:50 +00:00
363 lines
30 KiB
HTML
363 lines
30 KiB
HTML
<!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>
|