updated settings to be more user-friendly and added a status message area to provide feedback on settings actions.
This commit is contained in:
+76
-46
@@ -22,7 +22,7 @@
|
||||
<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>
|
||||
<button id="open-settings" class="topbar-menu-toggle topbar-settings-toggle" type="button" aria-pressed="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>
|
||||
@@ -98,56 +98,86 @@
|
||||
</div>
|
||||
</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>
|
||||
<section id="settings-section" hidden>
|
||||
<div class="settings-page-shell">
|
||||
<div class="settings-page-hero">
|
||||
<div>
|
||||
<div class="settings-page-eyebrow">Configuration</div>
|
||||
<h1 class="settings-page-title">Settings</h1>
|
||||
<p class="settings-page-copy">A dedicated page for app behavior, deck caching, and API connection settings. This stays scrollable and leaves room for more controls later.</p>
|
||||
</div>
|
||||
<button id="close-settings" class="settings-page-back" type="button">Back</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>
|
||||
<small id="tarot-deck-cache-status" class="settings-field-hint settings-cache-status" aria-live="polite">Deck cache idle.</small>
|
||||
</label>
|
||||
<label class="settings-field settings-field-full settings-toggle-field" for="stellarium-background">
|
||||
<span>Stellarium Background</span>
|
||||
<span class="settings-toggle-row">
|
||||
<input id="stellarium-background" type="checkbox">
|
||||
<span>Enable live sky background</span>
|
||||
</span>
|
||||
<small id="stellarium-background-hint" class="settings-field-hint">Enter a location or use My Location before enabling the live sky background.</small>
|
||||
</label>
|
||||
<label class="settings-field settings-field-full">API Base URL
|
||||
<input id="api-base-url" type="url" inputmode="url" placeholder="http://localhost:3100">
|
||||
</label>
|
||||
<label class="settings-field settings-field-full">API Key
|
||||
<input id="api-key" type="password" autocomplete="off" placeholder="Optional unless the API requires one">
|
||||
</label>
|
||||
<div class="settings-page-layout">
|
||||
<section class="settings-panel">
|
||||
<div class="settings-panel-head">
|
||||
<strong>Location And Time</strong>
|
||||
<span>Controls calendar rendering, the Now panel, and optional sky background.</span>
|
||||
</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>
|
||||
</div>
|
||||
<div class="settings-panel-actions">
|
||||
<button id="use-location" type="button">Use My Location</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-panel">
|
||||
<div class="settings-panel-head">
|
||||
<strong>Tarot And Assets</strong>
|
||||
<span>Choose the active deck and monitor local browser cache warmup for card images.</span>
|
||||
</div>
|
||||
<div class="settings-grid">
|
||||
<label class="settings-field settings-field-full">Tarot Deck
|
||||
<select id="tarot-deck">
|
||||
<option value="ceremonial-magick" selected>Loading deck manifests...</option>
|
||||
</select>
|
||||
<small id="tarot-deck-cache-status" class="settings-field-hint settings-cache-status" aria-live="polite">Deck cache idle.</small>
|
||||
</label>
|
||||
<label class="settings-field settings-field-full settings-toggle-field" for="stellarium-background">
|
||||
<span>Stellarium Background</span>
|
||||
<span class="settings-toggle-row">
|
||||
<input id="stellarium-background" type="checkbox">
|
||||
<span>Enable live sky background</span>
|
||||
</span>
|
||||
<small id="stellarium-background-hint" class="settings-field-hint">Enter a location or use My Location before enabling the live sky background.</small>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-panel settings-panel-wide">
|
||||
<div class="settings-panel-head">
|
||||
<strong>API Connection</strong>
|
||||
<span>Set the API base URL and key used by this client shell.</span>
|
||||
</div>
|
||||
<div class="settings-grid">
|
||||
<label class="settings-field settings-field-full">API Base URL
|
||||
<input id="api-base-url" type="url" inputmode="url" placeholder="http://localhost:3100">
|
||||
</label>
|
||||
<label class="settings-field settings-field-full">API Key
|
||||
<input id="api-key" type="password" autocomplete="off" placeholder="Optional unless the API requires one">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="settings-actions">
|
||||
<button id="use-location" type="button">Use My Location</button>
|
||||
<div class="settings-actions settings-page-actions">
|
||||
<button id="save-settings" type="button">Save Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="calendar-section" hidden>
|
||||
<div class="planet-layout">
|
||||
<aside class="planet-list-panel">
|
||||
|
||||
Reference in New Issue
Block a user