mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
5940eb7453
Enhancement to cross-references feature: - Fetch actual verse text for each cross-reference - Display verse text in elegant hover tooltips - Support both light and dark mode styling - Add "(hover to preview)" hint to section description - Tooltips show reference and full verse text - Clean, minimal design matching Tufte CSS aesthetic This makes it much easier to explore related verses without leaving the current page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
329 lines
10 KiB
HTML
329 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ book }} {{ chapter }}:{{ verse_num }} - KJV Bible{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.verse-text {
|
|
font-size: 1.8rem;
|
|
line-height: 2.4rem;
|
|
margin: 2rem 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.verse-reference {
|
|
color: #666;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.share-container {
|
|
max-width: 60%;
|
|
margin: 1.5rem 0;
|
|
padding: 1rem;
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.share-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.share-buttons {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.share-btn {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
border: 1px solid var(--border-color-darker);
|
|
border-radius: 4px;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.share-btn:hover {
|
|
background: var(--code-bg);
|
|
border-color: var(--link-color);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.share-btn.twitter {
|
|
background: #1DA1F2;
|
|
color: white;
|
|
border-color: #1DA1F2;
|
|
}
|
|
|
|
.share-btn.twitter:hover {
|
|
background: #0d8bd9;
|
|
border-color: #0d8bd9;
|
|
}
|
|
|
|
.share-btn.facebook {
|
|
background: #4267B2;
|
|
color: white;
|
|
border-color: #4267B2;
|
|
}
|
|
|
|
.share-btn.facebook:hover {
|
|
background: #365899;
|
|
border-color: #365899;
|
|
}
|
|
|
|
.share-btn.copied {
|
|
background: #28a745;
|
|
color: white;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
/* Cross-reference tooltip styles */
|
|
.cross-ref-link {
|
|
position: relative;
|
|
cursor: help;
|
|
}
|
|
|
|
.cross-ref-tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 0.5rem;
|
|
background: var(--bg-color);
|
|
border: 1px solid var(--border-color-darker);
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
z-index: 1000;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.cross-ref-link:hover .cross-ref-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
.tooltip-verse-text {
|
|
font-style: italic;
|
|
color: var(--text-secondary);
|
|
margin-top: 0.5rem;
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .cross-ref-tooltip {
|
|
background: #2a2a2a;
|
|
border-color: #444;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.cross-ref-tooltip {
|
|
background: #2a2a2a;
|
|
border-color: #444;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>{{ book }} {{ chapter }}:{{ verse_num }}</h1>
|
|
<p class="subtitle"><a href="/books">Authorized King James Version</a></p>
|
|
|
|
<section>
|
|
<p class="verse-text">{{ verse_text | link_names | safe }}</p>
|
|
|
|
<nav style="margin: 1.5rem 0;">
|
|
<p>
|
|
<a href="/book/{{ book }}">← {{ book }}</a> |
|
|
<a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_num }}">View in Chapter {{ chapter }}</a>
|
|
{% if has_interlinear %} | <a href="/interlinear/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num }}">Interlinear</a>{% endif %}
|
|
{% if verse_num > 1 %} | <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num - 1 }}">← Verse {{ verse_num - 1 }}</a>{% endif %}
|
|
{% if verse_num < total_verses %} | <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num + 1 }}">Verse {{ verse_num + 1 }} →</a>{% endif %}
|
|
</p>
|
|
</nav>
|
|
|
|
<div class="share-container">
|
|
<div class="share-label">Share This Verse</div>
|
|
<div class="share-buttons">
|
|
<button class="share-btn" onclick="copyToClipboard()" id="copy-btn">
|
|
<span>📋</span> Copy
|
|
</button>
|
|
<a class="share-btn twitter"
|
|
href="https://twitter.com/intent/tweet?text={{ verse_text | striptags | urlencode }}%20—%20{{ book }}%20{{ chapter }}:{{ verse_num }}%20(KJV)&url={{ request.url }}"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<span>🐦</span> Tweet
|
|
</a>
|
|
<a class="share-btn facebook"
|
|
href="https://www.facebook.com/sharer/sharer.php?u={{ request.url }}"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<span>f</span> Share
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard() {
|
|
const verseText = {{ verse_text | striptags | tojson }};
|
|
const reference = "{{ book }} {{ chapter }}:{{ verse_num }} (KJV)";
|
|
const fullText = verseText + " — " + reference;
|
|
|
|
navigator.clipboard.writeText(fullText).then(function() {
|
|
const btn = document.getElementById('copy-btn');
|
|
const originalHTML = btn.innerHTML;
|
|
btn.classList.add('copied');
|
|
btn.innerHTML = '<span>✓</span> Copied!';
|
|
|
|
setTimeout(function() {
|
|
btn.classList.remove('copied');
|
|
btn.innerHTML = originalHTML;
|
|
}, 2000);
|
|
}, function(err) {
|
|
alert('Failed to copy: ' + err);
|
|
});
|
|
}
|
|
</script>
|
|
</section>
|
|
|
|
{% if cross_references %}
|
|
<section>
|
|
<h2>Cross References</h2>
|
|
<p>Related verses that illuminate this passage (hover to preview):</p>
|
|
<ul style="max-width: 60%; list-style: none; padding: 0;">
|
|
{% for ref in cross_references %}
|
|
<li style="margin: 1rem 0; padding-left: 1.5rem; border-left: 2px solid var(--border-color-dark);">
|
|
{% set ref_parts = ref.ref.rsplit(' ', 1) %}
|
|
{% if ref_parts|length == 2 %}
|
|
{% set book_name = ref_parts[0] %}
|
|
{% set chapter_verse = ref_parts[1] %}
|
|
{% if ':' in chapter_verse %}
|
|
{% set ch = chapter_verse.split(':')[0] %}
|
|
{% set v = chapter_verse.split(':')[1] %}
|
|
<strong><a href="/book/{{ book_name }}/chapter/{{ ch }}/verse/{{ v }}" class="cross-ref-link">
|
|
{{ ref.ref }}
|
|
{% if ref.text %}
|
|
<span class="cross-ref-tooltip">
|
|
<strong>{{ ref.ref }}</strong>
|
|
<div class="tooltip-verse-text">{{ ref.text }}</div>
|
|
</span>
|
|
{% endif %}
|
|
</a></strong>
|
|
{% else %}
|
|
<strong>{{ ref.ref }}</strong>
|
|
{% endif %}
|
|
{% else %}
|
|
<strong>{{ ref.ref }}</strong>
|
|
{% endif %}
|
|
{% if ref.note %} — <em style="color: var(--text-secondary);">{{ ref.note }}</em>{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% if commentary %}
|
|
{% if commentary.analysis %}
|
|
<section>
|
|
<h2>Analysis</h2>
|
|
<p>{{ commentary.analysis|safe }}</p>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% if commentary.historical %}
|
|
<section>
|
|
<h2>Historical Context</h2>
|
|
<p>{{ commentary.historical|safe }}</p>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% if commentary.theological %}
|
|
<section>
|
|
<h2>Theological Significance</h2>
|
|
<p>{{ commentary.theological|safe }}</p>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% if commentary.questions %}
|
|
<section>
|
|
<h2>Questions for Reflection</h2>
|
|
<ul>
|
|
{% for question in commentary.questions %}
|
|
<li>{{ question }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</section>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<!-- Related Content for Internal Linking -->
|
|
{% if related_content and (related_content.topics or related_content.people or related_content.resources) %}
|
|
<section style="border-top: 1px solid var(--border-color); padding-top: 2rem; margin-top: 3rem;">
|
|
<h2>Related Resources</h2>
|
|
<p style="font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1.5rem;">
|
|
Explore related topics, people, and study resources to deepen your understanding of this passage.
|
|
</p>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
|
|
{% if related_content.topics %}
|
|
<div>
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-secondary);">Topics</h3>
|
|
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
{% for topic in related_content.topics %}
|
|
<li style="margin-bottom: 0.5rem;">
|
|
<a href="{{ topic.url }}" style="font-size: 0.95rem;">{{ topic.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if related_content.people %}
|
|
<div>
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-secondary);">People</h3>
|
|
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
{% for person in related_content.people %}
|
|
<li style="margin-bottom: 0.5rem;">
|
|
<a href="{{ person.url }}" style="font-size: 0.95rem;">{{ person.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if related_content.resources %}
|
|
<div>
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-secondary);">Study Resources</h3>
|
|
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
{% for resource in related_content.resources %}
|
|
<li style="margin-bottom: 0.5rem;">
|
|
<a href="{{ resource.url }}" style="font-size: 0.95rem;">{{ resource.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|