goyimnose/TaroTime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

various ui improvements, including a new sequence nav component and a new kabbalah detail view

Browse Source
This commit is contained in:
Nose
2026-05-28 18:19:13 -07:00
parent c423f1191d
commit 1433ec1495
17 changed files with 2274 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+132 -19
View File
@@ -16,7 +16,7 @@
<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?v=20260424-detail-inline-links-02">
<link rel="stylesheet" href="app/styles.css?v=20260528-kabbalah-cross-split-06">
</head>
<body>
<div class="topbar">
@@ -63,8 +63,12 @@
<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-cube" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Cube</button>
<button id="open-kabbalah-sephirot" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Sefirot</button>
<button id="open-kabbalah-worlds" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Qabalistic Worlds</button>
<button id="open-kabbalah-paths" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Paths</button>
<button id="open-kabbalah-cross" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Rosicrucian Cross</button>
<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-numbers" class="settings-trigger" type="button" aria-pressed="false">Numbers</button>
@@ -216,6 +220,11 @@
<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 class="detail-sequence-nav" aria-label="Browse months">
<button id="calendar-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous month">Back</button>
<div id="calendar-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="calendar-detail-next" class="detail-sequence-btn" type="button" aria-label="Next month">Next</button>
</div>
</div>
<div id="calendar-detail-body"></div>
</section>
@@ -252,6 +261,11 @@
<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 class="detail-sequence-nav" aria-label="Browse holidays">
<button id="holiday-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous holiday">Back</button>
<div id="holiday-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="holiday-detail-next" class="detail-sequence-btn" type="button" aria-label="Next holiday">Next</button>
</div>
</div>
<div id="holiday-detail-body"></div>
</section>
@@ -273,10 +287,14 @@
</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 class="detail-sequence-nav" aria-label="Browse tarot cards">
<button id="tarot-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous tarot card">Back</button>
<div id="tarot-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="tarot-detail-next" class="detail-sequence-btn" type="button" aria-label="Next tarot card">Next</button>
</div>
<div id="tarot-detail-summary" class="tarot-detail-summary">--</div>
</div>
</div>
@@ -291,6 +309,10 @@
</div>
</div>
<div class="tarot-meta-grid">
<div id="tarot-meta-deck-gallery-card" class="tarot-meta-card tarot-deck-gallery-card" hidden>
<strong>Deck Variants</strong>
<div id="tarot-detail-deck-gallery" class="tarot-deck-gallery"></div>
</div>
<div id="tarot-meta-meaning-card" class="tarot-meta-card" hidden>
<strong>Traditional Meaning</strong>
<div id="tarot-detail-meaning" class="planet-text">--</div>
@@ -539,6 +561,11 @@
<div class="planet-detail-heading">
<h2 id="planet-detail-name">--</h2>
<div id="planet-detail-type" class="planet-detail-type">--</div>
<div class="detail-sequence-nav" aria-label="Browse planets">
<button id="planet-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous planet">Back</button>
<div id="planet-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="planet-detail-next" class="detail-sequence-btn" type="button" aria-label="Next planet">Next</button>
</div>
<div id="planet-detail-summary" class="planet-detail-summary">--</div>
</div>
<div class="planet-meta-grid">
@@ -774,19 +801,99 @@
</section>
<section id="kabbalah-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Sefirot</strong>
<span id="kab-browser-count" class="planet-list-count">--</span>
</div>
<div class="kab-browser-intro planet-text">Browse the 11 sefiroth, including Daath, in a dedicated detail browser. Use Paths for the Rosicrucian Cross and Tree for the diagram.</div>
<div id="kab-browser-list" class="planet-card-list" role="listbox" aria-label="Kabbalah sefirot"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="kab-browser-detail-name">Kabbalah Sefirot</h2>
<div id="kab-browser-detail-sub" class="planet-detail-type">Select a sephira or path to explore</div>
<div class="detail-sequence-nav" aria-label="Browse Kabbalah sefirot">
<button id="kab-browser-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous Kabbalah sephirah">Back</button>
<div id="kab-browser-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="kab-browser-detail-next" class="detail-sequence-btn" type="button" aria-label="Next Kabbalah sephirah">Next</button>
</div>
</div>
<div id="kab-browser-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="kabbalah-worlds-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Qabalistic Worlds</strong>
<span id="kab-worlds-count" class="planet-list-count">--</span>
</div>
<div class="kab-browser-intro planet-text">Browse the four Qabalistic Worlds and their corresponding soul layers as a dedicated page.</div>
<div id="kab-worlds-list" class="planet-card-list" role="listbox" aria-label="Qabalistic worlds"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="kab-worlds-detail-name">Qabalistic Worlds</h2>
<div id="kab-worlds-detail-sub" class="planet-detail-type">Select a world layer to explore</div>
<div class="detail-sequence-nav" aria-label="Browse Qabalistic Worlds">
<button id="kab-worlds-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous Qabalistic world">Back</button>
<div id="kab-worlds-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="kab-worlds-detail-next" class="detail-sequence-btn" type="button" aria-label="Next Qabalistic world">Next</button>
</div>
</div>
<div id="kab-worlds-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="kabbalah-paths-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
<div class="planet-list-header">
<strong>Paths</strong>
<span id="kab-paths-count" class="planet-list-count">--</span>
</div>
<div class="kab-browser-intro planet-text">Browse the 22 Hebrew letter paths as their own entry page. Use Rosicrucian Cross for the petal view.</div>
<div id="kab-paths-list" class="planet-card-list" role="listbox" aria-label="Kabbalah paths"></div>
</aside>
<section class="planet-detail-panel" aria-live="polite">
<div class="planet-detail-heading">
<h2 id="kab-paths-detail-name">Kabbalah Paths</h2>
<div id="kab-paths-detail-sub" class="planet-detail-type">Select a path to explore</div>
<div class="detail-sequence-nav" aria-label="Browse Kabbalah paths">
<button id="kab-paths-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous Kabbalah path">Back</button>
<div id="kab-paths-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="kab-paths-detail-next" class="detail-sequence-btn" type="button" aria-label="Next Kabbalah path">Next</button>
</div>
</div>
<div id="kab-paths-detail-body" class="planet-meta-grid"></div>
</section>
</div>
</section>
<section id="kabbalah-cross-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>
<span class="planet-list-count">22 Hebrew Letter Petals</span>
</div>
<div class="kab-rose-intro planet-text">Click a Hebrew letter petal to open path correspondences.</div>
<div class="kab-rose-intro planet-text">Browse the Rosicrucian Cross as its own page. Click a Hebrew letter petal to explore the linked path from the cross view.</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 class="detail-sequence-nav" aria-label="Browse Rosicrucian Cross paths">
<button id="kab-rose-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous Rosicrucian Cross path">Back</button>
<div id="kab-rose-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="kab-rose-detail-next" class="detail-sequence-btn" type="button" aria-label="Next Rosicrucian Cross path">Next</button>
</div>
</div>
<div id="kab-rose-detail-body" class="planet-meta-grid"></div>
</section>
@@ -821,6 +928,11 @@
<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 class="detail-sequence-nav" aria-label="Browse Kabbalah nodes">
<button id="kab-detail-prev" class="detail-sequence-btn" type="button" aria-label="Previous Kabbalah node">Back</button>
<div id="kab-detail-position" class="detail-sequence-position" aria-live="polite">--</div>
<button id="kab-detail-next" class="detail-sequence-btn" type="button" aria-label="Next Kabbalah node">Next</button>
</div>
</div>
<div id="kab-detail-body" class="planet-meta-grid"></div>
</section>
@@ -1182,10 +1294,10 @@
<script src="node_modules/astronomy-engine/astronomy.browser.min.js"></script>
<script src="app/astro-calcs.js"></script>
<script src="app/app-config.js?v=20260309-gate"></script>
<script src="app/data-service.js?v=20260319-word-dictionary-01"></script>
<script src="app/data-service.js?v=20260527-api-connection-01"></script>
<script src="app/calendar-events.js"></script>
<script src="app/card-images.js?v=20260309-gate"></script>
<script src="app/ui-tarot-lightbox.js?v=20260404-lightbox-pinch-01"></script>
<script src="app/card-images.js?v=20260527-tarot-deck-gallery-01"></script>
<script src="app/ui-tarot-lightbox.js?v=20260528-tarot-variant-sequence-02"></script>
<script src="app/ui-tarot-house.js?v=20260401-house-top-date-01"></script>
<script src="app/ui-tarot-relations.js"></script>
<script src="app/ui-now-helpers.js?v=20260314-now-planets-grid-01"></script>
@@ -1198,16 +1310,17 @@
<script src="app/ui-calendar-detail-panels.js?v=20260424-association-web-02"></script>
<script src="app/ui-calendar-detail.js?v=20260424-detail-inline-links-02"></script>
<script src="app/ui-calendar-data.js?v=20260424-decan-ranges-01"></script>
<script src="app/ui-calendar.js"></script>
<script src="app/ui-sequence-nav.js?v=20260528-sequence-nav-01"></script>
<script src="app/ui-calendar.js?v=20260528-sequence-nav-01"></script>
<script src="app/ui-holidays-data.js"></script>
<script src="app/ui-holidays-render.js?v=20260424-association-web-01"></script>
<script src="app/ui-holidays.js"></script>
<script src="app/ui-holidays.js?v=20260528-sequence-nav-01"></script>
<script src="app/ui-tarot-card-derivations.js?v=20260307b"></script>
<script src="app/ui-tarot-detail.js?v=20260424-association-web-04"></script>
<script src="app/ui-tarot-detail.js?v=20260527-tarot-deck-gallery-02"></script>
<script src="app/ui-tarot-relation-display.js?v=20260307b"></script>
<script src="app/ui-tarot.js?v=20260402-frame-lightbox-01"></script>
<script src="app/ui-tarot.js?v=20260528-tarot-variant-sequence-02"></script>
<script src="app/ui-planets-references.js"></script>
<script src="app/ui-planets.js?v=20260424-detail-inline-links-01"></script>
<script src="app/ui-planets.js?v=20260528-sequence-nav-01"></script>
<script src="app/ui-cycles.js?v=20260424-detail-inline-links-02"></script>
<script src="app/ui-elements.js?v=20260424-association-web-01"></script>
<script src="app/ui-audio-notes.js?v=20260314-audio-notes-02"></script>
@@ -1215,9 +1328,9 @@
<script src="app/ui-iching-references.js"></script>
<script src="app/ui-iching.js?v=20260424-association-web-01"></script>
<script src="app/ui-rosicrucian-cross.js"></script>
<script src="app/ui-kabbalah-detail.js?v=20260424-detail-inline-links-01"></script>
<script src="app/ui-kabbalah-detail.js?v=20260528-kabbalah-worlds-03"></script>
<script src="app/ui-kabbalah-views.js"></script>
<script src="app/ui-kabbalah.js?v=20260312-tree-export-01"></script>
<script src="app/ui-kabbalah.js?v=20260528-kabbalah-cross-split-06"></script>
<script src="app/ui-cube-detail.js?v=20260424-association-web-02"></script>
<script src="app/ui-cube-chassis.js?v=20260424-cube-fixes-01"></script>
<script src="app/ui-cube-math.js"></script>
@@ -1246,15 +1359,15 @@
<script src="app/ui-numbers.js"></script>
<script src="app/ui-tarot-spread.js"></script>
<script src="app/ui-tarot-frame.js?v=20260424-frame-export-01"></script>
<script src="app/ui-settings.js?v=20260415-stellarium-toggle-01"></script>
<script src="app/ui-settings.js?v=20260527-tarot-deck-gallery-01"></script>
<script src="app/ui-chrome.js?v=20260328-topbar-settings-01"></script>
<script src="app/ui-navigation.js?v=20260401-tarot-frame-01"></script>
<script src="app/ui-navigation.js?v=20260528-kabbalah-cross-split-06"></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?v=20260415-stellarium-toggle-01"></script>
<script src="app/ui-section-state.js?v=20260401-tarot-frame-01"></script>
<script src="app/ui-section-state.js?v=20260528-kabbalah-cross-split-06"></script>
<script src="app/app-runtime.js?v=20260309-gate"></script>
<script src="app.js?v=20260415-stellarium-toggle-01"></script>
<script src="app.js?v=20260528-kabbalah-cross-split-06"></script>
<script src="app/navigation-detail-test-harness.js?v=20260401-universal-detail-02"></script>
</body>
</html>