<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to PDF Converter</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    
    <header>
        <nav class="navbar">
            <div class="logo">ImgToPDF <span>By Rahul Sharma</span></div>
            
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                
                
                <li><a href="#">About</a></li>
                <li><a href="comingsoon.html" class="login-btn">LogIn</a></li>
                <li><a href="comingsoon.html" class="free-btn">SignUp</a></li>
            </ul>
            <button class="menu-toggle" aria-label="Menu">&#9776;</button>
        </nav>
    </header>

    
    <main>
        <section class="upload-section">
            <h1>Convert IMAGE to PDF</h1>
            <div class="upload-box">
                <div class="upload-icon">
                    <img src="https://img.icons8.com/ios-filled/100/ffffff/pdf.png" alt="PDF Icon">
                </div>
                <input type="file" id="imageUpload" multiple accept="image/*">
                <div id="preview"></div>
                <div id="cropModal" style="display: none;">
                    <div class="crop-container">
                        <img id="imageToCrop" src="" alt="Crop">
                    </div>
                    <button id="cropImage">Crop Image</button>
                    <button id="useWithoutCrop">Use Without Cropping</button>
                    <button id="cancelCrop">Cancel</button>
                </div>
                <!-- Cropping modal -->
                <div id="cropModal" style="display: none;">
                    <div class="crop-container">
                        <img id="imageToCrop" src="" alt="Crop">
                    </div>
                    <button id="cropImage">Crop Image</button>
                    <button id="cancelCrop">Cancel</button>
                </div>
            
                <button id="generatePdf">Generate PDF</button>
                 
                <a href="comingsoon.html"><button id="compressSelectedPdf">Compress PDF</button></a>
    
    
            </div>
                
            </div> 

           
                


            <p class="info-text">
                Convert images to PDF for free online. Transform any image file into a custom PDF file in seconds—no file size limits, no watermarks.
            </p>
            <ul class="feature-list">
                <li>✅ Easy-to-use online IMAGE to PDF converter</li>
                <li>✅ Works on iPhone, Android, and in any web browser</li>
                <li>✅ Free conversion without registration</li>
            </ul>
        </section>
    </main>
    <section class="features-section">
        <div class="feature-container">
            <div class="feature">
                <img src="https://s.smallpdf.com/static/cms/f/102628/48x48/ce1a8c8535/7ca27d0428c9614899dc.svg" alt="Fast Conversion">
                <h3>Fast & Easy IMAGE to PDF Converter</h3>
                <p>Simply drag and drop your image files into the toolbox to transform them from a IMAGE file to PDF without losing image quality. Adjust settings like margin, orientation, and size to customize your PDF.</p>
            </div>
            <div class="feature">
                <img src="https://s.smallpdf.com/static/cms/f/102628/48x48/f1e714aece/ce852e16512bd6e094f1.svg" alt="File Protection">
                <h3>File Protection Guaranteed</h3>
                <p>We're serious about file security. TLS encryption safeguards your images throughout the process. Files are deleted automatically from our servers one hour after conversion.</p>
            </div>
            <div class="feature">
                <img src="https://s.smallpdf.com/static/cms/f/102628/48x48/00dcdafa20/d87ff218f8f01d7b05ef.svg" alt="Online Converter">
                <h3>Convert your IMAGE to PDF Online</h3>
                <p>Our IMAGE to PDF converter is browser-based, meaning it works on all systems—Mac, Windows, or Linux. Access it easily from anywhere.</p>
            </div>
            
        </div>
    </section>
    <section class="how-to-section">
        <div class="how-to-container">
            
            <div class="how-to-image">
                <img src="https://s.smallpdf.com/static/cms/f/102628/300x180/0cf4630611/bb46b97de13eb9b590de.svg" alt="Image to PDF Illustration">
            </div>
    
            
            <div class="how-to-content">
                <h2>How To Convert IMAGE to PDF Online:</h2>
                <ol>
                    <li>Upload or drag and drop your image into the JPG to PDF converter.</li>
                    <li>Adjust settings like size, orientation, and margin as needed.</li>
                    <li>Click “Convert” to begin the process.</li>
                    <li>Download or share your converted PDF—that’s all!</li>
                </ol>
            </div>
        </div>
    
        
        <div class="rating-section">
            <span class="rate-text"><strong>Rate this tool</strong></span>
            <!-- <span class="stars">
                &#9733;&#9733;&#9733;&#9733;&#9734;
            </span> -->
        </div>
    </section>
<section class="Feedback">
    
    <div class="feedback-container">
        <h2>Tell us what you think</h2>
        <form action="https://formspree.io/f/moqgjaao"
        method="POST"> 
          <input type="text" name="Name" placeholder="Name" required>
          <input type="email" name="Email" placeholder="Email" required>
          <textarea placeholder="Tell us what you think" name="Feedback" rows="5"></textarea>
          
          <button type="submit">Submit</button>
        </form>
      </div>
    </section>
    <footer>
        <div class="footer-top">
            <div class="social-icons">
                <a href="https://www.linkedin.com/in/rahul-sharma-5a19a8293/" target="_blank"><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn"></a>
                
                <a href="https://www.instagram.com/its_rahul_r15/" target="_blank"><img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" alt="Instagram"></a>
                
            </div>
            
        </div>
        <div class="footer-bottom">
            <p>Made by ❤️ Rahul Sharma</p>
            <div class="links">
                <a href="#">Privacy Notice</a>
                <a href="#">Terms & Conditions</a>
                
                <a href="#">Contact Us</a>
                
            </div>
        </div>
    </footer>
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <!-- Cropper.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">

<!-- Cropper.js JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

<script src="script.js"></script>
</body>
</html>
