mirror of
https://github.com/fabrice404/olympics-calendar.git
synced 2025-12-25 14:39:10 +00:00
121 lines
4.2 KiB
HTML
121 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Paris 2024 - {{title}}</title>
|
|
<link href="https://fabrice404.github.io/olympics-calendar/style.css?refresh=20240730" rel="stylesheet">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Paris 2024 - {{title}}">
|
|
<meta name="keywords" content="Paris 2024 - {{title}}">
|
|
<meta name="author" content="Fabrice LAMANT">
|
|
|
|
<meta http-equiv="refresh" content="300">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="p-4">
|
|
<div class="navbar bg-base-100">
|
|
<div class="navbar-start">
|
|
<div class="dropdown">
|
|
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
|
|
</svg>
|
|
</div>
|
|
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
|
|
<li><a href="https://fabrice404.github.io/olympics-calendar/today.html">English</a></li>
|
|
<li><a href="https://fabrice404.github.io/olympics-calendar/ja/today.html">日本語</a></li>
|
|
<li><a href="https://fabrice404.github.io/olympics-calendar/ko/today.html">한국어</a></li>
|
|
<li><a href="https://fabrice404.github.io/olympics-calendar/ru/today.html">Русский</a></li>
|
|
<li><a href="https://fabrice404.github.io/olympics-calendar/zh/today.html">中文</a></li>
|
|
<li><a href="https://github.com/fabrice404/olympics-calendar">Source code</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-center">
|
|
<a class="btn btn-ghost text-xl" href="./">Paris 2024 - {{title}}</a>
|
|
</div>
|
|
<div class="navbar-end">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{{events}}
|
|
</div>
|
|
|
|
<div class="no-event my-10 text-center text-2xl hidden">
|
|
{{noEventToday}}
|
|
</div>
|
|
|
|
<div class="text-sm my-10 text-center">
|
|
{{disclaimer}}
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
const DateTime = luxon.DateTime;
|
|
const now = DateTime.now();
|
|
const noc = new URLSearchParams(window.location.search).get('noc');
|
|
|
|
let color = 0;
|
|
const cycleColor = () => {
|
|
color++
|
|
color = color % 5
|
|
console.log(color);
|
|
switch (color) {
|
|
case 0: return "blue";
|
|
case 1: return "yellow";
|
|
case 2: return "black";
|
|
case 3: return "green";
|
|
case 4: return "red";
|
|
}
|
|
};
|
|
|
|
document.querySelectorAll('.event').forEach((element) => {
|
|
const start = DateTime.fromISO(element.getAttribute('data-start'));
|
|
const end = DateTime.fromISO(element.getAttribute('data-end'));
|
|
const fifteenMinuteAgo = now.minus({ minutes: 15 });
|
|
const nocs = element.getAttribute('data-noc').split(",");
|
|
|
|
if (!noc || nocs.includes(noc)) {
|
|
if (now.day === start.day) {
|
|
element.querySelector(".time").textContent = start.toLocaleString(DateTime.TIME_24_SIMPLE);
|
|
if (end < now) {
|
|
if (end > fifteenMinuteAgo) {
|
|
element.classList.add(cycleColor());
|
|
element.classList.add('opacity-30');
|
|
} else {
|
|
element.remove();
|
|
}
|
|
} else {
|
|
element.classList.add(cycleColor());
|
|
if (now < start) {
|
|
element.classList.add('opacity-30');
|
|
}
|
|
}
|
|
} else {
|
|
element.remove();
|
|
}
|
|
} else {
|
|
element.remove();
|
|
}
|
|
});
|
|
document.querySelectorAll(`.competitor:not(.${noc})`).forEach((element) => {
|
|
element.remove();
|
|
});
|
|
if (document.querySelectorAll('.event').length === 0) {
|
|
document.querySelector('.no-event').classList.remove('hidden');
|
|
}
|
|
</script>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0KQC1F1K4H"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() { dataLayer.push(arguments); }
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-0KQC1F1K4H');
|
|
</script>
|
|
</body>
|