Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Arqonz AI Chatbot</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f9f9f9; | |
| font-family: 'Segoe UI', sans-serif; | |
| } | |
| .chat-container { | |
| max-width: 600px; | |
| margin: 40px auto; | |
| background: #fff; | |
| border-radius: 12px; | |
| box-shadow: 0 0 12px rgba(0, 0, 0, 0.08); | |
| display: flex; | |
| flex-direction: column; | |
| height: 80vh; | |
| } | |
| .chat-header { | |
| background: #111; | |
| color: #fff; | |
| padding: 16px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| border-top-left-radius: 12px; | |
| border-top-right-radius: 12px; | |
| } | |
| .chat-box { | |
| flex: 1; | |
| padding: 16px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .bot-message, | |
| .user-message { | |
| max-width: 80%; | |
| margin: 8px 0; | |
| padding: 10px 14px; | |
| border-radius: 18px; | |
| font-size: 15px; | |
| } | |
| .bot-message { | |
| background-color: #e0e0e0; | |
| align-self: flex-start; | |
| } | |
| .user-message { | |
| background-color: #007bff; | |
| color: #fff; | |
| align-self: flex-end; | |
| } | |
| .chat-input-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px; | |
| border-top: 1px solid #eee; | |
| } | |
| .chat-input-area input[type="text"] { | |
| flex: 1; | |
| padding: 10px 14px; | |
| border-radius: 20px; | |
| border: 1px solid #ccc; | |
| font-size: 14px; | |
| } | |
| .chat-input-area button { | |
| background: none; | |
| border: none; | |
| font-size: 20px; | |
| cursor: pointer; | |
| color: #0e7bee; | |
| } | |
| @media (max-width: 768px) { | |
| .chat-container { | |
| margin: 20px; | |
| height: 85vh; | |
| } | |
| .chat-input-area input[type="text"] { | |
| font-size: 16px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom px-3"> | |
| <div class="container-fluid"> | |
| <a class="navbar-brand" href="https://arqonz.com/"> | |
| <img src="https://www.arqonz.com/static/images/Logo-Arq.png" alt="Arqonz" height="45"> | |
| </a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> | |
| <li class="nav-item"> | |
| <a class="nav-link fw-semibold" href="https://arqonz.com/">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link fw-semibold" href="https://arqonz.com/calculator/tile-calculator#">Tools</a> | |
| </li> | |
| </ul> | |
| <div class="d-flex gap-2"> | |
| <a href="https://arqonz.com/account/sign-in" class="btn btn-outline-secondary btn-sm">Login</a> | |
| <a href="https://arqonz.com/account/register" class="btn btn-sm text-white" style="background-color: #2cb494; border-color: #00b287;">Sign Up</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="container px-3"> | |
| <div class="chat-container"> | |
| <div class="chat-header">AI Chatbot</div> | |
| <div class="chat-box" id="chatBox"> | |
| <div class="bot-message">Hi! How can I help you?</div> | |
| </div> | |
| <!-- Form handles enter key + button click --> | |
| <form class="chat-input-area px-3 pb-3" onsubmit="sendMessage(); return false;"> | |
| <button type="button" id="micBtn">🎙️</button> | |
| <input type="text" id="userInput" placeholder="Ask a question..." class="form-control" autocomplete="off" /> | |
| <button type="submit">➤</button> | |
| </form> | |
| </div> | |
| </main> | |
| <script defer src="script.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> | |