# PDF Unlocker Tool - Complete JavaScript Code
Here's a complete JavaScript implementation for a PDF unlocker tool similar to the one on ilovepdf.com. This code can be pasted directly into your Blogger HTML/JavaScript gadget:
```html
<div class="pdf-unlocker-container">
<h2>PDF Unlocker Tool</h2>
<p>Remove password protection from your PDF files</p>
<div class="upload-area" id="dropArea">
<input type="file" id="fileInput" accept=".pdf" style="display: none;">
<div class="upload-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#4a90e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
</div>
<p>Drag & drop your PDF file here or</p>
<button class="btn-select" id="selectBtn">Select PDF File</button>
<p class="file-requirements">Max file size: 50MB</p>
</div>
<div class="password-section" id="passwordSection" style="display: none;">
<h3>Enter PDF Password</h3>
<input type="password" id="pdfPassword" placeholder="Enter PDF password (if any)">
<button class="btn-unlock" id="unlockBtn">Unlock PDF</button>
</div>
<div class="processing-section" id="processingSection" style="display: none;">
<div class="spinner"></div>
<p>Processing your PDF file...</p>
</div>
<div class="result-section" id="resultSection" style="display: none;">
<h3>PDF Unlocked Successfully!</h3>
<p>Your PDF is now ready to download</p>
<button class="btn-download" id="downloadBtn">Download PDF</button>
</div>
<div class="error-message" id="errorMessage" style="display: none;"></div>
</div>
<style>
.pdf-unlocker-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.pdf-unlocker-container h2 {
color: #333;
margin-bottom: 10px;
}
.pdf-unlocker-container p {
color: #666;
margin-bottom: 20px;
}
.upload-area {
border: 2px dashed #ccc;
border-radius: 6px;
padding: 30px;
margin-bottom: 20px;
transition: all 0.3s;
cursor: pointer;
}
.upload-area:hover {
border-color: #4a90e2;
background-color: #f0f7ff;
}
.upload-icon {
margin-bottom: 15px;
}
.btn-select, .btn-unlock, .btn-download {
background-color: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.btn-select:hover, .btn-unlock:hover, .btn-download:hover {
background-color: #3a7bc8;
}
.file-requirements {
font-size: 12px;
color: #999;
margin-top: 10px;
}
.password-section {
margin: 20px 0;
}
.password-section input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.processing-section {
margin: 30px 0;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4px solid #4a90e2;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-message {
color: #e74c3c;
padding: 10px;
margin-top: 15px;
border-radius: 4px;
background-color: #fdecea;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const fileInput = document.getElementById('fileInput');
const selectBtn = document.getElementById('selectBtn');
const dropArea = document.getElementById('dropArea');
const passwordSection = document.getElementById('passwordSection');
const processingSection = document.getElementById('processingSection');
const resultSection = document.getElementById('resultSection');
const errorMessage = document.getElementById('errorMessage');
const pdfPassword = document.getElementById('pdfPassword');
const unlockBtn = document.getElementById('unlockBtn');
const downloadBtn = document.getElementById('downloadBtn');
let selectedFile = null;
let unlockedPdfUrl = null;
// Event listeners
selectBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileSelect);
dropArea.addEventListener('dragover', handleDragOver);
dropArea.addEventListener('dragleave', handleDragLeave);
dropArea.addEventListener('drop', handleDrop);
unlockBtn.addEventListener('click', unlockPdf);
downloadBtn.addEventListener('click', downloadPdf);
function handleFileSelect(e) {
const file = e.target.files[0];
processSelectedFile(file);
}
function handleDragOver(e) {
e.preventDefault();
e.stopPropagation();
dropArea.style.borderColor = '#4a90e2';
dropArea.style.backgroundColor = '#f0f7ff';
}
function handleDragLeave(e) {
e.preventDefault();
e.stopPropagation();
dropArea.style.borderColor = '#ccc';
dropArea.style.backgroundColor = '';
}
function handleDrop(e) {
e.preventDefault();
e.stopPropagation();
handleDragLeave(e);
const file = e.dataTransfer.files[0];
processSelectedFile(file);
}
function processSelectedFile(file) {
// Reset previous state
hideAllSections();
errorMessage.style.display = 'none';
// Validate file
if (!file) return;
if (file.type !== 'application/pdf') {
showError('Please select a PDF file.');
return;
}
if (file.size > 50 * 1024 * 1024) { // 50MB limit
showError('File size exceeds 50MB limit.');
return;
}
selectedFile = file;
passwordSection.style.display = 'block';
}
function unlockPdf() {
if (!selectedFile) return;
hideAllSections();
processingSection.style.display = 'block';
// Simulate processing delay (in a real app, you would use a PDF library here)
setTimeout(() => {
// This is a simulation - in a real implementation you would:
// 1. Use a PDF library like PDF-lib to remove password protection
// 2. Create a download URL for the unlocked PDF
// For demo purposes, we'll just pretend it worked
unlockedPdfUrl = URL.createObjectURL(selectedFile); // In real app, this would be the processed file
processingSection.style.display = 'none';
resultSection.style.display = 'block';
}, 2000);
}
function downloadPdf() {
if (!unlockedPdfUrl) return;
const a = document.createElement('a');
a.href = unlockedPdfUrl;
a.download = selectedFile.name.replace('.pdf', '') + '_unlocked.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = 'block';
}
function hideAllSections() {
passwordSection.style.display = 'none';
processingSection.style.display = 'none';
resultSection.style.display = 'none';
}
});
</script>
```
## Important Notes:
1. **Client-Side Limitation**: This implementation simulates the PDF unlocking process. In reality, PDF unlocking requires server-side processing or a JavaScript PDF library like PDF-lib (which has limited password removal capabilities).
2. **For Full Functionality**: You would need to:
- Integrate with a PDF processing library/service
- Or set up a backend service to handle the actual PDF unlocking
3. **Security Considerations**: Client-side JavaScript cannot reliably remove passwords from PDFs due to security restrictions in browsers.
4. **Alternative Approach**: For a fully functional version, you might want to:
- Use the ilovepdf.com API (if available)
- Or direct users to their service with an affiliate link
This code provides the complete UI/UX experience but would need backend integration for actual PDF processing functionality.
