From 5b0e9d81578cd5c8fc7bac29b988c1563ea26c42 Mon Sep 17 00:00:00 2001
From: "codeshwar-preview[bot]"
<160849357+codeshwar-preview[bot]@users.noreply.github.com>
Date: Thu, 6 Feb 2025 05:04:41 +0000
Subject: [PATCH] Update files in addi-72
---
image-to-pdf-app/README.md | 31 +++++++++++++
image-to-pdf-app/index.html | 22 +++++++++
image-to-pdf-app/jpeg-to-pdf.html | 29 ++++++++++++
image-to-pdf-app/script.js | 49 ++++++++++++++++++++
image-to-pdf-app/style.css | 75 +++++++++++++++++++++++++++++++
5 files changed, 206 insertions(+)
create mode 100644 image-to-pdf-app/README.md
create mode 100644 image-to-pdf-app/index.html
create mode 100644 image-to-pdf-app/jpeg-to-pdf.html
create mode 100644 image-to-pdf-app/script.js
create mode 100644 image-to-pdf-app/style.css
diff --git a/image-to-pdf-app/README.md b/image-to-pdf-app/README.md
new file mode 100644
index 0000000..e474a38
--- /dev/null
+++ b/image-to-pdf-app/README.md
@@ -0,0 +1,31 @@
+
+## Project Overview
+The Image to PDF Converter is a web-based application that allows users to easily convert their JPEG images into PDF format. This application simplifies the process of converting images to PDFs, making it accessible to anyone with a web browser.
+
+## Installation Instructions
+As this application is web-based, there's no need for a traditional installation. However, to run it locally on your machine, you can use Python's HTTP server module by following these steps:
+1. Ensure you have Python installed on your computer. You can download it from https://www.python.org/downloads/.
+2. Open your terminal or command prompt.
+3. Navigate to the directory where you have saved the project files.
+4. Run the command `python -m http.server` (for Python 3.x) or `python -m SimpleHTTPServer` (for Python 2.x).
+5. Open a web browser and visit `http://localhost:8000` to access the application.
+
+## Usage Guide
+To use the Image to PDF Converter, follow these steps:
+1. Load the web application in your web browser by navigating to the URL provided by the local server setup.
+2. On the homepage, click the "Convert JPEG to PDF" button.
+3. You will be prompted to select the JPEG image(s) you wish to convert.
+4. After selecting the images, click the "Convert to PDF" button to initiate the conversion process.
+5. Once the conversion is complete, you can download the resulting PDF file to your local device.
+
+## Prerequisites
+- **Browser Compatibility**: The application is compatible with modern web browsers such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
+- **JavaScript Libraries**: The application uses the jsPDF library to perform the image to PDF conversion. This library is included via CDN, so there's no need for manual installation.
+
+## Screenshots
+- **Image Selection**: A screenshot showing how to select images for conversion.
+- **Conversion Process**: A screenshot depicting the conversion process.
+- **PDF Download**: A screenshot illustrating the option to download the converted PDF.
+
+## Acknowledgments
+This project makes use of the jsPDF library for converting images to PDF format. jsPDF is a powerful library that simplifies the process of generating PDF documents using JavaScript. More information about jsPDF can be found at their official GitHub repository: https://github.com/MrRio/jsPDF.
\ No newline at end of file
diff --git a/image-to-pdf-app/index.html b/image-to-pdf-app/index.html
new file mode 100644
index 0000000..70bcb8f
--- /dev/null
+++ b/image-to-pdf-app/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+ Image to PDF Converter
+
+
+
+
+
Welcome to the Image to PDF Converter
+
+
+
+
Convert your JPEG images to PDF in a snap!
+
+
+
+
+
+
\ No newline at end of file
diff --git a/image-to-pdf-app/jpeg-to-pdf.html b/image-to-pdf-app/jpeg-to-pdf.html
new file mode 100644
index 0000000..ec8db77
--- /dev/null
+++ b/image-to-pdf-app/jpeg-to-pdf.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Convert JPEG to PDF
+
+
+
+
+
+
+
Convert Your JPEG Images to PDF
+
+
+
+
+
Select a JPEG file from your device and click on "Convert to PDF" to start the conversion process.
+
+
+ Download PDF
+
+
+
+
+
\ No newline at end of file
diff --git a/image-to-pdf-app/script.js b/image-to-pdf-app/script.js
new file mode 100644
index 0000000..fb30d30
--- /dev/null
+++ b/image-to-pdf-app/script.js
@@ -0,0 +1,49 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+ const uploadInput = document.getElementById("jpeg-upload");
+ const convertButton = document.getElementById("convert-button");
+ const downloadLink = document.getElementById("download-link");
+
+ // Validate the file input to ensure it's a JPEG file
+ uploadInput.addEventListener("change", function() {
+ const file = uploadInput.files[0];
+ if (file.type !== "image/jpeg") {
+ alert("Please select a JPEG file.");
+ uploadInput.value = ""; // Reset the input
+ }
+ });
+
+ // Convert the uploaded JPEG to PDF
+ convertButton.addEventListener("click", function() {
+ const file = uploadInput.files[0];
+ if (!file) {
+ alert("Please upload a JPEG file first.");
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = function(event) {
+ const imgData = event.target.result;
+ const pdf = new jsPDF({
+ orientation: 'p',
+ unit: 'mm',
+ format: 'a4'
+ });
+
+ // Calculate the PDF width and height to maintain the image aspect ratio
+ const imgProps = pdf.getImageProperties(imgData);
+ const pdfWidth = pdf.internal.pageSize.getWidth();
+ const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
+ pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
+ const pdfBlob = pdf.output('blob');
+
+ // Create a download link for the PDF
+ const pdfUrl = URL.createObjectURL(pdfBlob);
+ downloadLink.href = pdfUrl;
+ downloadLink.download = "converted.pdf";
+ downloadLink.innerHTML = "Download PDF";
+ downloadLink.style.display = "block";
+ };
+ reader.readAsDataURL(file);
+ });
+});
\ No newline at end of file
diff --git a/image-to-pdf-app/style.css b/image-to-pdf-app/style.css
new file mode 100644
index 0000000..25c3c0b
--- /dev/null
+++ b/image-to-pdf-app/style.css
@@ -0,0 +1,75 @@
+
+body, html {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+}
+
+header {
+ background-color: #f8f9fa;
+ padding: 20px 0;
+ text-align: center;
+ border-bottom: 1px solid #e0e0e0;
+}
+
+header h1 {
+ margin: 0;
+ color: #333;
+}
+
+main {
+ padding: 20px;
+ text-align: center;
+}
+
+button, #convert-btn, #convert-button {
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ margin: 10px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+button:hover, #convert-btn:hover, #convert-button:hover {
+ background-color: #0056b3;
+}
+
+input[type="file"] {
+ margin: 20px 0;
+}
+
+.conversion-section {
+ margin-top: 20px;
+}
+
+footer {
+ background-color: #f8f9fa;
+ text-align: center;
+ padding: 10px 0;
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ border-top: 1px solid #e0e0e0;
+}
+
+footer p {
+ margin: 0;
+ color: #777;
+}
+
+/* Responsive layout adjustments */
+@media (max-width: 768px) {
+ header, main, footer {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ button, #convert-btn, #convert-button {
+ width: 100%;
+ box-sizing: border-box; /* Ensures padding does not add to the total width */
+ }
+}
\ No newline at end of file