<!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: 700
        }

        .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: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer
        }

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

        .id-container {
            width: 480px;
            border: 1px solid #000;
            border-radius: 13px
        }

        .id-header {
            display: flex;
            padding: 10px;
            border-radius: 13px 13px 0 0;
            background-color: #1c3f4a;
            justify-content: space-between;
            align-items: center
        }

        .id-header img {
            height: 100px
        }

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

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

        .id-head-headers h2 {
            position: relative
        }

        .id-head-headers h2::before {
            content: '';
            background-color: #fff;
            height: 5px;
            width: 300px;
            border-radius: 10px;
            position: absolute;
            top: 30px;
            right: 0
        }

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

        .profile,
        .profile img {
            height: 130px;
            width: 100px
        }

        .profile {
            border: 1px solid #000
        }

        .profile img {
            object-fit: cover
        }

        .students-details {
            display: flex;
            flex-direction: column;
            gap: 5px
        }

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

        .dtls span:first-child {
            font-weight: 700
        }

        .dtls span:nth-child(2) {
            font-weight: 700;
            margin-left: 15px;
            margin-right: 15px
        }
    </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="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 PNG</button>
        </div>

        <div class="id-container" id="id-to-save">
            <div class="id-main">
                <div class="id-header">
                    <div class="id-head-logo">
                        <img src="law-logo.png" alt="college logo">
                    </div>
                    <div class="id-head-headers">
                        <h1>GOVT LAW</h1>
                        <h2>COLLEGE, JHALAWAR</h2>
                    </div>
                </div>
                <div class="id-main-content">
                    <div class="profile">
                        <img id="student-img" src="profile-my.jpg" alt="Student Image">
                    </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>Mobile No.</span><span> : </span><span id="student-mobile">9680830578</span>
                        </div>
                        <div class="dtls">
                            <span>Address</span><span> : </span><span id="student-address">Behind P.G. College Kumhar
                                Mohalla Jhalawar</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>function _0x2df1() { const _0x1d186f = ['onload', 'id-to-save', '1406426evTqpg', 'toDataURL', 'readAsDataURL', 'files', 'then', 'student-mobile', 'value', '5120BaeMmJ', '3AhyIAa', '47718SNWNvY', 'href', 'father-name', 'Student', 'addEventListener', 'change', 'src', '54GhpAmj', 'mobile', '507945FLcYxl', '55024DDbXRt', 'click', 'student-address', 'student-dob', 'student-img', 'save-id', 'name', 'target', 'student-name', 'textContent', '8218343ukPZhB', 'getElementById', 'profile-image', '-front.png', '3210808fWgczV', '8909672OBvCJD']; _0x2df1 = function () { return _0x1d186f; }; return _0x2df1(); } function _0x1716(_0x5912c5, _0x3aa1fe) { const _0x2df116 = _0x2df1(); return _0x1716 = function (_0x1716b5, _0x2a9c4e) { _0x1716b5 = _0x1716b5 - 0x14e; let _0x3085d2 = _0x2df116[_0x1716b5]; return _0x3085d2; }, _0x1716(_0x5912c5, _0x3aa1fe); } const _0x423898 = _0x1716; (function (_0x178f62, _0x565cbb) { const _0x4f856f = _0x1716, _0x404e60 = _0x178f62(); while (!![]) { try { const _0x28bbdc = -parseInt(_0x4f856f(0x15d)) / 0x1 + parseInt(_0x4f856f(0x170)) / 0x2 * (-parseInt(_0x4f856f(0x165)) / 0x3) + parseInt(_0x4f856f(0x159)) / 0x4 + parseInt(_0x4f856f(0x16f)) / 0x5 * (parseInt(_0x4f856f(0x16d)) / 0x6) + -parseInt(_0x4f856f(0x155)) / 0x7 + -parseInt(_0x4f856f(0x15a)) / 0x8 + -parseInt(_0x4f856f(0x166)) / 0x9 * (-parseInt(_0x4f856f(0x164)) / 0xa); if (_0x28bbdc === _0x565cbb) break; else _0x404e60['push'](_0x404e60['shift']()); } catch (_0x5b5eb2) { _0x404e60['push'](_0x404e60['shift']()); } } }(_0x2df1, 0xad52b), document[_0x423898(0x156)]('generate-id')[_0x423898(0x16a)]('click', () => { const _0x2312d8 = _0x423898; document['getElementById'](_0x2312d8(0x153))['textContent'] = document[_0x2312d8(0x156)](_0x2312d8(0x151))['value'], document[_0x2312d8(0x156)]('student-father-name')[_0x2312d8(0x154)] = document['getElementById'](_0x2312d8(0x168))[_0x2312d8(0x163)], document[_0x2312d8(0x156)](_0x2312d8(0x14e))['textContent'] = document[_0x2312d8(0x156)]('dob')[_0x2312d8(0x163)], document[_0x2312d8(0x156)](_0x2312d8(0x162))[_0x2312d8(0x154)] = document[_0x2312d8(0x156)](_0x2312d8(0x16e))[_0x2312d8(0x163)], document[_0x2312d8(0x156)](_0x2312d8(0x172))[_0x2312d8(0x154)] = document['getElementById']('address')[_0x2312d8(0x163)]; }), document[_0x423898(0x156)](_0x423898(0x150))[_0x423898(0x16a)](_0x423898(0x171), () => { const _0x9bb4d9 = _0x423898, _0x1d72a7 = document[_0x9bb4d9(0x156)](_0x9bb4d9(0x15c)), _0x2fa3f7 = document[_0x9bb4d9(0x156)]('name')[_0x9bb4d9(0x163)] || _0x9bb4d9(0x169); html2canvas(_0x1d72a7)[_0x9bb4d9(0x161)](_0x526b65 => { const _0x5d4cfa = _0x9bb4d9, _0x196f9a = document['createElement']('a'); _0x196f9a['download'] = _0x2fa3f7 + _0x5d4cfa(0x158), _0x196f9a[_0x5d4cfa(0x167)] = _0x526b65[_0x5d4cfa(0x15e)](), _0x196f9a['click'](); }); }), document[_0x423898(0x156)](_0x423898(0x157))[_0x423898(0x16a)](_0x423898(0x16b), _0x123794 => { const _0x4f01d6 = _0x423898, _0x3ac8ed = _0x123794[_0x4f01d6(0x152)][_0x4f01d6(0x160)][0x0]; if (_0x3ac8ed) { const _0x57b80a = new FileReader(); _0x57b80a[_0x4f01d6(0x15b)] = _0x2ac836 => { const _0x28c242 = _0x4f01d6; document[_0x28c242(0x156)](_0x28c242(0x14f))[_0x28c242(0x16c)] = _0x2ac836[_0x28c242(0x152)]['result']; }, _0x57b80a[_0x4f01d6(0x15f)](_0x3ac8ed); } }));
    </script>
</body>

</html>