From b87bcdbb53ef09fa2744a7f054c6d9dcc9c3c24b Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Mon, 9 Mar 2026 09:23:11 +0000
Subject: [PATCH] Add mouse navigation

---
 frontend.html | 36 ++++++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)
diff --git a/frontend.html b/frontend.html
index dcc7eaf..0b25dc8 100644
--- a/frontend.html
+++ b/frontend.html
@@ -7,11 +7,36 @@
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         html, body { height: 100%; overflow: hidden; background: #1a1a1a; }
-        img { display: block; max-width: 100%; max-height: 100%; margin: auto; cursor: pointer; }
+        #container {
+            position: relative;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        img { max-width: 100%; max-height: 100%; cursor: pointer; }
+        .chevron {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 48px;
+            color: rgba(255, 255, 255, 0.5);
+            cursor: pointer;
+            padding: 20px;
+            user-select: none;
+            transition: color 0.2s;
+        }
+        .chevron:hover { color: rgba(255, 255, 255, 0.9); }
+        .chevron.left { left: 10px; }
+        .chevron.right { right: 10px; }
     </style>
 </head>
 <body>
-    <img id="random-img" alt="Random image">
+    <div id="container">
+        <img id="random-img" alt="Random image">
+        <div class="chevron left" id="prev-btn">&#8249;</div>
+        <div class="chevron right" id="next-btn">&#8250;</div>
+    </div>
     <script>
         let currentData = null;
 
@@ -33,6 +58,13 @@
         }
 
         document.getElementById('random-img').addEventListener('click', loadRandom);
+        document.getElementById('prev-btn').addEventListener('click', function() {
+            if (currentData && currentData.previous) loadInfo(currentData.previous);
+        });
+        document.getElementById('next-btn').addEventListener('click', function() {
+            if (currentData && currentData.next) loadInfo(currentData.next);
+        });
+
         document.addEventListener('keydown', function(e) {
             if (e.code === 'Space') {
                 e.preventDefault();
