Update app.py

app.py

@@ -92,14 +92,14 @@ HTML_CONTENT = """
 
         .btn:hover {
             color: #ffffff;
-            box-shadow: 0 0 15px rgba(0, 122, 255, 0.5);
+            box-shadow: 0 0 15px rgba(200, 200, 200, 0.5);
         }
 
         .btn:hover::before {
             content: '';
             position: absolute;
             inset: -10px;
-            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
+            background: radial-gradient(circle at center, rgba(200,200,200,0.2), transparent);
             filter: blur(20px);
             animation: glowAnimation 2s infinite;
             z-index: -1;
@@ -130,18 +130,19 @@ HTML_CONTENT = """
             position: relative;
             overflow: hidden;
             z-index: 1;
+            margin-left: 5px;
         }
 
         .small-btn:hover {
             color: #ffffff;
-            box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
+            box-shadow: 0 0 10px rgba(200, 200, 200, 0.5);
         }
 
         .small-btn:hover::before {
             content: '';
             position: absolute;
             inset: -10px;
-            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
+            background: radial-gradient(circle at center, rgba(200,200,200,0.2), transparent);
             filter: blur(15px);
             animation: glowAnimation 2s infinite;
             z-index: -1;
@@ -162,6 +163,7 @@ HTML_CONTENT = """
             cursor: pointer;
             transition: all 0.3s ease;
             background: rgba(255, 255, 255, 0.05);
+            overflow: hidden;
         }
 
         .drop-zone:hover, .drop-zone.drag-over {
@@ -170,17 +172,23 @@ HTML_CONTENT = """
             position: relative;
         }
 
-        .drop-zone:hover::before {
+        .drop-zone:hover::before, .drop-zone.drag-over::before {
             content: '';
             position: absolute;
             inset: -10px;
-            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
-            filter: blur(20px);
-            animation: glowAnimation 2s infinite;
+            background: radial-gradient(circle at center, rgba(200,200,200,0.2), transparent);
+            filter: blur(30px);
+            animation: grainGlow 5s infinite;
             z-index: -1;
             pointer-events: none;
         }
 
+        @keyframes grainGlow {
+            0% { opacity: 0.2; }
+            50% { opacity: 0.5; }
+            100% { opacity: 0.2; }
+        }
+
         .file-input {
             display: none;
         }
@@ -189,6 +197,7 @@ HTML_CONTENT = """
             margin-top: 1rem;
             font-size: 0.9rem;
             color: #aaa;
+            word-break: break-all;
         }
 
         /* Progress Bar */
@@ -242,12 +251,19 @@ HTML_CONTENT = """
             font-weight: 600;
             transition: all 0.3s ease;
             margin-right: 10px;
+            word-break: break-all;
         }
 
         .result-link:hover {
             text-decoration: underline;
         }
 
+        .link-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            margin-top: 10px;
+        }
+
         /* File Types */
         .file-types {
             margin-top: 2rem;
@@ -337,6 +353,15 @@ HTML_CONTENT = """
                 margin-bottom: 10px;
                 margin-right: 0;
             }
+
+            .link-buttons {
+                flex-direction: column;
+            }
+
+            .small-btn {
+                margin-left: 0;
+                margin-top: 5px;
+            }
         }
 
     </style>
@@ -516,6 +541,11 @@ HTML_CONTENT = """
             link.className = 'result-link';
             link.target = '_blank';
 
+            linkContainer.appendChild(link);
+
+            const buttonsContainer = document.createElement('div');
+            buttonsContainer.className = 'link-buttons';
+
             const copyBtn = document.createElement('button');
             copyBtn.textContent = 'Copy Link';
             copyBtn.className = 'small-btn copy-btn';
@@ -524,9 +554,7 @@ HTML_CONTENT = """
                     alert('Link copied to clipboard!');
                 });
             };
-
-            linkContainer.appendChild(link);
-            linkContainer.appendChild(copyBtn);
+            buttonsContainer.appendChild(copyBtn);
 
             if (fileName.toLowerCase().endsWith('.mp4')) {
                 const embedBtn = document.createElement('button');
@@ -535,9 +563,11 @@ HTML_CONTENT = """
                 embedBtn.onclick = () => {
                     showEmbedModal(url);
                 };
-                linkContainer.appendChild(embedBtn);
+                buttonsContainer.appendChild(embedBtn);
             }
 
+            linkContainer.appendChild(buttonsContainer);
+
             resultContainer.appendChild(linkContainer);
             resultContainer.style.display = 'block';
         }