Update app.py

app.py

@@ -17,7 +17,7 @@ HTML_CONTENT = """
     <style>
         body {
             font-family: 'Poppins', sans-serif;
-            background: linear-gradient(135deg, #20B2AA 0%, #48D1CC 100%);
+            background: #008080;
             height: 100vh;
             margin: 0;
             display: flex;
@@ -28,19 +28,14 @@ HTML_CONTENT = """
         .container {
             background: rgba(255, 255, 255, 0.95);
             padding: 2.5rem;
-            border-radius: 20px;
+            border-radius: 10px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
             text-align: center;
             max-width: 450px;
             width: 100%;
-            transition: all 0.3s ease;
-        }
-        .container:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
         }
         h1 {
-            color: #20B2AA;
+            color: #008080;
             margin-bottom: 1.5rem;
             font-weight: 600;
         }
@@ -48,20 +43,20 @@ HTML_CONTENT = """
             display: none;
         }
         .btn {
-            background-color: #20B2AA;
+            background-color: #008080;
             color: white;
             padding: 12px 24px;
-            border-radius: 30px;
+            border-radius: 5px;
             cursor: pointer;
             transition: all 0.3s ease;
             display: inline-block;
             font-weight: 600;
             border: none;
             font-size: 1rem;
+            margin: 0.5rem;
         }
         .btn:hover {
-            background-color: #48D1CC;
-            transform: scale(1.05);
+            background-color: #006666;
         }
         .btn:disabled {
             background-color: #ccc;
@@ -86,7 +81,7 @@ HTML_CONTENT = """
         .progress {
             width: 0%;
             height: 100%;
-            background-color: #20B2AA;
+            background-color: #008080;
             transition: width 0.5s ease;
         }
         .loading-spinner {
@@ -94,7 +89,7 @@ HTML_CONTENT = """
             width: 40px;
             height: 40px;
             border: 4px solid #f3f3f3;
-            border-top: 4px solid #20B2AA;
+            border-top: 4px solid #008080;
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin: 20px auto;
@@ -108,14 +103,14 @@ HTML_CONTENT = """
             margin-top: 1.5rem;
         }
         .result-link {
-            color: #20B2AA;
+            color: #008080;
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
             margin-right: 10px;
         }
         .result-link:hover {
-            color: #48D1CC;
+            color: #006666;
             text-decoration: underline;
         }
         .copy-btn {
@@ -185,41 +180,38 @@ HTML_CONTENT = """
             loadingSpinner.style.display = 'block';
             uploadBtn.disabled = true;
 
-            fetch('/upload', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', '/upload', true);
+            xhr.upload.onprogress = updateProgress;
+            xhr.onload = function() {
                 loadingSpinner.style.display = 'none';
                 uploadBtn.disabled = false;
-                if (data.url) {
-                    resultLink.href = data.url;
-                    resultLink.textContent = 'View Uploaded File';
-                    resultContainer.style.display = 'block';
+                if (xhr.status === 200) {
+                    const response = JSON.parse(xhr.responseText);
+                    if (response.url) {
+                        resultLink.href = response.url;
+                        resultLink.textContent = 'View Uploaded File';
+                        resultContainer.style.display = 'block';
+                    } else {
+                        alert('Upload failed: ' + response.error);
+                    }
                 } else {
-                    alert('Upload failed: ' + data.error);
+                    alert('Upload failed: ' + xhr.statusText);
                 }
-            })
-            .catch(error => {
+            };
+            xhr.onerror = function() {
                 loadingSpinner.style.display = 'none';
                 uploadBtn.disabled = false;
-                alert('Upload failed: ' + error);
-            });
-
-            simulateProgress();
+                alert('Upload failed: Network error');
+            };
+            xhr.send(formData);
         }
 
-        function simulateProgress() {
-            let width = 0;
-            const interval = setInterval(() => {
-                if (width >= 90) {
-                    clearInterval(interval);
-                } else {
-                    width++;
-                    progress.style.width = width + '%';
-                }
-            }, 50);
+        function updateProgress(event) {
+            if (event.lengthComputable) {
+                const percentComplete = (event.loaded / event.total) * 100;
+                progress.style.width = percentComplete + '%';
+            }
         }
 
         copyBtn.addEventListener('click', () => {