{"id":8209,"date":"2026-10-08T20:23:25","date_gmt":"2026-10-08T20:23:25","guid":{"rendered":"https:\/\/mapschools.net\/?page_id=8209"},"modified":"2026-10-08T22:07:24","modified_gmt":"2026-10-08T22:07:24","slug":"card","status":"publish","type":"page","link":"https:\/\/mapschools.net\/ar\/card\/","title":{"rendered":"\u0628\u0637\u0627\u0642\u0629 \u062a\u0647\u0646\u0626\u0629"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Great+Vibes&family=Dancing+Script:wght@400..700&family=Sacramento&family=Amiri:ital@0;1&display=swap');\n\n.eid-cards-box {\n    box-sizing: border-box;\n    font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    max-width: 1200px;\n    width: 100%;\n    margin: 20px auto;\n    padding: 30px;\n    border-radius: 50px;\n    box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n    background: #ffffffd9;\n    border: 1px solid #fff;\n    direction: rtl;\n}\n\n.eid-cards-box h2 {\n    text-align: center;\n    color: #7b4b3a;\n    font-size: 2.5rem;\n    margin: 0 0 10px 0;\n    text-shadow: 2px 2px 0 #f0d5b0;\n}\n\n.eid-cards-box .input-section {\n    text-align: center;\n    margin: 20px 0;\n}\n\n.eid-cards-box .input-section label {\n    display: block;\n    font-size: 1.2rem;\n    color: #5a3e2b;\n    margin-bottom: 10px;\n}\n\n.eid-cards-box #customerName {\n    width: 60%;\n    max-width: 400px;\n    padding: 15px 25px;\n    font-size: 1.2rem;\n    border: 3px solid #d4a373;\n    border-radius: 60px;\n    outline: none;\n    background: #fff9f0;\n    color: #3b2a1d;\n    text-align: center;\n    transition: 0.3s;\n    font-family: inherit;\n}\n\n.eid-cards-box #customerName:focus {\n    border-color: #7b4b3a;\n    box-shadow: 0 0 0 4px #e9c9a9;\n}\n\n.eid-cards-box .picker-title {\n    text-align: center;\n    color: #7b4b3a;\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin: 30px 0 15px;\n}\n\n.eid-cards-box .image-picker {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n    gap: 15px;\n    max-width: 900px;\n    margin: 0 auto 30px;\n    padding: 20px;\n    background: #fff9f0;\n    border-radius: 30px;\n    border: 2px dashed #d4a373;\n    min-height: 150px;\n}\n\n.eid-cards-box .loading-cards {\n    grid-column: 1 \/ -1;\n    text-align: center;\n    color: #7b4b3a;\n    font-size: 1.1rem;\n    padding: 30px;\n}\n\n.eid-cards-box .card-btn {\n    position: relative;\n    background: white;\n    border: 3px solid transparent;\n    border-radius: 20px;\n    padding: 3px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n    aspect-ratio: 3\/4;\n    overflow: hidden;\n}\n\n.eid-cards-box .card-btn img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 17px;\n    display: block;\n}\n\n.eid-cards-box .card-btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 8px 20px rgba(0,0,0,0.2);\n}\n\n.eid-cards-box .card-btn.active {\n    border-color: #7b4b3a;\n    box-shadow: 0 0 0 4px #e9c9a9;\n    transform: translateY(-5px);\n}\n\n.eid-cards-box .card-preview {\n    margin-top: 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n}\n\n.eid-cards-box .card-container {\n    position: relative;\n    display: inline-block;\n    max-width: 100%;\n    border-radius: 40px;\n    overflow: hidden;\n    box-shadow: 0 30px 40px rgba(0,0,0,0.2);\n    border: 8px solid white;\n    background: white;\n    min-height: 200px;\n    min-width: 300px;\n}\n\n.eid-cards-box .card-image {\n    display: block;\n    max-width: 100%;\n    height: auto;\n    width: auto;\n    margin: 0 auto;\n}\n\n.eid-cards-box .name-overlay {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    text-align: center;\n    color: white;\n    font-size: 2.4rem;\n    font-weight: 300;\n    text-shadow: 2px 2px 0 #00000055, 4px 4px 0px #00000030;\n    padding: 5px 15px;\n    background: linear-gradient(90deg, transparent, #00000030, transparent);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 80%;\n    margin: 0 auto;\n    border-radius: 40px;\n    font-family: 'Great Vibes', 'Dancing Script', 'Sacramento', 'Amiri', cursive;\n    transform: translateY(-50%);\n    letter-spacing: 2px;\n    opacity: 0.95;\n    z-index: 10;\n}\n\n.eid-cards-box .image-info {\n    text-align: center;\n    margin-top: 10px;\n    color: #7b4b3a;\n    font-size: 0.9rem;\n    min-height: 40px;\n}\n\n.eid-cards-box .download-btn-container {\n    text-align: center;\n    margin: 30px 0 10px;\n}\n\n.eid-cards-box #downloadCard {\n    background: #7b4b3a;\n    color: white;\n    border: none;\n    padding: 15px 40px;\n    font-size: 1.3rem;\n    border-radius: 60px;\n    cursor: pointer;\n    transition: 0.3s;\n    border: 2px solid #f0d5b0;\n    font-weight: bold;\n    box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n    font-family: inherit;\n}\n\n.eid-cards-box #downloadCard:hover:not(:disabled) {\n    background: #b5835a;\n    transform: scale(1.05);\n}\n\n.eid-cards-box #downloadCard:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.eid-cards-box .signature {\n    text-align: center;\n    margin-top: 40px;\n    padding: 20px 0 10px 0;\n    border-top: 2px dashed #d4a373;\n    color: #7b4b3a;\n    font-size: 1.2rem;\n    font-family: 'Amiri', 'Segoe UI', cursive;\n}\n\n.eid-cards-box .signature .name {\n    font-size: 1.8rem;\n    font-weight: bold;\n    color: #b5835a;\n    display: block;\n    margin-top: 5px;\n    letter-spacing: 1px;\n}\n\n.eid-cards-box .signature i {\n    font-size: 1rem;\n    color: #a47148;\n    font-style: normal;\n}\n\n.eid-cards-box .signature .school-name {\n    font-size: 1.5rem;\n    font-weight: bold;\n    color: #7b4b3a;\n    display: block;\n    margin: 5px 0;\n}\n\n.eid-cards-box .footer-note {\n    text-align: center;\n    margin-top: 30px;\n    color: #a47148;\n    font-size: 0.9rem;\n}\n\n#downloadCanvas { display: none; }\n\n@media (max-width: 768px) {\n    .eid-cards-box { padding: 15px; border-radius: 30px; }\n    .eid-cards-box h2 { font-size: 1.8rem; }\n    .eid-cards-box #customerName { width: 90%; }\n    .eid-cards-box .name-overlay { font-size: 1.8rem; }\n    .eid-cards-box .signature .name { font-size: 1.5rem; }\n    .eid-cards-box .signature .school-name { font-size: 1.3rem; }\n    .eid-cards-box .image-picker {\n        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));\n        gap: 10px;\n        padding: 15px;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function() {\n    const CARDS_FOLDER = 'https:\/\/mapschools.net\/wp-content\/uploads\/eid-cards\/';\n    const CARD_FILES = ['card1.jpg', 'card2.jpg', 'card3.jpg','card4.jpg'];\n\n    const cards = CARD_FILES.map(function(file) {\n        return { name: file, url: CARDS_FOLDER + file };\n    });\n\n    const nameInput = document.getElementById('customerName');\n    const nameDisplay = document.getElementById('nameDisplay');\n    const cardImage = document.getElementById('cardImage');\n    const imagePicker = document.getElementById('imagePicker');\n    const downloadBtn = document.getElementById('downloadCard');\n    const imageInfo = document.getElementById('imageInfo');\n    const downloadCanvas = document.getElementById('downloadCanvas');\n\n    let activeCard = null;\n\n    function updateNameOnCard() {\n        const enteredName = nameInput.value.trim();\n        nameDisplay.textContent = enteredName === '' ? '\u0627\u0644\u0627\u0633\u0645' : enteredName;\n    }\n\n    function renderCards() {\n        imagePicker.innerHTML = '';\n\n        if (cards.length === 0) {\n            imagePicker.innerHTML = '<p class=\"loading-cards\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0628\u0637\u0627\u0642\u0627\u062a<\/p>';\n            return;\n        }\n\n        cards.forEach(function(card, index) {\n            const btn = document.createElement('div');\n            btn.className = 'card-btn';\n            btn.dataset.index = index;\n\n            const img = document.createElement('img');\n            img.src = card.url;\n            img.alt = '\u0628\u0637\u0627\u0642\u0629 ' + (index + 1);\n            img.loading = 'lazy';\n\n            img.onerror = function() {\n                console.warn('\u0641\u0634\u0644 \u062a\u062d\u0645\u064a\u0644:', card.url);\n            };\n\n            btn.appendChild(img);\n\n            btn.addEventListener('click', function() {\n                selectCard(index);\n            });\n\n            imagePicker.appendChild(btn);\n        });\n\n        if (cards.length > 0) {\n            selectCard(0);\n        }\n    }\n\n    function selectCard(index) {\n        if (!cards[index]) return;\n        activeCard = cards[index];\n        cardImage.src = activeCard.url;\n        cardImage.style.display = 'block';\n        imageInfo.textContent = '\u2705 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629';\n\n        document.querySelectorAll('.card-btn').forEach(function(b, i) {\n            b.classList.toggle('active', i === index);\n        });\n\n        updateNameOnCard();\n    }\n\n    async function downloadCard() {\n        const currentName = nameInput.value.trim();\n\n        if (currentName === '') {\n            alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0627\u0633\u0645 \u0623\u0648\u0644\u0627\u064b');\n            nameInput.focus();\n            return;\n        }\n        if (!activeCard) {\n            alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u062e\u062a\u064a\u0627\u0631 \u0628\u0637\u0627\u0642\u0629 \u0623\u0648\u0644\u0627\u064b');\n            return;\n        }\n\n        imageInfo.textContent = '\u23f3 \u062c\u0627\u0631\u064a \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0635\u0648\u0631\u0629...';\n        downloadBtn.disabled = true;\n        downloadBtn.textContent = '\u23f3 \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644...';\n\n        try {\n            const img = new Image();\n            img.crossOrigin = 'anonymous';\n\n            await new Promise(function(resolve, reject) {\n                img.onload = resolve;\n                img.onerror = reject;\n                img.src = activeCard.url;\n            });\n\n            downloadCanvas.width = img.naturalWidth;\n            downloadCanvas.height = img.naturalHeight;\n\n            const ctx = downloadCanvas.getContext('2d');\n            ctx.drawImage(img, 0, 0);\n\n            const fontSize = Math.floor(img.naturalHeight * 0.07);\n            ctx.font = \"400 \" + fontSize + \"px 'Great Vibes', 'Dancing Script', 'Sacramento', 'Amiri', cursive\";\n            ctx.fillStyle = 'white';\n            ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';\n            ctx.shadowBlur = 10;\n            ctx.shadowOffsetX = 3;\n            ctx.shadowOffsetY = 3;\n            ctx.textAlign = 'center';\n            ctx.textBaseline = 'middle';\n\n            ctx.fillText(currentName, img.naturalWidth \/ 2, img.naturalHeight \/ 2);\n\n            const link = document.createElement('a');\n            link.download = 'EidCard-' + currentName + '.png';\n            link.href = downloadCanvas.toDataURL('image\/png');\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n\n            imageInfo.textContent = '\u2705 \u062a\u0645 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0628\u0646\u062c\u0627\u062d';\n        } catch (error) {\n            console.error(error);\n            imageInfo.textContent = '\u274c \u0641\u0634\u0644 \u0627\u0644\u062a\u062d\u0645\u064a\u0644';\n            alert('\u062d\u062f\u062b \u062e\u0637\u0623: ' + error.message);\n        } finally {\n            downloadBtn.disabled = false;\n            downloadBtn.textContent = '\ud83d\udce5 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629';\n        }\n    }\n\n    downloadBtn.addEventListener('click', downloadCard);\n    nameInput.addEventListener('input', updateNameOnCard);\n    nameInput.addEventListener('keyup', updateNameOnCard);\n\n    updateNameOnCard();\n    renderCards();\n})();\n<\/script>\n\n<div class=\"eid-cards-box\">\n    <h2>\ud83c\udf89 \u0628\u0637\u0627\u0642\u0629 \u062a\u0647\u0646\u0626\u0629 \u0628\u0627\u0633\u0645\u0643 \ud83c\udf89<\/h2>\n\n    <div class=\"input-section\">\n        <label for=\"customerName\">\u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643 \u0647\u0646\u0627 \ud83d\udc47<\/label>\n        <input type=\"text\" id=\"customerName\" placeholder=\"\u0645\u062b\u0627\u0644: \u0645\u062d\u0645\u062f\" autocomplete=\"off\">\n    <\/div>\n\n    <p class=\"picker-title\">\ud83c\udfb4 \u0627\u062e\u062a\u0631 \u0628\u0637\u0627\u0642\u0629 \u0645\u0646 \u0627\u0644\u0623\u0633\u0641\u0644:<\/p>\n\n    <div class=\"image-picker\" id=\"imagePicker\">\n        <div class=\"loading-cards\">\u23f3 \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a&#8230;<\/div>\n    <\/div>\n\n    <div class=\"card-preview\">\n        <div class=\"card-container\" id=\"cardContainer\">\n            <img decoding=\"async\" src=\"\" alt=\"\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0639\u0627\u064a\u062f\u0629\" class=\"card-image\" id=\"cardImage\" style=\"display:none;\">\n            <div class=\"name-overlay\" id=\"nameDisplay\">\u0627\u0644\u0627\u0633\u0645<\/div>\n        <\/div>\n        <div class=\"image-info\" id=\"imageInfo\">\u0627\u062e\u062a\u0631 \u0628\u0637\u0627\u0642\u0629 \u0645\u0646 \u0627\u0644\u0623\u0639\u0644\u0649<\/div>\n    <\/div>\n\n    <canvas id=\"downloadCanvas\"><\/canvas>\n\n    <div class=\"download-btn-container\">\n        <button class=\"download-btn\" id=\"downloadCard\">\ud83d\udce5 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629<\/button>\n    <\/div>\n\n    <div class=\"signature\">\n        <i>\u2727 \u062a\u0637\u0648\u064a\u0631 \u2727<\/i>\n        <span class=\"school-name\">\u0646\u0638\u0645 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0645\u062f\u0631\u0633\u0629 \u0645\u0627\u0628<\/span>\n        <span class=\"name\">IT Administrator<\/span>\n        <i>\u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629 \u00a9 2026<\/i>\n    <\/div>\n\n    <div class=\"footer-note\">\u2728 \u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0637\u0627\u0642\u0629\u060c \u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643\u060c \u062b\u0645 \u062d\u0645\u0651\u0644 \u2728<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf89 \u0628\u0637\u0627\u0642\u0629 \u062a\u0647\u0646\u0626\u0629 \u0628\u0627\u0633\u0645\u0643 \ud83c\udf89 \u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643 \u0647\u0646\u0627 \ud83d\udc47 \ud83c\udfb4 \u0627\u062e\u062a\u0631 \u0628\u0637\u0627\u0642\u0629 \u0645\u0646 \u0627\u0644\u0623\u0633\u0641\u0644: \u23f3 \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a&#8230; \u0627\u0644\u0627\u0633\u0645 \u0627\u062e\u062a\u0631 \u0628\u0637\u0627\u0642\u0629 \u0645\u0646 \u0627\u0644\u0623\u0639\u0644\u0649 \ud83d\udce5 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u2727 \u062a\u0637\u0648\u064a\u0631 \u2727 \u0646\u0638\u0645 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0645\u062f\u0631\u0633\u0629 \u0645\u0627\u0628 IT Administrator \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629 \u00a9 2026 \u2728 \u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0637\u0627\u0642\u0629\u060c \u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643\u060c \u062b\u0645 \u062d\u0645\u0651\u0644 \u2728<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8209","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/pages\/8209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/comments?post=8209"}],"version-history":[{"count":10,"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/pages\/8209\/revisions"}],"predecessor-version":[{"id":8224,"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/pages\/8209\/revisions\/8224"}],"wp:attachment":[{"href":"https:\/\/mapschools.net\/ar\/wp-json\/wp\/v2\/media?parent=8209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}