<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College ID Generator</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .form-container {
            margin-bottom: 20px;
        }

        .form-container label {
            display: block;
            margin: 10px 0 5px;
            font-weight: bold;
        }

        .form-container input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-container button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .form-container button:hover {
            background-color: #218838;
        }

        .id-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .id-main {
            border-radius: 13px;
            border: 1px black solid;
            width: 480px;
        }

        .id-front {
            height: 326px;
        }

        .id-back {
            height: 326px;
            background-image: url(college.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .id-header {
            display: flex;
            border-radius: 13px 13px 0 0;
            background-color: rgb(28, 63, 74);
            justify-content: space-between;
            align-items: center;
        }

        .id-header img {
            aspect-ratio: auto;
            border-radius: 13px 13px 0 0;
            height: 100px;
        }

        .id-head-headers {
            color: white;
            padding-right: 15px;
            font-family: Arial;
        }

        .id-head-headers {
            text-align: right;
        }

        .id-head-headers h3 {
            position: relative;
        }

        .id-head-headers h3::before {
            content: '';
            background-color: white;
            height: 2px;
            width: 280px;
            border-radius: 10px;
            position: absolute;
            top: 30px;
            right: 0;
        }

        .id-main-content {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-image: url(college.png);
            background-position: center;
            background-size: 300px;
            background-repeat: no-repeat;
        }

        .profile {
            height: 110px;
            width: 100px;
            display: flex;
            flex-direction: column;
            text-align: center;
            font-size: 12px;
            color: red;
            margin-bottom: 18px;
        }

        .profile img {
            height: 110px;
            border: 1px black solid;
            width: 100px;
            object-fit: cover;
        }

        .students-details {
            display: flex;
            flex-direction: column;
            margin-top: 6px;
        }

        .dtls {
            display: flex;
            font-family: Arial;
        }

        .dtls span:first-child {
            flex: 1;
            font-weight: bold;
        }

        .dtls span:nth-child(2) {
            font-weight: bold;
            margin-right: 15px;
        }

        .dtls span:last-child {
            flex: 1;
            text-align: left;
        }

        .before-main {
            display: flex;
            justify-content: center;
        }

        .before-main h4 {
            color: rgb(28, 63, 74);
            width: fit-content;
            font-weight: bolder;
            font-family: Arial;
            border-bottom: 1px rgb(28, 63, 74) solid;
            margin: 5px;
        }

        .signature-block {
            padding-left: 30px;
            margin-top: 20px;
        }

        /* Back Side Design */
        .id-back-content {
            padding: 20px;
            font-family: Arial;
            font-size: 14px;
            line-height: 1.6;
        }

        .id-back-content h4 {
            margin-bottom: 10px;
            color: rgb(28, 63, 74);
        }

        .id-back-content p {
            margin: 5px 0;
        }

        .id-back-content a {
            color: blue;
            text-decoration: none;
        }

        .id-back-content a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <main>
        <div class="form-container">
            <label for="name">Name:</label>
            <input type="text" id="name" placeholder="Enter name">

            <label for="father-name">Father's Name:</label>
            <input type="text" id="father-name" placeholder="Enter father's name">

            <label for="dob">Date of Birth:</label>
            <input type="text" id="dob" placeholder="Enter date of birth (DD/MM/YYYY)">

            <label for="mobile">Mobile Number:</label>
            <input type="text" id="mobile" placeholder="Enter mobile number">

            <label for="address">Address:</label>
            <input type="text" id="address" placeholder="Enter address">

            <label for="course">Course:</label>
            <input type="text" id="course" placeholder="Enter course">

            <label for="registration-number">Registration Number:</label>
            <input type="text" id="registration-number" placeholder="Enter registration number">

            <label for="profile-image">Upload Profile Image:</label>
            <input type="file" id="profile-image" accept="image/*">

            <button id="generate-id">Generate ID</button>
            <button id="save-id">Save as PDF</button>
        </div>

        <div class="id-container" id="id-to-save">
            <div class="id-main id-front">
                <div class="id-header">
                    <div class="id-head-logo">
                        <img src="law-logo.png" alt="college logo">
                    </div>
                    <div class="id-head-headers">
                        <h2>GOVT. LAW COLLEGE</h2>
                        <h3>JHALAWAR, RAJASTHAN</h3>
                    </div>
                </div>
                <div class="before-main">
                    <h4>Identity Card</h4>
                </div>
                <div class="id-main-content">
                    <div class="profile">
                        <p>Session 2024-25</p>
                        <img id="student-img" src="profile-my.jpg" alt="Student Image">
                        <br>
                    </div>
                    <div class="students-details">
                        <div class="dtls">
                            <span>Name</span><span> : </span><span id="student-name">Daksh Mobiya</span>
                        </div>
                        <div class="dtls">
                            <span>Father's Name</span><span> : </span><span id="student-father-name">Tikam Chand
                                Mobiya</span>
                        </div>
                        <div class="dtls">
                            <span>Date Of Birth</span><span>:</span><span id="student-dob">19/09/2005</span>
                        </div>
                        <div class="dtls">
                            <span>Course</span><span>:</span><span id="student-course">BCA</span>
                        </div>
                        <div class="dtls">
                            <span>Mobile No.</span><span> : </span><span id="student-mobile">9680830578</span>
                        </div>
                        <div class="dtls">
                            <span>Registration No.</span><span> : </span><span id="student-registration-number">3333</span>
                        </div>
                    </div>
                </div>
                <div class="signature-block">
                    <p>Signature</p>
                </div>
            </div>
            <div class="id-main id-back">
                <div class="id-back-content">
                    <h4>Student Address:</h4>
                    <p id="student-address"><strong>Address:</strong> Behind P.G. College Kumhar Mohalla Jhalawar</p>
                    <h4>College Details</h4>
                    <p><strong>Address:</strong> Government Law College Jhalawar, Village Munderi Khanpur Road Near Pallavan School, Jhalawar</p>
                    <p><strong>Phone No.:</strong> 7742671702</p>
                    <p><strong>Email ID:</strong> aashaybhatnagar26@gmail.com</p>
                    <p><strong>Fax:</strong> 7792853690</p>
                    <p><strong>Website:</strong> <a href="https://hte.rajasthan.gov.in/college/glcjhalawar" target="_blank">https://hte.rajasthan.gov.in/college/glcjhalawar</a></p>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script>
        document.getElementById('generate-id').addEventListener('click', () => {
            document.getElementById('student-name').textContent = document.getElementById('name').value;
            document.getElementById('student-father-name').textContent = document.getElementById('father-name').value;
            document.getElementById('student-dob').textContent = document.getElementById('dob').value;
            document.getElementById('student-course').textContent = document.getElementById('course').value;
            document.getElementById('student-mobile').textContent = document.getElementById('mobile').value;
            document.getElementById('student-registration-number').textContent = document.getElementById('registration-number').value;
            document.getElementById('student-address').innerHTML = '<strong>Address: </strong>'+document.getElementById('address').value;
        });

        document.getElementById('save-id').addEventListener('click', async () => {
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [480, 326] });

            const elementToSave = document.getElementById('id-to-save');

            for (let i = 0; i < elementToSave.children.length; i++) {
                const child = elementToSave.children[i];
                const canvas = await html2canvas(child, { useCORS: true, allowTaint: true ,
                    scale: 3});
                const imgData = canvas.toDataURL('image/png');
                if (i > 0) pdf.addPage();
                pdf.addImage(imgData, 'PNG', 0, 0, 480, 326, undefined, 'FAST');

            }

            const fileName = document.getElementById('student-name').textContent +'Student-ID';
            pdf.save(`${fileName}.pdf`);
        });

        document.getElementById('profile-image').addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    document.getElementById('student-img').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>

</html>

<!-- <script>
    document.addEventListener('contextmenu', (event) => event.preventDefault());
</script>
<script>
    document.addEventListener('keydown', (event) => {
        if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
            alert('Developer tools are disabled on this page by Daksh Mobiya.');
            event.preventDefault();
        }
    });
</script> -->