mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
8e8d6f01e2
Removes the options button, reading options panel with font size, line spacing, and verse number toggles, along with associated JavaScript for saving and loading preferences.
732 lines
27 KiB
HTML
732 lines
27 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ book }} {{ chapter }} - Authorized King James Version (KJV) Bible{% endblock %}
|
|
{% block description %}Read {{ book }} chapter {{ chapter }} from the Authorized King James Version (KJV) Bible with verse-by-verse display and study tools. Complete text of {{ book }} {{ chapter }} KJV.{% endblock %}
|
|
{% block keywords %}{{ book }} {{ chapter }}, {{ book }} {{ chapter }} KJV, {{ book }} chapter {{ chapter }} King James Version, Authorized King James Version, KJV Bible, {{ book }} {{ chapter }} verses{% endblock %}
|
|
|
|
{% block schema_type %}Article{% endblock %}
|
|
{% block structured_data %},
|
|
"headline": "{{ book }} {{ chapter }} - Authorized King James Version (KJV)",
|
|
"articleSection": "{{ book }}",
|
|
"text": "{{ verses[0].text[:150] }}...",
|
|
"wordCount": {{ verses|length }},
|
|
"isPartOf": {
|
|
"@type": "Book",
|
|
"name": "{{ book }} - Authorized King James Version",
|
|
"isPartOf": {
|
|
"@type": "Book",
|
|
"name": "Authorized King James Version Bible"
|
|
}
|
|
}{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.verse-tools {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
margin-left: 0.25rem;
|
|
vertical-align: middle;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.verse:hover .verse-tools {
|
|
opacity: 1;
|
|
}
|
|
|
|
.verse-tool {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-color);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 10px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.verse-tool:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
sup.verse-number {
|
|
font-size: 0.8rem !important;
|
|
font-weight: normal !important;
|
|
color: var(--text-secondary) !important;
|
|
margin-right: 0.25rem !important;
|
|
user-select: none !important;
|
|
cursor: pointer !important;
|
|
font-family: var(--font-sans) !important;
|
|
line-height: 1 !important;
|
|
vertical-align: super !important;
|
|
}
|
|
|
|
sup.verse-number:hover {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.highlight-verse,
|
|
.verse-highlight {
|
|
background-color: rgba(255, 235, 59, 0.3) !important;
|
|
padding: 0.1rem 0.2rem !important;
|
|
border-radius: 3px !important;
|
|
animation: pulse-highlight 2s ease;
|
|
}
|
|
|
|
@keyframes pulse-highlight {
|
|
0% { background-color: transparent; }
|
|
30% { background-color: rgba(255, 235, 59, 0.5); }
|
|
100% { background-color: rgba(255, 235, 59, 0.3); }
|
|
}
|
|
|
|
.chapter-navigation {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--background-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1rem 0;
|
|
margin-bottom: 2rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.chapter-nav-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.chapter-info {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.chapter-controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.reading-options {
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.reading-options h3 {
|
|
margin: 0 0 1rem;
|
|
font-size: 1rem;
|
|
color: var(--primary-color);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.option-group {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.option-group label {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
min-width: 80px;
|
|
}
|
|
|
|
.range-input {
|
|
flex: 1;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.verse-highlight {
|
|
background: linear-gradient(120deg, #fff59d 0%, #ffee58 100%);
|
|
background-size: 100% 40%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 60%;
|
|
}
|
|
|
|
.verse-text {
|
|
font-family: 'EB Garamond', Georgia, serif;
|
|
font-size: 1.5rem;
|
|
line-height: 1.8;
|
|
color: var(--text-primary);
|
|
font-feature-settings:
|
|
"liga" 1,
|
|
"dlig" 1,
|
|
"kern" 1,
|
|
"onum" 1;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.verse-text::selection {
|
|
background: rgba(139, 92, 246, 0.4);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.verse-text::-moz-selection {
|
|
background: rgba(139, 92, 246, 0.4);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.verse-reference {
|
|
position: relative;
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
font-family: 'EB Garamond', Georgia, serif;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Responsive tooltip styles */
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.verse-tooltip {
|
|
max-width: 380px;
|
|
min-width: 280px;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.verse-tooltip {
|
|
max-width: 500px;
|
|
min-width: 400px;
|
|
font-size: 0.95rem;
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.verse-text {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.verse-number {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
.chapter-text {
|
|
font-family: 'EB Garamond', Georgia, serif;
|
|
font-size: 1.125rem;
|
|
line-height: 1.8;
|
|
color: var(--text-primary);
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
margin: 2rem 0;
|
|
padding: 1rem;
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.chapter-text sup.verse-number {
|
|
font-size: 0.75rem !important;
|
|
margin-right: 0.2rem !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.chapter-text {
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.chapter-text sup.verse-number {
|
|
font-size: 0.7rem !important;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block breadcrumb %}
|
|
<div class="container">
|
|
<nav class="breadcrumb" style="font-size: 1.2rem;">
|
|
<a href="/">📚 All Books</a>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<a href="/book/{{ book }}">{{ book }}</a>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<span>Chapter {{ chapter }}</span>
|
|
</nav>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block container_class %}narrow-container{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="chapter-navigation">
|
|
<div class="chapter-nav-content">
|
|
<div class="chapter-info">
|
|
{{ book }} {{ chapter }} (KJV)
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="text-center mb-4">
|
|
<h1 class="chapter-title">{{ book }} {{ chapter }}</h1>
|
|
<p style="font-size: 1rem; color: var(--text-secondary); margin: 0.5rem 0 0 0; font-style: italic;">
|
|
Authorized King James Version (KJV)
|
|
</p>
|
|
</div>
|
|
|
|
<div class="verses-container" id="versesContainer">
|
|
<div class="chapter-text">
|
|
{% for verse in verses %}
|
|
{% if not loop.first %}<br>{% endif %}<sup class="verse-number" id="verse-{{ verse.verse }}" title="Verse {{ verse.verse }}" onclick="navigateToVerse({{ verse.verse }})">{{ verse.verse }}</sup>{{ verse.text }}{% if not loop.last %} {% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="commentary-preview" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 2rem; margin-top: 3rem; border: 1px solid var(--border-light); text-center;">
|
|
<h3 style="color: var(--primary-color); margin: 0 0 1rem; font-family: var(--font-display);">
|
|
🤖 AI Commentary
|
|
</h3>
|
|
{% if book == "Revelation" and chapter == 1 %}
|
|
<div style="background: linear-gradient(135deg, rgba(75, 46, 131, 0.1), rgba(65, 105, 225, 0.1)); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem; border-left: 4px solid var(--primary-color); box-shadow: var(--shadow-sm);">
|
|
<div style="display: flex; align-items: center; margin-bottom: 0.75rem;">
|
|
<span style="background: var(--primary-color); color: white; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.5rem;">Premium</span>
|
|
<h4 style="margin: 0; font-weight: 600; color: var(--primary-color); font-size: 1.1rem;">✨ Revelation 1: The Apocalyptic Vision ✨</h4>
|
|
</div>
|
|
<p style="color: var(--text-primary); margin: 0 0 1rem; line-height: 1.6; font-style: italic;">
|
|
"I am Alpha and Omega, the beginning and the ending, saith the Lord, which is, and which was, and which is to come, the Almighty." — Revelation 1:8
|
|
</p>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
|
|
<span style="background: rgba(75, 46, 131, 0.1); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem;">Apocalyptic</span>
|
|
<span style="background: rgba(75, 46, 131, 0.1); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem;">Christology</span>
|
|
<span style="background: rgba(75, 46, 131, 0.1); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem;">Domitian Era</span>
|
|
<span style="background: rgba(75, 46, 131, 0.1); color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem;">Seven Churches</span>
|
|
</div>
|
|
<p style="color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.6;">
|
|
Explore our detailed verse-by-verse analysis of Revelation 1, featuring historical context from the late first century CE,
|
|
theological insights on apocalyptic literature, and cross-references to Old Testament prophetic visions.
|
|
</p>
|
|
<div style="background: rgba(255, 255, 255, 0.7); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 1rem; border: 1px solid rgba(75, 46, 131, 0.2);">
|
|
<h5 style="margin: 0 0 0.5rem; color: var(--primary-color); font-size: 0.9rem;">Featured Commentary Highlights:</h5>
|
|
<ul style="margin: 0; padding-left: 1.25rem; color: var(--text-secondary); font-size: 0.9rem;">
|
|
<li>Verse-by-verse exegesis with Greek word studies</li>
|
|
<li>Archaeological context of the seven churches</li>
|
|
<li>Counter-imperial themes and symbols</li>
|
|
<li>High Christology in apocalyptic literature</li>
|
|
<li>Connections to Daniel 7, Ezekiel 1, and Zechariah 4</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p style="color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.6;">
|
|
Explore verse-by-verse analysis with historical context, theological insights,
|
|
and cross-references for {{ book }} {{ chapter }} from the Authorized King James Version (KJV).
|
|
</p>
|
|
{% endif %}
|
|
<div class="button-group" style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
|
|
<a href="#embedded-commentary" class="nav-button" style="display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem;">
|
|
View Commentary Below
|
|
</a>
|
|
<a href="/commentary/{{ book }}/{{ chapter }}" class="nav-button nav-button-primary" style="display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem;">
|
|
Open Full Commentary
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Embedded Commentary Section -->
|
|
<div id="embedded-commentary" class="embedded-commentary" style="margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-light);">
|
|
<h2 style="text-align: center; color: var(--primary-color); margin-bottom: 2rem; font-family: var(--font-display);">
|
|
AI Commentary on {{ book }} {{ chapter }}
|
|
</h2>
|
|
|
|
<!-- Chapter Overview -->
|
|
<div class="commentary-card" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 2rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);">
|
|
<h3 style="color: var(--primary-color); margin-top: 0; margin-bottom: 1rem; font-family: var(--font-display);">
|
|
Chapter Overview
|
|
</h3>
|
|
<div style="color: var(--text-secondary); line-height: 1.7;">
|
|
{{ chapter_overview|safe if chapter_overview else "Chapter overview is not available." }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verse-by-Verse Commentary -->
|
|
{% if commentaries %}
|
|
<h3 style="margin: 2rem 0 1rem; color: var(--primary-color); font-family: var(--font-display);">Verse-by-Verse Commentary</h3>
|
|
|
|
{% for verse in verses %}
|
|
{% if verse.verse in commentaries %}
|
|
<div id="commentary-verse-{{ verse.verse }}" class="commentary-card" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light);">
|
|
<h4 style="margin: 0; color: var(--primary-color); font-family: var(--font-display);">
|
|
<a href="#verse-{{ verse.verse }}" class="verse-link" style="text-decoration: none; color: inherit;">
|
|
Verse {{ verse.verse }}
|
|
</a>
|
|
</h4>
|
|
<a href="/commentary/{{ book }}/{{ chapter }}#verse-{{ verse.verse }}" style="font-size: 0.875rem; color: var(--primary-color); text-decoration: none;">
|
|
View in Full Commentary
|
|
</a>
|
|
</div>
|
|
|
|
<div class="verse-quote" style="background: rgba(255, 235, 59, 0.1); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; border-left: 3px solid rgba(255, 235, 59, 0.5); font-family: var(--font-serif);">
|
|
{{ verse.text }}
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 1rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0.5rem;">
|
|
<button class="tab active" onclick="switchCommentaryTab({{ verse.verse }}, 'analysis')" style="background: none; border: none; padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: 500;">
|
|
Analysis
|
|
</button>
|
|
<button class="tab" onclick="switchCommentaryTab({{ verse.verse }}, 'historical')" style="background: none; border: none; padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-secondary);">
|
|
Historical Context
|
|
</button>
|
|
<button class="tab" onclick="switchCommentaryTab({{ verse.verse }}, 'questions')" style="background: none; border: none; padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-secondary);">
|
|
Study Questions
|
|
</button>
|
|
</div>
|
|
|
|
<div id="tab-{{ verse.verse }}-analysis" class="tab-content active" style="color: var(--text-secondary); line-height: 1.7;">
|
|
{{ commentaries[verse.verse].analysis|safe }}
|
|
|
|
{% if commentaries[verse.verse].cross_references %}
|
|
<div style="background: rgba(75, 46, 131, 0.05); padding: 1rem; border-radius: var(--radius-md); margin-top: 1rem;">
|
|
<h5 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--primary-color);">Cross References:</h5>
|
|
<ul style="margin: 0; padding-left: 1.25rem;">
|
|
{% for ref in commentaries[verse.verse].cross_references %}
|
|
<li>
|
|
<a href="{{ ref.url }}" class="verse-reference" style="color: var(--primary-color); text-decoration: none;">
|
|
{{ ref.text }}
|
|
<span class="verse-tooltip">{{ ref.verse_text|default(ref.context) }}</span>
|
|
</a> - {{ ref.context }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div id="tab-{{ verse.verse }}-historical" class="tab-content" style="display: none; color: var(--text-secondary); line-height: 1.7;">
|
|
{{ commentaries[verse.verse].historical|safe }}
|
|
</div>
|
|
|
|
<div id="tab-{{ verse.verse }}-questions" class="tab-content" style="display: none; color: var(--text-secondary); line-height: 1.7;">
|
|
<ol style="padding-left: 1.25rem; margin: 0;">
|
|
{% for question in commentaries[verse.verse].questions %}
|
|
<li style="margin-bottom: 0.75rem;">{{ question }}</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% else %}
|
|
<div style="text-align: center; padding: 2rem; background: var(--surface-color); border-radius: var(--radius-lg); margin-bottom: 2rem; border: 1px solid var(--border-light);">
|
|
<p style="color: var(--text-secondary); margin: 0 0 1rem;">Commentary is still loading or not available for this chapter.</p>
|
|
<a href="/commentary/{{ book }}/{{ chapter }}" class="nav-button nav-button-primary">
|
|
Try Full Commentary
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block navigation %}
|
|
<div class="container">
|
|
<div class="navigation">
|
|
<a href="/book/{{ book }}" class="nav-button" style="font-size: 1.2rem;">
|
|
← All Chapters
|
|
</a>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
{% if chapter > 1 %}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter - 1 }}" class="nav-button" style="font-size: 1.2rem;">
|
|
← {{ book }} {{ chapter - 1 }}
|
|
</a>
|
|
{% endif %}
|
|
{% if chapter < chapters|length %}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter + 1 }}" class="nav-button nav-button-primary" style="font-size: 1.2rem;">
|
|
{{ book }} {{ chapter + 1 }} →
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function toggleReadingOptions() {
|
|
const options = document.getElementById('readingOptions');
|
|
options.style.display = options.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
|
|
function updateFontSize(value) {
|
|
const container = document.getElementById('versesContainer');
|
|
container.style.fontSize = value + 'px';
|
|
document.getElementById('fontSizeValue').textContent = value + 'px';
|
|
localStorage.setItem('kjv-font-size', value);
|
|
}
|
|
|
|
function updateLineHeight(value) {
|
|
const verses = document.querySelectorAll('.verse');
|
|
verses.forEach(verse => {
|
|
verse.style.lineHeight = value;
|
|
});
|
|
document.getElementById('lineHeightValue').textContent = value;
|
|
localStorage.setItem('kjv-line-height', value);
|
|
}
|
|
|
|
function toggleVerseNumbers(show) {
|
|
const numbers = document.querySelectorAll('.verse-number');
|
|
numbers.forEach(number => {
|
|
number.style.display = show ? 'inline' : 'none';
|
|
});
|
|
localStorage.setItem('kjv-show-verse-numbers', show);
|
|
}
|
|
|
|
function copyVerseLink(verseNumber) {
|
|
const url = window.location.origin + window.location.pathname + '#verse-' + verseNumber;
|
|
navigator.clipboard.writeText(url).then(() => {
|
|
showToast('Verse ' + verseNumber + ' link copied to clipboard!');
|
|
});
|
|
}
|
|
|
|
function addNote(verseNumber) {
|
|
showToast('Note feature coming soon!');
|
|
}
|
|
|
|
function highlightVerse(verseNumber) {
|
|
const verse = document.getElementById('verse-' + verseNumber);
|
|
verse.classList.toggle('verse-highlight');
|
|
|
|
const highlighted = verse.classList.contains('verse-highlight');
|
|
showToast(highlighted ? 'Verse ' + verseNumber + ' highlighted!' : 'Highlight removed from Verse ' + verseNumber);
|
|
}
|
|
|
|
function navigateToVerse(verseNumber) {
|
|
location.hash = 'verse-' + verseNumber;
|
|
showToast('Navigated to Verse ' + verseNumber);
|
|
}
|
|
|
|
function scrollToTop() {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
function switchCommentaryTab(verseNumber, tabName) {
|
|
// Hide all tabs for this verse
|
|
const tabContents = document.querySelectorAll(`#commentary-verse-${verseNumber} .tab-content`);
|
|
tabContents.forEach(tab => tab.style.display = 'none');
|
|
|
|
// Deactivate all tab buttons
|
|
const tabButtons = document.querySelectorAll(`#commentary-verse-${verseNumber} .tab`);
|
|
tabButtons.forEach(button => {
|
|
button.classList.remove('active');
|
|
button.style.borderBottom = '2px solid transparent';
|
|
button.style.color = 'var(--text-secondary)';
|
|
});
|
|
|
|
// Activate the selected tab
|
|
document.getElementById(`tab-${verseNumber}-${tabName}`).style.display = 'block';
|
|
|
|
// Activate the tab button
|
|
const activeButton = document.querySelector(`#commentary-verse-${verseNumber} .tab:nth-child(${tabName === 'analysis' ? 1 : tabName === 'historical' ? 2 : 3})`);
|
|
activeButton.classList.add('active');
|
|
activeButton.style.borderBottom = '2px solid var(--primary-color)';
|
|
activeButton.style.color = 'var(--primary-color)';
|
|
activeButton.style.fontWeight = '500';
|
|
}
|
|
|
|
function showToast(message) {
|
|
const toast = document.createElement('div');
|
|
toast.textContent = message;
|
|
toast.style.cssText = `
|
|
position: fixed;
|
|
top: 2rem;
|
|
right: 2rem;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: var(--radius-md);
|
|
z-index: 1000;
|
|
font-size: 0.875rem;
|
|
animation: slideIn 0.3s ease;
|
|
`;
|
|
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => {
|
|
toast.style.animation = 'slideOut 0.3s ease';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 2000);
|
|
}
|
|
|
|
// Load saved preferences
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
// Highlight verse from URL hash
|
|
if (window.location.hash) {
|
|
setTimeout(() => {
|
|
const target = document.querySelector(window.location.hash);
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
|
// Extract verse number from the hash
|
|
const verseMatch = window.location.hash.match(/verse-(\d+)/);
|
|
if (verseMatch && verseMatch[1]) {
|
|
showToast('Navigated to Verse ' + verseMatch[1]);
|
|
|
|
// If the verse has commentary, highlight the commentary card too
|
|
const commentaryCard = document.getElementById(`commentary-verse-${verseMatch[1]}`);
|
|
if (commentaryCard) {
|
|
commentaryCard.style.border = '2px solid var(--primary-color)';
|
|
commentaryCard.style.boxShadow = 'var(--shadow-md)';
|
|
setTimeout(() => {
|
|
commentaryCard.style.border = '1px solid var(--border-light)';
|
|
commentaryCard.style.boxShadow = 'var(--shadow-sm)';
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
// Apply highlighting
|
|
target.style.backgroundColor = 'rgba(255, 235, 59, 0.3)';
|
|
target.style.padding = '0.1rem 0.2rem';
|
|
target.style.borderRadius = '3px';
|
|
setTimeout(() => {
|
|
target.style.backgroundColor = '';
|
|
target.style.padding = '';
|
|
target.style.borderRadius = '';
|
|
}, 2000);
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// Add cross-links from verses to commentary
|
|
document.querySelectorAll('.verse').forEach(verse => {
|
|
const verseNum = verse.id.replace('verse-', '');
|
|
const commentaryEl = document.getElementById(`commentary-verse-${verseNum}`);
|
|
|
|
if (commentaryEl) {
|
|
// Mark verses with commentary
|
|
const verseTools = verse.querySelector('.verse-tools');
|
|
if (verseTools) {
|
|
const commentaryLink = document.createElement('a');
|
|
commentaryLink.href = `#commentary-verse-${verseNum}`;
|
|
commentaryLink.className = 'verse-tool';
|
|
commentaryLink.title = `View commentary for Verse ${verseNum}`;
|
|
commentaryLink.innerHTML = '💡';
|
|
commentaryLink.onclick = function(e) {
|
|
e.preventDefault();
|
|
commentaryEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
commentaryEl.style.border = '2px solid var(--primary-color)';
|
|
commentaryEl.style.boxShadow = 'var(--shadow-md)';
|
|
setTimeout(() => {
|
|
commentaryEl.style.border = '1px solid var(--border-light)';
|
|
commentaryEl.style.boxShadow = 'var(--shadow-sm)';
|
|
}, 3000);
|
|
return false;
|
|
};
|
|
verseTools.appendChild(commentaryLink);
|
|
}
|
|
|
|
// Add visual indicator to verses with commentary
|
|
const verseNumber = verse.querySelector('.verse-number');
|
|
if (verseNumber) {
|
|
const indicator = document.createElement('span');
|
|
indicator.style.cssText = `
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-color);
|
|
margin-left: 2px;
|
|
vertical-align: text-top;
|
|
`;
|
|
verseNumber.appendChild(indicator);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add CSS animations
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes slideIn {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
@keyframes slideOut {
|
|
from { transform: translateX(0); opacity: 1; }
|
|
to { transform: translateX(100%); opacity: 0; }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
{% endblock %}
|