PLWL/renderer/index.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>
      </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>
      </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">

          <label class="field-label" data-t="config.wine"></label>
          <span id="gc-wine"></span>

          <label class="field-label" data-t="config.prefix"></label>
          <span id="gc-prefix"></span>
          <p class="subtitle" id="gc-prefix-lock-hint" data-t="config.prefixLockedHint" style="display:none"></p>

          <label class="field-label" data-t="config.env"></label>
          <textarea id="gc-env" rows="3" data-ph="config.envHint"></textarea>

          <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>

          <div class="form-actions">
            <button class="button danger" id="btn-gc-clear-playtime" data-t="config.clearPlaytime"></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">
          <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>