mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-20 14:30:57 +00:00
kennethreitz
b9aa030a35
Updated all Listen buttons across resource pages to toggle between Listen and Stop states when audio is playing. The button changes its icon and text to indicate current state, and clicking Stop halts the text-to-speech playback. Templates updated: - biblical_prophets.html - fruits_of_spirit.html - names_of_god.html - parables.html - resource_detail.html - resource_index.html - story_kids.html - topic_detail.html - twelve_apostles.html - women_of_the_bible.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
341 lines
12 KiB
HTML
341 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Biblical Prophets - KJV Study{% endblock %}
|
|
{% block description %}Explore the prophets of the Old Testament, from Isaiah to Malachi, their messages and Messianic prophecies.{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.prophet-section {
|
|
margin: 1.5rem 0;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.prophet-section:not(:first-of-type) {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.prophet-entry {
|
|
margin: 1.5rem 0 2rem 0;
|
|
}
|
|
|
|
.prophet-name {
|
|
font-size: 1.8rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.prophet-name a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prophet-name a:hover {
|
|
color: var(--link-hover);
|
|
border-bottom: 1px solid var(--link-hover);
|
|
}
|
|
|
|
.prophet-title {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.prophets-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin: 1rem 0 1.5rem;
|
|
}
|
|
|
|
.action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary, #666);
|
|
background: var(--code-bg, #f8f8f8);
|
|
border: 1px solid var(--border-color, #ddd);
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: var(--bg-color, #fff);
|
|
border-color: var(--link-color);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.action-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.action-btn.playing {
|
|
background: var(--link-color);
|
|
color: white;
|
|
border-color: var(--link-color);
|
|
}
|
|
|
|
.prophet-description {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.verse-list {
|
|
margin: 1.5rem 0 0 0;
|
|
}
|
|
|
|
.verse-item {
|
|
margin: 1.2rem 0;
|
|
padding-left: 1.5rem;
|
|
border-left: 2px solid #ddd;
|
|
}
|
|
|
|
.verse-ref {
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.verse-ref a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.verse-ref a:hover {
|
|
border-bottom-color: #333;
|
|
}
|
|
|
|
.verse-text {
|
|
max-width: 60%;
|
|
font-style: italic;
|
|
color: var(--text-secondary);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.intro-text {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.toc {
|
|
max-width: 55%;
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
border-left: 3px solid var(--border-color-darker);
|
|
}
|
|
|
|
.toc h2 {
|
|
margin-top: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.toc ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.toc li {
|
|
margin: 0.5rem 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.toc a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.toc a:hover {
|
|
color: var(--link-color);
|
|
border-bottom-color: var(--link-color);
|
|
}
|
|
|
|
.toc li.toc-h3 {
|
|
padding-left: 1.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media print {
|
|
.prophets-actions,
|
|
.toc {
|
|
display: none !important;
|
|
}
|
|
|
|
.prophet-description,
|
|
.verse-text,
|
|
.intro-text {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.prophet-entry {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.sidenote,
|
|
.marginnote {
|
|
display: block;
|
|
float: none;
|
|
width: 100%;
|
|
margin: 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
<script>
|
|
document.body.dataset.resourceReader = 'true';
|
|
</script>
|
|
|
|
{% block content %}
|
|
<h1>Biblical Prophets</h1>
|
|
<p class="subtitle">Messengers of the Most High</p>
|
|
|
|
<div class="prophets-actions">
|
|
<button class="action-btn" id="listen-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
|
|
</svg>
|
|
Listen
|
|
</button>
|
|
{% if resource_pdf_available %}
|
|
<a class="action-btn" href="/biblical-prophets/pdf">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Download PDF
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<nav class="toc" id="toc">
|
|
<h2>Contents</h2>
|
|
<ul id="toc-list"></ul>
|
|
</nav>
|
|
|
|
<section>
|
|
<p class="intro-text"><span class="newthought">The prophetic ministry</span> represents one of the most extraordinary phenomena in sacred history. These men, called by divine election and empowered by the Holy Spirit, declared "Thus saith the LORD" with absolute authority.<label for="sn-prophets" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-prophets" class="margin-toggle"/>
|
|
<span class="sidenote">The Hebrew term נָבִיא (<em>navi</em>) derives from a root meaning "to call" or "to announce," emphasizing the prophet's role as spokesman for God. The Greek προφήτης (<em>prophētēs</em>) carries similar meaning: one who speaks forth divine revelation.</span> They rebuked kings, warned nations, comforted the afflicted, and foretold events centuries before their fulfillment.</p>
|
|
|
|
<p class="intro-text">The prophets stood in that most solemn office—mediators between heaven and earth, bearing messages of both judgment and mercy. Their words, though often rejected in their own time, have proven unfailingly accurate in their predictions and eternally relevant in their moral and spiritual instruction.<label for="sn-messianic" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-messianic" class="margin-toggle"/>
|
|
<span class="sidenote">The prophets provided detailed predictions of Messiah's coming: His birthplace (Micah 5:2), His virgin birth (Isaiah 7:14), His suffering (Isaiah 53), His betrayal price (Zechariah 11:12), and countless other particulars fulfilled in Christ.</span></p>
|
|
</section>
|
|
|
|
{% for category, prophets in prophets_data.items() %}
|
|
<section class="prophet-section">
|
|
<h2>{{ category }}</h2>
|
|
|
|
{% for prophet_name, prophet in prophets.items() %}
|
|
<article class="prophet-entry">
|
|
<h3 class="prophet-name">
|
|
<a href="/biblical-prophets/{{ prophet_name|slugify }}">{{ prophet_name }}</a>
|
|
</h3>
|
|
<p class="prophet-title">{{ prophet.title }}</p>
|
|
|
|
<div class="prophet-description">
|
|
<p>{{ prophet.description | link_verses | link_names | safe }}</p>
|
|
</div>
|
|
|
|
{% if prophet.verses %}
|
|
<div class="verse-list">
|
|
{% for verse in prophet.verses %}
|
|
<div class="verse-item">
|
|
<div class="verse-ref">
|
|
{% set ref_parts = verse.reference.split(' ') %}
|
|
{% if ref_parts|length >= 2 %}
|
|
{% set chapter_verse = ref_parts[-1] %}
|
|
{% if ':' in chapter_verse %}
|
|
{% set chapter = chapter_verse.split(':')[0] %}
|
|
{% set verse_num = chapter_verse.split(':')[1] %}
|
|
{% set book = ' '.join(ref_parts[:-1]) %}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num }}">{{ verse.reference }}</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="verse-text">{{ verse.text | link_names | safe }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</article>
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
|
|
<section>
|
|
<h2>The Prophetic Office</h2>
|
|
<p class="intro-text">The Scriptures reveal several characteristics of the true prophet:</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Divine calling</span>, not self-appointed but commissioned by God Himself. Isaiah heard the voice asking "Whom shall I send?" Jeremiah was ordained before birth. Amos protested he was no prophet's son, yet the word of the Lord came to him.</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Forth-telling and fore-telling</span>, both proclaiming God's word to their generation and predicting future events. The immediate fulfillment of near prophecies authenticated their distant predictions concerning Messiah and the end times.<label for="sn-fulfillment" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-fulfillment" class="margin-toggle"/>
|
|
<span class="sidenote">Deuteronomy 18:22 provided the test: "When a prophet speaketh in the name of the LORD, if the thing follow not, nor come to pass, that is the thing which the LORD hath not spoken." A single false prophecy disqualified the claimant.</span></p>
|
|
|
|
<p class="intro-text"><span class="newthought">Suffering for truth</span>, often persecuted for their unpopular messages. Elijah fled from Jezebel. Jeremiah was cast into a dungeon. Zechariah was stoned in the temple court. Christ declared, "O Jerusalem, Jerusalem, thou that killest the prophets."</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Witnesses to Christ</span>, for the testimony of Jesus is the spirit of prophecy. All their varied ministries pointed forward to the coming Redeemer, who would Himself be the Prophet like unto Moses, speaking the Father's words with ultimate authority.</p>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Listen button handler
|
|
var listenBtn = document.getElementById('listen-btn');
|
|
var isListening = false;
|
|
if (listenBtn) {
|
|
listenBtn.addEventListener('click', function() {
|
|
if (isListening) {
|
|
if (window.KJVSpeech) window.KJVSpeech.stop();
|
|
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
|
|
isListening = false;
|
|
return;
|
|
}
|
|
var paragraphs = document.querySelectorAll('.intro-text, .prophet-description p, .verse-text');
|
|
var text = Array.from(paragraphs).map(function(p) {
|
|
return p.textContent.trim();
|
|
}).join(' ');
|
|
if (window.KJVSpeech && text) {
|
|
window.KJVSpeech.speak(text);
|
|
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
|
|
isListening = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Generate TOC from h2 and h3 headings
|
|
const tocList = document.getElementById('toc-list');
|
|
const headings = document.querySelectorAll('section h2, section h3, section article h3');
|
|
|
|
headings.forEach((heading) => {
|
|
if (!heading.id) {
|
|
heading.id = 'section-' + heading.textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-');
|
|
}
|
|
const li = document.createElement('li');
|
|
if (heading.tagName === 'H3') li.classList.add('toc-h3');
|
|
const a = document.createElement('a');
|
|
a.href = '#' + heading.id;
|
|
a.textContent = heading.textContent;
|
|
li.appendChild(a);
|
|
tocList.appendChild(li);
|
|
});
|
|
|
|
// Simple keyboard navigation
|
|
KJVNav.initSimpleNav('.action-btn, .intro-text, .prophet-name, .prophet-description > p, .verse-item');
|
|
});
|
|
</script>
|
|
{% endblock %}
|