114 lines
2.1 KiB
HTML
114 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>WebDLP</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/enrilinux/webdlp/refs/heads/main/logo.png">
|
|
</head>
|
|
|
|
<body class="bg-gray-900 text-white flex items-center justify-center h-screen">
|
|
|
|
<div class="bg-gray-800 p-10 rounded-2xl shadow-2xl w-96">
|
|
|
|
<h1 class="text-3xl font-bold mb-6 text-center">
|
|
WebDLP
|
|
</h1>
|
|
|
|
<input
|
|
id="url"
|
|
placeholder="Paste video URL"
|
|
class="w-full p-3 rounded bg-gray-700 mb-4"
|
|
/>
|
|
|
|
<select id="mode" class="w-full p-3 rounded bg-gray-700 mb-4">
|
|
<option value="video">Video (MP4)</option>
|
|
<option value="audio">Audio (MP3)</option>
|
|
</select>
|
|
|
|
<button
|
|
id="downloadBtn"
|
|
class="w-full bg-blue-600 hover:bg-blue-700 p-3 rounded font-semibold"
|
|
>
|
|
Download
|
|
</button>
|
|
|
|
<div id="status" class="mt-6 text-center text-sm"></div>
|
|
<div class="mt-6">
|
|
<h2 class="text-lg font-semibold mb-2 text-center">History</h2>
|
|
<div id="history" class="text-sm space-y-2 max-h-48 overflow-y-auto bg-gray-700 p-4 rounded"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
document.getElementById("downloadBtn").addEventListener("click", async () => {
|
|
|
|
const url = document.getElementById("url").value
|
|
const mode = document.getElementById("mode").value
|
|
const status = document.getElementById("status")
|
|
|
|
if(!url){
|
|
status.innerHTML = "Insert an URL"
|
|
return
|
|
}
|
|
|
|
status.innerHTML = "Downloading"
|
|
|
|
const form = new FormData()
|
|
form.append("url", url)
|
|
form.append("mode", mode)
|
|
|
|
try{
|
|
|
|
const res = await fetch("/download",{
|
|
method:"POST",
|
|
body:form
|
|
})
|
|
|
|
const data = await res.json()
|
|
|
|
status.innerHTML =
|
|
`Done<br>
|
|
<a href="/file?path=${data.path}" class="text-green-400 underline">
|
|
Download file
|
|
</a>`
|
|
|
|
}catch(e){
|
|
|
|
status.innerHTML = "Error: check logs"
|
|
|
|
}
|
|
|
|
})
|
|
|
|
async function loadHistory(){
|
|
|
|
const res = await fetch("/history")
|
|
const data = await res.json()
|
|
|
|
const box = document.getElementById("history")
|
|
box.innerHTML = ""
|
|
|
|
data.reverse().forEach(item => {
|
|
|
|
box.innerHTML += `
|
|
<div class="bg-gray-700 p-2 rounded">
|
|
${item.time} - ${item.mode}<br>
|
|
<a href="/file?path=${item.path}" class="text-green-400 underline">
|
|
Download
|
|
</a>
|
|
</div>
|
|
`
|
|
|
|
})
|
|
|
|
}
|
|
|
|
loadHistory()
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|