2023-09-25 01:04:03 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang='en'>
|
|
|
|
|
<head>
|
|
|
|
|
<title>{title}</title>
|
2023-10-14 16:13:32 +00:00
|
|
|
<link href="../images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
|
|
|
|
|
<link href="../../images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
|
2023-09-25 01:04:03 +00:00
|
|
|
|
|
|
|
|
<!-- for code formatting -->
|
2023-10-14 16:13:32 +00:00
|
|
|
<link rel="stylesheet" href="../templates/hybrid.min.css">
|
2023-09-28 20:03:10 +00:00
|
|
|
<link rel="stylesheet" href="../../templates/hybrid.min.css">
|
2023-10-14 16:13:32 +00:00
|
|
|
<script src="../templates/highlight.min.js"></script>
|
2023-09-28 20:03:10 +00:00
|
|
|
<script src="../../templates/highlight.min.js"></script>
|
2023-09-25 01:04:03 +00:00
|
|
|
<script>hljs.highlightAll()</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
{body}
|
|
|
|
|
</body>
|
|
|
|
|
<style>
|
|
|
|
|
section.slide {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%) scale(3);
|
|
|
|
|
}
|
2024-02-02 14:39:53 +00:00
|
|
|
ol, ul {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2024-02-10 18:25:34 +00:00
|
|
|
img{
|
|
|
|
|
display: block;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
max-width: 40%;
|
|
|
|
|
max-height: 40%;
|
|
|
|
|
}
|
2023-09-25 01:04:03 +00:00
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
let slide_number = 0;
|
|
|
|
|
let slide_max = 0;
|
|
|
|
|
|
|
|
|
|
for (let section of document.querySelectorAll("section.slide")) {
|
|
|
|
|
let number = parseInt(section.id, 10);
|
|
|
|
|
if (number > slide_max) {
|
|
|
|
|
slide_max = number;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
slide_next = (change) => {
|
|
|
|
|
// make old hidden
|
|
|
|
|
document.getElementById(`${slide_number}`).style.display = "none";
|
|
|
|
|
|
|
|
|
|
// make the change
|
|
|
|
|
let slide_number_new = slide_number + change;
|
|
|
|
|
if (slide_number_new >= 0 && slide_number_new <= slide_max) {
|
|
|
|
|
slide_number += change;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// make current visible
|
|
|
|
|
document.getElementById(`${slide_number}`).style.display = "block";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// add event listner
|
|
|
|
|
onkeydown = (event) => {
|
|
|
|
|
if (event.key === "ArrowRight" || event.key === "ArrowDown") {
|
|
|
|
|
slide_next(1);
|
|
|
|
|
}
|
|
|
|
|
if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
|
|
|
|
|
slide_next(-1);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
on_events = (clickTargetWidth, xCoordInClickTarget) => {
|
|
|
|
|
if (clickTargetWidth / 2 > xCoordInClickTarget) {
|
|
|
|
|
slide_next(-1);
|
|
|
|
|
} else {
|
|
|
|
|
slide_next(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ontouchstart = (event) => {
|
|
|
|
|
on_events(event.target.offsetWidth, event.touches[0].clientX - event.target.getBoundingClientRect().left);
|
|
|
|
|
};
|
|
|
|
|
// show the first slide
|
|
|
|
|
slide_next(0)
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
