From c164c592fa836a072920df675e9157811f611b4d Mon Sep 17 00:00:00 2001
From: xbl <xbl@6bit.ch>
Date: Thu, 16 Apr 2026 20:27:39 +0200
Subject: [PATCH] modified:   app.py new file:   static/js/fullscreen.js new
 file:   static/js/idle.js modified:   templates/about.html modified:  
 templates/inactive.html modified:   templates/profiles.html modified:  
 templates/quiz.html modified:   templates/result.html new file:  
 templates/video.html

---
 app.py                  |  4 +++
 static/js/fullscreen.js | 34 ++++++++++++++++++++++
 static/js/idle.js       | 16 +++++++++++
 templates/about.html    |  2 ++
 templates/inactive.html |  2 ++
 templates/profiles.html |  2 ++
 templates/quiz.html     |  2 ++
 templates/result.html   |  2 ++
 templates/video.html    | 63 +++++++++++++++++++++++++++++++++++++++++
 9 files changed, 127 insertions(+)
 create mode 100644 static/js/fullscreen.js
 create mode 100644 static/js/idle.js
 create mode 100644 templates/video.html

diff --git a/app.py b/app.py
index 0632b87..17b2568 100755
--- a/app.py
+++ b/app.py
@@ -55,3 +55,7 @@ def result():
 
 if __name__ == "__main__":
     app.run(host='localhost', port=1337, debug=False)
+
+@app.route("/video")
+def video():
+    return render_template("video.html")
diff --git a/static/js/fullscreen.js b/static/js/fullscreen.js
new file mode 100644
index 0000000..5c5e9dc
--- /dev/null
+++ b/static/js/fullscreen.js
@@ -0,0 +1,34 @@
+(function () {
+  const btn = document.createElement('button');
+  btn.id = 'fsBtn';
+  btn.textContent = '⛶';
+  btn.title = 'Follscreen';
+  btn.style.cssText = `
+    position: fixed;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 99999;
+    background: transparent;
+    border: none;
+    color: rgba(255,255,255,0.1337);
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    transition: color 0.2s;
+  `;
+  btn.onmouseenter = () => btn.style.color = 'rgba(255,255,255,0.42)';
+  btn.onmouseleave = () => btn.style.color = 'rgba(255,255,255,0.1337)';
+  btn.onclick = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      btn.textContent = '✕';
+    } else {
+      document.exitFullscreen();
+      btn.textContent = '⛶';
+    }
+  };
+  document.addEventListener('fullscreenchange', () => {
+    btn.textContent = document.fullscreenElement ? '✕' : '⛶';
+  });
+  document.body.appendChild(btn);
+})();
diff --git a/static/js/idle.js b/static/js/idle.js
new file mode 100644
index 0000000..b2f5998
--- /dev/null
+++ b/static/js/idle.js
@@ -0,0 +1,16 @@
+(function () {
+  const TIMEOUT_MS = 5 * 60 * 1000;
+  let timer;
+
+  function reset() {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      window.location.href = '/video';
+    }, TIMEOUT_MS);
+  }
+
+  ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll', 'pointerdown']
+    .forEach(evt => document.addEventListener(evt, reset, { passive: true }));
+
+  reset(); // start the clock on page load
+})();
diff --git a/templates/about.html b/templates/about.html
index 8e4349a..3a6a398 100755
--- a/templates/about.html
+++ b/templates/about.html
@@ -38,5 +38,7 @@
 		</div>
     	</div>
     </div>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>
diff --git a/templates/inactive.html b/templates/inactive.html
index 72deeb1..5666133 100755
--- a/templates/inactive.html
+++ b/templates/inactive.html
@@ -135,5 +135,7 @@
   };
 </script>
 <script src="{{ url_for('static', filename='js/inactive.js') }}"></script>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>
diff --git a/templates/profiles.html b/templates/profiles.html
index 5d1a558..c298920 100755
--- a/templates/profiles.html
+++ b/templates/profiles.html
@@ -97,6 +97,8 @@
             });
         });
     </script>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>
 
diff --git a/templates/quiz.html b/templates/quiz.html
index 33a7815..bff9755 100755
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -63,5 +63,7 @@
             else if (nextValue === 80) card.classList.add("emphasis");
         }
     </script>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>
diff --git a/templates/result.html b/templates/result.html
index 0c7e1a2..1fc4a10 100755
--- a/templates/result.html
+++ b/templates/result.html
@@ -295,5 +295,7 @@
     fire(rightOrigin);
   });
 </script>
+<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
 </body>
 </html>
diff --git a/templates/video.html b/templates/video.html
new file mode 100644
index 0000000..46fe3e4
--- /dev/null
+++ b/templates/video.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>cannamatch</title>
+  <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
+
+    .video-wrapper {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    video {
+      height: 100%;
+      width: calc(100vh * 9 / 16);
+      object-fit: cover;
+    }
+
+    .btn-row {
+      position: fixed;
+      bottom: 2rem;
+      left: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      z-index: 10;
+    }
+
+    .btn-row a {
+      padding: 0.75rem 1.75rem;
+      background: #BFB531;
+      color: #000;
+      font-family: Arial, sans-serif;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 8px;
+      text-decoration: none;
+    }
+
+    .btn-row a:hover { background: #fff; }
+  </style>
+</head>
+<body>
+  <div class="video-wrapper">
+    <video src="{{ url_for('static', filename='video.mp4') }}"
+           autoplay muted loop playsinline></video>
+  </div>
+
+  <div class="btn-row">
+    <a href="{{ url_for('quiz') }}">Quiz</a>
+    <a href="{{ url_for('inactive') }}">Interactive</a>
+  </div>
+</body>
+<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+</html>