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 %}Names of God - KJV Study{% endblock %}
|
|
{% block description %}Explore the sacred names and titles of God revealed in Scripture, from Elohim to Jehovah, with Hebrew meanings and theological significance.{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.name-section {
|
|
margin: 1.5rem 0;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.name-section:not(:first-of-type) {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.name-entry {
|
|
margin: 1.5rem 0 2rem 0;
|
|
}
|
|
|
|
.name-heading {
|
|
font-size: 1.8rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.name-heading a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.name-heading a:hover {
|
|
color: var(--link-hover);
|
|
border-bottom: 1px solid var(--link-hover);
|
|
}
|
|
|
|
.name-title {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.name-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;
|
|
}
|
|
|
|
.names-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);
|
|
}
|
|
|
|
.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 {
|
|
.names-actions,
|
|
.toc {
|
|
display: none !important;
|
|
}
|
|
|
|
.name-description,
|
|
.verse-text,
|
|
.intro-text {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.name-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 %}
|
|
|
|
{% block content %}
|
|
<h1>Names of God</h1>
|
|
<p class="subtitle">The Divine Names Revealed in Holy Scripture</p>
|
|
|
|
<div class="names-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 pdf_available %}
|
|
<a class="action-btn" href="/names-of-god/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 revelation of God's names</span> throughout Scripture unveils the character and attributes of the Almighty. Each name discloses some aspect of the divine nature—His power, mercy, faithfulness, or sovereignty.<label for="sn-names" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-names" class="margin-toggle"/>
|
|
<span class="sidenote">In Hebrew thought, a name represented the essential nature and character of its bearer. To know God's name meant intimate knowledge of His person and attributes—hence the sacred reverence with which the covenant name יהוה was treated.</span> These names were not arbitrarily chosen but divinely revealed, each one a window into the infinite perfections of the Godhead.</p>
|
|
|
|
<p class="intro-text">The multiplicity of divine names does not suggest multiple deities but rather the inexhaustible richness of the one true God. No single name could encompass His fullness; thus Scripture employs various appellations, each emphasizing different facets of His being and His relationship to His creation.<label for="sn-ineffable" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-ineffable" class="margin-toggle"/>
|
|
<span class="sidenote">The Kabbalistic tradition speaks of seventy-two names of God, though such enumerations venture beyond the clear teaching of Scripture. The biblical text itself reveals approximately fifteen primary names and numerous descriptive titles.</span></p>
|
|
</section>
|
|
|
|
{% for category, names in names_data.items() %}
|
|
<section class="name-section">
|
|
<h2>{{ category }}</h2>
|
|
|
|
{% for name_text, name in names.items() %}
|
|
<article class="name-entry">
|
|
<h3 class="name-heading">
|
|
<a href="/names-of-god/{{ name_text|slugify }}">{{ name_text }}</a>
|
|
</h3>
|
|
<p class="name-title">{{ name.title }}</p>
|
|
|
|
<div class="name-description">
|
|
<p>{{ name.description | link_verses | link_names | safe }}</p>
|
|
</div>
|
|
|
|
{% if name.verses %}
|
|
<div class="verse-list">
|
|
{% for verse in name.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 Significance of Divine Names</h2>
|
|
<p class="intro-text">Understanding God's names enriches our comprehension of His person and our relationship with Him:</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Progressive revelation</span>, wherein each name was revealed at a particular juncture in redemptive history, appropriate to the need of that moment. Abraham knew El Shaddai; Moses received the covenant name Jehovah; the psalmists celebrated Jehovah-Nissi and Jehovah-Shalom.</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Comprehensive provision</span>, for the various names disclose God's complete sufficiency for every human need. He is Provider (Jehovah-Jireh), Healer (Jehovah-Rapha), Peace (Jehovah-Shalom), Righteousness (Jehovah-Tsidkenu), and abiding Presence (Jehovah-Shammah).<label for="sn-compound" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-compound" class="margin-toggle"/>
|
|
<span class="sidenote">The compound names combining יהוה (Jehovah) with descriptive terms represent not different gods but different revelations of the one covenant-keeping God meeting specific needs of His people throughout their history.</span></p>
|
|
|
|
<p class="intro-text"><span class="newthought">Worship and reverence</span>, as proper understanding of God's names leads to appropriate adoration. The third commandment—"Thou shalt not take the name of the LORD thy God in vain"—demands reverent treatment not merely of the vocalized name but of all that God's name represents.</p>
|
|
|
|
<p class="intro-text"><span class="newthought">Christological fulfillment</span>, wherein the Old Testament names find their ultimate realization in Christ. He is Emmanuel (God with us), the Prince of Peace, our Righteousness, the great I AM who spoke to Moses from the burning bush. In Him dwells all the fullness of the Godhead bodily.</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, .name-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, .name-heading, .name-description > p, .verse-item');
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
<script>
|
|
document.body.dataset.resourceReader = 'true';
|
|
</script>
|