HTML CSS AND JAVASCRIPT CODE FOR WORD TO JPG CONVERTER

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>