From b6f5f31b105a9a1293b740bac714ed95960ea2b4 Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Wed, 22 Apr 2026 19:29:07 -0500
Subject: [PATCH] Add Vi-style keyboard controls (h/j/k/l) for left-handed
 navigation alongside existing arrow key controls

---
 README.md     | 5 +++--
 frontend.html | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 4c275e8..99c9da5 100644
--- a/README.md
+++ b/README.md
@@ -13,9 +13,10 @@ A FastAPI-based image server that serves files from directories or ZIP archives
   - Ordered sequential access with configurable delay
   - Play/pause toggle for auto-advance
 - **Keyboard Shortcuts**:
-  - Left/Right Arrow: Navigate previous/next
+  - Left/Right Arrow or H/L: Navigate previous/next
   - Space: Toggle play/pause
-  - +/-: Increase/decrease slide delay
+  - +/= or J: Increase slide delay
+  - - or K: Decrease slide delay
   - O: Toggle between ordered and random modes
 - **MIME Type Detection**: Automatically sets correct content types for served files
 - **Health Check Endpoint**: Monitor server status and indexed file count
diff --git a/frontend.html b/frontend.html
index 38f0986..99fe251 100644
--- a/frontend.html
+++ b/frontend.html
@@ -81,14 +81,14 @@
             if (e.code === 'Space') {
                 var playBtn = document.querySelector('.play-btn');
                 if (playBtn) playBtn.click();
-            } else if (e.code === 'ArrowLeft') {
+            } else if (e.code === 'ArrowLeft' || e.key.toLowerCase() === 'h') {
                 document.getElementById('prev-btn').click();
-            } else if (e.code === 'ArrowRight') {
+            } else if (e.code === 'ArrowRight' || e.key.toLowerCase() === 'l') {
                 document.getElementById('next-btn').click();
-    } else if (e.code === 'Equal') {
+    } else if (e.code === 'Equal' || e.key.toLowerCase() === 'j') {
                 var params = getRefreshParams();
                 if (params) window.location.href = '/' + params.order + '/' + (params.delay + 1) + '/' + params.hash;
-            } else if (e.code === 'Minus') {
+            } else if (e.code === 'Minus' || e.key.toLowerCase() === 'k') {
                 var params = getRefreshParams();
                 if (params && params.delay > 1) window.location.href = '/' + params.order + '/' + (params.delay - 1) + '/' + params.hash;
             } else if (e.key.toLowerCase() === 'o') {