| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DocConvert - Online Document Converter</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> |
| .file-drop-area { |
| border: 2px dashed #cbd5e0; |
| border-radius: 0.5rem; |
| transition: all 0.3s ease; |
| } |
| .file-drop-area.active { |
| border-color: #4f46e5; |
| background-color: #f0f4ff; |
| } |
| .progress-bar { |
| transition: width 0.3s ease; |
| } |
| .conversion-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-file-export text-indigo-600 text-2xl"></i> |
| <h1 class="text-xl font-bold text-gray-800">DocConvert</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="text-indigo-600 font-medium">Home</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600">Features</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600">Pricing</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600">FAQ</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="hidden md:block text-gray-600 hover:text-indigo-600"> |
| <i class="fas fa-user"></i> |
| </button> |
| <button class="md:hidden text-gray-600"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="py-12 md:py-20 bg-gradient-to-r from-indigo-50 to-purple-50"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-5xl font-bold text-gray-800 mb-6">Convert Documents in Seconds</h2> |
| <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8"> |
| Easily convert Word to PDF, Excel to CSV, PowerPoint to images, and more. No installation needed. |
| </p> |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition"> |
| <i class="fas fa-file-word mr-2"></i> Word to PDF |
| </button> |
| <button class="bg-white hover:bg-gray-100 text-gray-800 px-6 py-3 rounded-lg font-medium border border-gray-200 transition"> |
| <i class="fas fa-file-excel mr-2"></i> Excel to CSV |
| </button> |
| <button class="bg-white hover:bg-gray-100 text-gray-800 px-6 py-3 rounded-lg font-medium border border-gray-200 transition"> |
| <i class="fas fa-file-powerpoint mr-2"></i> PPT to Image |
| </button> |
| </div> |
| <div class="max-w-4xl mx-auto"> |
| <img src="https://via.placeholder.com/800x400" alt="Document Conversion" class="rounded-xl shadow-lg w-full"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <main class="container mx-auto px-4 py-12"> |
| <div class="bg-white rounded-xl shadow-md p-6 md:p-8 max-w-4xl mx-auto"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| |
| <div class="md:w-1/3"> |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Conversion Options</h3> |
| <div class="space-y-3"> |
| <div class="p-4 rounded-lg bg-indigo-50 border border-indigo-100"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-word text-indigo-600 text-xl mr-3"></i> |
| <span class="font-medium">Word to PDF</span> |
| </div> |
| </div> |
| <div class="p-4 rounded-lg hover:bg-gray-50 border border-gray-200 cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-excel text-green-600 text-xl mr-3"></i> |
| <span class="font-medium">Excel to PDF</span> |
| </div> |
| </div> |
| <div class="p-4 rounded-lg hover:bg-gray-50 border border-gray-200 cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-powerpoint text-orange-600 text-xl mr-3"></i> |
| <span class="font-medium">PPT to PDF</span> |
| </div> |
| </div> |
| <div class="p-4 rounded-lg hover:bg-gray-50 border border-gray-200 cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-pdf text-red-600 text-xl mr-3"></i> |
| <span class="font-medium">PDF to Word</span> |
| </div> |
| </div> |
| <div class="p-4 rounded-lg hover:bg-gray-50 border border-gray-200 cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-csv text-blue-600 text-xl mr-3"></i> |
| <span class="font-medium">Excel to CSV</span> |
| </div> |
| </div> |
| <div class="p-4 rounded-lg hover:bg-gray-50 border border-gray-200 cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-image text-purple-600 text-xl mr-3"></i> |
| <span class="font-medium">PPT to Images</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="md:w-2/3"> |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Upload Your File</h3> |
| <div id="fileDropArea" class="file-drop-area p-8 text-center mb-6"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-400 mb-4"></i> |
| <p class="text-gray-600 mb-2">Drag & drop your file here</p> |
| <p class="text-sm text-gray-500 mb-4">or</p> |
| <label for="fileInput" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium cursor-pointer inline-block transition"> |
| Browse Files |
| </label> |
| <input type="file" id="fileInput" class="hidden"> |
| <p class="text-xs text-gray-500 mt-4">Supported formats: DOC, DOCX, XLS, XLSX, PPT, PPTX, PDF</p> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h4 class="font-medium text-gray-700 mb-3">Conversion Settings</h4> |
| <div class="space-y-4"> |
| <div> |
| <label class="flex items-center"> |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600" checked> |
| <span class="ml-2 text-gray-700">Preserve formatting</span> |
| </label> |
| </div> |
| <div> |
| <label class="flex items-center"> |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600"> |
| <span class="ml-2 text-gray-700">Password protect PDF</span> |
| </label> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Quality:</label> |
| <select class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option>High (recommended)</option> |
| <option>Medium</option> |
| <option>Low (smaller file size)</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <button id="convertBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition"> |
| <i class="fas fa-exchange-alt mr-2"></i> Convert Now |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="progressModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl p-8 max-w-md w-full"> |
| <div class="text-center mb-6"> |
| <i class="fas fa-cog text-indigo-600 text-4xl animate-spin mb-4"></i> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Converting Your File</h3> |
| <p class="text-gray-600">Please wait while we process your document...</p> |
| </div> |
| <div class="mb-4"> |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
| <div id="progressBar" class="h-full bg-indigo-600 progress-bar" style="width: 0%"></div> |
| </div> |
| <p id="progressText" class="text-right text-sm text-gray-500 mt-1">0% complete</p> |
| </div> |
| <button id="cancelBtn" class="text-indigo-600 hover:text-indigo-800 font-medium"> |
| Cancel Conversion |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="resultModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl p-8 max-w-md w-full"> |
| <div class="text-center mb-6"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-check text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Conversion Complete!</h3> |
| <p class="text-gray-600">Your file has been successfully converted.</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-pdf text-red-500 text-2xl mr-3"></i> |
| <div> |
| <p class="font-medium">document_converted.pdf</p> |
| <p class="text-sm text-gray-500">2.4 MB • PDF</p> |
| </div> |
| </div> |
| <button class="text-indigo-600 hover:text-indigo-800"> |
| <i class="fas fa-download"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex flex-col sm:flex-row gap-3"> |
| <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg font-medium"> |
| <i class="fas fa-download mr-2"></i> Download |
| </button> |
| <button class="flex-1 bg-white hover:bg-gray-100 text-gray-800 py-2 px-4 rounded-lg font-medium border border-gray-300"> |
| <i class="fas fa-envelope mr-2"></i> Email |
| </button> |
| <button id="closeResultBtn" class="flex-1 bg-white hover:bg-gray-100 text-gray-800 py-2 px-4 rounded-lg font-medium border border-gray-300"> |
| Close |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <section class="bg-gray-50 py-12"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Why Choose DocConvert?</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 conversion-card"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
| <i class="fas fa-bolt text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Fast Conversion</h3> |
| <p class="text-gray-600">Convert your documents in seconds with our high-speed processing technology.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 conversion-card"> |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> |
| <i class="fas fa-lock text-green-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Secure Processing</h3> |
| <p class="text-gray-600">Your files are automatically deleted from our servers after 1 hour.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 conversion-card"> |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
| <i class="fas fa-mobile-alt text-purple-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Mobile Friendly</h3> |
| <p class="text-gray-600">Convert documents on the go with our mobile-optimized interface.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Users Say</h2> |
| <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto"> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <span class="text-indigo-600 font-bold">JD</span> |
| </div> |
| <div> |
| <h4 class="font-medium">John D.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"I use DocConvert daily for my business documents. The Word to PDF conversion is flawless and preserves all my formatting perfectly."</p> |
| </div> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
| <span class="text-purple-600 font-bold">SM</span> |
| </div> |
| <div> |
| <h4 class="font-medium">Sarah M.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"As a student, I need to convert research papers frequently. DocConvert saves me so much time compared to other tools I've tried."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-indigo-600 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold mb-6">Ready to Convert Your Documents?</h2> |
| <p class="text-lg mb-8 max-w-2xl mx-auto">Join thousands of users who trust DocConvert for their document conversion needs.</p> |
| <button class="bg-white hover:bg-gray-100 text-indigo-600 px-8 py-3 rounded-lg font-bold text-lg transition"> |
| Start Converting Now |
| </button> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-gray-300 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-white font-bold text-lg mb-4">DocConvert</h3> |
| <p class="mb-4">The fastest and most secure online document conversion tool.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h4 class="text-white font-bold mb-4">Quick Links</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white">Home</a></li> |
| <li><a href="#" class="hover:text-white">Word to PDF</a></li> |
| <li><a href="#" class="hover:text-white">Excel to CSV</a></li> |
| <li><a href="#" class="hover:text-white">PPT to Images</a></li> |
| <li><a href="#" class="hover:text-white">PDF to Word</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white font-bold mb-4">Company</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white">About Us</a></li> |
| <li><a href="#" class="hover:text-white">Pricing</a></li> |
| <li><a href="#" class="hover:text-white">Blog</a></li> |
| <li><a href="#" class="hover:text-white">Careers</a></li> |
| <li><a href="#" class="hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white font-bold mb-4">Legal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white">Terms of Service</a></li> |
| <li><a href="#" class="hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="hover:text-white">Cookie Policy</a></li> |
| <li><a href="#" class="hover:text-white">GDPR</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center"> |
| <p>© 2023 DocConvert. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const fileDropArea = document.getElementById('fileDropArea'); |
| const fileInput = document.getElementById('fileInput'); |
| const convertBtn = document.getElementById('convertBtn'); |
| const progressModal = document.getElementById('progressModal'); |
| const resultModal = document.getElementById('resultModal'); |
| const progressBar = document.getElementById('progressBar'); |
| const progressText = document.getElementById('progressText'); |
| const cancelBtn = document.getElementById('cancelBtn'); |
| const closeResultBtn = document.getElementById('closeResultBtn'); |
| |
| |
| fileDropArea.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| fileDropArea.classList.add('active'); |
| }); |
| |
| fileDropArea.addEventListener('dragleave', () => { |
| fileDropArea.classList.remove('active'); |
| }); |
| |
| fileDropArea.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| fileDropArea.classList.remove('active'); |
| if (e.dataTransfer.files.length) { |
| fileInput.files = e.dataTransfer.files; |
| updateFileDisplay(e.dataTransfer.files[0]); |
| } |
| }); |
| |
| fileInput.addEventListener('change', () => { |
| if (fileInput.files.length) { |
| updateFileDisplay(fileInput.files[0]); |
| } |
| }); |
| |
| convertBtn.addEventListener('click', startConversion); |
| cancelBtn.addEventListener('click', cancelConversion); |
| closeResultBtn.addEventListener('click', () => { |
| resultModal.classList.add('hidden'); |
| }); |
| |
| |
| function updateFileDisplay(file) { |
| const fileName = file.name; |
| const fileSize = (file.size / (1024 * 1024)).toFixed(2); |
| |
| fileDropArea.innerHTML = ` |
| <div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-200"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-word text-indigo-600 text-2xl mr-3"></i> |
| <div> |
| <p class="font-medium truncate max-w-xs">${fileName}</p> |
| <p class="text-sm text-gray-500">${fileSize} MB</p> |
| </div> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600" onclick="clearFile()"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| `; |
| } |
| |
| function clearFile() { |
| fileInput.value = ''; |
| fileDropArea.innerHTML = ` |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-400 mb-4"></i> |
| <p class="text-gray-600 mb-2">Drag & drop your file here</p> |
| <p class="text-sm text-gray-500 mb-4">or</p> |
| <label for="fileInput" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium cursor-pointer inline-block transition"> |
| Browse Files |
| </label> |
| <p class="text-xs text-gray-500 mt-4">Supported formats: DOC, DOCX, XLS, XLSX, PPT, PPTX, PDF</p> |
| `; |
| } |
| |
| function startConversion() { |
| if (!fileInput.files.length) { |
| alert('Please select a file first!'); |
| return; |
| } |
| |
| |
| progressModal.classList.remove('hidden'); |
| |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress > 100) progress = 100; |
| |
| progressBar.style.width = `${progress}%`; |
| progressText.textContent = `${Math.round(progress)}% complete`; |
| |
| if (progress === 100) { |
| clearInterval(interval); |
| setTimeout(() => { |
| progressModal.classList.add('hidden'); |
| resultModal.classList.remove('hidden'); |
| }, 500); |
| } |
| }, 300); |
| |
| |
| convertBtn.dataset.intervalId = interval; |
| } |
| |
| function cancelConversion() { |
| const intervalId = convertBtn.dataset.intervalId; |
| if (intervalId) { |
| clearInterval(intervalId); |
| } |
| progressModal.classList.add('hidden'); |
| progressBar.style.width = '0%'; |
| progressText.textContent = '0% complete'; |
| } |
| </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=3sangave/rutik" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
