| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Movie Downloader & Uploader</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| </head> |
| <body class="bg-gray-100 min-h-screen flex items-center justify-center"> |
| <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md"> |
| <h1 class="text-2xl font-bold mb-6 text-center text-blue-600">Movie Transfer Tool</h1> |
| <form id="downloadForm" class="space-y-4"> |
| <div> |
| <label for="url" class="block text-sm font-medium text-gray-700">DownloadWella URL</label> |
| <input type="url" id="url" name="url" required |
| class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" |
| placeholder="https://downloadwella.com/..."> |
| </div> |
| <button type="submit" id="submitBtn" |
| class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| Start Process |
| </button> |
| </form> |
| <div id="status" class="mt-6 hidden"> |
| <h2 class="text-sm font-semibold text-gray-600 uppercase tracking-wider">Status</h2> |
| <div id="statusList" class="mt-2 text-sm text-gray-500 space-y-1"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const form = document.getElementById('downloadForm'); |
| const statusDiv = document.getElementById('status'); |
| const statusList = document.getElementById('statusList'); |
| const submitBtn = document.getElementById('submitBtn'); |
| |
| function addStatus(message, isError = false) { |
| const p = document.createElement('p'); |
| p.textContent = message; |
| if (isError) p.classList.add('text-red-500', 'font-bold'); |
| statusList.appendChild(p); |
| statusDiv.classList.remove('hidden'); |
| } |
| |
| form.onsubmit = async (e) => { |
| e.preventDefault(); |
| const url = document.getElementById('url').value; |
| |
| submitBtn.disabled = true; |
| submitBtn.classList.add('opacity-50', 'cursor-not-allowed'); |
| statusList.innerHTML = ''; |
| addStatus('Initiating process...'); |
| |
| try { |
| const response = await fetch('/process', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, |
| body: new URLSearchParams({ 'url': url }) |
| }); |
| |
| const reader = response.body.getReader(); |
| const decoder = new TextDecoder(); |
| |
| while (true) { |
| const { value, done } = await reader.read(); |
| if (done) break; |
| |
| const text = decoder.decode(value); |
| const lines = text.split('\n'); |
| for (const line of lines) { |
| if (line.trim()) { |
| try { |
| const data = JSON.parse(line); |
| addStatus(data.message, data.error); |
| } catch (e) { |
| |
| } |
| } |
| } |
| } |
| } catch (error) { |
| addStatus('Network error: ' + error.message, true); |
| } finally { |
| submitBtn.disabled = false; |
| submitBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| } |
| }; |
| </script> |
| </body> |
| </html> |
|
|
