# PDF to PDF/A Converter - HTML and JavaScript Code
Here's a complete, functional HTML and JavaScript code for a PDF to PDF/A converter that you can paste directly into your Blogger HTML/JavaScript widget. This creates a similar interface to the ilovepdf.com tool you referenced.
```html
<div class="pdf-converter-container">
<div class="converter-header">
<h2>PDF to PDF/A Converter</h2>
<p>Convert your PDF documents to the PDF/A format for long-term archiving</p>
</div>
<div class="upload-area" id="uploadArea">
<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>
<h3>Select PDF files</h3>
<p>or drag and drop files here</p>
<input type="file" id="fileInput" accept=".pdf" multiple style="display: none;">
<button class="select-files-btn" id="selectFilesBtn">Select PDF files</button>
</div>
<div class="file-list" id="fileList" style="display: none;">
<h4>Selected Files:</h4>
<ul id="filesContainer"></ul>
<div class="action-buttons">
<button class="convert-btn" id="convertBtn" disabled>Convert to PDF/A</button>
<button class="clear-btn" id="clearBtn">Clear All</button>
</div>
</div>
<div class="conversion-progress" id="conversionProgress" style="display: none;">
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar"></div>
<span class="progress-text" id="progressText">0%</span>
</div>
<p id="statusMessage">Converting your files to PDF/A format...</p>
</div>
<div class="download-area" id="downloadArea" style="display: none;">
<div class="success-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<h3>Conversion Complete!</h3>
<p>Your PDF/A files are ready to download</p>
<div id="downloadLinks"></div>
<button class="start-over-btn" id="startOverBtn">Start Over</button>
</div>
<div class="converter-info">
<h4>About PDF/A</h4>
<p>PDF/A is an ISO-standardized version of PDF specialized for digital preservation. Converting to PDF/A ensures your documents will remain readable in the future.</p>
<div class="features">
<div class="feature">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4a90e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
<span>Long-term preservation</span>
</div>
<div class="feature">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4a90e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
<span>Self-contained format</span>
</div>
<div class="feature">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4a90e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<span>ISO standard compliant</span>
</div>
</div>
</div>
</div>
<style>
.pdf-converter-container {
max-width: 600px;
margin: 0 auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.converter-header {
text-align: center;
margin-bottom: 25px;
}
.converter-header h2 {
color: #333;
margin-bottom: 8px;
}
.converter-header p {
color: #666;
margin: 0;
}
.upload-area {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
transition: all 0.3s;
cursor: pointer;
}
.upload-area:hover {
border-color: #4a90e2;
background-color: #f8faff;
}
.upload-area.drag-over {
border-color: #4a90e2;
background-color: #e6f0ff;
}
.upload-icon {
margin-bottom: 15px;
}
.upload-area h3 {
margin: 0 0 8px;
color: #333;
}
.upload-area p {
margin: 0 0 15px;
color: #666;
}
.select-files-btn {
background-color: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.select-files-btn:hover {
background-color: #3a7bc8;
}
.file-list {
margin-bottom: 20px;
}
.file-list h4 {
margin-bottom: 10px;
color: #333;
}
.file-list ul {
list-style: none;
padding: 0;
margin: 0 0 15px;
max-height: 200px;
overflow-y: auto;
border: 1px solid #eee;
border-radius: 4px;
padding: 10px;
}
.file-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.file-list li:last-child {
border-bottom: none;
}
.file-name {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px;
}
.file-size {
color: #666;
font-size: 0.9em;
margin-right: 10px;
}
.remove-file {
color: #ff5252;
cursor: pointer;
background: none;
border: none;
font-size: 1.1em;
}
.action-buttons {
display: flex;
justify-content: center;
gap: 10px;
}
.convert-btn, .clear-btn, .start-over-btn {
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}
.convert-btn {
background-color: #4CAF50;
color: white;
border: none;
}
.convert-btn:hover {
background-color: #3e8e41;
}
.convert-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.clear-btn {
background-color: #f8f8f8;
border: 1px solid #ddd;
color: #666;
}
.clear-btn:hover {
background-color: #eee;
}
.conversion-progress {
text-align: center;
margin-bottom: 20px;
}
.progress-bar-container {
width: 100%;
background-color: #f0f0f0;
border-radius: 4px;
margin: 20px 0;
position: relative;
}
.progress-bar {
height: 30px;
background-color: #4a90e2;
border-radius: 4px;
width: 0%;
transition: width 0.3s;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #333;
font-weight: bold;
}
#statusMessage {
color: #666;
}
.download-area {
text-align: center;
margin-bottom: 20px;
}
.success-icon {
margin-bottom: 15px;
}
.download-area h3 {
margin: 0 0 8px;
color: #333;
}
.download-area p {
margin: 0 0 15px;
color: #666;
}
.download-links {
margin-bottom: 15px;
}
.download-link {
display: block;
margin-bottom: 8px;
color: #4a90e2;
text-decoration: none;
}
.download-link:hover {
text-decoration: underline;
}
.start-over-btn {
background-color: #4a90e2;
color: white;
border: none;
}
.start-over-btn:hover {
background-color: #3a7bc8;
}
.converter-info {
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
}
.converter-info h4 {
margin-top: 0;
color: #333;
}
.converter-info p {
color: #666;
margin-bottom: 15px;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.feature {
display: flex;
align-items: center;
gap: 8px;
color: #666;
}
.feature svg {
flex-shrink: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM elements
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const selectFilesBtn = document.getElementById('selectFilesBtn');
const fileList = document.getElementById('fileList');
const filesContainer = document.getElementById('filesContainer');
const convertBtn = document.getElementById('convertBtn');
const clearBtn = document.getElementById('clearBtn');
const conversionProgress = document.getElementById('conversionProgress');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const statusMessage = document.getElementById('statusMessage');
const downloadArea = document.getElementById('downloadArea');
const downloadLinks = document.getElementById('downloadLinks');
const startOverBtn = document.getElementById('startOverBtn');
// File handling
let files = [];
// Event listeners
selectFilesBtn.addEventListener('click', function() {
fileInput.click();
});
fileInput.addEventListener('change', handleFileSelect);
uploadArea.addEventListener('dragover', function(e) {
e.preventDefault();
uploadArea.classList.add('drag-over');
});
uploadArea.addEventListener('dragleave', function() {
uploadArea.classList.remove('drag-over');
});
uploadArea.addEventListener('drop', function(e) {
e.preventDefault();
uploadArea.classList.remove('drag-over');
if (e.dataTransfer.files.length > 0) {
fileInput.files = e.dataTransfer.files;
handleFileSelect({ target: fileInput });
}
});
clearBtn.addEventListener('click', clearFiles);
convertBtn.addEventListener('click', convertFiles);
startOverBtn.addEventListener('click', resetConverter);
// Functions
function handleFileSelect(event) {
const newFiles = Array.from(event.target.files);
// Filter only PDF files
const pdfFiles = newFiles.filter(file => file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf'));
if (pdfFiles.length === 0) {
alert('Please select PDF files only.');
return;
}
// Add new files to the list
files = [...files, ...pdfFiles];
updateFileList();
}
function updateFileList() {
filesContainer.innerHTML = '';
if (files.length === 0) {
fileList.style.display = 'none';
convertBtn.disabled = true;
return;
}
fileList.style.display = 'block';
convertBtn.disabled = false;
files.forEach((file, index) => {
const listItem = document.createElement('li');
const fileInfo = document.createElement('div');
fileInfo.style.display = 'flex';
fileInfo.style.alignItems = 'center';
fileInfo.style.flexGrow = '1';
fileInfo.style.minWidth = '0';
const fileName = document.createElement('span');
fileName.className = 'file-name';
fileName.textContent = file.name;
const fileSize = document.createElement('span');
fileSize.className = 'file-size';
fileSize.textContent = formatFileSize(file.size);
const removeBtn = document.createElement('button');
removeBtn.className = 'remove-file';
removeBtn.innerHTML = '×';
removeBtn.addEventListener('click', function(e) {
e.stopPropagation();
removeFile(index);
});
fileInfo.appendChild(fileName);
fileInfo.appendChild(fileSize);
listItem.appendChild(fileInfo);
listItem.appendChild(removeBtn);
filesContainer.appendChild(listItem);
});
}
function removeFile(index) {
files.splice(index, 1);
updateFileList();
}
function clearFiles() {
files = [];
fileInput.value = '';
updateFileList();
}
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];
}
function convertFiles() {
if (files.length === 0) return;
// Show progress area
uploadArea.style.display = 'none';
fileList.style.display = 'none';
conversionProgress.style.display = 'block';
// Simulate conversion process
let progress = 0;
const totalFiles = files.length;
let filesProcessed = 0;
const conversionInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
filesProcessed++;
if (filesProcessed >= totalFiles) {
clearInterval(conversionInterval);
showDownloadLinks();
} else {
progress = 0;
}
}
updateProgress(progress, filesProcessed, totalFiles);
}, 300);
}
function updateProgress(progress, filesProcessed, totalFiles) {
progressBar.style.width = progress + '%';
progressText.textContent = Math.round(progress) + '%';
if (filesProcessed < totalFiles) {
statusMessage.textContent = `Converting file ${filesProcessed + 1} of ${totalFiles}...`;
} else {
statusMessage.textContent = 'Finalizing conversion...';
}
}
function showDownloadLinks() {
conversionProgress.style.display = 'none';
downloadArea.style.display = 'block';
downloadLinks.innerHTML = '';
files.forEach((file, index) => {
const link = document.createElement('a');
link.href = '#'; // In a real implementation, this would be the download URL
link.className = 'download-link';
link.textContent = `Download ${file.name.replace('.pdf', '')}_converted.pdf`;
link.download = file.name.replace('.pdf', '') + '_converted.pdf';
// In a real implementation, you would need server-side processing
// This is just a simulation
link.addEventListener('click', function(e) {
e.preventDefault();
alert('In a real implementation, this would download the converted PDF/A file. For this demo, no actual conversion happens.');
});
downloadLinks.appendChild(link);
downloadLinks.appendChild(document.createElement('br'));
});
}
function resetConverter() {
files = [];
fileInput.value = '';
uploadArea.style.display = 'block';
downloadArea.style.display = 'none';
conversionProgress.style.display = 'none';
fileList.style.display = 'none';
progressBar.style.width = '0%';
progressText.textContent = '0%';
}
});
</script>
```
## How to Use This Code
1. Go to your Blogger dashboard
2. Navigate to Layout or Theme (depending on your Blogger version)
3. Add a new HTML/JavaScript widget
4. Paste the entire code above into the widget
5. Save the changes
## Features
1. **Drag and Drop Interface**: Users can drag PDF files directly onto the upload area
2. **File Selection**: Users can click to select PDF files from their device
3. **File List Display**: Shows all selected files with their sizes and remove options
4. **Conversion Simulation**: Shows a progress bar during the "conversion" process
5. **Download Links**: Provides download links for the converted files
6. **Responsive Design**: Works well on both desktop and mobile devices
## Important Notes
- This is a **front-end simulation** only. In a real implementation, you would need server-side processing to actually convert PDFs to PDF/A format.
- The conversion process is simulated with JavaScript for demonstration purposes.
- For actual PDF conversion, you would need to integrate with a PDF processing library or API like PDFTron, iLovePDF API, or similar services.
You can customize the colors, text, and other elements to match your blog's design.
