mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
e0a24d46db
- Add sidenote field to timeline events in JSON data - Implement Tufte CSS sidenote rendering in template - Add sidenotes to 6 key events: * Creation: Chronological calculation methodology * The Flood: Archaeological evidence and worldwide traditions * Call of Abraham: Ur excavations and dating differences * The Passover/Exodus: Biblical dating from 1 Kings 6:1 * Fall of Jerusalem: Babylonian chronicles confirmation * Birth of Christ: Historical evidence and BC/AD dating - Sidenotes provide additional archaeological, historical, and chronological context without cluttering main descriptions - Positioned within paragraph tags for proper Tufte CSS rendering 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
272 lines
12 KiB
HTML
272 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Biblical Timeline - Major Bible Events - KJV Study{% endblock %}
|
|
{% block description %}Explore the chronological timeline of major biblical events from Creation to the early Church.{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.timeline-nav {
|
|
max-width: 75%;
|
|
margin: 2rem 0 3rem 0;
|
|
padding: 1.5rem 2rem;
|
|
background: #fafafa;
|
|
border: 2px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.timeline-nav a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px dotted #999;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.timeline-nav a:hover {
|
|
color: var(--link-color);
|
|
border-bottom-color: var(--link-color);
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.timeline-nav-period {
|
|
margin: 1.25rem 0;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.timeline-nav-period:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.timeline-nav-period-name {
|
|
font-weight: 700;
|
|
font-size: 1.05rem;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #111;
|
|
}
|
|
|
|
.timeline-nav-events {
|
|
margin-left: 1.5rem;
|
|
color: #555;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.timeline-nav {
|
|
max-width: 100%;
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
.timeline-nav-events {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.timeline-actions {
|
|
margin: 1rem 0 1.5rem;
|
|
}
|
|
|
|
.timeline-download-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;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.timeline-download-btn:hover {
|
|
background: var(--bg-color, #fff);
|
|
border-color: var(--link-color);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.timeline-download-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
@media print {
|
|
.timeline-actions,
|
|
.timeline-download-btn {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>Biblical Timeline</h1>
|
|
<p class="subtitle">Major events from Creation to the early Church</p>
|
|
|
|
{% if pdf_available %}
|
|
<div class="timeline-actions">
|
|
<a class="timeline-download-btn" href="/biblical-timeline/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 Timeline (PDF)
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="timeline-nav">
|
|
<h2 style="margin: 0 0 1rem 0; font-size: 1.3rem; font-weight: 600; color: #333;">Table of Contents</h2>
|
|
{% for period_name, events in timeline_events.items() %}
|
|
<div class="timeline-nav-period">
|
|
<span class="timeline-nav-period-name"><a href="#{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">{{ period_name }}</a></span>
|
|
<div class="timeline-nav-events">
|
|
{% for event in events %}
|
|
<div style="margin: 0.25rem 0;">
|
|
<a href="#{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }}</a>
|
|
{% if event.date %}<span style="color: #999; margin-left: 0.5rem;">({{ event.date }})</span>{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if introduction %}
|
|
<section style="max-width: 75%; margin: 2rem 0 3rem 0;">
|
|
<p style="font-size: 1.2rem; line-height: 1.8;">{{ introduction | link_verses | safe }}</p>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<section>
|
|
<p>This timeline presents key events of biblical history with calculated dates and relevant scripture references.</p>
|
|
|
|
{% if chronology_note %}
|
|
<p style="font-size: 0.95rem; color: #555; margin-top: 1.5rem; padding: 1rem; background: #f9f9f9; border-left: 3px solid #666;">
|
|
{{ chronology_note | link_verses | safe }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if chronology_comparison %}
|
|
<details open style="margin-top: 2rem; max-width: 85%;">
|
|
<summary style="cursor: pointer; font-weight: 600; font-size: 1.1rem; padding: 0.5rem 0; user-select: none;">
|
|
Alternative Date Interpretations
|
|
</summary>
|
|
<div style="margin-top: 1rem;">
|
|
<p style="font-size: 0.95rem; color: #555; margin-bottom: 1.5rem; line-height: 1.7;">
|
|
Biblical chronology has been calculated in different ways by faithful scholars. This table compares three major chronological systems, all based on the Masoretic text but differing in their interpretation of genealogical relationships in Genesis 5 and 11.
|
|
</p>
|
|
<div style="overflow-x: auto;">
|
|
<table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
|
|
<thead>
|
|
<tr style="border-bottom: 2px solid #333; background: #f9f9f9;">
|
|
<th style="text-align: left; padding: 0.85rem; font-weight: 600;">Event</th>
|
|
<th style="text-align: center; padding: 0.85rem; font-weight: 600; min-width: 140px; background: #e6f3ff;">This Timeline<br><span style="font-weight: 400; font-size: 0.85rem; color: #666;">(Traditional)</span></th>
|
|
<th style="text-align: center; padding: 0.85rem; font-weight: 600; min-width: 130px;">Ussher<br><span style="font-weight: 400; font-size: 0.85rem; color: #666;">(1650)</span></th>
|
|
<th style="text-align: center; padding: 0.85rem; font-weight: 600; min-width: 130px;">Scofield<br><span style="font-weight: 400; font-size: 0.85rem; color: #666;">(1909)</span></th>
|
|
<th style="text-align: left; padding: 0.85rem; font-weight: 600; min-width: 200px;">Note</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in chronology_comparison %}
|
|
<tr style="border-bottom: 1px solid #ddd;">
|
|
<td style="padding: 0.85rem; font-weight: 500;">{{ row.event }}</td>
|
|
<td style="text-align: center; padding: 0.85rem; background: #e6f3ff; font-weight: 700; color: #0d47a1;">{{ row.masoretic }}</td>
|
|
<td style="text-align: center; padding: 0.85rem; color: #666;">{{ row.ussher }}</td>
|
|
<td style="text-align: center; padding: 0.85rem; color: #666;">{{ row.scofield }}</td>
|
|
<td style="padding: 0.85rem; font-size: 0.85rem; color: #555;">
|
|
{% if row.event == "Creation/Adam" %}
|
|
Difference reflects genealogical interpretation
|
|
{% elif row.event == "The Flood" %}
|
|
Gap vs. successive reckoning of Genesis 5
|
|
{% elif row.event == "Call of Abraham" %}
|
|
Gap vs. successive reckoning of Genesis 11
|
|
{% elif row.event == "The Exodus" %}
|
|
All chronologies align closely from this point
|
|
{% elif row.event == "Solomon's Temple" %}
|
|
Minor variations in regnal year calculations
|
|
{% elif row.event == "Fall of Jerusalem" %}
|
|
Confirmed by Babylonian records
|
|
{% elif row.event == "Birth of Christ" %}
|
|
Based on reign of Herod the Great
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p style="font-size: 0.85rem; color: #666; margin-top: 1rem; font-style: italic;">
|
|
<strong>Key Difference:</strong> This timeline follows traditional conservative chronology with successive reckoning of Genesis genealogies, similar to Ussher and Scofield. Some interpreters allow for potential genealogical gaps, yielding earlier dates for Creation and the Flood. All conservative chronologies agree on dates from the Assyrian period onward (8th century BC), confirmed by extrabiblical sources.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% for period_name, events in timeline_events.items() %}
|
|
<section id="{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">
|
|
<h2>{{ period_name }}</h2>
|
|
|
|
{% for event in events %}
|
|
<h3 id="{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }} <span style="color: #666; font-size: 0.9rem; font-weight: normal;">({{ event.date }}{% if event.alt_dates %} • {{ event.alt_dates }}{% endif %})</span></h3>
|
|
<p>{% if event.sidenote %}<label for="sn-{{ loop.index }}-{{ period_name | lower | replace(' ', '-') }}" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-{{ loop.index }}-{{ period_name | lower | replace(' ', '-') }}" class="margin-toggle"/>
|
|
<span class="sidenote">{{ event.sidenote | link_verses | safe }}</span>{% endif %}{{ event.description | link_verses | safe }}</p>
|
|
|
|
{% if event.verses %}
|
|
<ul>
|
|
{% for verse in event.verses %}
|
|
<li>
|
|
{% set ref_parts = verse.reference.split(' ') %}
|
|
{% if ref_parts|length >= 2 %}
|
|
{% if ref_parts[0] in ['1', '2'] and ref_parts|length >= 3 %}
|
|
{% set book = ref_parts[0] + ' ' + ref_parts[1] %}
|
|
{% set chapter_verse_part = ref_parts[2] %}
|
|
{% else %}
|
|
{% set book = ref_parts[0] %}
|
|
{% set chapter_verse_part = ref_parts[1] %}
|
|
{% endif %}
|
|
|
|
{% if ':' in chapter_verse_part %}
|
|
{% set chapter = chapter_verse_part.split(':')[0] %}
|
|
{% set verse_part = chapter_verse_part.split(':')[1] %}
|
|
|
|
{# Check if verse part contains a range (e.g., "7-8") #}
|
|
{% if '-' in verse_part %}
|
|
{# Verse range - use anchor syntax like #verse-7-8 #}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_part }}">{{ verse.reference }}</a> — {{ verse.text }}
|
|
{% else %}
|
|
{# Single verse - use anchor syntax like #verse-7 #}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_part }}">{{ verse.reference }}</a> — {{ verse.text }}
|
|
{% endif %}
|
|
{% elif '-' in chapter_verse_part %}
|
|
{# Chapter range (e.g., "1-2") - just link to first chapter #}
|
|
{% set chapter = chapter_verse_part.split('-')[0] %}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter }}">{{ verse.reference }}</a> — {{ verse.text }}
|
|
{% else %}
|
|
{# Just chapter number #}
|
|
{% set chapter = chapter_verse_part %}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter }}">{{ verse.reference }}</a> — {{ verse.text }}
|
|
{% endif %}
|
|
{% else %}
|
|
{{ verse.reference }} — {{ verse.text }}
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
|
|
{% if conclusion %}
|
|
<section style="max-width: 75%; margin: 3rem 0 2rem 0;">
|
|
<h2>Conclusion</h2>
|
|
<p style="font-size: 1.05rem; line-height: 1.8;">{{ conclusion | link_verses | safe }}</p>
|
|
</section>
|
|
{% endif %}
|
|
{% endblock %}
|