363 lines
12 KiB
HTML
363 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Дневник режима рабочего дня</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
min-height: 100vh;
|
||
color: #e4e4e7;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(24px, 4vw, 36px);
|
||
color: #00b8cc;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #8a8a92;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 15px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #00b8cc;
|
||
}
|
||
|
||
.stat-label {
|
||
color: #8a8a92;
|
||
font-size: 14px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.timeline {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.timeline-bar {
|
||
display: flex;
|
||
height: 60px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
min-width: 800px;
|
||
}
|
||
|
||
.timeline-segment {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: white;
|
||
transition: opacity 0.2s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.timeline-segment:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.segment-morning { background: linear-gradient(135deg, #f39c12, #e67e22); }
|
||
.segment-work { background: linear-gradient(135deg, #3498db, #2980b9); }
|
||
.segment-lunch { background: linear-gradient(135deg, #2ecc71, #27ae60); }
|
||
.segment-evening { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
|
||
.segment-sleep { background: linear-gradient(135deg, #34495e, #2c3e50); }
|
||
|
||
.table-container {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th {
|
||
background: rgba(0, 184, 204, 0.2);
|
||
padding: 15px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: #00b8cc;
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
td {
|
||
padding: 15px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
tr:hover {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
}
|
||
|
||
.time-cell {
|
||
font-weight: 600;
|
||
color: #00b8cc;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.activity-cell {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.duration-cell {
|
||
color: #8a8a92;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.block-label {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.block-morning { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
|
||
.block-work { background: rgba(52, 152, 219, 0.2); color: #3498db; }
|
||
.block-lunch { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
|
||
.block-evening { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
|
||
.block-sleep { background: rgba(52, 73, 94, 0.2); color: #7f8c8d; }
|
||
|
||
.criteria {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.criteria h2 {
|
||
color: #00b8cc;
|
||
font-size: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.criteria-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.criteria-list li {
|
||
padding: 10px 0;
|
||
padding-left: 30px;
|
||
position: relative;
|
||
color: #e4e4e7;
|
||
}
|
||
|
||
.criteria-list li::before {
|
||
content: "✓";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #2ecc71;
|
||
font-weight: bold;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.timeline {
|
||
padding: 10px;
|
||
}
|
||
|
||
.timeline-segment {
|
||
font-size: 10px;
|
||
}
|
||
|
||
th, td {
|
||
padding: 10px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>📅 Дневник режима рабочего дня</h1>
|
||
<p class="subtitle">Пятидневная рабочая неделя • 09:00–18:00</p>
|
||
</header>
|
||
|
||
<div class="stats">
|
||
<div class="stat-card">
|
||
<div class="stat-value">8 ч</div>
|
||
<div class="stat-label">Рабочее время</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">7.5 ч</div>
|
||
<div class="stat-label">Ночной сон</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">1 ч</div>
|
||
<div class="stat-label">Обед</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">1.2 ч</div>
|
||
<div class="stat-label">Физ. активность</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">2.5 ч</div>
|
||
<div class="stat-label">Свободное время</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<h2 style="color: #00b8cc; font-size: 18px; margin-bottom: 15px;">Визуальная шкала дня</h2>
|
||
<div class="timeline-bar">
|
||
<div class="timeline-segment segment-morning" style="width: 10%;" title="06:30–08:30">06:30–08:30</div>
|
||
<div class="timeline-segment segment-work" style="width: 33%;" title="09:00–13:00">09:00–13:00</div>
|
||
<div class="timeline-segment segment-lunch" style="width: 7%;" title="13:00–14:00">Обед</div>
|
||
<div class="timeline-segment segment-work" style="width: 27%;" title="14:00–18:00">14:00–18:00</div>
|
||
<div class="timeline-segment segment-evening" style="width: 15%;" title="18:00–23:00">Вечер</div>
|
||
<div class="timeline-segment segment-sleep" style="width: 8%;" title="23:00–06:30">Сон</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Время</th>
|
||
<th>Деятельность</th>
|
||
<th>Продолжительность</th>
|
||
<th>Примечание</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="schedule-body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="criteria">
|
||
<h2>✅ Критерии выполнения</h2>
|
||
<ul class="criteria-list">
|
||
<li>Рабочий график 09:00–18:00 соблюдён</li>
|
||
<li>Дорога на работу и домой по 30 минут</li>
|
||
<li>Обед с 13:00 до 14:00 (1 час)</li>
|
||
<li>Утренняя зарядка 20 минут</li>
|
||
<li>Завтрак с приготовлением (45 минут)</li>
|
||
<li>Ужин с приготовлением (70 минут)</li>
|
||
<li>Вечерняя прогулка 50 минут</li>
|
||
<li>Утренняя и вечерняя личная гигиена</li>
|
||
<li>Свободное время для отдыха и хобби</li>
|
||
<li>Ночной сон 7.5 часов (23:00–06:30)</li>
|
||
<li>Режим реалистичен для пятидневной недели</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const schedule = [
|
||
{ block: "morning", time: "06:30–06:40", activity: "Подъём и пробуждение", duration: "10 мин", note: "Плавное начало дня" },
|
||
{ block: "morning", time: "06:40–07:00", activity: "Утренняя зарядка", duration: "20 мин", note: "Разминка, растяжка" },
|
||
{ block: "morning", time: "07:00–07:20", activity: "Душ и личная гигиена", duration: "20 мин", note: "Свежесть и бодрость" },
|
||
{ block: "morning", time: "07:20–07:45", activity: "Приготовление завтрака", duration: "25 мин", note: "Полноценный завтрак" },
|
||
{ block: "morning", time: "07:45–08:05", activity: "Приём завтрака", duration: "20 мин", note: "Спокойный приём пищи" },
|
||
{ block: "morning", time: "08:05–08:30", activity: "Сборы на работу", duration: "25 мин", note: "Одежда, вещи, проверка" },
|
||
{ block: "morning", time: "08:30–09:00", activity: "Дорога на работу", duration: "30 мин", note: "Прибытие к 09:00" },
|
||
{ block: "work", time: "09:00–13:00", activity: "Рабочее время", duration: "4 ч", note: "Основная рабочая смена" },
|
||
{ block: "lunch", time: "13:00–14:00", activity: "Обеденный перерыв", duration: "1 ч", note: "Отдых и питание" },
|
||
{ block: "work", time: "14:00–18:00", activity: "Рабочее время", duration: "4 ч", note: "Вторая половина дня" },
|
||
{ block: "evening", time: "18:00–18:30", activity: "Дорога домой", duration: "30 мин", note: "Возвращение с работы" },
|
||
{ block: "evening", time: "18:30–19:00", activity: "Отдых после работы", duration: "30 мин", note: "Переключение режима" },
|
||
{ block: "evening", time: "19:00–19:40", activity: "Приготовление ужина", duration: "40 мин", note: "Готовка дома" },
|
||
{ block: "evening", time: "19:40–20:10", activity: "Приём ужина", duration: "30 мин", note: "Семейный ужин" },
|
||
{ block: "evening", time: "20:10–20:40", activity: "Свободное время / бытовые дела", duration: "30 мин", note: "Домашние дела" },
|
||
{ block: "evening", time: "20:40–21:30", activity: "Вечерняя прогулка", duration: "50 мин", note: "Свежий воздух, активность" },
|
||
{ block: "evening", time: "21:30–22:00", activity: "Личное время", duration: "30 мин", note: "Хобби, чтение, отдых" },
|
||
{ block: "evening", time: "22:00–22:30", activity: "Вечерняя гигиена и уход", duration: "30 мин", note: "Подготовка ко сну" },
|
||
{ block: "evening", time: "22:30–23:00", activity: "Подготовка ко сну", duration: "30 мин", note: "Расслабление, ритуалы" },
|
||
{ block: "sleep", time: "23:00–06:30", activity: "Ночной сон", duration: "7.5 ч", note: "Полноценный отдых" }
|
||
];
|
||
|
||
const blockLabels = {
|
||
morning: "Утро",
|
||
work: "Работа",
|
||
lunch: "Обед",
|
||
evening: "Вечер",
|
||
sleep: "Сон"
|
||
};
|
||
|
||
function renderSchedule() {
|
||
const tbody = document.getElementById("schedule-body");
|
||
let currentBlock = null;
|
||
|
||
schedule.forEach((item, index) => {
|
||
if (item.block !== currentBlock) {
|
||
currentBlock = item.block;
|
||
const row = document.createElement("tr");
|
||
row.innerHTML = `
|
||
<td colspan="4">
|
||
<span class="block-label block-${currentBlock}">${blockLabels[currentBlock]}</span>
|
||
</td>
|
||
`;
|
||
tbody.appendChild(row);
|
||
}
|
||
|
||
const row = document.createElement("tr");
|
||
row.innerHTML = `
|
||
<td class="time-cell">${item.time}</td>
|
||
<td class="activity-cell">${item.activity}</td>
|
||
<td class="duration-cell">${item.duration}</td>
|
||
<td class="duration-cell">${item.note}</td>
|
||
`;
|
||
tbody.appendChild(row);
|
||
});
|
||
}
|
||
|
||
renderSchedule();
|
||
</script>
|
||
</body>
|
||
</html>
|