♿ click comic to navigate

static/css/style.css

@@ -187,6 +187,11 @@ main {
     background: #fff;
 }
 
+.comic-image a {
+    display: block;
+    cursor: pointer;
+}
+
 .comic-image img {
     max-width: 100%;
     height: auto;

static/js/comic-nav.js

@@ -34,12 +34,16 @@
         // Update date
         document.querySelector('.comic-date').textContent = comic.date;
 
-        // Update image
+        // Update image and its link
-        const img = document.querySelector('.comic-image img');
+        const comicImageDiv = document.querySelector('.comic-image');
+        const img = comicImageDiv.querySelector('img');
         img.src = `/static/images/comics/${comic.filename}`;
         img.alt = title;
         img.title = comic.alt_text;
 
+        // Update or create/remove the link wrapper
+        updateComicImageLink(comic.number);
+
         // Update author note
         const transcriptDiv = document.querySelector('.comic-transcript');
         if (comic.author_note) {
@@ -66,6 +70,30 @@
         history.pushState({ comicId: comic.number }, '', `/comic/${comic.number}`);
     }
 
+    // Update comic image link for click navigation
+    function updateComicImageLink(currentNumber) {
+        const comicImageDiv = document.querySelector('.comic-image');
+        const img = comicImageDiv.querySelector('img');
+
+        // Remove existing link if present
+        const existingLink = comicImageDiv.querySelector('a');
+        if (existingLink) {
+            existingLink.replaceWith(img);
+        }
+
+        // Add link if there's a next comic
+        if (currentNumber < totalComics) {
+            const link = document.createElement('a');
+            link.href = `/comic/${currentNumber + 1}`;
+            link.onclick = (e) => {
+                e.preventDefault();
+                loadComic(currentNumber + 1);
+            };
+            img.parentNode.insertBefore(link, img);
+            link.appendChild(img);
+        }
+    }
+
     // Update navigation button states
     function updateNavButtons(currentNumber) {
         const navButtons = document.querySelector('.nav-buttons');
@@ -129,6 +157,7 @@
 
         if (currentNumber && totalComics) {
             updateNavButtons(currentNumber);
+            updateComicImageLink(currentNumber);
         }
 
         // Handle browser back/forward

templates/comic.html

@@ -12,9 +12,17 @@
     </div>
 
     <div class="comic-image">
+        {% if comic.number < total_comics %}
+        <a href="{{ url_for('comic', comic_id=comic.number + 1) }}">
+            <img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
+                 alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
+                 title="{{ comic.alt_text }}">
+        </a>
+        {% else %}
         <img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
              alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
              title="{{ comic.alt_text }}">
+        {% endif %}
     </div>
 
     <div class="comic-navigation">