Files
TaroTime/index.html

906 lines
46 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tarot Time!</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="node_modules/@toast-ui/calendar/dist/toastui-calendar.min.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-sans-hebrew/hebrew-400.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-sans-hebrew/hebrew-700.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-serif/greek-400.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-serif/greek-700.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-serif/greek-ext-400.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-serif/greek-ext-700.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-sans-phoenician/phoenician-400.css">
<link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-400.css">
<link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-700.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-naskh-arabic/arabic-400.css">
<link rel="stylesheet" href="app/styles.css">
</head>
<body>
<div class="topbar">
<strong>Tarot Time!</strong>
<div class="topbar-actions">
<div class="topbar-dropdown" aria-label="Calendar menu">
<button id="open-calendar" class="settings-trigger" type="button" aria-pressed="false" aria-haspopup="menu" aria-controls="calendar-subpages" aria-expanded="false">Calendar ▾</button>
<div id="calendar-subpages" class="topbar-dropdown-menu" role="menu" aria-label="Calendar subpages">
<button id="open-calendar-months" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Months</button>
<button id="open-holidays" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Holidays</button>
</div>
</div>
<div class="topbar-dropdown" aria-label="Tarot menu">
<button id="open-tarot" class="settings-trigger" type="button" aria-pressed="false" aria-haspopup="menu" aria-controls="tarot-subpages" aria-expanded="false">Tarot ▾</button>
<div id="tarot-subpages" class="topbar-dropdown-menu" role="menu" aria-label="Tarot subpages">
<button id="open-tarot-cards" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Cards</button>
<button id="open-tarot-spread" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Draw Spread</button>
</div>
</div>
<div class="topbar-dropdown" aria-label="Astronomy menu">
<button id="open-astronomy" class="settings-trigger" type="button" aria-pressed="false" aria-haspopup="menu" aria-controls="astronomy-subpages" aria-expanded="false">Astronomy ▾</button>
<div id="astronomy-subpages" class="topbar-dropdown-menu" role="menu" aria-label="Astronomy subpages">
<button id="open-planets" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Planet</button>
<button id="open-cycles" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Cycles</button>
<button id="open-zodiac" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Zodiac</button>
<button id="open-natal" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Natal Chart</button>
</div>
</div>
<button id="open-elements" class="settings-trigger" type="button" aria-pressed="false">Elements</button>
<button id="open-iching" class="settings-trigger" type="button" aria-pressed="false">I Ching</button>
<div class="topbar-dropdown" aria-label="Kabbalah menu">
<button id="open-kabbalah" class="settings-trigger" type="button" aria-pressed="false" aria-haspopup="menu" aria-controls="kabbalah-subpages" aria-expanded="false">Kabbalah ▾</button>
<div id="kabbalah-subpages" class="topbar-dropdown-menu" role="menu" aria-label="Kabbalah subpages">
<button id="open-kabbalah-tree" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Tree</button>
<button id="open-kabbalah-cube" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Cube</button>
</div>
</div>
<button id="open-alphabet" class="settings-trigger" type="button" aria-pressed="false">Alphabet</button>
<button id="open-numbers" class="settings-trigger" type="button" aria-pressed="false">Numbers</button>
<button id="open-quiz" class="settings-trigger" type="button" aria-pressed="false">Quiz</button>
<button id="open-gods" class="settings-trigger" type="button" aria-pressed="false">Gods</button>
<button id="open-enochian" class="settings-trigger" type="button" aria-pressed="false">Enochian</button>
<button id="open-settings" class="settings-trigger" type="button" aria-haspopup="dialog" aria-expanded="false">Settings</button>
</div>
</div>
<div id="settings-popup" class="settings-popup" hidden>
<div id="settings-popup-card" class="settings-popup-card" role="dialog" aria-modal="false" aria-label="Calendar Settings">
<div class="settings-popup-header">
<strong>Settings</strong>
<button id="close-settings" type="button">Close</button>
</div>
<div class="settings-grid">
<label class="settings-field">Latitude
<input id="lat" type="number" step="0.0001" value="51.5074">
</label>
<label class="settings-field">Longitude
<input id="lng" type="number" step="0.0001" value="-0.1278">
</label>
<label class="settings-field settings-field-full">Time Format
<select id="time-format">
<option value="minutes" selected>Minutes (default)</option>
<option value="hours">Hours</option>
<option value="seconds">Seconds</option>
</select>
</label>
<label class="settings-field settings-field-full">Birth Date
<input id="birth-date" type="date">
</label>
<label class="settings-field settings-field-full">Tarot Deck
<select id="tarot-deck">
<option value="ceremonial-magick" selected>Loading deck manifests...</option>
</select>
</label>
</div>
<div class="settings-actions">
<button id="use-location" type="button">Use My Location</button>
<button id="save-settings" type="button">Save Settings</button>
</div>
</div>
</div>
<section id="calendar-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong id="calendar-list-title">Calendar > Months</strong>
<span id="calendar-month-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap" id="calendar-type-wrap">
<label for="calendar-type-select">Calendar System</label>
<select id="calendar-type-select" class="quiz-category-select" aria-label="Select calendar system">
<option value="gregorian">Gregorian Calendar</option>
<option value="hebrew">Hebrew Calendar</option>
<option value="islamic">Islamic Calendar</option>
<option value="wheel-of-year">Wheel of the Year</option>
</select>
</div>
<div class="dataset-search-wrap calendar-year-control" id="calendar-year-wrap">
<label for="calendar-year-input">Year for month facts</label>
<input id="calendar-year-input" type="number" min="1900" max="2500" step="1" value="2026">
</div>
<div class="dataset-search-wrap">
<input id="calendar-search-input" class="dataset-search-input" type="search" placeholder="Search months and events" aria-label="Search calendar months and events">
<button id="calendar-search-clear" class="dataset-search-clear" type="button" aria-label="Clear calendar search" disabled>×</button>
</div>
<div id="calendar-month-list" class="planet-card-list" role="listbox" aria-label="Calendar months"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="calendar-detail-name">--</h2>
<div id="calendar-detail-sub" class="planet-detail-type">Select a month to explore</div>
</div>
<div id="calendar-detail-body"></div>
</section>
</div>
</section>
<section id="holiday-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Holiday Repository</strong>
<span id="holiday-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap calendar-holiday-filter">
<label for="holiday-source-select">Holiday Source</label>
<select id="holiday-source-select" class="quiz-category-select" aria-label="Filter holidays by source calendar">
<option value="all">All Calendars</option>
<option value="gregorian">Gregorian</option>
<option value="hebrew">Hebrew</option>
<option value="islamic">Islamic</option>
<option value="wheel-of-year">Wheel of the Year</option>
</select>
</div>
<div class="dataset-search-wrap calendar-year-control">
<label for="holiday-year-input">Reference Year</label>
<input id="holiday-year-input" type="number" min="1900" max="2500" step="1" value="2026">
</div>
<div class="dataset-search-wrap">
<input id="holiday-search-input" class="dataset-search-input" type="search" placeholder="Search holidays, calendars, date equivalents" aria-label="Search holiday repository">
<button id="holiday-search-clear" class="dataset-search-clear" type="button" aria-label="Clear holiday search" disabled>×</button>
</div>
<div id="holiday-list" class="planet-card-list" role="listbox" aria-label="Holidays"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="holiday-detail-name">--</h2>
<div id="holiday-detail-sub" class="planet-detail-type">Select a holiday to explore</div>
</div>
<div id="holiday-detail-body"></div>
</section>
</div>
</section>
<section id="tarot-section" hidden>
<div id="tarot-browse-view">
<section class="tarot-misc-section tarot-section-house-top" aria-label="Tarot misc">
<div class="tarot-meta-card tarot-house-card">
<div class="tarot-house-card-head">
<strong>House of Cards</strong>
<div class="tarot-house-card-actions">
<label class="tarot-house-toggle" for="tarot-house-top-cards-visible">
<input id="tarot-house-top-cards-visible" type="checkbox" checked>
<span>Show Top Cards</span>
</label>
<fieldset class="tarot-house-filter-group">
<legend>Top Info</legend>
<label class="tarot-house-mini-toggle" for="tarot-house-top-info-hebrew">
<input id="tarot-house-top-info-hebrew" type="checkbox" checked>
<span>Hebrew</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-top-info-planet">
<input id="tarot-house-top-info-planet" type="checkbox" checked>
<span>Planet</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-top-info-zodiac">
<input id="tarot-house-top-info-zodiac" type="checkbox" checked>
<span>Zodiac</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-top-info-trump">
<input id="tarot-house-top-info-trump" type="checkbox" checked>
<span>Trump</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-top-info-path">
<input id="tarot-house-top-info-path" type="checkbox" checked>
<span>Path</span>
</label>
</fieldset>
<label class="tarot-house-toggle" for="tarot-house-bottom-cards-visible">
<input id="tarot-house-bottom-cards-visible" type="checkbox" checked>
<span>Show Bottom Cards</span>
</label>
<fieldset class="tarot-house-filter-group">
<legend>Bottom Info</legend>
<label class="tarot-house-mini-toggle" for="tarot-house-bottom-info-zodiac">
<input id="tarot-house-bottom-info-zodiac" type="checkbox" checked>
<span>Sign</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-bottom-info-decan">
<input id="tarot-house-bottom-info-decan" type="checkbox" checked>
<span>Decan</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-bottom-info-month">
<input id="tarot-house-bottom-info-month" type="checkbox" checked>
<span>Month</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-bottom-info-ruler">
<input id="tarot-house-bottom-info-ruler" type="checkbox" checked>
<span>Ruler</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-bottom-info-date">
<input id="tarot-house-bottom-info-date" type="checkbox">
<span>Date</span>
</label>
</fieldset>
<button id="tarot-house-focus-toggle" class="tarot-house-action-btn" type="button" aria-pressed="false">Focus House</button>
<button id="tarot-house-export" class="tarot-house-action-btn" type="button">Export PNG</button>
<button id="tarot-house-export-webp" class="tarot-house-action-btn" type="button">Export WebP</button>
</div>
</div>
<div id="tarot-house-of-cards" class="tarot-house-layout" aria-live="polite"></div>
</div>
</section>
<div class="tarot-layout">
<aside class="tarot-list-panel">
<div class="tarot-list-header">
<strong>Tarot Database</strong>
<span id="tarot-card-count" class="tarot-list-count">--</span>
</div>
<div class="dataset-search-wrap">
<input id="tarot-search-input" class="dataset-search-input" type="search" placeholder="Search cards, keywords, relations" aria-label="Search tarot cards">
<button id="tarot-search-clear" class="dataset-search-clear" type="button" aria-label="Clear tarot search" disabled>×</button>
</div>
<div id="tarot-card-list" class="tarot-card-list" role="listbox" aria-label="Tarot cards"></div>
</aside>
<section class="tarot-detail-panel" aria-live="polite">
<div class="tarot-detail-top">
<img id="tarot-detail-image" class="tarot-detail-image" alt="Tarot card image" />
<div class="tarot-detail-heading">
<h2 id="tarot-detail-name">--</h2>
<div id="tarot-detail-type" class="tarot-detail-type">--</div>
<div id="tarot-detail-summary" class="tarot-detail-summary">--</div>
</div>
</div>
<div class="tarot-meanings">
<div class="tarot-meaning-card">
<strong>Upright</strong>
<div id="tarot-detail-upright">--</div>
</div>
<div class="tarot-meaning-card">
<strong>Reversed</strong>
<div id="tarot-detail-reversed">--</div>
</div>
</div>
<div class="tarot-meta-grid">
<div id="tarot-meta-meaning-card" class="tarot-meta-card" hidden>
<strong>Traditional Meaning</strong>
<div id="tarot-detail-meaning" class="planet-text">--</div>
</div>
<div class="tarot-meta-card">
<strong>Keywords</strong>
<div id="tarot-detail-keywords" class="tarot-keywords"></div>
</div>
<div id="tarot-meta-planet-card" class="tarot-meta-card" hidden>
<strong>Planet</strong>
<ul id="tarot-detail-planet" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-element-card" class="tarot-meta-card" hidden>
<strong>Element</strong>
<ul id="tarot-detail-element" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-tetragrammaton-card" class="tarot-meta-card" hidden>
<strong>Tetragrammaton</strong>
<ul id="tarot-detail-tetragrammaton" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-zodiac-card" class="tarot-meta-card" hidden>
<strong>Zodiac</strong>
<ul id="tarot-detail-zodiac" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-courtdate-card" class="tarot-meta-card" hidden>
<strong>Court Date Window</strong>
<ul id="tarot-detail-courtdate" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-hebrew-card" class="tarot-meta-card" hidden>
<strong>Hebrew Letter</strong>
<ul id="tarot-detail-hebrew" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-cube-card" class="tarot-meta-card" hidden>
<strong>Cube of Space</strong>
<ul id="tarot-detail-cube" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-iching-card" class="tarot-meta-card" hidden>
<strong>I Ching</strong>
<ul id="tarot-detail-iching" class="tarot-relations"></ul>
</div>
<div id="tarot-meta-calendar-card" class="tarot-meta-card" hidden>
<strong>Calendar Months</strong>
<ul id="tarot-detail-calendar" class="tarot-relations"></ul>
</div>
</div>
<div id="tarot-kab-path" class="tarot-kab-path-card" hidden></div>
</section>
</div>
</div>
<div id="tarot-spread-view" hidden>
<div class="tarot-spread-toolbar">
<button id="tarot-spread-back" class="tarot-spread-back-btn" type="button">← Card Browser</button>
<div class="tarot-spread-type-controls" role="group" aria-label="Spread type">
<button id="tarot-spread-btn-three" class="tarot-spread-type-btn" type="button">3 Card</button>
<button id="tarot-spread-btn-celtic" class="tarot-spread-type-btn" type="button">Celtic Cross</button>
</div>
<button id="tarot-spread-reveal-all" class="tarot-spread-redraw-btn" type="button">Reveal All</button>
<button id="tarot-spread-redraw" class="tarot-spread-redraw-btn" type="button">⟳ Redraw</button>
</div>
<div id="tarot-spread-meanings" class="tarot-spread-meanings" aria-live="polite"></div>
<div id="tarot-spread-board" class="tarot-spread-board" aria-live="polite"></div>
</div>
</section>
<section id="planet-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Planet Database</strong>
<span id="planet-card-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap">
<input id="planet-search-input" class="dataset-search-input" type="search" placeholder="Search planets, class, correspondence" aria-label="Search planets">
<button id="planet-search-clear" class="dataset-search-clear" type="button" aria-label="Clear planet search" disabled>×</button>
</div>
<div id="planet-card-list" class="planet-card-list" role="listbox" aria-label="Planets"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="planet-detail-name">--</h2>
<div id="planet-detail-type" class="planet-detail-type">--</div>
<div id="planet-detail-summary" class="planet-detail-summary">--</div>
</div>
<div class="planet-meta-grid">
<div class="planet-meta-card">
<strong>Science Facts</strong>
<div id="planet-detail-facts" class="planet-facts-list"></div>
</div>
<div class="planet-meta-card">
<strong>Atmosphere</strong>
<p id="planet-detail-atmosphere" class="planet-text">--</p>
</div>
<div class="planet-meta-card">
<strong>Notable Facts</strong>
<ul id="planet-detail-notable" class="planet-notes"></ul>
</div>
<div class="planet-meta-card">
<strong>Tarot / Weekday Relation</strong>
<div id="planet-detail-correspondence" class="planet-text">--</div>
</div>
</div>
</section>
</div>
</section>
<section id="cycles-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Cycles Dataset</strong>
<span id="cycles-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap">
<input id="cycles-search-input" class="dataset-search-input" type="search" placeholder="Search cycles, periods, categories" aria-label="Search astronomy cycles">
<button id="cycles-search-clear" class="dataset-search-clear" type="button" aria-label="Clear cycles search" disabled>×</button>
</div>
<div id="cycles-list" class="planet-card-list" role="listbox" aria-label="Astronomy cycles"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="cycles-detail-name">--</h2>
<div id="cycles-detail-type" class="planet-detail-type">Select a cycle to explore</div>
<div id="cycles-detail-summary" class="planet-detail-summary">--</div>
</div>
<div id="cycles-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="elements-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Classical Elements</strong>
<span id="elements-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap">
<input id="elements-search-input" class="dataset-search-input" type="search" placeholder="Search elements, symbols, tarot ace" aria-label="Search classical elements">
<button id="elements-search-clear" class="dataset-search-clear" type="button" aria-label="Clear elements search" disabled>×</button>
</div>
<div id="elements-list" class="planet-card-list" role="listbox" aria-label="Classical elements"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="elements-detail-name">--</h2>
<div id="elements-detail-sub" class="planet-detail-type">Select an element to explore</div>
</div>
<div id="elements-detail-body"></div>
</section>
</div>
</section>
<section id="iching-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>I Ching Database</strong>
<span id="iching-card-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap">
<input id="iching-search-input" class="dataset-search-input" type="search" placeholder="Search hexagrams, trigrams, keywords" aria-label="Search I Ching hexagrams">
<button id="iching-search-clear" class="dataset-search-clear" type="button" aria-label="Clear I Ching search" disabled>×</button>
</div>
<div id="iching-card-list" class="planet-card-list" role="listbox" aria-label="I Ching hexagrams"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="iching-detail-name">--</h2>
<div id="iching-detail-type" class="planet-detail-type">--</div>
<div id="iching-detail-summary" class="planet-detail-summary">--</div>
</div>
<div class="planet-meta-grid">
<div class="planet-meta-card">
<strong>Oracle Text</strong>
<p id="iching-detail-judgement" class="planet-text">--</p>
<p id="iching-detail-image" class="planet-text">--</p>
</div>
<div class="planet-meta-card">
<strong>Binary Pattern</strong>
<p id="iching-detail-binary" class="planet-text">--</p>
<div id="iching-detail-line" class="iching-diagram">--</div>
</div>
<div class="planet-meta-card">
<strong>Keywords</strong>
<div id="iching-detail-keywords" class="tarot-keywords"></div>
</div>
<div class="planet-meta-card">
<strong>Planetary Influence</strong>
<p id="iching-detail-planet" class="planet-text">--</p>
</div>
<div class="planet-meta-card">
<strong>Tarot Correspondences</strong>
<div id="iching-detail-tarot" class="planet-text iching-tarot-text">--</div>
</div>
<div class="planet-meta-card">
<strong>Calendar Months</strong>
<div id="iching-detail-calendar" class="alpha-nav-btns"></div>
</div>
<div class="planet-meta-card">
<strong>Trigrams</strong>
<div id="iching-detail-trigrams" class="iching-trigram-grid"></div>
</div>
</div>
</section>
</div>
</section>
<section id="astronomy-section" hidden>
<div class="kabbalah-placeholder">
<div class="kabbalah-placeholder-card">
<strong>Astronomy</strong>
<div class="planet-text">This Astronomy landing page is intentionally blank for now. Use the Astronomy menu to open Planet, Zodiac, or Natal Chart.</div>
</div>
</div>
</section>
<section id="natal-section" hidden>
<div class="kabbalah-placeholder">
<div class="kabbalah-placeholder-card">
<strong>Natal Chart</strong>
<div class="planet-text">Natal chart scaffolding and anchor summary.</div>
<pre id="natal-chart-summary" class="planet-text natal-chart-summary">Natal Chart Scaffold: --</pre>
</div>
</div>
</section>
<section id="quiz-section" hidden>
<div class="quiz-layout">
<div class="quiz-card">
<div class="planet-detail-heading">
<h2>Correspondence Quiz</h2>
<div class="planet-detail-type">Random correspondence questions with real-value options only</div>
</div>
<div class="quiz-toolbar">
<label class="quiz-category-label" for="quiz-category">Category</label>
<select id="quiz-category" class="quiz-category-select" aria-label="Quiz category">
<option value="random">Random</option>
<option value="all">All</option>
</select>
<label class="quiz-difficulty-label" for="quiz-difficulty">Difficulty</label>
<select id="quiz-difficulty" class="quiz-difficulty-select" aria-label="Quiz difficulty">
<option value="easy">Easy</option>
<option value="normal" selected>Normal</option>
<option value="hard">Hard</option>
</select>
</div>
<div class="quiz-score-grid" aria-live="polite">
<div class="quiz-score-item">
<div class="quiz-score-label">Correct</div>
<div id="quiz-score-correct" class="quiz-score-value">0</div>
</div>
<div class="quiz-score-item">
<div class="quiz-score-label">Answered</div>
<div id="quiz-score-answered" class="quiz-score-value">0</div>
</div>
<div class="quiz-score-item">
<div class="quiz-score-label">Accuracy</div>
<div id="quiz-score-accuracy" class="quiz-score-value">0%</div>
</div>
</div>
</div>
<div class="quiz-card" aria-live="polite">
<div id="quiz-question-type" class="planet-detail-type">--</div>
<p id="quiz-question" class="quiz-question">Loading question…</p>
<div id="quiz-options" class="quiz-options"></div>
<div id="quiz-feedback" class="planet-text">Choose the best answer.</div>
<div class="quiz-actions">
<button id="quiz-reset" class="settings-trigger" type="button">Reset Score</button>
</div>
</div>
</div>
</section>
<section id="kabbalah-section" hidden>
<div class="kab-rose-layout">
<aside class="kab-rose-panel">
<div class="planet-list-header">
<strong>Rosicrucian Cross</strong>
<span class="planet-list-count">22 Hebrew Letter Paths</span>
</div>
<div class="kab-rose-intro planet-text">Click a Hebrew letter petal to open path correspondences.</div>
<div id="kab-rose-cross-container" class="kab-rose-cross-container"></div>
</aside>
<section class="kab-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="kab-rose-detail-name">Rosicrucian Cross</h2>
<div id="kab-rose-detail-sub" class="planet-detail-type">Select a Hebrew letter petal to explore the path</div>
</div>
<div id="kab-rose-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="kabbalah-tree-section" hidden>
<div class="kab-layout">
<aside class="kab-tree-panel">
<div class="planet-list-header">
<strong>Tree of Life</strong>
<span class="planet-list-count">32 Paths</span>
</div>
<div class="kab-path-toggle-wrap">
<label class="kab-path-toggle-control" for="kab-path-letter-toggle">
<input id="kab-path-letter-toggle" type="checkbox" checked>
<span>Show path letters</span>
</label>
<label class="kab-path-toggle-control" for="kab-path-number-toggle">
<input id="kab-path-number-toggle" type="checkbox" checked>
<span>Show path numbers</span>
</label>
<label class="kab-path-toggle-control" for="kab-path-tarot-toggle">
<input id="kab-path-tarot-toggle" type="checkbox">
<span>Show Tarot cards on paths</span>
</label>
</div>
<div id="kab-tree-container" class="kab-tree-container"></div>
</aside>
<section class="kab-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="kab-detail-name">Kabbalah Tree of Life</h2>
<div id="kab-detail-sub" class="planet-detail-type">Select a sephira or path to explore</div>
</div>
<div id="kab-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="alphabet-section" hidden>
<section class="alpha-special-top" aria-label="Alphabet special tools">
<div class="planet-meta-card alpha-gematria-card">
<strong>Gematria Calculator</strong>
<div class="alpha-gematria-controls">
<label class="alpha-gematria-field" for="alpha-gematria-cipher">
<span>Cipher</span>
<select id="alpha-gematria-cipher" class="alpha-gematria-cipher" aria-label="Gematria cipher"></select>
</label>
<label class="alpha-gematria-field" for="alpha-gematria-input">
<span>Text</span>
<textarea id="alpha-gematria-input" class="alpha-gematria-input" placeholder="Type or paste text"></textarea>
</label>
</div>
<div id="alpha-gematria-result" class="alpha-gematria-result">Total: --</div>
<div id="alpha-gematria-breakdown" class="alpha-gematria-breakdown">Type text to calculate.</div>
</div>
</section>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Alphabet Database</strong>
<span id="alpha-letter-count" class="planet-list-count">--</span>
</div>
<div class="alpha-tabs">
<button id="alpha-tab-all" class="alpha-tab-btn alpha-tab-active" data-alpha="all">All</button>
<button id="alpha-tab-hebrew" class="alpha-tab-btn" data-alpha="hebrew">Hebrew</button>
<button id="alpha-tab-greek" class="alpha-tab-btn" data-alpha="greek">Greek</button>
<button id="alpha-tab-english" class="alpha-tab-btn" data-alpha="english">English</button>
<button id="alpha-tab-arabic" class="alpha-tab-btn" data-alpha="arabic">Arabic</button>
<button id="alpha-tab-enochian" class="alpha-tab-btn" data-alpha="enochian">Enochian</button>
</div>
<div class="dataset-search-wrap alpha-filter-search-wrap">
<input id="alpha-search-input" class="dataset-search-input" type="search" placeholder="Search letters, meanings, transliteration, or position (e.g., 13)" aria-label="Search alphabet letters">
<button id="alpha-search-clear" class="dataset-search-clear" type="button" aria-label="Clear alphabet search" disabled>×</button>
</div>
<div class="alpha-filter-type-wrap">
<label for="alpha-type-filter">Class</label>
<select id="alpha-type-filter" class="alpha-type-filter" aria-label="Filter by letter class">
<option value="">All</option>
<option value="mother">Mother</option>
<option value="double">Double</option>
<option value="simple">Simple</option>
</select>
</div>
<div id="alpha-letter-list" class="planet-card-list" role="listbox" aria-label="Letters"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="alpha-detail-name">--</h2>
<div id="alpha-detail-sub" class="planet-detail-type">Select a letter to explore</div>
</div>
<div id="alpha-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="cube-section" hidden>
<div class="kab-layout">
<aside class="kab-tree-panel">
<div class="planet-list-header">
<strong>Cube of Space</strong>
<span class="planet-list-count">6 Walls · 12 Edges</span>
</div>
<div id="cube-rotation-controls" class="cube-rotation-controls" aria-label="Rotate cube">
<button id="cube-rotate-left" class="cube-rotation-btn" type="button" title="Rotate left"></button>
<button id="cube-rotate-right" class="cube-rotation-btn" type="button" title="Rotate right"></button>
<button id="cube-rotate-up" class="cube-rotation-btn" type="button" title="Rotate up"></button>
<button id="cube-rotate-down" class="cube-rotation-btn" type="button" title="Rotate down"></button>
<button id="cube-rotate-reset" class="cube-rotation-btn" type="button" title="Reset rotation">Reset</button>
<div class="cube-marker-mode-control">
<label for="cube-marker-mode" class="cube-marker-mode-label">Marker display</label>
<select id="cube-marker-mode" class="cube-marker-mode-select" aria-label="Cube marker display mode">
<option value="both" selected>Letter + Astrology</option>
<option value="letter">Letter only</option>
<option value="astro">Astrology only</option>
<option value="tarot">Tarot Cards</option>
</select>
</div>
<label class="cube-connector-toggle-control" for="cube-connector-toggle">
<input id="cube-connector-toggle" type="checkbox" checked>
<span>Show mother connector lines</span>
</label>
<label class="cube-primal-toggle-control" for="cube-primal-toggle">
<input id="cube-primal-toggle" type="checkbox" checked>
<span>Show primal point</span>
</label>
<div id="cube-rotation-readout" class="cube-rotation-readout">X 0° · Y 0°</div>
</div>
<div id="cube-view-container" class="kab-tree-container"></div>
</aside>
<section class="kab-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="cube-detail-name">Cube of Space</h2>
<div id="cube-detail-sub" class="planet-detail-type">Select a wall or edge to explore</div>
</div>
<div id="cube-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="zodiac-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Zodiac Signs</strong>
<span id="zodiac-sign-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap">
<input id="zodiac-search-input" class="dataset-search-input" type="search" placeholder="Search signs, element, modality" aria-label="Search zodiac signs">
<button id="zodiac-search-clear" class="dataset-search-clear" type="button" aria-label="Clear zodiac search" disabled>×</button>
</div>
<div id="zodiac-sign-list" class="planet-card-list" role="listbox" aria-label="Zodiac signs"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="zodiac-detail-name" class="zod-detail-name">--</h2>
<div id="zodiac-detail-sub" class="planet-detail-type">Select a sign to explore</div>
</div>
<div id="zodiac-detail-body"></div>
</section>
</div>
</section>
</section>
<section id="gods-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Divine Pantheons</strong>
<span id="gods-count" class="planet-list-count">--</span>
</div>
<div id="gods-tabs" class="gods-tabs"></div>
<div class="dataset-search-wrap">
<input id="gods-search-input" class="dataset-search-input" type="search" placeholder="Search gods, sephiroth, paths…" aria-label="Search divine names">
<button id="gods-search-clear" class="dataset-search-clear" type="button" aria-label="Clear search" disabled>×</button>
</div>
<div id="gods-list" class="planet-card-list" role="listbox" aria-label="Divine correspondences"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="gods-detail-name">--</h2>
<div id="gods-detail-sub" class="planet-detail-type">Select a deity to explore</div>
</div>
<div id="gods-detail-body"></div>
</section>
</div>
</section>
<section id="enochian-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Enochian Tablets</strong>
<span id="enochian-count" class="planet-list-count">--</span>
</div>
<div class="dataset-search-wrap">
<input id="enochian-search-input" class="dataset-search-input" type="search" placeholder="Search tablets, elements, letters" aria-label="Search Enochian tablets">
<button id="enochian-search-clear" class="dataset-search-clear" type="button" aria-label="Clear Enochian search" disabled>×</button>
</div>
<div id="enochian-list" class="planet-card-list" role="listbox" aria-label="Enochian tablets"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="enochian-detail-name">--</h2>
<div id="enochian-detail-sub" class="planet-detail-type">Select a tablet to explore</div>
</div>
<div id="enochian-detail-body"></div>
</section>
</div>
</section>
<section id="numbers-section" hidden>
<div class="kab-layout numbers-layout">
<aside id="numbers-special-panel" class="numbers-special-panel" aria-label="4 card arrangement"></aside>
<div class="planet-layout numbers-main-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Numbers (Digital Root)</strong>
<span id="numbers-count" class="planet-list-count">--</span>
</div>
<div id="numbers-list" class="planet-card-list" role="listbox" aria-label="Numbers 0 through 9"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="numbers-detail-name">--</h2>
<div id="numbers-detail-type" class="planet-detail-type">--</div>
<div id="numbers-detail-summary" class="planet-detail-summary">--</div>
</div>
<div id="numbers-detail-body" class="numbers-detail-body"></div>
</section>
</div>
</div>
</section>
<div id="now-panel">
<iframe id="now-sky-layer" aria-hidden="true" scrolling="no" allow="geolocation"></iframe>
<div class="now-section">
<div class="now-title">Current Planetary Hour</div>
<img id="now-hour-card" class="now-card" alt="Current planetary hour card" />
<div id="now-hour" class="now-primary now-primary-hour">--</div>
<div id="now-hour-tarot" class="now-tarot">--</div>
<div class="now-countdown-row">
<span id="now-countdown" class="now-countdown-value">--</span>
<span id="now-hour-next" class="now-countdown-next">> --</span>
</div>
</div>
<div class="now-section">
<div class="now-title">Moon Phase</div>
<img id="now-moon-card" class="now-card" alt="Current moon phase card" />
<div id="now-moon" class="now-primary now-primary-moon">--</div>
<div id="now-moon-tarot" class="now-tarot">--</div>
<div class="now-countdown-row">
<span id="now-moon-countdown" class="now-countdown-value">--</span>
<span id="now-moon-next" class="now-countdown-next">> --</span>
</div>
</div>
<div class="now-section">
<div class="now-title">Current Decan (Sun)</div>
<img id="now-decan-card" class="now-card" alt="Current decan card" />
<div id="now-decan" class="now-primary now-primary-decan">--</div>
<div id="now-decan-tarot" class="now-tarot">--</div>
<div class="now-countdown-row">
<span id="now-decan-countdown" class="now-countdown-value">--</span>
<span id="now-decan-next" class="now-countdown-next">> --</span>
</div>
</div>
<div class="now-stats-section">
<div class="now-stats-title">Current Planet Positions & Sabian Symbol</div>
<div id="now-stats-sabian" class="now-stats-sabian">--</div>
<div id="now-stats-planets" class="now-stats-planets">--</div>
</div>
</div>
<div id="month-strip" aria-hidden="true"></div>
<div id="calendar"></div>
<script src="node_modules/@toast-ui/calendar/dist/toastui-calendar.min.js"></script>
<script src="node_modules/suncalc/suncalc.js"></script>
<script src="node_modules/astronomy-engine/astronomy.browser.min.js"></script>
<script src="app/astro-calcs.js"></script>
<script src="app/data-service.js"></script>
<script src="app/calendar-events.js"></script>
<script src="app/card-images.js?v=20260307b"></script>
<script src="app/ui-tarot-lightbox.js?v=20260307b"></script>
<script src="app/ui-tarot-house.js?v=20260307b"></script>
<script src="app/ui-tarot-relations.js"></script>
<script src="app/ui-now-helpers.js"></script>
<script src="app/ui-now.js"></script>
<script src="app/ui-natal.js"></script>
<script src="app/tarot-database-builders.js"></script>
<script src="app/tarot-database-assembly.js"></script>
<script src="app/tarot-database.js"></script>
<script src="app/ui-calendar-dates.js"></script>
<script src="app/ui-calendar-detail-panels.js"></script>
<script src="app/ui-calendar-detail.js"></script>
<script src="app/ui-calendar-data.js"></script>
<script src="app/ui-calendar.js"></script>
<script src="app/ui-holidays-data.js"></script>
<script src="app/ui-holidays-render.js"></script>
<script src="app/ui-holidays.js"></script>
<script src="app/ui-tarot-card-derivations.js?v=20260307b"></script>
<script src="app/ui-tarot-detail.js?v=20260307b"></script>
<script src="app/ui-tarot-relation-display.js?v=20260307b"></script>
<script src="app/ui-tarot.js?v=20260307b"></script>
<script src="app/ui-planets-references.js"></script>
<script src="app/ui-planets.js"></script>
<script src="app/ui-cycles.js"></script>
<script src="app/ui-elements.js"></script>
<script src="app/ui-iching-references.js"></script>
<script src="app/ui-iching.js"></script>
<script src="app/ui-rosicrucian-cross.js"></script>
<script src="app/ui-kabbalah-detail.js"></script>
<script src="app/ui-kabbalah-views.js"></script>
<script src="app/ui-kabbalah.js"></script>
<script src="app/ui-cube-detail.js"></script>
<script src="app/ui-cube-chassis.js"></script>
<script src="app/ui-cube-math.js"></script>
<script src="app/ui-cube-selection.js"></script>
<script src="app/ui-cube.js"></script>
<script src="app/ui-alphabet-gematria.js"></script>
<script src="app/ui-alphabet-browser.js"></script>
<script src="app/ui-alphabet-references.js"></script>
<script src="app/ui-alphabet-detail.js"></script>
<script src="app/ui-alphabet-kabbalah.js"></script>
<script src="app/ui-alphabet.js"></script>
<script src="app/ui-zodiac-references.js"></script>
<script src="app/ui-zodiac.js"></script>
<script src="app/ui-quiz-bank-builtins-domains.js"></script>
<script src="app/ui-quiz-bank-builtins.js"></script>
<script src="app/ui-quiz-bank.js"></script>
<script src="app/ui-quiz.js"></script>
<script src="app/quiz-plugin-helpers.js"></script>
<script src="app/quiz-calendars.js"></script>
<script src="app/quiz-connections.js"></script>
<script src="app/ui-gods-references.js"></script>
<script src="app/ui-gods.js"></script>
<script src="app/ui-enochian.js"></script>
<script src="app/ui-numbers-detail.js"></script>
<script src="app/ui-numbers.js"></script>
<script src="app/ui-tarot-spread.js"></script>
<script src="app/ui-settings.js"></script>
<script src="app/ui-chrome.js"></script>
<script src="app/ui-navigation.js"></script>
<script src="app/ui-calendar-formatting.js?v=20260307b"></script>
<script src="app/ui-calendar-visuals.js?v=20260307b"></script>
<script src="app/ui-home-calendar.js"></script>
<script src="app/ui-section-state.js"></script>
<script src="app/app-runtime.js"></script>
<script src="app.js"></script>
</body>
</html>