Spaces:

Offex
/

Titok

Running

App Files Files Community

Offex commited on 7 days ago

Commit

5bd89e6

verified ·

1 Parent(s): f348d61

Update app.py

Browse files

Files changed (1) hide show

app.py +135 -26

app.py CHANGED Viewed

@@ -5,50 +5,159 @@ import uuid
 app = Flask(__name__)
 HTML_CODE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TikTok Downloader Cloud</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        body { background: #0b0f19; color: white; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: sans-serif; }
-        .glass-card { background: rgba(17, 24, 39, 0.9); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px; }
     </style>
 </head>
-<body class="p-4">
-    <div class="glass-card w-full max-w-md shadow-2xl">
-        <h1 class="text-3xl font-bold text-center mb-2 text-blue-500">CLOUD DOWNLOADER</h1>
-        <p class="text-gray-400 text-center text-sm mb-6">No VPN Needed • High Speed</p>
-        <form method="POST" action="/fetch" class="space-y-4">
-            <input type="text" name="url" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white focus:outline-none focus:border-blue-500" placeholder="Paste TikTok Link..." required>
-            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 p-3 rounded-lg font-bold transition">Check Quality</button>
         </form>
         {% if formats %}
-        <div class="mt-6 space-y-3">
-            <h3 class="text-sm font-semibold text-gray-400">Available Qualities:</h3>
             {% for f in formats %}
-            <form method="POST" action="/download" class="flex items-center justify-between bg-gray-800 p-3 rounded-lg border border-gray-700">
-                <input type="hidden" name="url" value="{{ url }}">
-                <input type="hidden" name="format_id" value="{{ f.id }}">
-                <div>
-                    <div class="font-bold text-white">{{ f.label }}</div>
-                    <div class="text-xs text-gray-400">{{ f.size }}</div>
-                </div>
-                <button type="submit" class="bg-emerald-600 text-xs px-3 py-2 rounded font-bold">GET</button>
-            </form>
             {% endfor %}
         </div>
         {% endif %}
         {% if error %}
-        <div class="mt-4 p-3 bg-red-900/50 text-red-200 text-xs rounded text-center">{{ error }}</div>
         {% endif %}
     </div>
 </body>
 </html>
 """
@@ -61,6 +170,7 @@ def index():
 def fetch():
     url = request.form.get("url")
     try:
         opts = {'quiet': True, 'nocheckcertificate': True, 'user_agent': 'Mozilla/5.0'}
         with yt_dlp.YoutubeDL(opts) as ydl:
             info = ydl.extract_info(url, download=False)
@@ -88,7 +198,7 @@ def fetch():
 def dl():
     url = request.form.get("url")
     fid = request.form.get("format_id")
-    name = f"vid_{uuid.uuid4().hex[:5]}.mp4"
     try:
         opts = {'format': f'{fid}+bestaudio/best', 'outtmpl': name, 'merge_output_format': 'mp4'}
         with yt_dlp.YoutubeDL(opts) as ydl:
@@ -104,4 +214,3 @@ def dl():
 if __name__ == "__main__":
     app.run(host='0.0.0.0', port=7860)

 app = Flask(__name__)
+# --- PROFESSIONAL ANIMATED UI ---
 HTML_CODE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neon Downloader Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap');
+        body { font-family: 'Outfit', sans-serif; background-color: #000; overflow-x: hidden; }
+        /* Animated Background */
+        .bg-animate {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
+            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+            background-size: 400% 400%;
+            animation: gradientBG 15s ease infinite;
+            opacity: 0.2;
+        }
+        @keyframes gradientBG {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        /* Glass Card */
+        .glass {
+            background: rgba(20, 20, 20, 0.7);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+        /* Input Glow */
+        .input-glow:focus {
+            box-shadow: 0 0 20px rgba(0, 242, 234, 0.3);
+            border-color: #00f2ea;
+        }
+        /* Button Animation */
+        .btn-grad {
+            background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
+            transition: 0.5s;
+            background-size: 200% auto;
+        }
+        .btn-grad:hover { background-position: right center; transform: scale(1.02); }
+        /* Loading Spinner */
+        .loader {
+            border: 3px solid rgba(255,255,255,0.3);
+            border-radius: 50%;
+            border-top: 3px solid #fff;
+            width: 20px; height: 20px;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        /* List Item Animation */
+        .fade-in-up { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; transform: translateY(20px); }
+        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
     </style>
 </head>
+<body class="text-white flex flex-col items-center justify-center min-h-screen p-4">
+    <div class="bg-animate"></div>
+    <div class="glass w-full max-w-lg rounded-3xl p-8 relative overflow-hidden">
+        <div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-500 rounded-full blur-[80px] opacity-40"></div>
+        <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-pink-500 rounded-full blur-[80px] opacity-40"></div>
+        <div class="text-center mb-8 relative z-10">
+            <h1 class="text-4xl font-bold mb-1 tracking-tight">
+                <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Video</span>
+                <span class="text-white">Hunter</span>
+            </h1>
+            <p class="text-gray-400 text-sm">Ultra HD • No Watermark • Fast</p>
+        </div>
+        <form method="POST" action="/fetch" onsubmit="showLoader()" class="space-y-5 relative z-10">
+            <div class="relative">
+                <i class="fa-solid fa-link absolute left-4 top-4 text-gray-400"></i>
+                <input type="text" name="url"
+                    class="input-glow w-full bg-black/40 border border-gray-700 rounded-xl py-3.5 pl-12 pr-4 text-white placeholder-gray-500 focus:outline-none transition-all duration-300"
+                    placeholder="Paste TikTok/Reel Link here..." required>
+            </div>
+            <button type="submit" id="searchBtn" class="btn-grad w-full py-4 rounded-xl font-bold text-lg shadow-lg flex justify-center items-center gap-2">
+                <span>ANALYZE VIDEO</span>
+                <div class="loader" id="spinner"></div>
+            </button>
         </form>
         {% if formats %}
+        <div class="mt-8 space-y-3 relative z-10">
+            <div class="flex items-center gap-2 mb-4">
+                <div class="h-px bg-gray-700 flex-1"></div>
+                <span class="text-xs text-gray-400 uppercase tracking-widest">Select Quality</span>
+                <div class="h-px bg-gray-700 flex-1"></div>
+            </div>
             {% for f in formats %}
+            <div class="fade-in-up" style="animation-delay: {{ loop.index0 * 100 }}ms">
+                <form method="POST" action="/download" onsubmit="showDownloadLoader(this)">
+                    <input type="hidden" name="url" value="{{ url }}">
+                    <input type="hidden" name="format_id" value="{{ f.id }}">
+                    <button type="submit" class="group w-full bg-gray-800/50 hover:bg-gray-800 border border-gray-700/50 hover:border-blue-500/50 p-4 rounded-xl transition-all duration-300 flex justify-between items-center">
+                        <div class="text-left">
+                            <div class="flex items-center gap-2">
+                                <span class="font-bold text-white group-hover:text-blue-400 transition-colors">{{ f.label }}</span>
+                                {% if 'HD' in f.label or '1080' in f.label %}
+                                    <span class="bg-blue-500/20 text-blue-300 text-[10px] px-2 py-0.5 rounded font-bold">HQ</span>
+                                {% endif %}
+                            </div>
+                            <div class="text-xs text-gray-500 mt-1">{{ f.size }} • MP4</div>
+                        </div>
+                        <div class="w-10 h-10 rounded-full bg-gray-700 group-hover:bg-blue-600 flex items-center justify-center transition-all">
+                            <i class="fa-solid fa-download text-sm text-gray-300 group-hover:text-white"></i>
+                        </div>
+                    </button>
+                </form>
+            </div>
             {% endfor %}
         </div>
         {% endif %}
         {% if error %}
+        <div class="mt-6 p-4 bg-red-500/10 border border-red-500/50 rounded-xl flex items-start gap-3 fade-in-up">
+            <i class="fa-solid fa-circle-exclamation text-red-500 mt-1"></i>
+            <div class="text-red-200 text-sm">{{ error }}</div>
+        </div>
         {% endif %}
     </div>
+    <script>
+        function showLoader() {
+            document.getElementById('searchBtn').style.opacity = '0.8';
+            document.getElementById('searchBtn').innerHTML = 'Processing... <div class="loader" style="display:inline-block"></div>';
+        }
+        function showDownloadLoader(form) {
+            const btn = form.querySelector('button');
+            const icon = btn.querySelector('i');
+            icon.className = 'fa-solid fa-circle-notch fa-spin';
+        }
+    </script>
 </body>
 </html>
 """
 def fetch():
     url = request.form.get("url")
     try:
+        # Optimized for Cloud
         opts = {'quiet': True, 'nocheckcertificate': True, 'user_agent': 'Mozilla/5.0'}
         with yt_dlp.YoutubeDL(opts) as ydl:
             info = ydl.extract_info(url, download=False)
 def dl():
     url = request.form.get("url")
     fid = request.form.get("format_id")
+    name = f"VidHunter_{uuid.uuid4().hex[:5]}.mp4"
     try:
         opts = {'format': f'{fid}+bestaudio/best', 'outtmpl': name, 'merge_output_format': 'mp4'}
         with yt_dlp.YoutubeDL(opts) as ydl:
 if __name__ == "__main__":
     app.run(host='0.0.0.0', port=7860)