drew/fabula-ultima-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Manage page, light/dark theme toggle, and URL sharing

Browse Source 
- Move Save, Load, Export, Import buttons to a dedicated Manage page
- Add light theme with warm parchment palette; auto-detect via prefers-color-scheme, persisted to localStorage
- Add URL sharing: sheet state is deflate-raw compressed, base64-encoded, and stored in ?c= parameter; auto-save is suppressed when viewing a shared URL
- Extract JS to fabula-ultima-sheet.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Drew Malzahn
2026-06-05 02:28:12 +00:00
parent 9ade0820d6
commit 52ee6ea26b
3 changed files with 153 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
fabula-ultima-sheet.html
View File

@@ -20,21 +20,20 @@
<button class="tab active" onclick="switchTab('main')">Character</button>
<button class="tab" onclick="switchTab('classes')">Classes</button>
<button class="tab" onclick="switchTab('spells')">Arcana & Spells</button>
<button class="tab" onclick="switchTab('manage')">Manage</button>
</div>
<div class="toolbar">
<button class="btn-save" onclick="saveSheet()">✦ Save</button>
<button class="btn-load" onclick="loadSheet()">↑ Load</button>
<div class="toolbar-sep"></div>
<button class="btn-save btn-export" onclick="exportSheet()">↓ Export JSON</button>
<button class="btn-load btn-import" onclick="importSheet()">↑ Import JSON</button>
<input type="file" id="importFileInput" accept=".json,application/json" style="display:none"
onchange="handleImportFile(this)">
<span class="save-status" id="saveStatus">Saved!</span>
<div class="toolbar-sep"></div>
<button class="btn-theme" id="themeToggle" onclick="toggleTheme()">☀ Light</button>
</div>
</header>
<div id="urlBanner" class="url-banner" style="display:none">
<span class="url-banner-icon">⚑</span>
Viewing a shared character — auto-save is disabled.
Use <strong>Manage → Save to Browser</strong> to keep any changes.
</div>
<!-- ══════════════════════════════════════════════════
PAGE 1: MAIN CHARACTER
══════════════════════════════════════════════════ -->
@@ -430,6 +429,44 @@
</div>
<!-- ══════════════════════════════════════════════════
PAGE 4: MANAGE
══════════════════════════════════════════════════ -->
<div class="page" id="page-manage">
<div class="manage-grid">
<div class="section">
<div class="section-title"><span class="icon">◈</span> Local Save</div>
<p class="manage-desc">Save your character sheet to your browser's local storage, or load a previously saved sheet.</p>
<div class="manage-btn-row">
<button class="btn-save btn-lg" onclick="saveSheet()">✦ Save to Browser</button>
<button class="btn-load btn-lg" onclick="loadSheet()">↑ Load from Browser</button>
</div>
</div>
<div class="section">
<div class="section-title"><span class="icon">⊕</span> JSON File</div>
<p class="manage-desc">Export your character to a JSON file for backup or sharing, or import from a previously exported file.</p>
<div class="manage-btn-row">
<button class="btn-save btn-export btn-lg" onclick="exportSheet()">↓ Export JSON</button>
<button class="btn-load btn-import btn-lg" onclick="importSheet()">↑ Import JSON</button>
<input type="file" id="importFileInput" accept=".json,application/json" style="display:none"
onchange="handleImportFile(this)">
</div>
</div>
<div class="section col-span-2">
<div class="section-title"><span class="icon">⎘</span> Share via URL</div>
<p class="manage-desc">Encode your character's current state into a shareable link. Anyone who opens the link will see your character — auto-save is disabled for viewers.</p>
<div class="manage-btn-row">
<button class="btn-save btn-export btn-lg" onclick="copyShareURL()">⎘ Copy URL</button>
<span class="save-status" id="copyStatus">Copied!</span>
</div>
</div>
</div>
</div>
<script src="fabula-ultima-sheet.js"></script>
</body>