vis.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Biblical Timelines — vis-timeline</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://unpkg.com/vis-timeline@8.5.0/styles/vis-timeline-graph2d.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vis-timeline@8.5.0/standalone/umd/vis-timeline-graph2d.min.js"></script>

  <style>
    :root{
      --bg: #0f1115;
      --panel: #11151c;
      --text: #d7dbe3;
      --muted: #9aa4b2;
      --grid: rgba(255,255,255,0.08);
      --grid2: rgba(255,255,255,0.04);
      --border: rgba(255,255,255,0.10);

      --range-bg: rgba(120,165,255,0.22);
      --range-border: rgba(120,165,255,0.45);
      --range-text: #dbe7ff;

      --dot: #78a5ff;
      --dot-border: rgba(255,255,255,0.35);
    }

    body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
    header {
      padding: 12px 16px;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
    }
    #layer-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      padding: 8px 16px 6px;
      font-size: 13px;
      color: var(--text);
      background: var(--panel);
      border-bottom: 1px solid var(--border);
    }
    #layer-controls label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      color: var(--muted);
    }
    #layer-controls input[type="checkbox"] {
      accent-color: #78a5ff;
    }
    #zoom-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 6px 16px 4px;
      background: var(--panel);
      border-bottom: 1px solid var(--border);
    }
    .zoom-btn {
      background: rgba(120,165,255,0.12);
      color: var(--text);
      border: 1px solid rgba(120,165,255,0.25);
      border-radius: 4px;
      padding: 4px 10px;
      font-size: 12px;
      cursor: pointer;
    }
    .zoom-btn:hover {
      background: rgba(120,165,255,0.2);
    }
    #legend {
      padding: 6px 16px 10px;
      background: var(--panel);
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .note { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 10px; }
    #timeline { height: calc(100vh - 90px); }

    .vis-timeline { border: 1px solid var(--border); background: var(--panel); }
    .vis-panel.vis-left,
    .vis-panel.vis-center,
    .vis-panel.vis-right,
    .vis-panel.vis-top,
    .vis-panel.vis-bottom { background: var(--panel) !important; }

    .vis-time-axis .vis-text { color: var(--muted) !important; }
    .vis-labelset .vis-label .vis-inner { color: var(--text) !important; }

    .vis-grid.vis-vertical, .vis-grid.vis-horizontal { border-color: var(--grid) !important; }
    .vis-grid.vis-minor { border-color: var(--grid2) !important; }

    .vis-current-time { background-color: rgba(255,95,95,0.75) !important; }

    /* ranges */
    .vis-item {
      border-color: var(--range-border) !important;
      background-color: var(--range-bg) !important;
      color: var(--range-text) !important;
      box-shadow: none !important;
    }
    .vis-item .vis-item-content { padding: 2px 6px; }

    /* DOT points: only those we mark with class "anchor" */
    .vis-item.vis-point.anchor {
      background: transparent !important;
      border: none !important;
      width: 0 !important;
      height: 0 !important;
      overflow: visible !important;
    }
    .vis-item.vis-point.anchor::before {
      content: "";
      position: absolute;
      left: -5px;
      top: -5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--dot);
      border: 1px solid var(--dot-border);
      box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
    }
    .vis-item.vis-point.anchor .vis-item-content {
      position: absolute;
      left: 10px;
      top: -10px;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      color: var(--text) !important;
      font-weight: 600;
      white-space: nowrap;
      text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    }

    /* softer look for detailed Adamic points */
    .vis-item.vis-point.adamic-detail-dot::before {
      background: rgba(120,165,255,0.6);
      border-color: rgba(255,255,255,0.25);
      box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
    }
    .vis-item.vis-point.adamic-detail-dot .vis-item-content {
      color: var(--muted) !important;
      font-weight: 500;
    }

    /* specialized lane styling */
    .vis-item.nation-span {
      background-color: rgba(104,196,255,0.12) !important;
      border-color: rgba(104,196,255,0.25) !important;
      color: var(--range-text) !important;
    }
    .vis-item.jw-overlay {
      background-color: rgba(255,200,120,0.12) !important;
      border: 1px dashed rgba(255,200,120,0.35) !important;
      color: var(--range-text) !important;
    }
    .vis-item.demo-envelope {
      background-color: rgba(255,255,255,0.05) !important;
      border-color: rgba(255,255,255,0.08) !important;
      color: var(--muted) !important;
    }
    .vis-item.demo-envelope .vis-item-content {
      display: none !important;
    }

    .vis-item.written-window {
      background-color: rgba(140,200,255,0.12) !important;
      border: 1px solid rgba(140,200,255,0.28) !important;
      color: var(--range-text) !important;
    }
    .vis-item.fulfillment-window {
      background-color: rgba(200,160,255,0.12) !important;
      border: 1px solid rgba(200,160,255,0.28) !important;
      color: var(--range-text) !important;
    }
    .vis-item.era-band {
      background: rgba(255,255,255,0.05) !important;
      border-color: rgba(255,255,255,0.08) !important;
    }
    .vis-item.era-band .vis-item-content {
      font-size: 11px;
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <header>
    Human / Prophetic Timeline (vis-timeline)
    <span class="note">Ctrl+Scroll to zoom. Drag to pan. Scroll to move vertically.</span>
  </header>

  <div id="layer-controls">
    <label><input type="checkbox" data-layer="anchors" data-group="adamic_anchors" checked>Anchors</label>
    <label><input type="checkbox" data-layer="details" data-group="adamic_details" checked>Details</label>
    <label><input type="checkbox" data-layer="patriarchs" data-group="patriarchs" checked>Patriarchs</label>
    <label><input type="checkbox" data-layer="gen10" data-group="nations" checked>Genesis 10</label>
    <label><input type="checkbox" data-layer="jw" data-group="jw_prophecy" checked>JW Overlays</label>
    <label><input type="checkbox" data-layer="prophecy" data-group="prophecy_meta" checked>Prophecy Meta</label>
    <label><input type="checkbox" data-layer="demo" data-group="demographic" checked>Demographic Envelope</label>
  </div>
  <div id="zoom-bar">
    <button class="zoom-btn" data-fit="all">Fit All</button>
    <button class="zoom-btn" data-fit="adamic">Fit Adamic</button>
    <button class="zoom-btn" data-fit="gentile">Fit Gentile Times</button>
    <button class="zoom-btn" data-fit="modern">Fit Modern</button>
  </div>
  <div id="legend">
    <span>Era bands = context scaffold (non-doctrinal)</span>
    <span>Patriarch lifespans = genealogical ranges</span>
    <span>JW overlays = interpretive bands</span>
    <span>Demographic envelope = non-doctrinal atmosphere</span>
    <span>Prophecy meta = written vs fulfillment windows</span>
  </div>

  <div id="timeline"></div>

  <!-- cache buster -->
  <script src="vis-data.js?v=11"></script>
  <script>
    (function () {
      const controls = document.getElementById("layer-controls");
      if (!controls) return;
      const LAYER_KEY = "biblicalTimelineLayers";
      const layerMap = new Map([
        ["anchors", "adamic_anchors"],
        ["details", "adamic_details"],
        ["patriarchs", "patriarchs"],
        ["gen10", "nations"],
        ["jw", "jw_prophecy"],
        ["prophecy", "prophecy_meta"],
        ["demo", "demographic"]
      ]);
      const checkboxes = Array.from(controls.querySelectorAll('input[type="checkbox"]'));

      function parseHashLayers() {
        const hash = window.location.hash || "";
        const match = hash.match(/layers=([^&]+)/);
        if (!match) return null;
        return match[1].split(",").map(s => s.trim()).filter(Boolean);
      }

      function parseStoredLayers() {
        const raw = window.localStorage.getItem(LAYER_KEY);
        if (!raw) return null;
        return raw.split(",").map(s => s.trim()).filter(Boolean);
      }

      function normalizeLayers(list) {
        const valid = (list || []).filter(token => layerMap.has(token));
        if (valid.length === 0) {
          return Array.from(layerMap.keys());
        }
        return valid;
      }

      function syncCheckboxes(activeTokens) {
        const activeSet = new Set(activeTokens);
        checkboxes.forEach(cb => {
          const token = cb.dataset.layer;
          cb.checked = activeSet.has(token);
        });
      }

      function persistLayers(tokens) {
        window.localStorage.setItem(LAYER_KEY, tokens.join(","));
        window.location.hash = tokens.length ? `layers=${tokens.join(",")}` : "";
      }

      function applyGroupsFromCheckboxes() {
        if (!window.timeline || !window.timelineGroups) return;
        let selected = checkboxes.filter(cb => cb.checked).map(cb => cb.dataset.layer);
        // Ensure at least one layer stays on
        if (selected.length === 0) {
          const fallback = checkboxes.find(cb => cb.dataset.layer === "anchors");
          if (fallback) {
            fallback.checked = true;
            selected = ["anchors"];
          }
        }
        const groupsOn = selected.map(token => layerMap.get(token)).filter(Boolean);
        const filtered = window.timelineGroups.get({
          filter: g => groupsOn.includes(g.id)
        });
        window.timeline.setGroups(filtered);
        persistLayers(selected);
      }

      function dateYear(year, month = 1, day = 1) {
        const d = new Date(Date.UTC(0, month - 1, day));
        d.setUTCFullYear(Number(year));
        return d;
      }

      function attachZoomButtons() {
        const bar = document.getElementById("zoom-bar");
        if (!bar || !window.timeline) return;
        bar.addEventListener("click", (e) => {
          const btn = e.target.closest(".zoom-btn");
          if (!btn) return;
          const mode = btn.dataset.fit;
          if (mode === "all") {
            window.timeline.fit({ animation: true });
          } else if (mode === "adamic") {
            window.timeline.setWindow(dateYear(-4026, 1, 1), dateYear(2026, 12, 31), { animation: true });
          } else if (mode === "gentile") {
            window.timeline.setWindow(dateYear(-607, 1, 1), dateYear(1914, 12, 31), { animation: true });
          } else if (mode === "modern") {
            window.timeline.setWindow(dateYear(1914, 1, 1), dateYear(2026, 12, 31), { animation: true });
          }
        });
      }

      // Initialize from hash > localStorage > defaults
      const initial = normalizeLayers(parseHashLayers() || parseStoredLayers());
      syncCheckboxes(initial);

      const timer = setInterval(() => {
        if (window.timeline && window.timelineGroups) {
          clearInterval(timer);
          checkboxes.forEach(cb => cb.addEventListener("change", applyGroupsFromCheckboxes));
          applyGroupsFromCheckboxes();
          attachZoomButtons();
        }
      }, 100);
    })();
  </script>
</body>
</html>