Select JPG images
or drag files here
or import from
Portrait
Landscape
Auto
No margin
Small margin
Big margin
Why convert JPG to PDF?
Universal Format
PDF files can be opened on any device without losing quality or formatting.
Easy Sharing
Combine multiple images into one PDF for simpler sharing and organization.
Preserve Quality
Maintain the original quality of your images in a professional PDF document.
.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 {
font-size: 32px;
color: #2c3e50;
margin-bottom: 10px;
}
.converter-header p {
font-size: 16px;
color: #7f8c8d;
max-width: 500px;
margin: 0 auto;
}
.converter-box {
background-color: #f8f9fa;
border-radius: 10px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.upload-area {
border: 2px dashed #bdc3c7;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
margin-bottom: 20px;
}
.upload-area:hover {
border-color: #3498db;
background-color: rgba(52, 152, 219, 0.05);
}
.upload-icon {
margin-bottom: 20px;
}
.upload-area h3 {
font-size: 18px;
margin-bottom: 5px;
color: #2c3e50;
}
.upload-area p {
font-size: 14px;
color: #7f8c8d;
margin-bottom: 20px;
}
.select-files-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.select-files-btn:hover {
background-color: #2980b9;
}
.file-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.file-preview-item {
position: relative;
width: 100px;
height: 100px;
border-radius: 5px;
overflow: hidden;
}
.file-preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.file-preview-item .remove-btn {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0,0,0,0.5);
color: white;
border: none;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cloud-options {
text-align: center;
}
.or-divider {
position: relative;
margin: 20px 0;
}
.or-divider span {
display: inline-block;
padding: 0 10px;
background-color: #f8f9fa;
color: #7f8c8d;
font-size: 14px;
position: relative;
z-index: 1;
}
.or-divider:before {
content: ”;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #e0e0e0;
z-index: 0;
}
.cloud-buttons {
display: flex;
justify-content: center;
gap: 10px;
}
.cloud-btn {
display: flex;
align-items: center;
gap: 5px;
background-color: white;
border: 1px solid #e0e0e0;
padding: 8px 15px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.cloud-btn:hover {
background-color: #f1f1f1;
}
.converter-options {
background-color: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
}
.option-row {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.option-row label {
margin-right: 10px;
}
.option-row select {
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
.convert-btn {
background-color: #2ecc71;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
display: block;
margin: 20px auto 0;
}
.convert-btn:hover {
background-color: #27ae60;
}
.features-section h2 {
text-align: center;
font-size: 24px;
color: #2c3e50;
margin-bottom: 30px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.feature-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
text-align: center;
}
.feature-icon {
margin-bottom: 15px;
}
.feature-card h3 {
font-size: 18px;
color: #2c3e50;
margin-bottom: 10px;
}
.feature-card p {
font-size: 14px;
color: #7f8c8d;
line-height: 1.5;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.converter-box {
padding: 20px;
}
.cloud-buttons {
flex-direction: column;
align-items: center;
}
.cloud-btn {
width: 100%;
justify-content: center;
}
.features-grid {
grid-template-columns: 1fr;
}
}
document.addEventListener(‘DOMContentLoaded’, function() {
// Elements
const uploadArea = document.getElementById(‘uploadArea’);
const fileInput = document.getElementById(‘fileInput’);
const selectFilesBtn = document.getElementById(‘selectFilesBtn’);
const filePreview = document.getElementById(‘filePreview’);
const dropboxBtn = document.getElementById(‘dropboxBtn’);
const driveBtn = document.getElementById(‘driveBtn’);
const urlBtn = document.getElementById(‘urlBtn’);
const converterOptions = document.getElementById(‘converterOptions’);
const convertBtn = document.getElementById(‘convertBtn’);
// File handling
let files = [];
// Click on upload area triggers file input
uploadArea.addEventListener(‘click’, function() {
fileInput.click();
});
selectFilesBtn.addEventListener(‘click’, function(e) {
e.stopPropagation();
fileInput.click();
});
// Handle file selection
fileInput.addEventListener(‘change’, function() {
if (this.files.length > 0) {
handleFiles(this.files);
}
});
// Drag and drop functionality
uploadArea.addEventListener(‘dragover’, function(e) {
e.preventDefault();
this.style.borderColor = ‘#3498db’;
this.style.backgroundColor = ‘rgba(52, 152, 219, 0.1)’;
});
uploadArea.addEventListener(‘dragleave’, function() {
this.style.borderColor = ‘#bdc3c7’;
this.style.backgroundColor = ”;
});
uploadArea.addEventListener(‘drop’, function(e) {
e.preventDefault();
this.style.borderColor = ‘#bdc3c7’;
this.style.backgroundColor = ”;
if (e.dataTransfer.files.length > 0) {
handleFiles(e.dataTransfer.files);
}
});
// Handle selected files
function handleFiles(newFiles) {
files = Array.from(newFiles);
updateFilePreview();
converterOptions.style.display = ‘block’;
}
// Update file preview
function updateFilePreview() {
filePreview.innerHTML = ”;
files.forEach((file, index) => {
const reader = new FileReader();
reader.onload = function(e) {
const previewItem = document.createElement(‘div’);
previewItem.className = ‘file-preview-item’;
const img = document.createElement(‘img’);
img.src = e.target.result;
img.alt = file.name;
const removeBtn = document.createElement(‘button’);
removeBtn.className = ‘remove-btn’;
removeBtn.innerHTML = ‘×’;
removeBtn.addEventListener(‘click’, function(e) {
e.stopPropagation();
files.splice(index, 1);
updateFilePreview();
if (files.length === 0) {
converterOptions.style.display = ‘none’;
}
});
previewItem.appendChild(img);
previewItem.appendChild(removeBtn);
filePreview.appendChild(previewItem);
};
reader.readAsDataURL(file);
});
}
// Cloud service buttons – these would need actual integration
dropboxBtn.addEventListener(‘click’, function() {
alert(‘Dropbox integration would be implemented here’);
// In a real implementation, you would use the Dropbox API
});
driveBtn.addEventListener(‘click’, function() {
alert(‘Google Drive integration would be implemented here’);
// In a real implementation, you would use the Google Drive API
});
urlBtn.addEventListener(‘click’, function() {
const url = prompt(‘Enter the URL of the JPG image:’);
if (url) {
alert(‘URL import would be implemented here for: ‘ + url);
// In a real implementation, you would fetch the image from the URL
}
});
// Convert button
convertBtn.addEventListener(‘click’, function() {
if (files.length === 0) {
alert(‘Please select at least one file’);
return;
}
// Simulate conversion
alert(‘In a real implementation, this would convert the files to PDF and trigger a download.\n\nSelected options:\n’ +
‘Merge: ‘ + document.getElementById(‘mergeCheckbox’).checked + ‘\n’ +
‘Orientation: ‘ + document.getElementById(‘orientationSelect’).value + ‘\n’ +
‘Margin: ‘ + document.getElementById(‘marginSelect’).value);
// In a real implementation, you would:
// 1. Send files to a server or use a client-side PDF library
// 2. Process the files according to selected options
// 3. Generate a PDF and trigger download
// 4. Show loading state during processing
});
});
