<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID Card Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        canvas {
            border: 2px solid #000;
            margin-bottom: 20px;
        }

        button {
            background-color: #004080;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #003060;
        }

        input {
            display: none;
        }
    </style>
</head>
<body>

    <canvas id="idCardCanvas" width="700" height="450"></canvas>
    <button id="downloadButton">Download ID Card</button>

    <input type="file" id="uploadPhoto" accept="image/*">
    <input type="file" id="uploadSign" accept="image/*">

    <script>
        const canvas = document.getElementById('idCardCanvas');
        const ctx = canvas.getContext('2d');
        const uploadPhoto = document.getElementById('uploadPhoto');
        const uploadSign = document.getElementById('uploadSign');

        const radius = 10;
        const WIDTH = 700;
        const HEIGHT = 450;
        const HEADER_MARGIN = 5;
        const SIDE_MARGIN = 5;

        let studentData = {
            id: "24BTIT1113",
            name: "SHRIWAS KARTIK NARENDRA",
            department: "INFORMATION TECHNOLOGY",
            program: "BT - IT",
            year: "2024-2025",
            photoPath: "student_photo.png",
            sign: "sign.jpg",
            leftLogo: "logo1.png",
            rightLogo: "logo2.png",
            stamp: "stamp.png"
        };

        function drawIDCard() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, WIDTH, HEIGHT);

            ctx.fillStyle = "#004080";
            ctx.beginPath();
            ctx.moveTo(SIDE_MARGIN + radius, HEADER_MARGIN);
            ctx.arcTo(WIDTH - SIDE_MARGIN, HEADER_MARGIN, WIDTH - SIDE_MARGIN, HEADER_MARGIN + 172, radius);
            ctx.lineTo(WIDTH - SIDE_MARGIN, HEADER_MARGIN + 172);
            ctx.lineTo(SIDE_MARGIN, HEADER_MARGIN + 172);
            ctx.lineTo(SIDE_MARGIN, HEADER_MARGIN + radius);
            ctx.arcTo(SIDE_MARGIN, HEADER_MARGIN, SIDE_MARGIN + radius, HEADER_MARGIN, radius);
            ctx.closePath();
            ctx.fill();

            function loadImageAndDraw(src, x, y, width, height, callback) {
                const img = new Image();
                img.src = src;
                img.onload = () => {
                    ctx.drawImage(img, x, y, width, height);
                    if (callback) callback();
                };
            }
            ctx.fillStyle = "#fff";
            ctx.beginPath();
            ctx.moveTo(SIDE_MARGIN + 5 + radius, 10);
            ctx.lineTo(SIDE_MARGIN + 5 + 105 - radius, 10);
            ctx.arcTo(SIDE_MARGIN + 5 + 105, 10, SIDE_MARGIN + 5 + 105, 10 + 160, radius);
            ctx.lineTo(SIDE_MARGIN + 5 + 105, 10 + 160 - radius);
            ctx.arcTo(SIDE_MARGIN + 5 + 105, 10 + 160, SIDE_MARGIN + 5 + 105 - radius, 10 + 160, radius);
            ctx.lineTo(SIDE_MARGIN + 5 + radius, 10 + 160);
            ctx.arcTo(SIDE_MARGIN + 5, 10 + 160, SIDE_MARGIN + 5, 10 + 160 - radius, radius);
            ctx.lineTo(SIDE_MARGIN + 5, 10 + radius);
            ctx.arcTo(SIDE_MARGIN + 5, 10, SIDE_MARGIN + 5 + radius, 10, radius);
            ctx.closePath();
            ctx.fill();
            ctx.fillStyle = "#fff";
            ctx.beginPath();
            ctx.moveTo(WIDTH - SIDE_MARGIN - 110 + radius, 10);
            ctx.lineTo(WIDTH - SIDE_MARGIN - 110 + 104 - radius, 10);
            ctx.arcTo(WIDTH - SIDE_MARGIN - 110 + 104, 10, WIDTH - SIDE_MARGIN - 110 + 104, 10 + 160, radius);
            ctx.lineTo(WIDTH - SIDE_MARGIN - 110 + 104, 10 + 160 - radius);
            ctx.arcTo(WIDTH - SIDE_MARGIN - 110 + 104, 10 + 160, WIDTH - SIDE_MARGIN - 110 + 104 - radius, 10 + 160, radius);
            ctx.lineTo(WIDTH - SIDE_MARGIN - 110 + radius, 10 + 160);
            ctx.arcTo(WIDTH - SIDE_MARGIN - 110, 10 + 160, WIDTH - SIDE_MARGIN - 110, 10 + 160 - radius, radius);
            ctx.lineTo(WIDTH - SIDE_MARGIN - 110, 10 + radius);
            ctx.arcTo(WIDTH - SIDE_MARGIN - 110, 10, WIDTH - SIDE_MARGIN - 110 + radius, 10, radius);
            ctx.closePath();
            ctx.fill();
            loadImageAndDraw(studentData.leftLogo, SIDE_MARGIN + 17, HEADER_MARGIN + 172 / 4, 80, 100);
            loadImageAndDraw(studentData.rightLogo, WIDTH - SIDE_MARGIN - 130, HEADER_MARGIN + 50, 130, 80);
            loadImageAndDraw(studentData.stamp, 520, 370, 120, 80);
            loadImageAndDraw(studentData.photoPath, 12, 195, 140, 160);
            loadImageAndDraw(studentData.sign, 12, 370, 140, 40);

            ctx.fillStyle = "#fff";
            ctx.font = "bold 15px Arial";
            ctx.textAlign = "center";
            ctx.fillText("VIDARBHA YOUTH WELFARE SOCIETY'S", WIDTH / 2, HEADER_MARGIN + 21);
            ctx.font = "bold 25px Arial";
            ctx.fillText("PROF. RAM MEGHE INSTITUTE OF", WIDTH / 2, HEADER_MARGIN + 50);
            ctx.fillText("TECHNOLOGY AND RESEARCH", WIDTH / 2, HEADER_MARGIN + 80);
            ctx.font = "bold 16px Arial";
            ctx.fillText("BADNERA - AMRAVATI (MS) 444701", WIDTH / 2, HEADER_MARGIN + 106);
            ctx.font = "12px Arial";
            ctx.fillText("Approved by AICTE, New Delhi    Web: https://mitra.ac.in    Ph: 0721-2681246", WIDTH / 2, HEADER_MARGIN + 124);
            ctx.font = "bold 15px Arial";
            ctx.fillText("(An Autonomous Institute)", WIDTH / 2, HEADER_MARGIN + 140);
            ctx.font = "15px Arial";
            ctx.fillText("Affiliated to: Sant Gadge Baba Amravati University, Amravati", WIDTH / 2, HEADER_MARGIN + 160);

            ctx.fillStyle = "#000";
            ctx.font = "20px Arial";
            ctx.textAlign = "left";
            drawEditableText("Student ID", 170, 220, studentData.id);
            drawEditableText("Name", 170, 260, studentData.name);
            drawEditableText("Dept", 170, 310, studentData.department);
            drawEditableText("Programme", 170, 360, studentData.program);
            drawEditableText("Year of", 170, 400, studentData.year);
            ctx.fillText("Admission", 170, 430);

            ctx.font = "12px Arial";
            ctx.fillText("Sign of Student", 40, 420);
        }

        function drawEditableText(label, x, y, value) {
            ctx.fillText(label, x, y);
            ctx.fillText(`: ${value}`, x + 130, y);

            canvas.addEventListener("click", function (event) {
                let rect = canvas.getBoundingClientRect();
                let mouseX = event.clientX - rect.left;
                let mouseY = event.clientY - rect.top;

                if (mouseX >= x && mouseX <= x + 250 && mouseY >= y - 15 && mouseY <= y + 5) {
                    let newValue = prompt(`Edit ${label}:`, value);
                    if (newValue !== null) {
                        updateStudentData(label, newValue);
                    }
                }
            });
        }

        function updateStudentData(label, value) {
            switch (label) {
                case "Student ID":
                    studentData.id = value;
                    break;
                case "Name":
                    studentData.name = value;
                    break;
                case "Dept":
                    studentData.department = value;
                    break;
                case "Programme":
                    studentData.program = value;
                    break;
                case "Year of Admission":
                    studentData.year = value;
                    break;
            }
            drawIDCard();
        }

        canvas.addEventListener("click", function (event) {
            let rect = canvas.getBoundingClientRect();
            let mouseX = event.clientX - rect.left;
            let mouseY = event.clientY - rect.top;

            if (mouseX >= 12 && mouseX <= 152 && mouseY >= 195 && mouseY <= 355) {
                uploadPhoto.click();
            }

            if (mouseX >= 12 && mouseX <= 152 && mouseY >= 370 && mouseY <= 410) {
                uploadSign.click();
            }
        });

        uploadPhoto.addEventListener("change", function (event) {
            studentData.photoPath = URL.createObjectURL(event.target.files[0]);
            drawIDCard();
        });

        uploadSign.addEventListener("change", function (event) {
            studentData.sign = URL.createObjectURL(event.target.files[0]);
            drawIDCard();
        });

        drawIDCard();

        document.getElementById('downloadButton').addEventListener('click', function () {
            const link = document.createElement('a');
            link.download = 'id_card.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    </script>

</body>
</html>
