nate/Siteforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add in /salvation

Browse Source
This commit is contained in:
nmemmert
2026-06-08 10:24:37 -04:00
parent 66699270f5
commit 95b7a3f211
3 changed files with 915 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/salvation/index.html
+899
View File
@@ -0,0 +1,899 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gospel Harmony — The Trial & Crucifixion</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<style>
:root {
--parchment: #f5edd8;
--parchment-dark: #e8d9b8;
--ink: #1a1208;
--ink-light: #3d2c10;
--crimson: #8b1a1a;
--gold: #b8860b;
--gold-light: #d4a843;
--matt-color: #4a6fa5;
--mark-color: #7a4a8f;
--luke-color: #2e7d52;
--john-color: #b5651d;
--shadow: rgba(26,18,8,0.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #1a0f05;
font-family: 'EB Garamond', Georgia, serif;
color: var(--ink);
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: 0.5;
}
.scroll-wrapper {
max-width: 960px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
position: relative;
z-index: 1;
}
header {
text-align: center;
padding: 3.5rem 2rem 2rem;
}
.header-rule {
height: 3px;
background: linear-gradient(90deg, transparent, var(--gold), var(--crimson), var(--gold), transparent);
margin-bottom: 1.8rem;
position: relative;
}
.header-rule::before, .header-rule::after {
content: '✦';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--gold);
font-size: 0.9rem;
background: #1a0f05;
padding: 0 0.5rem;
}
.header-rule::before { left: 20%; }
.header-rule::after { right: 20%; }
header h1 {
font-family: 'Cinzel', serif;
font-size: clamp(1.6rem, 5vw, 3rem);
font-weight: 900;
color: var(--parchment);
letter-spacing: 0.06em;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
line-height: 1.15;
}
header h1 span { color: var(--gold-light); }
header .subtitle {
font-family: 'EB Garamond', serif;
font-style: italic;
color: var(--parchment-dark);
font-size: 1.1rem;
margin-top: 0.6rem;
opacity: 0.85;
}
.legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 1.4rem;
margin: 2rem auto 1rem;
padding: 1rem 1.5rem;
background: rgba(245,237,216,0.06);
border: 1px solid rgba(184,134,11,0.3);
border-radius: 4px;
max-width: 700px;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: 'Cinzel', serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
cursor: pointer;
transition: opacity 0.2s;
color: var(--parchment);
user-select: none;
}
.legend-item.dimmed { opacity: 0.35; }
.legend-dot {
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
flex-shrink: 0;
}
.filter-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 1rem 0 2.5rem;
}
.filter-btn {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
padding: 0.35rem 0.9rem;
border-radius: 2px;
border: 1px solid;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
}
.filter-btn.active-filter { color: var(--ink); font-weight: 700; }
.filter-btn:not(.active-filter) {
background: transparent;
color: var(--parchment-dark);
opacity: 0.55;
}
.filter-btn:hover { opacity: 1; }
.timeline {
position: relative;
padding-left: 2.5rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0.95rem;
top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--gold) 0%, var(--crimson) 50%, var(--gold) 100%);
opacity: 0.5;
}
.phase-header {
position: relative;
margin: 2.5rem 0 1rem;
display: flex;
align-items: center;
gap: 1rem;
}
.phase-header::before {
content: '';
position: absolute;
left: -2.5rem;
width: 2rem;
height: 2px;
background: var(--gold);
}
.phase-node {
width: 1.8rem; height: 1.8rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--crimson));
border: 3px solid var(--parchment-dark);
position: absolute;
left: -2.42rem;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 12px rgba(184,134,11,0.5);
z-index: 2;
}
.phase-label {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-light);
padding: 0.2rem 0.8rem;
border: 1px solid rgba(184,134,11,0.4);
border-radius: 2px;
background: rgba(26,9,5,0.6);
}
.phase-title {
font-family: 'Cinzel', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--parchment);
letter-spacing: 0.04em;
}
.event-card {
position: relative;
margin: 0.65rem 0;
background: linear-gradient(135deg, rgba(245,237,216,0.96) 0%, rgba(232,217,184,0.94) 100%);
border-radius: 4px;
padding: 1rem 1.2rem 1rem 1.4rem;
border-left: 4px solid var(--crimson);
box-shadow: 2px 3px 14px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.4);
transition: transform 0.18s, box-shadow 0.18s, opacity 0.25s;
}
.event-card:hover {
transform: translateX(3px);
box-shadow: 4px 5px 20px rgba(26,18,8,0.28);
}
.event-card.hidden { display: none; }
.event-card::before {
content: '';
position: absolute;
left: -2.09rem;
top: 1.1rem;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--parchment);
border: 2px solid var(--crimson);
box-shadow: 0 0 0 2px rgba(26,18,8,0.15);
}
.event-title {
font-family: 'Cinzel', serif;
font-size: 0.88rem;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.04em;
margin-bottom: 0.35rem;
line-height: 1.3;
}
.event-body {
font-size: 0.9rem;
color: var(--ink-light);
line-height: 1.6;
font-style: italic;
margin-bottom: 0.5rem;
}
.gospel-badges {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.4rem;
}
/* shared badge base */
.badge {
font-family: 'Cinzel', serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0.15rem 0.55rem;
border-radius: 2px;
border: 1px solid;
color: white;
text-decoration: none;
display: inline-block;
cursor: default;
}
a.badge {
cursor: pointer;
transition: filter 0.15s, transform 0.15s;
}
a.badge:hover {
filter: brightness(1.25);
transform: translateY(-1px);
}
.badge-matt { background: var(--matt-color); border-color: #3a5a8a; }
.badge-mark { background: var(--mark-color); border-color: #6a3a7f; }
.badge-luke { background: var(--luke-color); border-color: #1e6040; }
.badge-john { background: var(--john-color); border-color: #8b4513; }
.ref-text {
font-size: 0.72rem;
color: #7a5a2a;
margin-top: 0.35rem;
font-style: normal;
letter-spacing: 0.02em;
}
.unique-note {
font-size: 0.75rem;
font-style: italic;
color: var(--crimson);
margin-top: 0.3rem;
padding-top: 0.25rem;
border-top: 1px dashed rgba(139,26,26,0.25);
}
.bsb-hint {
font-size: 0.68rem;
color: #9a7a3a;
margin-top: 0.4rem;
font-style: italic;
opacity: 0.8;
}
footer {
text-align: center;
padding: 3rem 1rem 1.5rem;
font-size: 0.8rem;
color: rgba(245,237,216,0.35);
font-style: italic;
font-family: 'EB Garamond', serif;
letter-spacing: 0.04em;
}
@media (max-width: 600px) {
.timeline { padding-left: 2rem; }
.timeline::before { left: 0.7rem; }
.event-card::before { left: -1.6rem; }
.phase-node { left: -1.92rem; }
.phase-header::before { left: -2rem; width: 1.6rem; }
.event-card { padding: 0.9rem 1rem 0.9rem 1.1rem; }
}
</style>
</head>
<body>
<div class="scroll-wrapper">
<header>
<div class="header-rule"></div>
<h1>A <span>Gospel Harmony</span><br>The Trial &amp; Crucifixion of Jesus</h1>
<p class="subtitle">Matthew · Mark · Luke · John — Woven into One Timeline</p>
<div class="header-rule" style="margin-top:1.6rem;margin-bottom:0"></div>
</header>
<div class="legend">
<div class="legend-item" data-gospel="matt" onclick="toggleGospel('matt',this)">
<div class="legend-dot" style="background:var(--matt-color)"></div> Matthew
</div>
<div class="legend-item" data-gospel="mark" onclick="toggleGospel('mark',this)">
<div class="legend-dot" style="background:var(--mark-color)"></div> Mark
</div>
<div class="legend-item" data-gospel="luke" onclick="toggleGospel('luke',this)">
<div class="legend-dot" style="background:var(--luke-color)"></div> Luke
</div>
<div class="legend-item" data-gospel="john" onclick="toggleGospel('john',this)">
<div class="legend-dot" style="background:var(--john-color)"></div> John
</div>
</div>
<div class="filter-bar">
<button class="filter-btn active-filter" style="border-color:var(--gold);background:var(--gold);color:var(--ink)" onclick="filterPhase('all',this)">All Events</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('arrest',this)">Arrest</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('jewish-trial',this)">Jewish Trial</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('roman-trial',this)">Roman Trial</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('crucifixion',this)">Crucifixion</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('burial',this)">Burial</button>
</div>
<div class="timeline" id="timeline"></div>
<footer>
A harmonic arrangement of Matthew 26–27, Mark 14–15, Luke 22–23, and John 18–19.<br>
Click any Gospel badge to open that passage in the Berean Standard Bible (BSB) at BibleHub.
</footer>
</div>
<script>
// BSB URL helper — BibleHub format: https://biblehub.com/bsb/matthew/26.htm
const BSB = {
matt: (ch) => `https://biblehub.com/bsb/matthew/${ch}.htm`,
mark: (ch) => `https://biblehub.com/bsb/mark/${ch}.htm`,
luke: (ch) => `https://biblehub.com/bsb/luke/${ch}.htm`,
john: (ch) => `https://biblehub.com/bsb/john/${ch}.htm`,
};
const GOSPELS = ['matt','mark','luke','john'];
const activeGospels = new Set(GOSPELS);
let activePhase = 'all';
const data = [
// ── PHASE 1: ARREST ──────────────────────────────────────────
{ phase:'arrest', phaseLabel:'Phase I', phaseTitle:'The Arrest in Gethsemane', events:[
{
title:'The Last Supper & Passover Meal',
body:"Jesus eats the Passover meal with his twelve disciples, institutes the Lord's Supper, and predicts his betrayal.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:20–29 · Mark 14:17–25 · Luke 22:14–23 · John 13:1–30',
unique:"John alone records Jesus washing the disciples' feet and the extended farewell discourse (John 13–17).",
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(13) }
},
{
title:"Jesus Predicts Peter's Denial",
body:"Jesus tells Peter that before the rooster crows, he will deny him three times.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:31–35 · Mark 14:27–31 · Luke 22:31–34 · John 13:36–38',
unique:'Luke adds that Jesus prayed specifically for Peter that his faith would not fail.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(13) }
},
{
title:'The Agony in Gethsemane',
body:'Jesus prays alone in the garden in great anguish: "Father, if you are willing, remove this cup from me; nevertheless, not my will, but yours, be done."',
gospels:['matt','mark','luke'],
refs:'Matt 26:36–46 · Mark 14:32–42 · Luke 22:39–46',
unique:'Luke alone records that an angel appeared to strengthen Jesus, and that his sweat became like drops of blood.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:'Judas Arrives with the Crowd',
body:'Judas leads a crowd with swords and clubs, sent from the chief priests and elders, into the garden.',
gospels:['matt','mark','luke','john'],
refs:'Matt 26:47 · Mark 14:43 · Luke 22:47 · John 18:3',
unique:'John specifies it was a Roman cohort plus Jewish officers, and that they carried lanterns and torches.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:"The Betrayer's Kiss",
body:"Judas greets Jesus with a kiss as the prearranged sign of identification.",
gospels:['matt','mark','luke'],
refs:'Matt 26:48–49 · Mark 14:44–45 · Luke 22:47–48',
unique:'John omits the kiss; instead Jesus steps forward and declares "I am he," causing the crowd to fall to the ground.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:'Jesus Identifies Himself — "I Am He" (John)',
body:'Jesus asks "Whom do you seek?" When they say "Jesus of Nazareth," he says "I am he," and the entire crowd falls backward to the ground.',
gospels:['john'],
refs:'John 18:4–9',
unique:'Unique to John — a powerful "I Am" moment that echoes the divine name.',
bsbLinks:{ john:BSB.john(18) }
},
{
title:"The Servant's Ear Cut Off",
body:"One of those with Jesus draws a sword and cuts off the right ear of the high priest's servant, Malchus.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:51 · Mark 14:47 · Luke 22:50 · John 18:10',
unique:'Only John names the attacker as Peter and the servant as Malchus. Only Luke records that Jesus healed the ear.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:'Jesus Rebukes the Sword & Surrenders',
body:'"Put your sword back in its place. Shall I not drink the cup the Father has given me?" Then all the disciples fled.',
gospels:['matt','mark','luke','john'],
refs:'Matt 26:52–56 · Mark 14:48–50 · Luke 22:51–53 · John 18:11',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:'The Young Man Who Fled (Mark)',
body:'A young man follows Jesus wearing only a linen cloth; when seized, he leaves the cloth behind and flees naked.',
gospels:['mark'],
refs:'Mark 14:51–52',
unique:'Unique to Mark — possibly a self-reference by the author.',
bsbLinks:{ mark:BSB.mark(14) }
},
]},
// ── PHASE 2: JEWISH TRIAL ─────────────────────────────────────
{ phase:'jewish-trial', phaseLabel:'Phase II', phaseTitle:'The Jewish Trial', events:[
{
title:'Jesus Led to Annas (John)',
body:"Jesus is first brought to Annas, father-in-law of Caiaphas, who questions Jesus about his disciples and teaching.",
gospels:['john'],
refs:'John 18:12–14, 19–24',
unique:'Unique to John. After the interrogation, Annas sends Jesus bound to Caiaphas.',
bsbLinks:{ john:BSB.john(18) }
},
{
title:"Peter Follows to the Courtyard",
body:"Peter and another disciple follow Jesus to the high priest's courtyard. Peter stands warming himself by the fire.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:58 · Mark 14:54 · Luke 22:54–55 · John 18:15–16',
unique:"John identifies 'another disciple' known to the high priest who helped Peter gain entry.",
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:'The Trial Before Caiaphas & the Sanhedrin',
body:"The Sanhedrin assembles and seeks false testimony against Jesus. Many false witnesses come, but their testimony does not agree.",
gospels:['matt','mark'],
refs:'Matt 26:57, 59–61 · Mark 14:53, 55–59',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14) }
},
{
title:'"Are You the Christ?" — The High Priest\'s Question',
body:'"I adjure you by the living God, tell us if you are the Christ, the Son of God." Jesus answered, "You have said so. But I tell you, from now on you will see the Son of Man seated at the right hand of Power."',
gospels:['matt','mark','luke'],
refs:'Matt 26:63–64 · Mark 14:61–62 · Luke 22:66–70',
unique:"Luke places a formal Sanhedrin inquiry at daybreak. Mark records Jesus' most direct 'I am' reply.",
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:'The Verdict: Blasphemy — Deserving Death',
body:'The high priest tears his robes: "He has uttered blasphemy!" The assembly declares Jesus deserves death and begins spitting on him, striking him, and mocking him.',
gospels:['matt','mark','luke'],
refs:'Matt 26:65–68 · Mark 14:63–65 · Luke 22:63–65',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:"Peter's Three Denials",
body:"As Jesus is being tried, Peter denies knowing him three times — to a servant girl, another servant, and bystanders — and the rooster crows.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:69–75 · Mark 14:66–72 · Luke 22:56–62 · John 18:17–18, 25–27',
unique:'Luke alone records that Jesus turned and looked at Peter, and Peter went out and wept bitterly.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:"Judas's Remorse & Death (Matthew)",
body:"Judas sees that Jesus has been condemned, brings the thirty pieces of silver back to the chief priests, and goes and hangs himself. The priests use the money to buy the Potter's Field.",
gospels:['matt'],
refs:'Matt 27:3–10',
unique:'Unique to Matthew. Acts 1:18–19 offers a parallel account of Judas\'s end.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:'Early Morning Formal Condemnation',
body:'At daybreak the chief priests and the whole council hold a formal session and bind Jesus to hand him over to Pilate.',
gospels:['matt','mark','luke'],
refs:'Matt 27:1–2 · Mark 15:1 · Luke 22:66–23:1',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
]},
// ── PHASE 3: ROMAN TRIAL ──────────────────────────────────────
{ phase:'roman-trial', phaseLabel:'Phase III', phaseTitle:'The Roman Trial Before Pilate', events:[
{
title:'Jesus Brought Before Pilate',
body:"The Jewish leaders bring Jesus to Pilate's headquarters. They do not enter so as not to be defiled before Passover. They accuse Jesus of misleading the nation, opposing taxes, and claiming to be King.",
gospels:['matt','mark','luke','john'],
refs:'Matt 27:2,11 · Mark 15:1–2 · Luke 23:1–2 · John 18:28–32',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:'"Are You the King of the Jews?" — Pilate\'s First Question',
body:'"Are you the King of the Jews?" Jesus replies, "You have said so" — or in John\'s longer account, "My kingdom is not of this world."',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:11 · Mark 15:2 · Luke 23:3 · John 18:33–37',
unique:'John records the extensive private exchange between Pilate and Jesus about kingship and truth.',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:'Jesus Silent Before Accusations',
body:'As the chief priests heap on charges, Jesus gives no answer, so that Pilate is greatly amazed.',
gospels:['matt','mark'],
refs:'Matt 27:12–14 · Mark 15:3–5',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15) }
},
{
title:'Jesus Sent to Herod Antipas (Luke)',
body:"Learning Jesus is from Galilee, Pilate sends him to Herod, who is in Jerusalem. Herod questions Jesus at length but Jesus says nothing. Herod mocks him, dresses him in splendid clothing, and sends him back.",
gospels:['luke'],
refs:'Luke 23:6–12',
unique:'Unique to Luke. Luke notes this made Herod and Pilate friends that day.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'Pilate Declares Jesus Innocent',
body:'Pilate announces he finds no guilt in Jesus, and that neither does Herod. He offers to release one prisoner according to the custom.',
gospels:['luke','john'],
refs:'Luke 23:13–16 · John 18:38–19:6',
unique:"Luke alone notes three formal declarations of innocence by Pilate.",
bsbLinks:{ luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:'Barabbas Released — Jesus Condemned',
body:'The crowd chooses to release Barabbas, a notorious rebel and murderer, instead of Jesus. The crowd shouts "Crucify him!"',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:15–23 · Mark 15:6–14 · Luke 23:18–23 · John 18:39–40',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:"Pilate's Wife's Warning (Matthew)",
body:'"Have nothing to do with that righteous man, for I have suffered much over him today in a dream."',
gospels:['matt'],
refs:'Matt 27:19',
unique:'Unique to Matthew.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:"Pilate Washes His Hands (Matthew)",
body:'Pilate takes water and washes his hands before the crowd: "I am innocent of this man\'s blood." The people respond, "His blood be on us and on our children."',
gospels:['matt'],
refs:'Matt 27:24–25',
unique:'Unique to Matthew.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:'"Behold the Man" — Ecce Homo (John)',
body:'Pilate leads Jesus out wearing the crown of thorns and a purple robe: "Behold the man!" The chief priests cry "Crucify him!"',
gospels:['john'],
refs:'John 19:4–7',
unique:'Unique to John.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'"Son of God" Accusation Frightens Pilate (John)',
body:'When the Jews say Jesus made himself the Son of God, Pilate is even more afraid and questions Jesus again about his origin, but Jesus gives no answer.',
gospels:['john'],
refs:'John 19:8–11',
unique:"Unique to John — Jesus' declaration that Pilate's authority comes from above.",
bsbLinks:{ john:BSB.john(19) }
},
{
title:"The Soldiers' Mockery",
body:"Pilate's soldiers strip Jesus, put a scarlet/purple robe on him, press a crown of thorns on his head, put a reed in his right hand, kneel before him mockingly, spit on him, and strike him.",
gospels:['matt','mark','john'],
refs:'Matt 27:27–31 · Mark 15:16–20 · John 19:2–3',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), john:BSB.john(19) }
},
{
title:'Final Condemnation — Jesus Handed Over',
body:'Pilate, seeking to release Jesus but fearful of the cry "You are no friend of Caesar!", finally hands Jesus over to be crucified.',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:26 · Mark 15:15 · Luke 23:24–25 · John 19:12–16',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
]},
// ── PHASE 4: CRUCIFIXION ──────────────────────────────────────
{ phase:'crucifixion', phaseLabel:'Phase IV', phaseTitle:'The Way of the Cross & Crucifixion', events:[
{
title:'Jesus Carries His Cross',
body:'Jesus goes out carrying his own cross to the place called Golgotha, "The Place of a Skull."',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:31–32 · Mark 15:20–21 · Luke 23:26 · John 19:17',
unique:'John uniquely emphasizes Jesus carried his own cross (echoing Isaac carrying wood in Gen 22). The Synoptics record Simon of Cyrene being compelled to carry it.',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'Simon of Cyrene Carries the Cross',
body:'Coming in from the country, Simon of Cyrene is seized and compelled to carry the cross behind Jesus.',
gospels:['matt','mark','luke'],
refs:'Matt 27:32 · Mark 15:21 · Luke 23:26',
unique:"Mark names Simon's sons, Alexander and Rufus, suggesting they were known to Mark's community.",
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'Jesus Addresses the Daughters of Jerusalem (Luke)',
body:'"Daughters of Jerusalem, do not weep for me, but weep for yourselves and for your children... For if they do these things when the wood is green, what will happen when it is dry?"',
gospels:['luke'],
refs:'Luke 23:27–31',
unique:'Unique to Luke.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'The Offer of Wine Mixed with Gall/Myrrh',
body:'Before the crucifixion, soldiers offer Jesus wine mixed with gall (or myrrh) — a narcotic to dull the pain — but Jesus refuses after tasting it.',
gospels:['matt','mark'],
refs:'Matt 27:34 · Mark 15:23',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15) }
},
{
title:'The Crucifixion — The Third Hour',
body:'Jesus is crucified between two criminals. The soldiers cast lots for his garments, fulfilling Psalm 22:18.',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:35 · Mark 15:24–25 · Luke 23:33 · John 19:18, 23–24',
unique:"John uniquely emphasizes the lot-casting fulfills Scripture and describes the tunic as seamless (echoing the high priest's garment).",
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'The Title on the Cross: "King of the Jews"',
body:'Pilate has a notice written in Hebrew, Greek, and Latin: "Jesus of Nazareth, the King of the Jews."',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:37 · Mark 15:26 · Luke 23:38 · John 19:19–22',
unique:'John alone records the Jewish leaders\' protest and Pilate\'s firm reply: "What I have written, I have written."',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'The Mockery at the Cross',
body:'Passersby wag their heads: "You who would destroy the temple, save yourself!" The chief priests, scribes, and elders join in mocking.',
gospels:['matt','mark','luke'],
refs:'Matt 27:39–44 · Mark 15:29–32 · Luke 23:35–37',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'One Criminal Repents — "Remember Me" (Luke)',
body:'One criminal joins the mockery. The other rebukes him and says, "Jesus, remember me when you come into your kingdom." Jesus replies, "Today you will be with me in paradise."',
gospels:['luke'],
refs:'Luke 23:39–43',
unique:'Unique to Luke — the only death-row conversion recorded in the Gospels.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:"Jesus Entrusts His Mother to the Beloved Disciple (John)",
body:'"Woman, behold your son... Behold your mother." From that hour the disciple took her into his own home.',
gospels:['john'],
refs:'John 19:25–27',
unique:'Unique to John.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'Darkness Over the Land — Three Hours',
body:'From the sixth hour (noon) to the ninth hour (3 p.m.), darkness covers all the land.',
gospels:['matt','mark','luke'],
refs:'Matt 27:45 · Mark 15:33 · Luke 23:44',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'"My God, My God, Why Have You Forsaken Me?"',
body:'About the ninth hour Jesus cries out, "Eloi, Eloi, lema sabachthani?" — quoting Psalm 22:1. Some bystanders think he is calling for Elijah.',
gospels:['matt','mark'],
refs:'Matt 27:46–47 · Mark 15:34–35',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15) }
},
{
title:'"I Thirst" (John)',
body:'Jesus says "I thirst." A sponge soaked in sour wine is put on a hyssop branch and offered to him.',
gospels:['john'],
refs:'John 19:28–29',
unique:"John frames this as Jesus knowing 'all was now finished, to fulfill Scripture' (Ps 22:15; 69:21). The hyssop branch echoes the Passover lamb.",
bsbLinks:{ john:BSB.john(19) }
},
{
title:'"Father, Forgive Them" (Luke)',
body:'"Father, forgive them, for they know not what they do."',
gospels:['luke'],
refs:'Luke 23:34',
unique:'Unique to Luke.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'"It Is Finished" — Tetelestai (John)',
body:'Jesus says, "It is finished" (τετέλεσται — tetelestai, meaning "paid in full"). He bows his head and gives up his spirit.',
gospels:['john'],
refs:'John 19:30',
unique:'Unique to John — the climactic proclamation of completed redemption.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'"Father, Into Your Hands I Commit My Spirit" (Luke)',
body:'With a loud cry, Jesus says, "Father, into your hands I commit my spirit!" (quoting Psalm 31:5), and breathes his last.',
gospels:['luke'],
refs:'Luke 23:46',
unique:'Unique to Luke.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'Jesus Breathes His Last & The Temple Curtain Torn',
body:'Jesus utters a loud cry and breathes his last. The curtain of the temple is torn in two, from top to bottom.',
gospels:['matt','mark','luke'],
refs:'Matt 27:50–51 · Mark 15:37–38 · Luke 23:45–46',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'Earthquake, Rocks Split & Tombs Opened (Matthew)',
body:'The earth shakes and rocks split. Tombs are opened and many saints who had fallen asleep are raised, appearing to many in Jerusalem after the resurrection.',
gospels:['matt'],
refs:'Matt 27:51–53',
unique:'Unique to Matthew — a remarkable eschatological sign accompanying the death of Christ.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:"The Centurion's Confession",
body:'The Roman centurion, seeing how Jesus died, declares: "Truly this man was the Son of God!" (Matt/Mark) or "Certainly this man was innocent!" (Luke).',
gospels:['matt','mark','luke'],
refs:'Matt 27:54 · Mark 15:39 · Luke 23:47',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'The Women Watching from a Distance',
body:'Many women who followed Jesus from Galilee look on from a distance, including Mary Magdalene, Mary the mother of James and Joseph, and Salome.',
gospels:['matt','mark','luke'],
refs:'Matt 27:55–56 · Mark 15:40–41 · Luke 23:49',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:"Soldiers Break No Bones — Spear Thrust (John)",
body:"To hasten death, soldiers break the legs of the two criminals. Finding Jesus already dead, a soldier pierces his side with a spear, and blood and water immediately flow out.",
gospels:['john'],
refs:'John 19:31–37',
unique:"Unique to John. He sees this fulfilling 'Not one of his bones will be broken' (Ex 12:46; Ps 34:20) and Zechariah 12:10.",
bsbLinks:{ john:BSB.john(19) }
},
]},
// ── PHASE 5: BURIAL ──────────────────────────────────────────
{ phase:'burial', phaseLabel:'Phase V', phaseTitle:'The Burial of Jesus', events:[
{
title:'Joseph of Arimathea Requests the Body',
body:"Joseph of Arimathea, a respected council member and secret disciple, goes to Pilate and asks for the body of Jesus. Pilate confirms with the centurion that Jesus is dead and grants the request.",
gospels:['matt','mark','luke','john'],
refs:'Matt 27:57–58 · Mark 15:42–45 · Luke 23:50–52 · John 19:38',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'Nicodemus Brings Spices (John)',
body:"Nicodemus, who had come to Jesus by night, brings a mixture of myrrh and aloes — about seventy-five pounds.",
gospels:['john'],
refs:'John 19:39',
unique:'Unique to John. The extravagant amount of spices honors Jesus as royalty.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'The Body Wrapped & Laid in the Tomb',
body:'The body is wrapped in a clean linen shroud and laid in a new tomb cut from rock, in which no one had yet been buried. A large stone is rolled against the entrance.',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:59–60 · Mark 15:46 · Luke 23:53 · John 19:40–42',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'The Women See Where He Is Laid',
body:'Mary Magdalene and Mary the mother of Joses observe where Jesus is laid. They return home and prepare spices and ointments.',
gospels:['matt','mark','luke'],
refs:'Matt 27:61 · Mark 15:47 · Luke 23:55–56',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'The Guard Placed at the Tomb (Matthew)',
body:"The chief priests and Pharisees ask Pilate to secure the tomb, fearing the disciples will steal the body and claim a resurrection. Pilate gives them a guard; they seal the stone.",
gospels:['matt'],
refs:'Matt 27:62–66',
unique:'Unique to Matthew — sets up the resurrection narrative in Matthew 28.',
bsbLinks:{ matt:BSB.matt(27) }
},
]},
];
function buildTimeline() {
const container = document.getElementById('timeline');
container.innerHTML = '';
const colorMap = { matt:'var(--matt-color)', mark:'var(--mark-color)', luke:'var(--luke-color)', john:'var(--john-color)' };
data.forEach(phase => {
const phHeader = document.createElement('div');
phHeader.className = 'phase-header';
phHeader.setAttribute('data-phase', phase.phase);
phHeader.innerHTML = `<div class="phase-node"></div><span class="phase-label">${phase.phaseLabel}</span><span class="phase-title">${phase.phaseTitle}</span>`;
container.appendChild(phHeader);
phase.events.forEach(ev => {
const card = document.createElement('div');
card.className = 'event-card';
card.setAttribute('data-gospels', ev.gospels.join(' '));
card.setAttribute('data-phase', phase.phase);
const borderColor = ev.gospels.length === 4 ? 'var(--crimson)' : colorMap[ev.gospels[0]];
card.style.borderLeftColor = borderColor;
const badges = ev.gospels.map(g => {
const url = ev.bsbLinks && ev.bsbLinks[g];
const label = g.charAt(0).toUpperCase() + g.slice(1);
if (url) {
return `<a class="badge badge-${g}" href="${url}" target="_blank" rel="noopener" title="Open ${label} in BSB">${label} ↗</a>`;
}
return `<span class="badge badge-${g}">${label}</span>`;
}).join('');
const uniqueNote = ev.unique ? `<div class="unique-note">✦ ${ev.unique}</div>` : '';
card.innerHTML = `
<div class="event-title">${ev.title}</div>
<div class="event-body">${ev.body}</div>
<div class="gospel-badges">${badges}</div>
<div class="ref-text">${ev.refs}</div>
${uniqueNote}
`;
container.appendChild(card);
});
});
applyFilters();
}
function applyFilters() {
document.querySelectorAll('.event-card').forEach(card => {
const cPhase = card.getAttribute('data-phase');
const cGospels = card.getAttribute('data-gospels').split(' ');
const phaseOk = activePhase === 'all' || cPhase === activePhase;
const gospelOk = cGospels.some(g => activeGospels.has(g));
card.classList.toggle('hidden', !phaseOk || !gospelOk);
});
document.querySelectorAll('.phase-header').forEach(h => {
const hPhase = h.getAttribute('data-phase');
h.style.display = (activePhase === 'all' || hPhase === activePhase) ? '' : 'none';
});
}
function toggleGospel(gospel, el) {
if (activeGospels.has(gospel)) {
if (activeGospels.size === 1) return;
activeGospels.delete(gospel);
el.classList.add('dimmed');
} else {
activeGospels.add(gospel);
el.classList.remove('dimmed');
}
applyFilters();
}
function filterPhase(phase, btn) {
activePhase = phase;
document.querySelectorAll('.filter-btn').forEach(b => {
b.classList.remove('active-filter');
b.style.background = 'transparent';
b.style.color = 'var(--parchment-dark)';
b.style.borderColor = '#555';
});
btn.classList.add('active-filter');
btn.style.background = 'var(--gold)';
btn.style.color = 'var(--ink)';
btn.style.borderColor = 'var(--gold)';
applyFilters();
}
buildTimeline();
</script>
</body>
</html>