cyberbuddies_AI / index.html
EbubeJohnEnyi's picture
Update index.html
bfea49d verified
raw
history blame contribute delete
No virus
3.65 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Chatbot</title>
</head>
<body>
<div class="chat-container">
<div class="logo-container">
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="69" viewBox="0 0 69 69" fill="none">
<circle cx="34.5" cy="34.5" r="34.5" fill="#00255A"/>
<path d="M20.7 55.9667H18.7V60.128L21.9494 57.5285L20.7 55.9667ZM31.0536 50.2451C31.9161 49.5551 32.0559 48.2965 31.3659 47.434C30.6759 46.5715 29.4173 46.4316 28.5548 47.1217L31.0536 50.2451ZM50.0125 32.2959V22.2667H46.0125V32.2959H50.0125ZM38.0125 10.2667H30.7V14.2667H38.0125V10.2667ZM18.7 22.2667V55.9667H22.7V22.2667H18.7ZM21.9494 57.5285L31.0536 50.2451L28.5548 47.1217L19.4506 54.405L21.9494 57.5285ZM30.7 10.2667C24.0726 10.2667 18.7 15.6393 18.7 22.2667H22.7C22.7 17.8484 26.2817 14.2667 30.7 14.2667V10.2667ZM50.0125 22.2667C50.0125 15.6393 44.6399 10.2667 38.0125 10.2667V14.2667C42.4308 14.2667 46.0125 17.8484 46.0125 22.2667H50.0125Z" fill="white"/>
</svg>
<p>How can I help you today?</p>
</div>
<div class="chatBot_area">
<div class="displayArea">
{% if response %}
{% for key, value in response.items() %}
<p>{{ key }}: {{ value | safe }}</p>
{% endfor %}
{% else %}
<p>Ask Havens AI: </p>
{% endif %}
</div>
<form action="/ask" method="post" accept-charset="UTF-8" style="display: flex; align-items: center;">
<label></label>
<input placeholder="Ask Havens AI a question" name="user_input"></input>
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 33 32" fill="none">
<g clip-path="url(#clip0_1022_20536)">
<rect x="0.5" width="32" height="32" rx="8" fill="#E7EBF2"/>
<path d="M16.9118 8.54566C16.6812 8.31538 16.3687 8.18604 16.0428 8.18604C15.7169 8.18604 15.4044 8.31538 15.1738 8.54566L10.5347 13.1824C10.304 13.413 10.1744 13.7259 10.1744 14.0521C10.1744 14.3784 10.304 14.6912 10.5347 14.9219C10.7654 15.1526 11.0782 15.2822 11.4045 15.2822C11.7307 15.2822 12.0436 15.1526 12.2743 14.9219L14.8131 12.3839V21.8401C14.8131 22.1662 14.9427 22.479 15.1733 22.7096C15.4039 22.9402 15.7167 23.0698 16.0428 23.0698C16.3689 23.0698 16.6817 22.9402 16.9123 22.7096C17.1429 22.479 17.2725 22.1662 17.2725 21.8401V12.3839L19.8105 14.9219C19.9248 15.0362 20.0604 15.1268 20.2096 15.1886C20.3588 15.2504 20.5188 15.2822 20.6803 15.2822C20.8419 15.2822 21.0018 15.2504 21.1511 15.1886C21.3003 15.1268 21.4359 15.0362 21.5501 14.9219C21.6643 14.8077 21.7549 14.6721 21.8168 14.5229C21.8786 14.3736 21.9104 14.2137 21.9104 14.0521C21.9104 13.8906 21.8786 13.7307 21.8168 13.5814C21.7549 13.4322 21.6643 13.2966 21.5501 13.1824L16.9118 8.54566Z" fill="#A0A3AA"/>
</g>
<defs>
<clipPath id="clip0_1022_20536">
<rect x="0.5" width="32" height="32" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
</form>
<p>Havens AI can make mistakes. Make sure you inspect before paying.</p>
</div>
</div>
</body>
</html>