Update app.py

app.py

@@ -17,25 +17,32 @@ HTML_CONTENT = """
     <style>
         body {
             font-family: 'Poppins', sans-serif;
-            background: #008080;
+            background: #121212;
             height: 100vh;
             margin: 0;
             display: flex;
             justify-content: center;
             align-items: center;
-            color: #333;
+            color: #e0e0e0;
         }
         .container {
-            background: rgba(255, 255, 255, 0.95);
+            background: rgba(255, 255, 255, 0.1);
             padding: 2.5rem;
-            border-radius: 10px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            border-radius: 15px;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
             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.3);
         }
         h1 {
-            color: #008080;
+            color: #00CED1;
             margin-bottom: 1.5rem;
             font-weight: 600;
         }
@@ -43,8 +50,8 @@ HTML_CONTENT = """
             display: none;
         }
         .btn {
-            background-color: #008080;
-            color: white;
+            background-color: #00CED1;
+            color: #121212;
             padding: 12px 24px;
             border-radius: 5px;
             cursor: pointer;
@@ -54,18 +61,50 @@ HTML_CONTENT = """
             border: none;
             font-size: 1rem;
             margin: 0.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 5px;
+            height: 5px;
+            background: rgba(255, 255, 255, 0.5);
+            opacity: 0;
+            border-radius: 100%;
+            transform: scale(1, 1) translate(-50%);
+            transform-origin: 50% 50%;
+        }
+        @keyframes ripple {
+            0% {
+                transform: scale(0, 0);
+                opacity: 1;
+            }
+            20% {
+                transform: scale(25, 25);
+                opacity: 1;
+            }
+            100% {
+                opacity: 0;
+                transform: scale(40, 40);
+            }
+        }
+        .btn:focus:not(:active)::after {
+            animation: ripple 1s ease-out;
         }
         .btn:hover {
-            background-color: #006666;
+            background-color: #00A9A9;
         }
         .btn:disabled {
-            background-color: #ccc;
+            background-color: #555;
             cursor: not-allowed;
         }
         .file-name {
             margin-top: 1rem;
             font-size: 0.9rem;
-            color: #666;
+            color: #aaa;
         }
         .progress-container {
             margin-top: 1.5rem;
@@ -74,22 +113,22 @@ HTML_CONTENT = """
         .progress-bar {
             width: 100%;
             height: 10px;
-            background-color: #e0e0e0;
+            background-color: #333;
             border-radius: 5px;
             overflow: hidden;
         }
         .progress {
             width: 0%;
             height: 100%;
-            background-color: #008080;
-            transition: width 0.5s ease;
+            background-color: #00CED1;
+            transition: width 0.3s ease;
         }
         .loading-spinner {
             display: none;
             width: 40px;
             height: 40px;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #008080;
+            border: 4px solid #333;
+            border-top: 4px solid #00CED1;
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin: 20px auto;
@@ -103,19 +142,19 @@ HTML_CONTENT = """
             margin-top: 1.5rem;
         }
         .result-link {
-            color: #008080;
+            color: #00CED1;
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
             margin-right: 10px;
         }
         .result-link:hover {
-            color: #006666;
+            color: #00A9A9;
             text-decoration: underline;
         }
         .copy-btn {
-            background-color: #f0f0f0;
-            color: #333;
+            background-color: #333;
+            color: #e0e0e0;
             border: none;
             padding: 5px 10px;
             border-radius: 5px;
@@ -123,7 +162,7 @@ HTML_CONTENT = """
             transition: all 0.3s ease;
         }
         .copy-btn:hover {
-            background-color: #e0e0e0;
+            background-color: #444;
         }
     </style>
 </head>
@@ -198,11 +237,13 @@ HTML_CONTENT = """
                 } else {
                     alert('Upload failed: ' + xhr.statusText);
                 }
+                resetUploadState();
             };
             xhr.onerror = function() {
                 loadingSpinner.style.display = 'none';
                 uploadBtn.disabled = false;
                 alert('Upload failed: Network error');
+                resetUploadState();
             };
             xhr.send(formData);
         }
@@ -214,6 +255,14 @@ HTML_CONTENT = """
             }
         }
 
+        function resetUploadState() {
+            fileInput.value = '';
+            fileName.textContent = '';
+            uploadBtn.style.display = 'none';
+            progressContainer.style.display = 'none';
+            progress.style.width = '0%';
+        }
+
         copyBtn.addEventListener('click', () => {
             navigator.clipboard.writeText(resultLink.href).then(() => {
                 alert('Link copied to clipboard!');