<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Віджет днів війни</title>
<style>
/* Стилі для віджета */
.war-widget {
border: 1px solid #ccc;
padding: 20px;
max-width: 300px;
text-align: center;
font-family: Arial, sans-serif;
}
.war-widget img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.days-count {
font-size: 24px;
font-weight: bold;
color: #0057B7; /* Синій колір, як у прапорі України */
}
</style>
</head>
<body>
<!-- Контейнер віджета -->
<div class="war-widget" id="warWidget">
<!-- Зображення (як приклад, прапор України) -->
<img src="https://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Ukraine.svg" alt="Прапор України">
<!-- Заголовок віджета -->
<h2>Війна в Україні</h2>
<!-- Елемент для відображення кількості днів -->
<p>Пройшло днів: <span class="days-count" id="daysCount">0</span></p>
</div>
<script>
// Функція для підрахунку днів від початку війни
function calculateDaysSinceWar() {
// Дата початку війни: 24 лютого 2022 року
const warStartDate = new Date('2022-02-24');
// Поточна дата
const currentDate = new Date();
// Різниця в мілісекундах між датами
const timeDifference = currentDate - warStartDate;
// Переведення мілісекунд у дні (1 день = 86,400,000 мс)
const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
// Оновлення тексту у віджеті
document.getElementById('daysCount').textContent = daysDifference;
}
// Виклик функції при завантаженні сторінки
window.onload = calculateDaysSinceWar;
</script>
</body>
</html>