Retro-Game-Guides/guide.html at main · KiliLoje/Retro-Game-Guides · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Guide</title>
<link rel="stylesheet" href="guide.css">
<link rel="stylesheet" href="guide_render.css">
<link rel="stylesheet" href="builder.css">
</head>
<body>

<!-- ── EDITOR CHROME HEADER (editor-only) ── -->
<header id="editor-header" class="editor-only">
  <a class="b-back" href="index.html">← Guides</a>
  <div class="b-header-title">Guide Builder › <strong id="b-header-name">New Guide</strong></div>
  <div class="b-header-spacer"></div>
  <button class="b-btn b-btn-ghost" id="b-open-btn">📂 Open Guide</button>
  <button class="b-btn b-btn-ghost" id="b-meta-btn">⚙ Game Meta</button>
  <button class="b-btn b-btn-ghost" id="b-index-btn">⬇ Index Entry</button>
  <button class="b-btn b-btn-primary" id="b-gen-btn">⬇ Generate ZIP</button>
  <input type="file" id="b-zip-input" accept=".zip" style="display:none">
</header>

<!-- ── GUIDE HEADER ── -->
<header id="guide-header">
  <a class="back-link viewer-only" href="index.html">← Guides</a>
  <span id="guide-icon">🎮</span>
  <div class="header-text">
    <div id="guide-title">Loading…</div>
    <div id="guide-meta"></div>
  </div>
  <!-- viewer controls -->
  <div class="header-right viewer-only">
    <span class="storage-badge" id="storage-badge" style="display:none">● saved</span>
    <button class="display-btn" id="filter-btn" style="display:none" title="Toggle checked item visibility">
      <span class="btn-icon">☐</span><span class="btn-label"> Show remaining</span>
    </button>
    <button class="display-btn" id="clear-btn" title="Reset all saved progress for this guide">
      <span class="btn-icon">↺</span><span class="btn-label"> Clear all</span>
    </button>
    <button class="display-btn" id="display-btn" title="Appearance &amp; Accessibility">
      <span class="btn-icon">🎨</span><span class="btn-label"> Appearance &amp; Accessibility </span><span class="btn-icon">♿</span>
    </button>
  </div>
  <!-- editor control -->
  <button class="gp-header-edit editor-only" id="edit-meta-btn">✎ Edit Meta</button>
</header>

<!-- ── TAB BAR ── -->
<nav id="tab-bar" role="tablist" aria-label="Guide sections"></nav>

<!-- ── CONTENT ── -->
<main id="tab-content" role="main">
  <div class="loading-state">
    Loading<span class="loading-dot">.</span><span class="loading-dot">.</span><span class="loading-dot">.</span>
  </div>
</main>

<!-- ── DISPLAY OVERRIDE SHEET (viewer-only) ── -->
<div id="do-backdrop" class="viewer-only"></div>
<div id="do-sheet" class="viewer-only">
  <div id="do-sheet-handle"></div>
  <div id="do-sheet-header">
    <span id="do-sheet-title">Appearance &amp; Accessibility</span>
    <span id="do-current"></span>
    <button id="do-sheet-close">×</button>
  </div>
  <div id="do-sheet-body">
    <div class="do-a11y-row">
      <span class="do-a11y-label">Dyslexia-friendly font (Lexend)</span>
      <button id="do-dyslexia-toggle" role="switch" aria-checked="false" class="do-toggle">Off</button>
    </div>
    <div class="do-section-label">Filter Palettes</div>
    <div id="do-palette-filters" class="do-filter-row"></div>
    <div class="do-grid" id="do-palette-grid"></div>
    <div class="do-section-label" style="margin-top:16px">Theme</div>
    <div class="do-grid" id="do-theme-grid"></div>
    <div id="do-reset-row">
      <span id="do-guide-default"></span>
      <button id="do-reset-btn">Reset to guide default</button>
    </div>
  </div>
</div>

<!-- ── CLEAR PROGRESS MODAL (viewer-only) ── -->
<div id="clear-backdrop" class="viewer-only">
  <div id="clear-modal">
    <div id="clear-modal-title">Clear all progress?</div>
    <p id="clear-modal-body">This permanently removes all saved checkmarks for this guide. It cannot be undone.</p>
    <div id="clear-modal-btns">
      <button id="clear-cancel">Cancel</button>
      <button id="clear-confirm">Clear Progress</button>
    </div>
  </div>
</div>

<!-- ── EDITOR BOTTOM SHEET (editor-only) ── -->
<div id="b-backdrop" class="editor-only"></div>
<div id="b-sheet" class="editor-only">
  <div id="b-sheet-handle"></div>
  <div id="b-sheet-header">
    <span id="b-sheet-title">Sheet</span>
    <button id="b-sheet-close">×</button>
  </div>
  <div id="b-sheet-body"></div>
  <div id="b-sheet-footer">
    <button class="b-btn b-btn-ghost" id="b-sheet-cancel">Cancel</button>
    <button class="b-btn b-btn-primary" id="b-sheet-confirm">Save</button>
  </div>
</div>

<script src="guide_render.js"></script>
<script src="jszip.min.js"></script>
<script src="guide_engine.js"></script>
<script src="builder.js"></script>
<script src="builder_forms.js"></script>
</body>
</html>