Files
Idle-Fantasy-Save-Viewer/templates/index.html
T
elpatronandCursor fd364218ec Add viewer delete danger zone and rename backup tab to Data.
Let users permanently delete their viewer from the data tab with confirmation, while keeping the local dev viewer protected.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-05 11:37:58 +02:00

147 lines
7.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Idle Fantasy Viewer</title>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
{% include '_seo_head.html' %}
{% include '_pwa_head.html' %}
<link rel="stylesheet" href="/static/style.css">
{% include '_analytics.html' %}
<script src="/static/analytics.js" defer></script>
<script src="/static/vendor/chart.umd.min.js" defer></script>
<script src="/static/i18n.js" defer></script>
<script src="/static/app.js" defer></script>
</head>
<body data-viewer-id="{{ viewer_id }}">
<div class="layout">
<aside class="sidebar">
<div class="brand">
<span class="brand-icon"></span>
<div>
<h1 data-i18n="app.title">Idle Fantasy Viewer</h1>
<p class="subtitle" data-i18n="app.subtitle">Save Viewer</p>
</div>
</div>
<nav class="nav" id="nav">
<button class="nav-btn active" data-tab="overview" data-i18n="nav.overview">Overview</button>
<button class="nav-btn" data-tab="skills" data-i18n="nav.skills">Skills</button>
<button class="nav-btn" data-tab="inventory" data-i18n="nav.inventory">Inventory</button>
<button class="nav-btn" data-tab="goals" data-i18n="nav.goals">Goals</button>
<button class="nav-btn" data-tab="equipment" data-i18n="nav.equipment">Equipment</button>
<button class="nav-btn" data-tab="quests" data-i18n="nav.quests">Quests</button>
<button class="nav-btn" data-tab="combat" data-i18n="nav.combat">Combat</button>
<button class="nav-btn" data-tab="history" data-i18n="nav.history">History</button>
<button class="nav-btn" data-tab="backup" data-i18n="nav.data">Data</button>
</nav>
<div class="sidebar-footer">
{% include '_pwa_hint.html' %}
<label class="lang-label" for="locale-select">
<span data-i18n="settings.language">Language</span>
<select id="locale-select" class="select-input lang-select">
<option value="auto" data-i18n="settings.langAuto">Auto (browser)</option>
<option value="en" data-i18n="settings.langEn">English</option>
<option value="de" data-i18n="settings.langDe">Deutsch</option>
</select>
</label>
<label class="upload-btn">
<span data-i18n="actions.importBackup">Import game backup</span>
<input type="file" id="file-upload" accept=".json" hidden>
</label>
</div>
</aside>
<main class="main">
<header class="topbar">
<div id="viewer-link-banner" class="viewer-banner" hidden>
<div class="viewer-banner-text">
<strong data-i18n="viewer.linkTitle">Your personal link</strong>
<p class="viewer-banner-warning" data-i18n="viewer.linkWarning">
Save this link there is no login. Without it, your data is lost.
</p>
<p class="viewer-banner-android" data-i18n="viewer.androidHint">
Paste this link in Idle Fantasy under Settings → Save Data to send saves directly from the app.
</p>
<code id="viewer-link-url" class="viewer-link-url"></code>
</div>
<button type="button" class="viewer-copy-btn" id="viewer-copy-link" data-i18n="viewer.copyLink">Copy link</button>
</div>
<div id="import-report" class="import-report" hidden></div>
<div id="goals-completed-banner" class="goals-completed-banner" hidden></div>
<div class="global-search-wrap">
<input type="search" class="search-input global-search" id="global-search" placeholder="">
</div>
<div id="global-search-results" class="global-search-results" hidden></div>
<div id="character-header" class="character-header">
<span class="loading" data-i18n="app.loading">Loading save…</span>
</div>
<div class="kpi-row" id="kpi-row"></div>
</header>
<section class="tab-panel active" id="tab-overview"></section>
<section class="tab-panel" id="tab-skills"></section>
<section class="tab-panel" id="tab-inventory"></section>
<section class="tab-panel" id="tab-goals"></section>
<section class="tab-panel" id="tab-equipment"></section>
<section class="tab-panel" id="tab-quests"></section>
<section class="tab-panel" id="tab-combat"></section>
<section class="tab-panel" id="tab-history"></section>
<section class="tab-panel" id="tab-backup">
<div class="card backup-tab-card">
<h3 data-i18n="viewerDb.title">Viewer data</h3>
<p class="backup-tab-lead" data-i18n="viewerDb.helpBody">The viewer stores imported game backups, history charts, and goals in a SQLite database on the server. Export downloads that database as a backup. Import restores it and replaces all current viewer data. This is not the same as importing a game save (.json).</p>
<p class="backup-tab-note" data-i18n="viewerDb.gameBackupNote">To add a new game save snapshot, use Import game backup in the sidebar.</p>
<div class="backup-tab-actions">
<a class="upload-btn export-btn" id="export-viewer" href="#" data-i18n="actions.exportViewer">Export viewer</a>
<label class="upload-btn">
<span data-i18n="actions.importViewer">Import viewer</span>
<input type="file" id="viewer-db-upload" accept=".db,application/octet-stream" hidden>
</label>
</div>
</div>
<div class="card danger-zone-card" id="viewer-danger-zone" hidden>
<h3 class="danger-zone-title" data-i18n="viewerDb.dangerTitle">Danger zone</h3>
<p class="danger-zone-lead" data-i18n="viewerDb.dangerLead">Permanently delete this viewer and all stored data. Your personal link will stop working. This cannot be undone.</p>
<p class="danger-zone-note" data-i18n="viewerDb.exportBeforeDelete">Export your viewer first if you want to keep a copy of your data.</p>
<button type="button" class="danger-zone-btn" id="viewer-delete-btn" data-i18n="viewerDb.deleteViewer">Delete viewer and all data</button>
<p class="landing-hint landing-hint-error" id="viewer-delete-error" hidden></p>
</div>
</section>
</main>
</div>
<div id="goal-modal" class="goal-modal" hidden>
<div class="goal-modal-backdrop" id="goal-modal-backdrop"></div>
<div class="goal-modal-card" role="dialog" aria-labelledby="goal-modal-title">
<h3 id="goal-modal-title"></h3>
<p class="goal-modal-item" id="goal-modal-item"></p>
<label class="goal-modal-field">
<span id="goal-modal-mode-label"></span>
<select class="select-input" id="goal-modal-mode">
<option value="absolute"></option>
<option value="relative"></option>
</select>
</label>
<label class="goal-modal-field">
<span id="goal-modal-qty-label"></span>
<input type="number" class="search-input" id="goal-modal-qty" min="1" step="1">
</label>
<label class="goal-modal-field">
<span id="goal-modal-group-label"></span>
<select class="select-input" id="goal-modal-group"></select>
</label>
<label class="goal-modal-field" id="goal-modal-new-group-wrap" hidden>
<span id="goal-modal-new-group-label"></span>
<input type="text" class="search-input" id="goal-modal-new-group">
</label>
<p class="goal-modal-error landing-hint landing-hint-error" id="goal-modal-error" hidden></p>
<div class="goal-modal-actions">
<button type="button" class="viewer-copy-btn" id="goal-modal-cancel"></button>
<button type="button" class="upload-btn" id="goal-modal-submit"></button>
</div>
</div>
</div>
{% include '_footer.html' %}
</body>
</html>