Spaces:

Rianofc
/

spotifyd

Sleeping

App Files Files Community

Rianofc commited on Jul 6, 2025

Commit

2eef2c0

verified ·

1 Parent(s): 88690bd

Update index.html

Browse files

Files changed (1) hide show

index.html +155 -59

index.html CHANGED Viewed

@@ -1,72 +1,168 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>AIO Downloader</title>
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-  <div class="w-full max-w-lg bg-white rounded-2xl shadow-lg p-6">
-    <h1 class="text-2xl font-bold text-gray-800 mb-4">✨ AIO Downloader</h1>
-    <form id="downloadForm" class="space-y-4">
-      <div>
-        <label for="url" class="block text-gray-700 mb-1">Target URL</label>
-        <input type="url" id="url" placeholder="https://example.com/video.mp4" required
-          class="w-full p-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400" />
-      </div>
-      <div>
-        <label for="ttl" class="block text-gray-700 mb-1">TTL (seconds) <span class="text-sm text-gray-500">optional</span></label>
-        <input type="number" id="ttl" placeholder="3600"
-          class="w-full p-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400" />
-      </div>
-      <button type="submit"
-        class="w-full py-3 bg-blue-600 text-white font-semibold rounded-xl shadow hover:bg-blue-700 transition">Generate Short URL</button>
     </form>
-    <div id="result" class="mt-6 hidden">
-      <p class="text-gray-800">Your short URL:</p>
-      <div class="mt-2 flex items-center space-x-2">
-        <input type="text" id="shortUrl" readonly
-          class="flex-1 p-3 border border-gray-300 rounded-xl bg-gray-100" />
-        <button id="copyBtn" class="px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600 transition">Copy</button>
       </div>
-      <a id="downloadLink" href="#" target="_blank"
-        class="block mt-4 text-center text-white bg-indigo-600 py-3 rounded-xl hover:bg-indigo-700 transition">Download Now</a>
     </div>
-    <script>
-      const form = document.getElementById('downloadForm');
-      const resultBox = document.getElementById('result');
-      const shortUrlInput = document.getElementById('shortUrl');
-      const copyBtn = document.getElementById('copyBtn');
-      const downloadLink = document.getElementById('downloadLink');
-      form.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const url = document.getElementById('url').value;
-        const ttl = document.getElementById('ttl').value;
-        const params = new URLSearchParams({ url });
-        if (ttl) params.append('ttlSeconds', ttl);
-        try {
-          const res = await fetch(`/proxy-url?${params.toString()}`);
-          if (!res.ok) throw new Error('Failed to generate');
-          const { shortUrl } = await res.json();
-          shortUrlInput.value = shortUrl;
-          downloadLink.href = shortUrl;
-          resultBox.classList.remove('hidden');
-        } catch (err) {
-          alert(err.message);
-        }
-      });
-      copyBtn.addEventListener('click', () => {
-        navigator.clipboard.writeText(shortUrlInput.value);
-        copyBtn.textContent = 'Copied!';
-        setTimeout(() => copyBtn.textContent = 'Copy', 2000);
-      });
-    </script>
-  </div>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Spotify Downloader</title>
+  <style>
+    :root {
+      --spotify-green: #1DB954;
+      --bg: #f9f9f9;
+      --card: #fff;
+      --text: #333;
+      --muted: #666;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      padding: 1rem;
+    }
+    .container {
+      background: var(--card);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+      max-width: 360px;
+      width: 100%;
+      padding: 2rem;
+      text-align: center;
+    }
+    .logo {
+      width: 64px;
+      margin-bottom: 1rem;
+    }
+    h1 {
+      font-size: 1.25rem;
+      margin-bottom: 1.5rem;
+      color: var(--spotify-green);
+    }
+    form input {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      font-size: 1rem;
+      margin-bottom: 1rem;
+    }
+    form button {
+      width: 100%;
+      padding: 0.75rem;
+      background: var(--spotify-green);
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    form button:hover {
+      background: #17a44c;
+    }
+    .result {
+      margin-top: 1.5rem;
+      text-align: left;
+    }
+    .media-item {
+      display: block;
+      margin: 0.5rem 0;
+      padding: 0.75rem;
+      background: var(--bg);
+      border-radius: 6px;
+      text-decoration: none;
+      color: var(--spotify-green);
+      font-weight: 500;
+      font-size: 0.95rem;
+      transition: background 0.2s;
+    }
+    .media-item:hover {
+      background: #e6f7ee;
+    }
+    .info {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+    .info img {
+      width: 64px;
+      height: 64px;
+      border-radius: 8px;
+      margin-right: 1rem;
+    }
+    .info div {
+      flex: 1;
+    }
+    .info .title {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+    .info .author {
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+  </style>
 </head>
+<body>
+  <div class="container">
+    <img src="https://cdn.jsdelivr.net/gh/edent/SuperTinyIcons/images/svg/spotify.svg" alt="Spotify" class="logo">
+    <h1>Spotify Downloader</h1>
+    <form id="download-form">
+      <input type="url" id="track-url" placeholder="Enter Spotify track URL..." required>
+      <button type="submit">Fetch Links</button>
     </form>
+    <div id="output" class="result" hidden>
+      <div class="info">
+        <img id="thumb" src="" alt="Thumbnail">
+        <div>
+          <div id="track-title" class="title"></div>
+          <div id="track-author" class="author"></div>
+        </div>
       </div>
+      <div id="links"></div>
     </div>
+  </div>
+  <script>
+    const form = document.getElementById('download-form');
+    const output = document.getElementById('output');
+    const thumb = document.getElementById('thumb');
+    const trackTitle = document.getElementById('track-title');
+    const trackAuthor = document.getElementById('track-author');
+    const linksDiv = document.getElementById('links');
+    form.addEventListener('submit', async e => {
+      e.preventDefault();
+      const url = document.getElementById('track-url').value.trim();
+      output.hidden = true;
+      linksDiv.innerHTML = '';
+      try {
+        const res = await fetch(`/proxy-url?url=${encodeURIComponent(url)}`);
+        if (!res.ok) throw new Error('Failed to fetch');
+        const data = await res.json();
+        const info = data.data;
+        thumb.src = info.thumbnail;
+        trackTitle.textContent = info.title;
+        trackAuthor.textContent = info.author;
+        info.medias.forEach(item => {
+          const a = document.createElement('a');
+          a.href = item.url;
+          a.textContent = `Download ${item.quality}`;
+          a.className = 'media-item';
+          a.setAttribute('download', '');
+          linksDiv.appendChild(a);
+        });
+        output.hidden = false;
+      } catch (err) {
+        alert(err.message);
+      }
+    });
+  </script>
 </body>
 </html>