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

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);
+})();

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
+})();