<!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: "https://media.discordapp.net/attachments/848831145801023489/1333481099615277126/6152372508301573172_120-removebg-preview.png?ex=67990c8d&is=6797bb0d&hm=68ae627b642114bf03ca17d8c566fdbd11cefad6b4a8433fb53e081e243b0b2c&=&format=webp&quality=lossless&width=550&height=550",
            sign: "https://media.discordapp.net/attachments/848831145801023489/1333481100546408539/photo_2024-09-18_10-24-11.jpg?ex=67990c8d&is=6797bb0d&hm=ccc4ffc7a3edbd051a676b7ec3c2cd298dc8b0ea0dd7623c02ca26be9a247018&=&format=webp&width=730&height=353",
            leftLogo: "https://media.discordapp.net/attachments/848831145801023489/1333481674469806162/image.png?ex=67990d16&is=6797bb96&hm=81a5b0d8f8ee46585d4661422df8e413d38481faf2771990abfa59fc807eab60&=&format=webp&quality=lossless&width=116&height=127",
            rightLogo: "https://media.discordapp.net/attachments/848831145801023489/1333481674108829757/image.png?ex=67990d15&is=6797bb95&hm=1570e39062863bd512032b4c75e46b794e10c287dbf110d2ec76118d7a65e71f&=&format=webp&quality=lossless&width=257&height=148",
            stamp: "https://media.discordapp.net/attachments/848831145801023489/1333481673685209138/image.png?ex=67990d15&is=6797bb95&hm=ead2a5a5c8477761f8bd0d99a17f3cfb7da18d1a40b4bd0b3ff08f586f56ca52&=&format=webp&quality=lossless&width=685&height=440"
        };

        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.crossOrigin = 'Anonymous'; 
                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>
