OpenWebUISimpleDesktop/index.html at master · Onny2/OpenWebUISimpleDesktop · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>OpenwebuiSimpleDesktop</title>
  <link rel="stylesheet" href="styles/index.css">
</head>
<body>
<!-- PRELOADER -->
<div id="preloader" class="preloader-dark">
  <span id="preloader-text">OpenWebUISimpleDesktop</span>
</div>

<!-- Wizard overlay -->
<div id="wizard-overlay" class="dark" style="display:none;">
  <div class="wizard-theme-toggle">
    <button class="wizard-theme-btn dark active" id="darkThemeBtn" aria-label="Dark mode" title="Dark mode">🌙</button>
    <button class="wizard-theme-btn light" id="lightThemeBtn" aria-label="Light mode" title="Light mode">☀️</button>
  </div>
  <form class="wizard-inner dark" id="wizardForm" autocomplete="off" onsubmit="return false;">
    <div id="wizardStepAppName">
      <div class="wizard-label">Application name</div>
      <input class="wizard-input" id="appNameInput" maxlength="48" placeholder="e.g. MyWebUI" required autocomplete="off" autofocus>
      <button class="wizard-next" type="button" id="nextToShortcut" title="Next" disabled>Next</button>
    </div>
    <div id="wizardStepShortcut" style="display:none; text-align:center; padding: 10px;">
      <div class="wizard-label" style="margin-bottom:10px;">Keyboard Shortcut</div>
      <div style="font-weight:bold; font-size:1.2rem; margin-bottom:16px;">
        <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>
      </div>
      <div style="color:#666; font-size:0.9rem; margin-bottom:24px;">
        Use this shortcut anytime to open the modal chat window.
      </div>
      <button class="wizard-next" type="button" id="nextToApiToken" title="Next">Next</button>
    </div>
    <div id="wizardStepApiToken" style="display:none">
      <div class="wizard-label">API Token (optional)</div>
      <input class="wizard-input" id="apiTokenInput" maxlength="256" placeholder="Enter your API key here" autocomplete="off" type="password">
      <div style="font-size:0.85rem; color:#b33; margin-top:8px; margin-bottom:14px;">
        <strong>Note:</strong> Get your API key from <em>Settings (non-admin) / Profile / API Key</em> in the OpenWebUI interface.<br>
        If you don't provide it, shortcuts will not work.
      </div>
      <button class="wizard-next" type="button" id="nextToUrl" title="Next">Next</button>
    </div>
    <div id="wizardStepAppUrl" style="display:none">
      <div class="wizard-label">Server URL</div>
      <div style="margin-bottom:10px; font-size:0.9em; color:#ccc; text-align:center; max-width:350px; margin-left:auto; margin-right:auto;">
        If you don’t know the server address, you can use the “Scan network” button to automatically search your local network for running OpenWebUI servers. This can help you find and select the correct server easily, but please note it may not work in all cases.
      </div>
      <input class="wizard-input" id="webuiUrlInput" maxlength="256" placeholder="e.g. http://localhost:8080/" required autocomplete="off" value="http://localhost:8080">
      <button type="button" class="wizard-next" id="scanNetworkBtn">Scan network</button>
      <div id="networkScanResult" style="margin:16px auto 0 auto; font-size:0.95em; max-width:350px; text-align:center;"></div>
      <button class="wizard-next" type="button" id="nextToPreloaderTheme" title="Next" disabled>Next</button>
    </div>
    <div id="wizardStepPreloaderTheme" style="display:none; text-align:center">
      <div class="wizard-label" style="margin-bottom:14px;">Preloader theme</div>
      <div style="display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:30px;">
        <button type="button" class="preloader-theme-btn" id="preloaderThemeDark" data-theme="dark">
          <span style="font-size:1.5em;">🌙</span><br>Dark
        </button>
        <button type="button" class="preloader-theme-btn" id="preloaderThemeLight" data-theme="light">
          <span style="font-size:1.5em;">☀️</span><br>Light
        </button>
      </div>
      <button class="wizard-next" type="button" id="nextToReady" title="Next" disabled>Next</button>
    </div>
    <div id="wizardStepReady" style="display:none;text-align:center">
      <div class="wizard-label" id="wizardReadyLabel" style="margin-bottom:18px; text-align:center; width:100%;">Ready! Start the application.</div>
      <button class="wizard-btn" id="wizardStartBtn" type="submit" style="margin:auto;display:block;">Start</button>
    </div>
    <div id="wizard-error" style="color:#b00; font-size:1rem; margin-bottom:10px; display:none;text-align:center"></div>
  </form>
</div>
<!-- App UI -->
<div class="webview-wrap" id="webviewWrap">
  <webview id="webview" src="" allowpopups></webview>
</div>
<div class="drag-overlay"></div>
<div class="window-buttons window-buttons-right">
  <button class="window-btn btn-close" title="Close"></button>
  <button class="window-btn btn-min" title="Minimize"></button>
  <button class="window-btn btn-max" title="Maximize"></button>
</div>
<div id="connection-error-message" style="display:none">
  <div class="connection-error-inner">
    <div class="connection-error-title">Connection error</div>
    <div class="connection-error-details">
      Please check your <b>config.json</b> settings.<br>
      Is the server address and port correct?<br>
      Is your server running?
    </div>
    <button id="connection-error-refresh" class="connection-error-refresh">Refresh</button>
  </div>
</div>
<script src="renderer.js"></script>
</body>
</html>