| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HTML to MP4 Converter | WebMagic</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> |
| .dropzone { |
| border: 2px dashed #3b82f6; |
| transition: all 0.3s ease; |
| } |
| .dropzone.active { |
| border-color: #10b981; |
| background-color: #f0f9ff; |
| } |
| .progress-bar { |
| transition: width 0.5s ease; |
| } |
| .conversion-animation { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
| .file-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-12"> |
| |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl font-bold text-blue-600 mb-3">WebMagic Converter</h1> |
| <p class="text-xl text-gray-600">Transform your HTML files into MP4 videos with ease</p> |
| <div class="w-24 h-1 bg-blue-500 mx-auto mt-4 rounded-full"></div> |
| </header> |
|
|
| |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| |
| <div class="md:w-1/2 p-8 bg-gradient-to-br from-blue-50 to-indigo-50"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Upload HTML File</h2> |
| |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6"> |
| <div class="flex flex-col items-center justify-center"> |
| <i class="fas fa-file-code text-5xl text-blue-500 mb-4"></i> |
| <p class="text-gray-600 mb-2">Drag & drop your HTML file here</p> |
| <p class="text-sm text-gray-500">or</p> |
| <button id="browseBtn" class="mt-3 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
| Browse Files |
| </button> |
| </div> |
| <input type="file" id="fileInput" class="hidden" accept=".html,.htm"> |
| </div> |
| |
| <div id="fileInfo" class="hidden bg-white p-4 rounded-lg shadow-sm mb-6"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-code text-blue-500 text-2xl mr-3"></i> |
| <div> |
| <h3 id="fileName" class="font-medium text-gray-800"></h3> |
| <p id="fileSize" class="text-sm text-gray-500"></p> |
| </div> |
| <button id="removeFile" class="ml-auto text-gray-400 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">Resolution</label> |
| <select id="resolution" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> |
| <option value="720p">720p (HD)</option> |
| <option value="1080p" selected>1080p (Full HD)</option> |
| <option value="4k">4K (Ultra HD)</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-gray-700 mb-2">Frame Rate</label> |
| <select id="fps" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"> |
| <option value="24">24 fps</option> |
| <option value="30" selected>30 fps</option> |
| <option value="60">60 fps</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="md:w-1/2 p-8"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Convert to MP4</h2> |
| |
| <div id="previewSection" class="hidden mb-6"> |
| <div class="bg-gray-100 rounded-lg p-4 mb-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-gray-700">Preview</span> |
| <button id="refreshPreview" class="text-blue-600 hover:text-blue-800 text-sm"> |
| <i class="fas fa-sync-alt mr-1"></i> Refresh |
| </button> |
| </div> |
| <div id="htmlPreview" class="bg-white border border-gray-200 rounded h-48 overflow-auto p-2"> |
| |
| </div> |
| </div> |
| </div> |
| |
| <div id="conversionSection" class="hidden"> |
| <div class="mb-4"> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">Conversion Progress</span> |
| <span id="progressPercent" class="text-sm font-medium text-blue-600">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="progressBar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div id="conversionStatus" class="flex items-center p-4 mb-4 text-sm text-blue-700 bg-blue-50 rounded-lg"> |
| <i class="fas fa-info-circle mr-3"></i> |
| <span>Ready to convert your file</span> |
| </div> |
| |
| <button id="convertBtn" class="w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-indigo-700 transition flex items-center justify-center"> |
| <i class="fas fa-magic mr-2"></i> Convert to MP4 |
| </button> |
| </div> |
| |
| <div id="resultSection" class="hidden mt-6"> |
| <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-green-700"> |
| Conversion completed successfully! Your MP4 file is ready to download. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-video text-indigo-500 text-2xl mr-3"></i> |
| <div> |
| <h3 id="outputFileName" class="font-medium text-gray-800"></h3> |
| <p class="text-sm text-gray-500">MP4 Video File</p> |
| </div> |
| <button id="downloadBtn" class="ml-auto px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center"> |
| <i class="fas fa-download mr-2"></i> Download |
| </button> |
| </div> |
| </div> |
| |
| <button id="newConversionBtn" class="w-full py-2 px-4 border border-blue-600 text-blue-600 font-medium rounded-lg hover:bg-blue-50 transition"> |
| <i class="fas fa-plus mr-2"></i> Start New Conversion |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-4xl mx-auto mt-16"> |
| <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">How It Works</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-upload text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-lg font-semibold mb-2">Upload HTML</h3> |
| <p class="text-gray-600">Upload your HTML file by dragging and dropping or browsing your files.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-cog text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-lg font-semibold mb-2">Customize Settings</h3> |
| <p class="text-gray-600">Select your preferred resolution and frame rate for the output video.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-file-video text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-lg font-semibold mb-2">Download MP4</h3> |
| <p class="text-gray-600">Download your converted MP4 file instantly after processing.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer class="mt-16 text-center text-gray-500 text-sm"> |
| <p>© 2023 WebMagic Converter. All rights reserved.</p> |
| <p class="mt-2">This is a client-side demo. For actual HTML to MP4 conversion, server-side processing would be required.</p> |
| </footer> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('fileInput'); |
| const browseBtn = document.getElementById('browseBtn'); |
| const fileInfo = document.getElementById('fileInfo'); |
| const fileName = document.getElementById('fileName'); |
| const fileSize = document.getElementById('fileSize'); |
| const removeFile = document.getElementById('removeFile'); |
| const previewSection = document.getElementById('previewSection'); |
| const htmlPreview = document.getElementById('htmlPreview'); |
| const refreshPreview = document.getElementById('refreshPreview'); |
| const conversionSection = document.getElementById('conversionSection'); |
| const convertBtn = document.getElementById('convertBtn'); |
| const progressBar = document.getElementById('progressBar'); |
| const progressPercent = document.getElementById('progressPercent'); |
| const conversionStatus = document.getElementById('conversionStatus'); |
| const resultSection = document.getElementById('resultSection'); |
| const outputFileName = document.getElementById('outputFileName'); |
| const downloadBtn = document.getElementById('downloadBtn'); |
| const newConversionBtn = document.getElementById('newConversionBtn'); |
| |
| let uploadedFile = null; |
| let objectUrl = null; |
| |
| |
| browseBtn.addEventListener('click', () => fileInput.click()); |
| fileInput.addEventListener('change', handleFileSelect); |
| dropzone.addEventListener('dragover', handleDragOver); |
| dropzone.addEventListener('dragleave', handleDragLeave); |
| dropzone.addEventListener('drop', handleDrop); |
| removeFile.addEventListener('click', resetFileInput); |
| refreshPreview.addEventListener('click', displayFilePreview); |
| convertBtn.addEventListener('click', startConversion); |
| downloadBtn.addEventListener('click', downloadFile); |
| newConversionBtn.addEventListener('click', resetConverter); |
| |
| |
| function handleFileSelect(e) { |
| const file = e.target.files[0]; |
| if (file && file.name.endsWith('.html') || file.name.endsWith('.htm')) { |
| processFile(file); |
| } else { |
| showError('Please select a valid HTML file (.html or .htm)'); |
| } |
| } |
| |
| function handleDragOver(e) { |
| e.preventDefault(); |
| dropzone.classList.add('active'); |
| } |
| |
| function handleDragLeave() { |
| dropzone.classList.remove('active'); |
| } |
| |
| function handleDrop(e) { |
| e.preventDefault(); |
| dropzone.classList.remove('active'); |
| |
| const file = e.dataTransfer.files[0]; |
| if (file && file.name.endsWith('.html') || file.name.endsWith('.htm')) { |
| processFile(file); |
| } else { |
| showError('Please drop a valid HTML file (.html or .htm)'); |
| } |
| } |
| |
| function processFile(file) { |
| uploadedFile = file; |
| |
| |
| fileName.textContent = file.name; |
| fileSize.textContent = formatFileSize(file.size); |
| fileInfo.classList.remove('hidden'); |
| previewSection.classList.remove('hidden'); |
| conversionSection.classList.remove('hidden'); |
| |
| |
| displayFilePreview(); |
| |
| |
| conversionStatus.innerHTML = `<i class="fas fa-check-circle mr-3 text-green-500"></i><span>File "${file.name}" ready for conversion</span>`; |
| conversionStatus.classList.remove('bg-blue-50', 'text-blue-700'); |
| conversionStatus.classList.add('bg-green-50', 'text-green-700'); |
| } |
| |
| function displayFilePreview() { |
| if (!uploadedFile) return; |
| |
| if (objectUrl) { |
| URL.revokeObjectURL(objectUrl); |
| } |
| |
| objectUrl = URL.createObjectURL(uploadedFile); |
| |
| |
| |
| htmlPreview.innerHTML = ` |
| <div class="text-center p-4"> |
| <i class="fas fa-file-code text-3xl text-blue-400 mb-2"></i> |
| <p class="font-medium">${uploadedFile.name}</p> |
| <p class="text-sm text-gray-500 mt-1">HTML file preview would be displayed here in a full implementation</p> |
| </div> |
| `; |
| } |
| |
| function startConversion() { |
| if (!uploadedFile) { |
| showError('Please select a file first'); |
| return; |
| } |
| |
| |
| convertBtn.disabled = true; |
| convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Converting...'; |
| conversionStatus.innerHTML = '<i class="fas fa-cog fa-spin mr-3"></i> Converting your HTML to MP4...'; |
| conversionStatus.classList.remove('bg-green-50', 'text-green-700'); |
| conversionStatus.classList.add('bg-blue-50', 'text-blue-700'); |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress > 100) progress = 100; |
| |
| progressBar.style.width = `${progress}%`; |
| progressPercent.textContent = `${Math.round(progress)}%`; |
| |
| if (progress === 100) { |
| clearInterval(interval); |
| conversionComplete(); |
| } |
| }, 300); |
| } |
| |
| function conversionComplete() { |
| convertBtn.classList.add('hidden'); |
| resultSection.classList.remove('hidden'); |
| |
| const outputName = uploadedFile.name.replace('.html', '.mp4').replace('.htm', '.mp4'); |
| outputFileName.textContent = outputName; |
| |
| conversionStatus.innerHTML = '<i class="fas fa-check-circle mr-3 text-green-500"></i> Conversion completed successfully!'; |
| conversionStatus.classList.remove('bg-blue-50', 'text-blue-700'); |
| conversionStatus.classList.add('bg-green-50', 'text-green-700'); |
| } |
| |
| function downloadFile() { |
| |
| |
| alert('In a real implementation, this would download the converted MP4 file.\n\nFor this demo, no actual conversion happens client-side.'); |
| } |
| |
| function resetConverter() { |
| resetFileInput(); |
| resultSection.classList.add('hidden'); |
| convertBtn.classList.remove('hidden'); |
| convertBtn.disabled = false; |
| convertBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Convert to MP4'; |
| progressBar.style.width = '0%'; |
| progressPercent.textContent = '0%'; |
| |
| conversionStatus.innerHTML = '<i class="fas fa-info-circle mr-3"></i><span>Ready to convert your file</span>'; |
| conversionStatus.classList.remove('bg-green-50', 'text-green-700'); |
| conversionStatus.classList.add('bg-blue-50', 'text-blue-700'); |
| } |
| |
| function resetFileInput() { |
| if (objectUrl) { |
| URL.revokeObjectURL(objectUrl); |
| objectUrl = null; |
| } |
| |
| uploadedFile = null; |
| fileInput.value = ''; |
| fileInfo.classList.add('hidden'); |
| previewSection.classList.add('hidden'); |
| conversionSection.classList.add('hidden'); |
| htmlPreview.innerHTML = ''; |
| } |
| |
| function showError(message) { |
| conversionStatus.innerHTML = `<i class="fas fa-exclamation-circle mr-3 text-red-500"></i><span>${message}</span>`; |
| conversionStatus.classList.remove('bg-blue-50', 'text-blue-700', 'bg-green-50', 'text-green-700'); |
| conversionStatus.classList.add('bg-red-50', 'text-red-700'); |
| } |
| |
| function formatFileSize(bytes) { |
| if (bytes === 0) return '0 Bytes'; |
| const k = 1024; |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
| } |
| }); |
| </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=Diabolov/mp4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
