mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +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>
355 lines
13 KiB
HTML
355 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Parables of Jesus - KJV Study{% endblock %}
|
|
{% block description %}Explore the parables of Jesus Christ with interpretations, cultural context, and theological significance from the Gospels.{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.parable-section {
|
|
margin: 1.5rem 0;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.parable-section:not(:first-of-type) {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.parable-entry {
|
|
margin: 1.5rem 0 2rem 0;
|
|
}
|
|
|
|
.parable-name {
|
|
font-size: 1.8rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.parable-name a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.parable-name a:hover {
|
|
color: var(--link-hover);
|
|
border-bottom: 1px solid var(--link-hover);
|
|
}
|
|
|
|
.parable-title {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.parable-description {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.parable-actions {
|
|
margin: 0.5rem 0 1rem;
|
|
}
|
|
|
|
.parables-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);
|
|
}
|
|
|
|
.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 {
|
|
.parables-actions,
|
|
.parable-actions,
|
|
.toc {
|
|
display: none !important;
|
|
}
|
|
|
|
.parable-description,
|
|
.verse-text,
|
|
.intro-text {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.parable-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>Parables of Jesus</h1>
|
|
<p class="subtitle">Teaching in Earthly Stories with Heavenly Meanings</p>
|
|
|
|
<div class="parables-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="/parables/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">Our Lord's parables</span> constitute a distinctive teaching method wherein spiritual truths are conveyed through familiar imagery drawn from daily life—agriculture, commerce, domestic affairs, and social customs.<label for="sn-parables" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-parables" class="margin-toggle"/>
|
|
<span class="sidenote">The Greek παραβολή (<em>parabolē</em>) literally means "a placing alongside"—a comparison or analogy. The Hebrew מָשָׁל (<em>mashal</em>) has broader meaning, encompassing proverbs, riddles, and similitudes. Christ employed this rabbinic teaching method to both reveal and conceal truth.</span> These narratives served dual purposes: to illuminate kingdom mysteries for receptive hearts while hiding truth from those who rejected the light.</p>
|
|
|
|
<p class="intro-text">When the disciples inquired why He spoke in parables, Christ quoted Isaiah's prophecy concerning judicial blindness upon those who persistently refuse divine revelation.<label for="sn-purpose" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-purpose" class="margin-toggle"/>
|
|
<span class="sidenote">Matthew 13:10-17 records Christ's explanation. Parables rewarded diligent seekers with deeper understanding while leaving casual observers with mere stories. This discriminating function fulfilled Isaiah 6:9-10, demonstrating the principle that to those who have, more is given.</span> The parables thus separate true disciples from mere curiosity-seekers, requiring contemplation and spiritual discernment for proper interpretation.</p>
|
|
</section>
|
|
|
|
{% for category, parables in parables_data.items() %}
|
|
<section class="parable-section">
|
|
<h2>{{ category }}</h2>
|
|
|
|
{% for parable_name, parable in parables.items() %}
|
|
<article class="parable-entry">
|
|
<h3 class="parable-name"><a href="/parables/{{ parable_name|slugify }}">{{ parable_name }}</a></h3>
|
|
<p class="parable-title">{{ parable.title }}</p>
|
|
|
|
{% if resource_pdf_available %}
|
|
<div class="parable-actions">
|
|
<a class="parable-download-btn" href="/parables/{{ parable_name|slugify }}/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>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="parable-description">
|
|
<p>{{ parable.description | link_verses | link_names | safe }}</p>
|
|
</div>
|
|
|
|
{% if parable.verses %}
|
|
<div class="verse-list">
|
|
{% for verse in parable.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>Principles of Parabolic Interpretation</h2>
|
|
<p class="intro-text">Proper understanding of parables requires adherence to sound hermeneutical principles:</p>
|
|
|
|
<p class="intro-text"><span class="newthought">One central truth</span>, for most parables illustrate a single main point. Seeking symbolic meaning in every detail often leads to fanciful allegorizing. The primary lesson should govern interpretation.<label for="sn-interpretation" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-interpretation" class="margin-toggle"/>
|
|
<span class="sidenote">Church history records numerous examples of excessive allegorization. Augustine interpreted the Good Samaritan's every detail symbolically: the inn represented the church, the two pence the sacraments, the innkeeper the apostle Paul. Such elaboration, though edifying in intent, ventures beyond the text's plain meaning.</span></p>
|
|
|
|
<p class="intro-text"><span class="newthought">Historical and cultural context</span>, understanding the agricultural practices, social customs, and religious background of first-century Palestine illuminates many parables. What seemed commonplace to Christ's original audience requires explanation for modern readers.</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Christ's own interpretations</span>, when provided, establish the authoritative framework. The parables of the Sower, the Wheat and Tares, and the Unjust Judge all receive dominical exposition, demonstrating the proper hermeneutical approach.</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Kingdom emphasis</span>, as many parables illuminate aspects of God's kingdom—its nature, growth, value, and final consummation. Together they present a comprehensive doctrine of the kingdom in its various phases and manifestations.</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, .parable-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, .parable-name, .parable-description > p, .verse-item');
|
|
});
|
|
</script>
|
|
{% endblock %}
|