439 lines
32 KiB
HTML
439 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>FORMA — домашние тренировки</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.kt-ai-app { background: var(--kt-ai-bg); min-height: 100vh; }
|
||
.kt-ai-sidebar { background: var(--kt-ai-bg); display: flex; flex-direction: column; }
|
||
.kt-ai-sidebar .kt-ai-brand-row { padding: var(--kt-ai-space-6) var(--kt-ai-space-6) var(--kt-ai-space-4); }
|
||
.kt-ai-sidebar .kt-ai-logo { width: 28px; height: 28px; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-primary-subtle); display: grid; place-items: center; color: var(--kt-ai-link); font-weight: var(--kt-ai-weight-bold); font-size: var(--kt-ai-text-sm); }
|
||
.kt-ai-sidebar .kt-ai-btn { margin: 0 var(--kt-ai-space-6) var(--kt-ai-space-6); }
|
||
.kt-ai-sidebar .kt-ai-nav { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); padding: 0 var(--kt-ai-space-4); }
|
||
.kt-ai-sidebar .kt-ai-nav-group { flex: 1; }
|
||
.kt-ai-profile { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-4) var(--kt-ai-space-6); border-top: 1px solid var(--kt-ai-divider); }
|
||
.kt-ai-profile strong { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg); }
|
||
.kt-ai-profile small { display: block; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
|
||
.kt-ai-content { padding: var(--kt-ai-space-6) var(--kt-ai-space-9); display: flex; flex-direction: column; gap: var(--kt-ai-space-7); max-width: 1240px; }
|
||
.kt-ai-topbar { display: flex; align-items: center; gap: var(--kt-ai-space-4); }
|
||
.form-body { display: grid; gap: var(--kt-ai-space-8); max-width: 1160px; }
|
||
.form-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kt-ai-space-5); }
|
||
.form-kpi { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--vibe-card-radius); padding: var(--kt-ai-space-5); box-shadow: var(--kt-ai-card-shadow); }
|
||
.form-kpi-label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.form-kpi-value { font-weight: var(--kt-ai-weight-semibold); font-size: var(--kt-ai-text-2xl); letter-spacing: -.02em; margin-top: var(--kt-ai-space-2); }
|
||
.form-kpi-unit { font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg-muted); }
|
||
.form-kpi-delta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-1); }
|
||
.form-kpi-delta b { color: var(--kt-ai-link); font-weight: var(--kt-ai-weight-semibold); }
|
||
.kt-ai-kpi .kt-ai-kpi-label { display: flex; align-items: center; gap: 6px; }
|
||
.kt-ai-kpi .kt-icon { width: 15px; height: 15px; color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-kpi .kt-icon svg { width: 100%; height: 100%; }
|
||
.form-main-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--kt-ai-space-6); align-items: start; }
|
||
.form-stack { display: grid; gap: var(--kt-ai-space-6); }
|
||
.kt-ai-card--hero { display: grid; gap: var(--kt-ai-space-5); }
|
||
.kt-ai-card--hero .kt-ai-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-link); font-weight: var(--kt-ai-weight-medium); }
|
||
.kt-ai-card--hero .kt-ai-kicker .kt-icon { width: 14px; height: 14px; }
|
||
.kt-ai-card--hero .form-meta { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-4); border: 0; }
|
||
.kt-ai-card--hero .form-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-card--hero .form-meta .kt-icon { width: 14px; height: 14px; }
|
||
.kt-ai-card--hero .kt-ai-btn { align-self: start; }
|
||
.form-title-row { display: flex; align-items: center; justify-content: space-between; }
|
||
.form-title-row .kt-icon { width: 18px; height: 18px; color: var(--kt-ai-fg-muted); }
|
||
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--kt-ai-space-4); }
|
||
.card-title-row h2 { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-medium); }
|
||
.card-title-row .kt-icon { width: 18px; height: 18px; color: var(--kt-ai-fg-muted); }
|
||
.form-week { margin-top: var(--kt-ai-space-5); }
|
||
.form-week-row { display: flex; justify-content: space-between; gap: var(--kt-ai-space-2); }
|
||
.form-week-item { display: grid; justify-items: center; gap: 7px; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
|
||
.form-week-item b { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); }
|
||
.form-week-dot { width: 28px; height: 28px; border-radius: var(--kt-ai-radius-full); display: grid; place-items: center; background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg-muted); font-size: 11px; }
|
||
.form-week-item.is-done .form-week-dot { background: var(--kt-ai-primary-subtle); color: var(--kt-ai-link); }
|
||
.form-week-item.is-done .form-week-dot svg { width: 14px; height: 14px; }
|
||
.form-week-item.is-today .form-week-dot { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); }
|
||
.form-progress { height: 5px; background: var(--kt-ai-bg-hover); border-radius: var(--kt-ai-radius-full); overflow: hidden; margin-top: var(--kt-ai-space-4); }
|
||
.form-progress span { display: block; width: 60%; height: 100%; background: var(--kt-ai-primary); border-radius: var(--kt-ai-radius-full); }
|
||
.form-progress-label { display: flex; justify-content: space-between; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2); }
|
||
.form-list { list-style: none; margin: 0; padding: 0; }
|
||
.form-list li { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-4) 0; border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.form-list li:last-child { border-bottom: 0; padding-bottom: 0; }
|
||
.form-list .form-avatar { width: 36px; height: 36px; margin-inline-start: -10px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-link); display: grid; place-items: center; }
|
||
.form-list .form-avatar svg { width: 18px; height: 18px; }
|
||
.form-list strong { display: block; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
|
||
.form-list small { display: block; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: 3px; }
|
||
.form-list .form-list-xp { margin-left: auto; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
.form-cta-card { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); }
|
||
.form-cta-card .kt-icon--spark { width: 22px; height: 22px; color: var(--kt-ai-link); }
|
||
.form-cta-card p { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: var(--kt-ai-leading-normal); margin: 0; }
|
||
.form-exercise-card { display: grid; gap: var(--kt-ai-space-6); }
|
||
.form-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg-muted); background: var(--kt-ai-bg-hover); border-radius: var(--kt-ai-radius-full); padding: 4px 10px; }
|
||
.form-badge .kt-icon { width: 13px; height: 13px; }
|
||
.form-exercise-card h2 { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-medium); margin: 0 0 var(--kt-ai-space-2); }
|
||
.form-exercise-card > p { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin: 0 0 var(--kt-ai-space-3); }
|
||
.form-ex { border: 0; border-top: 1px solid var(--kt-ai-divider); padding: var(--kt-ai-space-3) 0; margin: 0; }
|
||
.form-ex .form-ex-row { display: flex; justify-content: space-between; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); }
|
||
.form-ex .form-ex-row span:last-child { color: var(--kt-ai-fg-muted); }
|
||
.form-empty { list-style: none; margin: var(--kt-ai-space-4) 0 0; padding: 0; }
|
||
.form-empty li { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); padding: var(--kt-ai-space-2) 0; border-top: 1px solid var(--kt-ai-divider); }
|
||
.form-empty li:first-child { border-top: 0; }
|
||
.form-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-6); }
|
||
.kt-ai-field { display: grid; gap: var(--kt-ai-space-2); margin-bottom: var(--kt-ai-space-4); }
|
||
.kt-ai-field label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-input, .kt-ai-select { width: 100%; box-sizing: border-box; border-radius: var(--vibe-field-radius) !important; }
|
||
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-5); }
|
||
.form-actions .kt-ai-btn { min-height: 38px; }
|
||
.form-result { margin-top: var(--kt-ai-space-5); display: flex; align-items: baseline; gap: 8px; }
|
||
.form-result strong { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); }
|
||
.form-result span { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.form-note { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); line-height: var(--kt-ai-leading-normal); margin: var(--kt-ai-space-4) 0 0; }
|
||
.form-note-warn { color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); }
|
||
.form-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 160px; padding-top: var(--kt-ai-space-4); }
|
||
.form-chart-col { flex: 1; display: grid; gap: 6px; justify-items: center; font-size: 10px; color: var(--kt-ai-fg-muted); }
|
||
.form-chart-bar { width: 100%; max-width: 38px; border-radius: 6px 6px 2px 2px; background: var(--kt-ai-primary-subtle); }
|
||
.form-chart-bar.is-last { background: var(--kt-ai-primary); }
|
||
.form-chat { max-width: 760px; margin: 0 auto; }
|
||
.form-chat-card { display: flex; flex-direction: column; height: 480px; overflow: hidden; }
|
||
.form-chat-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.form-chat-avatar { width: 38px; height: 38px; border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-link); display: grid; place-items: center; }
|
||
.form-chat-avatar svg { width: 20px; height: 20px; }
|
||
.form-chat-head strong { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-medium); }
|
||
.form-chat-head small { display: block; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: 3px; }
|
||
.form-chat-head .kt-ai-status-pill { margin-left: auto; }
|
||
.form-chat-messages { flex: 1; overflow: auto; padding: var(--kt-ai-space-5); display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
|
||
.form-msg { max-width: 80%; padding: 10px 14px; border-radius: var(--kt-ai-radius-xl); font-size: var(--kt-ai-text-sm); line-height: var(--kt-ai-leading-normal); }
|
||
.form-msg--bot { background: var(--kt-ai-bg-hover); align-self: flex-start; border-bottom-left-radius: 4px; }
|
||
.form-msg--me { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); align-self: flex-end; border-bottom-right-radius: 4px; }
|
||
.form-chat-suggest { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); padding: 0 var(--kt-ai-space-5) var(--kt-ai-space-4); }
|
||
.form-chat-suggest button { border: 0; background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); border-radius: var(--kt-ai-radius-full); padding: 7px 12px; font-size: var(--kt-ai-text-2xs); }
|
||
.form-chat-suggest button:hover { background: var(--kt-ai-bg-active); }
|
||
.form-chat-form { display: flex; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-4); border-top: 1px solid var(--kt-ai-divider); }
|
||
.form-chat-form input { flex: 1; border-radius: var(--vibe-field-radius) !important; }
|
||
.form-chat-footnote { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); line-height: var(--kt-ai-leading-normal); margin: var(--kt-ai-space-3) 4px 0; }
|
||
form.kt-ai-form-row { display: grid; gap: 0; }
|
||
.form-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
|
||
.form-page-sub { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); margin: var(--kt-ai-space-2) 0 0; max-width: 60ch; }
|
||
.kt-ai-work-column > .form-page-head:first-child { margin-top: var(--kt-ai-space-4); }
|
||
@media (max-width: 832px) {
|
||
.form-kpi-strip, .form-main-grid, .form-health-grid { grid-template-columns: 1fr; }
|
||
.form-week-row { gap: var(--kt-ai-space-1); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<div class="kt-ai-shell">
|
||
<aside class="kt-ai-sidebar">
|
||
<div class="kt-ai-brand-row">
|
||
<span class="kt-ai-logo">F</span>
|
||
<span class="kt-ai-brand-label">FORMA</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-page="coach" data-i="cTA">Спросить ИИ</button>
|
||
<nav class="kt-ai-nav">
|
||
<div class="kt-ai-nav-group">
|
||
<span class="kt-ai-nav-group-label" data-i="menu">МЕНЮ</span>
|
||
<button class="kt-ai-nav-item" data-active="true" data-page="home">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#home"></use></svg>
|
||
<span data-i="nav_home">Обзор</span>
|
||
</button>
|
||
<button class="kt-ai-nav-item" data-page="train">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#tool"></use></svg>
|
||
<span data-i="nav_train">Тренировки</span>
|
||
</button>
|
||
<button class="kt-ai-nav-item" data-page="health">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#chart"></use></svg>
|
||
<span data-i="nav_health">Здоровье</span>
|
||
</button>
|
||
<button class="kt-ai-nav-item" data-page="coach">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#chat"></use></svg>
|
||
<span data-i="nav_coach">ИИ помощник</span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
<div class="kt-ai-spacer"></div>
|
||
<div class="kt-ai-profile">
|
||
<div class="kt-ai-avatar" data-i="profile_name">А</div>
|
||
<div>
|
||
<strong data-i="profile_name_lbl">Мой профиль</strong>
|
||
<small data-i="profile_sub">Бесплатный план</small>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="kt-ai-main">
|
||
<div class="kt-ai-work-column">
|
||
<header class="kt-ai-topbar">
|
||
<span class="kt-ai-h1" id="crumb" style="font-size:var(--kt-ai-text-lg);font-weight:var(--kt-ai-weight-medium)">Обзор</span>
|
||
<select class="kt-ai-select" id="lang" aria-label="Language" style="width:auto">
|
||
<option value="ru">РУС</option>
|
||
<option value="kz">ҚАЗ</option>
|
||
<option value="en">ENG</option>
|
||
</select>
|
||
</header>
|
||
|
||
<!-- ====================== HOME ====================== -->
|
||
<section class="kt-ai-page" data-page="home" style="display:block">
|
||
<div class="form-page-head">
|
||
<div>
|
||
<span class="kt-ai-h1" data-i="hi">Привет, Айгерим</span>
|
||
<p class="form-page-sub" data-i="sub">Маленький шаг сегодня — сильная привычка завтра.</p>
|
||
</div>
|
||
<span class="kt-ai-page-head-date" data-i="date">25 сентября</span>
|
||
</div>
|
||
|
||
<div class="kt-ai-kpi-strip form-kpi-strip">
|
||
<div class="kt-ai-kpi">
|
||
<span class="kt-ai-kpi-label"><svg class="kt-icon" aria-hidden="true"><use href="#trophy"></use></svg><span data-i="kpi_streak">Серия</span></span>
|
||
<span class="kt-ai-kpi-value">4 <span class="kt-ai-kpi-unit" data-i="streak_unit">дня</span></span>
|
||
<span class="form-kpi-delta"><b>↑ 2</b> <span data-i="kpi_streak_d">к прошлой неделе</span></span>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<span class="kt-ai-kpi-label"><svg class="kt-icon" aria-hidden="true"><use href="#dashboard"></use></svg><span data-i="kpi_min">Активность</span></span>
|
||
<span class="kt-ai-kpi-value">85 <span class="kt-ai-kpi-unit" data-i="min_unit">мин</span></span>
|
||
<span class="form-kpi-delta" data-i="kpi_min_d">за эту неделю</span>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<span class="kt-ai-kpi-label"><svg class="kt-icon" aria-hidden="true"><use href="#refresh"></use></svg><span data-i="kpi_water">Вода</span></span>
|
||
<span class="kt-ai-kpi-value"><span id="waterVal">4</span> / 8</span>
|
||
<button class="kt-ai-link" id="waterAdd" style="margin-top:4px;font-size:var(--kt-ai-text-2xs)" data-i="water_add">+ добавить стакан</button>
|
||
</div>
|
||
<div class="kt-ai-kpi">
|
||
<span class="kt-ai-kpi-label"><svg class="kt-icon" aria-hidden="true"><use href="#scale"></use></svg><span data-i="kpi_weight">Последний вес</span></span>
|
||
<span class="kt-ai-kpi-value"><span id="weightStat">62.4</span> <span class="kt-ai-kpi-unit" data-i="kg">кг</span></span>
|
||
<span class="form-kpi-delta" data-i="kpi_weight_d">обновлено сегодня</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-main-grid">
|
||
<div class="form-stack">
|
||
<article class="kt-ai-card kt-ai-card--hero">
|
||
<span class="kt-ai-kicker" data-i="wk_eb">Сегодня · 22 мин · 6 упражнений</span>
|
||
<h2 class="kt-ai-h2" style="margin:0;font-size:26px" data-i="wk_title">Сильные ноги</h2>
|
||
<p class="kt-ai-card-note" data-i="wk_desc">Уверенный темп и забота о теле. Без оборудования, в комфортном ритме.</p>
|
||
<div class="form-meta">
|
||
<span><svg class="kt-icon" aria-hidden="true"><use href="#clock"></use></svg><span data-i="wk_min">22 мин</span></span>
|
||
<span><svg class="kt-icon" aria-hidden="true"><use href="#checklist"></use></svg><span data-i="wk_ex">6 упражнений</span></span>
|
||
<span><svg class="kt-icon" aria-hidden="true"><use href="#check-circle"></use></svg><span data-i="wk_lvl">Средний</span></span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" data-ex="today" data-i="start">Начать тренировку →</button>
|
||
</article>
|
||
|
||
<article class="kt-ai-card">
|
||
<div class="card-title-row">
|
||
<h2 data-i="week">Эта неделя</h2>
|
||
<span class="kt-ai-fg-muted" style="font-size:var(--kt-ai-text-xs)" data-i="week_count">3 / 5 дней</span>
|
||
</div>
|
||
<div class="form-week">
|
||
<div class="form-week-row">
|
||
<div class="form-week-item is-done"><span data-i="d_mo">Пн</span><b>22</b><span class="form-week-dot"><svg class="kt-icon" aria-hidden="true"><use href="#check"></use></svg></span></div>
|
||
<div class="form-week-item is-done"><span data-i="d_tu">Вт</span><b>23</b><span class="form-week-dot"><svg class="kt-icon" aria-hidden="true"><use href="#check"></use></svg></span></div>
|
||
<div class="form-week-item is-today"><span data-i="d_we">Ср</span><b>24</b><span class="form-week-dot">•</span></div>
|
||
<div class="form-week-item"><span data-i="d_th">Чт</span><b>25</b><span class="form-week-dot">·</span></div>
|
||
<div class="form-week-item"><span data-i="d_fr">Пт</span><b>26</b><span class="form-week-dot">·</span></div>
|
||
<div class="form-week-item"><span data-i="d_sa">Сб</span><b>27</b><span class="form-week-dot">·</span></div>
|
||
<div class="form-week-item"><span data-i="d_su">Вс</span><b>28</b><span class="form-week-dot">·</span></div>
|
||
</div>
|
||
<div class="form-progress"><span></span></div>
|
||
<div class="form-progress-label">
|
||
<span data-i="week_goal">Недельная цель</span>
|
||
<b data-i="week_done">1 / 3</b>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="kt-ai-card">
|
||
<div class="card-title-row">
|
||
<h2 data-i="recent">Последняя активность</h2>
|
||
<button class="kt-ai-link" style="font-size:var(--kt-ai-text-xs)" data-page="train" data-i="all">Все тренировки →</button>
|
||
</div>
|
||
<ul class="form-list">
|
||
<li>
|
||
<span class="form-avatar"><svg class="kt-icon" aria-hidden="true"><use href="#dashboard"></use></svg></span>
|
||
<div><strong data-i="a1">Кардио без прыжков</strong><small data-i="a1s">Вчера · 18 мин · Выполнено</small></div>
|
||
<span class="form-list-xp">+32</span>
|
||
</li>
|
||
<li>
|
||
<span class="form-avatar"><svg class="kt-icon" aria-hidden="true"><use href="#refresh"></use></svg></span>
|
||
<div><strong data-i="a2">Растяжка всего тела</strong><small data-i="a2s">Вторник · 12 мин · Выполнено</small></div>
|
||
<span class="form-list-xp">+20</span>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
|
||
<aside class="form-stack">
|
||
<article class="kt-ai-card form-cta-card">
|
||
<svg class="kt-icon kt-icon--spark" aria-hidden="true"><use href="#sparkles"></use></svg>
|
||
<h2 class="kt-ai-h2" style="margin:0" data-i="cTA_t">Твой цифровой напарник</h2>
|
||
<p data-i="cTA_p">Подскажу, как начать, подскажу технику упражнений и подберу тренировку под твой ритм, настроение и свободное время.</p>
|
||
<button class="kt-ai-btn" data-variant="primary" data-page="coach" data-i="cTA">Спросить ИИ →</button>
|
||
</article>
|
||
|
||
<article class="kt-ai-card form-exercise-card" id="homeExCard">
|
||
<span class="form-badge" id="homeExBadge"><svg class="kt-icon" aria-hidden="true"><use href="#checklist"></use></svg><span id="homeExBadgeTx"></span></span>
|
||
<h2 id="homeExTitle"></h2>
|
||
<p id="homeExDesc"></p>
|
||
<div id="homeExList"></div>
|
||
<button class="kt-ai-btn" data-ex="0" data-variant="ghost" data-i="ex_start">Начать →</button>
|
||
</article>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================== TRAIN ====================== -->
|
||
<section class="kt-ai-page" data-page="train" style="display:none">
|
||
<div class="form-page-head">
|
||
<div>
|
||
<span class="kt-ai-h1" data-i="tr_t">Тренировки</span>
|
||
<p class="form-page-sub" data-i="tr_s">Программа на неделю — выбирай, что подходит сегодня.</p>
|
||
</div>
|
||
<span class="kt-ai-chip" data-i="tr_chip">4 программы</span>
|
||
</div>
|
||
<div class="kt-ai-card-grid" id="trainGrid"></div>
|
||
</section>
|
||
|
||
<!-- ====================== HEALTH ====================== -->
|
||
<section class="kt-ai-page" data-page="health" style="display:none">
|
||
<div class="form-page-head">
|
||
<div>
|
||
<span class="kt-ai-h1" data-i="h_t">Здоровье</span>
|
||
<p class="form-page-sub" data-i="h_s">Записывай показатели и наблюдай за изменениями со временем.</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-health-grid">
|
||
<article class="kt-ai-card">
|
||
<h2 class="kt-ai-h2" style="margin:0 0 var(--kt-ai-space-4);font-size:var(--kt-ai-text-xl)" data-i="hm_t">Вес и параметры тела</h2>
|
||
<form id="bodyForm" class="kt-ai-form-row">
|
||
<div class="kt-ai-field">
|
||
<label for="weight" data-i="w_lbl">Вес, кг</label>
|
||
<input id="weight" class="kt-ai-input" type="number" min="25" max="350" step="0.1" value="62.4">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="height" data-i="h_lbl">Рост, см</label>
|
||
<input id="height" class="kt-ai-input" type="number" min="100" max="250" value="168">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="waist" data-i="waist_lbl">Обхват талии, см (необязательно)</label>
|
||
<input id="waist" class="kt-ai-input" type="number" min="30" max="200" placeholder="—">
|
||
</div>
|
||
<div class="form-actions">
|
||
<span class="kt-ai-fg-faint" style="font-size:var(--kt-ai-text-2xs)" data-i="local">Данные — только в этом браузере.</span>
|
||
<button class="kt-ai-btn" type="submit" data-variant="primary" data-i="hm_save">Сохранить</button>
|
||
</div>
|
||
<p class="form-note" id="bmiNote" data-i="bmi_note">ИМТ — лишь один из ориентиров и не учитывает состав тела, возраст и другие особенности. Обсудите личные показатели со специалистом.</p>
|
||
</form>
|
||
<div class="form-result" id="bmiBox" hidden>
|
||
<strong id="bmiVal"></strong>
|
||
<span data-i="bmi_lbl">ИМТ · ориентировочный показатель, не диагноз</span>
|
||
</div>
|
||
|
||
<h2 class="kt-ai-h2" style="margin:var(--kt-ai-space-6) 0 var(--kt-ai-space-2);font-size:var(--kt-ai-text-xl)" data-i="wt_t">Изменение веса</h2>
|
||
<p class="form-page-sub" style="margin:0 0 var(--kt-ai-space-2)" data-i="wt_s">Твои записи за последние недели.</p>
|
||
<div class="form-chart" id="weightChart"></div>
|
||
</article>
|
||
|
||
<article class="kt-ai-card">
|
||
<h2 class="kt-ai-h2" style="margin:0 0 var(--kt-ai-space-4);font-size:var(--kt-ai-text-xl)" data-i="lb_t">Анализы и самочувствие</h2>
|
||
<form id="labForm" class="kt-ai-form-row">
|
||
<div class="kt-ai-field">
|
||
<label for="labName" data-i="metric">Показатель</label>
|
||
<select id="labName" class="kt-ai-select">
|
||
<option value="testosterone" data-i="testo">Тестостерон</option>
|
||
<option value="ferritin" data-i="ferritin">Ферритин</option>
|
||
<option value="vitd" data-i="vitd">Витамин D</option>
|
||
<option value="other" data-i="other">Другой</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="labValue" data-i="val">Результат</label>
|
||
<input id="labValue" class="kt-ai-input" type="number" step="any" placeholder="например, 18.2">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="labUnit" data-i="unit">Единицы измерения</label>
|
||
<input id="labUnit" class="kt-ai-input" placeholder="указаны в бланке">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="labDate" data-i="labdate">Дата анализа</label>
|
||
<input id="labDate" class="kt-ai-input" type="date">
|
||
</div>
|
||
<div class="form-actions">
|
||
<span class="kt-ai-fg-faint" style="font-size:var(--kt-ai-text-2xs)" data-i="local">Данные — только в этом браузере.</span>
|
||
<button class="kt-ai-btn" type="submit" data-variant="primary" data-i="lb_add">Добавить результат</button>
|
||
</div>
|
||
</form>
|
||
<h3 class="kt-ai-h3" style="margin:var(--kt-ai-space-6) 0 0;font-size:var(--kt-ai-text-lg)" data-i="lb_h">Ваши записи</h3>
|
||
<ul class="form-list" id="labHistory"></ul>
|
||
<ul class="form-empty" id="labEmpty"><li data-i="empty">Пока нет записей — добавьте первый результат.</li></ul>
|
||
<p class="form-note form-note-warn" data-i="lb_note">Референсные значения зависят от лаборатории, метода, пола, возраста и времени сдачи. Мы не диагностируем гормональные нарушения. Сверь результат с бланком и обсуди его с врачом.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================== COACH ====================== -->
|
||
<section class="kt-ai-page" data-page="coach" style="display:none">
|
||
<div class="form-page-head">
|
||
<div>
|
||
<span class="kt-ai-h1" data-i="ai_t">ИИ помощник</span>
|
||
<p class="form-page-sub" data-i="ai_s">Расскажи, что тебе нужно — подберём идею для следующего шага.</p>
|
||
</div>
|
||
<span class="kt-ai-status-pill" data-status="ok" data-i="ai_online">Онлайн</span>
|
||
</div>
|
||
|
||
<div class="form-chat">
|
||
<article class="kt-ai-card form-chat-card">
|
||
<div class="form-chat-head">
|
||
<span class="form-chat-avatar"><svg class="kt-icon" aria-hidden="true"><use href="#sparkles"></use></svg></span>
|
||
<div>
|
||
<strong>FORMA AI</strong>
|
||
<small data-i="ai_on">Отвечает мгновенно</small>
|
||
</div>
|
||
<span class="kt-ai-status-pill" data-status="ok" data-i="ai_online">Онлайн</span>
|
||
</div>
|
||
<div class="form-chat-messages" id="chatMessages">
|
||
<div class="form-msg form-msg--bot" data-i="hi_msg">Привет! Я помогу выбрать тренировку, подскажу технику и составлю план на неделю. Как ты себя сегодня чувствуешь?</div>
|
||
</div>
|
||
<div class="form-chat-suggest">
|
||
<button data-prompt="Хочу короткую тренировку на 15 минут" data-i="s1">15-минутная тренировка</button>
|
||
<button data-prompt="Подскажи, как войти в регулярный ритм" data-i="s2">Войти в ритм</button>
|
||
<button data-prompt="Нужна лёгкая растяжка" data-i="s3">Лёгкая растяжка</button>
|
||
</div>
|
||
<form id="chatForm" class="form-chat-form">
|
||
<input id="chatText" class="kt-ai-input" data-ph="ph" placeholder="Напиши сообщение…" autocomplete="off">
|
||
<button class="kt-ai-btn" type="submit" data-variant="primary" aria-label="Отправить"><svg class="kt-icon" aria-hidden="true" style="width:16px;height:16px"><use href="#send"></use></svg></button>
|
||
</form>
|
||
</article>
|
||
<p class="form-chat-footnote" data-i="ai_disc">ИИ может ошибаться. Ответы не заменяют консультацию врача или тренера. При боли остановись; при недомогании обратись к специалисту.</p>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================== EXERCISE OVERLAY ====================== -->
|
||
<div class="kt-ai-modal-overlay" id="exOverlay" hidden style="z-index:50">
|
||
<div class="kt-ai-modal" style="max-width:400px;text-align:center" role="dialog" aria-labelledby="exTitle2">
|
||
<p class="kt-ai-card-note" id="exProgress" style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-2xs);margin-top:0" data-i="ex_prog">Упражнение 1 из 6</p>
|
||
<h2 id="exTitle2" class="kt-ai-h2" style="font-size:24px">—</h2>
|
||
<div class="kt-ai-card-note" id="exCount" style="font-weight:var(--kt-ai-weight-semibold);font-size:56px;letter-spacing:-.04em;color:var(--kt-ai-fg);margin:var(--kt-ai-space-4) 0">00:40</div>
|
||
<div style="display:flex;gap:8px;justify-content:center;margin-top:var(--kt-ai-space-4)">
|
||
<button id="exPause" class="kt-ai-btn" data-i="ex_pause">Пауза</button>
|
||
<button id="exNext" class="kt-ai-btn" data-variant="ghost" data-i="ex_next">Далее →</button>
|
||
</div>
|
||
<button id="exClose" class="kt-ai-link" style="margin-top:var(--kt-ai-space-4);font-size:var(--kt-ai-text-xs)" data-i="ex_end">Завершить тренировку</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================== TOASTS ====================== -->
|
||
<div class="kt-ai-toast-stack" id="toasts"></div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|