<!DOCTYPE html>
<html lang=”uk”>
<head>
<meta charset=”UTF-8″>
<title>Ранок у Патріка</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
margin: 0;
background: linear-gradient(to bottom, #cceeff, #ffffff); /* ранкове небо */
}
h1 {
text-align: center;
margin-top: 20px;
}
.timeline {
position: relative;
height: 180px;
margin: 50px auto;
width: 90%;
}
.segment {
position: absolute;
top: 60px;
height: 20px;
border-radius: 10px;
}
.checkpoint {
position: absolute;
top: 55px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
transform: translateX(-50%);
}
.checkpoint-label {
position: absolute;
font-size: 12px;
text-align: center;
width: 110px;
line-height: 1.2;
transform: translateX(-50%);
}
.hero {
position: absolute;
top: 0px;
width: 50px;
height: 50px;
background-image: url(‘https://pogorelovtales.com/wp-content/uploads/2025/05/20250514_233447.png’);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: left 1s linear;
}
</style>
</head>
<body>
<h1>Ранок у Патріка</h1>
<div class=”timeline” id=”timeline”>
<div class=”hero” id=”hero”></div>
</div>
<!– Звук переходу –>
<audio id=”transitionSound” preload=”auto”>
<source src=”https://cdn.pixabay.com/download/audio/2022/03/15/audio_c29f5a3001.mp3?filename=message-pop-alert-123106.mp3″ type=”audio/mpeg”>
</audio>
<script>
const tasks = [
{ name: ‘Прокидання’, start: ’06:45′, end: ’06:50′, color: ‘#a2d2ff’ },
{ name: ‘Руханка’, start: ’06:50′, end: ’07:00′, color: ‘#b5e48c’ },
{ name: ‘Сніданок’, start: ’07:00′, end: ’07:15′, color: ‘#fef9a7’ },
{ name: ‘Вмивання і одягання’, start: ’07:15′, end: ’07:45′, color: ‘#ffb570’ },
{ name: ‘Вихід до школи’, start: ’07:45′, end: ’07:45′, color: ‘#ffc6ff’ }
];
const checkpointColors = [‘#ff4d6d’, ‘#48cae4’, ‘#ffd166’, ‘#06d6a0’, ‘#f72585’, ‘#8ecae6’];
const timeline = document.getElementById(‘timeline’);
const hero = document.getElementById(‘hero’);
const sound = document.getElementById(‘transitionSound’);
const totalStart = 6 * 60 + 45;
const totalEnd = 7 * 60 + 45;
const totalMinutes = totalEnd – totalStart;
function parseTime(t) {
const [h, m] = t.split(‘:’).map(Number);
return h * 60 + m;
}
// Малюємо сегменти, точки та підписи
tasks.forEach((task, index) => {
const start = parseTime(task.start);
const end = parseTime(task.end);
const startPercent = ((start – totalStart) / totalMinutes) * 100;
const widthPercent = ((end – start) / totalMinutes) * 100;
if (widthPercent > 0) {
const segment = document.createElement(‘div’);
segment.className = ‘segment’;
segment.style.left = `${startPercent}%`;
segment.style.width = `${widthPercent}%`;
segment.style.background = task.color;
timeline.appendChild(segment);
}
const checkpoint = document.createElement(‘div’);
checkpoint.className = ‘checkpoint’;
checkpoint.style.left = `${startPercent}%`;
checkpoint.style.background = checkpointColors[index % checkpointColors.length];
timeline.appendChild(checkpoint);
const label = document.createElement(‘div’);
label.className = ‘checkpoint-label’;
label.style.left = `${startPercent}%`;
label.style.top = `${95 + 25 * (index % 3)}px`; // 3 рівні
label.innerText = task.start + ‘\n’ + task.name;
timeline.appendChild(label);
});
// Відстеження зони для звуку
let lastZoneIndex = -1;
function updateHero() {
const now = new Date();
const minutesNow = now.getHours() * 60 + now.getMinutes();
const progress = Math.min(Math.max((minutesNow – totalStart) / totalMinutes, 0), 1);
const percent = progress * 100;
hero.style.left = `${percent}%`;
const currentZone = tasks.findIndex(task => {
const start = parseTime(task.start);
const end = parseTime(task.end);
return minutesNow >= start && minutesNow < end;
});
if (currentZone !== -1 && currentZone !== lastZoneIndex) {
sound.play().catch(() => {});
lastZoneIndex = currentZone;
}
}
updateHero();
setInterval(updateHero, 60000);
</script>
</body>
</html>
