Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>Promptly — Web Client</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| <link rel="manifest" href="manifest.json" /> | |
| <meta name="theme-color" content="#0b1220" /> | |
| </head> | |
| <body> | |
| <div id="root" class="theme-dark"> | |
| <!-- Top bar --> | |
| <header class="topbar glass"> | |
| <div class="brand"> | |
| <div class="logo">⚡</div> | |
| <div class="titles"> | |
| <div class="title">Promptly</div> | |
| <div class="subtitle">https://promptly-az40.onrender.com</div> | |
| </div> | |
| </div> | |
| <div class="actions"> | |
| <button id="themeToggle" class="icon-btn" title="Toggle theme">🌗</button> | |
| <div id="status" class="status disconnected">Disconnected</div> | |
| </div> | |
| </header> | |
| <!-- Login overlay --> | |
| <div id="loginOverlay" class="overlay"> | |
| <div class="login-card glass"> | |
| <div class="login-header"> | |
| <div class="login-logo">⚡</div> | |
| <h2>Welcome to Promptly</h2> | |
| <p class="muted">Sign in to connect to the realtime chat</p> | |
| </div> | |
| <form id="loginForm" class="login-form" autocomplete="off"> | |
| <label class="field"> | |
| <span>Username</span> | |
| <input id="loginUsername" type="text" required maxlength="32" placeholder="Your username" /> | |
| </label> | |
| <label class="field"> | |
| <span>Password</span> | |
| <input id="loginPassword" type="password" required maxlength="64" placeholder="Your password" /> | |
| </label> | |
| <div class="login-row"> | |
| <button id="loginSubmit" class="btn primary" type="submit">Sign in</button> | |
| <button id="loginGuest" class="btn ghost" type="button">Continue as Guest</button> | |
| </div> | |
| <div class="login-foot muted">Secure connection over WSS · Supports Android file picker · No typed /send</div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <main class="main"> | |
| <aside class="side glass"> | |
| <div class="panel"> | |
| <div class="panel-head"> | |
| <div> | |
| <div class="mono small">WS URI:</div> | |
| <div class="mono">https://promptly-az40.onrender.com</div> | |
| </div> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="quick-title">Quick</div> | |
| <div class="muted small">Use the file button to upload. Files appear inline & downloadable.</div> | |
| <div class="rows"> | |
| <div class="row"><strong>Mode:</strong> <span id="modeText">Handshake</span></div> | |
| <div class="row"><strong>Users:</strong> <span id="onlineCount">0</span></div> | |
| </div> | |
| <div class="controls-vertical"> | |
| <button id="connectBtn" class="btn">Connect</button> | |
| <button id="disconnectBtn" class="btn ghost" disabled>Disconnect</button> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <section class="chat glass"> | |
| <div id="messages" class="messages" aria-live="polite"></div> | |
| <div class="composer"> | |
| <input id="input" class="input" placeholder="Type a message or use file button..." /> | |
| <input id="filePicker" type="file" style="display:none" /> | |
| <button id="fileBtn" class="icon-btn" title="Upload file">📁</button> | |
| <button id="sendBtn" class="btn primary">Send</button> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer glass muted"> | |
| Client UI — glass login → chat. File upload via picker. Images preview + download. Dark / Light. | |
| </footer> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |