update ui webp export

This commit is contained in:
2026-03-12 21:01:32 -07:00
parent 9da3ccf678
commit aa3f23c92c
10 changed files with 741 additions and 240 deletions

View File

@@ -16,58 +16,59 @@
<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=20260312-global-search-04">
<link rel="stylesheet" href="app/styles.css?v=20260312-house-cube-01">
</head>
<body>
<div class="topbar">
<button id="open-home" class="topbar-home-button" type="button" aria-pressed="true">Tarot Time!</button>
<button id="topbar-menu-toggle" class="topbar-menu-toggle" type="button" aria-expanded="false" aria-controls="topbar-actions" aria-label="Open navigation menu">Menu</button>
<div id="topbar-actions" 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-timeline" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Timeline</button>
<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 class="topbar-dropdown" aria-label="Alphabet menu">
<button id="open-alphabet" class="settings-trigger" type="button" aria-pressed="false" aria-haspopup="menu" aria-controls="alphabet-subpages" aria-expanded="false">Alphabet</button>
<div id="alphabet-subpages" class="topbar-dropdown-menu" role="menu" aria-label="Alphabet subpages">
<button id="open-alphabet-letters" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Letter Page</button>
<button id="open-alphabet-text" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Text</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>
<button id="open-planets" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Planet</button>
<button id="open-zodiac" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Zodiac</button>
</div>
</div>
<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-holidays" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Holidays</button>
<button id="open-calendar-months" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Months</button>
<button id="open-calendar-timeline" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Timeline</button>
</div>
</div>
<button id="open-elements" class="settings-trigger" type="button" aria-pressed="false">Elements</button>
<button id="open-enochian" class="settings-trigger" type="button" aria-pressed="false">Enochian</button>
<button id="open-gods" class="settings-trigger" type="button" aria-pressed="false">Gods</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>
<div class="topbar-dropdown" aria-label="Alphabet menu">
<button id="open-alphabet" class="settings-trigger" type="button" aria-pressed="false" aria-haspopup="menu" aria-controls="alphabet-subpages" aria-expanded="false">Alphabet ▾</button>
<div id="alphabet-subpages" class="topbar-dropdown-menu" role="menu" aria-label="Alphabet subpages">
<button id="open-alphabet-text" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Text</button>
<button id="open-alphabet-letters" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Letter Page</button>
<button id="open-kabbalah-tree" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Tree</button>
</div>
</div>
<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 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>
<button id="open-tarot-house" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">House</button>
</div>
</div>
</div>
</div>
<div id="connection-gate" class="connection-gate" hidden>
@@ -203,73 +204,6 @@
</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">
@@ -365,6 +299,77 @@
<div id="tarot-spread-board" class="tarot-spread-board" aria-live="polite"></div>
</div>
</section>
<section id="tarot-house-section" hidden>
<div id="tarot-house-view" class="tarot-house-view">
<section class="tarot-misc-section tarot-section-house-top tarot-section-house-page" aria-label="Tarot house of cards">
<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>
</section>
<section id="planet-section" hidden>
<div class="planet-layout">
<aside class="planet-list-panel">
@@ -612,6 +617,7 @@
<input id="kab-path-tarot-toggle" type="checkbox">
<span>Show Tarot cards on paths</span>
</label>
<button id="kab-tree-export-webp" class="kab-export-btn" type="button">Export WebP</button>
</div>
<div id="kab-tree-container" class="kab-tree-container"></div>
</aside>
@@ -770,6 +776,7 @@
<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>
<button id="cube-focus-toggle" class="cube-rotation-btn cube-focus-toggle" type="button" aria-pressed="false">Focus Cube</button>
<button id="cube-export-webp" class="cube-rotation-btn cube-export-btn" type="button">Export WebP</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">
@@ -956,7 +963,7 @@
<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=20260312-compare-zoom-01"></script>
<script src="app/ui-tarot-house.js?v=20260307b"></script>
<script src="app/ui-tarot-house.js?v=20260312-house-cube-01"></script>
<script src="app/ui-tarot-relations.js"></script>
<script src="app/ui-now-helpers.js"></script>
<script src="app/ui-now.js"></script>
@@ -975,7 +982,7 @@
<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-tarot.js?v=20260312-house-cube-01"></script>
<script src="app/ui-planets-references.js"></script>
<script src="app/ui-planets.js"></script>
<script src="app/ui-cycles.js"></script>
@@ -985,12 +992,12 @@
<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-kabbalah.js?v=20260312-tree-export-01"></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?v=20260310-cube-focus-01"></script>
<script src="app/ui-cube.js?v=20260312-house-cube-01"></script>
<script src="app/ui-alphabet-gematria.js?v=20260308b"></script>
<script src="app/ui-alphabet-browser.js?v=20260309-enochian-api"></script>
<script src="app/ui-alphabet-references.js"></script>
@@ -1014,13 +1021,13 @@
<script src="app/ui-numbers.js"></script>
<script src="app/ui-tarot-spread.js"></script>
<script src="app/ui-settings.js?v=20260309-gate"></script>
<script src="app/ui-chrome.js?v=20260312-panel-toggle-02"></script>
<script src="app/ui-navigation.js?v=20260309-alphabet-text-01"></script>
<script src="app/ui-chrome.js?v=20260312-menu-unify-01"></script>
<script src="app/ui-navigation.js?v=20260312-house-cube-01"></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?v=20260309-alphabet-text-01"></script>
<script src="app/ui-section-state.js?v=20260312-house-cube-01"></script>
<script src="app/app-runtime.js?v=20260309-gate"></script>
<script src="app.js?v=20260309-alphabet-text-01"></script>
<script src="app.js?v=20260312-house-cube-01"></script>
</body>
</html>