531 lines
16 KiB
HTML
531 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Моё расписание</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: 40px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 2.5rem;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
color: rgba(255,255,255,0.9);
|
|
font-size: 1.1rem;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.schedule-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.day-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.day-card.weekend {
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
}
|
|
|
|
.day-name {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: #667eea;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 2px solid #eee;
|
|
}
|
|
|
|
.day-card.weekend .day-name {
|
|
color: #764ba2;
|
|
}
|
|
|
|
.time-slot {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.day-card.weekend .time-slot {
|
|
border-bottom-color: rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.time-slot:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.time {
|
|
font-weight: 600;
|
|
color: #333;
|
|
min-width: 100px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.activity {
|
|
flex: 1;
|
|
color: #555;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.activity.work {
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.activity.sport {
|
|
color: #10b981;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.activity.english {
|
|
color: #f59e0b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.activity.commute {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.activity.sleep {
|
|
color: #8b5cf6;
|
|
}
|
|
|
|
.legend {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.legend h2 {
|
|
font-size: 1.3rem;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.legend-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.legend-color.work { background: #667eea; }
|
|
.legend-color.sport { background: #10b981; }
|
|
.legend-color.english { background: #f59e0b; }
|
|
.legend-color.commute { background: #6b7280; }
|
|
.legend-color.sleep { background: #8b5cf6; }
|
|
.legend-color.free { background: #e5e7eb; }
|
|
|
|
.legend-text {
|
|
color: #555;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.goals {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.goals h2 {
|
|
font-size: 1.3rem;
|
|
color: #333;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.goal-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.goal-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.goal-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.goal-text {
|
|
color: #555;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.schedule-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.legend-items {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>⏰ Моё продуктивное расписание</h1>
|
|
<p class="subtitle">Баланс работы, спорта и английского</p>
|
|
|
|
<div class="schedule-grid">
|
|
<!-- Понедельник -->
|
|
<div class="day-card">
|
|
<div class="day-name">Понедельник</div>
|
|
<div class="time-slot">
|
|
<span class="time">06:30 - 07:00</span>
|
|
<span class="activity sleep">☀️ Подъём, завтрак</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:00 - 07:30</span>
|
|
<span class="activity sport">🧘 Йога</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:30 - 08:30</span>
|
|
<span class="activity commute">🚗 Дорога до работы</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">08:30 - 17:30</span>
|
|
<span class="activity work">💼 Работа</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">17:30 - 18:30</span>
|
|
<span class="activity commute">🚗 Дорога домой</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">18:30 - 19:30</span>
|
|
<span class="activity">🍽 Ужин, отдых</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">19:30 - 20:00</span>
|
|
<span class="activity english">📚 Английский</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">20:00 - 22:30</span>
|
|
<span class="activity">😌 Свободное время</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">22:30 - 23:00</span>
|
|
<span class="activity sleep">🌙 Сон</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Вторник -->
|
|
<div class="day-card">
|
|
<div class="day-name">Вторник</div>
|
|
<div class="time-slot">
|
|
<span class="time">06:30 - 07:30</span>
|
|
<span class="activity sleep">☀️ Подъём, завтрак</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:30 - 08:30</span>
|
|
<span class="activity commute">🚗 Дорога до работы</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">08:30 - 17:30</span>
|
|
<span class="activity work">💼 Работа</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">17:30 - 18:30</span>
|
|
<span class="activity commute">🚗 Дорога домой</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">18:30 - 19:30</span>
|
|
<span class="activity">🍽 Ужин, отдых</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">19:30 - 20:30</span>
|
|
<span class="activity sport">🧘 Пилатес</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">20:30 - 21:00</span>
|
|
<span class="activity english">📚 Английский</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">21:00 - 22:30</span>
|
|
<span class="activity">😌 Свободное время</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">22:30 - 23:00</span>
|
|
<span class="activity sleep">🌙 Сон</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Среда -->
|
|
<div class="day-card">
|
|
<div class="day-name">Среда</div>
|
|
<div class="time-slot">
|
|
<span class="time">06:30 - 07:00</span>
|
|
<span class="activity sleep">☀️ Подъём, завтрак</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:00 - 07:30</span>
|
|
<span class="activity sport">🧘 Йога</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:30 - 08:30</span>
|
|
<span class="activity commute">🚗 Дорога до работы</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">08:30 - 17:30</span>
|
|
<span class="activity work">💼 Работа</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">17:30 - 18:30</span>
|
|
<span class="activity commute">🚗 Дорога домой</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">18:30 - 19:30</span>
|
|
<span class="activity">🍽 Ужин, отдых</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">19:30 - 20:00</span>
|
|
<span class="activity english">📚 Английский</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">20:00 - 22:30</span>
|
|
<span class="activity">😌 Свободное время</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">22:30 - 23:00</span>
|
|
<span class="activity sleep">🌙 Сон</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Четверг -->
|
|
<div class="day-card">
|
|
<div class="day-name">Четверг</div>
|
|
<div class="time-slot">
|
|
<span class="time">06:30 - 07:30</span>
|
|
<span class="activity sleep">☀️ Подъём, завтрак</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:30 - 08:30</span>
|
|
<span class="activity commute">🚗 Дорога до работы</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">08:30 - 17:30</span>
|
|
<span class="activity work">💼 Работа</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">17:30 - 18:30</span>
|
|
<span class="activity commute">🚗 Дорога домой</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">18:30 - 19:30</span>
|
|
<span class="activity">🍽 Ужин, отдых</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">19:30 - 20:30</span>
|
|
<span class="activity sport">🧘 Пилатес</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">20:30 - 21:00</span>
|
|
<span class="activity english">📚 Английский</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">21:00 - 22:30</span>
|
|
<span class="activity">😌 Свободное время</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">22:30 - 23:00</span>
|
|
<span class="activity sleep">🌙 Сон</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Пятница -->
|
|
<div class="day-card">
|
|
<div class="day-name">Пятница</div>
|
|
<div class="time-slot">
|
|
<span class="time">06:30 - 07:00</span>
|
|
<span class="activity sleep">☀️ Подъём, завтрак</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:00 - 07:30</span>
|
|
<span class="activity sport">🧘 Йога</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">07:30 - 08:30</span>
|
|
<span class="activity commute">🚗 Дорога до работы</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">08:30 - 17:30</span>
|
|
<span class="activity work">💼 Работа</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">17:30 - 18:30</span>
|
|
<span class="activity commute">🚗 Дорога домой</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">18:30 - 19:30</span>
|
|
<span class="activity">🍽 Ужин, отдых</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">19:30 - 20:00</span>
|
|
<span class="activity english">📚 Английский</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">20:00 - 23:00</span>
|
|
<span class="activity">🎉 Вечер отдыха</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">23:00 - 00:00</span>
|
|
<span class="activity sleep">🌙 Сон</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Суббота -->
|
|
<div class="day-card weekend">
|
|
<div class="day-name">Суббота</div>
|
|
<div class="time-slot">
|
|
<span class="time">08:00 - 09:00</span>
|
|
<span class="activity sleep">☀️ Поздний подъём</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">09:00 - 10:00</span>
|
|
<span class="activity">🍳 Неспешный завтрак</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">10:00 - 11:30</span>
|
|
<span class="activity sport">🧘 Йога / Пилатес</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">11:30 - 19:00</span>
|
|
<span class="activity">🎯 Личные дела, хобби, встречи</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">19:00 - 23:00</span>
|
|
<span class="activity">🍽 Ужин, отдых, развлечения</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">23:00 - 00:00</span>
|
|
<span class="activity sleep">🌙 Сон</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Воскресенье -->
|
|
<div class="day-card weekend">
|
|
<div class="day-name">Воскресенье</div>
|
|
<div class="time-slot">
|
|
<span class="time">08:00 - 09:00</span>
|
|
<span class="activity sleep">☀️ Поздний подъём</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">09:00 - 19:00</span>
|
|
<span class="activity">🎯 Отдых, семья, подготовка к неделе</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">19:00 - 22:00</span>
|
|
<span class="activity">🍽 Ужин, спокойный вечер</span>
|
|
</div>
|
|
<div class="time-slot">
|
|
<span class="time">22:00 - 23:00</span>
|
|
<span class="activity sleep">🌙 Сон</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<h2>📊 Легенда</h2>
|
|
<div class="legend-items">
|
|
<div class="legend-item">
|
|
<div class="legend-color work"></div>
|
|
<span class="legend-text">Работа</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color sport"></div>
|
|
<span class="legend-text">Спорт (йога/пилатес)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color english"></div>
|
|
<span class="legend-text">Английский</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color commute"></div>
|
|
<span class="legend-text">Дорога</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color sleep"></div>
|
|
<span class="legend-text">Сон</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color free"></div>
|
|
<span class="legend-text">Свободное время</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="goals">
|
|
<h2>🎯 Цели на неделю</h2>
|
|
<div class="goal-item">
|
|
<span class="goal-icon">💼</span>
|
|
<span class="goal-text">Работа: 08:30 - 17:30 (40 часов)</span>
|
|
</div>
|
|
<div class="goal-item">
|
|
<span class="goal-icon">🧘</span>
|
|
<span class="goal-text">Спорт: 4 тренировки (йога + пилатес)</span>
|
|
</div>
|
|
<div class="goal-item">
|
|
<span class="goal-icon">📚</span>
|
|
<span class="goal-text">Английский: 5 занятий по 30 минут (2.5 часа в неделю)</span>
|
|
</div>
|
|
<div class="goal-item">
|
|
<span class="goal-icon">😴</span>
|
|
<span class="goal-text">Сон: 7.5-8 часов ежедневно</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|