body background: linear-gradient(145deg, #0b1120 0%, #111827 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem;
.url-input-group:focus-within border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
.fetch-btn:hover background: linear-gradient(95deg, #3b82f6, #1e3a8a); transform: scale(0.97); online video downloader
.spinner width: 20px; height: 20px; border: 2px solid #334155; border-top: 2px solid #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite;
.file-type font-size: 0.7rem; color: #7e8aa2; text-transform: uppercase; body background: linear-gradient(145deg
.download-link:hover background: #2563eb; color: white;
.fetch-btn background: linear-gradient(95deg, #2563eb, #1e40af); border: none; margin: 0.5rem; padding: 0.6rem 1.4rem; border-radius: 2rem; font-weight: 600; color: white; cursor: pointer; transition: transform 0.1s, background 0.2s; font-size: 0.9rem; padding: 2rem 1.5rem
// initial demo auto-load (just to show interface working with example) if (urlInput.value.trim() !== "") setTimeout(() => processVideo(); , 200); else // if empty, show placeholder message but not error infoPanel.style.display = 'block'; infoPanel.innerHTML = `<div class="info-panel" style="border-left-color:#475569;"><div style="color:#94a3b8;">✨ Paste a video link and click Fetch to see available formats</div></div>`; )(); </script> </body> </html>
<!-- dynamic panel --> <div id="resultPanel"> <div class="info-panel" id="infoPanel" style="display: none;"> <!-- video metadata appears here --> </div> <div id="formatsContainer" class="formats-section" style="display: none;"> <div class="section-title">📥 Available downloads</div> <div class="format-grid" id="formatList"></div> </div> </div> <div class="footer-note"> ⚡ demo tool • simulated backend response • supports any public video URL (preview) </div> </div>
.url-icon padding: 0 1rem 0 1.25rem; color: #5b6e8c; font-size: 1.2rem;