OpenBoxGL/index.html at master · vindeckyy/OpenBoxGL · 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
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
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <title>OpenBox Game Launcher</title>
  <link rel="stylesheet" href="/static/app.css">
  <link id="themeStylesheet" rel="stylesheet">
</head>
<body>
  <header class="topbar">
    <div class="brand"><img class="mark" src="/static/logo.png" alt="OpenBox">OpenBox</div>
    <nav class="topbar-zone" aria-label="Library">
      <button class="menu-button primary-nav" id="libraryButton">Library</button>
      <button class="menu-button primary-nav" id="addButton">Add game</button>
      <button class="menu-button primary-nav" id="importButton">Import folder</button>
    </nav>
    <nav class="topbar-zone" aria-label="Actions">
      <button class="menu-button" id="bigBoxButton">Big Box</button>
      <button class="menu-button" id="sessionsButton">Running</button>
      <button class="menu-button" id="queueButton">Queue</button>
    </nav>
    <nav class="topbar-zone topbar-zone-tools" aria-label="Tools">
      <details class="topbar-tools">
        <summary class="menu-button">Tools</summary>
        <div class="tool-menu">
          <button class="menu-button" id="steamButton">Import Steam</button>
          <button class="menu-button" id="heroicButton">Import Heroic</button>
          <button class="menu-button" id="lutrisButton">Import Lutris</button>
          <button class="menu-button" id="arcadeButton">Import Arcade</button>
          <button class="menu-button" id="emulatorsButton">Emulators</button>
          <button class="menu-button" id="settingsButton">Settings</button>
          <button class="menu-button" id="historyButton">History</button>
          <button class="menu-button" id="themesButton">Themes</button>
          <button class="menu-button" id="saveFilterButton">Save filter</button>
          <button class="menu-button" id="savePresetButton">Save preset</button>
          <button class="menu-button" id="playlistsButton">Playlists</button>
          <button class="menu-button" id="achievementsButton">Achievements</button>
          <button class="menu-button" id="pluginsButton">Plugins</button>
          <button class="menu-button" id="discoveryButton">Discovery</button>
          <button class="menu-button" id="storefrontButton">Storefronts</button>
          <button class="menu-button" id="mediaButton">Media</button>
          <button class="menu-button" id="healthButton">Health</button>
          <button class="menu-button" id="bulkButton">Bulk edit</button>
          <button class="menu-button" id="backupButton">Backup</button>
          <button class="menu-button" id="fullscreenButton">Fullscreen</button>
          <button class="menu-button" id="tagsButton">Tags</button>
          <button class="menu-button" id="notificationsButton">Notifications</button>
          <button class="menu-button" id="webhooksButton">Webhooks</button>
        </div>
      </details>
    </nav>
    <span class="top-status" id="status">Local library</span>
  </header>

  <div class="workspace">
    <aside class="sidebar">
      <label class="field" data-sidebar-section="search"><span>Search</span><input id="sidebarSearch" type="search" aria-label="Search library"></label>
      <label class="field" data-sidebar-section="view"><span>View</span><select id="view"><option value="all">All games</option><option value="favorites">Favorites</option><option value="recent">Recently played</option><option value="never">Never played</option><option value="playing">In progress</option><option value="completed">Completed</option><option value="installed">Installed only</option><option value="owned">Owned / not installed</option><option value="saves">Has saves</option><option value="hidden">Hidden</option><option value="missing">Missing files</option></select></label>
      <label class="field" data-sidebar-section="filters"><span>ESRB</span><select id="esrbFilter"><option value="">Any rating</option><option>E</option><option>E10+</option><option>T</option><option>M</option><option>AO</option><option>RP</option><option>Unrated</option></select></label>
      <div class="section-title" data-sidebar-section="filters">Categories</div>
      <nav class="platforms" id="platformCategories" data-sidebar-section="filters"></nav>
      <div class="section-title" data-sidebar-section="platforms">Platforms</div>
      <nav class="platforms" id="platforms" data-sidebar-section="platforms"></nav>
      <div class="section-title" data-sidebar-section="playlists">Playlists</div>
      <nav class="platforms" id="playlists" data-sidebar-section="playlists"></nav>
      <div class="section-title" data-sidebar-section="filters">Filter presets</div>
      <nav class="platforms" id="filterPresets" data-sidebar-section="filters"></nav>
      <div class="section-title" data-sidebar-section="filters">Explorer</div>
      <nav class="platforms" id="explorerFacets" data-sidebar-section="filters"></nav>
    </aside>

    <main class="library">
      <div class="library-head">
        <div><h1 id="libraryTitle">All Games</h1><p id="libraryMeta">0 games</p></div>
        <select class="search" id="sort" aria-label="Sort games"><option value="title">Title</option><option value="rating">Rating</option><option value="recent">Recently played</option><option value="recent_activity">Recent activity</option><option value="playtime">Play time</option><option value="added">Date added</option><option value="platform">Platform</option><option value="genre">Genre</option></select>
        <select class="search" id="imageGroup" aria-label="Image group"><option value="default">Use default</option><option value="cover">Box fronts</option><option value="background">Backgrounds</option><option value="screenshot">Screenshots</option><option value="clear_logo">Clear logos</option><option value="fanart">Fanart</option><option value="banner">Banners</option><option value="box_back">Box backs</option><option value="box_spine">Box spines</option><option value="box_3d">3D boxes</option><option value="title_screen">Title screens</option><option value="cart_front">Cart fronts</option><option value="cart_back">Cart backs</option><option value="disc">Discs</option><option value="advertisement">Ads / flyers</option><option value="manual">Manuals</option></select>
        <select class="search" id="grouping" aria-label="Group covers"><option value="shape">Group by shape</option><option value="none">No grouping</option></select>
        <button class="icon-button" id="viewToggleButton">List view</button>
        <button class="icon-button" id="surpriseButton">Surprise me</button>
      </div>
      <button type="button" class="drop-zone" id="dropZone">Drop ROM folders or game files here to import</button>
      <div class="arrange-wrap">
        <section class="grid" id="grid"></section>
        <div class="arrange-bar" id="arrangeBar" hidden role="button" tabindex="0" aria-label="Jump through the current view"></div>
      </div>
    </main>

    <aside class="details" id="details"><div class="detail-empty">Select a game to inspect its real metadata and artwork.</div></aside>
  </div>

  <dialog id="gameDialog" aria-modal="true" aria-labelledby="dialogTitle">
    <form id="gameForm">
      <div class="dialog-head"><h2 id="dialogTitle">Add game</h2><button type="button" id="closeDialog" aria-label="Close Add game dialog">×</button></div>
      <div class="form-grid">
        <label class="field"><span>Name</span><input name="name" required></label>
        <label class="field"><span>Platform</span><input name="platform"></label>
        <label class="field"><span>Genre</span><input name="genre"></label>
        <label class="field"><span>Year</span><input name="year"></label>
        <label class="field"><span>Developer</span><input name="developer"></label>
        <label class="field"><span>Publisher</span><input name="publisher"></label>
        <label class="field"><span>Series</span><input name="series"></label>
        <label class="field"><span>Region</span><input name="region"></label>
        <label class="field"><span>Play mode</span><input name="play_mode"></label>
        <label class="field"><span>Sort title</span><input name="sort_title"></label>
        <label class="field"><span>Progress</span><select name="progress"><option value="">Not set</option><option>Playing</option><option>Paused</option><option>Beaten</option><option>Completed</option><option>Mastered</option><option>Abandoned</option></select></label>
        <label class="field"><span>ESRB</span><select name="esrb"><option value="">Not set</option><option>E</option><option>E10+</option><option>T</option><option>M</option><option>AO</option><option>RP</option><option>EC</option><option>Unrated</option></select></label>
        <label class="field"><span>Rating, 0 to 5</span><input name="rating" type="number" min="0" max="5" step="0.5"></label>
        <label class="field"><span>Max players</span><input name="max_players"></label>
        <label class="field"><span>Wikipedia URL</span><input name="wikipedia_url"></label>
        <label class="field"><span>Video URL</span><input name="video_url"></label>
        <label class="field wide"><span>Alternate names, semicolon separated</span><input name="alternate_names"></label>
        <label class="field wide"><span>Video snap path</span><input name="video_snap"></label>
        <label class="field wide"><span>Theme video path</span><input name="video_theme"></label>
        <label class="field wide"><span>Trailer path</span><input name="video_trailer"></label>
        <label class="field wide"><span>Recording path</span><input name="video_recording"></label>
        <label class="field wide"><span>Game or ROM path</span><input name="path" required></label>
        <label class="field wide"><span>Cover image path</span><input name="cover"></label>
        <label class="field wide"><span>Background image path</span><input name="background"></label>
        <label class="field wide"><span>Video path</span><input name="video"></label>
        <label class="field wide"><span>Music path</span><input name="music"></label>
        <label class="field"><span>Controller support</span><input name="controller_support" placeholder="Gamepad, keyboard"></label>
        <label class="field"><span>Disc count</span><input name="disc_count" type="number" min="0" max="99"></label>
        <label class="field wide"><span>Clear logo path</span><input name="clear_logo"></label>
        <label class="field wide"><span>Fanart path</span><input name="fanart"></label>
        <label class="field wide"><span>Banner path</span><input name="banner"></label>
        <label class="field wide"><span>Icon path</span><input name="icon"></label>
        <label class="field wide"><span>Box back path</span><input name="box_back"></label>
        <label class="field wide"><span>Box spine path</span><input name="box_spine"></label>
        <label class="field wide"><span>3D box path</span><input name="box_3d"></label>
        <label class="field wide"><span>Title screen path</span><input name="title_screen"></label>
        <label class="field wide"><span>Cart front path</span><input name="cart_front"></label>
        <label class="field wide"><span>Cart back path</span><input name="cart_back"></label>
        <label class="field wide"><span>Disc path</span><input name="disc"></label>
        <label class="field wide"><span>Advertisement / flyer path</span><input name="advertisement"></label>
        <label class="field wide"><span>Manual path</span><input name="manual"></label>
        <label class="field wide"><span>Screenshot paths, one per line</span><textarea name="screenshots"></textarea></label>
        <label class="field wide"><span>RetroAchievements Game ID, optional manual match</span><input name="ra_game_id" inputmode="numeric"></label>
        <label class="field wide"><span>Launch command, optional override</span><input name="launch"></label>
        <label class="field wide"><span>Launch profile override</span><select name="launch_profile"><option value="">Default platform profile</option></select></label>
        <label class="check"><input type="checkbox" name="extract_archive">Extract archive before launch</label>
        <label class="check"><input type="checkbox" name="hide_in_bigbox"> Hide in Big Box</label>
        <label class="check"><input type="checkbox" name="hidden">Hide from normal views</label>
        <label class="check"><input type="checkbox" name="broken"> Mark as broken</label>
        <label class="check"><input type="checkbox" name="portable"> Mark as portable</label>
        <label class="field"><span>Archive member</span><input name="archive_member"></label>
        <label class="field wide"><span>Additional applications, one per line: Name | Path | Command</span><textarea name="applications"></textarea></label>
        <label class="field wide"><span>Alternate versions, one per line: Name | Path | Command</span><textarea name="versions"></textarea></label>
        <label class="field wide"><span>Documents, one per line: Name | Path</span><textarea name="documents"></textarea></label>
        <label class="field wide"><span>Save paths, one per line</span><textarea name="save_paths"></textarea></label>
        <label class="field wide"><span>Description</span><textarea name="description"></textarea></label>
        <label class="field wide"><span>Private notes</span><textarea name="notes"></textarea></label>
        <div class="wide form-grid" id="customFieldInputs"></div>
      </div>
      <div class="dialog-actions"><button type="button" class="icon-button" id="cancelDialog">Cancel</button><button class="primary">Save</button></div>
    </form>
  </dialog>
  <dialog id="profilesDialog" aria-modal="true" class="profiles-dialog" aria-labelledby="profilesDialogTitle">
    <form id="profilesForm">
      <div class="dialog-head"><h2 id="profilesDialogTitle">Emulator profiles</h2><button type="button" id="closeProfiles" aria-label="Close Emulator profiles dialog">×</button></div>
      <div class="form-grid">
        <label class="field wide"><span>One profile per line: Platform = command. Use {path} for the ROM.</span><textarea id="profilesText"></textarea></label>
        <div class="wide" id="detectedProfiles"></div>
        <div class="wide"><div class="section-title">Handheld performance</div><p class="description">Set a TDP limit (watts) applied via ryzenadj when a game from this profile launches, and an optional restore limit when the session ends. Requires ryzenadj on PATH.</p><div class="form-grid" id="perfProfiles"></div></div>
        <div class="wide"><div class="section-title">Install and configure</div><div class="emulator-list" id="emulatorCatalog"></div></div>
      </div>
      <div class="dialog-actions"><button type="button" class="icon-button" id="cancelProfiles">Cancel</button><button class="primary">Save</button></div>
    </form>
  </dialog>
  <dialog id="themesDialog" aria-modal="true" aria-labelledby="themesDialogTitle">
    <form id="themesForm">
      <div class="dialog-head"><h2 id="themesDialogTitle">Themes</h2><button type="button" id="closeThemes" aria-label="Close Themes dialog">×</button></div>
      <div class="form-grid">
        <p class="wide description">Stock themes ship with OpenBox. Import your own CSS to restyle the library, detail pane, dialogs, and Big Box.</p>
        <label class="field wide"><span>Apply to</span><select id="themeScope"><option value="">All platforms</option></select></label>
        <label class="field wide"><span>Active theme</span><select id="themeSelect"><option value="">Default</option></select></label>
        <button type="button" class="icon-button" id="importTheme">Import CSS theme</button>
        <button type="button" class="icon-button" id="openThemeFolder">Open themes folder</button>
      </div>
      <div class="dialog-actions"><button type="button" class="icon-button" id="cancelThemes">Cancel</button><button class="primary">Apply</button></div>
    </form>
  </dialog>
  <dialog id="achievementsDialog" aria-modal="true" aria-labelledby="achievementsDialogTitle">
    <form id="achievementsForm">
      <div class="dialog-head"><h2 id="achievementsDialogTitle">RetroAchievements</h2><button type="button" id="closeAchievements" aria-label="Close RetroAchievements dialog">×</button></div>
      <div class="form-grid">
        <label class="field"><span>Username</span><input id="raUsername" required></label>
        <label class="field"><span>Web API key</span><input id="raApiKey" type="password" autocomplete="off"></label>
        <div class="wide description" id="raProfile">Get your web API key from your RetroAchievements settings.</div>
        <button type="button" class="icon-button" id="injectRa">Inject credentials into emulators</button>
      </div>
      <div class="dialog-actions"><button type="button" class="icon-button" id="cancelAchievements">Cancel</button><button class="primary">Connect account</button></div>
    </form>
  </dialog>
  <dialog id="pluginsDialog" aria-modal="true" aria-labelledby="pluginsDialogTitle">
    <div class="dialog-head"><h2 id="pluginsDialogTitle">Plugins</h2><button type="button" id="closePlugins" aria-label="Close Plugins dialog">×</button></div>
    <div class="form-grid">
      <div class="wide description">Plugins are trusted local Python code. Install only packages you trust.</div>
      <div class="wide emulator-list" id="pluginList"></div>
      <button type="button" class="icon-button" id="browsePluginCatalog">Browse community catalog</button>
      <button type="button" class="icon-button" id="installPlugin">Install or update package</button>
    </div>
    <div class="dialog-actions"><button type="button" class="primary" id="donePlugins">Done</button></div>
  </dialog>
  <dialog id="metadataDialog" aria-modal="true" aria-labelledby="metadataDialogTitle">
    <div class="dialog-head"><h2 id="metadataDialogTitle">LaunchBox Games Database</h2><button type="button" id="closeMetadata" aria-label="Close LaunchBox Games Database dialog">×</button></div>
    <form id="metadataSearchForm" class="form-grid">
      <label class="field wide"><span>Game title</span><input id="metadataQuery" required></label>
      <button class="icon-button" id="syncMetadata" type="button">Download database</button>
      <button class="icon-button" id="searchIgdb" type="button">Search IGDB</button>
      <button class="primary" type="submit">Search</button>
      <button class="icon-button" id="autoMatchMetadata" type="button">Auto-match library</button>
      <div class="wide description" id="metadataStatus"></div>
      <div class="wide detail-card" id="metadataCoverage" style="display:none"><div class="facts" id="metadataCoverageFacts"></div></div>
      <div class="wide metadata-results" id="metadataResults"></div>
      <label class="check"><input type="checkbox" id="metadataCover" checked> Box front</label>
      <label class="check"><input type="checkbox" id="metadataBackground" checked> Background</label>
      <label class="check"><input type="checkbox" id="metadataScreenshots" checked> Screenshots</label>
      <label class="check"><input type="checkbox" id="metadataBoxBack"> Box back</label>
      <label class="check"><input type="checkbox" id="metadataBoxSpine"> Box spine</label>
      <label class="check"><input type="checkbox" id="metadataBox3d"> 3D box</label>
      <label class="check"><input type="checkbox" id="metadataClearLogo"> Clear logo</label>
      <label class="check"><input type="checkbox" id="metadataFanart"> Fanart</label>
      <label class="check"><input type="checkbox" id="metadataBanner"> Banner</label>
      <label class="check"><input type="checkbox" id="metadataIcon"> Icon</label>
      <label class="check"><input type="checkbox" id="metadataTitleScreen"> Title screen</label>
      <label class="check"><input type="checkbox" id="metadataCartFront"> Cart front</label>
      <label class="check"><input type="checkbox" id="metadataCartBack"> Cart back</label>
      <label class="check"><input type="checkbox" id="metadataDisc"> Disc</label>
      <label class="check"><input type="checkbox" id="metadataAdvertisement"> Advertisement / flyer</label>
      <label class="check"><input type="checkbox" id="metadataManual"> Manual</label>
      <label class="check"><input type="checkbox" id="metadataOverwrite"> Replace existing fields and media</label>
    </form>
    <div class="dialog-actions"><button type="button" class="primary" id="doneMetadata">Done</button></div>
  </dialog>
  <dialog id="mediaManagerDialog" aria-modal="true" aria-labelledby="mediaManagerDialogTitle">
    <div class="dialog-head"><h2 id="mediaManagerDialogTitle">Media Manager</h2><button type="button" id="closeMediaManager" aria-label="Close Media Manager dialog">×</button></div>
    <div class="form-grid">
      <div class="wide detail-card" id="mediaAudit"></div>
      <label class="check"><input type="checkbox" id="bulkCover" checked> Box fronts</label>
      <label class="check"><input type="checkbox" id="bulkBackground" checked> Backgrounds</label>
      <label class="check"><input type="checkbox" id="bulkScreenshots" checked> Screenshots</label>
      <label class="check"><input type="checkbox" id="bulkBoxBack"> Box backs</label>
      <label class="check"><input type="checkbox" id="bulkBoxSpine"> Box spines</label>
      <label class="check"><input type="checkbox" id="bulkBox3d"> 3D boxes</label>
      <label class="check"><input type="checkbox" id="bulkClearLogo"> Clear logos</label>
      <label class="check"><input type="checkbox" id="bulkFanart"> Fanart</label>
      <label class="check"><input type="checkbox" id="bulkBanner"> Banners</label>
      <label class="check"><input type="checkbox" id="bulkIcon"> Icons</label>
      <label class="check"><input type="checkbox" id="bulkTitleScreen"> Title screens</label>
      <label class="check"><input type="checkbox" id="bulkCartFront"> Cart fronts</label>
      <label class="check"><input type="checkbox" id="bulkCartBack"> Cart backs</label>
      <label class="check"><input type="checkbox" id="bulkDisc"> Discs</label>
      <label class="check"><input type="checkbox" id="bulkAdvertisement"> Ads / flyers</label>
      <label class="check"><input type="checkbox" id="bulkManual"> Manuals</label>
      <label class="check"><input type="checkbox" id="bulkOverwrite"> Replace existing media</label>
      <button type="button" class="primary" id="startBulkMedia">Download for matched games</button>
      <button type="button" class="icon-button" id="cleanupMedia">Find duplicate media</button>
      <button type="button" class="icon-button" id="applyCleanupMedia" hidden>Delete duplicate media</button>
      <div class="wide description" id="bulkMediaStatus"></div>
    </div>
    <div class="dialog-actions"><button type="button" class="primary" id="doneMediaManager">Done</button></div>
  </dialog>
  <dialog id="healthDialog" aria-modal="true" aria-labelledby="healthDialogTitle">
    <div class="dialog-head"><h2 id="healthDialogTitle">Library Audit</h2><button type="button" id="closeHealth" aria-label="Close Library Audit dialog">×</button></div>
    <div class="form-grid">
      <div class="wide detail-card" id="healthSummary"></div>
      <div class="wide metadata-results" id="healthIssues"></div>
      <div class="wide detail-card" id="jobsPanel" hidden></div>
      <button type="button" class="icon-button" id="scanAllSaves">Scan library for saves</button>
      <button type="button" class="icon-button" id="dedupeButton">Remove duplicate entries</button>
    </div>
    <div class="dialog-actions"><button type="button" class="primary" id="doneHealth">Done</button></div>
  </dialog>
  <dialog id="bulkDialog" aria-modal="true" aria-labelledby="bulkDialogTitle">
    <form id="bulkForm">
      <div class="dialog-head"><h2 id="bulkDialogTitle">Bulk Edit</h2><button type="button" id="closeBulk" aria-label="Close Bulk Edit dialog">×</button></div>
      <div class="form-grid">
        <p class="wide description" id="bulkCount"></p>
        <label class="field"><span>Platform, blank keeps current</span><input name="platform"></label>
        <label class="field"><span>Genre, blank keeps current</span><input name="genre"></label>
        <label class="field"><span>Progress</span><select name="progress"><option value="">Keep current</option><option>Playing</option><option>Paused</option><option>Beaten</option><option>Completed</option><option>Mastered</option><option>Abandoned</option><option value="__clear">Clear</option></select></label>
        <label class="field"><span>Rating</span><select name="rating"><option value="">Keep current</option><option value="0">0</option><option value="0.5">0.5</option><option value="1">1</option><option value="1.5">1.5</option><option value="2">2</option><option value="2.5">2.5</option><option value="3">3</option><option value="3.5">3.5</option><option value="4">4</option><option value="4.5">4.5</option><option value="5">5</option></select></label>
        <label class="field"><span>Favorite</span><select name="favorite"><option value="">Keep current</option><option value="true">Yes</option><option value="false">No</option></select></label>
        <label class="field"><span>Hidden</span><select name="hidden"><option value="">Keep current</option><option value="true">Yes</option><option value="false">No</option></select></label>
        <label class="field"><span>ESRB</span><select name="esrb"><option value="">Keep current</option><option>E</option><option>E10+</option><option>T</option><option>M</option><option>AO</option><option>RP</option><option>Unrated</option></select></label>
      </div>
      <div class="dialog-actions"><button type="button" class="icon-button" id="cancelBulk">Cancel</button><button class="primary">Apply</button></div>
    </form>
  </dialog>
  <dialog id="playlistsDialog" aria-modal="true" aria-labelledby="playlistsDialogTitle">
    <div class="dialog-head"><h2 id="playlistsDialogTitle">Playlists</h2><button type="button" id="closePlaylists" aria-label="Close Playlists dialog">×</button></div>
    <div class="form-grid">
      <div class="wide extras"><button type="button" class="primary" id="newManualPlaylist">New manual playlist</button><button type="button" class="icon-button" id="newFilterPlaylist">New filter playlist</button></div>
      <div class="wide description">Manual playlists keep an ordered set of games. Filter playlists update from their rules.</div>
      <div class="wide playlist-manager-list" id="playlistManagerList"></div>
    </div>
    <div class="dialog-actions"><button type="button" class="primary" id="donePlaylists">Done</button></div>
  </dialog>
  <dialog id="backupDialog" aria-modal="true" aria-labelledby="backupDialogTitle">
    <div class="dialog-head"><h2 id="backupDialogTitle">Backups</h2><button type="button" id="closeBackups" aria-label="Close Backups dialog">×</button></div>
    <div class="form-grid">
      <div class="wide extras"><button type="button" class="primary" id="createNamedBackup">Create backup</button><button type="button" class="icon-button" id="refreshBackups">Refresh</button></div>
      <div class="wide description">Backups include selected library data, settings, media, plugins, and themes. Restore creates a safety copy first.</div>
      <div class="wide backup-list" id="backupList"></div>
    </div>
    <div class="dialog-actions"><button type="button" class="primary" id="doneBackups">Done</button></div>
  </dialog>
  <dialog id="sessionsDialog" aria-modal="true" aria-labelledby="sessionsDialogTitle">
    <div class="dialog-head"><h2 id="sessionsDialogTitle">Running Games</h2><button type="button" id="closeSessions" aria-label="Close Running Games dialog">×</button></div>
    <div class="form-grid"><div class="wide emulator-list" id="sessionList"></div></div>
    <div class="dialog-actions"><button type="button" class="primary" id="doneSessions">Done</button></div>
  </dialog>
  <dialog id="historyDialog" aria-modal="true" aria-labelledby="historyDialogTitle">
    <div class="dialog-head"><h2 id="historyDialogTitle">Play Session History</h2><button type="button" id="closeHistory" aria-label="Close Play Session History dialog">×</button></div>
    <div class="form-grid"><div class="wide history-list" id="historyList"></div></div>
    <div class="dialog-actions"><button type="button" class="primary" id="doneHistory">Done</button></div>
  </dialog>
  <dialog id="welcomeDialog" aria-modal="true" aria-labelledby="welcomeDialogTitle">
    <div class="dialog-head"><h2 id="welcomeDialogTitle">Welcome to OpenBox</h2><button type="button" id="closeWelcome" aria-label="Close Welcome to OpenBox dialog">×</button></div>
    <div class="form-grid welcome-steps">
      <p class="wide description">Bring your games into OpenBox. Pick a starting point and the library fills in as imports finish.</p>
      <button type="button" class="primary" id="welcomeImportFolder">Import a ROM or game folder</button>
      <button type="button" class="icon-button" id="welcomeImportSteam">Import Steam games</button>
      <button type="button" class="icon-button" id="welcomeImportHeroic">Import Heroic games</button>
      <button type="button" class="icon-button" id="welcomeImportLutris">Import Lutris games</button>
      <button type="button" class="icon-button" id="welcomeSyncMetadata">Sync LaunchBox metadata database</button>
      <button type="button" class="icon-button" id="welcomeOpenSettings">Configure watched folders and startup apps</button>
      <button type="button" class="primary" id="welcomeDone">Finish setup</button>
    </div>
  </dialog>
  <dialog id="featureDialog" aria-modal="true" aria-labelledby="featureDialogTitle">
    <div class="dialog-head"><h2 id="featureDialogTitle">OpenBox</h2><button type="button" id="closeFeature" aria-label="Close feature dialog">×</button></div>
    <div class="form-grid"><div class="wide" id="featureContent"></div></div>
    <div class="dialog-actions"><button type="button" class="primary" id="doneFeature">Done</button></div>
  </dialog>
  <div class="shutdown-overlay" id="shutdownOverlay" hidden>
    <div class="shutdown-panel">
      <h2>Shutting down OpenBox</h2>
      <p id="shutdownMessage">Closing running games and startup applications...</p>
      <div class="dialog-actions"><button type="button" class="icon-button" id="forceShutdown">Force close</button></div>
    </div>
  </div>
  <dialog id="settingsDialog" aria-modal="true" aria-labelledby="settingsDialogTitle">
    <form id="settingsForm">
      <div class="dialog-head"><h2 id="settingsDialogTitle">OpenBox Settings</h2><button type="button" id="closeSettings" aria-label="Close OpenBox Settings dialog">×</button></div>
      <div class="form-grid">
        <label class="field wide settings-field" data-setting="search watched folders cloud screensaver startup shutdown session history backup progress automation image group controller gamepad"><span>Search settings</span><input id="settingsSearch" class="settings-search" type="search" placeholder="Type to filter settings"></label>
        <label class="field wide settings-field" data-setting="watched folders import auto"><span>Automatically watched game folders, one absolute path per line</span><textarea id="watchFolders"></textarea></label>
        <div class="wide settings-field" data-setting="library cleanup remove steam imports"><button type="button" class="icon-button" id="removeSteamGames">Remove all imported Steam games</button><span class="description">Removes library entries only. Game files and media stay on disk.</span></div>
        <div class="wide settings-field" data-setting="diagnostic support troubleshooting logs"><button type="button" class="icon-button" id="copyDiagnosticLog">Copy diagnostic log</button><span class="description">Review it before sharing because it can include game names and local file paths.</span></div>
        <label class="field wide settings-field" data-setting="cloud sync syncthing dropbox nextcloud"><span>Mounted Nextcloud, Syncthing, Dropbox, or other cloud folder for game-stat syncing</span><input id="cloudFolder"></label>
        <div class="wide settings-field" data-setting="cloud sync"><button type="button" class="icon-button" id="syncCloud">Sync statistics now</button><span class="description" id="cloudStatus"></span></div>
        <label class="field wide settings-field" data-setting="default image group viewing cover background screenshot clear logo fanart banner icon box back box spine 3d box title screen cart front cart back disc ads flyers manuals"><span>Default image group</span><select id="defaultImageGroup"><option value="cover">Box fronts</option><option value="background">Backgrounds</option><option value="screenshot">Screenshots</option><option value="clear_logo">Clear logos</option><option value="fanart">Fanart</option><option value="banner">Banners</option><option value="icon">Icons</option><option value="box_back">Box backs</option><option value="box_spine">Box spines</option><option value="box_3d">3D boxes</option><option value="title_screen">Title screens</option><option value="cart_front">Cart fronts</option><option value="cart_back">Cart backs</option><option value="disc">Discs</option><option value="advertisement">Ads / flyers</option><option value="manual">Manuals</option></select></label>
        <div class="wide settings-field" data-setting="badges favorite installed missing media saves documents versions storefront achievements high scores progress rating broken portable controller"><span>Visible game badges</span><div class="badge-row">
          <label class="check"><input type="checkbox" data-badge-setting="favorite"> Favorite</label>
          <label class="check"><input type="checkbox" data-badge-setting="installed"> Installed</label>
          <label class="check"><input type="checkbox" data-badge-setting="missing_media"> Missing media</label>
          <label class="check"><input type="checkbox" data-badge-setting="saves"> Saves</label>
          <label class="check"><input type="checkbox" data-badge-setting="documents"> Documents</label>
          <label class="check"><input type="checkbox" data-badge-setting="versions"> Versions</label>
          <label class="check"><input type="checkbox" data-badge-setting="storefront"> Storefront</label>
          <label class="check"><input type="checkbox" data-badge-setting="achievements"> Achievements</label>
          <label class="check"><input type="checkbox" data-badge-setting="highscores"> High scores</label>
          <label class="check"><input type="checkbox" data-badge-setting="progress"> Progress</label>
          <label class="check"><input type="checkbox" data-badge-setting="rating"> Rating</label>
          <label class="check"><input type="checkbox" data-badge-setting="broken"> Broken</label>
          <label class="check"><input type="checkbox" data-badge-setting="portable"> Portable</label>
          <label class="check"><input type="checkbox" data-badge-setting="controller"> Controller</label>
        </div></div>
        <label class="field wide settings-field" data-setting="screensaver big box attract"><span>Big Box screensaver delay in seconds, 0 disables it</span><input id="screensaverSeconds" type="number" min="0" max="3600"></label>
        <label class="field wide settings-field" data-setting="startup applications commands"><span>Applications to start with OpenBox, one shell-free command per line</span><textarea id="startupCommands"></textarea></label>
        <label class="field wide settings-field" data-setting="shutdown applications commands exit"><span>Applications to start when OpenBox exits, one shell-free command per line</span><textarea id="shutdownCommands"></textarea></label>
        <label class="check settings-field" data-setting="session history tracking data play time"><input type="checkbox" id="trackSessionHistory" checked> Track play session history</label>
        <label class="check settings-field" data-setting="backup on close saves"><input type="checkbox" id="backupOnClose"> Back up saves when a game session ends</label>
        <label class="check settings-field" data-setting="obs recording attach auto"><input type="checkbox" id="obsAutoAttach" checked> Auto-attach latest OBS recording when a session ends</label>
        <label class="field wide settings-field" data-setting="obs recording folder path"><span>OBS recording folder, optional override</span><input id="obsRecordingPath" placeholder="~/Videos"></label>
        <label class="field settings-field" data-setting="save backup limit retention"><span>Save backup retention limit, 0 keeps all</span><input id="saveBackupLimit" type="number" min="0" max="500"></label>
        <label class="field settings-field" data-setting="media download limit queue welcome wizard"><span>Media download limit during imports, 0 unlimited</span><input id="mediaDownloadLimit" type="number" min="0" max="10000"></label>
        <label class="field wide settings-field" data-setting="auto import media types cover background screenshots box back spine 3d clear logo fanart banner icon title screen cart front cart back disc ads flyers manuals"><span>Auto-import media types, comma separated</span><input id="autoImportMediaTypes" placeholder="cover, background, screenshots"></label>
        <label class="field wide settings-field" data-setting="region priority metadata images"><span>Region priority, comma separated</span><input id="regionPriority"></label>
        <label class="field wide settings-field" data-setting="library music background big box"><span>Library background music path</span><input id="libraryMusic"></label>
        <label class="check settings-field" data-setting="video bgm mix background music"><input type="checkbox" id="videoBgmMix"> Mix video audio with background music</label>
        <label class="field settings-field" data-setting="big box mode hybrid coverflow stage"><span>Big Box layout</span><select id="bigBoxMode"><option value="stage">Stage</option><option value="hybrid">Hybrid</option><option value="coverflow">CoverFlow</option></select></label>
        <label class="check settings-field" data-setting="show playlist actions big box menu"><input type="checkbox" id="showPlaylistActions" checked> Show playlist actions in Big Box</label>
        <label class="check settings-field" data-setting="dynamic play button launch"><input type="checkbox" id="dynamicPlayButton" checked> Use dynamic Play button labels</label>
        <label class="field wide settings-field" data-setting="hidden sidebar sections filters platforms playlists"><span>Hidden sidebar sections, comma separated</span><input id="hiddenSidebarSections" placeholder="platforms, playlists"></label>
        <label class="field wide settings-field" data-setting="emumovies credentials media"><span>EmuMovies username</span><input id="emumoviesUsername"></label>
        <label class="field settings-field" data-setting="emumovies credentials media"><span>EmuMovies password</span><input id="emumoviesPassword" type="password" autocomplete="off"></label>
        <label class="check settings-field" data-setting="progress automation playing paused idle days minutes"><input type="checkbox" id="progressAutomationEnabled"> Enable game progress automation</label>
        <label class="field settings-field" data-setting="progress automation playing minutes"><span>Mark as Playing after minutes played</span><input id="progressAutomationMinutes" type="number" min="0" max="100000"></label>
        <label class="field settings-field" data-setting="progress automation paused idle days"><span>Mark as Paused after days without play</span><input id="progressAutomationIdleDays" type="number" min="0" max="3650"></label>
        <label class="field settings-field" data-setting="progress first play completion status"><span>Progress status on first play</span><select id="progressOnFirstPlay"><option value="">None</option><option value="Playing">Playing</option><option value="Paused">Paused</option><option value="Beaten">Beaten</option><option value="Completed">Completed</option><option value="Mastered">Mastered</option></select></label>
        <label class="field settings-field" data-setting="tracking mode process folder wine proton"><span>Default session tracking mode</span><select id="trackingMode"><option value="default">Default</option><option value="process">Process</option><option value="original_process">Original process</option><option value="folder">Install folder</option><option value="process_name">Process name</option></select></label>
        <label class="field settings-field" data-setting="handheld performance tdp ryzenadj apply limits"><span>Apply handheld performance limits</span><select id="applyPerf"><option value="auto">Auto (handheld only)</option><option value="always">Always</option><option value="off">Off</option></select></label>
        <label class="field settings-field" data-setting="tracking delay seconds launch"><span>Tracking start delay in seconds</span><input id="trackingDelay" type="number" min="0" max="600"></label>
        <label class="field settings-field" data-setting="tracking frequency poll seconds"><span>Tracking poll frequency in seconds</span><input id="trackingFrequency" type="number" min="0.5" max="60" step="0.5"></label>
        <label class="check settings-field" data-setting="auto close steam heroic lutris storefront"><input type="checkbox" id="autoCloseStoreClients"> Close storefront clients after a session ends</label>
        <label class="field wide settings-field" data-setting="emulator scan folder rom wizard"><span>ROM scan folder for emulator definitions</span><input id="emulatorScanFolder" placeholder="/path/to/roms"></label>
        <div class="wide settings-field" data-setting="emulator scan folder rom wizard"><button type="button" class="icon-button" id="scanEmulatorFolder">Scan ROM folder</button></div>
        <label class="field settings-field" data-setting="localization"><span>Interface language</span><select id="localeSetting"><option value="en">English</option></select><small>Localization is planned for a future release.</small></label>
        <label class="field settings-field" data-setting="library view list grid columns"><span>Default library view</span><select id="libraryViewSetting"><option value="grid">Grid</option><option value="list">List</option></select></label>
        <label class="field settings-field" data-setting="library view grid grouping cover aspect ratio shape none"><span>Group covers by shape</span><select id="groupingSetting"><option value="shape">Group by cover shape</option><option value="none">No grouping</option></select></label>
        <label class="field wide settings-field" data-setting="custom fields metadata premium"><span>Custom fields, one per line: Name|Option1,Option2</span><textarea id="customFieldDefs" placeholder="Cabinet|Upright,Cocktail"></textarea></label>
        <label class="field wide settings-field" data-setting="big box startup video attract"><span>Big Box startup video path</span><input id="bigboxStartupVideo"></label>
        <label class="field wide settings-field" data-setting="big box shutdown applications switch"><span>Applications to run when switching into Big Box, one command per line</span><textarea id="bigboxShutdownCommands"></textarea></label>
        <label class="field settings-field" data-setting="attract mode screensaver big box"><span>Attract mode delay in seconds</span><input id="attractModeSeconds" type="number" min="0" max="3600"></label>
        <label class="check settings-field" data-setting="system tray minimize close"><input type="checkbox" id="trayEnabled"> Enable desktop tray integration</label>
        <label class="check settings-field" data-setting="system tray minimize close"><input type="checkbox" id="minimizeToTray"> Minimize to tray when window closes</label>
        <label class="field wide settings-field" data-setting="ludusavi hoard saves backup"><span>Ludusavi backup path, optional</span><input id="ludusaviBackupPath" placeholder="Leave blank for Ludusavi default"></label>
        <div class="wide settings-field" data-setting="media packs themes badges controller"><button type="button" class="icon-button" id="applyMediaPack">Apply bundled media pack</button><span class="description" id="mediaPackStatus"></span></div>
        <div class="wide section-title settings-field" data-setting="controller gamepad mapping">Standard Gamepad Button Mapping</div>
        <label class="field"><span>Play</span><input data-controller="play" class="settings-field" data-setting="controller gamepad play" type="number" min="0" max="31"></label>
        <label class="field"><span>Back</span><input data-controller="back" class="settings-field" data-setting="controller gamepad back" type="number" min="0" max="31"></label>
        <label class="field"><span>Favorite</span><input data-controller="favorite" class="settings-field" data-setting="controller gamepad favorite" type="number" min="0" max="31"></label>
        <label class="field"><span>Random game</span><input data-controller="random" class="settings-field" data-setting="controller gamepad random" type="number" min="0" max="31"></label>
        <label class="field"><span>Previous page</span><input data-controller="page_left" class="settings-field" data-setting="controller gamepad page" type="number" min="0" max="31"></label>
        <label class="field"><span>Next page</span><input data-controller="page_right" class="settings-field" data-setting="controller gamepad page" type="number" min="0" max="31"></label>
        <label class="field"><span>Running-game menu</span><input data-controller="pause" class="settings-field" data-setting="controller gamepad pause" type="number" min="0" max="31"></label>
        <label class="field"><span>Filter and sort menu</span><input data-controller="menu" class="settings-field" data-setting="controller gamepad menu filter sort" type="number" min="0" max="31"></label>
        <button type="button" class="icon-button settings-field" data-setting="watched folders import scan" id="scanWatched">Scan watched folders now</button>
        <button type="button" class="icon-button settings-field" data-setting="welcome wizard setup" id="reopenWelcome">Reopen welcome wizard</button>
        <div class="wide detail-card"><h3>Application</h3><p class="description" id="updateStatus"></p><div class="extras"><button type="button" class="icon-button" id="checkUpdate">Check for updates</button><button type="button" class="primary" id="installUpdate" hidden>Install verified update</button><button type="button" class="icon-button" id="installDesktop">Install desktop shortcut</button></div></div>
      </div>
      <div class="dialog-actions"><button type="button" class="icon-button" id="cancelSettings">Cancel</button><button class="primary">Save</button></div>
    </form>
  </dialog>
  <dialog id="discoveryDialog" aria-modal="true" aria-labelledby="discoveryDialogTitle">
    <div class="dialog-head"><h2 id="discoveryDialogTitle">Game Discovery Center</h2><button type="button" id="closeDiscovery" aria-label="Close Game Discovery Center dialog">×</button></div>
    <div class="form-grid"><div class="wide discovery-grid" id="discoveryContent"></div></div>
    <div class="dialog-actions"><button type="button" class="primary" id="doneDiscovery">Done</button></div>
  </dialog>
  <dialog id="storefrontDialog" aria-modal="true" aria-labelledby="storefrontDialogTitle">
    <div class="dialog-head"><h2 id="storefrontDialogTitle">Storefront Manager</h2><button type="button" id="closeStorefront" aria-label="Close Storefront Manager dialog">×</button></div>
    <div class="form-grid">
      <p class="wide description">Import owned and installed games from Steam, Heroic, Lutris, and Gameyfin. Install or uninstall Gameyfin titles on demand from the library or Big Box.</p>
      <div class="wide extras"><button type="button" class="primary" id="importSteamStore">Import Steam</button><button type="button" class="icon-button" id="importHeroicStore">Import Heroic</button><button type="button" class="icon-button" id="importLutrisStore">Import Lutris</button><button type="button" class="icon-button" id="importGameyfinStore">Import Gameyfin</button><button type="button" class="icon-button" id="importScummvmStore">Import ScummVM</button><button type="button" class="icon-button" id="importRpcs3Store">Import RPCS3</button><button type="button" class="icon-button" id="importVita3kStore">Import Vita3K</button></div>
      <label class="check"><input type="checkbox" id="storefrontAutoImportSteam"> Auto-import Steam on startup</label>
      <label class="check"><input type="checkbox" id="storefrontAutoImportHeroic"> Auto-import Heroic on startup</label>
      <label class="check"><input type="checkbox" id="storefrontAutoImportLutris"> Auto-import Lutris on startup</label>
      <label class="check"><input type="checkbox" id="storefrontAutoImportGameyfin"> Auto-import Gameyfin on startup</label>
      <div class="wide section-title">Gameyfin server</div>
      <label class="field wide"><span>Gameyfin URL</span><input id="storefrontGameyfinUrl" placeholder="http://192.168.1.10:8080"></label>
      <label class="field"><span>Username</span><input id="storefrontGameyfinUsername" autocomplete="username"></label>
      <label class="field"><span>Password</span><input id="storefrontGameyfinPassword" type="password" autocomplete="current-password" placeholder="Leave blank to keep current"></label>
      <label class="field wide"><span>Local install folder</span><input id="storefrontGameyfinInstallDir" placeholder="~/Games/Gameyfin"></label>
      <div class="wide extras"><button type="button" class="icon-button" id="testGameyfin">Test Gameyfin connection</button><span class="description" id="storefrontGameyfinStatus"></span></div>
      <div class="wide section-title">Browse storefront catalogs</div>
      <label class="field"><span>Source</span><select id="storefrontSource"><option value="steam">Steam</option><option value="heroic">Heroic</option><option value="lutris">Lutris</option><option value="gameyfin">Gameyfin</option></select></label>
      <div class="wide extras"><button type="button" class="icon-button" id="loadStorefrontCatalog">Load catalog</button><button type="button" class="icon-button" id="importStorefrontInstalled">Import installed</button><button type="button" class="primary" id="importStorefrontUninstalled">Import owned / uninstalled</button></div>
      <div class="wide storefront-catalog" id="storefrontCatalog"></div>
    </div>
    <div class="dialog-actions"><button type="button" class="primary" id="saveStorefront">Save storefront settings</button></div>
  </dialog>
  <dialog class="media-dialog" id="mediaDialog" aria-label="Media viewer"><button type="button" id="closeMedia" aria-label="Close screenshot">×</button></dialog>
  <dialog class="reader-dialog" id="readerDialog" aria-labelledby="readerTitle">
    <div class="dialog-head"><h2 id="readerTitle">Document</h2><button type="button" id="closeReader" aria-label="Close Document reader">×</button></div>
    <div class="reader-toolbar"><button type="button" class="icon-button" id="readerPrev">Previous page</button><button type="button" class="icon-button" id="readerNext">Next page</button><span class="description" id="readerPageLabel">Page 1</span><button type="button" class="icon-button" data-reader-layout="single">Single page</button><button type="button" class="icon-button" data-reader-layout="spread">Two-page spread</button><button type="button" class="icon-button" data-reader-theme="light">Light</button><button type="button" class="icon-button" data-reader-theme="dark">Dark</button></div>
    <div class="reader-viewport" id="readerViewport"><iframe id="readerFrame" title="Document reader"></iframe></div>
  </dialog>
  <div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
  <div class="error-banner" id="errorBanner" role="alert" hidden>
    <span id="errorBannerText"></span>
    <button type="button" class="icon-button" id="errorBannerCopy">Copy details</button>
    <button type="button" class="icon-button" id="errorBannerDismiss" aria-label="Dismiss error">×</button>
  </div>
  <div class="context-menu" id="contextMenu" hidden>
    <button type="button" class="icon-button" id="contextPlay">Play</button>
    <button type="button" class="icon-button" id="contextFavorite">Toggle favorite</button>
    <button type="button" class="icon-button" id="contextEdit">Edit metadata</button>
    <button type="button" class="icon-button" id="contextProgress">Mark progress</button>
    <select id="contextPlaylist" aria-label="Playlist"><option value="">Add to playlist...</option></select>
    <button type="button" class="icon-button" id="contextAddPlaylist">Add selected game</button>
    <button type="button" class="icon-button" id="contextNewPlaylist">New playlist from game</button>
    <button type="button" class="icon-button" id="contextRemove">Remove from library</button>
  </div>
  <section class="lifecycle" id="lifecycle" role="status" aria-live="polite" hidden><div><small id="lifecycleKind"></small><h2 id="lifecycleGame"></h2><p id="lifecycleMessage"></p></div></section>
  <section class="bigbox" id="bigBox" hidden tabindex="0">
    <video class="bigbox-startup-video" id="bigBoxStartupVideo" muted loop playsinline hidden></video>
    <div class="bigbox-head"><strong>OpenBox</strong><input class="hybrid-search" id="bigBoxHybridSearch" type="search" placeholder="Search this platform" hidden><span class="bigbox-status" id="bigBoxStatus"></span><span id="bigBoxCounter"></span></div>
    <div class="bigbox-stage" id="bigBoxStage"></div>
    <div class="bigbox-foot"><span>← → Browse</span><span>Enter / A Play</span><span>P Pause</span><span>M Filters</span><span>F / X Favorite</span><span>Esc / B Back</span></div>
    <div class="bigbox-menu" id="bigBoxMenu" hidden>
      <div class="bigbox-menu-panel">
        <h2>Filter and Sort</h2>
        <label class="field"><span>Show</span><select id="bigBoxFilter"><option value="all">Current library view</option><option value="installed">Installed games</option><option value="owned">All owned games</option><option value="favorites">Favorites</option><option value="playing">In progress</option><option value="completed">Completed</option></select></label>
        <label class="field"><span>Sort</span><select id="bigBoxSort"><option value="title">Title</option><option value="rating">Rating</option><option value="recent">Recently played</option><option value="recent_activity">Recent activity</option><option value="playtime">Play time</option><option value="random">Shuffle</option></select></label>
        <label class="field"><span>Quick preset</span><select id="bigBoxQuickPreset"><option value="">None</option></select></label>
        <label class="field"><span>Achievements</span><select id="bigBoxRaFilter"><option value="all">All games</option><option value="matched">RetroAchievements matched</option><option value="unmatched">Not matched</option></select></label>
        <div class="dialog-actions"><button class="icon-button" id="closeBigBoxMenu" type="button">Cancel</button><button class="primary" id="applyBigBoxMenu" type="button">Apply</button></div>
      </div>
    </div>
    <div class="screensaver" id="screenSaver" hidden><video id="screenSaverVideo" muted autoplay loop></video><div class="screensaver-copy"><div class="hero-kicker" id="screenSaverPlatform"></div><h2 id="screenSaverTitle"></h2><p>Press Play to launch, or any other control to return.</p></div></div>
    <div class="bigbox-pause" id="bigBoxPause" hidden><div class="bigbox-pause-panel"><h2 id="bigBoxPauseTitle">Running game</h2><p class="description" id="bigBoxPauseMeta"></p><div class="extras" id="bigBoxPauseActions"></div></div></div>
  </section>

  <script type="module" src="/static/app.js"></script>
</body>
</html>