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:
commit
be5fb227e7
886
index.html
Normal file
886
index.html
Normal 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>
|
||||
Reference in New Issue
Block a user