update tarot frame settings UI

This commit is contained in:
2026-04-01 16:08:52 -07:00
parent a7d956cee8
commit efe5017740
7 changed files with 1216 additions and 67 deletions

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=20260401-tarot-frame-09">
<link rel="stylesheet" href="app/styles.css?v=20260401-tarot-frame-12">
</head>
<body>
<div class="topbar">
@@ -75,7 +75,6 @@
<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-frame" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">Frame</button>
<button id="open-tarot-house" class="settings-trigger topbar-sub-trigger" type="button" role="menuitem">House</button>
</div>
</div>
</div>
@@ -314,16 +313,55 @@
<div class="tarot-frame-header">
<div>
<h2 class="tarot-frame-title">Tarot Frame</h2>
<p class="tarot-frame-copy">Arrange all 78 tarot cards inside one master 18x18 grid. The extra cards sit across the top row, and every square stays available for custom layouts.</p>
<p class="tarot-frame-copy">Arrange all 78 tarot cards inside one master 18x18 grid, then switch between the Frames and House of Cards presets without leaving the page.</p>
</div>
<div class="tarot-frame-actions">
<button id="tarot-frame-settings-toggle" class="tarot-frame-action-btn tarot-frame-settings-toggle" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="tarot-frame-settings-panel">Settings</button>
<button id="tarot-frame-reset" class="tarot-frame-action-btn" type="button">Reset Layout</button>
<button id="tarot-frame-layout-toggle" class="tarot-frame-action-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="tarot-frame-layout-panel">Layout: Frames</button>
<div id="tarot-frame-layout-panel" class="tarot-frame-layout-panel" role="menu" aria-label="Tarot Frame layouts" hidden>
<button class="tarot-frame-layout-option" type="button" data-layout-preset-id="frames" role="menuitemradio" aria-checked="true">
<strong>Frames</strong>
<span>The current master frame with top-row extras and nested chronological rings.</span>
</button>
<button class="tarot-frame-layout-option" type="button" data-layout-preset-id="house" role="menuitemradio" aria-checked="false">
<strong>House of Cards</strong>
<span>The legacy house composition rebuilt inside the 18x18 snap grid.</span>
</button>
</div>
<div id="tarot-frame-settings-panel" class="tarot-frame-settings-panel" role="dialog" aria-label="Tarot Frame settings" hidden>
<label class="tarot-frame-toggle" for="tarot-frame-show-info">
<input id="tarot-frame-show-info" type="checkbox" checked>
<span>Display Info</span>
</label>
<div id="tarot-frame-house-settings" class="tarot-frame-settings-group" hidden>
<div class="tarot-frame-settings-heading">House Layout Settings</div>
<div class="tarot-frame-settings-note">These controls mirror the old House of Cards view and only apply while that layout is active.</div>
<label class="tarot-frame-toggle" for="tarot-frame-house-top-cards-visible">
<input id="tarot-frame-house-top-cards-visible" type="checkbox" checked>
<span>Show top card images</span>
</label>
<div class="tarot-frame-settings-subheading">Top Info</div>
<div class="tarot-frame-checkbox-grid">
<label class="tarot-frame-check" for="tarot-frame-house-top-info-hebrew"><input id="tarot-frame-house-top-info-hebrew" type="checkbox" checked><span>Hebrew</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-top-info-planet"><input id="tarot-frame-house-top-info-planet" type="checkbox" checked><span>Planet</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-top-info-zodiac"><input id="tarot-frame-house-top-info-zodiac" type="checkbox" checked><span>Zodiac</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-top-info-trump"><input id="tarot-frame-house-top-info-trump" type="checkbox" checked><span>Trump</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-top-info-path"><input id="tarot-frame-house-top-info-path" type="checkbox" checked><span>Path</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-top-info-date"><input id="tarot-frame-house-top-info-date" type="checkbox"><span>Date</span></label>
</div>
<label class="tarot-frame-toggle" for="tarot-frame-house-bottom-cards-visible">
<input id="tarot-frame-house-bottom-cards-visible" type="checkbox" checked>
<span>Show lower card images</span>
</label>
<div class="tarot-frame-settings-subheading">Lower Info</div>
<div class="tarot-frame-checkbox-grid">
<label class="tarot-frame-check" for="tarot-frame-house-bottom-info-zodiac"><input id="tarot-frame-house-bottom-info-zodiac" type="checkbox" checked><span>Zodiac</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-bottom-info-decan"><input id="tarot-frame-house-bottom-info-decan" type="checkbox" checked><span>Decan</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-bottom-info-month"><input id="tarot-frame-house-bottom-info-month" type="checkbox" checked><span>Month</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-bottom-info-ruler"><input id="tarot-frame-house-bottom-info-ruler" type="checkbox" checked><span>Ruler</span></label>
<label class="tarot-frame-check" for="tarot-frame-house-bottom-info-date"><input id="tarot-frame-house-bottom-info-date" type="checkbox"><span>Date</span></label>
</div>
</div>
<button id="tarot-frame-export-webp" class="tarot-frame-action-btn tarot-frame-export-btn" type="button">Export WebP</button>
</div>
</div>
@@ -1076,9 +1114,9 @@
<script src="app/ui-now-helpers.js?v=20260314-now-planets-grid-01"></script>
<script src="app/ui-now.js?v=20260314-now-planets-grid-01"></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/tarot-database-builders.js?v=20260401-tarot-dates-01"></script>
<script src="app/tarot-database-assembly.js?v=20260401-tarot-dates-01"></script>
<script src="app/tarot-database.js?v=20260401-tarot-dates-01"></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>
@@ -1090,7 +1128,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=20260401-house-top-date-01"></script>
<script src="app/ui-tarot.js?v=20260401-house-top-date-02"></script>
<script src="app/ui-planets-references.js"></script>
<script src="app/ui-planets.js"></script>
<script src="app/ui-cycles.js"></script>
@@ -1130,7 +1168,7 @@
<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-tarot-frame.js?v=20260401-tarot-frame-09"></script>
<script src="app/ui-tarot-frame.js?v=20260401-tarot-frame-11"></script>
<script src="app/ui-settings.js?v=20260309-gate"></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>
@@ -1139,7 +1177,7 @@
<script src="app/ui-home-calendar.js"></script>
<script src="app/ui-section-state.js?v=20260401-tarot-frame-01"></script>
<script src="app/app-runtime.js?v=20260309-gate"></script>
<script src="app.js?v=20260401-tarot-frame-01"></script>
<script src="app.js?v=20260401-tarot-frame-02"></script>
<script src="app/navigation-detail-test-harness.js?v=20260401-universal-detail-02"></script>
</body>
</html>