mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
1197 lines
41 KiB
HTML
1197 lines
41 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>
|
|
.chapter-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 400px;
|
|
gap: 2rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Override any container restrictions */
|
|
.container, .narrow-container {
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.scofield-commentary {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
font-family: 'Crimson Text', serif;
|
|
height: fit-content;
|
|
position: sticky;
|
|
top: 2rem;
|
|
max-height: calc(100vh - 4rem);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.scofield-commentary h3 {
|
|
font-size: 1.2rem;
|
|
color: #8b4513;
|
|
margin: 0 0 1rem 0;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #8b4513;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.commentary-verse {
|
|
margin-bottom: 1.5rem;
|
|
padding: 1rem;
|
|
background: white;
|
|
border-radius: 6px;
|
|
border-left: 4px solid #8b4513;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.commentary-verse-ref {
|
|
font-weight: bold;
|
|
color: #8b4513;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.commentary-text {
|
|
line-height: 1.6;
|
|
margin-bottom: 1rem;
|
|
color: #333;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.theological-notes {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 4px;
|
|
padding: 0.75rem;
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.theological-notes h4 {
|
|
font-size: 0.85rem;
|
|
color: #856404;
|
|
margin: 0 0 0.5rem 0;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.theological-note {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #856404;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.cross-references {
|
|
background: #e7f3ff;
|
|
border: 1px solid #bee5eb;
|
|
border-radius: 4px;
|
|
padding: 0.75rem;
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.cross-references h4 {
|
|
font-size: 0.85rem;
|
|
color: #0c5460;
|
|
margin: 0 0 0.5rem 0;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.cross-ref-link {
|
|
color: #0c5460;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
margin-right: 0.5rem;
|
|
border-bottom: 1px dotted #0c5460;
|
|
}
|
|
|
|
.cross-ref-link:hover {
|
|
color: #0a4e5c;
|
|
border-bottom: 1px solid #0a4e5c;
|
|
}
|
|
|
|
.hebrew-insights {
|
|
background: #f0f8e7;
|
|
border: 1px solid #c3d69b;
|
|
border-radius: 4px;
|
|
padding: 0.75rem;
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.hebrew-insights h4 {
|
|
font-size: 0.85rem;
|
|
color: #4a5c23;
|
|
margin: 0 0 0.5rem 0;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.hebrew-term {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #4a5c23;
|
|
}
|
|
|
|
.hebrew-word {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.verse-highlight-scofield {
|
|
background: linear-gradient(120deg, #a8e6cf 0%, #dcedc1 100%);
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.verse-highlight-scofield:hover {
|
|
background: linear-gradient(120deg, #8fbc8f 0%, #98fb98 100%);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.chapter-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.scofield-commentary {
|
|
position: static;
|
|
max-height: none;
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
<style>
|
|
.chapter-container {
|
|
position: relative;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
padding-right: 320px; /* Space for margin notes */
|
|
}
|
|
|
|
/* Override any container restrictions */
|
|
.container,
|
|
.narrow-container {
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.margin-commentary {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 300px;
|
|
font-family: "Crimson Text", serif;
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.margin-note {
|
|
position: absolute;
|
|
right: 0;
|
|
background: #fefefe;
|
|
border-left: 3px solid #8b4513;
|
|
padding: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
border-radius: 0 4px 4px 0;
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
transition: all 0.3s ease;
|
|
max-width: 280px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.margin-note.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.margin-note-ref {
|
|
font-weight: bold;
|
|
color: #8b4513;
|
|
font-size: 0.75rem;
|
|
margin-bottom: 0.25rem;
|
|
border-bottom: 1px solid #8b4513;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
.margin-note-text {
|
|
color: #333;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.margin-cross-refs {
|
|
background: #f0f8ff;
|
|
padding: 0.25rem;
|
|
border-radius: 3px;
|
|
margin: 0.25rem 0;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.margin-theological {
|
|
background: #fff8dc;
|
|
padding: 0.25rem;
|
|
border-radius: 3px;
|
|
margin: 0.25rem 0;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.margin-hebrew {
|
|
background: #f0fff0;
|
|
padding: 0.25rem;
|
|
border-radius: 3px;
|
|
margin: 0.25rem 0;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.chapter-container {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.margin-commentary {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.chapter-text .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: 500 !important;
|
|
color: var(--primary-light) !important;
|
|
margin-right: 0.25rem !important;
|
|
user-select: none !important;
|
|
cursor: pointer !important;
|
|
font-family: 'Crimson Text', 'Times New Roman', serif !important;
|
|
line-height: normal !important;
|
|
vertical-align: super !important;
|
|
position: relative !important;
|
|
display: inline !important;
|
|
float: none !important;
|
|
transform: none !important;
|
|
top: auto !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
bottom: auto !important;
|
|
transition: all 0.2s ease !important;
|
|
padding: 0.1rem 0.2rem !important;
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
sup.verse-number:hover {
|
|
color: var(--accent-color) !important;
|
|
background-color: rgba(139, 92, 246, 0.15) !important;
|
|
}
|
|
|
|
sup.verse-number:active {
|
|
background-color: rgba(139, 92, 246, 0.25) !important;
|
|
transform: scale(1.1) !important;
|
|
}
|
|
|
|
.ai-commentary-link {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
transition: color 0.2s ease;
|
|
font-family: 'Crimson Text', 'Times New Roman', serif;
|
|
}
|
|
|
|
.ai-commentary-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.highlight-verse,
|
|
.verse-highlight,
|
|
.highlight-verse {
|
|
background-color: rgba(255, 235, 59, 0.3) !important;
|
|
padding: 0.1rem 0.2rem !important;
|
|
border-radius: 3px !important;
|
|
animation: pulse-highlight 2s ease;
|
|
}
|
|
|
|
.verse-underlined {
|
|
text-decoration: underline !important;
|
|
text-decoration-color: var(--primary-light) !important;
|
|
text-decoration-thickness: 2px !important;
|
|
text-underline-offset: 4px !important;
|
|
background-color: rgba(139, 92, 246, 0.08) !important;
|
|
padding: 0.3rem 0.4rem !important;
|
|
border-radius: 5px !important;
|
|
border-left: 4px solid var(--primary-light) !important;
|
|
margin-left: -0.4rem !important;
|
|
padding-left: 0.7rem !important;
|
|
box-shadow: 0 1px 3px rgba(139, 92, 246, 0.1) !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
@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 {
|
|
padding: 0.5rem 0;
|
|
margin-bottom: 1rem;
|
|
font-family: 'Crimson Text', 'Times New Roman', serif;
|
|
}
|
|
|
|
.chapter-nav-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
font-family: 'Crimson Text', 'Times New Roman', serif;
|
|
}
|
|
|
|
.chapter-info {
|
|
font-size: 0.9rem;
|
|
font-weight: normal;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-family: 'Crimson Text', 'Times New Roman', serif;
|
|
}
|
|
|
|
.verse-highlight {
|
|
background: linear-gradient(120deg, #fff59d 0%, #ffee58 100%);
|
|
background-size: 100% 40%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 60%;
|
|
font-family: 'Crimson Text', 'Times New Roman', serif;
|
|
}
|
|
|
|
.verse-text {
|
|
font-family: 'Crimson Text', 'Times New Roman', serif;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
color: var(--text-primary);
|
|
font-weight: 400;
|
|
letter-spacing: 0.01em;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.chapter-text {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.chapter-text .verse-underlined {
|
|
display: inline-block;
|
|
min-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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: 1.1rem;
|
|
line-height: 1.8;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.chapter-text sup.verse-number {
|
|
font-size: 0.65rem !important;
|
|
}
|
|
|
|
.verse-underlined {
|
|
text-decoration-thickness: 1px !important;
|
|
text-underline-offset: 2px !important;
|
|
padding: 0.2rem 0.3rem !important;
|
|
border-left-width: 3px !important;
|
|
margin-left: -0.3rem !important;
|
|
padding-left: 0.5rem !important;
|
|
font-size: 1.05rem !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 %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="chapter-container">
|
|
<div class="main-content" style="min-width: 0;">
|
|
<div class="chapter-navigation" style="font-family: 'Crimson Text', 'Times New Roman', serif;">
|
|
<div class="chapter-nav-content" style="font-family: 'Crimson Text', 'Times New Roman', serif;">
|
|
<div class="chapter-info" style="font-family: 'Crimson Text', 'Times New Roman', serif;">
|
|
{{ book }} {{ chapter }} (KJV)
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="text-center mb-4" style="font-family: 'Crimson Text', 'Times New Roman', serif;">
|
|
<h1 class="chapter-title" style="font-family: 'Crimson Text', 'Times New Roman', serif;">{{ book }} {{ chapter }}</h1>
|
|
<p style="font-size: 0.85rem; color: var(--text-secondary); margin: 0.5rem 0 1rem 0; font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Crimson Text', 'Times New Roman', serif;">
|
|
Authorized King James Version (1769) with <a href="/book/{{ book }}/commentary" class="ai-commentary-link" style="font-family: 'Crimson Text', 'Times New Roman', serif;">AI Commentary</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="verses-container" id="versesContainer" style="font-family: 'Crimson Text', 'Times New Roman', serif;">
|
|
<div class="chapter-text" style="font-family: 'Crimson Text', 'Times New Roman', serif;">
|
|
{% for verse in verses %}
|
|
{% if not loop.first %}<br>{% endif %}<span class="verse" id="verse-{{ verse.verse }}" style="position: relative; display: inline;"><sup class="verse-number" title="Verse {{ verse.verse }}" onclick="navigateToVerse({{ verse.verse }})" style="font-family: 'Crimson Text', 'Times New Roman', serif;">{{ verse.verse }}</sup><span style="font-family: 'Crimson Text', 'Times New Roman', serif;">{{ verse.text }}</span><span class="verse-tools"><a href="#verse-{{ verse.verse }}" class="verse-tool" title="Link to this verse" onclick="copyVerseLink({{ verse.verse }}); return false;">🔗</a><a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse.verse }}" class="verse-tool" title="Go to this verse">🔍</a></span></span>{% 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>
|
|
|
|
<div class="scofield-commentary">
|
|
<h3>📖 Scofield Commentary</h3>
|
|
<div id="commentary-content">
|
|
<div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 8px; margin-bottom: 1rem;">
|
|
<h4 style="color: #8b4513; margin: 0 0 1rem 0; font-size: 1rem;">📖 Scofield Reference Commentary</h4>
|
|
<p style="color: #666; font-style: italic; margin: 0 0 0.5rem 0; font-size: 0.9rem;">
|
|
Click any verse number to view detailed commentary, cross-references, and theological notes.
|
|
</p>
|
|
<p style="color: #8b4513; margin: 0; font-size: 0.8rem; font-weight: 600;">
|
|
Try clicking verse 1, 3, or 26 to see comprehensive annotations!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const scofieldCommentary = {{ scofield_commentary|tojson|safe }};
|
|
|
|
function showScofieldCommentary(book, chapter, verse) {
|
|
const commentaryContent = document.getElementById('commentary-content');
|
|
|
|
// Get commentary for this verse
|
|
const bookData = scofieldCommentary[book];
|
|
if (!bookData) {
|
|
commentaryContent.innerHTML = '<p style="color: #666; font-style: italic;">No commentary available for this book.</p>';
|
|
return;
|
|
}
|
|
|
|
const chapterData = bookData[chapter];
|
|
if (!chapterData) {
|
|
commentaryContent.innerHTML = '<p style="color: #666; font-style: italic;">No commentary available for this chapter.</p>';
|
|
return;
|
|
}
|
|
|
|
const verseData = chapterData[verse];
|
|
if (!verseData) {
|
|
commentaryContent.innerHTML = '<p style="color: #666; font-style: italic;">No commentary available for this verse.</p>';
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<div class="commentary-verse">
|
|
<div class="commentary-verse-ref">${book} ${chapter}:${verse}</div>
|
|
<div class="commentary-text">${verseData.commentary}</div>
|
|
`;
|
|
|
|
// Add cross references if available
|
|
if (verseData.cross_references && verseData.cross_references.length > 0) {
|
|
html += `
|
|
<div class="cross-references">
|
|
<h4>✠ Cross References</h4>
|
|
${verseData.cross_references.map(ref => `<a href="#" class="cross-ref-link" onclick="navigateToReference('${ref}')">${ref}</a>`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Add theological notes if available
|
|
if (verseData.theological_notes && verseData.theological_notes.length > 0) {
|
|
html += `
|
|
<div class="theological-notes">
|
|
<h4>⛪ Theological Notes</h4>
|
|
${verseData.theological_notes.map(note => `<div class="theological-note">• ${note}</div>`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Add Hebrew insights if available
|
|
if (verseData.hebrew_insights) {
|
|
html += `
|
|
<div class="hebrew-insights">
|
|
<h4>📜 Hebrew Insights</h4>
|
|
${Object.entries(verseData.hebrew_insights).map(([word, meaning]) =>
|
|
`<div class="hebrew-term"><span class="hebrew-word">${word}:</span> ${meaning}</div>`
|
|
).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Add practical application if available
|
|
if (verseData.practical_application) {
|
|
html += `
|
|
<div class="theological-notes">
|
|
<h4>🔥 Application</h4>
|
|
<div class="theological-note">${verseData.practical_application}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Add prophetic significance if available
|
|
if (verseData.prophetic_significance) {
|
|
html += `
|
|
<div class="cross-references">
|
|
<h4>🔮 Prophetic Significance</h4>
|
|
<div style="font-size: 0.85rem; color: #0c5460;">${verseData.prophetic_significance}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += '</div>';
|
|
commentaryContent.innerHTML = html;
|
|
}
|
|
|
|
function navigateToReference(reference) {
|
|
// Parse reference like "John 1:1" or "1 Corinthians 15:3"
|
|
const parts = reference.split(' ');
|
|
let book, chapterVerse;
|
|
|
|
if (parts[0] === '1' || parts[0] === '2') {
|
|
book = parts[0] + ' ' + parts[1];
|
|
chapterVerse = parts[2];
|
|
} else {
|
|
book = parts[0];
|
|
chapterVerse = parts[1];
|
|
}
|
|
|
|
const [chapter, verse] = chapterVerse.split(':');
|
|
window.open(`/book/${book}/chapter/${chapter}#verse-${verse}`, '_blank');
|
|
}
|
|
|
|
// Override existing navigateToVerse function to also show Scofield commentary
|
|
const originalNavigateToVerse = window.navigateToVerse || function() {};
|
|
|
|
window.navigateToVerse = function(verseNumber) {
|
|
// Call original function if it exists
|
|
originalNavigateToVerse(verseNumber);
|
|
|
|
const book = '{{ book }}';
|
|
const chapter = '{{ chapter }}';
|
|
|
|
// Highlight the verse
|
|
document.querySelectorAll('.verse-highlight-scofield').forEach(el => {
|
|
el.classList.remove('verse-highlight-scofield');
|
|
});
|
|
|
|
const verseElement = document.getElementById(`verse-${verseNumber}`);
|
|
if (verseElement) {
|
|
verseElement.classList.add('verse-highlight-scofield');
|
|
}
|
|
|
|
// Show commentary
|
|
showScofieldCommentary(book, chapter, verseNumber.toString());
|
|
};
|
|
|
|
// Add click handlers to verse text for commentary
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const verses = document.querySelectorAll('.verse');
|
|
verses.forEach(verse => {
|
|
verse.addEventListener('click', function() {
|
|
const verseNum = this.querySelector('sup.verse-number');
|
|
if (verseNum) {
|
|
const verseNumber = verseNum.textContent;
|
|
window.navigateToVerse(parseInt(verseNumber));
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
|
|
|
|
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) {
|
|
// Remove previous underlines
|
|
document.querySelectorAll('.verse-underlined').forEach(el => {
|
|
el.classList.remove('verse-underlined');
|
|
});
|
|
|
|
// Set the hash and apply styling
|
|
const newHash = 'verse-' + verseNumber;
|
|
history.pushState(null, null, '#' + newHash);
|
|
|
|
// Apply underline styling to the clicked verse
|
|
const targetVerse = document.getElementById(newHash);
|
|
if (targetVerse) {
|
|
targetVerse.classList.add('verse-underlined');
|
|
targetVerse.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
|
// Update page title to include verse reference
|
|
const originalTitle = document.title.split(' - Verse')[0];
|
|
document.title = originalTitle + ' - Verse ' + verseNumber;
|
|
}
|
|
|
|
showToast('Navigated to Verse ' + verseNumber);
|
|
}
|
|
|
|
|
|
|
|
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
|
|
function highlightVerseFromHash() {
|
|
if (window.location.hash) {
|
|
const target = document.querySelector(window.location.hash);
|
|
if (target) {
|
|
// Remove any existing underlines first
|
|
document.querySelectorAll('.verse-underlined').forEach(el => {
|
|
el.classList.remove('verse-underlined');
|
|
});
|
|
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
|
// Extract verse number from the hash
|
|
const verseMatch = window.location.hash.match(/verse-(\d+)/);
|
|
if (verseMatch && verseMatch[1]) {
|
|
// Apply permanent underline styling to the verse
|
|
target.classList.add('verse-underlined');
|
|
|
|
// Also add temporary pulse highlight
|
|
target.classList.add('highlight-verse');
|
|
setTimeout(() => {
|
|
target.classList.remove('highlight-verse');
|
|
}, 2000);
|
|
|
|
// Update page title
|
|
const originalTitle = document.title.split(' - Verse')[0];
|
|
document.title = originalTitle + ' - Verse ' + 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Call on page load
|
|
setTimeout(highlightVerseFromHash, 100);
|
|
|
|
// Listen for hash changes to update verse highlighting
|
|
window.addEventListener('hashchange', highlightVerseFromHash);
|
|
|
|
// Listen for popstate (back/forward button) to update highlighting
|
|
window.addEventListener('popstate', function() {
|
|
setTimeout(highlightVerseFromHash, 50);
|
|
});
|
|
|
|
// 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 %}
|