| <!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> |
|
|
