🎉 initial commit

templates/comic.html

@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="comic-container">
+    <div class="comic-header">
+        <h1>{{ comic.title }}</h1>
+        <p class="comic-date">{{ comic.date }}</p>
+    </div>
+
+    <div class="comic-image">
+        <img src="{{ url_for('static', filename='images/' + comic.filename) }}"
+             alt="{{ comic.title }}"
+             title="{{ comic.alt_text }}">
+    </div>
+
+    <div class="comic-navigation">
+        <div class="nav-buttons">
+            {% if comic.number > 1 %}
+                <a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
+                <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
+            {% else %}
+                <span class="btn btn-nav btn-disabled">First</span>
+                <span class="btn btn-nav btn-disabled">Previous</span>
+            {% endif %}
+
+            <span class="comic-number">Comic #{{ comic.number }}</span>
+
+            {% if comic.number < total_comics %}
+                <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
+                <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
+            {% else %}
+                <span class="btn btn-nav btn-disabled">Next</span>
+                <span class="btn btn-nav btn-disabled">Latest</span>
+            {% endif %}
+        </div>
+    </div>
+
+    {% if comic.transcript %}
+    <div class="comic-transcript">
+        <h3>Transcript</h3>
+        <p>{{ comic.transcript }}</p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}