Update index.html

index.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
     <title>ChatBot</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <style>
@@ -35,7 +34,7 @@
             padding: 10px;
             margin-bottom: 10px;
             border-radius: 10px;
-            align-self: flex-start;
+            align-self: flex-end;
             max-width: 70%;
             word-wrap: break-word;
             margin-left: 0px;
@@ -44,6 +43,7 @@
             font-size: 16px;
             letter-spacing: 0.5px;
             line-height: 1.6;
+            background-color: #4CAF50;
         }
 
         .ai-response {
@@ -59,6 +59,7 @@
             letter-spacing: 0.5px;
             line-height: 1.5;
             margin-right: 0px;
+            background-color: #333;
         }
 
         #ic {
@@ -74,11 +75,6 @@
             border-radius: 10px;
         }
 
-        #idk,
-        #idk1 {
-            background-color: #333;
-        }
-
         #user-input {
             background-color: #1b1b1b;
         }
@@ -89,11 +85,6 @@
                 min-width: 95%;
                 max-width: 95%;
             }
-
-            #chat-messages img {
-                min-width: 80%;
-                width: 80%;
-            }
         }
 
         #chat-messages img {
@@ -132,54 +123,53 @@
 
         * Bildgenerierung ist jetzt verfügbar :)
 
-        HINWEIS: Du wirst gebannt, wenn du versuchst, das AI-Verhalten zu manipulieren`)
-        
+        HINWEIS: Du wirst gebannt, wenn du versuchst, das AI-Verhalten zu manipulieren`);
+
         var socket = io.connect('https://apix-30ox.onrender.com', {
-            reconnection: true, // Verbindung wiederherstellen aktivieren
-            reconnectionAttempts: Infinity, // Unbegrenzte Versuche zur Wiederverbindung
-            reconnectionDelay: 1000, // Start mit 1 Sekunde Verzögerung
-            reconnectionDelayMax: 5000, // Maximale Verzögerung zwischen Wiederverbindungen
-            randomizationFactor: 0.5 // Zufallsfaktor der Wiederverzögerung um 50%
+            reconnection: true, 
+            reconnectionAttempts: Infinity, 
+            reconnectionDelay: 1000, 
+            reconnectionDelayMax: 5000, 
+            randomizationFactor: 0.5 
         });
 
         var messages = document.getElementById('chat-messages');
-        let user = localStorage.getItem("userName")
-        console.log(user)
+        let user = localStorage.getItem('userName');
         
         if (user == null) {
             while (true) {
                 user = prompt('Erstelle deinen Benutzernamen');
                 if (user != null && user !== '' && user !== undefined) {
                     let upperCaseUser = user.toUpperCase();
-                    if (!upperCaseUser.includes("html")) {
-                        localStorage.setItem("userName", upperCaseUser);
+                    if (!upperCaseUser.includes('HTML')) {
+                        localStorage.setItem('userName', upperCaseUser);
                         break;
                     } else {
-                        alert("Dieser Name ist nicht verfügbar. Bitte wähle einen anderen Benutzernamen.");
+                        alert('Dieser Name ist nicht verfügbar. Bitte wähle einen anderen Benutzernamen.');
                     }
                 }
             }
         }
 
-        console.log(user)
+        console.log(user);
         var userInput = document.getElementById('user-input');
         
         socket.on('user_count', function(data) {
             var onlineUsersCount = data.count;
-            document.getElementById('userCount').innerText = `Online Benutzer: ${onlineUsersCount}`    
+            document.getElementById('userCount').innerText = `Online Benutzer: ${onlineUsersCount}`;
         });
 
         function sendMessage() {
             document.getElementById('btn').disabled = true;
             setTimeout(function() {
                 document.getElementById('btn').disabled = false;
-            }, 7000); // 7000 Millisekunden = 7 Sekunden
+            }, 7000);
             var message = userInput.value;
             if (message.length > 1200) {
-                alert('Nachrichtenlänge überschreitet 1200 Zeichen!!');
+                alert('Nachrichtenlänge überschreitet 1200 Zeichen!');
             } else {
                 if (user == ',,,,,,, ' || user == ',,,,, ') {
-                    alert('Du wurdest vorübergehend gebannt')
+                    alert('Du wurdest vorübergehend gebannt');
                 } else {
                     var data = {
                         user: user,
@@ -191,7 +181,7 @@
             }
         }
 
-        userInput.addEventListener("keypress", function(event) {
+        userInput.addEventListener('keypress', function(event) {
             if (event.keyCode === 13) { 
                 if (!document.getElementById('btn').disabled) {
                     sendMessage();
@@ -217,14 +207,14 @@
                 var currentMessage = messages.lastChild;
                 if (data.response === 'complete') {
                     currentMessage = null;
-                    document.getElementById('btn').disabled = false
+                    document.getElementById('btn').disabled = false;
                 } else {
                     if (!currentMessage || !currentMessage.classList.contains('ai-response')) {
                         currentMessage = document.createElement('p');
                         currentMessage.classList.add('ai-response');
                         
                         var aiLabel = document.createElement('h1');
-                        aiLabel.style.color = 'skyblue'
+                        aiLabel.style.color = 'skyblue';
                         aiLabel.textContent = 'AI-ANTWORT: ';
                         
                         currentMessage.appendChild(aiLabel);
@@ -242,7 +232,7 @@
             if (data.image) {
                 var img = document.createElement('img');
                 img.src = 'data:image/jpeg;base64,' + data.image;
-                document.body.appendChild(img); // Oder zu einem bestimmten Container hinzufügen
+                document.body.appendChild(img);
             }
         });
     </script>