feat: fleshed out the rest of teh skynet powerpoints

2023-09-25 02:04:03 +01:00 · 2023-09-25 02:04:03 +01:00 · 5c4a61542c
commit 5c4a61542c
parent 43b778d832
6 changed files with 1740 additions and 4 deletions
--- a/src/templates/powerpoint.html
+++ b/src/templates/powerpoint.html
@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <title>{title}</title>
+
+    <!-- for code formatting -->
+    <link rel="stylesheet" href="../templates/hybrid.min.css">
+    <script src="../templates/highlight.min.js"></script>
+    <script>hljs.highlightAll()</script>
+  </head>
+  <body>
+{body}
+  </body>
+  <style>
+    section.slide {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(3);
+    }
+  </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);
+      }
+    }
+
+    onclick = (event) => {
+      on_events(event.target.offsetWidth, event.clientX - event.target.getBoundingClientRect().left);
+    };
+    ontouchstart = (event) => {
+      on_events(event.target.offsetWidth, event.touches[0].clientX - event.target.getBoundingClientRect().left);
+    };
+    // show the first slide
+    slide_next(0)
+  </script>
+</html>