RealmLister/index.html at main · CodebyVision/RealmLister · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/src/styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RealmLister</title>
    <script type="module" src="/src/main.ts" defer></script>
  </head>
  <body>
    <div id="app">
      <header class="app-header" data-tauri-drag-region>
        <span class="app-title" data-tauri-drag-region>RealmLister</span>
        <div class="window-controls">
          <button type="button" id="btn-minimize" class="win-btn" title="Minimize">─</button>
          <button type="button" id="btn-close" class="win-btn win-btn-close" title="Close">✕</button>
        </div>
      </header>

      <div class="server-list-wrapper">
        <ul id="server-list" class="server-list" role="listbox"></ul>
      </div>

      <div class="status-bar">
        <span id="status-text">Status: <span id="status-value">--</span></span>
        <span id="ping-text">Ping: <span id="ping-value">--</span></span>
      </div>

      <div class="action-row">
        <button type="button" id="btn-play" class="btn btn-play" disabled>Play</button>
        <div class="action-buttons">
          <button type="button" id="btn-add" class="btn btn-icon" title="Add server">+</button>
          <button type="button" id="btn-edit" class="btn btn-icon" title="Edit server">✎</button>
          <button type="button" id="btn-remove" class="btn btn-icon" title="Remove server">−</button>
          <button type="button" id="btn-settings" class="btn btn-icon" title="Settings">⚙</button>
          <button type="button" id="btn-github" class="btn btn-icon" title="Github">↗</button>
        </div>
      </div>

      <div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
    </div>

    <!-- Add / Edit server modal -->
    <div id="server-modal" class="modal-overlay" role="dialog" aria-modal="true" hidden>
      <div class="modal">
        <h2 id="server-modal-title" class="modal-title">Add server</h2>
        <form id="server-form" class="server-form">
          <label>Name <input type="text" id="form-name" required /></label>
          <label>Realmlist host <input type="text" id="form-host" placeholder="logon.example.com" required /></label>
          <label>Port <input type="number" id="form-port" placeholder="3724" min="1" max="65535" /></label>
          <label>Account name <input type="text" id="form-account" placeholder="Optional" /></label>
          <label>Start program <input type="text" id="form-wow-exe" placeholder="Wow.exe" /></label>
          <label>WoW path
            <span class="input-with-btn">
              <input type="text" id="form-wow-path" placeholder="Use default from Settings" />
              <button type="button" id="btn-browse-wow" class="btn btn-small">…</button>
            </span>
          </label>
          <div class="form-actions">
            <button type="submit" id="btn-save-server" class="btn btn-primary">Save</button>
            <button type="button" id="btn-cancel-server" class="btn">Cancel</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Remove server confirmation modal -->
    <div id="remove-modal" class="modal-overlay" role="dialog" aria-modal="true" hidden>
      <div class="modal">
        <h2 id="remove-modal-title" class="modal-title">Remove server?</h2>
        <p id="remove-modal-message" class="modal-message"></p>
        <div class="modal-actions">
          <button type="button" id="remove-modal-cancel" class="btn">Cancel</button>
          <button type="button" id="remove-modal-confirm" class="btn btn-danger">Remove</button>
        </div>
      </div>
    </div>

    <!-- Settings modal -->
    <div id="settings-modal" class="modal-overlay" role="dialog" aria-modal="true" hidden>
      <div class="modal">
        <h2 class="modal-title">Settings</h2>
        <form id="settings-form" class="server-form">
          <label>Default WoW folder
            <span class="input-with-btn">
              <input type="text" id="settings-wow-path" placeholder="C:\Program Files\World of Warcraft" />
              <button type="button" id="btn-browse-settings" class="btn btn-small">…</button>
            </span>
          </label>
          <label>Realmlist locale
            <select id="settings-locale">
              <option value="enUS">enUS</option>
              <option value="enGB">enGB</option>
            </select>
          </label>
          <label class="checkbox-label">
            <input type="checkbox" id="settings-clear-cache" />
            Clear cache on launch
          </label>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save</button>
            <button type="button" id="btn-cancel-settings" class="btn">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>