Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Stacklogix — Requirement Collection & Consulting</title> | |
| <meta name="description" | |
| content="Stacklogix consultant chatbot — we gather your requirements and explain how we'll address your request or problem." /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet" /> | |
| <link rel="stylesheet" href="/static/style.css" /> | |
| </head> | |
| <body> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="logo"> | |
| <span class="logo-icon">◆</span> | |
| <span class="logo-text">Stacklogix</span> | |
| </div> | |
| <button class="btn-new-chat" id="btnNewChat" title="New conversation"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="12" y1="5" x2="12" y2="19" /> | |
| <line x1="5" y1="12" x2="19" y2="12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="session-list" id="sessionList"> | |
| <!-- Sessions populated by JS --> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <div class="sidebar-footer-text">Stacklogix</div> | |
| </div> | |
| </aside> | |
| <!-- Main chat area --> | |
| <main class="main-area"> | |
| <!-- Top bar --> | |
| <header class="topbar"> | |
| <button class="btn-toggle-sidebar" id="btnToggleSidebar" title="Toggle sidebar"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="3" y1="6" x2="21" y2="6" /> | |
| <line x1="3" y1="12" x2="21" y2="12" /> | |
| <line x1="3" y1="18" x2="21" y2="18" /> | |
| </svg> | |
| </button> | |
| <div class="topbar-title">Stacklogix</div> | |
| </header> | |
| <!-- Messages --> | |
| <div class="messages-container" id="messagesContainer"> | |
| <div class="messages" id="messages"> | |
| <!-- Welcome --> | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <div class="welcome-icon">◆</div> | |
| <h1>Welcome to Stacklogix</h1> | |
| <p>I'm your Stacklogix consultant. Tell me what you'd like to build or what problem you're facing — I'll gather the details and explain how we'll address it.</p> | |
| <div class="welcome-suggestions"> | |
| <button class="suggestion-chip" | |
| data-msg="We want to build a chatbot for our website to answer customer questions.">Build a chatbot</button> | |
| <button class="suggestion-chip" | |
| data-msg="We need a dashboard to track sales and inventory in real time.">Build a dashboard</button> | |
| <button class="suggestion-chip" | |
| data-msg="Our inventory is moving too slowly and we're not sure why.">Inventory moving slowly</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input --> | |
| <div class="input-area"> | |
| <div class="input-wrapper"> | |
| <textarea id="userInput" placeholder="Describe what you need or respond to my questions…" rows="1" | |
| autofocus></textarea> | |
| <button class="btn-send" id="btnSend" title="Send message" disabled> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="22" y1="2" x2="11" y2="13" /> | |
| <polygon points="22 2 15 22 11 13 2 9 22 2" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="input-hint">Press Enter to send · Shift+Enter for new line</div> | |
| </div> | |
| </main> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> |