{"id":18008,"date":"2025-06-13T21:20:21","date_gmt":"2025-06-13T18:20:21","guid":{"rendered":"https:\/\/msajdy.org.sa\/?page_id=18008"},"modified":"2025-06-13T21:30:08","modified_gmt":"2025-06-13T18:30:08","slug":"%d8%a8%d8%b7%d8%a7%d9%82%d8%a9-%d8%b5%d8%af%d8%a7%d9%82%d8%a9","status":"publish","type":"page","link":"https:\/\/msajdy.org.sa\/?page_id=18008","title":{"rendered":"\u0628\u0637\u0627\u0642\u0629 \u0635\u062f\u0627\u0642\u0629"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \u0628\u0637\u0627\u0642\u0629 \u0635\u062f\u0627\u0642\u0629<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Almarai', 'Tahoma', sans-serif;\n direction: rtl;\n text-align: center;\n background-color: #f8f9fa;\n color: #333;\n margin: 0;\n padding: 20px;\n }\n\n .page-container {\n max-width: 900px;\n margin: 20px auto;\n padding: 20px;\n background-color: #ffffff;\n border-radius: 12px;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n }\n\n h1 {\n color: #0e7185;\n font-weight: 700;\n margin-bottom: 30px;\n }\n\n .thumbnails {\n margin-bottom: 30px;\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n .thumbnail-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .thumbnails img {\n width: 220px;\n height: auto;\n border: 3px solid transparent;\n border-radius: 10px;\n cursor: pointer;\n transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n }\n\n .thumbnails img.selected {\n border-color: #0e7185;\n transform: scale(1.05);\n box-shadow: 0 8px 16px rgba(14, 113, 133, 0.3);\n }\n\n .thumbnail-label {\n margin-top: 8px;\n color: #555;\n font-weight: 500;\n font-size: 0.95em;\n }\n\n #card-container {\n position: relative;\n display: none;\n margin-top: 30px;\n border-radius: 10px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n }\n\n #card-image {\n width: 500px;\n max-width: 100%;\n height: auto;\n border-radius: 10px;\n display: block;\n }\n\n .name-overlay {\n position: absolute;\n top: 80%;\n right: 50%;\n transform: translate(50%, -50%);\n font-size: 26px;\n color: #ffffff; \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0628\u064a\u0636 *\/\n font-weight: 700;\n font-family: 'Almarai', sans-serif;\n text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); \/* \u0638\u0644 \u0623\u0633\u0648\u062f \u062e\u0641\u064a\u0641 *\/\n white-space: nowrap;\n }\n\n input[type=\"text\"] {\n padding: 12px 15px;\n width: calc(100% - 30px);\n max-width: 350px;\n border-radius: 8px;\n border: 1px solid #ced4da;\n text-align: center;\n margin: 25px auto;\n display: block;\n font-size: 16px;\n }\n\n .buttons-container {\n margin-top: 20px;\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n }\n\n .main-button {\n background-color: #0e7185;\n color: white;\n padding: 12px 35px;\n font-size: 16px;\n font-weight: 700;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;\n box-shadow: 0 4px 12px rgba(14, 113, 133, 0.2);\n }\n\n .main-button:hover {\n background-color: #0b5f73;\n box-shadow: 0 6px 16px rgba(14, 113, 133, 0.3);\n transform: translateY(-2px);\n }\n\n #saveBtn {\n display: none;\n background-color: #28a745;\n }\n\n #saveBtn:hover {\n background-color: #218838;\n box-shadow: 0 6px 16px rgba(40, 167, 69, 0.3);\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"page-container\">\n <h1>\u0643\u0646 \u0635\u062f\u064a\u0642\u064b\u0627 \u0644\u0646\u0627 \u0648\u0623\u062f\u062e\u0644 \u0627\u0633\u0645\u0643<\/h1>\n\n <div class=\"thumbnails\">\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\"\n onclick=\"selectTemplate(1)\" id=\"thumb1\" alt=\"\u0628\u0637\u0627\u0642\u0629 1\">\n <div class=\"thumbnail-label\">\u0628\u0637\u0627\u0642\u0629 1<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\"\n onclick=\"selectTemplate(2)\" id=\"thumb2\" alt=\"\u0628\u0637\u0627\u0642\u0629 2\">\n <div class=\"thumbnail-label\">\u0628\u0637\u0627\u0642\u0629 2<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\"\n onclick=\"selectTemplate(3)\" id=\"thumb3\" alt=\"\u0628\u0637\u0627\u0642\u0629 3\">\n <div class=\"thumbnail-label\">\u0628\u0637\u0627\u0642\u0629 3<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\"\n onclick=\"selectTemplate(4)\" id=\"thumb4\" alt=\"\u0628\u0637\u0627\u0642\u0629 4\">\n <div class=\"thumbnail-label\">\u0628\u0637\u0627\u0642\u0629 4<\/div>\n <\/div>\n <\/div>\n\n <input type=\"text\" id=\"name\" placeholder=\"\u0627\u062f\u062e\u0644 \u0627\u0633\u0645\u0643 \u0647\u0646\u0627\">\n\n <div class=\"buttons-container\">\n <button class=\"main-button\" onclick=\"generateCard()\">\u0627\u0639\u0631\u0636 \u0627\u0644\u0628\u0637\u0627\u0642\u0629<\/button>\n <button id=\"saveBtn\" class=\"main-button\" onclick=\"saveCard()\">\u0627\u062d\u0641\u0638 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0643\u0635\u0648\u0631\u0629<\/button>\n <\/div>\n\n <div id=\"card-container\">\n <img decoding=\"async\" id=\"card-image\" src=\"\" alt=\"\u0628\u0637\u0627\u0642\u0629 \u0635\u062f\u0627\u0642\u0629\">\n <div class=\"name-overlay\" id=\"name-overlay\"><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script>\n const templates = {\n 1: \"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\",\n 2: \"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\",\n 3: \"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\",\n 4: \"https:\/\/msajdy.org.sa\/wp-content\/uploads\/2025\/06\/\u0635\u062f\u0642-\u062c\u0645\u0639\u064a\u0629-\u062e\u064a\u0631-scaled.png\"\n };\n\n let selectedTemplateId = 1;\n\n function selectTemplate(id) {\n selectedTemplateId = id;\n document.querySelectorAll('.thumbnails img').forEach(img => img.classList.remove('selected'));\n document.getElementById('thumb' + id).classList.add('selected');\n\n const name = document.getElementById('name').value.trim();\n if (name && document.getElementById('card-container').style.display !== 'none') {\n document.getElementById('card-image').src = templates[selectedTemplateId];\n }\n }\n\n function generateCard() {\n const name = document.getElementById('name').value.trim();\n if (!name) {\n alert('\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u0627\u0633\u0645');\n return;\n }\n\n document.getElementById('card-image').src = templates[selectedTemplateId];\n document.getElementById('name-overlay').textContent = name;\n document.getElementById('card-container').style.display = 'inline-block';\n document.getElementById('saveBtn').style.display = 'inline-block';\n }\n\n function saveCard() {\n const cardContainer = document.getElementById('card-container');\n\n html2canvas(cardContainer, {\n useCORS: true\n }).then(function(canvas) {\n const link = document.createElement('a');\n link.download = '\u0628\u0637\u0627\u0642\u0629-\u0635\u062f\u0627\u0642\u0629-' + document.getElementById('name').value.trim() + '.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n }).catch(function(error) {\n console.error('\u062d\u062f\u062b \u062e\u0637\u0623 \u0639\u0646\u062f \u062d\u0641\u0638 \u0627\u0644\u0635\u0648\u0631\u0629:', error);\n alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0645\u062d\u0627\u0648\u0644\u0629 \u062d\u0641\u0638 \u0627\u0644\u0635\u0648\u0631\u0629.');\n });\n }\n\n selectTemplate(selectedTemplateId);\n document.getElementById('thumb' + selectedTemplateId).classList.add('selected');\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0628\u0637\u0627\u0642\u0629 \u0635\u062f\u0627\u0642\u0629 \u0643\u0646 \u0635\u062f\u064a\u0642\u064b\u0627 \u0644\u0646\u0627 \u0648\u0623\u062f\u062e\u0644 \u0627\u0633\u0645\u0643 \u0628\u0637\u0627\u0642\u0629 1 \u0628\u0637\u0627\u0642\u0629 2 \u0628\u0637\u0627\u0642\u0629 3 \u0628\u0637\u0627\u0642\u0629 4 \u0627\u0639\u0631\u0636 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u062d\u0641\u0638 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0643\u0635\u0648\u0631\u0629<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18008","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/18008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18008"}],"version-history":[{"count":12,"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/18008\/revisions"}],"predecessor-version":[{"id":18021,"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/18008\/revisions\/18021"}],"wp:attachment":[{"href":"https:\/\/msajdy.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}