Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <title>AskRoss AI Chatbot Demo</title> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <div class="demo-page"> | |
| <div class="container"> | |
| <h1>AskRoss AI Chatbot Demo</h1> | |
| <p>This is a live demo of an AI-powered assistant trained on your website and product content. It helps customers answer questions, explore offerings, and take action.</p> | |
| <div class="badge">Live Demo</div> | |
| <div class="steps"> | |
| <h3>How to test:</h3> | |
| <ol> | |
| <li>Open the chat widget in the bottom-right.</li> | |
| <li>Click a suggested question or type your own.</li> | |
| <li>Get fast, concise, and actionable answers.</li> | |
| </ol> | |
| </div> | |
| <p style="margin-top: 16px;">Tip: Ask about mortgage options, documents, timelines, or next steps.</p> | |
| </div> | |
| </div> | |
| <!-- ✅ FLOATING LAUNCHER --> | |
| <div id="askross-launcher" class="launcher" aria-label="Open chat"> | |
| <div class="launcher-content"> | |
| <span class="launcher-text">Have a mortgage question?</span> | |
| <button id="open-chat" class="fab-button">💬</button> | |
| </div> | |
| </div> | |
| <!-- ❌ REMOVE "open" CLASS (IMPORTANT FIX) --> | |
| <div id="chatbot-container" class="chatbot-container closed"> | |
| <!-- ✅ HEADER (MATCHES CSS) --> | |
| <div class="chat-header"> | |
| <div class="chat-header-left"> | |
| <div class="chat-header-title">AskRoss Assistant</div> | |
| <div class="chat-status">Online</div> | |
| </div> | |
| <!-- ✅ FIXED CLOSE BUTTON --> | |
| <div id="close-chat" class="close-btn">✕</div> | |
| </div> | |
| <!-- ✅ CHAT AREA --> | |
| <div id="chat-messages" class="chat-messages"></div> | |
| <!-- ✅ TYPING --> | |
| <div id="typing-indicator" class="typing-indicator hidden"> | |
| Ross is typing... | |
| </div> | |
| <button id="scroll-bottom" class="scroll-bottom hidden" title="Scroll to latest">⤵</button> | |
| <!-- ✅ INPUT --> | |
| <form id="chat-form" class="chat-form"> | |
| <input | |
| id="user-input" | |
| type="text" | |
| name="message" | |
| placeholder="Ask about mortgages..." | |
| autocomplete="off" | |
| required | |
| /> | |
| <button type="submit" class="send">Send</button> | |
| </form> | |
| </div> | |
| <!-- Libraries for markdown rendering and sanitization --> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.4/dist/purify.min.js"></script> | |
| <!-- Script --> | |
| <script src="/static/chatbot.js"></script> | |
| </body> | |
| </html> |