From afc812661742a6830ac4686183ccd2d2e3df6386 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Mon, 26 May 2025 13:34:37 -0400
Subject: [PATCH] Add categorized Bible book navigation with visual styling Add
 categorized Bible book navigation with visual styling

AI:

Add categorized Bible book navigation with visual styling
---
 kjvstudy_org/static/style.css     |  62 +++++--
 kjvstudy_org/templates/base.html  | 294 +++++++++++++++++++++++++++++-
 kjvstudy_org/templates/index.html | 116 +++++++++++-
 3 files changed, 452 insertions(+), 20 deletions(-)

diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css
index ce1913e..8efbc6f 100644
--- a/kjvstudy_org/static/style.css
+++ b/kjvstudy_org/static/style.css
@@ -19,6 +19,18 @@
   --font-serif: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-display: 'Lora', var(--font-serif);
+  
+  /* Bible Book Category Colors */
+  --torah-color: #8B4513;
+  --historical-color: #CD853F;
+  --wisdom-color: #DAA520;
+  --major-prophets-color: #A0522D;
+  --minor-prophets-color: #A52A2A;
+  --gospels-color: #4169E1;
+  --acts-color: #6495ED;
+  --pauline-color: #1E90FF;
+  --general-epistles-color: #4682B4;
+  --apocalyptic-color: #191970;
 }
 
 * {
@@ -218,23 +230,38 @@ body {
 
 /* Book Grid */
 .book-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin-top: 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-top: 2rem;
 }
 
 .book-card {
-  background: var(--surface-color);
-  border-radius: var(--radius-lg);
-  padding: 1.5rem;
-  text-decoration: none;
-  color: inherit;
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--border-light);
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
+    background: var(--surface-color);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    text-decoration: none;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border: 1px solid var(--border-light);
+    color: var(--text-primary);
+}
+
+.book-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* Testament Divider */
+.testament-divider {
+    border: none;
+    height: 3px;
+    background: linear-gradient(90deg, var(--torah-color) 0%, var(--gospels-color) 100%);
+    margin: 2rem 0;
+    opacity: 0.7;
+    border-radius: 1px;
+    box-shadow: var(--shadow-sm);
+    width: 100%;
 }
 
 .book-card::before {
@@ -269,9 +296,12 @@ body {
 }
 
 .book-meta {
-  font-size: 0.875rem;
+  margin: 0.25rem 0 0 0;
+  font-size: 0.75rem;
   color: var(--text-secondary);
-  margin: 0.5rem 0 0;
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 /* Chapter Grid */
diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 65d8e1f..2b3eebf 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -48,6 +48,178 @@
     <!-- Styles -->
     <link href="/static/style.css" rel="stylesheet">
     
+    <style>
+    .testament-divider {
+        border: none;
+        height: 2px;
+        background: linear-gradient(90deg, var(--torah-color) 0%, var(--gospels-color) 100%);
+        margin: 1rem 0;
+        opacity: 0.6;
+        border-radius: 1px;
+    }
+    
+    .bible-book {
+        display: block;
+        color: var(--text-secondary);
+        text-decoration: none;
+        padding: 0.5rem 1rem;
+        border-radius: var(--radius-sm);
+        transition: all 0.2s ease;
+        border-left: 3px solid transparent;
+        font-size: 0.875rem;
+    }
+    
+    /* Torah/Pentateuch */
+    .bible-book.torah {
+        border-left-color: var(--torah-color);
+    }
+    .bible-book.torah:hover {
+        background: rgba(139, 69, 19, 0.1);
+        color: var(--torah-color);
+    }
+    .bible-book.active.torah {
+        background: rgba(139, 69, 19, 0.15);
+        color: var(--torah-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Historical Books */
+    .bible-book.historical {
+        border-left-color: var(--historical-color);
+    }
+    .bible-book.historical:hover {
+        background: rgba(205, 133, 63, 0.1);
+        color: var(--historical-color);
+    }
+    .bible-book.active.historical {
+        background: rgba(205, 133, 63, 0.15);
+        color: var(--historical-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Wisdom Literature */
+    .bible-book.wisdom {
+        border-left-color: var(--wisdom-color);
+    }
+    .bible-book.wisdom:hover {
+        background: rgba(218, 165, 32, 0.1);
+        color: var(--wisdom-color);
+    }
+    .bible-book.active.wisdom {
+        background: rgba(218, 165, 32, 0.15);
+        color: var(--wisdom-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Major Prophets */
+    .bible-book.major-prophets {
+        border-left-color: var(--major-prophets-color);
+    }
+    .bible-book.major-prophets:hover {
+        background: rgba(160, 82, 45, 0.1);
+        color: var(--major-prophets-color);
+    }
+    .bible-book.active.major-prophets {
+        background: rgba(160, 82, 45, 0.15);
+        color: var(--major-prophets-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Minor Prophets */
+    .bible-book.minor-prophets {
+        border-left-color: var(--minor-prophets-color);
+    }
+    .bible-book.minor-prophets:hover {
+        background: rgba(165, 42, 42, 0.1);
+        color: var(--minor-prophets-color);
+    }
+    .bible-book.active.minor-prophets {
+        background: rgba(165, 42, 42, 0.15);
+        color: var(--minor-prophets-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Gospels */
+    .bible-book.gospels {
+        border-left-color: var(--gospels-color);
+    }
+    .bible-book.gospels:hover {
+        background: rgba(65, 105, 225, 0.1);
+        color: var(--gospels-color);
+    }
+    .bible-book.active.gospels {
+        background: rgba(65, 105, 225, 0.15);
+        color: var(--gospels-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Acts (Historical NT) */
+    .bible-book.acts {
+        border-left-color: var(--acts-color);
+    }
+    .bible-book.acts:hover {
+        background: rgba(100, 149, 237, 0.1);
+        color: var(--acts-color);
+    }
+    .bible-book.active.acts {
+        background: rgba(100, 149, 237, 0.15);
+        color: var(--acts-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Pauline Epistles */
+    .bible-book.pauline {
+        border-left-color: var(--pauline-color);
+    }
+    .bible-book.pauline:hover {
+        background: rgba(30, 144, 255, 0.1);
+        color: var(--pauline-color);
+    }
+    .bible-book.active.pauline {
+        background: rgba(30, 144, 255, 0.15);
+        color: var(--pauline-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* General Epistles */
+    .bible-book.general-epistles {
+        border-left-color: var(--general-epistles-color);
+    }
+    .bible-book.general-epistles:hover {
+        background: rgba(70, 130, 180, 0.1);
+        color: var(--general-epistles-color);
+    }
+    .bible-book.active.general-epistles {
+        background: rgba(70, 130, 180, 0.15);
+        color: var(--general-epistles-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    
+    /* Apocalyptic */
+    .bible-book.apocalyptic {
+        border-left-color: var(--apocalyptic-color);
+    }
+    .bible-book.apocalyptic:hover {
+        background: rgba(25, 25, 112, 0.1);
+        color: var(--apocalyptic-color);
+    }
+    .bible-book.active.apocalyptic {
+        background: rgba(25, 25, 112, 0.15);
+        color: var(--apocalyptic-color);
+        font-weight: 500;
+        border-left-width: 4px;
+    }
+    </style>
+    
     <!-- Scripts -->
     <script src="/static/app.js" defer></script>
     
@@ -90,12 +262,130 @@
                 </a>
                 
                 {% if books %}
-                <h3>Bible Books</h3>
+                <h3 style="color: var(--torah-color); margin-bottom: 0.5rem;">Old Testament</h3>
+                
+                <!-- Torah/Pentateuch -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--torah-color); text-transform: uppercase; letter-spacing: 0.5px;">Torah/Pentateuch</h4>
+                {% set torah = ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy'] %}
                 {% for book in books %}
+                {% if book in torah %}
                 <a href="/book/{{ book }}" 
-                   {% if book in request.url.path %}class="active"{% endif %}>
+                   class="bible-book torah {% if book in request.url.path %}active{% endif %}">
                     {{ book }}
                 </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- Historical Books -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--historical-color); text-transform: uppercase; letter-spacing: 0.5px;">Historical Books</h4>
+                {% set historical = ['Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel', '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles', 'Ezra', 'Nehemiah', 'Esther'] %}
+                {% for book in books %}
+                {% if book in historical %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book historical {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- Wisdom Literature -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--wisdom-color); text-transform: uppercase; letter-spacing: 0.5px;">Wisdom Literature</h4>
+                {% set wisdom = ['Job', 'Psalms', 'Proverbs', 'Ecclesiastes', 'Song of Solomon'] %}
+                {% for book in books %}
+                {% if book in wisdom %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book wisdom {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- Major Prophets -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--major-prophets-color); text-transform: uppercase; letter-spacing: 0.5px;">Major Prophets</h4>
+                {% set major_prophets = ['Isaiah', 'Jeremiah', 'Lamentations', 'Ezekiel', 'Daniel'] %}
+                {% for book in books %}
+                {% if book in major_prophets %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book major-prophets {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- Minor Prophets -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--minor-prophets-color); text-transform: uppercase; letter-spacing: 0.5px;">Minor Prophets</h4>
+                {% set minor_prophets = ['Hosea', 'Joel', 'Amos', 'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah', 'Haggai', 'Zechariah', 'Malachi'] %}
+                {% for book in books %}
+                {% if book in minor_prophets %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book minor-prophets {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <hr class="testament-divider">
+                
+                <h3 style="color: var(--gospels-color); margin-bottom: 0.5rem;">New Testament</h3>
+                
+                <!-- Gospels -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--gospels-color); text-transform: uppercase; letter-spacing: 0.5px;">Gospels</h4>
+                {% set gospels = ['Matthew', 'Mark', 'Luke', 'John'] %}
+                {% for book in books %}
+                {% if book in gospels %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book gospels {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- Acts (Historical NT) -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--acts-color); text-transform: uppercase; letter-spacing: 0.5px;">Historical</h4>
+                {% set acts = ['Acts'] %}
+                {% for book in books %}
+                {% if book in acts %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book acts {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- Pauline Epistles -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--pauline-color); text-transform: uppercase; letter-spacing: 0.5px;">Pauline Epistles</h4>
+                {% set pauline = ['Romans', '1 Corinthians', '2 Corinthians', 'Galatians', 'Ephesians', 'Philippians', 'Colossians', '1 Thessalonians', '2 Thessalonians', '1 Timothy', '2 Timothy', 'Titus', 'Philemon', 'Hebrews'] %}
+                {% for book in books %}
+                {% if book in pauline %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book pauline {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- General Epistles -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--general-epistles-color); text-transform: uppercase; letter-spacing: 0.5px;">General Epistles</h4>
+                {% set general_epistles = ['James', '1 Peter', '2 Peter', '1 John', '2 John', '3 John', 'Jude'] %}
+                {% for book in books %}
+                {% if book in general_epistles %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book general-epistles {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
+                {% endfor %}
+                
+                <!-- Apocalyptic -->
+                <h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--apocalyptic-color); text-transform: uppercase; letter-spacing: 0.5px;">Apocalyptic</h4>
+                {% set apocalyptic = ['Revelation'] %}
+                {% for book in books %}
+                {% if book in apocalyptic %}
+                <a href="/book/{{ book }}" 
+                   class="bible-book apocalyptic {% if book in request.url.path %}active{% endif %}">
+                    {{ book }}
+                </a>
+                {% endif %}
                 {% endfor %}
                 {% endif %}
                 
diff --git a/kjvstudy_org/templates/index.html b/kjvstudy_org/templates/index.html
index 20eee49..1cb3c24 100644
--- a/kjvstudy_org/templates/index.html
+++ b/kjvstudy_org/templates/index.html
@@ -15,12 +15,124 @@
     </p>
 </div>
 
+<!-- Bible Book Categories Legend -->
+<div class="bible-legend">
+    <h3 class="legend-title">Bible Book Categories</h3>
+    <div class="legend-grid">
+        <!-- Old Testament Categories -->
+        <div class="legend-section">
+            <h4>Old Testament</h4>
+            <div class="legend-items">
+                <a href="#torah" class="legend-item" style="border-left-color: var(--torah-color);">
+                    <span class="legend-color
+
+<h2 class="section-title" style="margin-top: 2rem; color: var(--torah-color);">Old Testament</h2>
 <div class="book-grid">
+    {% set old_testament = ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy', 'Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel', '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles', 'Ezra', 'Nehemiah', 'Esther', 'Job', 'Psalms', 'Proverbs', 'Ecclesiastes', 'Song of Solomon', 'Isaiah', 'Jeremiah', 'Lamentations', 'Ezekiel', 'Daniel', 'Hosea', 'Joel', 'Amos', 'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah', 'Haggai', 'Zechariah', 'Malachi'] %}
+    
+    <!-- Torah/Pentateuch -->
     {% for book in books %}
-    <a href="/book/{{ book }}" class="book-card">
+    {% if book in ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--torah-color);">
         <h3 class="book-title">{{ book }}</h3>
-        <p class="book-meta">Authorized King James Version</p>
+        <p class="book-meta">Torah/Pentateuch</p>
     </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- Historical Books -->
+    {% for book in books %}
+    {% if book in ['Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel', '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles', 'Ezra', 'Nehemiah', 'Esther'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--historical-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Historical</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- Wisdom Literature -->
+    {% for book in books %}
+    {% if book in ['Job', 'Psalms', 'Proverbs', 'Ecclesiastes', 'Song of Solomon'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--wisdom-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Wisdom</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- Major Prophets -->
+    {% for book in books %}
+    {% if book in ['Isaiah', 'Jeremiah', 'Lamentations', 'Ezekiel', 'Daniel'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--major-prophets-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Major Prophet</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- Minor Prophets -->
+    {% for book in books %}
+    {% if book in ['Hosea', 'Joel', 'Amos', 'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah', 'Haggai', 'Zechariah', 'Malachi'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--minor-prophets-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Minor Prophet</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+</div>
+
+<hr class="testament-divider" style="margin: 3rem auto; width: 80%; max-width: 600px; background: linear-gradient(90deg, var(--torah-color) 0%, var(--gospels-color) 100%);">
+
+<h2 class="section-title" style="margin-top: 2rem; color: var(--gospels-color);">New Testament</h2>
+<div class="book-grid">
+    <!-- Gospels -->
+    {% for book in books %}
+    {% if book in ['Matthew', 'Mark', 'Luke', 'John'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--gospels-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Gospel</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- Acts (Historical NT) -->
+    {% for book in books %}
+    {% if book == 'Acts' %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--acts-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Historical</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- Pauline Epistles -->
+    {% for book in books %}
+    {% if book in ['Romans', '1 Corinthians', '2 Corinthians', 'Galatians', 'Ephesians', 'Philippians', 'Colossians', '1 Thessalonians', '2 Thessalonians', '1 Timothy', '2 Timothy', 'Titus', 'Philemon', 'Hebrews'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--pauline-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Pauline Epistle</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- General Epistles -->
+    {% for book in books %}
+    {% if book in ['James', '1 Peter', '2 Peter', '1 John', '2 John', '3 John', 'Jude'] %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--general-epistles-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">General Epistle</p>
+    </a>
+    {% endif %}
+    {% endfor %}
+    
+    <!-- Apocalyptic -->
+    {% for book in books %}
+    {% if book == 'Revelation' %}
+    <a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--apocalyptic-color);">
+        <h3 class="book-title">{{ book }}</h3>
+        <p class="book-meta">Apocalyptic</p>
+    </a>
+    {% endif %}
     {% endfor %}
 </div>