Update app.py

app.py

@@ -81,53 +81,39 @@ HTML_CONTENT = """
             font-size: 1rem;
             font-weight: 600;
             color: #ffffff;
-            background-color: transparent;
+            background-color: #2a2a2a;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             overflow: hidden;
             z-index: 1;
-            transition: color 0.3s ease;
+            transition: color 0.3s ease, box-shadow 0.3s ease;
         }
 
         .btn:hover {
-            color: #e0e0e0;
+            color: #ffffff;
+            box-shadow: 0 0 15px rgba(255,255,255,0.5);
         }
 
-        .btn::before {
+        .btn:hover::before {
             content: '';
             position: absolute;
-            inset: 0;
-            border-radius: 5px;
-            padding: 3px;
-            background: linear-gradient(45deg, #0000ff, #ffffff, #000000);
-            -webkit-mask: 
-                linear-gradient(#fff 0 0) content-box, 
-                linear-gradient(#fff 0 0);
-            -webkit-mask-composite: destination-out;
-            mask-composite: exclude;
-            animation: borderAnimation 5s infinite;
-        }
-
-        @keyframes borderAnimation {
-            0% {
-                background-position: 0% 50%;
-            }
-            50% {
-                background-position: 100% 50%;
-            }
-            100% {
-                background-position: 0% 50%;
-            }
+            inset: -10px;
+            background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent);
+            filter: blur(20px);
+            animation: glowAnimation 2s infinite;
+            z-index: -1;
+            pointer-events: none;
         }
 
-        .btn:active {
-            transform: scale(0.98);
+        @keyframes glowAnimation {
+            0% { transform: scale(0.8); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(0.8); }
         }
 
-        .btn:disabled {
-            color: #555;
-            cursor: not-allowed;
+        .btn:active {
+            transform: scale(0.98);
         }
 
         /* Drop Zone */
@@ -175,13 +161,8 @@ HTML_CONTENT = """
         .progress {
             width: 0%;
             height: 100%;
-            background: linear-gradient(90deg, #0000ff, #ffffff, #000000);
-            animation: progressAnimation 2s infinite;
-        }
-
-        @keyframes progressAnimation {
-            0% { background-position: 0% 50%; }
-            100% { background-position: 100% 50%; }
+            background-color: #ffffff;
+            transition: width 0.3s ease;
         }
 
         /* Loading Spinner */
@@ -219,48 +200,7 @@ HTML_CONTENT = """
             text-decoration: underline;
         }
 
-        .copy-btn, .embed-btn {
-            position: relative;
-            padding: 10px 20px;
-            margin: 0.5rem;
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: #ffffff;
-            background-color: transparent;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            overflow: hidden;
-            z-index: 1;
-            transition: color 0.3s ease;
-        }
-
-        .copy-btn::before,
-        .embed-btn::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: 5px;
-            padding: 3px;
-            background: linear-gradient(45deg, #0000ff, #ffffff, #000000);
-            -webkit-mask: 
-                linear-gradient(#fff 0 0) content-box, 
-                linear-gradient(#fff 0 0);
-            -webkit-mask-composite: destination-out;
-            mask-composite: exclude;
-            animation: borderAnimation 5s infinite;
-        }
-
-        .copy-btn:hover,
-        .embed-btn:hover {
-            color: #e0e0e0;
-        }
-
-        .copy-btn:active,
-        .embed-btn:active {
-            transform: scale(0.98);
-        }
-
+        /* File Types */
         .file-types {
             margin-top: 2rem;
             font-size: 0.8rem;
@@ -331,44 +271,6 @@ HTML_CONTENT = """
             margin-right: 10px;
         }
 
-        .copy-embed-btn {
-            position: relative;
-            padding: 10px 20px;
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: #ffffff;
-            background-color: transparent;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            overflow: hidden;
-            z-index: 1;
-            transition: color 0.3s ease;
-        }
-
-        .copy-embed-btn::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: 5px;
-            padding: 3px;
-            background: linear-gradient(45deg, #0000ff, #ffffff, #000000);
-            -webkit-mask: 
-                linear-gradient(#fff 0 0) content-box, 
-                linear-gradient(#fff 0 0);
-            -webkit-mask-composite: destination-out;
-            mask-composite: exclude;
-            animation: borderAnimation 5s infinite;
-        }
-
-        .copy-embed-btn:hover {
-            color: #e0e0e0;
-        }
-
-        .copy-embed-btn:active {
-            transform: scale(0.98);
-        }
-
         /* Media Queries */
         @media (max-width: 480px) {
             .container {
@@ -388,6 +290,7 @@ HTML_CONTENT = """
                 margin-right: 0;
             }
         }
+
     </style>
 </head>
 <body>
@@ -417,7 +320,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="copy-embed-btn">Copy</button>
+                <button onclick="copyEmbedLink()" class="btn copy-embed-btn">Copy</button>
             </div>
         </div>
     </div>
@@ -567,7 +470,7 @@ HTML_CONTENT = """
 
             const copyBtn = document.createElement('button');
             copyBtn.textContent = 'Copy Link';
-            copyBtn.className = 'copy-btn';
+            copyBtn.className = 'btn copy-btn';
             copyBtn.onclick = () => {
                 navigator.clipboard.writeText(window.location.origin + url).then(() => {
                     alert('Link copied to clipboard!');
@@ -580,7 +483,7 @@ HTML_CONTENT = """
             if (fileName.toLowerCase().endsWith('.mp4')) {
                 const embedBtn = document.createElement('button');
                 embedBtn.textContent = 'Embed Video for Discord';
-                embedBtn.className = 'embed-btn';
+                embedBtn.className = 'btn embed-btn';
                 embedBtn.onclick = () => {
                     showEmbedModal(url);
                 };
@@ -631,7 +534,7 @@ async def handle_upload(file: UploadFile = File(...)):
 
     original_url = upload_result['serving_url']
     mirrored_url = f"/rbxg/{original_url.split('/pbxt/')[1]}"
-    
+
     return JSONResponse(content={"url": mirrored_url})
 
 @app.get("/rbxg/{path:path}")
@@ -680,7 +583,7 @@ async def embed_video(url: str, thumbnail: str):
     </head>
     <body>
         <img id="thumbnail" src="{thumbnail}" onclick="playVideo()">
-        <video id="video" controls>
+        <video id="video" controls autoplay>
             <source src="{url}" type="video/mp4">
             Your browser does not support the video tag.
         </video>