pdf

<div class="jpg-to-pdf-converter">
  <div class="converter-header">
    <h1>JPG to PDF Converter</h1>
    <p>Convert your JPG images to PDF documents quickly and easily</p>
  </div>
  
  <div class="converter-container">
    <div class="upload-box" id="dropArea">
      <div class="upload-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#4a6ee0" 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 JPG images</h3>
      <p>or drag and drop files here</p>
      <input type="file" id="fileInput" accept="image/jpeg" multiple style="display: none;">
      <button class="select-files-btn" onclick="document.getElementById('fileInput').click()">SELECT FILES</button>
    </div>
    
    <div class="alternative-options">
      <p>or import files from:</p>
      <div class="option-buttons">
        <button class="option-btn" id="dropboxBtn">
          <img src="https://www.ilovepdf.com/img/dropbox-logo.svg" alt="Dropbox">
          Dropbox
        </button>
        <button class="option-btn" id="driveBtn">
          <img src="https://www.ilovepdf.com/img/google-drive-logo.svg" alt="Google Drive">
          Google Drive
        </button>
        <button class="option-btn" id="urlBtn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
          </svg>
          URL
        </button>
      </div>
    </div>
  </div>
  
  <div class="file-list-container" id="fileListContainer" style="display: none;">
    <div class="file-list-header">
      <h3>Selected Files</h3>
      <button class="clear-all-btn" id="clearAllBtn">Clear All</button>
    </div>
    <div class="file-list" id="fileList"></div>
    <button class="convert-btn" id="convertBtn">CONVERT TO PDF</button>
  </div>
  
  <div class="how-to-section">
    <h2>How to convert JPG to PDF</h2>
    <div class="steps">
      <div class="step">
        <div class="step-number">1</div>
        <div class="step-content">
          <h3>Upload JPG files</h3>
          <p>Select files from your computer, Google Drive, Dropbox, or by dragging them onto the page.</p>
        </div>
      </div>
      <div class="step">
        <div class="step-number">2</div>
        <div class="step-content">
          <h3>Convert to PDF</h3>
          <p>Click the "Convert to PDF" button to start the conversion process.</p>
        </div>
      </div>
      <div class="step">
        <div class="step-number">3</div>
        <div class="step-content">
          <h3>Download your PDF</h3>
          <p>Your PDF file will be ready for download immediately after conversion.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="url-modal" id="urlModal" style="display: none;">
  <div class="modal-content">
    <div class="modal-header">
      <h3>Import from URL</h3>
      <button class="close-modal" id="closeModal">&times;</button>
    </div>
    <div class="modal-body">
      <input type="text" id="imageUrl" placeholder="Paste JPG image URL here">
      <button class="add-url-btn" id="addUrlBtn">ADD</button>
    </div>
  </div>
</div>

<style>
.jpg-to-pdf-converter {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

.converter-header {
  text-align: center;
  margin-bottom: 40px;
}

.converter-header h1 {
  font-size: 32px;
  color: #4a6ee0;
  margin-bottom: 10px;
}

.converter-header p {
  font-size: 16px;
  color: #666;
}

.converter-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
}

.upload-box {
  border: 2px dashed #4a6ee0;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.upload-box:hover {
  background-color: #f5f8ff;
}

.upload-icon {
  margin-bottom: 15px;
}

.upload-box h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #333;
}

.upload-box p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.select-files-btn {
  background-color: #4a6ee0;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.select-files-btn:hover {
  background-color: #3a5bc7;
}

.alternative-options {
  text-align: center;
}

.alternative-options p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.option-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.option-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-btn:hover {
  background: #f5f5f5;
}

.option-btn img {
  height: 16px;
  width: auto;
}

.file-list-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 30px;
}

.file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.file-list-header h3 {
  font-size: 18px;
  color: #333;
}

.clear-all-btn {
  background: none;
  border: none;
  color: #4a6ee0;
  font-size: 14px;
  cursor: pointer;
}

.clear-all-btn:hover {
  text-decoration: underline;
}

.file-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-icon {
  color: #4a6ee0;
}

.file-name {
  font-size: 14px;
  max-width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 12px;
  color: #666;
}

.remove-file {
  background: none;
  border: none;
  color: #ff4d4d;
  cursor: pointer;
}

.convert-btn {
  width: 100%;
  background-color: #4a6ee0;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.convert-btn:hover {
  background-color: #3a5bc7;
}

.how-to-section {
  margin-top: 40px;
}

.how-to-section h2 {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
}

.steps {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.step {
  flex: 1;
  display: flex;
  gap: 15px;
}

.step-number {
  background-color: #4a6ee0;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #333;
}

.step-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.url-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h3 {
  font-size: 20px;
  color: #333;
}

.close-modal {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-body input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.add-url-btn {
  background-color: #4a6ee0;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-url-btn:hover {
  background-color: #3a5bc7;
}

@media (max-width: 768px) {
  .steps {
    flex-direction: column;
  }
  
  .option-buttons {
    flex-direction: column;
  }
  
  .option-btn {
    justify-content: center;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const dropArea = document.getElementById('dropArea');
  const fileInput = document.getElementById('fileInput');
  const fileListContainer = document.getElementById('fileListContainer');
  const fileList = document.getElementById('fileList');
  const clearAllBtn = document.getElementById('clearAllBtn');
  const convertBtn = document.getElementById('convertBtn');
  const dropboxBtn = document.getElementById('dropboxBtn');
  const driveBtn = document.getElementById('driveBtn');
  const urlBtn = document.getElementById('urlBtn');
  const urlModal = document.getElementById('urlModal');
  const closeModal = document.getElementById('closeModal');
  const addUrlBtn = document.getElementById('addUrlBtn');
  const imageUrl = document.getElementById('imageUrl');
  
  let files = [];
  
  // Prevent default drag behaviors
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
    document.body.addEventListener(eventName, preventDefaults, false);
  });
  
  // Highlight drop area when item is dragged over it
  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
  });
  
  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
  });
  
  // Handle dropped files
  dropArea.addEventListener('drop', handleDrop, false);
  
  // Handle selected files
  fileInput.addEventListener('change', handleFiles, false);
  
  // Clear all files
  clearAllBtn.addEventListener('click', clearAllFiles);
  
  // Convert to PDF
  convertBtn.addEventListener('click', convertToPdf);
  
  // URL modal
  urlBtn.addEventListener('click', () => urlModal.style.display = 'flex');
  closeModal.addEventListener('click', () => urlModal.style.display = 'none');
  addUrlBtn.addEventListener('click', addUrlFile);
  
  // Dropbox and Google Drive buttons (placeholder functionality)
  dropboxBtn.addEventListener('click', () => alert('Dropbox integration would be implemented here'));
  driveBtn.addEventListener('click', () => alert('Google Drive integration would be implemented here'));
  
  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }
  
  function highlight() {
    dropArea.style.backgroundColor = '#f5f8ff';
    dropArea.style.borderColor = '#3a5bc7';
  }
  
  function unhighlight() {
    dropArea.style.backgroundColor = '';
    dropArea.style.borderColor = '#4a6ee0';
  }
  
  function handleDrop(e) {
    const dt = e.dataTransfer;
    const droppedFiles = dt.files;
    handleFiles({ target: { files: droppedFiles } });
  }
  
  function handleFiles(e) {
    const newFiles = Array.from(e.target.files);
    
    // Filter only JPG/JPEG files
    const jpgFiles = newFiles.filter(file => 
      file.type === 'image/jpeg' || 
      file.type === 'image/jpg' || 
      file.name.toLowerCase().endsWith('.jpg') || 
      file.name.toLowerCase().endsWith('.jpeg')
    );
    
    if (jpgFiles.length === 0) {
      alert('Please select only JPG/JPEG files.');
      return;
    }
    
    files = [...files, ...jpgFiles];
    updateFileList();
    fileInput.value = ''; // Reset input to allow selecting same files again
  }
  
  function addUrlFile() {
    const url = imageUrl.value.trim();
    
    if (!url) {
      alert('Please enter a valid URL');
      return;
    }
    
    // Validate URL is an image (simple check)
    if (!url.match(/\.(jpg|jpeg)$/i)) {
      alert('Please enter a URL ending with .jpg or .jpeg');
      return;
    }
    
    // Create a file-like object from URL
    const fileName = url.split('/').pop() || 'image.jpg';
    const file = {
      name: fileName,
      size: 'URL file',
      type: 'image/jpeg',
      isUrl: true,
      url: url
    };
    
    files.push(file);
    updateFileList();
    imageUrl.value = '';
    urlModal.style.display = 'none';
  }
  
  function updateFileList() {
    if (files.length === 0) {
      fileListContainer.style.display = 'none';
      return;
    }
    
    fileListContainer.style.display = 'block';
    fileList.innerHTML = '';
    
    files.forEach((file, index) => {
      const fileItem = document.createElement('div');
      fileItem.className = 'file-item';
      
      fileItem.innerHTML = `
        <div class="file-info">
          <div class="file-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4a6ee0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
          </div>
          <div>
            <div class="file-name">${file.name}</div>
            <div class="file-size">${file.size ? formatFileSize(file.size) : file.size}</div>
          </div>
        </div>
        <button class="remove-file" data-index="${index}">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ff4d4d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      `;
      
      fileList.appendChild(fileItem);
    });
    
    // Add event listeners to remove buttons
    document.querySelectorAll('.remove-file').forEach(button => {
      button.addEventListener('click', function() {
        const index = parseInt(this.getAttribute('data-index'));
        files.splice(index, 1);
        updateFileList();
      });
    });
  }
  
  function clearAllFiles() {
    files = [];
    updateFileList();
  }
  
  function convertToPdf() {
    if (files.length === 0) {
      alert('Please add at least one JPG file to convert');
      return;
    }
    
    // In a real implementation, this would upload files to a server for conversion
    // Here we'll simulate the process with a delay
    
    convertBtn.disabled = true;
    convertBtn.textContent = 'CONVERTING...';
    
    setTimeout(() => {
      // Simulate successful conversion
      convertBtn.textContent = 'DOWNLOAD PDF';
      convertBtn.style.backgroundColor = '#28a745';
      
      // Change the button to download
      convertBtn.onclick = function() {
        // In a real implementation, this would download the converted PDF
        alert('PDF would be downloaded now. In a real implementation, this would be the actual PDF file.');
        
        // Reset the button
        convertBtn.disabled = false;
        convertBtn.textContent = 'CONVERT TO PDF';
        convertBtn.style.backgroundColor = '#4a6ee0';
        convertBtn.onclick = convertToPdf;
      };
    }, 2000);
  }
  
  function formatFileSize(bytes) {
    if (typeof bytes !== 'number') return bytes;
    if (bytes < 1024) return bytes + ' bytes';
    else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    else return (bytes / 1048576).toFixed(1) + ' MB';
  }
});
</script>