Add color-coded book categories to books page

Categorize all 66 books by type with subtle color-coding:
- Law (blue): Genesis-Deuteronomy
- Historical (green): Joshua-Esther
- Wisdom (purple): Job-Song of Solomon
- Major Prophets (orange): Isaiah-Daniel
- Minor Prophets (red): Hosea-Malachi
- Gospels (gold): Matthew-John
- Acts (teal): Acts
- Pauline Epistles (indigo): Romans-Philemon
- General Epistles (pink): Hebrews-Jude
- Apocalyptic (crimson): Revelation

Colors use subtle gradients and work well in both light/dark modes.
Legend at bottom shows all categories.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-24 13:35:54 -05:00
parent 0d49073256
commit 0c61cb5e46
2 changed files with 218 additions and 4 deletions
+31 -2
View File
@@ -7300,6 +7300,33 @@ def books_page(request: Request):
"""Browse all books of the Bible"""
books = list(bible.iter_books())
# Define book categories with types
book_types = {
# Old Testament
'Genesis': 'law', 'Exodus': 'law', 'Leviticus': 'law', 'Numbers': 'law', 'Deuteronomy': 'law',
'Joshua': 'historical', 'Judges': 'historical', 'Ruth': 'historical',
'1 Samuel': 'historical', '2 Samuel': 'historical', '1 Kings': 'historical', '2 Kings': 'historical',
'1 Chronicles': 'historical', '2 Chronicles': 'historical', 'Ezra': 'historical',
'Nehemiah': 'historical', 'Esther': 'historical',
'Job': 'wisdom', 'Psalms': 'wisdom', 'Proverbs': 'wisdom', 'Ecclesiastes': 'wisdom', 'Song of Solomon': 'wisdom',
'Isaiah': 'major-prophets', 'Jeremiah': 'major-prophets', 'Lamentations': 'major-prophets',
'Ezekiel': 'major-prophets', 'Daniel': 'major-prophets',
'Hosea': 'minor-prophets', 'Joel': 'minor-prophets', 'Amos': 'minor-prophets',
'Obadiah': 'minor-prophets', 'Jonah': 'minor-prophets', 'Micah': 'minor-prophets',
'Nahum': 'minor-prophets', 'Habakkuk': 'minor-prophets', 'Zephaniah': 'minor-prophets',
'Haggai': 'minor-prophets', 'Zechariah': 'minor-prophets', 'Malachi': 'minor-prophets',
# New Testament
'Matthew': 'gospels', 'Mark': 'gospels', 'Luke': 'gospels', 'John': 'gospels',
'Acts': 'acts',
'Romans': 'pauline', '1 Corinthians': 'pauline', '2 Corinthians': 'pauline',
'Galatians': 'pauline', 'Ephesians': 'pauline', 'Philippians': 'pauline', 'Colossians': 'pauline',
'1 Thessalonians': 'pauline', '2 Thessalonians': 'pauline',
'1 Timothy': 'pauline', '2 Timothy': 'pauline', 'Titus': 'pauline', 'Philemon': 'pauline',
'Hebrews': 'general', 'James': 'general', '1 Peter': 'general', '2 Peter': 'general',
'1 John': 'general', '2 John': 'general', '3 John': 'general', 'Jude': 'general',
'Revelation': 'apocalyptic'
}
# Organize books by testament
old_testament_books = [
'Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy', 'Joshua', 'Judges', 'Ruth',
@@ -7325,7 +7352,8 @@ def books_page(request: Request):
{
'name': book,
'chapters': get_chapter_count(book),
'available': book in books
'available': book in books,
'type': book_types.get(book, '')
}
for book in old_testament_books
]
@@ -7334,7 +7362,8 @@ def books_page(request: Request):
{
'name': book,
'chapters': get_chapter_count(book),
'available': book in books
'available': book in books,
'type': book_types.get(book, '')
}
for book in new_testament_books
]
+187 -2
View File
@@ -63,6 +63,145 @@
line-height: 1.9;
margin: 1rem 0;
}
/* Book type color coding - works in both light and dark modes */
.book-card.law {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
border-left: 3px solid rgba(59, 130, 246, 0.4);
}
.book-card.historical {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
border-left: 3px solid rgba(34, 197, 94, 0.4);
}
.book-card.wisdom {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.03));
border-left: 3px solid rgba(168, 85, 247, 0.4);
}
.book-card.major-prophets {
background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.03));
border-left: 3px solid rgba(249, 115, 22, 0.4);
}
.book-card.minor-prophets {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
border-left: 3px solid rgba(239, 68, 68, 0.4);
}
.book-card.gospels {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
border-left: 3px solid rgba(234, 179, 8, 0.4);
}
.book-card.acts {
background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.03));
border-left: 3px solid rgba(20, 184, 166, 0.4);
}
.book-card.pauline {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
border-left: 3px solid rgba(99, 102, 241, 0.4);
}
.book-card.general {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.03));
border-left: 3px solid rgba(236, 72, 153, 0.4);
}
.book-card.apocalyptic {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
border-left: 3px solid rgba(220, 38, 38, 0.4);
}
/* Legend styles */
.legend {
margin: 1.5rem 0 2rem 0;
padding: 1rem;
background: var(--bg-secondary);
border-radius: 4px;
border: 1px solid var(--border-color);
}
.legend-title {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.legend-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.5rem;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.legend-color {
width: 24px;
height: 24px;
border-radius: 3px;
flex-shrink: 0;
}
.legend-color.law {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
border-left: 3px solid rgba(59, 130, 246, 0.4);
}
.legend-color.historical {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
border-left: 3px solid rgba(34, 197, 94, 0.4);
}
.legend-color.wisdom {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.03));
border-left: 3px solid rgba(168, 85, 247, 0.4);
}
.legend-color.major-prophets {
background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.03));
border-left: 3px solid rgba(249, 115, 22, 0.4);
}
.legend-color.minor-prophets {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
border-left: 3px solid rgba(239, 68, 68, 0.4);
}
.legend-color.gospels {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
border-left: 3px solid rgba(234, 179, 8, 0.4);
}
.legend-color.acts {
background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.03));
border-left: 3px solid rgba(20, 184, 166, 0.4);
}
.legend-color.pauline {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
border-left: 3px solid rgba(99, 102, 241, 0.4);
}
.legend-color.general {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.03));
border-left: 3px solid rgba(236, 72, 153, 0.4);
}
.legend-color.apocalyptic {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
border-left: 3px solid rgba(220, 38, 38, 0.4);
}
</style>
{% endblock %}
@@ -75,7 +214,7 @@
<div class="book-grid">
{% for book in old_testament %}
{% if book.available %}
<a href="/book/{{ book.name }}" class="book-card">
<a href="/book/{{ book.name }}" class="book-card {{ book.type }}">
<div class="book-name">{{ book.name }}</div>
<div class="book-info">{{ book.chapters }} {% if book.chapters == 1 %}chapter{% else %}chapters{% endif %}</div>
</a>
@@ -89,7 +228,7 @@
<div class="book-grid">
{% for book in new_testament %}
{% if book.available %}
<a href="/book/{{ book.name }}" class="book-card">
<a href="/book/{{ book.name }}" class="book-card {{ book.type }}">
<div class="book-name">{{ book.name }}</div>
<div class="book-info">{{ book.chapters }} {% if book.chapters == 1 %}chapter{% else %}chapters{% endif %}</div>
</a>
@@ -97,4 +236,50 @@
{% endfor %}
</div>
</section>
<div class="legend">
<div class="legend-title">Book Categories</div>
<div class="legend-grid">
<div class="legend-item">
<div class="legend-color law"></div>
<span>Law</span>
</div>
<div class="legend-item">
<div class="legend-color historical"></div>
<span>Historical</span>
</div>
<div class="legend-item">
<div class="legend-color wisdom"></div>
<span>Wisdom</span>
</div>
<div class="legend-item">
<div class="legend-color major-prophets"></div>
<span>Major Prophets</span>
</div>
<div class="legend-item">
<div class="legend-color minor-prophets"></div>
<span>Minor Prophets</span>
</div>
<div class="legend-item">
<div class="legend-color gospels"></div>
<span>Gospels</span>
</div>
<div class="legend-item">
<div class="legend-color acts"></div>
<span>Acts</span>
</div>
<div class="legend-item">
<div class="legend-color pauline"></div>
<span>Pauline Epistles</span>
</div>
<div class="legend-item">
<div class="legend-color general"></div>
<span>General Epistles</span>
</div>
<div class="legend-item">
<div class="legend-color apocalyptic"></div>
<span>Apocalyptic</span>
</div>
</div>
</div>
{% endblock %}