Select JPG images or drag them here
Your files are secure and will be deleted after processing
OR
Selected Files (0)
Conversion Complete!
Your PDF file is ready to download
.jpg-to-pdf-container {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
}
.converter-header {
text-align: center;
margin-bottom: 30px;
}
.converter-header h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.converter-header p {
color: #7f8c8d;
font-size: 16px;
}
.upload-area {
border: 2px dashed #bdc3c7;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
background-color: #f9f9f9;
transition: all 0.3s;
margin-bottom: 20px;
}
.upload-area:hover {
border-color: #3498db;
background-color: #f0f7fc;
}
.upload-area.drag-over {
border-color: #2ecc71;
background-color: #e8f8f0;
}
.upload-icon {
margin-bottom: 20px;
}
.upload-icon svg {
color: #3498db;
}
.upload-area h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.upload-area p {
color: #7f8c8d;
margin-bottom: 20px;
}
.select-files-btn {
background-color: #3498db;
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: #2980b9;
}
.or-divider {
display: flex;
align-items: center;
margin: 20px 0;
}
.or-divider::before, .or-divider::after {
content: “”;
flex: 1;
border-bottom: 1px solid #bdc3c7;
}
.or-divider span {
padding: 0 10px;
color: #7f8c8d;
}
.cloud-options {
display: flex;
justify-content: center;
gap: 15px;
}
.cloud-btn {
display: flex;
align-items: center;
gap: 8px;
background-color: white;
border: 1px solid #bdc3c7;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.cloud-btn:hover {
border-color: #3498db;
color: #3498db;
}
.cloud-btn svg {
width: 16px;
height: 16px;
}
.selected-files {
display: none;
margin-top: 20px;
}
.selected-files h4 {
margin-bottom: 15px;
color: #2c3e50;
}
.file-list {
max-height: 200px;
overflow-y: auto;
margin-bottom: 20px;
border: 1px solid #eee;
border-radius: 4px;
padding: 10px;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.file-item:last-child {
border-bottom: none;
}
.file-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-size {
color: #7f8c8d;
margin: 0 10px;
}
.remove-file {
color: #e74c3c;
cursor: pointer;
background: none;
border: none;
font-size: 16px;
}
.convert-btn {
background-color: #2ecc71;
color: white;
border: none;
padding: 12px 25px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
transition: background-color 0.3s;
}
.convert-btn:hover {
background-color: #27ae60;
}
.convert-btn:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}
.loading-modal, .download-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.loading-content, .download-content {
background-color: white;
padding: 30px;
border-radius: 8px;
text-align: center;
max-width: 400px;
width: 90%;
}
.spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.download-icon svg {
color: #2ecc71;
margin-bottom: 15px;
}
.download-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
transition: background-color 0.3s;
}
.download-btn:hover {
background-color: #2980b9;
}
.start-over-btn {
background-color: #e74c3c;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.start-over-btn:hover {
background-color: #c0392b;
}
document.addEventListener(‘DOMContentLoaded’, function() {
// DOM elements
const dropArea = document.getElementById(‘dropArea’);
const fileInput = document.getElementById(‘fileInput’);
const selectFilesBtn = document.getElementById(‘selectFilesBtn’);
const dropboxBtn = document.getElementById(‘dropboxBtn’);
const driveBtn = document.getElementById(‘driveBtn’);
const selectedFiles = document.getElementById(‘selectedFiles’);
const fileList = document.getElementById(‘fileList’);
const convertBtn = document.getElementById(‘convertBtn’);
const loadingModal = document.getElementById(‘loadingModal’);
const downloadModal = document.getElementById(‘downloadModal’);
const downloadBtn = document.getElementById(‘downloadBtn’);
const startOverBtn = document.getElementById(‘startOverBtn’);
let files = [];
let pdfBlob = null;
// Event listeners
selectFilesBtn.addEventListener(‘click’, () => fileInput.click());
fileInput.addEventListener(‘change’, handleFileSelect);
dropboxBtn.addEventListener(‘click’, () => alert(‘Dropbox integration would be implemented here’));
driveBtn.addEventListener(‘click’, () => alert(‘Google Drive integration would be implemented here’));
convertBtn.addEventListener(‘click’, convertToPdf);
downloadBtn.addEventListener(‘click’, downloadPdf);
startOverBtn.addEventListener(‘click’, resetConverter);
// Drag and drop events
[‘dragenter’, ‘dragover’, ‘dragleave’, ‘drop’].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
[‘dragenter’, ‘dragover’].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
[‘dragleave’, ‘drop’].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});
dropArea.addEventListener(‘drop’, handleDrop, false);
// Functions
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
function highlight() {
dropArea.classList.add(‘drag-over’);
}
function unhighlight() {
dropArea.classList.remove(‘drag-over’);
}
function handleDrop(e) {
const dt = e.dataTransfer;
const droppedFiles = dt.files;
handleFiles(droppedFiles);
}
function handleFileSelect(e) {
const selectedFiles = e.target.files;
handleFiles(selectedFiles);
}
function handleFiles(newFiles) {
for (let i = 0; i {
const fileItem = document.createElement(‘div’);
fileItem.className = ‘file-item’;
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 removeFile = document.createElement(‘button’);
removeFile.className = ‘remove-file’;
removeFile.innerHTML = ‘×’;
removeFile.addEventListener(‘click’, () => removeFileAtIndex(index));
fileItem.appendChild(fileName);
fileItem.appendChild(fileSize);
fileItem.appendChild(removeFile);
fileList.appendChild(fileItem);
});
}
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 removeFileAtIndex(index) {
files.splice(index, 1);
updateFileList();
}
function convertToPdf() {
if (files.length === 0) return;
loadingModal.style.display = ‘flex’;
// Simulate conversion delay
setTimeout(() => {
loadingModal.style.display = ‘none’;
downloadModal.style.display = ‘flex’;
// In a real implementation, we would actually convert to PDF here
// For this demo, we’ll just create a dummy PDF blob
pdfBlob = new Blob([‘This would be the actual PDF file in a real implementation’], { type: ‘application/pdf’ });
}, 2000);
}
function downloadPdf() {
if (!pdfBlob) return;
const url = URL.createObjectURL(pdfBlob);
const a = document.createElement(‘a’);
a.href = url;
a.download = ‘converted.pdf’;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function resetConverter() {
files = [];
pdfBlob = null;
fileInput.value = ”;
updateFileList();
downloadModal.style.display = ‘none’;
}
});