idk how an AI could do better front end experience than me but aight.

app/website/static/script.js

@@ -1,18 +1,24 @@
-document.addEventListener("DOMContentLoaded", (event) => {
-    const response_area = document.getElementById('response-area');
-    const submit_button = document.getElementById('submit')
-    submit_button.addEventListener('click', function() {
-        var url = document.getElementById('url_box').value;
+document.addEventListener("DOMContentLoaded", () => {
+    const responseArea = document.getElementById('response-area');
+    const submitButton = document.getElementById('submit');
+    const urlForm = document.getElementById('url-form');
+    const urlBox = document.getElementById('url_box');
+
+    urlForm.addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent form from submitting the traditional way
+        const url = urlBox.value.trim();
 
         if (!url) {
-            response_area.innerText = 'Please enter a URL.';
+            responseArea.innerText = 'Please enter a URL.';
             return;
         }
-        else {
-            document.getElementById('url_box').value = "";
-        }
-        
-        // First, process the URL
+
+        // Clear the input and update UI
+        urlBox.value = "";
+        submitButton.disabled = true;
+        responseArea.innerText = 'Processing...';
+
+        // Process the URL
         fetch('/process_url', {
             method: 'POST',
             headers: {
@@ -24,57 +30,58 @@ document.addEventListener("DOMContentLoaded", (event) => {
             if (!response.ok) {
                 throw new Error('Network response was not ok');
             }
-            // Extract the text from the response body
-            return response.text(); // Use .json() if the response is JSON
+            return response.text();
         })
         .then(text => {
-            submit_button.style.display = "none";    
             if (text === "Processing started. Check /stream_output for updates.") {
-                streamOutput(response_area);
+                streamOutput(responseArea);
             } else {
-                response_area.innerText = text; // Show any other response message
-                submit_button.style.display = "flex";
+                responseArea.innerText = text;
+                submitButton.disabled = false;
             }
         })
         .catch(error => {
             console.error('Error processing URL:', error);
-            response_area.innerText = 'Error processing URL: ' + error.message;
-            submit_button.style.display = "flex";
+            responseArea.innerText = 'Error processing URL: ' + error.message;
+            submitButton.disabled = false;
         });
     });
+
+    function streamOutput(responseArea) {
+        // Fetch the streaming output
+        fetch('/stream_output')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+
+                responseArea.innerHTML = "";
+
+                function readStream() {
+                    reader.read().then(({ done, value }) => {
+                        if (done) {
+                            submitButton.disabled = false;
+                            return;
+                        }
+                        const chunk = decoder.decode(value, { stream: true });
+                        responseArea.innerHTML += chunk;
+                        responseArea.scrollTop = responseArea.scrollHeight;
+                        readStream();
+                    }).catch(error => {
+                        console.error('Error reading stream:', error);
+                        responseArea.innerText = 'Error reading stream: ' + error.message;
+                        submitButton.disabled = false;
+                    });
+                }
+
+                readStream();
+            })
+            .catch(error => {
+                console.error('Error fetching stream:', error);
+                responseArea.innerText = 'Error fetching stream: ' + error.message;
+                submitButton.disabled = false;
+            });
+    }
 });
-
-function streamOutput(response_area) {
-    // Fetch the streaming output
-    const streamResponsePromise = fetch('/stream_output');
-    response_area.innerHTML = "" 
-
-    streamResponsePromise
-        .then(response => {
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder("utf-8");
-
-            function readStream() {
-                reader.read().then(({ done, value }) => {
-                    if(done) {
-                        document.getElementById('submit').style.display = "flex";
-                        return
-                    }
-                    // Decode and process the chunk
-                    const chunk = decoder.decode(value, { stream: true });
-                    response_area.innerHTML += chunk;
-                    response_area.scrollTop = response_area.scrollHeight
-
-                    // Continue reading
-                    readStream();
-                });
-            }
-
-            // Start reading the stream
-            readStream();
-        })
-        .catch(error => {
-            console.error('Error fetching stream:', error);
-            response_area.innerText = 'Error fetching stream: ' + error.message;
-        });
-}

app/website/static/style.css

@@ -1,7 +1,5 @@
-
-
 @font-face {
-    font-family: 'nimbus_sans_d_otlight';
+    font-family: 'NimbusSansD';
     src: url('font-files/nimbus-sans-d-ot-light.woff2') format('woff2'),
          url('font-files/nimbus-sans-d-ot-light.woff') format('woff');
     font-weight: normal;
@@ -9,70 +7,102 @@
 }
 
 * {
-    font-family: 'nimbus_sans_d_otlight';
-    color: white;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'NimbusSansD', sans-serif;
+    color: #FFFFFF;
 }
 
 body {
     display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 100vw;
-    height: 100%;
-    min-height: 100vh;
-    max-height: 100vh;
-    margin: 0;
-    background-color: rgb(31, 31, 31);
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #1F1F1F;
 }
 
-body .content {
+.container {
     display: flex;
     flex-direction: column;
-    align-self: center;
-    width: 75%;
-    max-width: 65vw;
-    height: 100%;
-    min-height: 100vh;
-    max-height: 100vh;
+    width: 85vw;
+    height: 90vh;
+    background-color: #2E2E2E;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+
+.response-section {
+    flex: 1;
+    padding: 20px;
+    background-color: #1E1E1E;
+    overflow-y: auto;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.form-section {
+    padding: 15px 20px;
+    background-color: #3A3A3A;
 }
 
 #response-area {
-    display: block;
-    height: 90%;
-    min-height: 90vh;
-    text-wrap: wrap;
-    flex-wrap: wrap;
-    align-content: flex-end;
-    overflow-y: auto;
+    white-space: pre-wrap;
 }
 
-.form_box {
+#url-form {
     display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-content: space-around;
+    gap: 10px;
 }
 
 #url_box {
-    display: flex;
-    height: 5%;
-    min-height: 5vh;
-    width: 90%;
-    min-width: 80vh;
-    background-color: rgb(31, 31, 31);
+    flex: 1;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: #4A4A4A;
+    color: #FFFFFF;
+    font-size: 1rem;
+    outline: none;
+}
+
+#url_box::placeholder {
+    color: #B0B0B0;
 }
 
 #submit {
-    display: flex;
-    width: 5%;
-    min-width: 3vw;
-    background-color: rgb(49, 49, 49);
-}
-#submit:hover {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: #5A5A5A;
+    color: #FFFFFF;
+    font-size: 1rem;
     cursor: pointer;
-    background-color: rgb(31, 31, 31);
+    transition: background-color 0.3s ease;
 }
 
-input {
-    border-radius: 15px;
+#submit:hover {
+    background-color: #7A7A7A;
 }
+
+#submit:disabled {
+    background-color: #3A3A3A;
+    cursor: not-allowed;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 600px) {
+    .container {
+        height: 95vh;
+    }
+
+    #url_box {
+        font-size: 0.9rem;
+    }
+
+    #submit {
+        font-size: 0.9rem;
+        padding: 10px;
+    }
+}