From 85d3b2a7bab566bcf8ccda857bc7dbe3d545f377 Mon Sep 17 00:00:00 2001
From: Johannes <labahn@Optimal-systems.org>
Date: Fri, 13 Mar 2026 21:51:47 +0100
Subject: [PATCH] add fullscreen button

---
 static/app.js     | 15 +++++++++++++++
 static/index.html |  1 +
 static/style.css  | 19 +++++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/static/app.js b/static/app.js
index 94debe7..4b4d6f7 100644
--- a/static/app.js
+++ b/static/app.js
@@ -18,6 +18,7 @@ const recents_list   = document.getElementById("recents_list");
 const img_track      = document.getElementById("img_track");
 const img_counter    = document.getElementById("img_counter");
 const back_btn       = document.getElementById("back_btn");
+const fs_btn         = document.getElementById("fs_btn");
 const arrow_left     = document.getElementById("arrow_left");
 const arrow_right    = document.getElementById("arrow_right");
 const loading_bar    = document.getElementById("loading_bar");
@@ -260,6 +261,20 @@ back_btn.addEventListener("click", close_gallery);
 arrow_left.addEventListener("click", prev_image);
 arrow_right.addEventListener("click", next_image);
 
+fs_btn.addEventListener("click", toggle_fullscreen);
+
+function toggle_fullscreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen().catch(() => {});
+  } else {
+    document.exitFullscreen().catch(() => {});
+  }
+}
+
+document.addEventListener("fullscreenchange", () => {
+  fs_btn.innerHTML = document.fullscreenElement ? "&#x2715;" : "&#x26F6;";
+});
+
 recents_list.addEventListener("click", e => {
   const chip = e.target.closest(".recent_chip");
   if (!chip) return;
diff --git a/static/index.html b/static/index.html
index db919a5..1adb2a8 100644
--- a/static/index.html
+++ b/static/index.html
@@ -45,6 +45,7 @@
       <div id="gallery_top">
         <button id="back_btn">&#8592;</button>
         <span id="img_counter"></span>
+        <button id="fs_btn" title="Fullscreen">&#x26F6;</button>
       </div>
       <button id="arrow_left">&#8249;</button>
       <button id="arrow_right">&#8250;</button>
diff --git a/static/style.css b/static/style.css
index 74129ee..2b56fa8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -221,6 +221,25 @@ html, body {
   border-radius: 999px;
 }
 
+#fs_btn {
+  background: rgba(0,0,0,0.5);
+  border: none;
+  border-radius: 999px;
+  color: #fff;
+  font-size: 1rem;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+}
+
+#fs_btn:active {
+  background: rgba(0,0,0,0.8);
+}
+
 /* desktop nav arrows */
 #arrow_left, #arrow_right {
   position: absolute;