Spaces:

Offex
/

Titok

Sleeping

App Files Files Community

Offex commited on 2 days ago

Commit

3e8ea08

verified ·

1 Parent(s): 5750f08

Update app.py

Browse files

Files changed (1) hide show

app.py +458 -40

app.py CHANGED Viewed

@@ -12,50 +12,468 @@ HTML_CODE = """
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Universal Video Downloader</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>
-body { background:#0f172a; color:white; font-family:sans-serif; }
-.glass { background:rgba(30,41,59,.85); backdrop-filter:blur(12px);
-border-radius:16px; border:1px solid rgba(255,255,255,.1); }
-.loader { border:3px solid #f3f3f3; border-top:3px solid #3498db;
-border-radius:50%; width:18px; height:18px;
-animation:spin 1s linear infinite; display:none; }
-@keyframes spin {100%{transform:rotate(360deg)}}
 </style>
 </head>
-<body class="flex items-center justify-center min-h-screen p-4">
-<div class="glass w-full max-w-md p-6">
-<h1 class="text-3xl text-center font-bold text-blue-400 mb-6">
-UniLoader <span class="text-xs text-gray-400">HF Edition</span>
-</h1>
-<form method="POST" action="/download"
-onsubmit="document.getElementById('sp').style.display='inline-block'"
-class="space-y-4">
-<input name="url" required
-class="w-full bg-gray-900 border border-gray-700 p-3 rounded-lg"
-placeholder="Paste YouTube / TikTok link">
-<button class="w-full bg-blue-600 hover:bg-blue-700 p-3 rounded-lg
-font-bold flex items-center justify-center gap-2">
-Download Best Quality
-<div id="sp" class="loader"></div>
-</button>
-</form>
-{% if error %}
-<div class="mt-4 bg-red-900/50 p-3 rounded text-center text-sm">
-{{ error }}
-</div>
-{% endif %}
-<p class="text-xs text-gray-400 mt-4 text-center">
-Note: TikTok HD on Hugging Face is limited by platform.
-</p>
-</div>
 </body>
 </html>
 """

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>UniLoader — Premium Video Downloader</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
 <style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --gold: #c9a84c;
+    --gold-light: #f0d080;
+    --gold-dim: rgba(201,168,76,0.15);
+    --bg-deep: #080b12;
+    --bg-card: rgba(12, 17, 30, 0.92);
+    --border: rgba(201,168,76,0.25);
+    --text: #e8e0d0;
+    --muted: #7a7060;
+  }
+  html, body {
+    min-height: 100vh;
+    background: var(--bg-deep);
+    font-family: 'DM Sans', sans-serif;
+    color: var(--text);
+    overflow-x: hidden;
+  }
+  /* ── Animated Background ── */
+  .bg-scene {
+    position: fixed; inset: 0; z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  .orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.35;
+    animation: drift 18s ease-in-out infinite alternate;
+  }
+  .orb1 {
+    width: 520px; height: 520px;
+    background: radial-gradient(circle, #1a3a6e, transparent 70%);
+    top: -180px; left: -120px;
+    animation-duration: 22s;
+  }
+  .orb2 {
+    width: 380px; height: 380px;
+    background: radial-gradient(circle, #6e3a1a, transparent 70%);
+    bottom: -100px; right: -80px;
+    animation-duration: 17s;
+    animation-delay: -8s;
+  }
+  .orb3 {
+    width: 240px; height: 240px;
+    background: radial-gradient(circle, var(--gold), transparent 70%);
+    top: 45%; left: 55%;
+    opacity: 0.12;
+    animation-duration: 25s;
+    animation-delay: -13s;
+  }
+  @keyframes drift {
+    0%   { transform: translate(0, 0) scale(1); }
+    50%  { transform: translate(30px, -40px) scale(1.08); }
+    100% { transform: translate(-20px, 30px) scale(0.95); }
+  }
+  /* Fine grid overlay */
+  .bg-grid {
+    position: fixed; inset: 0; z-index: 0;
+    background-image:
+      linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
+    background-size: 52px 52px;
+  }
+  /* ── Layout ── */
+  .page-wrap {
+    position: relative; z-index: 1;
+    min-height: 100vh;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    padding: 2rem 1rem;
+  }
+  /* ── Brand Header ── */
+  .brand {
+    text-align: center;
+    margin-bottom: 2.8rem;
+    animation: fadeDown 0.7s ease both;
+  }
+  .brand-badge {
+    display: inline-block;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 500;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--gold);
+    background: var(--gold-dim);
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    padding: 4px 14px;
+    margin-bottom: 1.1rem;
+  }
+  .brand-title {
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(2.6rem, 7vw, 4.2rem);
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.01em;
+    background: linear-gradient(135deg, #f0d080 0%, #c9a84c 45%, #f0d080 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    background-size: 200% auto;
+    animation: shimmer 4s linear infinite;
+  }
+  .brand-sub {
+    margin-top: 0.6rem;
+    font-size: 0.82rem;
+    font-weight: 300;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+  }
+  @keyframes shimmer {
+    0%   { background-position: 0% center; }
+    100% { background-position: 200% center; }
+  }
+  /* ── Card ── */
+  .card {
+    width: 100%; max-width: 480px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 2.2rem 2rem;
+    position: relative;
+    backdrop-filter: blur(24px);
+    box-shadow:
+      0 0 0 1px rgba(255,255,255,0.04) inset,
+      0 40px 80px rgba(0,0,0,0.6),
+      0 0 60px rgba(201,168,76,0.06);
+    animation: fadeUp 0.7s ease 0.15s both;
+  }
+  /* Top gold accent line */
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 12%; right: 12%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--gold), transparent);
+    border-radius: 100px;
+  }
+  /* ── Input Field ── */
+  .input-wrap {
+    position: relative;
+    margin-bottom: 1.2rem;
+  }
+  .input-icon {
+    position: absolute;
+    left: 16px; top: 50%;
+    transform: translateY(-50%);
+    color: var(--gold);
+    font-size: 0.85rem;
+    opacity: 0.7;
+    pointer-events: none;
+    transition: opacity 0.2s;
+  }
+  .url-input {
+    width: 100%;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(201,168,76,0.2);
+    border-radius: 12px;
+    padding: 14px 16px 14px 42px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: var(--text);
+    outline: none;
+    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
+    letter-spacing: 0.01em;
+  }
+  .url-input::placeholder { color: var(--muted); }
+  .url-input:focus {
+    border-color: var(--gold);
+    background: rgba(201,168,76,0.06);
+    box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
+  }
+  .url-input:focus + .input-icon { opacity: 1; }
+  /* ── Button ── */
+  .dl-btn {
+    width: 100%;
+    padding: 15px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.92rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    color: #0a0e1a;
+    background: linear-gradient(135deg, #f0d080 0%, #c9a84c 50%, #e8c060 100%);
+    background-size: 200% auto;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    transition: background-position 0.4s ease, transform 0.15s, box-shadow 0.2s;
+    box-shadow: 0 4px 24px rgba(201,168,76,0.3);
+    position: relative;
+    overflow: hidden;
+  }
+  .dl-btn::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: rgba(255,255,255,0);
+    transition: background 0.2s;
+  }
+  .dl-btn:hover {
+    background-position: right center;
+    box-shadow: 0 6px 32px rgba(201,168,76,0.45);
+    transform: translateY(-1px);
+  }
+  .dl-btn:hover::after { background: rgba(255,255,255,0.08); }
+  .dl-btn:active { transform: translateY(1px); box-shadow: 0 2px 12px rgba(201,168,76,0.3); }
+  /* ── Spinner ── */
+  .spinner {
+    width: 16px; height: 16px;
+    border: 2px solid rgba(0,0,0,0.2);
+    border-top-color: #0a0e1a;
+    border-radius: 50%;
+    display: none;
+    animation: spin 0.7s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  /* ── Platform Pills ── */
+  .platforms {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    margin-bottom: 1.6rem;
+    flex-wrap: wrap;
+  }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    padding: 4px 11px;
+    border-radius: 100px;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    color: var(--muted);
+    transition: color 0.2s, border-color 0.2s;
+  }
+  .pill i { font-size: 0.65rem; }
+  .pill:hover {
+    color: var(--gold-light);
+    border-color: var(--border);
+  }
+  /* ── Error ── */
+  .error-box {
+    margin-top: 1.2rem;
+    background: rgba(180, 50, 50, 0.12);
+    border: 1px solid rgba(220, 60, 60, 0.25);
+    border-radius: 10px;
+    padding: 12px 16px;
+    font-size: 0.82rem;
+    color: #f87171;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    animation: fadeUp 0.3s ease both;
+  }
+  .error-box i { margin-top: 2px; flex-shrink: 0; }
+  /* ── Footer note ── */
+  .footer-note {
+    margin-top: 1.6rem;
+    text-align: center;
+    font-size: 0.72rem;
+    color: var(--muted);
+    letter-spacing: 0.02em;
+    opacity: 0.7;
+  }
+  .footer-note span { color: var(--gold); opacity: 0.7; }
+  /* ── Section divider ── */
+  .divider {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 1.4rem;
+    opacity: 0.35;
+  }
+  .divider-line { flex: 1; height: 1px; background: var(--border); }
+  .divider-dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }
+  /* ── Animations ── */
+  @keyframes fadeDown {
+    from { opacity: 0; transform: translateY(-18px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(16px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  /* ── Quality badge ── */
+  .quality-row {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 1.3rem;
+  }
+  .q-tag {
+    flex: 1;
+    text-align: center;
+    padding: 7px 6px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 8px;
+    font-size: 0.68rem;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+    text-transform: uppercase;
+  }
+  .q-tag strong {
+    display: block;
+    font-size: 0.78rem;
+    color: var(--gold-light);
+    margin-bottom: 2px;
+    font-weight: 700;
+  }
 </style>
 </head>
+<body>
+  <!-- Animated background -->
+  <div class="bg-scene">
+    <div class="orb orb1"></div>
+    <div class="orb orb2"></div>
+    <div class="orb orb3"></div>
+  </div>
+  <div class="bg-grid"></div>
+  <div class="page-wrap">
+    <!-- Brand -->
+    <div class="brand">
+      <div class="brand-badge">&#x2605; Premium Downloader</div>
+      <div class="brand-title">UniLoader</div>
+      <div class="brand-sub">Crafted for quality &nbsp;&bull;&nbsp; HF Edition</div>
+    </div>
+    <!-- Card -->
+    <div class="card">
+      <!-- Platform pills -->
+      <div class="platforms">
+        <span class="pill"><i class="fab fa-youtube"></i> YouTube</span>
+        <span class="pill"><i class="fab fa-tiktok"></i> TikTok</span>
+        <span class="pill"><i class="fab fa-instagram"></i> Instagram</span>
+        <span class="pill"><i class="fas fa-video"></i> 1000+ Sites</span>
+      </div>
+      <!-- Quality tags -->
+      <div class="quality-row">
+        <div class="q-tag"><strong>720p</strong>Max Quality</div>
+        <div class="q-tag"><strong>MP4</strong>Format</div>
+        <div class="q-tag"><strong>Fast</strong>Download</div>
+      </div>
+      <div class="divider">
+        <div class="divider-line"></div>
+        <div class="divider-dot"></div>
+        <div class="divider-line"></div>
+      </div>
+      <!-- Form -->
+      <form method="POST" action="/download"
+            onsubmit="handleSubmit()">
+        <div class="input-wrap">
+          <input
+            type="url"
+            name="url"
+            required
+            class="url-input"
+            placeholder="Paste your video link here…"
+            autocomplete="off"
+          >
+          <i class="fas fa-link input-icon"></i>
+        </div>
+        <button type="submit" class="dl-btn" id="dlBtn">
+          <i class="fas fa-download" id="btnIcon"></i>
+          <span id="btnText">Download Best Quality</span>
+          <div class="spinner" id="spinner"></div>
+        </button>
+      </form>
+      {% if error %}
+      <div class="error-box">
+        <i class="fas fa-circle-exclamation"></i>
+        <span>{{ error }}</span>
+      </div>
+      {% endif %}
+    </div>
+    <p class="footer-note">
+      TikTok HD on Hugging Face may be limited by platform.
+      &nbsp;|&nbsp; <span>Use responsibly.</span>
+    </p>
+  </div>
+  <script>
+    function handleSubmit() {
+      const btn = document.getElementById('dlBtn');
+      const icon = document.getElementById('btnIcon');
+      const text = document.getElementById('btnText');
+      const spin = document.getElementById('spinner');
+      btn.disabled = true;
+      btn.style.opacity = '0.75';
+      btn.style.cursor = 'wait';
+      icon.style.display = 'none';
+      text.textContent = 'Preparing download…';
+      spin.style.display = 'block';
+    }
+  </script>
 </body>
 </html>
 """