implement whole frontend

app/static/css/index.css

+body {
+    background-image: url('../background/space-station.jpg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    color: white;
+}
+
+img {
+    width: 30%;
+    margin-top: 75px;
+    margin-left: 2.5%;
+}
+
+input {
+    margin-top: 2px;
+    width: 72.5%;
+    float: left;
+    height: 40px;
+    border-style: solid;
+    border-color: white;
+}
+
+button {
+    width: 25%;
+    float: right;
+    height: 50px;
+    border-style: solid;
+    border-color: white;
+}
+
+.chat-container {
+    margin-top: 75px;
+    margin-right: 22.5%;
+    width: 40%;
+    float:right;
+    text-align: center;
+    height: 750px;
+    /* border-style: solid;
+    border-color: white; */
+}
+
+#chat {
+    height: 680px;
+    position: relative;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    overflow-y:scroll;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+}
+
+#chat::-webkit-scrollbar {
+    display: none; /* Webkit-based browsers */
+}
+
+.input {
+    background-color: white;
+    height: 50px;
+    border-style: solid;
+    border-color:cornflowerblue;
+}
+
+.message-user {
+    background-color: white;
+    color: black;
+    /* width: 200px; */
+    align-self: flex-end;
+    float: right;
+    clear: both;
+    margin-top: 10px;
+    min-width: 10%;
+    max-width: 80%;
+    border-radius: 25px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.message-bot {
+    background-color: gray;
+    color: black;
+    /* width: 200px; */
+    align-self: flex-start;
+    float: left;
+    clear: both;
+    margin-top: 10px;
+    min-width: 10%;
+    max-width: 80%;
+    border-radius: 10px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.feedback {
+    top: 0;
+    right: 0;
+    position: fixed;
+    padding-right: 150px;
+    width: 500px;
+    padding-top: 50px;
+}
+
+.tipps {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    margin-bottom: 150px;
+    margin-left: 150px;
+    text-align: center;
+    width: 20%;
+    font-size: large;
+    /* background-color: white;
+    color: black; */
+}

app/static/javascript/frontend.js

 function sendMessage() {
     message = document.getElementById("inputField").value;
-    message = "message=" + message;
-    fetch("http://localhost:5000/sendmessage", {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/x-www-form-urlencoded"
-        },
-        body: message
-    })
-    .then((response) => response.json())
-    .then((json) => {
-        console.log(json[0].content);
-    });
-};
+    if(message !== "") {
+
+        let newDiv = document.createElement("div");
+        newDiv.className = "message-user";
+
+        let newP = document.createElement("p");
+        newP.textContent = message;
+        newDiv.appendChild(newP);
+        let chat = document.getElementById("chat");
+        chat.insertBefore(newDiv, chat.firstChild);
+        // document.getElementById("chat").appendChild(newDiv);
+
+        message = "message=" + message;
\ No newline at end of file
+        document.getElementById('inputField').value = "";
+        fetch("http://localhost:5000/sendmessage", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            },
+            body: message
+        })
+        .then((response) => response.json())
+        .then((json) => {
+            let botMessage = json[0].content;
+            let newDiv = document.createElement("div");
+            newDiv.className = "message-bot";
+
+            let newP = document.createElement("p");
+            newP.textContent = botMessage;
+            newDiv.appendChild(newP);
+            let chat = document.getElementById("chat");
+            chat.insertBefore(newDiv, chat.firstChild);
+
+            // document.getElementById("chat").appendChild(newDiv);
+        });
+    }
+};
+
+function checkKeyInput(event) {
+    if(event.key === 'Enter')
+        sendMessage();
+}
\ No newline at end of file

app/static/robo_images/DALL·E 2024-06-16 17.58.54 - A cartoony space-robot standing on the surface of a colorful alien planet. The robot has a playful design with exaggerated features, bright colors, an.webp

-<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.
-RequestId:39e44793-801e-005d-7d06-c06cb1000000
-Time:2024-06-16T15:58:54.2644863Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:48:46 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:54 GMT]</AuthenticationErrorDetail></Error>
\ No newline at end of file

app/static/robo_images/DALL·E 2024-06-16 17.58.55 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp

-<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.
-RequestId:b15016f6-f01e-003a-0606-c0ff9d000000
-Time:2024-06-16T15:58:55.6576196Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:49:07 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:55 GMT]</AuthenticationErrorDetail></Error>
\ No newline at end of file

app/static/robo_images/DALL·E 2024-06-16 17.58.56 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp

-<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.
-RequestId:3eb0871f-e01e-004b-7506-c0269f000000
-Time:2024-06-16T15:58:56.7098453Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:49:48 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:56 GMT]</AuthenticationErrorDetail></Error>
\ No newline at end of file

app/templates/index.html

@@ -4,14 +4,33 @@
         <title>Space Station Chatbot</title>
         <meta charset="UTF-8">
         <link rel="icon" type="image/x-icon" href="static/icons/favicon.ico">
+        <link rel="stylesheet" href="static/css/index.css">
     </head>
 
     <body>
-        <h1>Welcome to the Space Station Chatbot!</h1>
-        <div>
-            <input type="text" id="inputField" placeholder="Gib etwas ein">
-            <button onclick="sendMessage()">CLICK ME</button>
+        <!-- <h1 style="text-align: center;">Welcome to the Space Station Chatbot!</h1> -->
+        <img src="static/robo_images/dall-e-image-happy-cropped2.png" alt="Robo Image">
+        <div class="tipps">
+            <h2>Some smaller tipps to start:</h2>
+            <ul>
+                <li>say hi to the bot</li>
+                <li>ask the bot what it is</li>
+                <li>ask the bot for help or recommendations</li>
+            </ul>
         </div>
+        <div class="chat-container">
+            <div id="chat">
+            </div>
+            <div class="input">
+                <input type="text" id="inputField" placeholder="Talk to the chatbot..."  onkeypress="checkKeyInput(event)">
+                <button onclick="sendMessage()">Send</button>
+            </div>
+        </div>
+
+        <div class="feedback">
+            <button>Feedback</button>
+        </div>
+        
         <script src="static/javascript/frontend.js" type="application/javascript"></script>
     </body>
 </html>
\ No newline at end of file