File size: 5,531 Bytes
af9ae49 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
// Shared JavaScript across all pages
// File upload handling
document.addEventListener('DOMContentLoaded', function() {
const fileInput = document.getElementById('pdfUpload');
if (fileInput) {
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
handleFileUpload(file);
}
});
}
// Drag and drop functionality
const uploadZone = document.querySelector('.border-dashed');
if (uploadZone) {
uploadZone.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('border-indigo-400', 'bg-indigo-50');
});
uploadZone.addEventListener('dragleave', function(e) {
e.preventDefault();
this.classList.remove('border-indigo-400', 'bg-indigo-50');
});
uploadZone.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('border-indigo-400', 'bg-indigo-50');
const files = e.dataTransfer.files;
if (files.length > 0 && files[0].type === 'application/pdf') {
handleFileUpload(files[0]);
} else {
alert('Please upload a valid PDF file.');
}
});
}
});
function handleFileUpload(file) {
console.log('File selected:', file.name);
// Show loading state
const uploadZone = document.querySelector('.border-dashed');
if (uploadZone) {
uploadZone.innerHTML = `
<div class="flex flex-col items-center justify-center py-12">
<div class="spinner mb-4"></div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Processing your PDF...</h3>
<p class="text-gray-500">This may take a few seconds</p>
</div>
`;
// Simulate processing (in real app, this would be API call)
setTimeout(() => {
showSuccessMessage(file);
}, 3000);
}
}
function showSuccessMessage(file) {
const uploadZone = document.querySelector('.border-dashed');
if (uploadZone) {
uploadZone.innerHTML = `
<div class="flex flex-col items-center justify-center py-8">
<i data-feather="check-circle" class="w-16 h-16 text-green-500 mb-4"></i>
<h3 class="text-2xl font-semibold text-gray-800 mb-2">Compression Complete! 🎉</h3>
<p class="text-gray-600 mb-4">Your PDF has been optimized successfully!</p>
<div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
<div class="flex justify-between items-center">
<span class="text-green-800">Original size:</span>
<span class="text-green-800 font-semibold">${(Math.random() * 5 + 1).toFixed(1)} MB</span>
</div>
<div class="flex justify-between items-center mt-2">
<span class="text-green-800">Compressed size:</span>
<span class="text-green-800 font-semibold">${(Math.random() * 2).toFixed(1)} MB</span>
</div>
<div class="flex justify-between items-center mt-2">
<span class="text-green-800">Reduction:</span>
<span class="text-green-800 font-semibold">${Math.floor(Math.random() * 60 + 30)}%</span>
</div>
</div>
<button class="bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
Download Compressed PDF
</button>
<button onclick="resetUpload()" class="text-indigo-600 hover:text-indigo-800 mt-4 font-medium">
Compress Another PDF
</button>
</div>
`;
feather.replace();
}
}
function resetUpload() {
const uploadZone = document.querySelector('.border-dashed');
if (uploadZone) {
uploadZone.innerHTML = `
<div class="flex flex-col items-center justify-center py-12">
<i data-feather="upload-cloud" class="w-16 h-16 text-indigo-500 mb-4"></i>
<h3 class="text-2xl font-semibold text-gray-800 mb-2">Drop your PDF here</h3>
<p class="text-gray-500 mb-6">or click to browse your files</p>
<input type="file" id="pdfUpload" accept=".pdf" class="hidden">
<button onclick="document.getElementById('pdfUpload').click()"
class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
Choose PDF File
</button>
</div>
`;
feather.replace();
// Re-attach event listeners
const fileInput = document.getElementById('pdfUpload');
if (fileInput) {
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
handleFileUpload(file);
}
});
}
}
}
// Initialize tooltips and other UI enhancements
document.addEventListener('DOMContentLoaded', function() {
console.log('PDF Squeeze Pro - OCR Magic Compressor loaded!');
}); |