Gitea Pages: deploy mock prototype

Static HTML clickable prototype of Family Life Assistant MVP.
Served at https://zauresh.telecom.quest/zauresh/

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zauresh 2026-05-22 13:14:28 +05:00
commit be5fb227e7

886
index.html Normal file
View File

@ -0,0 +1,886 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Family Life Assistant — Mock</title>
<style>
:root {
--bg: #f5f1ea;
--card: #ffffff;
--accent: #8bb89a;
--accent-dark: #5d8a6d;
--blue: #a8c8e0;
--beige: #e8dcc4;
--text: #2d3a32;
--muted: #8a9b8f;
--urgent: #e89b8b;
--shadow: 0 2px 8px rgba(45,58,50,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #d4e4d8 0%, #e8dcc4 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: var(--text);
}
.device-wrap {
display: flex;
gap: 40px;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
}
.phone {
width: 390px;
height: 800px;
background: #1a1a1a;
border-radius: 48px;
padding: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
position: relative;
}
.screen {
width: 100%;
height: 100%;
background: var(--bg);
border-radius: 36px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.notch {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 28px;
background: #1a1a1a;
border-radius: 0 0 18px 18px;
z-index: 10;
}
.status-bar {
height: 44px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.header {
padding: 16px 20px 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 24px;
font-weight: 700;
}
.header h1 .emoji { margin-right: 6px; }
.avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--accent);
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
.content {
flex: 1;
overflow-y: auto;
padding: 0 16px 80px;
}
.content::-webkit-scrollbar { display: none; }
.greeting {
font-size: 15px;
color: var(--muted);
padding: 0 4px 16px;
}
.widget {
background: var(--card);
border-radius: 20px;
padding: 16px;
margin-bottom: 12px;
box-shadow: var(--shadow);
}
.widget-title {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
.widget-title .count {
background: var(--accent);
color: white;
border-radius: 10px;
padding: 2px 8px;
font-size: 11px;
}
.reminder-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f0ebe2;
gap: 12px;
}
.reminder-item:last-child { border-bottom: none; }
.reminder-icon {
width: 36px; height: 36px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.icon-medical { background: #ffe1d6; }
.icon-school { background: #d6e8ff; }
.icon-finance { background: #fff3d6; }
.icon-birthday { background: #f3d6ff; }
.icon-personal { background: #d6ffe1; }
.icon-food { background: #ffd6d6; }
.reminder-text { flex: 1; min-width: 0; }
.reminder-title-r {
font-size: 15px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reminder-meta {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
.badge-urgent {
background: var(--urgent);
color: white;
padding: 2px 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
}
.calendar-strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
}
.calendar-strip::-webkit-scrollbar { display: none; }
.day {
min-width: 48px;
text-align: center;
padding: 8px 4px;
border-radius: 14px;
background: #f8f4ec;
cursor: pointer;
}
.day.active {
background: var(--accent);
color: white;
}
.day .dow { font-size: 10px; text-transform: uppercase; opacity: 0.7; }
.day .num { font-size: 18px; font-weight: 700; margin-top: 2px; }
.day .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--urgent); margin: 4px auto 0; }
.ai-card {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
color: white;
border-radius: 20px;
padding: 16px;
margin-bottom: 12px;
}
.ai-card .label {
font-size: 11px;
text-transform: uppercase;
opacity: 0.8;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.ai-card .question {
font-size: 15px;
margin-bottom: 12px;
line-height: 1.4;
}
.ai-input {
background: rgba(255,255,255,0.2);
border-radius: 14px;
padding: 10px 14px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.quick-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.quick-item {
background: var(--card);
border-radius: 16px;
padding: 10px 6px;
text-align: center;
box-shadow: var(--shadow);
cursor: pointer;
transition: transform 0.1s;
}
.quick-item:active { transform: scale(0.95); }
.quick-emoji { font-size: 24px; margin-bottom: 4px; }
.quick-label { font-size: 10px; font-weight: 600; color: var(--text); }
.nav {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 70px;
background: var(--card);
border-top: 1px solid #f0ebe2;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 8px 12px;
z-index: 5;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: var(--muted);
cursor: pointer;
padding: 6px 12px;
border-radius: 12px;
font-size: 10px;
transition: all 0.15s;
}
.nav-item.active { color: var(--accent-dark); }
.nav-item.active .nav-icon { transform: scale(1.1); }
.nav-icon { font-size: 22px; }
.home-indicator {
position: absolute;
bottom: 6px; left: 50%;
transform: translateX(-50%);
width: 120px; height: 4px;
background: #333;
border-radius: 2px;
}
.screen-label {
text-align: center;
color: var(--text);
font-weight: 600;
margin-top: 12px;
font-size: 13px;
opacity: 0.7;
}
.doc-item, .note-item, .pay-item, .med-item, .bday-item, .event-item {
background: var(--card);
border-radius: 16px;
padding: 14px;
margin-bottom: 10px;
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 12px;
}
.doc-thumb {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--beige);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.item-main { flex: 1; min-width: 0; }
.item-title { font-size: 14px; font-weight: 600; }
.item-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.item-right { font-size: 13px; font-weight: 600; color: var(--accent-dark); flex-shrink: 0; }
.item-right.urgent { color: var(--urgent); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; padding: 0 4px; }
.chip {
background: var(--card);
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
box-shadow: var(--shadow);
cursor: pointer;
}
.chip.active { background: var(--accent); color: white; }
.fab {
position: absolute;
bottom: 86px; right: 20px;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--accent-dark);
color: white;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
box-shadow: 0 4px 16px rgba(93,138,109,0.4);
cursor: pointer;
z-index: 4;
}
.checkbox {
width: 22px; height: 22px;
border: 2px solid var(--accent);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
cursor: pointer;
}
.checkbox.checked { background: var(--accent); color: white; }
.checked-text { text-decoration: line-through; opacity: 0.5; }
.ai-chat-bubble {
background: var(--card);
border-radius: 18px;
padding: 12px 14px;
margin-bottom: 8px;
box-shadow: var(--shadow);
max-width: 80%;
font-size: 14px;
line-height: 1.4;
}
.ai-chat-bubble.user {
background: var(--accent);
color: white;
margin-left: auto;
border-bottom-right-radius: 6px;
}
.ai-chat-bubble.bot {
border-bottom-left-radius: 6px;
}
.ai-suggestion {
font-size: 12px;
background: rgba(255,255,255,0.3);
padding: 8px 12px;
border-radius: 12px;
margin-top: 6px;
display: inline-block;
cursor: pointer;
}
.legend {
max-width: 320px;
background: white;
border-radius: 20px;
padding: 24px;
box-shadow: var(--shadow);
font-size: 13px;
line-height: 1.6;
}
.legend h2 { font-size: 18px; margin-bottom: 12px; color: var(--accent-dark); }
.legend h3 { font-size: 13px; margin-top: 14px; margin-bottom: 4px; color: var(--text); }
.legend kbd {
background: var(--beige);
padding: 1px 6px;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
}
.legend ul { padding-left: 18px; color: var(--muted); }
.legend li { margin-bottom: 2px; }
.toast {
position: absolute;
bottom: 100px; left: 50%;
transform: translateX(-50%);
background: rgba(45,58,50,0.95);
color: white;
padding: 10px 16px;
border-radius: 12px;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 20;
}
.toast.show { opacity: 1; }
.hidden { display: none !important; }
.empty {
text-align: center;
color: var(--muted);
padding: 40px 20px;
font-size: 13px;
}
</style>
</head>
<body>
<div class="device-wrap">
<div>
<div class="phone">
<div class="notch"></div>
<div class="screen">
<div class="status-bar">
<span>9:41</span>
<span>● ● ● 🔋</span>
</div>
<!-- HOME -->
<div class="content" data-tab="home">
<div class="header">
<h1><span class="emoji">🏡</span>Семья Иванчуковых</h1>
<div class="avatar">М</div>
</div>
<div class="greeting">Доброе утро, Зауреш! Сегодня <b>22 мая</b>, пятница</div>
<div class="ai-card" onclick="switchTab('ai')">
<div class="label">🤖 AI-помощник</div>
<div class="question">«Что важного сегодня и что не забыть купить?»</div>
<div class="ai-input">
<span>🎙</span><span style="opacity:0.85">Спросить или сказать...</span>
</div>
</div>
<div class="quick-grid">
<div class="quick-item" onclick="switchTab('calendar')"><div class="quick-emoji">📅</div><div class="quick-label">Календарь</div></div>
<div class="quick-item" onclick="switchTab('medical')"><div class="quick-emoji">💊</div><div class="quick-label">Медицина</div></div>
<div class="quick-item" onclick="switchTab('docs')"><div class="quick-emoji">📂</div><div class="quick-label">Документы</div></div>
<div class="quick-item" onclick="switchTab('finance')"><div class="quick-emoji">💰</div><div class="quick-label">Финансы</div></div>
<div class="quick-item" onclick="switchTab('notes')"><div class="quick-emoji">📝</div><div class="quick-label">Заметки</div></div>
<div class="quick-item" onclick="switchTab('shopping')"><div class="quick-emoji">🛒</div><div class="quick-label">Покупки</div></div>
<div class="quick-item" onclick="switchTab('school')"><div class="quick-emoji">🎒</div><div class="quick-label">Школа</div></div>
<div class="quick-item" onclick="switchTab('bday')"><div class="quick-emoji">🎂</div><div class="quick-label">Праздники</div></div>
</div>
<div class="widget">
<div class="widget-title">Срочно сегодня <span class="count">3</span></div>
<div class="reminder-item">
<div class="reminder-icon icon-medical">💉</div>
<div class="reminder-text">
<div class="reminder-title-r">Записать Алину к стоматологу</div>
<div class="reminder-meta">Сегодня 15:00 · клиника «Улыбка»</div>
</div>
<span class="badge-urgent">сроч</span>
</div>
<div class="reminder-item">
<div class="reminder-icon icon-finance">💡</div>
<div class="reminder-text">
<div class="reminder-title-r">Оплатить коммуналку</div>
<div class="reminder-meta">До 23 мая · 18 400 ₸</div>
</div>
</div>
<div class="reminder-item">
<div class="reminder-icon icon-school">🎒</div>
<div class="reminder-text">
<div class="reminder-title-r">Принести поделку в садик</div>
<div class="reminder-meta">Тимур, завтра утром</div>
</div>
</div>
</div>
<div class="widget">
<div class="widget-title">Календарь — следующие дни</div>
<div class="calendar-strip">
<div class="day active"><div class="dow">Пт</div><div class="num">22</div><div class="dot"></div></div>
<div class="day"><div class="dow">Сб</div><div class="num">23</div><div class="dot"></div></div>
<div class="day"><div class="dow">Вс</div><div class="num">24</div></div>
<div class="day"><div class="dow">Пн</div><div class="num">25</div><div class="dot"></div></div>
<div class="day"><div class="dow">Вт</div><div class="num">26</div></div>
<div class="day"><div class="dow">Ср</div><div class="num">27</div><div class="dot"></div></div>
<div class="day"><div class="dow">Чт</div><div class="num">28</div></div>
</div>
</div>
<div class="widget">
<div class="widget-title">🎂 Ближайший день рождения</div>
<div class="reminder-item" style="padding-top:4px">
<div class="reminder-icon icon-birthday">🎁</div>
<div class="reminder-text">
<div class="reminder-title-r">Бабушка Айгуль — 28 мая</div>
<div class="reminder-meta">Через 6 дней · подарок не куплен</div>
</div>
</div>
</div>
<div class="widget">
<div class="widget-title">🛒 Список покупок <span class="count">5</span></div>
<div class="reminder-item" style="padding:6px 0">
<div class="checkbox"></div>
<div class="reminder-text"><div class="reminder-title-r" style="font-weight:500;font-size:14px">Молоко, хлеб, яблоки</div></div>
</div>
<div class="reminder-item" style="padding:6px 0">
<div class="checkbox checked">✓</div>
<div class="reminder-text"><div class="reminder-title-r checked-text" style="font-weight:500;font-size:14px">Парацетамол детский</div></div>
</div>
<div class="reminder-item" style="padding:6px 0">
<div class="checkbox"></div>
<div class="reminder-text"><div class="reminder-title-r" style="font-weight:500;font-size:14px">Тетради для Алины (3 шт)</div></div>
</div>
</div>
</div>
<!-- CALENDAR -->
<div class="content hidden" data-tab="calendar">
<div class="header"><h1><span class="emoji">📅</span>Календарь</h1><div class="avatar">М</div></div>
<div class="calendar-strip" style="padding: 0 4px 16px">
<div class="day"><div class="dow">Пт</div><div class="num">22</div><div class="dot"></div></div>
<div class="day active"><div class="dow">Сб</div><div class="num">23</div><div class="dot"></div></div>
<div class="day"><div class="dow">Вс</div><div class="num">24</div></div>
<div class="day"><div class="dow">Пн</div><div class="num">25</div><div class="dot"></div></div>
<div class="day"><div class="dow">Вт</div><div class="num">26</div></div>
<div class="day"><div class="dow">Ср</div><div class="num">27</div><div class="dot"></div></div>
<div class="day"><div class="dow">Чт</div><div class="num">28</div><div class="dot"></div></div>
</div>
<div class="chip-row">
<div class="chip active">Все</div><div class="chip">Медицина</div><div class="chip">Школа</div><div class="chip">Работа</div><div class="chip">Личное</div>
</div>
<div class="event-item" style="border-left: 4px solid var(--urgent)">
<div class="doc-thumb icon-medical">💉</div>
<div class="item-main"><div class="item-title">Стоматолог — Алина</div><div class="item-sub">Сегодня · 15:00–15:45 · клиника «Улыбка»</div></div>
</div>
<div class="event-item" style="border-left: 4px solid var(--blue)">
<div class="doc-thumb icon-school">📚</div>
<div class="item-main"><div class="item-title">Родительское собрание</div><div class="item-sub">Сб 23 мая · 18:00 · школа №42</div></div>
</div>
<div class="event-item" style="border-left: 4px solid var(--accent)">
<div class="doc-thumb icon-personal">🧘</div>
<div class="item-main"><div class="item-title">Йога — мама</div><div class="item-sub">Пн 25 мая · 09:00</div></div>
</div>
<div class="event-item" style="border-left: 4px solid var(--beige)">
<div class="doc-thumb icon-finance">💼</div>
<div class="item-main"><div class="item-title">Зарплата папы</div><div class="item-sub">Ср 27 мая</div></div>
</div>
<div class="event-item" style="border-left: 4px solid #f3d6ff">
<div class="doc-thumb icon-birthday">🎂</div>
<div class="item-main"><div class="item-title">Бабушка Айгуль — ДР</div><div class="item-sub">Чт 28 мая</div></div>
</div>
</div>
<!-- MEDICAL -->
<div class="content hidden" data-tab="medical">
<div class="header"><h1><span class="emoji">💊</span>Медицина</h1><div class="avatar">М</div></div>
<div class="chip-row"><div class="chip active">Все</div><div class="chip">Мама</div><div class="chip">Папа</div><div class="chip">Алина</div><div class="chip">Тимур</div></div>
<div class="widget">
<div class="widget-title">💊 Лекарства <span class="count">2</span></div>
<div class="reminder-item">
<div class="reminder-icon icon-medical">🟠</div>
<div class="reminder-text"><div class="reminder-title-r">Парацетамол · Тимур</div><div class="reminder-meta">Закончится через 2 дня · купить!</div></div>
<span class="badge-urgent">low</span>
</div>
<div class="reminder-item">
<div class="reminder-icon icon-medical">💊</div>
<div class="reminder-text"><div class="reminder-title-r">Витамин D · все дети</div><div class="reminder-meta">Каждый день 09:00</div></div>
</div>
</div>
<div class="widget">
<div class="widget-title">🩺 История визитов</div>
<div class="reminder-item">
<div class="reminder-icon icon-medical">👶</div>
<div class="reminder-text"><div class="reminder-title-r">Педиатр · Тимур</div><div class="reminder-meta">05.05.2026 · ОРВИ, выписан</div></div>
</div>
<div class="reminder-item">
<div class="reminder-icon icon-medical">🦷</div>
<div class="reminder-text"><div class="reminder-title-r">Стоматолог · Алина</div><div class="reminder-meta">18.04.2026 · профилактика</div></div>
</div>
<div class="reminder-item">
<div class="reminder-icon icon-medical">🧪</div>
<div class="reminder-text"><div class="reminder-title-r">Анализ крови · мама</div><div class="reminder-meta">02.04.2026 · норма</div></div>
</div>
</div>
<div class="widget">
<div class="widget-title">💉 Вакцинация</div>
<div class="reminder-item">
<div class="reminder-icon icon-medical">💉</div>
<div class="reminder-text"><div class="reminder-title-r">КПК · Тимур</div><div class="reminder-meta">След. прививка через 4 мес</div></div>
</div>
</div>
</div>
<!-- DOCS -->
<div class="content hidden" data-tab="docs">
<div class="header"><h1><span class="emoji">📂</span>Документы</h1><div class="avatar">М</div></div>
<div class="ai-input" style="background: white; box-shadow: var(--shadow); margin-bottom: 12px; padding: 10px 14px">
<span>🔍</span><span style="color: var(--muted)">Поиск по тексту документа...</span>
</div>
<div class="chip-row"><div class="chip active">Все</div><div class="chip">Удостоверения</div><div class="chip">Страховки</div><div class="chip">Школа</div><div class="chip">Мед</div></div>
<div class="doc-item">
<div class="doc-thumb">🪪</div>
<div class="item-main"><div class="item-title">Удостоверение мамы</div><div class="item-sub">ID · действует до 2031</div></div>
<span class="item-right">✓</span>
</div>
<div class="doc-item">
<div class="doc-thumb">📄</div>
<div class="item-main"><div class="item-title">Свидетельство Алины</div><div class="item-sub">Школа · OCR ✓</div></div>
<span class="item-right">✓</span>
</div>
<div class="doc-item">
<div class="doc-thumb">🚗</div>
<div class="item-main"><div class="item-title">Тех. паспорт авто</div><div class="item-sub">Страховка истекает через 12 дней</div></div>
<span class="item-right urgent">⏰</span>
</div>
<div class="doc-item">
<div class="doc-thumb">🏥</div>
<div class="item-main"><div class="item-title">Полис ДМС</div><div class="item-sub">Действует до 12.08.2026</div></div>
<span class="item-right">✓</span>
</div>
<div class="doc-item">
<div class="doc-thumb">📋</div>
<div class="item-main"><div class="item-title">Справка из садика</div><div class="item-sub">Тимур · 15.04.2026</div></div>
<span class="item-right">✓</span>
</div>
</div>
<!-- FINANCE -->
<div class="content hidden" data-tab="finance">
<div class="header"><h1><span class="emoji">💰</span>Финансы</h1><div class="avatar">М</div></div>
<div class="widget" style="background: linear-gradient(135deg, var(--beige), #f5e8c8)">
<div class="widget-title">К оплате в этом месяце</div>
<div style="font-size: 28px; font-weight: 700; margin-bottom: 4px">68 200 ₸</div>
<div style="font-size: 12px; color: var(--muted)">из них просрочено: <b style="color: var(--urgent)">0 ₸</b></div>
</div>
<div class="pay-item">
<div class="doc-thumb icon-finance">💡</div>
<div class="item-main"><div class="item-title">Коммуналка</div><div class="item-sub">До 23 мая</div></div>
<span class="item-right urgent">18 400 ₸</span>
</div>
<div class="pay-item">
<div class="doc-thumb icon-finance">📡</div>
<div class="item-main"><div class="item-title">Интернет (Beeline)</div><div class="item-sub">До 25 мая · авто</div></div>
<span class="item-right">5 990 ₸</span>
</div>
<div class="pay-item">
<div class="doc-thumb icon-finance">🎒</div>
<div class="item-main"><div class="item-title">Кружок Алины (танцы)</div><div class="item-sub">До 30 мая</div></div>
<span class="item-right">12 000 ₸</span>
</div>
<div class="pay-item">
<div class="doc-thumb icon-finance">🏦</div>
<div class="item-main"><div class="item-title">Ипотека</div><div class="item-sub">До 5 июня · авто</div></div>
<span class="item-right">28 500 ₸</span>
</div>
<div class="pay-item">
<div class="doc-thumb icon-finance">🎬</div>
<div class="item-main"><div class="item-title">Подписки (Netflix, Spotify)</div><div class="item-sub">До 10 июня · авто</div></div>
<span class="item-right">3 310 ₸</span>
</div>
</div>
<!-- NOTES -->
<div class="content hidden" data-tab="notes">
<div class="header"><h1><span class="emoji">📝</span>Заметки</h1><div class="avatar">М</div></div>
<div class="chip-row"><div class="chip active">Все</div><div class="chip">Личные</div><div class="chip">Общие</div><div class="chip">Голос</div></div>
<div class="note-item">
<div class="doc-thumb">📝</div>
<div class="item-main"><div class="item-title">Идеи на подарок бабушке</div><div class="item-sub">3 идеи · обновлено вчера</div></div>
</div>
<div class="note-item">
<div class="doc-thumb">🎙</div>
<div class="item-main"><div class="item-title">Голос: «спросить у врача»</div><div class="item-sub">0:42 · сегодня 08:15</div></div>
</div>
<div class="note-item">
<div class="doc-thumb">📋</div>
<div class="item-main"><div class="item-title">Чек-лист на дачу</div><div class="item-sub">12 пунктов · 4 готово</div></div>
</div>
<div class="note-item">
<div class="doc-thumb">🍳</div>
<div class="item-main"><div class="item-title">Рецепт пирога от мамы</div><div class="item-sub">Семейная</div></div>
</div>
</div>
<!-- SHOPPING -->
<div class="content hidden" data-tab="shopping">
<div class="header"><h1><span class="emoji">🛒</span>Покупки</h1><div class="avatar">М</div></div>
<div class="widget">
<div class="widget-title">Список на эту неделю</div>
<div class="reminder-item"><div class="checkbox"></div><div class="reminder-text"><div class="reminder-title-r" style="font-weight:500">Молоко 2.5% · 2 л</div></div></div>
<div class="reminder-item"><div class="checkbox"></div><div class="reminder-text"><div class="reminder-title-r" style="font-weight:500">Хлеб серый</div></div></div>
<div class="reminder-item"><div class="checkbox checked">✓</div><div class="reminder-text"><div class="reminder-title-r checked-text" style="font-weight:500">Яблоки</div></div></div>
<div class="reminder-item"><div class="checkbox"></div><div class="reminder-text"><div class="reminder-title-r" style="font-weight:500">Парацетамол детский</div></div></div>
<div class="reminder-item"><div class="checkbox"></div><div class="reminder-text"><div class="reminder-title-r" style="font-weight:500">Тетради 12 листов × 3</div></div></div>
<div class="reminder-item"><div class="checkbox checked">✓</div><div class="reminder-text"><div class="reminder-title-r checked-text" style="font-weight:500">Шампунь</div></div></div>
<div class="reminder-item"><div class="checkbox"></div><div class="reminder-text"><div class="reminder-title-r" style="font-weight:500">Корм коту 1кг</div></div></div>
</div>
</div>
<!-- SCHOOL -->
<div class="content hidden" data-tab="school">
<div class="header"><h1><span class="emoji">🎒</span>Школа и сад</h1><div class="avatar">М</div></div>
<div class="chip-row"><div class="chip active">Алина (3 кл)</div><div class="chip">Тимур (сад)</div></div>
<div class="widget">
<div class="widget-title">📚 Расписание · Пятница</div>
<div class="reminder-item"><div class="reminder-icon icon-school">1</div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Математика</div><div class="reminder-meta">08:30–09:15</div></div></div>
<div class="reminder-item"><div class="reminder-icon icon-school">2</div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Русский язык</div><div class="reminder-meta">09:25–10:10</div></div></div>
<div class="reminder-item"><div class="reminder-icon icon-school">3</div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Физкультура</div><div class="reminder-meta">10:20–11:05 · форма!</div></div></div>
</div>
<div class="widget">
<div class="widget-title">📝 Домашка</div>
<div class="reminder-item"><div class="checkbox"></div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Мат. с.34 №5,6</div><div class="reminder-meta">К понедельнику</div></div></div>
<div class="reminder-item"><div class="checkbox"></div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Рус. упр. 142</div><div class="reminder-meta">К понедельнику</div></div></div>
</div>
<div class="widget" style="background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white">
<div class="widget-title" style="color: rgba(255,255,255,0.85)">✨ AI · Сгенерировать заявление</div>
<div style="font-size: 13px; margin: 8px 0; opacity: 0.95">По болезни · отпуск · освобождение от физкультуры</div>
<div class="ai-input" style="background: rgba(255,255,255,0.2)">
<span>📄</span><span>Создать за 5 секунд</span>
</div>
</div>
</div>
<!-- BIRTHDAY -->
<div class="content hidden" data-tab="bday">
<div class="header"><h1><span class="emoji">🎂</span>Дни рождения</h1><div class="avatar">М</div></div>
<div class="bday-item" style="background: linear-gradient(135deg, #f3d6ff, #ffe1d6)">
<div class="doc-thumb" style="background: white">👵</div>
<div class="item-main"><div class="item-title">Бабушка Айгуль</div><div class="item-sub">28 мая · через 6 дней · 67 лет</div></div>
<span class="item-right">🎁</span>
</div>
<div class="bday-item">
<div class="doc-thumb icon-birthday">👨</div>
<div class="item-main"><div class="item-title">Папа · Айбек</div><div class="item-sub">12 июня · через 21 день</div></div>
</div>
<div class="bday-item">
<div class="doc-thumb icon-birthday">👧</div>
<div class="item-main"><div class="item-title">Алина</div><div class="item-sub">3 июля · через 42 дня · 9 лет</div></div>
</div>
<div class="bday-item">
<div class="doc-thumb icon-birthday">👶</div>
<div class="item-main"><div class="item-title">Тимур</div><div class="item-sub">18 сентября · через 119 дней</div></div>
</div>
<div class="widget" style="margin-top: 12px">
<div class="widget-title">💡 Идеи подарков · Бабушка</div>
<div class="reminder-item"><div class="reminder-icon icon-birthday">🧣</div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Тёплый плед</div></div></div>
<div class="reminder-item"><div class="reminder-icon icon-birthday">📚</div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Книга «Сад на подоконнике»</div></div></div>
<div class="reminder-item"><div class="reminder-icon icon-birthday">🍰</div><div class="reminder-text"><div class="reminder-title-r" style="font-size:14px">Торт «Медовик» от Алины</div></div></div>
</div>
</div>
<!-- AI CHAT -->
<div class="content hidden" data-tab="ai">
<div class="header"><h1><span class="emoji">🤖</span>AI-помощник</h1><div class="avatar">М</div></div>
<div style="padding: 8px 4px">
<div class="ai-chat-bubble bot">Доброе утро, Зауреш! Я просмотрела семейный календарь — сегодня важных 3 дела.</div>
<div class="ai-chat-bubble user">Напомни записать Алину к стоматологу в пятницу в 15:00</div>
<div class="ai-chat-bubble bot">
✅ Создала напоминание:<br>
<b>«Записать Алину к стоматологу»</b><br>
📅 Пт 22 мая · 15:00<br>
🏥 категория: медицина<br>
<div class="ai-suggestion">Добавить в календарь?</div>
</div>
<div class="ai-chat-bubble user">Составь список покупок на неделю</div>
<div class="ai-chat-bubble bot">
По истории покупок и тому что у вас заканчивается:<br><br>
🥛 молоко · 🍞 хлеб · 🍎 яблоки<br>
💊 парацетамол детский · 📓 тетради ×3<br>
🐱 корм коту · 🧴 шампунь<br><br>
<div class="ai-suggestion">Добавить в «Покупки»</div>
</div>
<div class="ai-chat-bubble user">У Тимура температура 38</div>
<div class="ai-chat-bubble bot">
🌡 Понимаю. Включаю сценарий «ребёнок заболел»:<br><br>
⏰ напомню дать парацетамол через 4 часа<br>
📞 нашла педиатра в истории — записать?<br>
📋 готова справка-заявление для садика
<div class="ai-suggestion">Записать к врачу</div>
<div class="ai-suggestion">Создать заявление в сад</div>
</div>
</div>
</div>
<div class="fab" onclick="showToast('+ Новое напоминание')">+</div>
<div class="toast" id="toast">Готово</div>
<div class="nav">
<div class="nav-item active" data-nav="home" onclick="switchTab('home')"><div class="nav-icon">🏠</div><span>Главная</span></div>
<div class="nav-item" data-nav="calendar" onclick="switchTab('calendar')"><div class="nav-icon">📅</div><span>Календарь</span></div>
<div class="nav-item" data-nav="ai" onclick="switchTab('ai')"><div class="nav-icon">🤖</div><span>AI</span></div>
<div class="nav-item" data-nav="notes" onclick="switchTab('notes')"><div class="nav-icon">📝</div><span>Заметки</span></div>
<div class="nav-item" data-nav="more" onclick="switchTab('home')"><div class="nav-icon">≡</div><span>Ещё</span></div>
</div>
<div class="home-indicator"></div>
</div>
</div>
<div class="screen-label">Family Life Assistant · MVP mock</div>
</div>
<div class="legend">
<h2>🏡 Что показано</h2>
<p>Кликабельный прототип всех экранов MVP по PRD/TRD. Открой <kbd>index.html</kbd> в браузере.</p>
<h3>Экраны</h3>
<ul>
<li>🏠 Главная — виджеты «сегодня»</li>
<li>📅 Календарь — события по цветам ролей</li>
<li>💊 Медицина — визиты, лекарства, low-stock</li>
<li>📂 Документы — OCR, expiry-напоминания</li>
<li>💰 Финансы — платежи, авто-списания</li>
<li>📝 Заметки и 🛒 Покупки</li>
<li>🎒 Школа — расписание + AI заявления</li>
<li>🎂 Дни рождения + идеи подарков</li>
<li>🤖 AI-помощник — parseReminder, сценарии</li>
</ul>
<h3>Кликабельно</h3>
<ul>
<li>Нижняя навигация</li>
<li>Quick-grid на главной</li>
<li>AI-карточка → AI чат</li>
<li>FAB (+) → toast</li>
</ul>
<h3>Дальше</h3>
<p>Если зайдёт визуал — перенести в Flutter (Riverpod + Material 3, как в TRD §3.1). Цвета и компоненты уже подобраны по PRD §12.</p>
</div>
</div>
<script>
function switchTab(name) {
document.querySelectorAll('[data-tab]').forEach(el => el.classList.add('hidden'));
const target = document.querySelector(`[data-tab="${name}"]`);
if (target) target.classList.remove('hidden');
document.querySelectorAll('[data-nav]').forEach(el => el.classList.remove('active'));
const navMap = { home: 'home', calendar: 'calendar', ai: 'ai', notes: 'notes' };
const navTarget = document.querySelector(`[data-nav="${navMap[name] || 'more'}"]`);
if (navTarget) navTarget.classList.add('active');
document.querySelector(`[data-tab="${name}"]`).scrollTop = 0;
}
function showToast(msg) {
const t = document.getElementById('toast');
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 1800);
}
document.querySelectorAll('.checkbox').forEach(cb => {
cb.addEventListener('click', e => {
cb.classList.toggle('checked');
cb.textContent = cb.classList.contains('checked') ? '✓' : '';
const txt = cb.parentElement.querySelector('.reminder-title-r');
if (txt) txt.classList.toggle('checked-text');
});
});
document.querySelectorAll('.chip').forEach(ch => {
ch.addEventListener('click', e => {
ch.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
ch.classList.add('active');
});
});
document.querySelectorAll('.day').forEach(d => {
d.addEventListener('click', e => {
d.parentElement.querySelectorAll('.day').forEach(x => x.classList.remove('active'));
d.classList.add('active');
});
});
document.querySelectorAll('.ai-suggestion').forEach(s => {
s.addEventListener('click', () => showToast('✓ ' + s.textContent));
});
</script>
</body>
</html>