966 lines
35 KiB
HTML
966 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<title>Семейное расписание | Goals 2026</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 20px 16px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
text-align: center;
|
||
color: white;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.notification-banner {
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.notification-text {
|
||
flex: 1;
|
||
color: #333;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.btn {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn-success {
|
||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
}
|
||
|
||
.btn-orange {
|
||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 20px;
|
||
overflow-x: auto;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.tab {
|
||
background: rgba(255,255,255,0.2);
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 16px;
|
||
border-radius: 20px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tab.active {
|
||
background: white;
|
||
color: #667eea;
|
||
}
|
||
|
||
.goals-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.goal-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
border-top: 4px solid #667eea;
|
||
}
|
||
|
||
.goal-card.son { border-top-color: #3b82f6; }
|
||
.goal-card.daughter11 { border-top-color: #ec4899; }
|
||
.goal-card.daughter19 { border-top-color: #8b5cf6; }
|
||
.goal-card.daughter-older { border-top-color: #f59e0b; }
|
||
.goal-card.mom { border-top-color: #10b981; }
|
||
|
||
.goal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.goal-icon {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.goal-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.goal-target {
|
||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.goal-target-title {
|
||
font-size: 0.85rem;
|
||
color: #92400e;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.goal-target-text {
|
||
font-size: 0.95rem;
|
||
color: #78350f;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.goal-activities {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.activity-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 0.9rem;
|
||
color: #555;
|
||
}
|
||
|
||
.schedule-container {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.schedule-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.schedule-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.day-selector {
|
||
display: flex;
|
||
gap: 4px;
|
||
overflow-x: auto;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.day-btn {
|
||
background: #f3f4f6;
|
||
border: none;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: #6b7280;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.day-btn.active {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
|
||
.day-schedule {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.time-block {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background: #f9fafb;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.time-block.work { border-left-color: #667eea; }
|
||
.time-block.sport { border-left-color: #10b981; }
|
||
.time-block.english { border-left-color: #f59e0b; }
|
||
.time-block.family { border-left-color: #ec4899; }
|
||
.time-block.football { border-left-color: #3b82f6; }
|
||
.time-block.study { border-left-color: #8b5cf6; }
|
||
.time-block.music { border-left-color: #f472b6; }
|
||
.time-block.sleep { border-left-color: #6366f1; }
|
||
.time-block.commute { border-left-color: #9ca3af; }
|
||
|
||
.time-block-time {
|
||
font-weight: 700;
|
||
color: #333;
|
||
min-width: 90px;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.time-block-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.time-block-title {
|
||
font-weight: 600;
|
||
color: #333;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.time-block-desc {
|
||
font-size: 0.85rem;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.checkbox-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid #d1d5db;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.checkbox.checked {
|
||
background: #10b981;
|
||
border-color: #10b981;
|
||
}
|
||
|
||
.checkbox.checked::after {
|
||
content: '✓';
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.checkbox-label {
|
||
font-size: 0.85rem;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.location-section {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.location-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.location-card {
|
||
background: linear-gradient(135deg, #f8f9ff 0%, #eef0ff 100%);
|
||
border-radius: 10px;
|
||
padding: 16px;
|
||
border: 2px solid transparent;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.location-card.active {
|
||
border-color: #10b981;
|
||
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
||
}
|
||
|
||
.location-name {
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.location-details {
|
||
font-size: 0.85rem;
|
||
color: #6b7280;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.location-time {
|
||
display: inline-block;
|
||
background: rgba(16, 185, 129, 0.1);
|
||
color: #059669;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.progress-section {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.progress-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.progress-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.progress-label {
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.progress-percent {
|
||
font-size: 0.85rem;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 8px;
|
||
background: #e5e7eb;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 4px;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
.progress-fill.football { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
|
||
.progress-fill.english { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
|
||
.progress-fill.music { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
|
||
|
||
.add-to-home {
|
||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 24px;
|
||
border: 2px solid #f59e0b;
|
||
}
|
||
|
||
.add-to-home h3 {
|
||
color: #92400e;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.add-to-home p {
|
||
color: #78350f;
|
||
font-size: 0.9rem;
|
||
line-height: 1.5;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.add-to-home ol {
|
||
color: #78350f;
|
||
font-size: 0.85rem;
|
||
line-height: 1.8;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
color: rgba(255,255,255,0.8);
|
||
font-size: 0.85rem;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
h1 { font-size: 1.5rem; }
|
||
.notification-banner { flex-direction: column; text-align: center; }
|
||
.goals-grid { grid-template-columns: 1fr; }
|
||
.location-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>👨👩👧👦 Семейное расписание</h1>
|
||
<p class="subtitle">Наши цели на 2026 год</p>
|
||
</header>
|
||
|
||
<div class="notification-banner">
|
||
<p class="notification-text">🔔 Включите уведомления, чтобы получать напоминания о занятиях!</p>
|
||
<button class="btn" onclick="requestNotificationPermission()">Разрешить</button>
|
||
</div>
|
||
|
||
<div class="add-to-home" id="addToHome">
|
||
<h3>📱 Добавьте на главный экран телефона</h3>
|
||
<p>Чтобы получать уведомления и быстро открывать расписание:</p>
|
||
<ol>
|
||
<li>Нажмите «Поделиться» в браузере</li>
|
||
<li>Выберите «На экран "Домой"»</li>
|
||
<li>Приложение появится как иконка на телефоне</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<button class="tab active" onclick="showTab('goals')">🎯 Цели</button>
|
||
<button class="tab" onclick="showTab('schedule')">📅 Расписание</button>
|
||
<button class="tab" onclick="showTab('location')">📍 Локации</button>
|
||
<button class="tab" onclick="showTab('progress')">📊 Прогресс</button>
|
||
</div>
|
||
|
||
<div id="goals" class="tab-content">
|
||
<div class="goals-grid">
|
||
<div class="goal-card mom">
|
||
<div class="goal-header">
|
||
<span class="goal-icon">👩</span>
|
||
<div>
|
||
<div class="goal-title">Вы (мама)</div>
|
||
</div>
|
||
</div>
|
||
<div class="goal-target">
|
||
<div class="goal-target-title">🎯 Цель</div>
|
||
<div class="goal-target-text">Английский Advanced + баланс работа/спорт</div>
|
||
</div>
|
||
<div class="goal-activities">
|
||
<div class="activity-item">💼 Работа: 08:30 - 17:30</div>
|
||
<div class="activity-item">🧘 Йога/пилатес: 4 раза в неделю</div>
|
||
<div class="activity-item">📚 Английский: 30 мин ежедневно (пн-пт)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="goal-card son">
|
||
<div class="goal-header">
|
||
<span class="goal-icon">👦⚽</span>
|
||
<div>
|
||
<div class="goal-title">Сын (13 лет)</div>
|
||
</div>
|
||
</div>
|
||
<div class="goal-target">
|
||
<div class="goal-target-title">🎯 Цель</div>
|
||
<div class="goal-target-text">Академия «Атлетико Мадрид» Талгар</div>
|
||
</div>
|
||
<div class="goal-activities">
|
||
<div class="activity-item">⚽ Футбол: 5 тренировок в неделю</div>
|
||
<div class="activity-item">📐 Математика: углублённо (НИШ/БИЛ)</div>
|
||
<div class="activity-item">📚 Физика: подготовка</div>
|
||
<div class="activity-item">📖 Английский: для академии</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="goal-card daughter11">
|
||
<div class="goal-header">
|
||
<span class="goal-icon">👧🥋🎵</span>
|
||
<div>
|
||
<div class="goal-title">Дочь (11 лет)</div>
|
||
</div>
|
||
</div>
|
||
<div class="goal-target">
|
||
<div class="goal-target-title">🎯 Цель</div>
|
||
<div class="goal-target-text">НИШ/БИЛ + музыка + спорт</div>
|
||
</div>
|
||
<div class="goal-activities">
|
||
<div class="activity-item">🥋 Каратэ: тренировки</div>
|
||
<div class="activity-item">🏊 Плавание: 2-3 раза в неделю</div>
|
||
<div class="activity-item">🎵 Музыка: курсы (хороший слух)</div>
|
||
<div class="activity-item">📚 Математика+физика: для НИШ/БИЛ</div>
|
||
<div class="activity-item">❤️📚 Английский: с удовольствием</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="goal-card daughter19">
|
||
<div class="goal-header">
|
||
<span class="goal-icon">👩🎓🇬🇧📰</span>
|
||
<div>
|
||
<div class="goal-title">Дочь (19 лет)</div>
|
||
</div>
|
||
</div>
|
||
<div class="goal-target">
|
||
<div class="goal-target-title">🎯 Цель</div>
|
||
<div class="goal-target-text">Магистратура в Лондоне + работа на BBC</div>
|
||
</div>
|
||
<div class="goal-activities">
|
||
<div class="activity-item">🎓 Иняз, 3 курс, журналистика (отлично)</div>
|
||
<div class="activity-item">🌍 Международные проекты, гранты</div>
|
||
<div class="activity-item">📝 IELTS Academic: 7.5+ для магистратуры</div>
|
||
<div class="activity-item">📰 Портфолио: статьи, публикации, блог</div>
|
||
<div class="activity-item">🎤 Практика в СМИ, стажировки</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="goal-card daughter-older">
|
||
<div class="goal-header">
|
||
<span class="goal-icon">👩💻📰</span>
|
||
<div>
|
||
<div class="goal-title">Старшая дочь</div>
|
||
</div>
|
||
</div>
|
||
<div class="goal-target">
|
||
<div class="goal-target-title">🎯 Цель</div>
|
||
<div class="goal-target-text">Журналистика, университет</div>
|
||
</div>
|
||
<div class="goal-activities">
|
||
<div class="activity-item">🎓 Университет, журналистика</div>
|
||
<div class="activity-item">📝 Практика в СМИ</div>
|
||
<div class="activity-item">📚 Портфолио работ</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="schedule" class="tab-content" style="display: none;">
|
||
<div class="schedule-container">
|
||
<div class="schedule-header">
|
||
<h2 class="schedule-title">📅 Расписание на неделю</h2>
|
||
</div>
|
||
<div class="day-selector" id="daySelector"></div>
|
||
<div class="day-schedule" id="daySchedule"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="location" class="tab-content" style="display: none;">
|
||
<div class="location-section">
|
||
<h2 class="section-title">📍 Где находятся дети</h2>
|
||
<div class="location-grid" id="locationGrid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="progress" class="tab-content" style="display: none;">
|
||
<div class="progress-section">
|
||
<h2 class="section-title">📊 Прогресс недели</h2>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-header">
|
||
<span class="progress-label">⚽ Футбольные тренировки (сын)</span>
|
||
<span class="progress-percent" id="footballProgress">0/5</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill football" id="footballBar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<div class="checkbox" onclick="toggleCheckbox(this, 'football')"></div>
|
||
<span class="checkbox-label">Отметить тренировку</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-header">
|
||
<span class="progress-label">📚 Английский (вы)</span>
|
||
<span class="progress-percent" id="englishProgress">0/5</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill english" id="englishBar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<div class="checkbox" onclick="toggleCheckbox(this, 'english')"></div>
|
||
<span class="checkbox-label">Отметить занятие</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-header">
|
||
<span class="progress-label">🎵 Музыка (дочь 11 лет)</span>
|
||
<span class="progress-percent" id="musicProgress">0/3</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill music" id="musicBar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<div class="checkbox" onclick="toggleCheckbox(this, 'music')"></div>
|
||
<span class="checkbox-label">Отметить практику</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-header">
|
||
<span class="progress-label">🥋 Каратэ (дочь 11 лет)</span>
|
||
<span class="progress-percent" id="karateProgress">0/3</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="karateBar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<div class="checkbox" onclick="toggleCheckbox(this, 'karate')"></div>
|
||
<span class="checkbox-label">Отметить тренировку</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-header">
|
||
<span class="progress-label">🏊 Плавание (дочь 11 лет)</span>
|
||
<span class="progress-percent" id="swimProgress">0/3</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="swimBar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<div class="checkbox" onclick="toggleCheckbox(this, 'swim')"></div>
|
||
<span class="checkbox-label">Отметить тренировку</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-header">
|
||
<span class="progress-label">📝 IELTS (дочь 19 лет)</span>
|
||
<span class="progress-percent" id="ieltsProgress">0/5</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill english" id="ieltsBar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<div class="checkbox" onclick="toggleCheckbox(this, 'ielts')"></div>
|
||
<span class="checkbox-label">Отметить занятие</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-item">
|
||
<div class="progress-header">
|
||
<span class="progress-label">🧘 Йога/пилатес (вы)</span>
|
||
<span class="progress-percent" id="yogaProgress">0/4</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="yogaBar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<div class="checkbox" onclick="toggleCheckbox(this, 'yoga')"></div>
|
||
<span class="checkbox-label">Отметить тренировку</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>Создано с любовью для вашей семьи 💜</p>
|
||
<p style="margin-top: 8px;">Откройте в браузере телефона для уведомлений</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
const scheduleData = {
|
||
'Пн': [
|
||
{ time: '06:30-07:00', title: '☀️ Подъём, завтрак', type: 'sleep' },
|
||
{ time: '07:00-07:30', title: '🧘 Йога (мама)', type: 'sport' },
|
||
{ time: '07:30-08:30', title: '🚗 Дорога до работы/школы', type: 'commute' },
|
||
{ time: '08:30-17:30', title: '💼 Работа (мама) | 🏫 Школа (дети)', type: 'work' },
|
||
{ time: '17:30-18:30', title: '🚗 Дорога домой', type: 'commute' },
|
||
{ time: '18:30-19:30', title: '🍳 Приготовление ужина + время с детьми', type: 'family' },
|
||
{ time: '19:30-20:00', title: '🍽 Семейный ужин', type: 'family' },
|
||
{ time: '19:00-20:30', title: '🥋 Дочь (11): каратэ', type: 'sport' },
|
||
{ time: '20:00-21:00', title: '📐 Сын: математика+физика | 👧 Дочь (11): английский', type: 'study' },
|
||
{ time: '21:00-22:30', title: '👨👩👧👦 Время с семьёй', type: 'family' },
|
||
{ time: '22:30-23:00', title: '🌙 Сон', type: 'sleep' }
|
||
],
|
||
'Вт': [
|
||
{ time: '06:30-07:30', title: '☀️ Подъём, завтрак', type: 'sleep' },
|
||
{ time: '07:30-08:30', title: '🚗 Дорога до работы/школы', type: 'commute' },
|
||
{ time: '08:30-17:30', title: '💼 Работа (мама) | 🏫 Школа (дети)', type: 'work' },
|
||
{ time: '17:30-18:30', title: '🚗 Дорога домой', type: 'commute' },
|
||
{ time: '18:30-19:30', title: '🍳 Приготовление ужина', type: 'family' },
|
||
{ time: '19:00-20:30', title: '⚽ Сын: футбол | 🏊 Дочь (11): плавание', type: 'football' },
|
||
{ time: '19:30-20:00', title: '🍽 Семейный ужин', type: 'family' },
|
||
{ time: '20:30-21:00', title: '📚 Английский (мама)', type: 'english' },
|
||
{ time: '21:00-21:30', title: '🎵 Дочь (11): музыка (практика)', type: 'music' },
|
||
{ time: '21:30-22:30', title: '👨👩👧👦 Время с семьёй', type: 'family' },
|
||
{ time: '22:30-23:00', title: '🌙 Сон', type: 'sleep' }
|
||
],
|
||
'Ср': [
|
||
{ time: '06:30-07:00', title: '☀️ Подъём, завтрак', type: 'sleep' },
|
||
{ time: '07:00-07:30', title: '🧘 Йога (мама)', type: 'sport' },
|
||
{ time: '07:30-08:30', title: '🚗 Дорога до работы/школы', type: 'commute' },
|
||
{ time: '08:30-17:30', title: '💼 Работа (мама) | 🏫 Школа (дети)', type: 'work' },
|
||
{ time: '17:30-18:30', title: '🚗 Дорога домой', type: 'commute' },
|
||
{ time: '18:30-19:30', title: '🍳 Приготовление ужина + дети помогают', type: 'family' },
|
||
{ time: '19:00-20:30', title: '⚽ Сын: футбол | 🥋 Дочь (11): каратэ', type: 'football' },
|
||
{ time: '19:30-20:00', title: '🍽 Семейный ужин', type: 'family' },
|
||
{ time: '20:00-20:30', title: '📚 Английский (мама)', type: 'english' },
|
||
{ time: '20:30-21:30', title: '📐 Сын: математика+физика | 👧 Дочь (11): НИШ подготовка', type: 'study' },
|
||
{ time: '21:30-22:30', title: '👨👩👧👦 Время с семьёй (фильм/игры)', type: 'family' },
|
||
{ time: '22:30-23:00', title: '🌙 Сон', type: 'sleep' }
|
||
],
|
||
'Чт': [
|
||
{ time: '06:30-07:30', title: '☀️ Подъём, завтрак', type: 'sleep' },
|
||
{ time: '07:30-08:30', title: '🚗 Дорога до работы/школы', type: 'commute' },
|
||
{ time: '08:30-17:30', title: '💼 Работа (мама) | 🏫 Школа (дети)', type: 'work' },
|
||
{ time: '17:30-18:30', title: '🚗 Дорога домой', type: 'commute' },
|
||
{ time: '18:30-19:30', title: '🍳 Приготовление ужина', type: 'family' },
|
||
{ time: '19:30-20:00', title: '🍽 Семейный ужин', type: 'family' },
|
||
{ time: '19:30-20:30', title: '🧘 Пилатес (мама)', type: 'sport' },
|
||
{ time: '19:00-20:30', title: '⚽ Сын: футбол | 🏊 Дочь (11): плавание', type: 'football' },
|
||
{ time: '20:30-21:00', title: '📚 Английский (мама)', type: 'english' },
|
||
{ time: '21:00-21:30', title: '🎵 Дочь (11): музыка (практика)', type: 'music' },
|
||
{ time: '21:30-22:30', title: '👨👩👧👦 Время с семьёй', type: 'family' },
|
||
{ time: '22:30-23:00', title: '🌙 Сон', type: 'sleep' }
|
||
],
|
||
'Пт': [
|
||
{ time: '06:30-07:00', title: '☀️ Подъём, завтрак', type: 'sleep' },
|
||
{ time: '07:00-07:30', title: '🧘 Йога (мама)', type: 'sport' },
|
||
{ time: '07:30-08:30', title: '🚗 Дорога до работы/школы', type: 'commute' },
|
||
{ time: '08:30-17:30', title: '💼 Работа (мама) | 🏫 Школа (дети)', type: 'work' },
|
||
{ time: '17:30-18:30', title: '🚗 Дорога домой', type: 'commute' },
|
||
{ time: '18:30-19:30', title: '🍳 Приготовление ужина', type: 'family' },
|
||
{ time: '19:00-20:30', title: '⚽ Сын: футбол | 🥋 Дочь (11): каратэ', type: 'football' },
|
||
{ time: '19:30-20:00', title: '🍽 Семейный ужин', type: 'family' },
|
||
{ time: '20:00-20:30', title: '📚 Английский (мама) — неделя завершена!', type: 'english' },
|
||
{ time: '20:30-23:00', title: '🎉 Семейный вечер (пицца, фильм, игры)', type: 'family' },
|
||
{ time: '23:00-00:00', title: '🌙 Сон', type: 'sleep' }
|
||
],
|
||
'Сб': [
|
||
{ time: '08:00-09:00', title: '☀️ Поздний подъём', type: 'sleep' },
|
||
{ time: '09:00-10:00', title: '🍳 Семейный завтрак', type: 'family' },
|
||
{ time: '10:00-11:30', title: '🧘 Йога/пилатес (мама) + 🏊 Дочь (11): плавание', type: 'sport' },
|
||
{ time: '11:30-13:00', title: '🎵 Дочь (11): музыкальные курсы', type: 'music' },
|
||
{ time: '13:00-14:00', title: '🍽 Обед', type: 'family' },
|
||
{ time: '14:00-17:00', title: '👨👩👧👦 Семейное время (парк, музей, прогулка)', type: 'family' },
|
||
{ time: '17:00-18:00', title: '📐 Сын: математика (олимпиадные задачи) | 👧 Дочь: НИШ подготовка', type: 'study' },
|
||
{ time: '18:00-20:00', title: '🍳 Приготовление ужина + отдых', type: 'family' },
|
||
{ time: '20:00-23:00', title: '🍽 Ужин, отдых, развлечения', type: 'family' },
|
||
{ time: '23:00-00:00', title: '🌙 Сон', type: 'sleep' }
|
||
],
|
||
'Вс': [
|
||
{ time: '08:00-09:00', title: '☀️ Поздний подъём', type: 'sleep' },
|
||
{ time: '09:00-10:00', title: '🍳 Семейный завтрак', type: 'family' },
|
||
{ time: '10:00-12:00', title: '👨👩👧👦 Семейное время (церковь / прогулка / гости)', type: 'family' },
|
||
{ time: '12:00-13:00', title: '🍽 Обед', type: 'family' },
|
||
{ time: '13:00-15:00', title: '📚 Дети: уроки на неделю (НИШ/БИЛ подготовка)', type: 'study' },
|
||
{ time: '15:00-17:00', title: '📝 Дочь (19 лет): IELTS/портфолио для Лондона', type: 'study' },
|
||
{ time: '17:00-18:00', title: '⚽ Сын: футбол (Атлетико Мадрид Талгар - просмотр)', type: 'football' },
|
||
{ time: '18:00-20:00', title: '🍳 Приготовление ужина + планирование недели', type: 'family' },
|
||
{ time: '20:00-22:00', title: '👨👩👧👦 Спокойный семейный вечер', type: 'family' },
|
||
{ time: '22:00-23:00', title: '🌙 Сон', type: 'sleep' }
|
||
]
|
||
};
|
||
|
||
const locations = [
|
||
{ name: '🏫 Школа (сын 13 лет)', time: '08:30-17:00', status: 'active', details: 'Пн-Пт, учебные дни' },
|
||
{ name: '🏫 Школа (дочь 11 лет)', time: '08:30-17:00', status: 'active', details: 'Пн-Пт, учебные дни' },
|
||
{ name: '⚽ Футбол (сын)', time: '19:00-20:30', status: 'upcoming', details: 'Вт, Ср, Чт, Пт — Академия Атлетико Мадрид Талгар' },
|
||
{ name: '🥋 Каратэ (дочь 11 лет)', time: '19:00-20:30', status: 'upcoming', details: 'Пн, Ср, Пт' },
|
||
{ name: '🏊 Плавание (дочь 11 лет)', time: '19:00-20:00', status: 'upcoming', details: 'Вт, Чт, Сб' },
|
||
{ name: '🎵 Музыкальная школа (дочь 11 лет)', time: '11:30-13:00', status: 'upcoming', details: 'Вт, Чт, Сб' },
|
||
{ name: '🎓 Иняз (дочь 19 лет)', time: 'По расписанию', status: 'upcoming', details: '3 курс, журналистика, цель: Лондон' },
|
||
{ name: '💼 Работа (мама)', time: '08:30-17:30', status: 'active', details: 'Пн-Пт' }
|
||
];
|
||
|
||
const days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
|
||
let currentDay = 0;
|
||
let progress = { football: 0, english: 0, music: 0, yoga: 0, karate: 0, swim: 0, ielts: 0 };
|
||
|
||
function init() {
|
||
renderDaySelector();
|
||
renderSchedule(0);
|
||
renderLocations();
|
||
loadProgress();
|
||
checkNotificationPermission();
|
||
}
|
||
|
||
function renderDaySelector() {
|
||
const container = document.getElementById('daySelector');
|
||
container.innerHTML = days.map((day, i) =>
|
||
`<button class="day-btn ${i === currentDay ? 'active' : ''}" onclick="renderSchedule(${i})">${day}</button>`
|
||
).join('');
|
||
}
|
||
|
||
function renderSchedule(dayIndex) {
|
||
currentDay = dayIndex;
|
||
renderDaySelector();
|
||
|
||
const day = days[dayIndex];
|
||
const schedule = scheduleData[day];
|
||
const container = document.getElementById('daySchedule');
|
||
|
||
container.innerHTML = schedule.map(block => `
|
||
<div class="time-block ${block.type}">
|
||
<div class="time-block-time">${block.time}</div>
|
||
<div class="time-block-content">
|
||
<div class="time-block-title">${block.title}</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function renderLocations() {
|
||
const container = document.getElementById('locationGrid');
|
||
const now = new Date();
|
||
const hour = now.getHours();
|
||
const day = now.getDay();
|
||
|
||
container.innerHTML = locations.map(loc => {
|
||
const isActive = loc.status === 'active';
|
||
return `
|
||
<div class="location-card ${isActive ? 'active' : ''}">
|
||
<div class="location-name">${loc.name}</div>
|
||
<div class="location-details">${loc.details}</div>
|
||
<div class="location-time">${loc.time}</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
function toggleCheckbox(element, type) {
|
||
element.classList.toggle('checked');
|
||
const maxMap = { football: 5, english: 5, music: 3, yoga: 4, karate: 3, swim: 3, ielts: 5 };
|
||
const max = maxMap[type] || 5;
|
||
|
||
if (element.classList.contains('checked')) {
|
||
progress[type] = Math.min(progress[type] + 1, max);
|
||
} else {
|
||
progress[type] = Math.max(progress[type] - 1, 0);
|
||
}
|
||
|
||
updateProgress(type, max);
|
||
saveProgress();
|
||
}
|
||
|
||
function updateProgress(type, max) {
|
||
const percent = (progress[type] / max) * 100;
|
||
document.getElementById(`${type}Bar`).style.width = percent + '%';
|
||
document.getElementById(`${type}Progress`).textContent = `${progress[type]}/${max}`;
|
||
}
|
||
|
||
function saveProgress() {
|
||
localStorage.setItem('familyProgress', JSON.stringify(progress));
|
||
}
|
||
|
||
function loadProgress() {
|
||
const saved = localStorage.getItem('familyProgress');
|
||
if (saved) {
|
||
progress = JSON.parse(saved);
|
||
updateProgress('football', 5);
|
||
updateProgress('english', 5);
|
||
updateProgress('music', 3);
|
||
updateProgress('yoga', 4);
|
||
updateProgress('karate', 3);
|
||
updateProgress('swim', 3);
|
||
updateProgress('ielts', 5);
|
||
}
|
||
}
|
||
|
||
function showTab(tabName) {
|
||
document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
|
||
document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
|
||
|
||
document.getElementById(tabName).style.display = 'block';
|
||
event.target.classList.add('active');
|
||
|
||
if (tabName === 'location') {
|
||
renderLocations();
|
||
}
|
||
}
|
||
|
||
function requestNotificationPermission() {
|
||
if ('Notification' in window) {
|
||
Notification.requestPermission().then(permission => {
|
||
if (permission === 'granted') {
|
||
document.querySelector('.notification-banner').innerHTML =
|
||
'<p class="notification-text">✅ Уведомления включены! Вы будете получать напоминания.</p>';
|
||
new Notification('Семейное расписание', {
|
||
body: 'Уведомления успешно включены!',
|
||
icon: '🔔'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function checkNotificationPermission() {
|
||
if ('Notification' in window && Notification.permission === 'granted') {
|
||
document.querySelector('.notification-banner').innerHTML =
|
||
'<p class="notification-text">✅ Уведомления включены</p>';
|
||
}
|
||
}
|
||
|
||
function sendNotification(title, body) {
|
||
if ('Notification' in window && Notification.permission === 'granted') {
|
||
new Notification(title, {
|
||
body: body,
|
||
icon: '🔔'
|
||
});
|
||
}
|
||
}
|
||
|
||
init();
|
||
</script>
|
||
</body>
|
||
</html>
|