Update app.py

app.py

@@ -92,14 +92,14 @@ HTML_CONTENT = """
 
         .btn:hover {
             color: #ffffff;
-            box-shadow: 0 0 15px rgba(255,255,255,0.5);
+            box-shadow: 0 0 15px rgba(0, 122, 255, 0.5);
         }
 
         .btn:hover::before {
             content: '';
             position: absolute;
             inset: -10px;
-            background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent);
+            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
             filter: blur(20px);
             animation: glowAnimation 2s infinite;
             z-index: -1;
@@ -116,6 +116,42 @@ HTML_CONTENT = """
             transform: scale(0.98);
         }
 
+        /* Small Buttons */
+        .small-btn {
+            padding: 8px 16px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            background-color: #2a2a2a;
+            color: #ffffff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: color 0.3s ease, box-shadow 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            z-index: 1;
+        }
+
+        .small-btn:hover {
+            color: #ffffff;
+            box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
+        }
+
+        .small-btn:hover::before {
+            content: '';
+            position: absolute;
+            inset: -10px;
+            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
+            filter: blur(15px);
+            animation: glowAnimation 2s infinite;
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .small-btn:active {
+            transform: scale(0.98);
+        }
+
         /* Drop Zone */
         .drop-zone {
             position: relative;
@@ -131,6 +167,18 @@ HTML_CONTENT = """
         .drop-zone:hover, .drop-zone.drag-over {
             border-color: #ffffff;
             background: rgba(255, 255, 255, 0.1);
+            position: relative;
+        }
+
+        .drop-zone:hover::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;
+            z-index: -1;
+            pointer-events: none;
         }
 
         .file-input {
@@ -320,7 +368,7 @@ HTML_CONTENT = """
             <p>Copy the following link to embed the video:</p>
             <div class="embed-container">
                 <input type="text" id="embedLink" readonly>
-                <button onclick="copyEmbedLink()" class="btn copy-embed-btn">Copy</button>
+                <button onclick="copyEmbedLink()" class="small-btn copy-embed-btn">Copy</button>
             </div>
         </div>
     </div>
@@ -470,7 +518,7 @@ HTML_CONTENT = """
 
             const copyBtn = document.createElement('button');
             copyBtn.textContent = 'Copy Link';
-            copyBtn.className = 'btn copy-btn';
+            copyBtn.className = 'small-btn copy-btn';
             copyBtn.onclick = () => {
                 navigator.clipboard.writeText(window.location.origin + url).then(() => {
                     alert('Link copied to clipboard!');
@@ -483,7 +531,7 @@ HTML_CONTENT = """
             if (fileName.toLowerCase().endsWith('.mp4')) {
                 const embedBtn = document.createElement('button');
                 embedBtn.textContent = 'Embed Video for Discord';
-                embedBtn.className = 'btn embed-btn';
+                embedBtn.className = 'small-btn embed-btn';
                 embedBtn.onclick = () => {
                     showEmbedModal(url);
                 };