mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-21 06:50:56 +00:00
kennethreitz
b50ea3176d
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
495 lines
14 KiB
HTML
495 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Verse of the Day - {{ daily_verse.reference }} - KJV Study{% endblock %}
|
|
{% block description %}Today's verse from the King James Bible: {{ daily_verse.reference }} - {{ daily_verse.text[:100] }}...{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
/* Hero verse section */
|
|
.votd-hero {
|
|
text-align: center;
|
|
padding: 2rem 0 3rem;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.votd-date {
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.votd-theme {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--link-color);
|
|
background: var(--code-bg);
|
|
padding: 0.3rem 1rem;
|
|
border-radius: 20px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.votd-title {
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
margin: 0 0 2rem 0;
|
|
color: var(--text-color);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.votd-verse {
|
|
font-size: 1.5rem;
|
|
line-height: 1.8;
|
|
font-style: italic;
|
|
color: var(--text-color);
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.votd-reference {
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
.votd-reference a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.votd-reference a:hover {
|
|
border-bottom-color: var(--link-color);
|
|
}
|
|
|
|
/* Divider */
|
|
.votd-divider {
|
|
text-align: center;
|
|
margin: 2.5rem 0;
|
|
color: var(--text-secondary);
|
|
font-size: 1.2rem;
|
|
letter-spacing: 0.5em;
|
|
}
|
|
|
|
/* Devotional content */
|
|
.votd-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.votd-section {
|
|
margin: 2.5rem auto;
|
|
max-width: 700px;
|
|
text-align: center;
|
|
}
|
|
|
|
.votd-section-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.votd-section p {
|
|
font-size: 1.5rem;
|
|
line-height: 1.9;
|
|
margin: 0 auto;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Application card */
|
|
.votd-application {
|
|
background: var(--code-bg);
|
|
border-radius: 8px;
|
|
padding: 1.5rem 2rem;
|
|
margin: 2.5rem auto;
|
|
text-align: left;
|
|
max-width: 550px;
|
|
}
|
|
|
|
.votd-application p {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* Prayer card */
|
|
.votd-prayer {
|
|
background: linear-gradient(135deg, rgba(74, 124, 89, 0.08) 0%, rgba(74, 124, 89, 0.03) 100%);
|
|
border-left: 3px solid var(--link-color);
|
|
border-radius: 0 8px 8px 0;
|
|
padding: 1.5rem 2rem;
|
|
margin: 2.5rem auto;
|
|
text-align: left;
|
|
max-width: 550px;
|
|
}
|
|
|
|
.votd-prayer p {
|
|
font-style: italic;
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
[data-theme="dark"] .votd-prayer {
|
|
background: linear-gradient(135deg, rgba(74, 124, 89, 0.15) 0%, rgba(74, 124, 89, 0.05) 100%);
|
|
}
|
|
|
|
/* Actions */
|
|
.votd-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin: 2rem 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.votd-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.votd-action-btn:hover {
|
|
color: var(--link-color);
|
|
border-color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.votd-action-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Further study - compact */
|
|
.votd-study-links {
|
|
text-align: center;
|
|
margin: 3rem 0 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.votd-study-links p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.votd-study-links a {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
/* Archive - collapsible */
|
|
.votd-archive {
|
|
margin-top: 3rem;
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.votd-archive-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
padding: 0.5rem 0;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.votd-archive-toggle:hover {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.votd-archive-toggle svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.votd-archive-toggle.open svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.votd-archive-content {
|
|
display: none;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.votd-archive-content.open {
|
|
display: block;
|
|
}
|
|
|
|
.votd-archive table {
|
|
width: 100%;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.votd-archive th {
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Large font mode */
|
|
[data-font-size="large"] .votd-verse {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
[data-font-size="large"] .votd-title {
|
|
font-size: 2.3rem;
|
|
}
|
|
|
|
[data-font-size="large"] .votd-section p,
|
|
[data-font-size="large"] .votd-application p,
|
|
[data-font-size="large"] .votd-prayer p {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
/* Selection highlight for keyboard nav */
|
|
.votd-hero.selected,
|
|
.votd-section.selected,
|
|
.votd-application.selected,
|
|
.votd-prayer.selected,
|
|
.votd-actions.selected {
|
|
outline: 2px solid var(--link-color);
|
|
outline-offset: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.votd-actions,
|
|
.votd-archive {
|
|
display: none;
|
|
}
|
|
|
|
.votd-hero {
|
|
padding: 0 0 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="votd-hero">
|
|
<p class="votd-date">{{ daily_verse.date }}</p>
|
|
|
|
{% if daily_verse.devotional %}
|
|
<span class="votd-theme">{{ daily_verse.devotional.theme }}</span>
|
|
<h1 class="votd-title">{{ daily_verse.devotional.title }}</h1>
|
|
{% else %}
|
|
<h1 class="votd-title">Verse of the Day</h1>
|
|
{% endif %}
|
|
|
|
<p class="votd-verse">{{ daily_verse.text }}</p>
|
|
<p class="votd-reference">
|
|
<a href="/book/{{ daily_verse.book }}/chapter/{{ daily_verse.chapter }}#verse-{{ daily_verse.verse }}">{{ daily_verse.reference }}</a>
|
|
</p>
|
|
</div>
|
|
|
|
{% if daily_verse.devotional %}
|
|
<div class="votd-divider">· · ·</div>
|
|
|
|
<div class="votd-content">
|
|
<section class="votd-section">
|
|
<p><span class="newthought">{{ daily_verse.devotional.opening.split(' ')[:3] | join(' ') }}</span> {{ daily_verse.devotional.opening.split(' ')[3:] | join(' ') }}</p>
|
|
</section>
|
|
|
|
<section class="votd-section">
|
|
<p>{{ daily_verse.devotional.meditation }}</p>
|
|
</section>
|
|
|
|
<div class="votd-application">
|
|
<p class="votd-section-label">For Today</p>
|
|
<p>{{ daily_verse.devotional.application }}</p>
|
|
</div>
|
|
|
|
<div class="votd-prayer">
|
|
<p class="votd-section-label">Prayer</p>
|
|
<p>{{ daily_verse.devotional.prayer }}</p>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="votd-content">
|
|
<section class="votd-section">
|
|
<p><span class="newthought">The practice</span> of daily meditation upon Scripture has been commended by the godly throughout the ages. Consider what this verse reveals about God's character and how it applies to your life today.</p>
|
|
</section>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="votd-actions">
|
|
<button class="votd-action-btn" id="listen-btn" title="Listen to devotional">
|
|
<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>
|
|
<a class="votd-action-btn" href="/book/{{ daily_verse.book }}/chapter/{{ daily_verse.chapter }}/verse/{{ daily_verse.verse }}#commentary">
|
|
<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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
</svg>
|
|
Full Commentary
|
|
</a>
|
|
<a class="votd-action-btn" href="/book/{{ daily_verse.book }}/chapter/{{ daily_verse.chapter }}">
|
|
<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="M9 12h6m-6 4h6m2 5H7a2 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>
|
|
Read Chapter
|
|
</a>
|
|
</div>
|
|
|
|
<div class="votd-archive">
|
|
<div class="votd-archive-toggle" id="archive-toggle">
|
|
<span>Past 30 Days</span>
|
|
<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="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
<div class="votd-archive-content" id="archive-content">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Title</th>
|
|
<th>Scripture</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for verse in past_verses %}
|
|
<tr>
|
|
<td><a href="/verse-of-the-day/{{ verse.date }}">{{ verse.date }}</a></td>
|
|
<td><a href="/verse-of-the-day/{{ verse.date }}">{% if verse.devotional %}{{ verse.devotional.title }}{% else %}—{% endif %}</a></td>
|
|
<td><a href="/book/{{ verse.book }}/chapter/{{ verse.chapter }}#verse-{{ verse.verse }}">{{ verse.reference }}</a></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
// Archive toggle
|
|
var toggle = document.getElementById('archive-toggle');
|
|
var content = document.getElementById('archive-content');
|
|
|
|
toggle.addEventListener('click', function() {
|
|
toggle.classList.toggle('open');
|
|
content.classList.toggle('open');
|
|
});
|
|
|
|
// Listen button - read the devotional
|
|
var listenBtn = document.getElementById('listen-btn');
|
|
var isPlaying = false;
|
|
|
|
listenBtn.addEventListener('click', function() {
|
|
if (isPlaying) {
|
|
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';
|
|
isPlaying = false;
|
|
return;
|
|
}
|
|
|
|
// Gather text to read
|
|
var parts = [];
|
|
var verse = document.querySelector('.votd-verse');
|
|
var reference = document.querySelector('.votd-reference');
|
|
var sections = document.querySelectorAll('.votd-section p, .votd-application p:not(.votd-section-label), .votd-prayer p:not(.votd-section-label)');
|
|
|
|
if (verse) parts.push(verse.textContent);
|
|
if (reference) parts.push(reference.textContent);
|
|
sections.forEach(function(p) {
|
|
if (!p.classList.contains('votd-section-label')) {
|
|
parts.push(p.textContent);
|
|
}
|
|
});
|
|
|
|
var fullText = parts.join('. ');
|
|
|
|
if (window.KJVSpeech && fullText) {
|
|
window.KJVSpeech.speak(fullText);
|
|
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';
|
|
isPlaying = true;
|
|
}
|
|
});
|
|
|
|
// Paragraph navigation (j/k or arrows)
|
|
var sections = Array.from(document.querySelectorAll('.votd-hero, .votd-section, .votd-application, .votd-prayer, .votd-actions'));
|
|
var selectedIndex = -1;
|
|
|
|
function clearSelection() {
|
|
sections.forEach(function(el) {
|
|
el.classList.remove('selected');
|
|
});
|
|
}
|
|
|
|
function selectSection(index) {
|
|
if (sections.length === 0) return;
|
|
clearSelection();
|
|
selectedIndex = Math.max(0, Math.min(index, sections.length - 1));
|
|
sections[selectedIndex].classList.add('selected');
|
|
sections[selectedIndex].scrollIntoView({
|
|
behavior: 'auto',
|
|
block: 'center'
|
|
});
|
|
}
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', function(e) {
|
|
// Don't trigger if typing in an input or sidebar is active
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|
if (window.KJVNav && window.KJVNav.sidebarActive) return;
|
|
|
|
if (e.key === 'Escape') {
|
|
if (isPlaying) {
|
|
listenBtn.click();
|
|
}
|
|
clearSelection();
|
|
selectedIndex = -1;
|
|
} else if (e.key === '[') {
|
|
// Previous day
|
|
e.preventDefault();
|
|
window.location.href = '/verse-of-the-day/{{ prev_date }}';
|
|
} else if (e.key === ']') {
|
|
// Next day
|
|
e.preventDefault();
|
|
window.location.href = '/verse-of-the-day/{{ next_date }}';
|
|
} else if (e.key === 't') {
|
|
// Jump to today
|
|
e.preventDefault();
|
|
window.location.href = '/verse-of-the-day';
|
|
} else if (e.key === 'j' || e.key === 'ArrowDown') {
|
|
// Next section
|
|
e.preventDefault();
|
|
selectSection(selectedIndex < 0 ? 0 : selectedIndex + 1);
|
|
} else if (e.key === 'k' || e.key === 'ArrowUp') {
|
|
// Previous section
|
|
e.preventDefault();
|
|
selectSection(selectedIndex <= 0 ? 0 : selectedIndex - 1);
|
|
} else if (e.key === ' ' && selectedIndex >= 0) {
|
|
// Space: read selected section
|
|
e.preventDefault();
|
|
var text = sections[selectedIndex].textContent;
|
|
if (text && window.KJVSpeech) {
|
|
window.KJVSpeech.toggle(text);
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|