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

building new tarot frame component for custom layout

Browse Source
This commit is contained in:
Nose
2026-04-01 12:31:56 -07:00
parent d47e63df6d
commit a7d956cee8
11 changed files with 2359 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@@ -16,12 +16,13 @@
<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=20260328-house-mobile-01">
<link rel="stylesheet" href="app/styles.css?v=20260401-tarot-frame-09">
</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>
<button id="open-settings" class="topbar-menu-toggle topbar-settings-toggle" type="button" aria-haspopup="dialog" aria-expanded="false">Settings</button>
<div id="topbar-actions" class="topbar-actions">
<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>
@@ -68,12 +69,12 @@
</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-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-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>
@@ -307,6 +308,31 @@
<div id="tarot-spread-board" class="tarot-spread-board" aria-live="polite"></div>
</div>
</section>
<section id="tarot-frame-section" hidden>
<div id="tarot-frame-view" class="tarot-frame-view">
<div class="tarot-frame-shell">
<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>
</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>
<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>
<button id="tarot-frame-export-webp" class="tarot-frame-action-btn tarot-frame-export-btn" type="button">Export WebP</button>
</div>
</div>
</div>
<div id="tarot-frame-status" class="tarot-frame-status" aria-live="polite">Loading tarot cards...</div>
<div id="tarot-frame-board" class="tarot-frame-board-grid"></div>
</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">
@@ -314,6 +340,9 @@
<div class="tarot-house-card-head">
<strong>House of Cards</strong>
<div class="tarot-house-card-actions">
<button id="tarot-house-settings-toggle" class="tarot-house-action-btn tarot-house-settings-toggle" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="tarot-house-settings-panel">Settings</button>
</div>
<div id="tarot-house-settings-panel" class="tarot-house-settings-panel" role="dialog" aria-label="House of Cards settings" hidden>
<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>
@@ -340,6 +369,10 @@
<input id="tarot-house-top-info-path" type="checkbox" checked>
<span>Path</span>
</label>
<label class="tarot-house-mini-toggle" for="tarot-house-top-info-date">
<input id="tarot-house-top-info-date" type="checkbox">
<span>Date</span>
</label>
</fieldset>
<label class="tarot-house-toggle" for="tarot-house-bottom-cards-visible">
<input id="tarot-house-bottom-cards-visible" type="checkbox" checked>
@@ -1037,8 +1070,8 @@
<script src="app/data-service.js?v=20260319-word-dictionary-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=20260328-mobile-compare-02"></script>
<script src="app/ui-tarot-house.js?v=20260328-house-mobile-01"></script>
<script src="app/ui-tarot-lightbox.js?v=20260328-lightbox-settings-01"></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>
<script src="app/ui-now.js?v=20260314-now-planets-grid-01"></script>
@@ -1057,7 +1090,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=20260328-house-mobile-01"></script>
<script src="app/ui-tarot.js?v=20260401-house-top-date-01"></script>
<script src="app/ui-planets-references.js"></script>
<script src="app/ui-planets.js"></script>
<script src="app/ui-cycles.js"></script>
@@ -1097,14 +1130,16 @@
<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-settings.js?v=20260309-gate"></script>
<script src="app/ui-chrome.js?v=20260314-topbar-panel-toggle-02"></script>
<script src="app/ui-navigation.js?v=20260314-audio-circle-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-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=20260314-audio-circle-01"></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=20260314-audio-circle-01"></script>
<script src="app.js?v=20260401-tarot-frame-01"></script>
<script src="app/navigation-detail-test-harness.js?v=20260401-universal-detail-02"></script>
</body>
</html>