-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
362 lines (349 loc) · 28 KB
/
Copy pathindex.html
File metadata and controls
362 lines (349 loc) · 28 KB
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<!-- X68000 縦置きツインタワー筐体の抽象シルエットアイコン(自作) -->
<link rel="icon" type="image/png" href="./x68icon.png" />
<link rel="apple-touch-icon" href="./x68icon-180.png" />
<!-- PWA: ホーム画面追加で standalone/fullscreen 起動させ、iOS でも URL バーを消すための最低限のメタデータ。
Service Worker は入れない(オフライン動作はスコープ外)。 -->
<link rel="manifest" href="./manifest.webmanifest" />
<meta name="theme-color" content="#0c0c0c" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="WebX68k" />
<title id="doc-title">WebX68k - X68000 Emulator</title>
</head>
<body>
<header class="app-header">
<div class="app-title-row">
<img class="app-icon" src="./x68icon.png" alt="" width="28" height="28" />
<h1>WebX68k</h1>
</div>
<p id="header-tagline" class="app-tagline">The online X68000 emulator powered by px68k-libretro</p>
</header>
<div id="app">
<main>
<div class="console-card">
<!-- stage-frame: 4:3表示切替でレイアウトが動かないよう、常に「4:3時のサイズ」分の
領域を確保する透明な枠。中の .stage(黒背景の箱)は現在のモードなりの
サイズのまま中央寄せされる。詳細は main.ts の rescale() コメント参照。 -->
<div class="stage-frame">
<div class="stage">
<canvas id="screen" width="768" height="512"></canvas>
<!-- バーチャルパッド(オンスクリーンパッド)。stage に重ねるオーバーレイ。
#boot-overlay より前(=重なり順で下)に置き、起動前オーバーレイを塞がないようにする。
詳細は docs/DESIGN.md「バーチャルパッド」節・src/virtual-pad.ts 参照。 -->
<div id="virtual-pad" class="virtual-pad hidden" aria-label="バーチャルパッド"></div>
<!-- ステート保存/復元などの一時通知(数秒で自動的に消える) -->
<div id="toast" class="toast hidden" role="status" aria-live="polite"></div>
<!-- 起動前オーバーレイ。WebNP2 の「そのまま起動」/「システムディスクで起動」2択を踏襲。 -->
<div id="boot-overlay" class="overlay">
<div class="overlay-choices">
<button id="btn-boot-plain" type="button" class="start-btn">そのまま起動</button>
<button id="btn-boot-system" type="button" class="start-btn start-btn-system">システムディスクで起動</button>
</div>
<div class="overlay-note">
<span id="overlay-note-1">音声再生の制限上、クリック操作で起動します。</span><br />
<span id="overlay-note-2">ディスクはツールバーのライブラリ、または下のドライブ行から追加できます。</span>
</div>
</div>
<!-- ポーズ中オーバーレイ。#boot-overlay(起動前、z-index:10)とは別要素で、起動後に
ツールバーのポーズボタンから止めたときだけ出す。#virtual-pad(z-index:5)より上、
#boot-overlay より下の z-index:9 にする(両者が同時に出ることは無いが念のため)。
再開はこのオーバーレイ中央の再生ボタンからのみ行う(余白クリックでは再開しない。
WebNP2 6d7dbe7 と同じ判断: 押し直しの誤操作で再開してしまうのを防ぐ)。
状態(pausedByUser)の扱いは main.ts の setPaused() 定義箇所のコメント参照。 -->
<div id="pause-overlay" class="pause-overlay hidden">
<button id="btn-pause-overlay-resume" type="button" class="pause-overlay-resume" aria-label="再開">
<svg class="pause-overlay-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4l13 8-13 8z"/></svg>
</button>
<div id="pause-overlay-label" class="pause-overlay-label">ポーズ中</div>
</div>
</div>
</div>
<div id="virtual-keyboard" class="virtual-keyboard hidden" aria-label="X68000 仮想キーボード"></div>
<!-- バーチャルトラックパッド。canvas を直接タッチの受け口にしていた旧実装から
専用の操作面へ切り出した。画面に重ねず仮想キーボードと同じ帯に置くのは、
操作中の指がゲスト画面を隠さないようにするため(この配置自体が目的)。
詳細は src/virtual-trackpad.ts 参照。 -->
<div id="virtual-trackpad" class="virtual-trackpad hidden" aria-label="バーチャルトラックパッド"></div>
<div class="console-footer">
<div class="toolbar">
<!-- 中央グループ(頻繁に押す操作)と右端グループ(リセット)に分ける。リセットは
誤爆時の被害が大きいため、頻繁に押す操作から指1本ぶん離す(WebNP2 593b44d
と同じ判断)。列構成は src/style.css の .toolbar コメント参照。
常設(ポーズ/フルスクリーン/仮想キーボード/スクリーンショット/速度/リセット)
+「…」オーバーフロー。元は14個のアイコンが横一列で分かりにくかったため、
使用頻度の低いものは「…」ボタン配下の階層メニュー(#slot-popup-menu を共用、
main.ts の renderOverflowMenu() 系参照)へ畳んだ。 -->
<div class="toolbar-center">
<!-- ポーズ/再開。libretro コアのメインループは JS 側(main.ts の loop())にあるため
コアの再ビルドは不要で、host.runFrame() を呼ばないだけでポーズになる。
詳細な状態遷移は main.ts の setPaused() 定義箇所のコメント参照。 -->
<button id="btn-pause" type="button" class="icon-btn" title="ポーズ" aria-label="ポーズ" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path id="btn-pause-icon" d="M8 5v14 M16 5v14"/></svg>
</button>
<button id="btn-fullscreen" type="button" class="icon-btn" title="フルスクリーン" aria-label="フルスクリーン" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V5a1 1 0 0 1 1-1h4 M15 4h4a1 1 0 0 1 1 1v4 M20 15v4a1 1 0 0 1-1 1h-4 M9 20H5a1 1 0 0 1-1-1v-4"/></svg>
</button>
<button id="btn-virtual-keyboard" type="button" class="icon-btn" title="仮想キーボード" aria-label="仮想キーボード" aria-pressed="false" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18v12H3z M6 9h1 M10 9h1 M14 9h1 M18 9h1 M6 12h1 M10 12h1 M14 12h1 M18 12h1 M7 15h10"/></svg>
</button>
<!-- 入力パネル(仮想キーボード/バーチャルパッド)の切り替えチップ。
いずれかのパネルが出ている間だけ main.ts が hidden を外す。
役割が #btn-virtual-keyboard と隣接するためツールバー内の直後に配置。 -->
<div id="input-panel-switch" class="input-panel-switch hidden">
<button id="btn-panel-keyboard" type="button" class="icon-btn panel-switch-btn" title="仮想キーボードに切替" aria-label="仮想キーボードに切替" aria-pressed="false">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7h18a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z M6 10h.01 M9 10h.01 M12 10h.01 M15 10h.01 M18 10h.01 M6 13h.01 M9 13h.01 M12 13h.01 M15 13h.01 M18 13h.01 M8 16h8"/></svg>
</button>
<button id="btn-panel-pad" type="button" class="icon-btn panel-switch-btn" title="バーチャルパッドに切替" aria-label="バーチャルパッドに切替" aria-pressed="false">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 8h12a4 4 0 0 1 4 4.5l-.8 4a2.5 2.5 0 0 1-4.4 1.1L15 15H9l-1.8 2.6a2.5 2.5 0 0 1-4.4-1.1l-.8-4A4 4 0 0 1 6 8z M7 12h3 M8.5 10.5v3 M16 11h.01 M18 13h.01"/></svg>
</button>
<button id="btn-panel-trackpad" type="button" class="icon-btn panel-switch-btn" title="バーチャルトラックパッドに切替" aria-label="バーチャルトラックパッドに切替" aria-pressed="false">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 1 6 6v6a6 6 0 0 1-12 0V9a6 6 0 0 1 6-6z M12 3v7 M12 7v3"/></svg>
</button>
</div>
<button id="btn-screenshot" type="button" class="icon-btn" title="スクリーンショット" aria-label="スクリーンショット" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z M12 17a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>
</button>
<button id="btn-speed" type="button" class="icon-btn" title="速度変更" aria-label="速度変更" aria-pressed="false" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 6l7 6-7 6z M11 6l7 6-7 6z M18 6l4 6-4 6z"/></svg>
<span id="btn-speed-badge" class="btn-speed-badge" hidden></span>
</button>
<button id="btn-toolbar-overflow" type="button" class="icon-btn" title="その他" aria-label="その他" aria-haspopup="menu">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h.01 M12 12h.01 M19 12h.01"/></svg>
</button>
</div>
<div class="toolbar-end">
<button id="btn-reset" type="button" class="icon-btn" title="リセット" aria-label="リセット" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7M3 4v5h5"/></svg>
</button>
</div>
</div>
<!-- 「…」オーバーフローメニューが呼び出す実体ボタン群。id とクリックハンドラは main.ts 側で
従来どおり個別に配線したまま(二重実装を避けるため)、表示上だけここへ移して隠す。
メニューの各行は各ボタンの現在のラベル(title)/disabled/active状態をここから読み取り、
行クリック時は対応ボタンの click() を呼ぶだけ。 -->
<div id="toolbar-overflow-sources" hidden>
<button id="btn-save-state" type="button" class="icon-btn" title="ステート保存" aria-label="ステート保存" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 10V19H18V10 M12 3v6 M9 6l3 3 3-3"/></svg>
</button>
<button id="btn-load-state" type="button" class="icon-btn" title="ステート復元" aria-label="ステート復元" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 10V19H18V10 M12 9V3 M9 6l3-3 3 3"/></svg>
</button>
<button id="btn-mouse-capture" type="button" class="icon-btn" title="マウスキャプチャ" aria-label="マウスキャプチャ" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 1 6 6v6a6 6 0 0 1-12 0V9a6 6 0 0 1 6-6z M12 3v7 M12 7v3"/></svg>
</button>
<button id="btn-mouse-resync" type="button" class="icon-btn" title="マウス再同期" aria-label="マウス再同期" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v4 M12 17v4 M3 12h4 M17 12h4 M9 12a3 3 0 1 0 6 0 3 3 0 1 0 -6 0"/></svg>
</button>
<button id="btn-aspect" type="button" class="icon-btn" title="4:3表示" aria-label="4:3表示" aria-pressed="false">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 5h20v14H2z M9 21h6 M12 19v2"/></svg>
</button>
<button id="btn-gamepad" type="button" class="icon-btn" title="ジョイスティック設定" aria-label="ジョイスティック設定">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9h12a3 3 0 0 1 3 3l1 4a2 2 0 0 1-3.6 1.2L17 15H7l-1.4 2.2A2 2 0 0 1 2 16l1-4a3 3 0 0 1 3-3z M7 12v3 M5.5 13.5h3 M15.5 12.5h.01 M18 14.5h.01"/></svg>
</button>
<button id="btn-hostkey" type="button" class="icon-btn" title="キーボード割当" aria-label="キーボード割当">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7h18v10H3z M6 10h1 M9 10h1 M12 10h1 M15 10h1 M18 10h1 M6 13h10 M17 13h1"/></svg>
</button>
<button id="btn-settings" type="button" class="icon-btn" title="設定(BIOS / マシン構成)" aria-label="設定">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10v10H7z M9 9h6v6H9z M7 4v3 M12 4v3 M17 4v3 M7 17v3 M12 17v3 M17 17v3 M4 7h3 M4 12h3 M4 17h3 M17 7h3 M17 12h3 M17 17h3"/></svg>
</button>
<button id="btn-disk-library" type="button" class="icon-btn" title="ディスクライブラリ" aria-label="ディスクライブラリ">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 16h13l3-3V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z M4 20h13a3 3 0 0 0 3-3 M8 9h6v4H8z"/></svg>
</button>
<button id="btn-file-manager" type="button" class="icon-btn" title="ファイル転送" aria-label="ファイル転送">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 8h13 M12 4l4 4-4 4 M21 16H8 M12 20l-4-4 4-4"/></svg>
</button>
<button id="btn-help" type="button" class="icon-btn" title="ヘルプ" aria-label="ヘルプ">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M9.6 9.2a2.4 2.4 0 1 1 3.3 2.2c-.7.3-.9.8-.9 1.6 M12 16.8h.01"/></svg>
</button>
<button id="btn-lang" type="button" class="lang-toggle">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z M3 12h18 M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9 M12 3c-2.5 2.5-3.5 5.5-3.5 9s1 6.5 3.5 9"/></svg>
<span id="btn-lang-text">EN</span>
</button>
</div>
<div class="fd-slots">
<div id="slot-fdd0" class="fd-slot">
<span id="lamp-fdd0" class="fd-lamp" role="img" aria-label="FDD0 アクセスランプ"></span>
<span id="label-fdd0" class="fd-label">FDD0</span>
<span id="name-fdd0" class="fd-name">未挿入</span>
<button id="btn-insert-fdd0" type="button" class="icon-btn" title="ディスク挿入" aria-label="FDD0にディスク挿入">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19l6-8H6l6 8z M6 5h12"/></svg>
</button>
<input id="input-fdd0" type="file" class="fd-file-input" accept=".xdf,.dim,.d88,.hdm,.img,.2hd,.zip,.lzh" />
<button id="btn-library-fdd0" type="button" class="icon-btn" title="ライブラリから挿入" aria-label="FDD0にライブラリから挿入">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 16h13l3-3V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z M4 20h13a3 3 0 0 0 3-3 M8 9h6v4H8z"/></svg>
</button>
<button id="btn-blank-fdd0" type="button" class="icon-btn" title="ブランク作成" aria-label="FDD0にブランクディスク作成">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9l-6-6z M13 3v6h6 M12 12v6 M9 15h6"/></svg>
</button>
<button id="btn-eject-fdd0" type="button" class="icon-btn" title="ディスク取り出し" aria-label="FDD0からディスク取り出し" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5l6 8H6l6-8z M6 19h12"/></svg>
</button>
<button id="btn-download-fdd0" type="button" class="icon-btn" title="ダウンロード" aria-label="FDD0のディスクをダウンロード" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0-4-4m4 4 4-4 M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
</button>
</div>
<div id="slot-fdd1" class="fd-slot">
<span id="lamp-fdd1" class="fd-lamp" role="img" aria-label="FDD1 アクセスランプ"></span>
<span id="label-fdd1" class="fd-label">FDD1</span>
<span id="name-fdd1" class="fd-name">未挿入</span>
<button id="btn-insert-fdd1" type="button" class="icon-btn" title="ディスク挿入" aria-label="FDD1にディスク挿入">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19l6-8H6l6 8z M6 5h12"/></svg>
</button>
<input id="input-fdd1" type="file" class="fd-file-input" accept=".xdf,.dim,.d88,.hdm,.img,.2hd,.zip,.lzh" />
<button id="btn-library-fdd1" type="button" class="icon-btn" title="ライブラリから挿入" aria-label="FDD1にライブラリから挿入">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 16h13l3-3V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z M4 20h13a3 3 0 0 0 3-3 M8 9h6v4H8z"/></svg>
</button>
<button id="btn-blank-fdd1" type="button" class="icon-btn" title="ブランク作成" aria-label="FDD1にブランクディスク作成">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9l-6-6z M13 3v6h6 M12 12v6 M9 15h6"/></svg>
</button>
<button id="btn-eject-fdd1" type="button" class="icon-btn" title="ディスク取り出し" aria-label="FDD1からディスク取り出し" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5l6 8H6l6-8z M6 19h12"/></svg>
</button>
<button id="btn-download-fdd1" type="button" class="icon-btn" title="ダウンロード" aria-label="FDD1のディスクをダウンロード" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0-4-4m4 4 4-4 M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
</button>
</div>
<div id="slot-hdd" class="fd-slot">
<span id="lamp-hdd" class="fd-lamp" role="img" aria-label="HDD アクセスランプ"></span>
<span id="label-hdd" class="fd-label">HDD</span>
<span id="name-hdd" class="fd-name">未挿入</span>
<button id="btn-insert-hdd" type="button" class="icon-btn" title="ディスク挿入" aria-label="HDDにディスク挿入">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19l6-8H6l6 8z M6 5h12"/></svg>
</button>
<input id="input-hdd" type="file" class="fd-file-input" accept=".hdf,.dup,.zip,.lzh" />
<button id="btn-library-hdd" type="button" class="icon-btn" title="ライブラリから挿入" aria-label="HDDにライブラリから挿入">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 16h13l3-3V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z M4 20h13a3 3 0 0 0 3-3 M8 9h6v4H8z"/></svg>
</button>
<button id="btn-blank-hdd" type="button" class="icon-btn" title="ブランクHDDを作成(40MB・FAT16)" aria-label="HDDにブランクHDDを作成(40MB・FAT16)">
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9l-6-6z M13 3v6h6 M12 12v6 M9 15h6"/></svg>
</button>
<button id="btn-eject-hdd" type="button" class="icon-btn" title="ディスク取り出し" aria-label="HDDからディスク取り出し" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5l6 8H6l6-8z M6 19h12"/></svg>
</button>
<button id="btn-download-hdd" type="button" class="icon-btn" title="ダウンロード" aria-label="HDDのディスクをダウンロード" disabled>
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0-4-4m4 4 4-4 M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
</button>
</div>
</div>
</div>
</div>
</main>
<footer class="app-footer">
<a href="https://www.urara-works.jp/" target="_blank" rel="noopener" id="footer-copyright">© URARA-works</a> /
<a href="https://github.com/uraraworks/WebX68k" target="_blank" rel="noopener" id="footer-github">GitHubで見る</a> /
<a href="./about.html?lang=ja" target="_blank" rel="noopener" id="footer-about">WebX68kについて</a><br />
<span><span id="footer-poweredby-prefix">Powered by</span> <a href="https://github.com/uraraworks/px68k-libretro" target="_blank" rel="noopener">px68k</a> <span id="footer-poweredby-suffix">(GPLv2)</span></span><br />
<span id="footer-version" class="footer-version"></span>
</footer>
</div>
<!-- 設定ダイアログ(BIOS登録 + マシン構成)。WebNP2 の「ROMファイル登録」ダイアログと同じ流儀(rom-modal系)。 -->
<div id="settings-backdrop" class="rom-modal-backdrop hidden">
<div class="rom-modal" role="dialog" aria-modal="true" aria-labelledby="settings-title">
<h2 id="settings-title" class="rom-modal-title">設定</h2>
<p id="settings-description" class="rom-modal-description">
BIOS ファイル(IPLROM.DAT / CGROM.DAT)とマシン構成を設定します。設定はブラウザに保存され、次回起動時から反映されます。
</p>
<h3 id="settings-bios-title" class="rom-modal-section-title">BIOS 設定</h3>
<div class="field-row">
<label for="bios-ipl">IPLROM.DAT</label>
<input id="bios-ipl" type="file" accept=".dat" />
<span id="bios-ipl-status" class="status-ng">未設定</span>
</div>
<div class="field-row">
<label for="bios-cg">CGROM.DAT</label>
<input id="bios-cg" type="file" accept=".dat" />
<span id="bios-cg-status" class="status-ng">未設定</span>
</div>
<!-- 見出しと注記を1つに包み、.rom-modal の flex gap がこの2つの間に入らないようにする -->
<div class="settings-machine-heading">
<h3 class="rom-modal-section-title">
<span id="settings-machine-title">マシン構成</span> <small id="settings-machine-note" class="rom-modal-section-note">(既定: X68000 XVI 相当 = 16MHz / 2MB)</small>
</h3>
<p id="settings-machine-reset-note" class="status-bundled">変更を反映するにはリセットが必要です。</p>
</div>
<div class="field-row">
<label id="settings-cpuspeed-label" for="cfg-cpuspeed">CPU速度</label>
<select id="cfg-cpuspeed">
<option value="10Mhz">10Mhz (初代〜SUPER)</option>
<option value="16Mhz">16Mhz (XVI)</option>
<option value="25Mhz">25Mhz</option>
<option value="33Mhz (OC)">33Mhz (OC)</option>
<option value="66Mhz (OC)">66Mhz (OC)</option>
<option value="100Mhz (OC)">100Mhz (OC)</option>
</select>
</div>
<div class="field-row">
<label id="settings-ramsize-label" for="cfg-ramsize">RAM</label>
<select id="cfg-ramsize">
<option value="1MB">1MB</option>
<option value="2MB">2MB</option>
<option value="3MB">3MB</option>
<option value="4MB">4MB</option>
<option value="5MB">5MB</option>
<option value="6MB">6MB</option>
<option value="7MB">7MB</option>
<option value="8MB">8MB</option>
<option value="9MB">9MB</option>
<option value="10MB">10MB</option>
<option value="11MB">11MB</option>
<option value="12MB">12MB</option>
</select>
</div>
<!-- マシン構成(リセット必須)とは別枠。速度倍率は実行中に即時反映されるため注記も別にする。 -->
<div class="settings-machine-heading">
<h3 id="settings-speed-title" class="rom-modal-section-title">エミュレーション速度</h3>
<p id="settings-speed-note" class="rom-modal-section-note">ツールバーの速度ボタンをONにしたときの倍率です。リセット不要で即時反映し、設定は保存されません。</p>
</div>
<div class="field-row">
<label id="settings-speed-label" for="cfg-speed">速度ボタンON時の倍率</label>
<select id="cfg-speed">
<option value="0.25">25%</option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1.5">150%</option>
<option value="2" selected>200%</option>
<option value="3">300%</option>
<option value="4">400%</option>
<option id="speed-opt-unlimited" value="unlimited">無制限</option>
</select>
<span id="speed-actual"></span>
</div>
<div class="rom-modal-footer">
<button id="settings-close" type="button" class="rom-close-btn">閉じる</button>
</div>
</div>
</div>
<!-- ディスクライブラリダイアログ(IndexedDB保存済みディスクイメージ一覧)。WebNP2 のディスクライブラリと同じ流儀(rom-modal系+library-list)。 -->
<div id="library-backdrop" class="rom-modal-backdrop hidden">
<div class="rom-modal" role="dialog" aria-modal="true" aria-labelledby="library-title">
<h2 id="library-title" class="rom-modal-title">ディスクライブラリ</h2>
<p id="library-description" class="rom-modal-description">
これまでに挿入したディスクイメージはブラウザに保存され、ここから挿入するドライブ(FDD0 / FDD1 / HDD)を選んで再挿入できます。
</p>
<div id="library-list" class="library-list"></div>
<div class="rom-modal-footer">
<button id="library-close" type="button" class="rom-close-btn">閉じる</button>
</div>
</div>
</div>
<!-- スロットボタン(ライブラリ挿入/ブランク作成)用のポップアップメニュー。WebNP2 の library-menu を踏襲。 -->
<div id="slot-popup-menu" class="library-menu hidden" role="menu"></div>
<!-- ツールバー「…」オーバーフローメニュー専用のカスケードサブメニュー(広い画面のみ使用)。
#slot-popup-menu は親のまま開いたままにし、グループ行の右側にこちらを別要素として重ねる。
スロットの「ライブラリから挿入」側は従来どおり #slot-popup-menu を差し替えるだけで、
この要素には触れない。 -->
<div id="overflow-submenu" class="library-menu hidden" role="menu"></div>
<!-- ファイルマネージャ(FTPクライアント風2ペイン)ダイアログのマウント先。中身はfilemanager.tsが動的に構築する。 -->
<div id="file-manager-root"></div>
<div id="gamepad-root"></div>
<div id="input-profile-root"></div>
<div id="hostkey-root"></div>
<script src="/core/px68k_libretro.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>