TaskbotAI

Sleeping

App Files Files Community

Advay-Singh commited on Apr 29

Commit

8b51a78

verified ·

1 Parent(s): 63ddb39

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +298 -0

templates/index.html CHANGED Viewed

	@@ -0,0 +1,298 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskBot v1</title>
+    <script src="https://kit.fontawesome.com/cda0e70b18.js" crossorigin="anonymous"></script>
+    <link rel="Icon" href="TaskBot logo.png">
+</head>
+<style>
+    body {
+        background-color: #2f2f2f;
+        font-family: Arial, sans-serif;
+        color: white;
+        margin: 0;
+        padding: 20px;
+        }
+    nav {
+        background-color: #444;
+        padding: 5px;
+        border-radius: 5px;
+        width: 100%;
+        height: auto;
+        top: 0;
+        }
+    .sticky {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 1000;
+        }
+    .sticky2 {
+        position: absolute;
+        top: 20px;
+        right: 80px;
+        z-index: 1000;
+        }
+    /* Dropdown Styles */
+    .dropdown {
+        position: relative;
+        display: inline-block;
+        }
+    .btn {
+        background-color: transparent;
+        color: white;
+        border: none;
+        cursor: pointer;
+        }
+    .btn:hover {
+        background-color: #494949;
+        }
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        background-color: #343232;
+        border: 1px solid black;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+        }
+    .dropdown-content h3 {
+        margin: 5px 0;
+        color: white;
+        text-align: center;
+        }
+    .dropdown-content a {
+        color: blue;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        border-top: 1px solid transparent;
+        }
+    .dropdown-content a:hover {
+        background-color: #494949;
+        }
+    .dropdown:hover .dropdown-content {
+        display: block;
+        }
+     main {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: calc(100vh - 100px); /* adjust if header height changes */
+      text-align: center;
+    }
+    /* Input and Button Styles */
+    #question {
+      padding: 10px;
+      font-size: 16px;
+      border-radius: 5px;
+      border: 1px solid #ccc;
+      margin-right: 10px;
+    }
+  #userInput {
+    width: 50%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+    width: 200px;
+    color: black;
+    background-color: #fff;
+    color: white;
+  }
+  .ai,.user{
+    background-color: #444;
+    padding: 10px;
+    padding-right: 10px;
+    border-radius: 5px;
+    border: solid #ccc;
+    margin: 10px;
+    text-align: center;
+    justify-content: right;
+    width: 40%;
+    color: rgb(227, 227, 227)
+  }
+  .text1{
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    margin: 10px;
+  }
+  .text2{
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    margin: 10px;
+  }
+  .chat-input-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+}
+#sendButton {
+    margin-left: 10px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+#sendButton:hover {
+    background-color: #e0e0e0;
+}
+.inputWrapper {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 10px;
+  z-index: 1000;
+  align-items: center;
+}
+.inputWrapper input {
+  width: 300px;
+  padding: 10px;
+}
+.inputWrapper button {
+  font-size: 18px;
+  padding: 10px 20px;
+  border-radius: 50px;
+  cursor: pointer;
+}
+#welcomeMessage{
+  text-align: center;
+  margin-top: 20%;
+}
+</style>
+<body>
+    <header>
+        <h2>TaskBot v1</h2>
+        <hr color="white">
+        <div class="sticky">
+            <div class="dropdown">
+              <button class="btn">
+                <i class="fa-solid fa-bars fa-2xl"></i>
+              </button>
+              <div class="dropdown-content">
+                <h3><u>Menu</u></h3>
+                <hr>
+                <a href="https://taskbot-ai-astrumix.netlify.app/">Home</a>
+                <a href="https://taskbot-suggest.netlify.app/">Suggest</a>
+                <a href="https://taskbot-complain.netlify.app/">Complain</a>
+                <a href="https://taskbot-ai-astrumix.netlify.app#contact">Contact</a>
+                <a href="https://taskbot-ai-astrumix.netlify.app#versions">More Versions</a>
+                <a href="">Explore(Available soon)</a>
+              </div>
+            </div>
+          </div>
+          <div class="sticky2">
+            <div class="dropdown">
+              <button class="btn">
+                <i class="fa-solid fa-exclamation fa-2xl"></i>
+              </button>
+              <div class="dropdown-content">
+                <h3><u>Warnings</u></h3>
+                <hr>
+                <p>1. Don't share personal info, chats may be reviewed and reused to train our models.</p>
+                <hr>
+                <p>2. TaskBot can make mistakes, double check the answers for more accuracy.</p>
+              </div>
+            </div>
+          </div>
+        </header>
+        <H1 id="welcomeMessage">Hello 👋, what can I help with?</H1>
+        <div id="chatArea">
+          <div class="text1">
+              <div class="user" style="display: none;"></div>
+          </div>
+          <div class="text2">
+              <div class="ai" style="display: none;"></div>
+          </div>
+      </div>
+<main>
+  <div class="inputWrapper">
+    <input type="text" id="userInput" placeholder="Type your message here..." style="border-radius: 50px; color: black;"><br>
+    <button id="sendButton" onclick=answer()>&#8593</button>
+    </div>
+</main>
+<script>
+async function answer() {
+    const welcomeMessage = document.getElementById('welcomeMessage');
+    welcomeMessage.style.display = 'none'; // Hide the welcome message
+    const userInput = document.getElementById('userInput').value;
+    if (userInput.trim() === '') return;
+    // Create wrapper for text1 (User message)
+    const text1 = document.createElement('div');
+    text1.className = 'text1';
+    const userMessage = document.createElement('div');
+    userMessage.className = 'user';
+    userMessage.textContent = userInput;
+    text1.appendChild(userMessage);
+    // Append user message to the chat area
+    document.getElementById('chatArea').appendChild(text1);
+    // Clear input
+    document.getElementById('userInput').value = '';
+    const question = userInput; // Use the already retrieved value
+    // Send a POST request to the /ask route
+    const response = await fetch("/ask", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: new URLSearchParams({ question: question })
+    });
+    const data = await response.json();
+    // Create wrapper for text2 (AI response)
+    const text2 = document.createElement('div');
+    text2.className = 'text2';
+    const aiResponse = document.createElement('div');
+    aiResponse.className = 'ai';
+    if (data.answer) {
+        aiResponse.textContent = data.answer;
+    } else if (data.error) {
+        aiResponse.textContent = "Error: " + data.error;
+    }
+    text2.appendChild(aiResponse);
+    // Append AI response to the chat area
+    document.getElementById('chatArea').appendChild(text2);
+}
+</script>
+</script>
+</script>
+</body>
+</html>