|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>mp3_mp4 - Video Downloader</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
@keyframes slideUp { |
|
|
from { transform: translateY(20px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
.slide-up { |
|
|
animation: slideUp 0.4s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #4f46e5; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
|
|
|
.dark-toggle { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen transition-colors duration-300"> |
|
|
|
|
|
<div class="max-w-md mx-auto min-h-screen flex flex-col overflow-hidden relative" id="app"> |
|
|
|
|
|
<div id="welcome-screen" class="flex flex-col items-center justify-center flex-1 p-6 fade-in"> |
|
|
<div class="text-center slide-up"> |
|
|
<div class="w-24 h-24 bg-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"> |
|
|
<i class="fas fa-music text-white text-4xl"></i> |
|
|
</div> |
|
|
<h1 class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">mp3_mp4</h1> |
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8">Paste your link and download easily</p> |
|
|
<button onclick="showMainScreen()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full shadow-md transition-all transform hover:scale-105"> |
|
|
Start |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="main-screen" class="flex-1 flex flex-col p-6 hidden"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">Download Media</h2> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleDarkMode()" class="dark-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"> |
|
|
<i class="fas fa-moon dark:hidden"></i> |
|
|
<i class="fas fa-sun hidden dark:block"></i> |
|
|
</button> |
|
|
<button onclick="showHistoryScreen()" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"> |
|
|
<i class="fas fa-history"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col"> |
|
|
<div class="mb-6"> |
|
|
<label for="video-url" class="block text-sm font-medium mb-2">Video URL</label> |
|
|
<div class="relative"> |
|
|
<input type="text" id="video-url" placeholder="Paste YouTube, TikTok, Instagram, etc. link here" |
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all"> |
|
|
<button onclick="pasteFromClipboard()" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1 rounded-md text-sm transition-colors"> |
|
|
<i class="fas fa-paste mr-1"></i> Paste |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Download Format</label> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button id="mp3-btn" onclick="selectFormat('mp3')" class="format-btn bg-indigo-100 dark:bg-indigo-900 border-2 border-indigo-300 dark:border-indigo-700 py-3 px-4 rounded-lg flex items-center justify-center transition-all hover:bg-indigo-200 dark:hover:bg-indigo-800"> |
|
|
<i class="fas fa-music mr-2"></i> MP3 (Audio) |
|
|
</button> |
|
|
<button id="mp4-btn" onclick="selectFormat('mp4')" class="format-btn bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 py-3 px-4 rounded-lg flex items-center justify-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-video mr-2"></i> MP4 (Video) |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-auto"> |
|
|
<button id="download-btn" onclick="startDownload()" disabled class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"> |
|
|
<i class="fas fa-download mr-2"></i> Download |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="progress-screen" class="flex-1 flex flex-col items-center justify-center p-6 hidden"> |
|
|
<div class="text-center max-w-xs"> |
|
|
<div class="relative w-24 h-24 mb-6"> |
|
|
<div class="absolute inset-0 rounded-full border-4 border-indigo-200 dark:border-indigo-800"></div> |
|
|
<div id="progress-circle" class="absolute inset-0 rounded-full border-4 border-indigo-500 border-t-indigo-500 border-r-indigo-500 animate-spin" style="clip: rect(0, 24px, 24px, 12px);"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i id="progress-icon" class="fas fa-download text-indigo-500 text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 id="progress-title" class="text-xl font-semibold mb-2">Preparing Download</h3> |
|
|
<p id="progress-message" class="text-gray-600 dark:text-gray-300 mb-6">Validating your link...</p> |
|
|
|
|
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6"> |
|
|
<div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
|
|
|
<button onclick="cancelDownload()" class="text-indigo-600 dark:text-indigo-400 font-medium hover:underline"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="history-screen" class="flex-1 flex flex-col p-6 hidden"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">Download History</h2> |
|
|
<button onclick="showMainScreen()" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
<div id="history-list" class="space-y-3"> |
|
|
|
|
|
<div class="text-center py-10 text-gray-500" id="empty-history"> |
|
|
<i class="fas fa-history text-4xl mb-3 opacity-30"></i> |
|
|
<p>Your download history is empty</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings-menu" class="absolute inset-0 bg-white dark:bg-gray-800 shadow-lg z-10 hidden flex-col p-6"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">Settings</h2> |
|
|
<button onclick="hideSettingsMenu()" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<h3 class="font-medium mb-3">Appearance</h3> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span>Dark Mode</span> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" id="dark-mode-toggle" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-3">Download Options</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span>Default Format</span> |
|
|
<select class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-md px-3 py-1 text-sm"> |
|
|
<option>MP3</option> |
|
|
<option>MP4</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span>Video Quality</span> |
|
|
<select class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-md px-3 py-1 text-sm"> |
|
|
<option>720p (Recommended)</option> |
|
|
<option>480p</option> |
|
|
<option>360p</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-3">About</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">App mp3_mp4 - Designed to simplify your downloads</p> |
|
|
<p class="text-sm text-gray-500 mt-2">Version 1.0.0</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-auto pt-6"> |
|
|
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition-all"> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let currentFormat = null; |
|
|
let downloadInProgress = false; |
|
|
let downloadHistory = JSON.parse(localStorage.getItem('downloadHistory')) || []; |
|
|
|
|
|
|
|
|
const welcomeScreen = document.getElementById('welcome-screen'); |
|
|
const mainScreen = document.getElementById('main-screen'); |
|
|
const progressScreen = document.getElementById('progress-screen'); |
|
|
const historyScreen = document.getElementById('history-screen'); |
|
|
const settingsMenu = document.getElementById('settings-menu'); |
|
|
const downloadBtn = document.getElementById('download-btn'); |
|
|
const videoUrlInput = document.getElementById('video-url'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const progressTitle = document.getElementById('progress-title'); |
|
|
const progressMessage = document.getElementById('progress-message'); |
|
|
const progressCircle = document.getElementById('progress-circle'); |
|
|
const progressIcon = document.getElementById('progress-icon'); |
|
|
const historyList = document.getElementById('history-list'); |
|
|
const emptyHistory = document.getElementById('empty-history'); |
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle'); |
|
|
|
|
|
|
|
|
function initApp() { |
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'true' || |
|
|
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
darkModeToggle.checked = true; |
|
|
} |
|
|
|
|
|
|
|
|
renderHistory(); |
|
|
} |
|
|
|
|
|
|
|
|
function showMainScreen() { |
|
|
welcomeScreen.classList.add('hidden'); |
|
|
mainScreen.classList.remove('hidden'); |
|
|
progressScreen.classList.add('hidden'); |
|
|
historyScreen.classList.add('hidden'); |
|
|
settingsMenu.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showProgressScreen() { |
|
|
mainScreen.classList.add('hidden'); |
|
|
progressScreen.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function showHistoryScreen() { |
|
|
mainScreen.classList.add('hidden'); |
|
|
historyScreen.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function showSettingsMenu() { |
|
|
settingsMenu.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideSettingsMenu() { |
|
|
settingsMenu.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function selectFormat(format) { |
|
|
currentFormat = format; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.format-btn').forEach(btn => { |
|
|
btn.classList.remove('border-indigo-300', 'dark:border-indigo-700', 'bg-indigo-100', 'dark:bg-indigo-900'); |
|
|
btn.classList.add('border-gray-300', 'dark:border-gray-700', 'bg-gray-100', 'dark:bg-gray-800'); |
|
|
}); |
|
|
|
|
|
const selectedBtn = document.getElementById(`${format}-btn`); |
|
|
selectedBtn.classList.remove('border-gray-300', 'dark:border-gray-700', 'bg-gray-100', 'dark:bg-gray-800'); |
|
|
selectedBtn.classList.add('border-indigo-300', 'dark:border-indigo-700', 'bg-indigo-100', 'dark:bg-indigo-900'); |
|
|
|
|
|
|
|
|
updateDownloadButtonState(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateDownloadButtonState() { |
|
|
const url = videoUrlInput.value.trim(); |
|
|
downloadBtn.disabled = !(url && currentFormat); |
|
|
} |
|
|
|
|
|
|
|
|
function pasteFromClipboard() { |
|
|
navigator.clipboard.readText().then(text => { |
|
|
videoUrlInput.value = text; |
|
|
updateDownloadButtonState(); |
|
|
}).catch(err => { |
|
|
console.error('Failed to read clipboard:', err); |
|
|
|
|
|
videoUrlInput.value = ''; |
|
|
videoUrlInput.placeholder = "Paste not supported, type manually"; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function startDownload() { |
|
|
const url = videoUrlInput.value.trim(); |
|
|
if (!url || !currentFormat) return; |
|
|
|
|
|
showProgressScreen(); |
|
|
downloadInProgress = true; |
|
|
|
|
|
|
|
|
simulateDownloadProcess(url, currentFormat); |
|
|
} |
|
|
|
|
|
|
|
|
function cancelDownload() { |
|
|
downloadInProgress = false; |
|
|
progressTitle.textContent = 'Download Cancelled'; |
|
|
progressMessage.textContent = 'The download was cancelled by the user'; |
|
|
progressIcon.className = 'fas fa-times-circle text-red-500 text-2xl'; |
|
|
progressBar.style.width = '0%'; |
|
|
|
|
|
setTimeout(() => { |
|
|
showMainScreen(); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
function simulateDownloadProcess(url, format) { |
|
|
|
|
|
progressTitle.textContent = 'Validating Link'; |
|
|
progressMessage.textContent = 'Checking if the URL is valid...'; |
|
|
progressBar.style.width = '10%'; |
|
|
|
|
|
setTimeout(() => { |
|
|
if (!isValidUrl(url)) { |
|
|
downloadInProgress = false; |
|
|
progressTitle.textContent = 'Invalid Link'; |
|
|
progressMessage.textContent = 'Please check the URL and try again'; |
|
|
progressIcon.className = 'fas fa-exclamation-circle text-red-500 text-2xl'; |
|
|
progressBar.style.width = '0%'; |
|
|
|
|
|
setTimeout(() => { |
|
|
showMainScreen(); |
|
|
}, 2000); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
progressTitle.textContent = 'Downloading'; |
|
|
progressMessage.textContent = `Preparing ${format.toUpperCase()} file...`; |
|
|
progressBar.style.width = '30%'; |
|
|
|
|
|
setTimeout(() => { |
|
|
progressBar.style.width = '60%'; |
|
|
progressMessage.textContent = 'Processing media...'; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
downloadInProgress = false; |
|
|
progressBar.style.width = '100%'; |
|
|
progressTitle.textContent = 'Download Complete'; |
|
|
progressMessage.textContent = `Your ${format.toUpperCase()} file is ready`; |
|
|
progressIcon.className = 'fas fa-check-circle text-green-500 text-2xl'; |
|
|
|
|
|
|
|
|
addToHistory(url, format); |
|
|
|
|
|
setTimeout(() => { |
|
|
showMainScreen(); |
|
|
progressBar.style.width = '0%'; |
|
|
}, 2000); |
|
|
}, 1500); |
|
|
}, 1500); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
function isValidUrl(url) { |
|
|
try { |
|
|
new URL(url); |
|
|
return true; |
|
|
} catch (e) { |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addToHistory(url, format) { |
|
|
const entry = { |
|
|
id: Date.now(), |
|
|
url, |
|
|
format, |
|
|
title: `Downloaded ${format.toUpperCase()} from ${extractDomain(url)}`, |
|
|
date: new Date().toLocaleString(), |
|
|
filename: `media_${Date.now()}.${format}` |
|
|
}; |
|
|
|
|
|
downloadHistory.unshift(entry); |
|
|
localStorage.setItem('downloadHistory', JSON.stringify(downloadHistory)); |
|
|
renderHistory(); |
|
|
} |
|
|
|
|
|
function renderHistory() { |
|
|
if (downloadHistory.length === 0) { |
|
|
emptyHistory.classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
emptyHistory.classList.add('hidden'); |
|
|
historyList.innerHTML = ''; |
|
|
|
|
|
downloadHistory.forEach(entry => { |
|
|
const historyItem = document.createElement('div'); |
|
|
historyItem.className = 'bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700'; |
|
|
historyItem.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-medium truncate">${entry.title}</h3> |
|
|
<span class="text-xs text-gray-500 ml-2 whitespace-nowrap">${entry.date}</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between text-sm"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200"> |
|
|
${entry.format.toUpperCase()} |
|
|
</span> |
|
|
<div class="space-x-2"> |
|
|
<button onclick="playMedia('${entry.filename}')" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"> |
|
|
<i class="fas fa-play"></i> Play |
|
|
</button> |
|
|
<button onclick="showInFolder('${entry.filename}')" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-folder-open"></i> Folder |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
historyList.appendChild(historyItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function playMedia(filename) { |
|
|
alert(`In a real app, this would play: ${filename}`); |
|
|
} |
|
|
|
|
|
function showInFolder(filename) { |
|
|
alert(`In a real app, this would open folder containing: ${filename}`); |
|
|
} |
|
|
|
|
|
|
|
|
function extractDomain(url) { |
|
|
try { |
|
|
const domain = new URL(url).hostname.replace('www.', ''); |
|
|
return domain.split('.')[0]; |
|
|
} catch (e) { |
|
|
return 'unknown'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function toggleDarkMode() { |
|
|
const isDark = document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('darkMode', isDark); |
|
|
darkModeToggle.checked = isDark; |
|
|
} |
|
|
|
|
|
|
|
|
videoUrlInput.addEventListener('input', updateDownloadButtonState); |
|
|
darkModeToggle.addEventListener('change', toggleDarkMode); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', initApp); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AllBajo/mp3-mp4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
