Add interactive 'History of Israel' HTML page
· 3 months ago
072c2e7f354acf813d2a4e3527abcc3f78ab8478
Parent:
97a5a929b
Adds israel-history.html: a comprehensive, SEO-friendly interactive timeline of Israel's history. Includes meta/OG/Twitter tags and JSON-LD structured data, Bootstrap 5 and icons, custom CSS (including print styles), multiple era sections (Ancient, Roman & Middle Ages, Ottoman & British Mandate, State of Israel) with expandable event details, and client-side JS for search, era filtering, and expand/collapse-all controls.
1 file changed +540 −0
- israel-history.html +540 −0
Diff
--- /dev/null +++ b/israel-history.html @@ -0,0 +1,540 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- Essential SEO Tags --> + <title>History of Israel: From Antiquity to Today</title> + <meta name="description" content="A comprehensive interactive timeline and reference guide covering the history of Israel from ancient biblical times to the modern state, including key eras, conflicts, and peace treaties."/> + <meta name="keywords" content="history of israel, ancient israel, zionism, british mandate, arab-israeli conflict, middle east history, jewish history, state of israel, timeline"/> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/israel-history.html"/> + + <!-- Open Graph Tags --> + <meta property="og:title" content="History of Israel: From Antiquity to Today"/> + <meta property="og:description" content="A comprehensive interactive timeline and reference guide covering the history of Israel from ancient biblical times to the modern state."/> + <meta property="og:type" content="website"/> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/israel-history.html"/> + <meta property="og:image" content="images/israel-history.png"/> + <meta property="og:image:alt" content="Timeline graphic representing the history of Israel from antiquity to modern day"/> + + <!-- Twitter Card Tags --> + <meta name="twitter:card" content="summary_large_image"/> + <meta name="twitter:title" content="History of Israel: From Antiquity to Today"/> + <meta name="twitter:description" content="A comprehensive interactive timeline and reference guide covering the history of Israel from ancient biblical times to the modern state."/> + <meta name="twitter:image" content="images/israel-history.png"/> + <meta name="twitter:creator" content="@heroiclife"/> + + <!-- JSON-LD Structured Data (Required) --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "TechArticle", + "headline": "History of Israel: From Antiquity to Today", + "description": "A comprehensive interactive timeline and reference guide covering the history of Israel from ancient biblical times to the modern state, including key eras, conflicts, and peace treaties.", + "author": {"@type": "Person", "name": "David Veksler (AI Generated)"}, + "publisher": {"@type": "Organization", "name": "David Veksler Cheatsheets"}, + "datePublished": "2023-10-27", + "dateModified": "2023-10-27", + "keywords": "history of israel, ancient israel, zionism, british mandate, state of israel, middle east history" + } + </script> + + <!-- Bootstrap 5.3.3 CSS --> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + <!-- Bootstrap Icons --> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + + <style> + :root { + --primary-color: #0038b8; /* Star of David Blue */ + --secondary-color: #f0f4f8; + --text-dark: #2d3748; + --border-color: #e2e8f0; + } + + body { + background-color: #f8f9fa; + color: var(--text-dark); + font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + padding-bottom: 3rem; + } + + .header-section { + background: linear-gradient(135deg, var(--primary-color), #002375); + color: white; + padding: 3rem 0; + margin-bottom: 2rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + } + + .controls-sticky { + position: sticky; + top: 0; + z-index: 1020; + background: rgba(248, 249, 250, 0.95); + backdrop-filter: blur(10px); + padding: 1rem 0; + border-bottom: 1px solid var(--border-color); + margin-bottom: 2rem; + } + + /* Custom details/summary styling for academic feel */ + details { + background: white; + border: 1px solid var(--border-color); + border-radius: 0.5rem; + margin-bottom: 1rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.02); + transition: all 0.2s ease; + } + + details:hover { + box-shadow: 0 4px 8px rgba(0,0,0,0.05); + border-color: #cbd5e1; + } + + summary { + padding: 1.25rem; + font-weight: 600; + font-size: 1.1rem; + cursor: pointer; + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + } + + summary::-webkit-details-marker { + display: none; + } + + summary::after { + content: "\F282"; /* Bootstrap Icon Chevron Down */ + font-family: "bootstrap-icons"; + transition: transform 0.2s ease; + color: var(--primary-color); + } + + details[open] summary::after { + transform: rotate(180deg); + } + + details[open] summary { + border-bottom: 1px solid var(--border-color); + background-color: var(--secondary-color); + border-radius: 0.5rem 0.5rem 0 0; + } + + .details-content { + padding: 1.5rem; + line-height: 1.6; + } + + .timeline-badge { + background-color: var(--primary-color); + color: white; + padding: 0.25em 0.6em; + border-radius: 0.25rem; + font-size: 0.85em; + margin-right: 0.75rem; + white-space: nowrap; + } + + .era-header { + border-bottom: 2px solid var(--primary-color); + padding-bottom: 0.5rem; + margin: 2.5rem 0 1.5rem 0; + color: var(--primary-color); + } + + /* Print Styles */ + @media print { + .header-section { + background: none !important; + color: black !important; + box-shadow: none !important; + padding: 1rem 0 !important; + } + .controls-sticky { + display: none !important; + } + details { + page-break-inside: avoid; + border: 1px solid #ccc !important; + } + details[open] { + border: 1px solid #ccc !important; + } + summary::after { + display: none; + } + .details-content { + display: block !important; + } + body { + background-color: white; + } + } + </style> +</head> +<body> + + <header class="header-section text-center"> + <div class="container"> + <h1 class="display-4 fw-bold mb-3"><i class="bi bi-bank"></i> History of Israel</h1> + <p class="lead mb-0">From Antiquity to Today: A Chronological Reference Guide</p> + </div> + </header> + + <!-- Interactive Controls --> + <div class="controls-sticky"> + <div class="container"> + <div class="row g-3 align-items-center"> + <div class="col-md-6"> + <div class="input-group"> + <span class="input-group-text bg-white"><i class="bi bi-search"></i></span> + <input type="text" id="searchInput" class="form-control" placeholder="Search events, people, or eras..."> + </div> + </div> + <div class="col-md-4"> + <select id="eraFilter" class="form-select"> + <option value="all">All Eras</option> + <option value="ancient">Ancient Period (Pre-63 BCE)</option> + <option value="classical">Roman & Middle Ages (63 BCE - 1517)</option> + <option value="ottoman">Ottoman & British Mandate (1517 - 1948)</option> + <option value="state">State of Israel (1948 - Present)</option> + </select> + </div> + <div class="col-md-2 text-md-end text-center"> + <button id="toggleAllBtn" class="btn btn-outline-primary w-100">Expand All</button> + </div> + </div> + </div> + </div> + + <main class="container"> + + <!-- SECTION: ANCIENT PERIOD --> + <div class="era-section" data-era="ancient"> + <h2 class="era-header"><i class="bi bi-hourglass-top"></i> Ancient Period (c. 1200 BCE – 63 BCE)</h2> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">c. 1200 - 1000 BCE</span> + Biblical Period & Settlement + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>The Exodus & Conquest:</strong> According to biblical tradition, Israelites escape Egypt, wander the desert, and conquer Canaan under Joshua.</li> + <li><strong>Period of the Judges:</strong> A decentralized tribal confederation lacking a central government, led by charismatic leaders known as Judges.</li> + <li><strong>Archaeological Context:</strong> The Merneptah Stele (c. 1208 BCE) provides the earliest extra-biblical reference to a people called "Israel" in Canaan.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">c. 1000 - 930 BCE</span> + United Monarchy + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>King Saul:</strong> First king of Israel, unifies the tribes against Philistine threats.</li> + <li><strong>King David:</strong> Captures Jerusalem and makes it the capital. Establishes a vast regional power.</li> + <li><strong>King Solomon:</strong> Builds the <strong>First Temple</strong> in Jerusalem. Era characterized by wealth, trade, and extensive building projects.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">930 - 586 BCE</span> + Divided Kingdom & First Exile + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>The Split:</strong> Following Solomon's death, the kingdom divides into the Northern Kingdom (Israel) and Southern Kingdom (Judah).</li> + <li><strong>722 BCE (Assyrian Conquest):</strong> The Assyrian Empire destroys the Northern Kingdom, leading to the "Ten Lost Tribes" of Israel.</li> + <li><strong>586 BCE (Babylonian Exile):</strong> King Nebuchadnezzar II of Babylon conquers Judah, destroys the First Temple, and exiles the Jewish elite to Babylon.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">538 - 63 BCE</span> + Persian & Hellenistic Periods + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>538 BCE:</strong> Cyrus the Great of Persia decrees that Jews may return to Zion. The <strong>Second Temple</strong> is constructed (completed c. 516 BCE).</li> + <li><strong>332 BCE:</strong> Alexander the Great conquers the region, initiating the Hellenistic period.</li> + <li><strong>167-160 BCE (Maccabean Revolt):</strong> Jewish rebellion against the Seleucid Empire (Antiochus IV), leading to independent Hasmonean dynasty. (Origin of Hanukkah).</li> + </ul> + </div> + </details> + </div> + + <!-- SECTION: CLASSICAL & MIDDLE AGES --> + <div class="era-section" data-era="classical"> + <h2 class="era-header"><i class="bi bi-columns"></i> Roman & Middle Ages (63 BCE – 1517 CE)</h2> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">63 BCE - 70 CE</span> + Roman Rule & Destruction of Jerusalem + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>63 BCE:</strong> Roman general Pompey captures Jerusalem; Judea becomes a client kingdom of Rome.</li> + <li><strong>37 - 4 BCE:</strong> King Herod the Great rules, expanding the Second Temple.</li> + <li><strong>66 - 73 CE (First Jewish-Roman War):</strong> The Great Revolt against Rome.</li> + <li><strong>70 CE:</strong> Romans (under Titus) breach Jerusalem and <strong>destroy the Second Temple</strong>.</li> + <li><strong>73 CE:</strong> The fall of Masada, marking the end of the revolt.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">132 - 636 CE</span> + Bar Kokhba, Byzantine & Talmudic Era + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>132-136 CE (Bar Kokhba Revolt):</strong> Second major revolt against Rome. Brutally crushed by Emperor Hadrian, who renames Judea to <em>Syria Palaestina</em> and exiles many Jews.</li> + <li><strong>c. 200 - 500 CE:</strong> Center of Jewish life shifts to the Galilee. The Mishnah and Jerusalem Talmud are compiled.</li> + <li><strong>324 - 638 CE:</strong> Byzantine (Christian) rule. Churches are built over Christian holy sites.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">636 - 1517 CE</span> + Islamic, Crusader & Mamluk Periods + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>636 CE:</strong> Arab Muslim armies conquer the region. The Dome of the Rock and Al-Aqsa Mosque are built on the Temple Mount.</li> + <li><strong>1099 - 1291 (Crusader Period):</strong> European Christians conquer Jerusalem, massacring Jewish and Muslim populations. Establish the Kingdom of Jerusalem.</li> + <li><strong>1291 - 1517 (Mamluk Period):</strong> Egyptian Mamluks expel the Crusaders and rule the region, which falls into economic and demographic decline.</li> + </ul> + </div> + </details> + </div> + + <!-- SECTION: OTTOMAN & BRITISH MANDATE --> + <div class="era-section" data-era="ottoman"> + <h2 class="era-header"><i class="bi bi-globe-americas"></i> Ottoman Rule & British Mandate (1517 – 1948)</h2> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">1517 - 1917</span> + The Ottoman Empire + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>Early Ottoman Rule:</strong> Suleiman the Magnificent rebuilds the walls of Jerusalem (which stand today).</li> + <li><strong>Late 19th Century:</strong> The region is largely rural and poor. The first waves of modern Jewish immigration (Aliyah) begin in 1881 due to pogroms in Eastern Europe.</li> + <li><strong>1897:</strong> Theodor Herzl convenes the First Zionist Congress in Basel, establishing modern political Zionism aimed at securing a Jewish homeland.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">1917 - 1947</span> + British Mandate & Road to Statehood + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>1917 (Balfour Declaration):</strong> The British government issues a statement supporting the establishment of a "national home for the Jewish people" in Palestine.</li> + <li><strong>1920 - 1948:</strong> League of Nations grants Britain the Mandate over Palestine. Rising Jewish immigration leads to violent clashes between Arab and Jewish populations.</li> + <li><strong>1936 - 1939:</strong> The Arab Revolt in Palestine against British rule and Jewish immigration. British issue the White Paper of 1939, restricting Jewish entry right before the Holocaust.</li> + <li><strong>1947 (UN Partition Plan):</strong> UN Resolution 181 proposes dividing the land into independent Arab and Jewish states, with Jerusalem under international control. Accepted by Jewish leadership, rejected by Arab leadership.</li> + </ul> + </div> + </details> + </div> + + <!-- SECTION: STATE OF ISRAEL --> + <div class="era-section" data-era="state"> + <h2 class="era-header"><i class="bi bi-flag"></i> State of Israel (1948 – Present)</h2> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">1948 - 1949</span> + Independence & The 1948 War + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>May 14, 1948:</strong> David Ben-Gurion declares the establishment of the State of Israel.</li> + <li><strong>1948 Arab-Israeli War:</strong> Surrounding Arab nations (Egypt, Syria, Jordan, Iraq, Lebanon) invade. Israel survives and expands its borders beyond the UN partition lines.</li> + <li><strong>Results:</strong> Jordan occupies the West Bank and East Jerusalem; Egypt occupies Gaza. Roughly 700,000 Palestinian Arabs flee or are expelled (the <em>Nakba</em>), while an equal number of Jewish refugees flee or are expelled from Arab nations to Israel over subsequent years.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">1956 - 1973</span> + Decades of Conflict + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>1956 (Suez Crisis):</strong> Israel invades the Sinai Peninsula in coordination with Britain and France after Egypt nationalizes the Suez Canal. Israel withdraws under US/Soviet pressure.</li> + <li><strong>1967 (Six-Day War):</strong> Following blockades and troop build-ups by Egypt, Israel launches preemptive strikes. In 6 days, Israel captures the West Bank, East Jerusalem, Gaza Strip, Golan Heights, and Sinai Peninsula.</li> + <li><strong>1973 (Yom Kippur War):</strong> Egypt and Syria launch a surprise attack on the holiest day of the Jewish calendar. Israel suffers heavy initial losses but pushes back forces. The war shatters Israel's aura of invincibility and leads to political shifts.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">1979 - 1999</span> + Peace Treaties & Intifada + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>1979 (Egypt-Israel Peace):</strong> Menachem Begin and Anwar Sadat sign the Camp David Accords. Israel returns the Sinai to Egypt in exchange for full diplomatic relations.</li> + <li><strong>1982 (First Lebanon War):</strong> Israel invades Lebanon to stop PLO attacks, leading to a protracted occupation of southern Lebanon until 2000.</li> + <li><strong>1987 - 1993 (First Intifada):</strong> Palestinian uprising in the West Bank and Gaza. Leads to the creation of Hamas.</li> + <li><strong>1993 - 1995 (Oslo Accords):</strong> Yitzhak Rabin and Yasser Arafat sign agreements creating the Palestinian Authority (PA) with limited self-rule. In 1995, Rabin is assassinated by a Jewish extremist.</li> + <li><strong>1994:</strong> Israel signs a peace treaty with Jordan.</li> + </ul> + </div> + </details> + + <details class="event-card"> + <summary> + <div> + <span class="timeline-badge">2000 - Present</span> + Modern Era Challenges & Accords + </div> + </summary> + <div class="details-content"> + <ul> + <li><strong>2000 - 2005 (Second Intifada):</strong> Violent Palestinian uprising characterized by suicide bombings. Israel builds the West Bank barrier.</li> + <li><strong>2005:</strong> Israel unilaterally withdraws all troops and settlers from the Gaza Strip. Hamas takes control of Gaza in 2007, leading to a joint Israeli-Egyptian blockade.</li> + <li><strong>2006:</strong> Second Lebanon War fought between Israel and Hezbollah.</li> + <li><strong>2020 (Abraham Accords):</strong> US-brokered normalization agreements between Israel and the UAE, Bahrain, Morocco, and Sudan.</li> + <li><strong>Oct 7, 2023 - Present:</strong> Hamas launches a massive surprise terrorist attack, killing ~1,200 Israelis and taking hostages. Triggers the ongoing Israel-Hamas war in Gaza, reshaping Middle East geopolitics.</li> + </ul> + </div> + </details> + </div> + + </main> + + <footer class="text-center py-4 mt-5 text-muted border-top"> + <div class="container"> + <small> + © <script>document.write(new Date().getFullYear())</script> Cheatsheets Collection. + <br>Content for educational purposes. Interactive HTML Cheatsheet pattern. + </small> + </div> + </footer> + + <!-- Bootstrap JS Bundle --> + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmxc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + + <!-- Interactive Logic --> + <script> + document.addEventListener('DOMContentLoaded', function() { + const searchInput = document.getElementById('searchInput'); + const eraFilter = document.getElementById('eraFilter'); + const toggleAllBtn = document.getElementById('toggleAllBtn'); + const eventCards = document.querySelectorAll('.event-card'); + const eraSections = document.querySelectorAll('.era-section'); + + let allExpanded = false; + + // Search Functionality + searchInput.addEventListener('input', filterContent); + + // Era Filter Functionality + eraFilter.addEventListener('change', filterContent); + + function filterContent() { + const searchTerm = searchInput.value.toLowerCase(); + const selectedEra = eraFilter.value; + + eraSections.forEach(section => { + const sectionEra = section.getAttribute('data-era'); + let hasVisibleCards = false; + + const cards = section.querySelectorAll('.event-card'); + cards.forEach(card => { + const text = card.innerText.toLowerCase(); + const matchesSearch = text.includes(searchTerm); + const matchesEra = selectedEra === 'all' || selectedEra === sectionEra; + + if (matchesSearch && matchesEra) { + card.style.display = 'block'; + hasVisibleCards = true; + // Auto-expand if searching + if (searchTerm !== '') { + card.setAttribute('open', ''); + } + } else { + card.style.display = 'none'; + } + }); + + // Hide section entirely if no matching cards or not matching era + if (hasVisibleCards && (selectedEra === 'all' || selectedEra === sectionEra)) { + section.style.display = 'block'; + } else { + section.style.display = 'none'; + } + }); + } + + // Expand/Collapse All + toggleAllBtn.addEventListener('click', function() { + allExpanded = !allExpanded; + eventCards.forEach(card => { + // Only modify visible cards + if (card.style.display !== 'none') { + if (allExpanded) { + card.setAttribute('open', ''); + } else { + card.removeAttribute('open'); + } + } + }); + + toggleAllBtn.textContent = allExpanded ? 'Collapse All' : 'Expand All'; + toggleAllBtn.classList.toggle('btn-outline-primary', !allExpanded); + toggleAllBtn.classList.toggle('btn-primary', allExpanded); + }); + }); + </script> +</body> +</html> \ No newline at end of file