Fix linting issues in header.html (#3720)

Co-authored-by: DonnieBLT <128622481+DonnieBLT@users.noreply.github.com>

Author: rinkitadhana

entrypoint.sh

@@ -31,26 +31,37 @@
     .chatbot {
         display: none;
         position: fixed;
-        bottom: 7%;
+        bottom: 3%;
         right: 1%;
         max-width: 400px;
         width: 100%;
         background-color: white;
         border-radius: 12px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-        height: 450px;
-        /* Fixed height */
+        height: 500px;
+        
+        @media (max-width: 768px) {
+            right: 50%;
+            transform: translateX(50%);
+            max-width: 95%;
+        }
+        
     }
 
     .chat-icon {
         position: fixed;
-        bottom: 4%;
-        right: 4%;
+        bottom: 3%;
+        right: 2%;
         background-color: rgb(209, 16, 16);
+        transition: opacity 0.2s;
+        &:hover {
+            opacity: 0.8;
+        }
         /* Red color */
         border-radius: 50%;
-        width: 50px;
-        height: 50px;
+        padding: 10px;
+        width: 55px;
+        height: 55px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -68,25 +79,25 @@
     }
 
     .chat-log {
-        max-height: 320px;
+        max-height: 295px;
         /* Adjusted height */
         overflow-y: auto;
-        height: 320px;
+        height: 295px;
         /* Fixed height */
     }
 
     .loading {
         display: none;
-        position: fixed;
+        {% comment %} position: fixed;
         bottom: 100px;
-        right: 10.5%;
+right: 10.5%;{% endcomment %}
         justify-content: center;
         align-items: center;
-        padding: 10px;
+        font-size: 2xl;
+        padding: 10px; 
         background-color: #ffffffe6;
         /* Semi-transparent background */
-        border-radius: 12px;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+       border-radius: 8px;
     }
 
     .chat-Zindex {
@@ -393,36 +404,40 @@
     <div id="chatbot" class="chatbot">
         <div class="chat-header flex justify-between items-center">
             <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
-            <button id="closeChatbot" class="text-white text-2xl">×</button>
+            <button id="closeChatbot" class="text-white text-2xl">x</button>
         </div>
         <div class="p-4">
             <div class="bg-red-100 p-3 rounded-lg mb-2 text-red-700">
-                <p class="text-base">We reply immediately</p>
+                <p class="text-base">We respond instantly!</p>
+            </div>
+            <div id="chat-log" class=" relative chat-log bg-gray-100 p-3 rounded-lg">
+                <div id="loading" class="loading absolute bottom-1 left-1">
+                    <svg class="animate-spin h-5 w-5 text-red-600"
+                         xmlns="http://www.w3.org/2000/svg"
+                         fill="none"
+                         viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                        </path>
+                    </svg>
+                    <span class="ml-2 text-gray-600">Loading...</span>
+                </div>
             </div>
-            <div id="chat-log" class="chat-log bg-gray-50 p-3 rounded-lg"></div>
-            <div class="flex" id="chat-message-input-container">
+            <div class="flex flex-row gap-4 items-center mt-4 w-full"
+                 id="chat-message-input-container">
                 <input id="chat-message-input"
                        type="text"
-                       class="flex-grow p-2 border border-gray-300 rounded-l-lg"
+                       class="w-full p-2 border-2 border-gray-300 placeholder:text-base rounded-lg"
                        placeholder="Enter your message...">
-                <button id="chat-message-submit"
-                        class="bg-red-600 text-white p-2 rounded-md ml-2">Send</button>
-                <button id="chat-message-clear"
-                        class="bg-gray-300 text-black p-2 rounded-md ml-2">Clear</button>
+                <div class="flex flex-row gap-2 items-center shrink-0">
+                    <button id="chat-message-submit"
+                            class="bg-red-600 hover:bg-red-500 text-white p-2 rounded-lg">Send</button>
+                    <button id="chat-message-clear"
+                            class="bg-gray-300 hover:bg-gray-200 text-black p-2 rounded-lg">Clear</button>
+                </div>
             </div>
         </div>
     </div>
-    <div id="loading" class="loading">
-        <svg class="animate-spin h-5 w-5 text-red-600"
-             xmlns="http://www.w3.org/2000/svg"
-             fill="none"
-             viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-            </path>
-        </svg>
-        <span class="ml-2 text-gray-600">Loading...</span>
-    </div>
     <div id="chatIcon" class="chat-icon">
         <svg class="w-10 h-10 text-white"
              aria-hidden="true"
@@ -551,13 +566,13 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
                         '/report &lt;description&gt; - Report a bug<br>' +
                         '/gsoc - Get GSoC info<br>' +
                         '/stats - View platform stats<br>'
-                    chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
-                    chatLog.scrollTop = chatLog.scrollHeight;
+                        chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
+                        chatLog.scrollTop = chatLog.scrollHeight;
                     return true;
                 case '/report':
                     if (!args) {
                         response = 'Please provide a description. Usage: /report &lt;description&gt;';
-                        chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
+                        chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
                         chatLog.scrollTop = chatLog.scrollHeight;
                         return true;
                     }
@@ -568,12 +583,12 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
                         'Explore OWASP’s GSoC participation:<br>' +
                         '- Current projects: <a href="https://owasp.org/www-community/initiatives/gsoc/gsoc2025ideas">GSoC 2025 Ideas</a><br>' +
                         'Get involved with open-source at OWASP!';
-                    chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
-                    chatLog.scrollTop = chatLog.scrollHeight;
+                        chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
+                        chatLog.scrollTop = chatLog.scrollHeight;
                     return true;
                 case '/stats':
                     response = 'Platform stats are not directly available via the bot yet. Please check the website dashboard or ask an admin for detailed statistics.';
-                    chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
+                    chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
                     chatLog.scrollTop = chatLog.scrollHeight;
                     return true;
                 default:
@@ -587,7 +602,7 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
             if (message === "") return;
 
             const escapedMessage = escapeHtml(message);
-            chatLog.innerHTML += '<div class="bg-red-100 text-red-800 p-2 rounded-lg mb-2">You: ' + escapedMessage + '</div>';
+            chatLog.innerHTML += '<div class="bg-green-300 text-black p-2 rounded-lg mb-2"> You - ' + escapedMessage + '</div>';
             loading.style.display = 'flex';
 
             // Check for slash command
@@ -618,7 +633,7 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
                 })
                 .then(data => {
                     const escapedAnswer = escapeHtml(data.answer);
-                    chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + escapedAnswer + '</div>';
+                    chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
                     chatLog.scrollTop = chatLog.scrollHeight;
                     loading.style.display = 'none';
                 })
@@ -627,7 +642,7 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
                     if (error.message === 'Rate limit exceeded') {
                         errorMessage = 'The request limit has been reached. Please try again later.';
                     }
-                    chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + errorMessage + '</div>';
+                    chatLog.innerHTML += '<div class="bg-red-300 text-black p-2 rounded-lg mb-2">Bot - ' + errorMessage + '</div>';
                     chatLog.scrollTop = chatLog.scrollHeight;
                     loading.style.display = 'none';
                 });