feat: add fullscreen photo navigation

src/server/page-template.ts

@@ -140,21 +140,35 @@ ${APP_STYLES}
     </section>
 
     <div class="overlay" id="overlay" aria-hidden="true">
+      <button class="overlay-nav overlay-prev" id="overlay-prev" type="button" aria-label="Previous photo">
+        <span class="button-icon" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
+      </button>
       <button class="close overlay-close" id="close-overlay" type="button" aria-label="Close photo">
         x
       </button>
-      <div class="overlay-card">
-        <div class="overlay-media">
+      <div class="overlay-card" id="overlay-card">
+        <div class="overlay-media" id="overlay-media">
           <div class="overlay-loading" id="overlay-loading" aria-live="polite" aria-atomic="true">
             <span class="spinner active" aria-hidden="true"></span>
             <strong id="overlay-loading-text">Loading full-size image...</strong>
           </div>
           <img id="overlay-image" alt="" />
         </div>
-        <footer class="overlay-caption">
+        <footer class="overlay-caption" id="overlay-caption">
           <strong id="overlay-title">Photo</strong>
         </footer>
       </div>
+      <button class="overlay-nav overlay-next" id="overlay-next" type="button" aria-label="Next photo">
+        <span class="button-icon" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.5 4 10.5 8l-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
+      </button>
     </div>
 
     <script src="/vendor/leaflet/leaflet.js"></script>