261 lines
11 KiB
HTML
261 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: plwl-icon:;">
|
|
<title>PLWL</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- empty on purpose: while booting the user sees just the background color -->
|
|
<loading id="loading" style="display:block"></loading>
|
|
|
|
<main id="main" style="display:none">
|
|
<sidebar>
|
|
<div class="sidebar-top">
|
|
<sidebarelement id="nav-library" class="active">
|
|
<indicator></indicator>
|
|
<button class="icon-button" data-nav="library"></button>
|
|
</sidebarelement>
|
|
<sidebarelement id="nav-prefixes">
|
|
<indicator></indicator>
|
|
<button class="icon-button" data-nav="prefixes"></button>
|
|
</sidebarelement>
|
|
<sidebarelement id="nav-wines">
|
|
<indicator></indicator>
|
|
<button class="icon-button" data-nav="wines"></button>
|
|
</sidebarelement>
|
|
<sidebarelement id="nav-settings">
|
|
<indicator></indicator>
|
|
<button class="icon-button" data-nav="settings"></button>
|
|
</sidebarelement>
|
|
<sidebarelement id="nav-lansync">
|
|
<indicator></indicator>
|
|
<button class="icon-button" data-nav="lansync"></button>
|
|
</sidebarelement>
|
|
</div>
|
|
</sidebar>
|
|
|
|
<content>
|
|
<section id="view-library" class="view active">
|
|
<div class="view-header">
|
|
<div>
|
|
<h1 data-t="library.title"></h1>
|
|
<p class="subtitle" data-t="app.subtitle"></p>
|
|
</div>
|
|
<button class="button primary" id="btn-import-top" data-t="library.import"></button>
|
|
</div>
|
|
<div id="game-list" class="game-list"></div>
|
|
<div id="library-empty" class="empty-state" style="display:none">
|
|
<p class="empty-title" data-t="library.empty"></p>
|
|
<p class="empty-hint" data-t="library.emptyHint"></p>
|
|
<button class="button primary" id="btn-import-empty" data-t="library.import"></button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-prefixes" class="view">
|
|
<div class="view-header">
|
|
<div>
|
|
<h1 data-t="prefixes.title"></h1>
|
|
<p class="subtitle" data-t="prefixes.subtitle"></p>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar">
|
|
<input id="prefix-name-input" data-ph="prefixes.namePlaceholder" type="text">
|
|
<button class="button primary" id="btn-prefix-create" data-t="prefixes.create"></button>
|
|
</div>
|
|
<div id="prefix-list" class="list"></div>
|
|
</section>
|
|
|
|
<section id="view-wines" class="view">
|
|
<div class="view-header">
|
|
<div>
|
|
<h1 data-t="wines.title"></h1>
|
|
<p class="subtitle" data-t="wines.subtitle"></p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="button" id="btn-wines-import" data-t="wines.import"></button>
|
|
<button class="button" id="btn-wines-rescan" data-t="wines.rescan"></button>
|
|
</div>
|
|
</div>
|
|
<div id="wine-list" class="list"></div>
|
|
</section>
|
|
|
|
<section id="view-settings" class="view">
|
|
<div class="view-header">
|
|
<div>
|
|
<h1 data-t="settings.title"></h1>
|
|
</div>
|
|
</div>
|
|
<div class="form-card">
|
|
<label class="field-label" data-t="settings.language"></label>
|
|
<span id="set-language"></span>
|
|
<label class="field-label" data-t="settings.defaultWine"></label>
|
|
<span id="set-wine"></span>
|
|
<label class="field-label" data-t="settings.defaultPrefix"></label>
|
|
<span id="set-prefix"></span>
|
|
<label class="check-label">
|
|
<input type="checkbox" id="set-closetotray">
|
|
<span data-t="settings.closeToTray"></span>
|
|
</label>
|
|
<div class="form-actions">
|
|
<button class="button primary" id="btn-settings-save" data-t="settings.save"></button>
|
|
<button class="button" id="btn-open-files" data-t="settings.openFiles"></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-card">
|
|
<h2 data-t="settings.hashCache"></h2>
|
|
<p class="subtitle" data-t="settings.hashCacheHint"></p>
|
|
<div class="form-actions">
|
|
<button class="button danger" id="btn-clear-hash-cache" data-t="settings.clearHashCache"></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-card">
|
|
<h2 data-t="sandbox.title"></h2>
|
|
<p class="subtitle" data-t="sandbox.hint"></p>
|
|
<label class="field-label" data-t="sandbox.status"></label>
|
|
<p class="subtitle" id="set-sandbox-status"></p>
|
|
<div class="form-actions">
|
|
<button class="button" id="btn-sandbox-check" data-t="sandbox.check"></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-lansync" class="view">
|
|
<div class="view-header">
|
|
<div>
|
|
<h1 data-t="lansync.title"></h1>
|
|
<p class="subtitle" data-t="lansync.subtitle"></p>
|
|
</div>
|
|
</div>
|
|
<div class="form-card">
|
|
<h2 data-t="lansync.thisDevice"></h2>
|
|
<label class="field-label" data-t="lansync.deviceId"></label>
|
|
<div class="code-row">
|
|
<code id="ls-device-id"></code>
|
|
<button class="button small" id="ls-reroll-id" data-t="lansync.reroll"></button>
|
|
</div>
|
|
<label class="field-label" data-t="lansync.syncCode"></label>
|
|
<div class="code-row">
|
|
<code id="ls-sync-code"></code>
|
|
<button class="button small" id="ls-reroll-code" data-t="lansync.reroll"></button>
|
|
</div>
|
|
<p class="subtitle" data-t="lansync.codeHint"></p>
|
|
</div>
|
|
<div class="form-card">
|
|
<h2 data-t="lansync.devices"></h2>
|
|
<p class="subtitle" data-t="lansync.devicesHint"></p>
|
|
<div id="ls-device-list" class="list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-gameconfig" class="view">
|
|
<div class="view-header">
|
|
<div>
|
|
<h1 id="gc-title"></h1>
|
|
<p class="subtitle" data-t="config.title"></p>
|
|
</div>
|
|
<button class="button" id="btn-gc-back" data-t="config.back"></button>
|
|
</div>
|
|
<div class="form-card">
|
|
<div class="gc-head">
|
|
<div class="gc-icon-box">
|
|
<img id="gc-icon" alt="" style="display:none">
|
|
<div id="gc-icon-placeholder" class="gc-icon-placeholder"></div>
|
|
</div>
|
|
<div class="gc-head-main">
|
|
<label class="field-label" data-t="config.name"></label>
|
|
<input type="text" id="gc-name">
|
|
</div>
|
|
</div>
|
|
<div class="icon-actions">
|
|
<button class="button" id="gc-icon-auto" data-t="config.icon.auto"></button>
|
|
<button class="button" id="gc-icon-browse" data-t="config.icon.browse"></button>
|
|
<button class="button danger" id="gc-icon-reset" data-t="config.icon.remove"></button>
|
|
</div>
|
|
|
|
<label class="field-label" data-t="config.exePath"></label>
|
|
<div class="path-row">
|
|
<input type="text" id="gc-exe">
|
|
<button class="button" id="gc-exe-browse" data-t="config.browse"></button>
|
|
</div>
|
|
|
|
<label class="field-label" data-t="config.workdir"></label>
|
|
<div class="path-row">
|
|
<input type="text" id="gc-workdir">
|
|
<button class="button" id="gc-workdir-browse" data-t="config.browse"></button>
|
|
</div>
|
|
|
|
<label class="field-label" data-t="config.args"></label>
|
|
<input type="text" id="gc-args" data-ph="config.argsHint">
|
|
|
|
<div class="win-only">
|
|
<label class="field-label" data-t="config.wine"></label>
|
|
<span id="gc-wine"></span>
|
|
</div>
|
|
|
|
<label class="field-label win-only" data-t="config.prefix"></label>
|
|
<label class="field-label linux-only" data-t="config.linuxDataRoot" style="display:none"></label>
|
|
<span id="gc-prefix"></span>
|
|
<p class="subtitle win-only" id="gc-prefix-lock-hint" data-t="config.prefixLockedHint" style="display:none"></p>
|
|
<p class="subtitle linux-only" data-t="config.linuxDataRootHint" style="display:none"></p>
|
|
<div class="linux-only" style="display:none">
|
|
<button class="button" id="btn-gc-data-folder" data-t="config.openData"></button>
|
|
</div>
|
|
|
|
<div class="linux-only" style="display:none">
|
|
<label class="field-label" data-t="config.isolation"></label>
|
|
<span id="gc-isolation"></span>
|
|
<p class="subtitle" id="gc-isolation-status"></p>
|
|
|
|
<label class="check-label">
|
|
<input type="checkbox" id="gc-force-x11">
|
|
<span data-t="config.forceX11"></span>
|
|
</label>
|
|
<p class="subtitle" data-t="config.forceX11Hint"></p>
|
|
</div>
|
|
|
|
<label class="field-label" data-t="config.env"></label>
|
|
<textarea id="gc-env" rows="3" data-ph="config.envHint"></textarea>
|
|
|
|
<div class="win-only">
|
|
<label class="check-label">
|
|
<input type="checkbox" id="gc-disable-umu">
|
|
<span data-t="config.disableUmu"></span>
|
|
</label>
|
|
<p class="subtitle" data-t="config.disableUmuHint"></p>
|
|
|
|
<label class="field-label" data-t="config.dllOverrides"></label>
|
|
<div id="gc-overrides" class="overrides"></div>
|
|
<button class="button" id="gc-override-add" data-t="config.overrides.add"></button>
|
|
<p class="subtitle" data-t="config.overrides.hint"></p>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button class="button danger" id="btn-gc-clear-playtime" data-t="config.clearPlaytime"></button>
|
|
<button class="button" id="btn-gc-logs" data-t="config.viewLogs"></button>
|
|
<button class="button" id="btn-gc-shortcut" data-t="config.shortcut"></button>
|
|
<button class="button primary" id="btn-gc-save" data-t="config.save"></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-card win-only">
|
|
<h2 data-t="tools.title"></h2>
|
|
<p class="subtitle" data-t="tools.subtitle"></p>
|
|
<div class="tools-grid" id="gc-tools"></div>
|
|
<div class="path-row">
|
|
<input type="text" id="gc-custom-tool" data-ph="tools.customPlaceholder">
|
|
<button class="button" id="gc-tool-run" data-t="tools.run"></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</content>
|
|
</main>
|
|
|
|
<div id="modal-overlay" class="modal-overlay" style="display:none">
|
|
<div id="modal" class="modal"></div>
|
|
</div>
|
|
<div id="toasts" class="toasts"></div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|