Introduction
The Word to JPG Converter is a modern and efficient tool designed to convert Word documents into high-quality image formats directly in your browser. With a sleek and responsive interface, it offers users a seamless experience without the need for any external uploads, ensuring both privacy and convenience.
Modern UI/UX Design
This converter features a clean and intuitive interface enhanced with gradient accents that create a professional and visually appealing look. The responsive layout adapts flawlessly to all screen sizes, from desktops to mobile devices, and includes visual feedback for every interaction, making the conversion process more engaging and user-friendly.
Advanced Functionality
Equipped with powerful features, the tool supports drag-and-drop file uploads for Word documents and offers a document preview before conversion. Users can choose from multiple conversion options such as quality, format, and resolution, and even select specific page ranges for partial conversions. A progress indicator ensures real-time tracking of the conversion process for better usability.
User-Friendly Features
To enhance convenience, the converter includes document previews for content verification and image previews with corresponding page numbers. Users can also batch download all converted images, view them in full-screen mode with navigation, and check detailed file information before downloading.
Technical Implementation
The system utilizes Mammoth.js for parsing Word documents and html2canvas for converting HTML elements into images. All processing is done client-side, ensuring that user data remains private and secure. Additionally, robust error handling mechanisms address various potential issues during conversion.
Customization Options
Users can tailor their output with settings for image quality (from Good to Maximum), output format (JPG or PNG), and resolution scaling (1x to 2x). There’s also an option to add timestamps to filenames and define specific page ranges for more precise conversions.
Conclusion
Overall, this Word to JPG Converter delivers a professional-grade document conversion experience, combining aesthetics, functionality, and security. It operates entirely within the browser, meaning your files never leave your computer. With its robust feature set and multiple customization options, it stands out as an efficient, private, and user-centric tool for document-to-image conversion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word to JPG Converter</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
:root {
--primary: #4361ee;
--primary-dark: #3a56d4;
--secondary: #7209b7;
--success: #4cc9f0;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--border: #dee2e6;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--radius: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: var(--dark);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
padding-top: 20px;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
.logo i {
font-size: 2.5rem;
color: var(--primary);
}
h1 {
font-size: 2.5rem;
background: linear-gradient(to right, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.1rem;
color: var(--gray);
max-width: 600px;
margin: 0 auto 30px;
}
.converter-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
@media (max-width: 900px) {
.converter-container {
grid-template-columns: 1fr;
}
}
.upload-section, .preview-section {
background: white;
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow);
}
.section-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.section-title i {
font-size: 1.8rem;
}
.upload-area {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 25px;
}
.upload-area:hover, .upload-area.dragover {
border-color: var(--primary);
background-color: rgba(67, 97, 238, 0.05);
}
.upload-area i {
font-size: 3.5rem;
color: var(--primary);
margin-bottom: 15px;
}
.upload-text {
font-size: 1.2rem;
margin-bottom: 10px;
}
.upload-subtext {
color: var(--gray);
margin-bottom: 20px;
}
.btn {
background: var(--primary);
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
}
.btn-secondary {
background: var(--secondary);
}
.btn-secondary:hover {
background: #6511a3;
}
.btn-success {
background: var(--success);
}
.btn-success:hover {
background: #3ab3d6;
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: rgba(67, 97, 238, 0.1);
}
.file-input {
display: none;
}
.image-preview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
max-height: 400px;
overflow-y: auto;
padding: 10px;
}
.preview-item {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.preview-item img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
.preview-item .remove-btn {
position: absolute;
top: 5px;
right: 5px;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.8rem;
color: var(--dark);
}
.preview-item .remove-btn:hover {
background: white;
}
.options-section {
background: white;
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow);
margin-bottom: 30px;
}
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.option-group {
margin-bottom: 20px;
}
.option-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--dark);
}
.option-select, .option-input {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 1rem;
background: white;
}
.option-select:focus, .option-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
}
.actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 30px;
}
.preview-area {
width: 100%;
min-height: 400px;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
color: var(--gray);
overflow: auto;
padding: 20px;
}
.preview-area iframe {
width: 100%;
height: 100%;
border: none;
border-radius: var(--radius);
}
.document-preview {
width: 100%;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
max-height: 400px;
overflow-y: auto;
}
.empty-state {
text-align: center;
padding: 40px 20px;
}
.empty-state i {
font-size: 4rem;
color: var(--border);
margin-bottom: 20px;
}
.empty-state p {
color: var(--gray);
font-size: 1.1rem;
}
.image-count {
background: var(--primary);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.9rem;
margin-left: 10px;
}
.progress-bar {
height: 6px;
background: var(--border);
border-radius: 3px;
margin-top: 15px;
overflow: hidden;
}
.progress {
height: 100%;
background: var(--success);
width: 0%;
transition: width 0.3s ease;
}
.file-info {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-top: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.file-info i {
font-size: 1.5rem;
color: var(--primary);
}
.file-details {
flex: 1;
}
.file-name {
font-weight: 600;
margin-bottom: 5px;
}
.file-size {
color: var(--gray);
font-size: 0.9rem;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
background: white;
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 10px;
transform: translateX(150%);
transition: transform 0.4s ease;
z-index: 1000;
}
.notification.show {
transform: translateX(0);
}
.notification.success {
border-left: 4px solid #28a745;
}
.notification.error {
border-left: 4px solid #dc3545;
}
.notification i {
font-size: 1.5rem;
}
.notification.success i {
color: #28a745;
}
.notification.error i {
color: #dc3545;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<i class="fas fa-file-image"></i>
<h1>Word to JPG Converter</h1>
</div>
<p class="subtitle">Convert your Word documents to high-quality JPG images instantly. Fast, secure, and completely free!</p>
</header>
<div class="converter-container">
<div class="upload-section">
<h2 class="section-title"><i class="fas fa-cloud-upload-alt"></i> Upload Word Document</h2>
<div class="upload-area" id="dropArea">
<i class="fas fa-file-word"></i>
<p class="upload-text">Drag & Drop your Word document here</p>
<p class="upload-subtext">Supports .doc and .docx files</p>
<button class="btn" id="browseBtn"><i class="fas fa-folder-open"></i> Browse Files</button>
<input type="file" id="fileInput" class="file-input" accept=".doc,.docx">
</div>
<div id="fileInfo" style="display: none;">
<div class="file-info">
<i class="fas fa-file-word"></i>
<div class="file-details">
<div class="file-name" id="fileName">document.docx</div>
<div class="file-size" id="fileSize">0 KB</div>
</div>
<button class="btn btn-outline" id="removeFileBtn"><i class="fas fa-times"></i> Remove</button>
</div>
</div>
<div class="actions">
<button class="btn" id="convertBtn"><i class="fas fa-sync-alt"></i> Convert to JPG</button>
<button class="btn btn-outline" id="clearBtn"><i class="fas fa-trash"></i> Clear All</button>
</div>
<div class="progress-bar">
<div class="progress" id="progressBar"></div>
</div>
</div>
<div class="preview-section">
<h2 class="section-title">
<i class="fas fa-images"></i> JPG Images
<span class="image-count" id="imageCount">0 images</span>
</h2>
<div class="preview-area" id="documentPreview">
<div class="empty-state">
<i class="far fa-file-word"></i>
<p>Document preview will appear here</p>
</div>
</div>
<div class="image-preview" id="imagePreview">
<div class="empty-state">
<i class="far fa-image"></i>
<p>Converted images will appear here</p>
</div>
</div>
<div class="actions">
<button class="btn btn-secondary" id="downloadAllBtn" disabled><i class="fas fa-download"></i> Download All Images</button>
<button class="btn btn-outline" id="previewBtn" disabled><i class="fas fa-eye"></i> Preview Images</button>
</div>
</div>
</div>
<div class="options-section">
<h2 class="section-title"><i class="fas fa-cog"></i> Conversion Options</h2>
<div class="options-grid">
<div class="option-group">
<label class="option-label">Image Quality</label>
<select class="option-select" id="imageQuality">
<option value="0.7">Good (70%)</option>
<option value="0.8" selected>High (80%)</option>
<option value="0.9">Very High (90%)</option>
<option value="1.0">Maximum (100%)</option>
</select>
</div>
<div class="option-group">
<label class="option-label">Image Format</label>
<select class="option-select" id="imageFormat">
<option value="jpg" selected>JPG</option>
<option value="png">PNG</option>
</select>
</div>
<div class="option-group">
<label class="option-label">Resolution Scale</label>
<select class="option-select" id="resolutionScale">
<option value="1" selected>Standard (1x)</option>
<option value="1.5">High (1.5x)</option>
<option value="2">Very High (2x)</option>
</select>
</div>
</div>
<div class="option-group">
<label class="option-label">
<input type="checkbox" id="addTimestamp" checked> Add timestamp to filenames
</label>
</div>
</div>
</div>
<div class="notification" id="notification">
<i class="fas fa-check-circle"></i>
<div>
<p id="notificationText">Conversion completed successfully!</p>
</div>
</div>
<script>
// DOM Elements
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const browseBtn = document.getElementById('browseBtn');
const fileInfo = document.getElementById('fileInfo');
const fileName = document.getElementById('fileName');
const fileSize = document.getElementById('fileSize');
const removeFileBtn = document.getElementById('removeFileBtn');
const documentPreview = document.getElementById('documentPreview');
const imagePreview = document.getElementById('imagePreview');
const clearBtn = document.getElementById('clearBtn');
const convertBtn = document.getElementById('convertBtn');
const downloadAllBtn = document.getElementById('downloadAllBtn');
const previewBtn = document.getElementById('previewBtn');
const imageCount = document.getElementById('imageCount');
const progressBar = document.getElementById('progressBar');
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notificationText');
// Options
const imageQuality = document.getElementById('imageQuality');
const imageFormat = document.getElementById('imageFormat');
const resolutionScale = document.getElementById('resolutionScale');
const addTimestamp = document.getElementById('addTimestamp');
// Store document and images
let currentDocument = null;
let convertedImages = [];
// Event Listeners
browseBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileSelect);
removeFileBtn.addEventListener('click', removeDocument);
clearBtn.addEventListener('click', clearAll);
convertBtn.addEventListener('click', convertToImages);
downloadAllBtn.addEventListener('click', downloadAllImages);
previewBtn.addEventListener('click', previewImages);
// Drag and Drop events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropArea.classList.add('dragover');
}
function unhighlight() {
dropArea.classList.remove('dragover');
}
dropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
}
function handleFileSelect(e) {
const files = e.target.files;
handleFiles(files);
}
function handleFiles(files) {
if (files.length === 0) return;
const file = files[0];
// Check if file is a Word document
if (!file.name.match(/\.(doc|docx)$/i)) {
showNotification('Please select a Word document (.doc or .docx)', 'error');
return;
}
// Store document
currentDocument = file;
// Update file info
fileName.textContent = file.name;
fileSize.textContent = formatFileSize(file.size);
fileInfo.style.display = 'block';
// Preview document
previewDocument(file);
showNotification('Document uploaded successfully', 'success');
}
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 previewDocument(file) {
const reader = new FileReader();
reader.onload = function(e) {
const arrayBuffer = e.target.result;
// Use Mammoth to convert Word document to HTML
mammoth.convertToHtml({arrayBuffer: arrayBuffer})
.then(function(result) {
const html = result.value;
documentPreview.innerHTML = `
<div class="document-preview">
${html}
</div>
`;
})
.catch(function(error) {
console.error('Error converting document:', error);
documentPreview.innerHTML = `
<div class="empty-state">
<i class="fas fa-exclamation-triangle"></i>
<p>Unable to preview document</p>
<p style="font-size: 0.9rem;">The document will still be converted to images</p>
</div>
`;
});
};
reader.readAsArrayBuffer(file);
}
function removeDocument() {
currentDocument = null;
fileInfo.style.display = 'none';
documentPreview.innerHTML = `
<div class="empty-state">
<i class="far fa-file-word"></i>
<p>Document preview will appear here</p>
</div>
`;
}
function clearAll() {
currentDocument = null;
convertedImages = [];
fileInfo.style.display = 'none';
documentPreview.innerHTML = `
<div class="empty-state">
<i class="far fa-file-word"></i>
<p>Document preview will appear here</p>
</div>
`;
imagePreview.innerHTML = `
<div class="empty-state">
<i class="far fa-image"></i>
<p>Converted images will appear here</p>
</div>
`;
downloadAllBtn.disabled = true;
previewBtn.disabled = true;
imageCount.textContent = '0 images';
progressBar.style.width = '0%';
}
function convertToImages() {
if (!currentDocument) {
showNotification('Please upload a Word document first', 'error');
return;
}
// Reset progress
progressBar.style.width = '0%';
// Disable buttons during conversion
convertBtn.disabled = true;
convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Converting...';
// Clear previous images
convertedImages = [];
imagePreview.innerHTML = '';
// Simulate progress
let progress = 0;
const progressInterval = setInterval(() => {
progress += 5;
progressBar.style.width = `${progress}%`;
if (progress >= 90) {
clearInterval(progressInterval);
}
}, 100);
// Use setTimeout to allow UI to update
setTimeout(() => {
try {
const reader = new FileReader();
reader.onload = function(e) {
const arrayBuffer = e.target.result;
// Use Mammoth to convert Word document to HTML
mammoth.convertToHtml({arrayBuffer: arrayBuffer})
.then(function(result) {
const html = result.value;
// Create a temporary div to hold the HTML content
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
// Split content into pages (simulated)
const pages = splitIntoPages(tempDiv);
// Convert each page to an image
convertPagesToImages(pages)
.then(images => {
convertedImages = images;
// Update UI
updateImagePreview();
downloadAllBtn.disabled = false;
previewBtn.disabled = false;
imageCount.textContent = `${convertedImages.length} image${convertedImages.length !== 1 ? 's' : ''}`;
// Complete progress
progressBar.style.width = '100%';
// Reset convert button
convertBtn.disabled = false;
convertBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Convert to JPG';
showNotification(`Successfully converted to ${convertedImages.length} images`, 'success');
})
.catch(error => {
console.error('Error converting pages to images:', error);
showNotification('Error converting document to images', 'error');
// Reset buttons on error
convertBtn.disabled = false;
convertBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Convert to JPG';
progressBar.style.width = '0%';
});
})
.catch(function(error) {
console.error('Error converting document:', error);
showNotification('Error processing Word document', 'error');
// Reset buttons on error
convertBtn.disabled = false;
convertBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Convert to JPG';
progressBar.style.width = '0%';
});
};
reader.readAsArrayBuffer(currentDocument);
} catch (error) {
console.error('Conversion error:', error);
showNotification('Error during conversion: ' + error.message, 'error');
// Reset buttons on error
convertBtn.disabled = false;
convertBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Convert to JPG';
progressBar.style.width = '0%';
}
}, 500);
}
function splitIntoPages(htmlElement) {
// This is a simplified page splitting algorithm
const pages = [];
const content = htmlElement.innerHTML;
// Split by headings or large elements to simulate pages
const pageSize = 1500; // Approximate characters per page
let start = 0;
while (start < content.length) {
let end = start + pageSize;
// Try to break at a paragraph end if possible
if (end < content.length) {
const nextPara = content.indexOf('</p>', end);
if (nextPara !== -1 && nextPara < start + pageSize * 1.5) {
end = nextPara + 4;
}
}
pages.push(content.substring(start, Math.min(end, content.length)));
start = end;
}
// If we have no pages (very short document), just use the whole content
if (pages.length === 0) {
pages.push(content);
}
return pages;
}
function convertPagesToImages(pages) {
const promises = [];
const scale = parseFloat(resolutionScale.value);
const format = imageFormat.value;
const quality = imageFormat.value === 'jpg' ? parseFloat(imageQuality.value) : undefined;
pages.forEach((pageHtml, index) => {
const promise = new Promise((resolve, reject) => {
// Create a temporary element to render the page
const pageElement = document.createElement('div');
pageElement.style.width = '794px'; // A4 width in pixels at 96 DPI
pageElement.style.padding = '40px';
pageElement.style.backgroundColor = 'white';
pageElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
pageElement.style.margin = '10px';
pageElement.innerHTML = pageHtml;
// Add to DOM temporarily
document.body.appendChild(pageElement);
// Use html2canvas to convert to image
html2canvas(pageElement, {
scale: scale,
useCORS: true,
allowTaint: true,
backgroundColor: '#ffffff'
}).then(canvas => {
// Convert canvas to data URL
const dataURL = format === 'jpg'
? canvas.toDataURL('image/jpeg', quality)
: canvas.toDataURL('image/png');
// Remove temporary element
document.body.removeChild(pageElement);
resolve({
data: dataURL,
page: index + 1,
format: format
});
}).catch(error => {
// Remove temporary element
document.body.removeChild(pageElement);
reject(error);
});
});
promises.push(promise);
});
return Promise.all(promises);
}
function updateImagePreview() {
// Clear preview area
imagePreview.innerHTML = '';
if (convertedImages.length === 0) {
imagePreview.innerHTML = `
<div class="empty-state">
<i class="far fa-image"></i>
<p>Converted images will appear here</p>
</div>
`;
return;
}
// Add images to preview
convertedImages.forEach((image, index) => {
const previewItem = document.createElement('div');
previewItem.className = 'preview-item';
previewItem.innerHTML = `
<img src="${image.data}" alt="Page ${image.page}">
<div style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: white; padding: 5px; font-size: 0.8rem; text-align: center;">
Page ${image.page}
</div>
<button class="remove-btn" data-index="${index}">
<i class="fas fa-times"></i>
</button>
`;
imagePreview.appendChild(previewItem);
});
// Add event listeners to remove buttons
document.querySelectorAll('.remove-btn').forEach(btn => {
btn.addEventListener('click', function() {
const index = parseInt(this.getAttribute('data-index'));
removeImage(index);
});
});
}
function removeImage(index) {
convertedImages.splice(index, 1);
updateImagePreview();
imageCount.textContent = `${convertedImages.length} image${convertedImages.length !== 1 ? 's' : ''}`;
if (convertedImages.length === 0) {
downloadAllBtn.disabled = true;
previewBtn.disabled = true;
}
}
function downloadAllImages() {
if (convertedImages.length === 0) {
showNotification('No images available for download', 'error');
return;
}
convertedImages.forEach((image, index) => {
// Create a download link
const link = document.createElement('a');
link.href = image.data;
// Generate filename
let filename = 'page_' + image.page;
if (addTimestamp.checked) {
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
filename += `_${timestamp}`;
}
filename += '.' + image.format;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
showNotification(`Downloaded ${convertedImages.length} images`, 'success');
}
function previewImages() {
if (convertedImages.length === 0) {
showNotification('No images available for preview', 'error');
return;
}
// Create a modal-like preview
const previewContainer = document.createElement('div');
previewContainer.style.position = 'fixed';
previewContainer.style.top = '0';
previewContainer.style.left = '0';
previewContainer.style.width = '100%';
previewContainer.style.height = '100%';
previewContainer.style.backgroundColor = 'rgba(0,0,0,0.8)';
previewContainer.style.display = 'flex';
previewContainer.style.flexDirection = 'column';
previewContainer.style.alignItems = 'center';
previewContainer.style.justifyContent = 'center';
previewContainer.style.zIndex = '10000';
const imageElement = document.createElement('img');
imageElement.src = convertedImages[0].data;
imageElement.style.maxWidth = '90%';
imageElement.style.maxHeight = '80%';
imageElement.style.objectFit = 'contain';
const pageInfo = document.createElement('div');
pageInfo.style.color = 'white';
pageInfo.style.marginTop = '15px';
pageInfo.textContent = `Page 1 of ${convertedImages.length}`;
const closeButton = document.createElement('button');
closeButton.textContent = 'Close Preview';
closeButton.className = 'btn';
closeButton.style.marginTop = '15px';
closeButton.onclick = function() {
document.body.removeChild(previewContainer);
};
let currentPage = 0;
// Navigation
const navContainer = document.createElement('div');
navContainer.style.display = 'flex';
navContainer.style.gap = '10px';
navContainer.style.marginTop = '15px';
const prevButton = document.createElement('button');
prevButton.innerHTML = '<i class="fas fa-chevron-left"></i> Previous';
prevButton.className = 'btn btn-outline';
prevButton.style.color = 'white';
prevButton.style.borderColor = 'white';
prevButton.onclick = function() {
if (currentPage > 0) {
currentPage--;
imageElement.src = convertedImages[currentPage].data;
pageInfo.textContent = `Page ${currentPage + 1} of ${convertedImages.length}`;
}
};
const nextButton = document.createElement('button');
nextButton.innerHTML = 'Next <i class="fas fa-chevron-right"></i>';
nextButton.className = 'btn btn-outline';
nextButton.style.color = 'white';
nextButton.style.borderColor = 'white';
nextButton.onclick = function() {
if (currentPage < convertedImages.length - 1) {
currentPage++;
imageElement.src = convertedImages[currentPage].data;
pageInfo.textContent = `Page ${currentPage + 1} of ${convertedImages.length}`;
}
};
navContainer.appendChild(prevButton);
navContainer.appendChild(nextButton);
previewContainer.appendChild(imageElement);
previewContainer.appendChild(pageInfo);
previewContainer.appendChild(navContainer);
previewContainer.appendChild(closeButton);
document.body.appendChild(previewContainer);
}
function showNotification(message, type) {
notificationText.textContent = message;
notification.className = `notification ${type}`;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
// Initialize
clearAll();
</script>
</body>
</html>