Make import export panel collapsible

This commit is contained in:
Jan Bader
2026-06-16 20:32:12 +02:00
parent 5e37706f32
commit e12a58ba1f
2 changed files with 43 additions and 16 deletions
+20 -15
View File
@@ -47,23 +47,28 @@
<button id="resetBuild" type="button" class="secondary">Reset current build</button>
</section>
<section class="card import-export" aria-labelledby="import-export-heading">
<div>
<h2 id="import-export-heading">Import / Export</h2>
<details class="card import-export">
<summary>
<span>
<strong id="import-export-heading">Import / Export</strong>
<small>Back up, share, or restore a build as JSON.</small>
</span>
</summary>
<div class="import-export-body" aria-labelledby="import-export-heading">
<p>Back up or share the current build as JSON. Paste JSON directly or upload a saved file to import.</p>
<div class="io-actions">
<button id="copyExport" type="button">Generate / Copy JSON</button>
<button id="downloadExport" type="button" class="secondary">Download JSON</button>
<label class="file-button secondary">
Upload JSON
<input id="importFile" type="file" accept="application/json,.json" />
</label>
<button id="importJson" type="button">Import pasted JSON</button>
</div>
<textarea id="jsonTransfer" rows="8" spellcheck="false" placeholder="Generated export JSON appears here. You can also paste JSON here and click Import pasted JSON."></textarea>
<p id="importExportStatus" class="status" role="status"></p>
</div>
<div class="io-actions">
<button id="copyExport" type="button">Generate / Copy JSON</button>
<button id="downloadExport" type="button" class="secondary">Download JSON</button>
<label class="file-button secondary">
Upload JSON
<input id="importFile" type="file" accept="application/json,.json" />
</label>
<button id="importJson" type="button">Import pasted JSON</button>
</div>
<textarea id="jsonTransfer" rows="8" spellcheck="false" placeholder="Generated export JSON appears here. You can also paste JSON here and click Import pasted JSON."></textarea>
<p id="importExportStatus" class="status" role="status"></p>
</section>
</details>
<section class="summary-grid" aria-label="Build summary">
<article class="metric"><span>Total damage base</span><strong id="totalDamage">0</strong></article>