mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
7606fa8c3a
Changed scrollIntoView behavior from 'smooth' to 'auto' across all templates for instant, non-animated navigation between selections. Affected ~75 instances across 50+ template files. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
562 lines
25 KiB
HTML
562 lines
25 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Commentary on {{ book }} - Authorized King James Version (KJV) Bible{% endblock %}
|
||
{% block description %}In-depth commentary on the Book of {{ book }} from the Authorized King James Version (KJV) Bible. Explore themes, historical context, and theological significance.{% endblock %}
|
||
{% block keywords %}{{ book }} commentary, {{ book }} study guide, {{ book }} KJV, Authorized King James Version, {{ book }} analysis, {{ book }} themes, {{ book }} meaning{% endblock %}
|
||
|
||
{% block container_class %}narrow-container{% endblock %}
|
||
|
||
{% block schema_type %}Article{% endblock %}
|
||
{% block structured_data %},
|
||
"headline": "Commentary on {{ book }} - Authorized King James Version (KJV)",
|
||
"articleSection": "Biblical Commentary",
|
||
"text": "Comprehensive commentary on the Book of {{ book }} from the Authorized King James Version (KJV) Bible.",
|
||
"isPartOf": {
|
||
"@type": "Book",
|
||
"name": "{{ book }} - Authorized King James Version",
|
||
"isPartOf": {
|
||
"@type": "Book",
|
||
"name": "Authorized King James Version Bible"
|
||
}
|
||
}{% endblock %}
|
||
|
||
{% block head %}
|
||
<style>
|
||
.commentary-section p {
|
||
font-family: 'Crimson Text', 'Times New Roman', serif;
|
||
font-size: 1.175rem;
|
||
line-height: 1.7;
|
||
margin-bottom: 1.25rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.commentary-section li {
|
||
font-family: 'Crimson Text', 'Times New Roman', serif;
|
||
font-size: 1.1rem;
|
||
line-height: 1.6;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.verse-reference {
|
||
font-weight: 500;
|
||
color: var(--primary-light);
|
||
text-decoration: none;
|
||
position: relative;
|
||
}
|
||
|
||
.verse-reference:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.verse-tooltip {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.95);
|
||
color: white;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 6px;
|
||
font-size: 0.9rem;
|
||
line-height: 1.5;
|
||
max-width: 450px;
|
||
min-width: 350px;
|
||
white-space: normal;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||
pointer-events: none;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||
font-family: 'Crimson Text', 'Times New Roman', serif;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.verse-tooltip {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
left: 1rem;
|
||
right: 1rem;
|
||
transform: none;
|
||
max-width: none;
|
||
min-width: auto;
|
||
padding: 1rem;
|
||
font-size: 1rem;
|
||
z-index: 1001;
|
||
}
|
||
}
|
||
|
||
.verse-tooltip::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border: 6px solid transparent;
|
||
border-top-color: rgba(0, 0, 0, 0.95);
|
||
}
|
||
|
||
.verse-reference:hover .verse-tooltip {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.outline-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.outline-list {
|
||
padding-left: 1.5rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.outline-item {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.outline-nested {
|
||
padding-left: 1.5rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.cross-ref-section {
|
||
margin-top: 2rem;
|
||
padding: 1rem;
|
||
background: rgba(139, 92, 246, 0.1);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.cross-ref-title {
|
||
margin-top: 0;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 0.75rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.cross-ref-list {
|
||
column-count: 2;
|
||
column-gap: 2rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.cross-ref-list {
|
||
column-count: 1;
|
||
}
|
||
}
|
||
|
||
.cross-ref-list li {
|
||
margin-bottom: 0.5rem;
|
||
break-inside: avoid;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.backdrop-blur {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.backdrop-blur.active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.verse-popup {
|
||
background: var(--surface-color);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
box-shadow: var(--shadow-lg);
|
||
max-width: 600px;
|
||
width: 90%;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.verse-popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 1px solid var(--border-light);
|
||
}
|
||
|
||
.verse-popup-title {
|
||
margin: 0;
|
||
font-size: 1.25rem;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.verse-popup-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
font-size: 1.5rem;
|
||
line-height: 1;
|
||
padding: 0;
|
||
}
|
||
|
||
.verse-popup-text {
|
||
font-size: 1.125rem;
|
||
line-height: 1.7;
|
||
margin-bottom: 1rem;
|
||
font-family: 'Crimson Text', 'Times New Roman', serif;
|
||
}
|
||
|
||
.verse-popup-comment {
|
||
background: rgba(139, 92, 246, 0.1);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.verse-popup-comment-title {
|
||
margin: 0 0 0.5rem;
|
||
font-size: 0.875rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.verse-popup-actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin-top: 1rem;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.verse-popup-action {
|
||
padding: 0.5rem 1rem;
|
||
border-radius: var(--radius-sm);
|
||
background: var(--background-color);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.verse-popup-action:hover {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border-color: var(--primary-color);
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block breadcrumb %}
|
||
<div class="container commentary-breadcrumb">
|
||
<nav class="breadcrumb">
|
||
<a href="/">📚 All Books</a>
|
||
<span class="breadcrumb-separator">/</span>
|
||
<a href="/book/{{ book }}">{{ book }}</a>
|
||
<span class="breadcrumb-separator">/</span>
|
||
<span>Commentary</span>
|
||
</nav>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="text-center mb-4">
|
||
<h1 class="section-title" style="font-size: 1.8rem;">Commentary on {{ book }}</h1>
|
||
<p style="font-size: 0.95rem; color: var(--text-secondary);">
|
||
Comprehensive analysis and insights from the Authorized King James Version (KJV)
|
||
</p>
|
||
|
||
<div class="book-meta" style="margin-top: 1rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
||
<span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ testament }}</span>
|
||
<span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ genre }}</span>
|
||
<span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ chapters|length }} Chapters</span>
|
||
<span class="book-meta-item" style="background: var(--surface-color); padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9rem;">{{ time_period }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="commentary-container" style="max-width: 800px; margin: 0 auto;">
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="introduction" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Introduction to {{ book }}</h2>
|
||
{{ introduction|safe }}
|
||
|
||
<div class="tags-container" style="margin-top: 1.5rem;">
|
||
{% for tag in tags %}
|
||
<span class="tag" style="display: inline-block; background: var(--primary-color); color: white; padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.85rem; margin-right: 0.5rem; margin-bottom: 0.5rem;">{{ tag }}</span>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="author-note" style="background: rgba(139, 92, 246, 0.1); border-radius: var(--radius-md); padding: 1rem; margin-top: 1.5rem; border-left: 4px solid var(--accent-color);">
|
||
<strong>Note:</strong> This commentary provides historical, theological, and literary insights on {{ book }} while remaining faithful to the text of the Authorized King James Version (KJV).
|
||
</div>
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="historical-context" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Historical Context</h2>
|
||
{{ historical_context|safe }}
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="literary-features" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Literary Features</h2>
|
||
{{ literary_features|safe }}
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Key Passages in {{ book }}</h2>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.25rem;">
|
||
{% for highlight in highlights %}
|
||
<div class="highlight-card" style="background: rgba(255, 235, 59, 0.1); border-radius: var(--radius-md); padding: 1.25rem; border-left: 4px solid var(--accent-color);">
|
||
<h4 class="highlight-title" style="font-weight: 600; margin: 0 0 0.4rem; color: var(--primary-light); font-size: 1.1rem;">{{ highlight.reference }}</h4>
|
||
<p class="highlight-desc" style="margin: 0; color: var(--text-primary); line-height: 1.4; font-size: 1rem;">{{ highlight.description }}</p>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="outline" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Book Outline</h2>
|
||
|
||
{% for section in outline %}
|
||
<div class="outline-section">
|
||
<h3 class="outline-title">{{ section.title }}</h3>
|
||
<ul class="outline-list">
|
||
{% for item in section['items'] %}
|
||
<li class="outline-item">
|
||
{{ item.text }}
|
||
{% if item.reference %}
|
||
(<a href="{{ item.url }}" class="verse-reference">
|
||
{{ item.reference }}
|
||
<span class="verse-tooltip">{{ item.verse_text|default(item.reference + ": " + item.text)|truncate(100) }}</span>
|
||
</a>)
|
||
{% endif %}
|
||
|
||
{% if item.subitems %}
|
||
<ul class="outline-nested">
|
||
{% for subitem in item.subitems %}
|
||
<li class="outline-item">
|
||
{{ subitem.text }}
|
||
{% if subitem.reference %}
|
||
(<a href="{{ subitem.url }}" class="verse-reference">
|
||
{{ subitem.reference }}
|
||
<span class="verse-tooltip">{{ subitem.verse_text|default(subitem.reference + ": " + subitem.text)|truncate(100) }}</span>
|
||
</a>)
|
||
{% endif %}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endfor %}
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="themes" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Major Themes</h2>
|
||
{{ themes|safe }}
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="theological-significance" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Theological Significance</h2>
|
||
{{ theological_significance|safe }}
|
||
|
||
<div class="cross-ref-section">
|
||
<h3 class="cross-ref-title">Cross References to Other Books</h3>
|
||
<ul class="cross-ref-list">
|
||
{% for ref in cross_references %}
|
||
<li>
|
||
<a href="{{ ref.url }}" class="verse-reference">
|
||
{{ ref.reference }}
|
||
<span class="verse-tooltip">{{ ref.verse_text|default(ref.description)|truncate(100) }}</span>
|
||
</a> - {{ ref.description }}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="chapter-summaries" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Chapter Summaries</h2>
|
||
|
||
{% for chapter_num, chapter_data in chapter_summaries.items() %}
|
||
<h3 id="chapter-{{ chapter_num }}">Chapter {{ chapter_num }}</h3>
|
||
<p>{{ chapter_data.summary }}</p>
|
||
|
||
{% if chapter_data.key_verses %}
|
||
<div style="margin: 1rem 0 1.5rem; padding: 0.75rem; background: rgba(255, 235, 59, 0.1); border-radius: var(--radius-md);">
|
||
<h4 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-secondary);">Key Verses:</h4>
|
||
<ul style="margin: 0; padding-left: 1.25rem;">
|
||
{% for verse in chapter_data.key_verses %}
|
||
<li>
|
||
<a href="{{ verse.url }}" class="verse-reference">
|
||
{{ book }} {{ chapter_num }}:{{ verse.verse_num }}
|
||
<span class="verse-tooltip">{{ verse.text }}</span>
|
||
</a> - {{ verse.brief }}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</section>
|
||
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h2 id="application" style="color: var(--text-primary); margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">Contemporary Application</h2>
|
||
{{ application|safe }}
|
||
</section>
|
||
|
||
<!-- Table of Contents -->
|
||
<section class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
|
||
<h3 style="color: var(--text-primary); margin-top: 0; margin-bottom: 1rem; font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.4rem;">Commentary Contents</h3>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem;">
|
||
<a href="#introduction" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Introduction</a>
|
||
<a href="#historical-context" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Historical Context</a>
|
||
<a href="#literary-features" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Literary Features</a>
|
||
<a href="#outline" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Book Outline</a>
|
||
<a href="#themes" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Major Themes</a>
|
||
<a href="#theological-significance" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Theological Significance</a>
|
||
<a href="#chapter-summaries" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Chapter Summaries</a>
|
||
<a href="#application" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background-color 0.2s;">Contemporary Application</a>
|
||
</div>
|
||
|
||
<h3 style="margin-top: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 1.2rem;">Chapter Quick Links</h3>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 0.5rem; max-width: 600px;">
|
||
{% for chapter_num in chapter_summaries.keys() %}
|
||
<a href="#chapter-{{ chapter_num }}" style="padding: 0.5rem; background: var(--background-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); text-align: center; transition: background-color 0.2s;">{{ chapter_num }}</a>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div style="margin-top: 2rem; text-align: center;">
|
||
<a href="/book/{{ book }}" class="nav-button" style="display: inline-block; padding: 0.65rem 1.25rem; background: var(--primary-color); color: white; text-decoration: none; border-radius: var(--radius-md); transition: background-color 0.2s;">
|
||
← Back to {{ book }}
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="backdrop-blur" id="versePopup">
|
||
<div class="verse-popup">
|
||
<div class="verse-popup-header">
|
||
<h3 class="verse-popup-title" id="popupTitle">Verse Title</h3>
|
||
<button class="verse-popup-close" onclick="closeVersePopup()">×</button>
|
||
</div>
|
||
<div class="verse-popup-text" id="popupText">Verse text will appear here.</div>
|
||
<div class="verse-popup-comment" id="popupCommentContainer">
|
||
<h4 class="verse-popup-comment-title">Commentary</h4>
|
||
<div id="popupComment">Commentary will appear here.</div>
|
||
</div>
|
||
<div class="verse-popup-actions">
|
||
<a href="#" class="verse-popup-action" id="popupReadInContext">Read in Context</a>
|
||
<a href="#" class="verse-popup-action" id="popupViewCommentary">View Full Commentary</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block navigation %}
|
||
<div class="container commentary-navigation">
|
||
<div class="navigation">
|
||
<a href="/book/{{ book }}" class="nav-button">
|
||
← Back to {{ book }}
|
||
</a>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<a href="/book/{{ book }}/chapter/1" class="nav-button nav-button-primary">
|
||
Begin Reading {{ book }} →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Handle TOC active state based on scroll position
|
||
const sections = document.querySelectorAll('.commentary-section h2, .commentary-section h3');
|
||
const tocLinks = document.querySelectorAll('.toc-link');
|
||
|
||
window.addEventListener('scroll', function() {
|
||
let currentSection = '';
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop - 100;
|
||
if (window.scrollY >= sectionTop) {
|
||
currentSection = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
tocLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href') === '#' + currentSection) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Verse popup functionality
|
||
const verseLinks = document.querySelectorAll('.verse-popup-trigger');
|
||
verseLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
const chapter = this.dataset.chapter;
|
||
const verse = this.dataset.verse;
|
||
const text = this.dataset.text;
|
||
const comment = this.dataset.comment;
|
||
|
||
document.getElementById('popupTitle').textContent = `${book} ${chapter}:${verse}`;
|
||
document.getElementById('popupText').textContent = text;
|
||
document.getElementById('popupComment').textContent = comment;
|
||
document.getElementById('popupReadInContext').href = `/book/${book}/chapter/${chapter}#verse-${verse}`;
|
||
document.getElementById('popupViewCommentary').href = `/commentary/${book}/${chapter}#verse-${verse}`;
|
||
|
||
document.getElementById('versePopup').classList.add('active');
|
||
});
|
||
});
|
||
|
||
// Highlight verse from URL hash
|
||
if (window.location.hash) {
|
||
setTimeout(() => {
|
||
const target = document.querySelector(window.location.hash);
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'auto', block: 'center' });
|
||
target.classList.add('highlight-verse');
|
||
setTimeout(() => {
|
||
target.classList.remove('highlight-verse');
|
||
}, 2000);
|
||
}
|
||
}, 100);
|
||
}
|
||
});
|
||
|
||
function closeVersePopup() {
|
||
document.getElementById('versePopup').classList.remove('active');
|
||
}
|
||
|
||
// Close popup when clicking outside
|
||
document.getElementById('versePopup').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeVersePopup();
|
||
}
|
||
});
|
||
|
||
// Close popup with escape key
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeVersePopup();
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %} |