\u0628\u0637\u0627\u0642\u0629 \u062a\u0647\u0646\u0626\u0629 \u0627\u0644\u0639\u064a\u062f<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', 'Tahoma', sans-serif; \/* \u062e\u0637 \u0627\u062d\u062a\u064a\u0627\u0637\u064a *\/\n direction: rtl;\n text-align: center;\n background-color: #f8f9fa; \/* \u062e\u0644\u0641\u064a\u0629 \u0623\u0641\u062a\u062d *\/\n color: #333; \/* \u0644\u0648\u0646 \u0646\u0635 \u0623\u0633\u0627\u0633\u064a \u0623\u063a\u0645\u0642 *\/\n margin: 0;\n padding: 20px;\n transition: background-color 0.3s ease;\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 font-family: 'Almarai', sans-serif;\n color: #0e7185; \/* \u0644\u0648\u0646 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\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 \/* --- \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0647\u0646\u0627 --- *\/\n max-width: 360px; \/* \u0639\u0631\u0636 \u064a\u0633\u0645\u062d \u0628\u0640 3 \u0635\u0648\u0631 (100px * 3 + 20px * 2 = 340px) \u0645\u0639 \u0642\u0644\u064a\u0644 \u0645\u0646 \u0627\u0644\u0647\u0627\u0645\u0634 *\/\n margin-left: auto; \/* \u0644\u062a\u0648\u0633\u064a\u0637 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0646\u0641\u0633\u0647\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0644\u062f\u064a\u0647\u0627 max-width *\/\n margin-right: auto; \/* \u0644\u062a\u0648\u0633\u064a\u0637 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0646\u0641\u0633\u0647\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0644\u062f\u064a\u0647\u0627 max-width *\/\n }\n\n .thumbnail-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .thumbnails img {\n width: 100px; \/* \u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0635\u0648\u0631 \u0627\u0644\u0645\u0635\u063a\u0631\u0629 \u0642\u0644\u064a\u0644\u0627\u064b *\/\n height: auto;\n border: 3px solid transparent;\n border-radius: 10px; \/* \u062d\u0648\u0627\u0641 \u0623\u0643\u062b\u0631 \u062f\u0627\u0626\u0631\u064a\u0629 *\/\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:hover {\n transform: scale(1.08); \/* \u062a\u0643\u0628\u064a\u0631 \u0623\u0643\u062b\u0631 \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0645 *\/\n box-shadow: 0 6px 12px rgba(0,0,0,0.15);\n }\n\n .thumbnails img.selected {\n border-color: #0e7185; \/* \u0644\u0648\u0646 \u0627\u0644\u062d\u062f\u0648\u062f \u0639\u0646\u062f \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631 *\/\n transform: scale(1.1);\n box-shadow: 0 8px 16px rgba(14, 113, 133, 0.3); \/* \u0638\u0644 \u0645\u0645\u064a\u0632 \u0644\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0645\u062e\u062a\u0627\u0631 *\/\n }\n\n .thumbnail-label {\n margin-top: 8px;\n color: #555; \/* \u0644\u0648\u0646 \u0623\u063a\u0645\u0642 \u0644\u0627\u0633\u0645 \u0627\u0644\u0642\u0627\u0644\u0628 *\/\n font-weight: 500; \/* \u062e\u0637 \u0623\u0639\u0631\u0636 \u0642\u0644\u064a\u0644\u0627\u064b *\/\n font-size: 0.9em;\n }\n\n #card-container {\n position: relative;\n display: inline-block; \/* \u0633\u062a\u0628\u0642\u0649 \u0643\u0645\u0627 \u0647\u064a \u0644\u0625\u0638\u0647\u0627\u0631\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u062d\u0627\u062c\u0629 *\/\n margin-top: 30px;\n border-radius: 10px; \/* \u0644\u0636\u0645\u0627\u0646 \u062a\u0637\u0627\u0628\u0642 \u0627\u0644\u062d\u0648\u0627\u0641 \u0645\u0639 \u0627\u0644\u0635\u0648\u0631\u0629 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0635\u0648\u0631\u0629 \u0634\u0641\u0627\u0641\u0629 *\/\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); \/* \u0638\u0644 \u0623\u0643\u062b\u0631 \u0646\u0639\u0648\u0645\u0629 \u0644\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n }\n\n #card-image {\n width: 500px;\n max-width: 100%; \/* \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 *\/\n height: auto;\n border: none; \/* \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062d\u062f\u0648\u062f \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629\u060c \u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0639\u0644\u0649 \u0638\u0644 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 *\/\n border-radius: 10px;\n display: block; \/* \u0644\u0625\u0632\u0627\u0644\u0629 \u0623\u064a \u0645\u0633\u0627\u0641\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 \u0623\u0633\u0641\u0644 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\n }\n\n .name-overlay {\n position: absolute;\n top: 78%; \/* \u0642\u062f \u062a\u062d\u062a\u0627\u062c \u0647\u0630\u0647 \u0627\u0644\u0642\u064a\u0645\u0629 \u0644\u062a\u0639\u062f\u064a\u0644 \u062f\u0642\u064a\u0642 \u062d\u0633\u0628 \u0635\u0648\u0631 \u0627\u0644\u0642\u0648\u0627\u0644\u0628 *\/\n right: 50%;\n transform: translate(50%, -50%);\n font-size: 28px; \/* \u064a\u0645\u0643\u0646 \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062d\u062c\u0645 \u062d\u0633\u0628 \u0627\u0644\u062d\u0627\u062c\u0629 *\/\n color: #0e7185; \/* \u0646\u0641\u0633 \u0644\u0648\u0646 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0644\u062a\u0648\u062d\u064a\u062f \u0627\u0644\u0647\u0648\u064a\u0629 *\/\n font-weight: 700; \/* \u062e\u0637 \u0639\u0631\u064a\u0636 \u0644\u0644\u0627\u0633\u0645 *\/\n font-family: 'Almarai', sans-serif;\n text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); \/* \u0638\u0644 \u0623\u0641\u062a\u062d \u0648\u0623\u0643\u062b\u0631 \u0646\u0639\u0648\u0645\u0629 *\/\n white-space: nowrap;\n }\n\n input[type=\"text\"] {\n padding: 12px 15px;\n width: calc(100% - 30px); \/* \u0644\u064a\u0623\u062e\u0630 \u0639\u0631\u0636 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0645\u0639 \u0645\u0631\u0627\u0639\u0627\u0629 \u0627\u0644\u062d\u0634\u0648 *\/\n max-width: 350px; \/* \u062a\u062d\u062f\u064a\u062f \u0639\u0631\u0636 \u0623\u0642\u0635\u0649 *\/\n border-radius: 8px;\n border: 1px solid #ced4da; \/* \u0644\u0648\u0646 \u062d\u062f\u0648\u062f \u0623\u0641\u062a\u062d *\/\n text-align: center;\n margin: 25px auto;\n display: block;\n font-size: 16px;\n font-family: 'Almarai', sans-serif;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n }\n\n input[type=\"text\"]:focus {\n border-color: #0e7185; \/* \u0644\u0648\u0646 \u0627\u0644\u062d\u062f\u0648\u062f \u0639\u0646\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0632 *\/\n box-shadow: 0 0 0 0.2rem rgba(14, 113, 133, 0.25); \/* \u0638\u0644 \u062e\u0641\u064a\u0641 \u0639\u0646\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0632 *\/\n outline: none;\n }\n\n .buttons-container {\n margin-top: 20px;\n display: flex;\n justify-content: center;\n gap: 15px; \/* \u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 *\/\n flex-wrap: wrap; \/* \u0644\u0644\u0633\u0645\u0627\u062d \u0628\u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u0633\u0637\u0631 \u062c\u062f\u064a\u062f \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 *\/\n }\n\n .main-button {\n background-color: #0e7185;\n color: white;\n padding: 12px 35px; \/* \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0634\u0648 \u0627\u0644\u062c\u0627\u0646\u0628\u064a *\/\n font-size: 16px;\n font-family: 'Almarai', sans-serif;\n font-weight: 700;\n border: none;\n border-radius: 8px; \/* \u062d\u0648\u0627\u0641 \u0623\u0646\u0639\u0645 \u0642\u0644\u064a\u0644\u0627\u064b *\/\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; \/* \u062f\u0631\u062c\u0629 \u0623\u063a\u0645\u0642 \u0642\u0644\u064a\u0644\u0627\u064b \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0645 *\/\n box-shadow: 0 6px 16px rgba(14, 113, 133, 0.3);\n transform: translateY(-2px); \/* \u062a\u0623\u062b\u064a\u0631 \u0631\u0641\u0639 \u062e\u0641\u064a\u0641 *\/\n }\n\n .main-button:active {\n transform: translateY(0px); \/* \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0632\u0631 \u0644\u0648\u0636\u0639\u0647 \u0627\u0644\u0623\u0635\u0644\u064a \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 *\/\n box-shadow: 0 3px 8px rgba(14, 113, 133, 0.25);\n }\n\n\n #saveBtn {\n display: none; \/* \u064a\u0628\u062f\u0623 \u0645\u062e\u0641\u064a\u0627\u064b *\/\n background-color: #28a745; \/* \u0644\u0648\u0646 \u0645\u062e\u062a\u0644\u0641 \u0644\u0632\u0631 \u0627\u0644\u062d\u0641\u0638 (\u0623\u062e\u0636\u0631) *\/\n }\n #saveBtn:hover {\n background-color: #218838; \/* \u062f\u0631\u062c\u0629 \u0623\u063a\u0645\u0642 \u0644\u0644\u0623\u062e\u0636\u0631 \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0645 *\/\n box-shadow: 0 6px 16px rgba(40, 167, 69, 0.3);\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"page-container\">\n <h1>\u0627\u062e\u062a\u0631 \u0642\u0627\u0644\u0628 \u062a\u0647\u0646\u0626\u0629 \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:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/1.jpg\" onclick=\"selectTemplate(1)\" id=\"thumb1\" alt=\"\u0642\u0627\u0644\u0628 1\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 1<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/2.jpg\" onclick=\"selectTemplate(2)\" id=\"thumb2\" alt=\"\u0642\u0627\u0644\u0628 2\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 2<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/3.jpg\" onclick=\"selectTemplate(3)\" id=\"thumb3\" alt=\"\u0642\u0627\u0644\u0628 3\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 3<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/5.jpg\" onclick=\"selectTemplate(5)\" id=\"thumb5\" alt=\"\u0642\u0627\u0644\u0628 5\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 5<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/6.jpg\" onclick=\"selectTemplate(6)\" id=\"thumb6\" alt=\"\u0642\u0627\u0644\u0628 6\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 6<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/7.jpg\" onclick=\"selectTemplate(7)\" id=\"thumb7\" alt=\"\u0642\u0627\u0644\u0628 7\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 7<\/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\u062a\u0647\u0646\u0626\u0629<\/button>\n <button id=\"saveBtn\" class=\"main-button\" onclick=\"saveCard()\">\u0627\u062d\u0641\u0638 \u0627\u0644\u062a\u0647\u0646\u0626\u0629 \u0643\u0635\u0648\u0631\u0629<\/button>\n <\/div>\n\n <div id=\"card-container\" style=\"display:none;\">\n <img decoding=\"async\" id=\"card-image\" src=\"\" alt=\"\u0642\u0627\u0644\u0628 \u0627\u0644\u062a\u0647\u0646\u0626\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\n <script>\n const templates = {\n 1: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/1.jpg\",\n 2: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/2.jpg\",\n 3: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/3.jpg\",\n 5: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/5.jpg\",\n 6: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/6.jpg\",\n 7: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/7.jpg\"\n };\n\n let selectedTemplateId = 1; \/\/ \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0627\u0633\u0645 \u0644\u064a\u0643\u0648\u0646 \u0623\u0648\u0636\u062d\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 \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0639\u0631\u0648\u0636\u0629 \u0645\u0628\u0627\u0634\u0631\u0629 \u0639\u0646\u062f \u0627\u062e\u062a\u064a\u0627\u0631 \u0642\u0627\u0644\u0628 \u062c\u062f\u064a\u062f \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0638\u0627\u0647\u0631\u0629 \u0648\u0627\u0644\u0627\u0633\u0645 \u0645\u0648\u062c\u0648\u062f\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'; \/\/ \u0625\u0638\u0647\u0627\u0631 \u0632\u0631 \u0627\u0644\u062d\u0641\u0638\n }\n\n function saveCard() {\n const cardContainer = document.getElementById('card-container');\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u062e\u0644\u0641\u064a\u0629 \u0628\u064a\u0636\u0627\u0621 \u0645\u0624\u0642\u062a\u064b\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0634\u0641\u0627\u0641\u064a\u0629 \u0648\u062a\u0631\u064a\u062f \u062e\u0644\u0641\u064a\u0629 \u062b\u0627\u0628\u062a\u0629 \u0644\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629\n \/\/ cardContainer.style.backgroundColor = 'white'; \/\/ \u0642\u0645 \u0628\u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u062a\u0639\u0644\u064a\u0642 \u0625\u0630\u0627 \u0644\u0632\u0645 \u0627\u0644\u0623\u0645\u0631\n\n html2canvas(cardContainer, {\n useCORS: true, \/\/ \u0645\u0647\u0645 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0635\u0648\u0631 \u0645\u0646 \u0646\u0637\u0627\u0642 \u0645\u062e\u062a\u0644\u0641\n \/\/ scale: 2, \/\/ \u064a\u0645\u0643\u0646 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062f\u0642\u0629 \u0625\u0630\u0627 \u0644\u0632\u0645 \u0627\u0644\u0623\u0645\u0631\n \/\/ backgroundColor: null \/\/ \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0634\u0641\u0627\u0641\u064a\u0629 \u0627\u0644\u0635\u0648\u0631\u0629 \u0625\u0646 \u0648\u062c\u062f\u062a (\u0642\u062f \u062a\u062d\u062a\u0627\u062c \u0627\u0644\u0635\u0648\u0631\u0629 \u0646\u0641\u0633\u0647\u0627 \u0644\u0623\u0646 \u062a\u0643\u0648\u0646 PNG \u0645\u0639 \u0634\u0641\u0627\u0641\u064a\u0629)\n }).then(function(canvas) {\n \/\/ cardContainer.style.backgroundColor = ''; \/\/ \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0625\u0630\u0627 \u062a\u0645 \u062a\u063a\u064a\u064a\u0631\u0647\n\n const link = document.createElement('a');\n link.download = '\u062a\u0647\u0646\u0626\u0629-\u0627\u0644\u0639\u064a\u062f-' + document.getElementById('name').value.trim() + '.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n }).catch(function(error) {\n console.error('Oops, something went wrong!', 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. \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0635\u0648\u0631 \u0645\u0633\u0645\u0648\u062d \u062a\u062d\u0645\u064a\u0644\u0647\u0627 (CORS).');\n });\n }\n\n \/\/ \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0642\u0627\u0644\u0628 \u0627\u0644\u0623\u0648\u0644 \u0643\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\n selectTemplate(selectedTemplateId);\n document.getElementById('thumb' + selectedTemplateId).classList.add('selected'); \/\/ \u062a\u0623\u0643\u062f \u0645\u0646 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0628\u0635\u0631\u064a\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0628\u0637\u0627\u0642\u0629 \u062a\u0647\u0646\u0626\u0629 \u0627\u0644\u0639\u064a\u062f \u0627\u062e\u062a\u0631 \u0642\u0627\u0644\u0628 \u062a\u0647\u0646\u0626\u0629 \u0648\u0623\u062f\u062e\u0644 \u0627\u0633\u0645\u0643 \u0642\u0627\u0644\u0628 1 \u0642\u0627\u0644\u0628 2 \u0642\u0627\u0644\u0628 3 \u0642\u0627\u0644\u0628 5 \u0642\u0627\u0644\u0628 6 \u0642\u0627\u0644\u0628 7 \u0627\u0639\u0631\u0636 \u0627\u0644\u062a\u0647\u0646\u0626\u0629 \u0627\u062d\u0641\u0638 \u0627\u0644\u062a\u0647\u0646\u0626\u0629 \u0643\u0635\u0648\u0631\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16209","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16209"}],"version-history":[{"count":15,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16209\/revisions"}],"predecessor-version":[{"id":16279,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16209\/revisions\/16279"}],"wp:attachment":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \u0628\u0637\u0627\u0642\u0629 \u062a\u0647\u0646\u0626\u0629 \u0627\u0644\u0639\u064a\u062f<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', 'Tahoma', sans-serif; \/* \u062e\u0637 \u0627\u062d\u062a\u064a\u0627\u0637\u064a *\/\n direction: rtl;\n text-align: center;\n background-color: #f8f9fa; \/* \u062e\u0644\u0641\u064a\u0629 \u0623\u0641\u062a\u062d *\/\n color: #333; \/* \u0644\u0648\u0646 \u0646\u0635 \u0623\u0633\u0627\u0633\u064a \u0623\u063a\u0645\u0642 *\/\n margin: 0;\n padding: 20px;\n transition: background-color 0.3s ease;\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 font-family: 'Almarai', sans-serif;\n color: #0e7185; \/* \u0644\u0648\u0646 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\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 \/* --- \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0647\u0646\u0627 --- *\/\n max-width: 360px; \/* \u0639\u0631\u0636 \u064a\u0633\u0645\u062d \u0628\u0640 3 \u0635\u0648\u0631 (100px * 3 + 20px * 2 = 340px) \u0645\u0639 \u0642\u0644\u064a\u0644 \u0645\u0646 \u0627\u0644\u0647\u0627\u0645\u0634 *\/\n margin-left: auto; \/* \u0644\u062a\u0648\u0633\u064a\u0637 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0646\u0641\u0633\u0647\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0644\u062f\u064a\u0647\u0627 max-width *\/\n margin-right: auto; \/* \u0644\u062a\u0648\u0633\u064a\u0637 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0646\u0641\u0633\u0647\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0644\u062f\u064a\u0647\u0627 max-width *\/\n }\n\n .thumbnail-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .thumbnails img {\n width: 100px; \/* \u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0635\u0648\u0631 \u0627\u0644\u0645\u0635\u063a\u0631\u0629 \u0642\u0644\u064a\u0644\u0627\u064b *\/\n height: auto;\n border: 3px solid transparent;\n border-radius: 10px; \/* \u062d\u0648\u0627\u0641 \u0623\u0643\u062b\u0631 \u062f\u0627\u0626\u0631\u064a\u0629 *\/\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:hover {\n transform: scale(1.08); \/* \u062a\u0643\u0628\u064a\u0631 \u0623\u0643\u062b\u0631 \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0645 *\/\n box-shadow: 0 6px 12px rgba(0,0,0,0.15);\n }\n\n .thumbnails img.selected {\n border-color: #0e7185; \/* \u0644\u0648\u0646 \u0627\u0644\u062d\u062f\u0648\u062f \u0639\u0646\u062f \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631 *\/\n transform: scale(1.1);\n box-shadow: 0 8px 16px rgba(14, 113, 133, 0.3); \/* \u0638\u0644 \u0645\u0645\u064a\u0632 \u0644\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0645\u062e\u062a\u0627\u0631 *\/\n }\n\n .thumbnail-label {\n margin-top: 8px;\n color: #555; \/* \u0644\u0648\u0646 \u0623\u063a\u0645\u0642 \u0644\u0627\u0633\u0645 \u0627\u0644\u0642\u0627\u0644\u0628 *\/\n font-weight: 500; \/* \u062e\u0637 \u0623\u0639\u0631\u0636 \u0642\u0644\u064a\u0644\u0627\u064b *\/\n font-size: 0.9em;\n }\n\n #card-container {\n position: relative;\n display: inline-block; \/* \u0633\u062a\u0628\u0642\u0649 \u0643\u0645\u0627 \u0647\u064a \u0644\u0625\u0638\u0647\u0627\u0631\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u062d\u0627\u062c\u0629 *\/\n margin-top: 30px;\n border-radius: 10px; \/* \u0644\u0636\u0645\u0627\u0646 \u062a\u0637\u0627\u0628\u0642 \u0627\u0644\u062d\u0648\u0627\u0641 \u0645\u0639 \u0627\u0644\u0635\u0648\u0631\u0629 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0635\u0648\u0631\u0629 \u0634\u0641\u0627\u0641\u0629 *\/\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); \/* \u0638\u0644 \u0623\u0643\u062b\u0631 \u0646\u0639\u0648\u0645\u0629 \u0644\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n }\n\n #card-image {\n width: 500px;\n max-width: 100%; \/* \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 *\/\n height: auto;\n border: none; \/* \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062d\u062f\u0648\u062f \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629\u060c \u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0639\u0644\u0649 \u0638\u0644 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 *\/\n border-radius: 10px;\n display: block; \/* \u0644\u0625\u0632\u0627\u0644\u0629 \u0623\u064a \u0645\u0633\u0627\u0641\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 \u0623\u0633\u0641\u0644 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\n }\n\n .name-overlay {\n position: absolute;\n top: 78%; \/* \u0642\u062f \u062a\u062d\u062a\u0627\u062c \u0647\u0630\u0647 \u0627\u0644\u0642\u064a\u0645\u0629 \u0644\u062a\u0639\u062f\u064a\u0644 \u062f\u0642\u064a\u0642 \u062d\u0633\u0628 \u0635\u0648\u0631 \u0627\u0644\u0642\u0648\u0627\u0644\u0628 *\/\n right: 50%;\n transform: translate(50%, -50%);\n font-size: 28px; \/* \u064a\u0645\u0643\u0646 \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062d\u062c\u0645 \u062d\u0633\u0628 \u0627\u0644\u062d\u0627\u062c\u0629 *\/\n color: #0e7185; \/* \u0646\u0641\u0633 \u0644\u0648\u0646 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0644\u062a\u0648\u062d\u064a\u062f \u0627\u0644\u0647\u0648\u064a\u0629 *\/\n font-weight: 700; \/* \u062e\u0637 \u0639\u0631\u064a\u0636 \u0644\u0644\u0627\u0633\u0645 *\/\n font-family: 'Almarai', sans-serif;\n text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); \/* \u0638\u0644 \u0623\u0641\u062a\u062d \u0648\u0623\u0643\u062b\u0631 \u0646\u0639\u0648\u0645\u0629 *\/\n white-space: nowrap;\n }\n\n input[type=\"text\"] {\n padding: 12px 15px;\n width: calc(100% - 30px); \/* \u0644\u064a\u0623\u062e\u0630 \u0639\u0631\u0636 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0645\u0639 \u0645\u0631\u0627\u0639\u0627\u0629 \u0627\u0644\u062d\u0634\u0648 *\/\n max-width: 350px; \/* \u062a\u062d\u062f\u064a\u062f \u0639\u0631\u0636 \u0623\u0642\u0635\u0649 *\/\n border-radius: 8px;\n border: 1px solid #ced4da; \/* \u0644\u0648\u0646 \u062d\u062f\u0648\u062f \u0623\u0641\u062a\u062d *\/\n text-align: center;\n margin: 25px auto;\n display: block;\n font-size: 16px;\n font-family: 'Almarai', sans-serif;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n }\n\n input[type=\"text\"]:focus {\n border-color: #0e7185; \/* \u0644\u0648\u0646 \u0627\u0644\u062d\u062f\u0648\u062f \u0639\u0646\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0632 *\/\n box-shadow: 0 0 0 0.2rem rgba(14, 113, 133, 0.25); \/* \u0638\u0644 \u062e\u0641\u064a\u0641 \u0639\u0646\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0632 *\/\n outline: none;\n }\n\n .buttons-container {\n margin-top: 20px;\n display: flex;\n justify-content: center;\n gap: 15px; \/* \u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 *\/\n flex-wrap: wrap; \/* \u0644\u0644\u0633\u0645\u0627\u062d \u0628\u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u0633\u0637\u0631 \u062c\u062f\u064a\u062f \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 *\/\n }\n\n .main-button {\n background-color: #0e7185;\n color: white;\n padding: 12px 35px; \/* \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0634\u0648 \u0627\u0644\u062c\u0627\u0646\u0628\u064a *\/\n font-size: 16px;\n font-family: 'Almarai', sans-serif;\n font-weight: 700;\n border: none;\n border-radius: 8px; \/* \u062d\u0648\u0627\u0641 \u0623\u0646\u0639\u0645 \u0642\u0644\u064a\u0644\u0627\u064b *\/\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; \/* \u062f\u0631\u062c\u0629 \u0623\u063a\u0645\u0642 \u0642\u0644\u064a\u0644\u0627\u064b \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0645 *\/\n box-shadow: 0 6px 16px rgba(14, 113, 133, 0.3);\n transform: translateY(-2px); \/* \u062a\u0623\u062b\u064a\u0631 \u0631\u0641\u0639 \u062e\u0641\u064a\u0641 *\/\n }\n\n .main-button:active {\n transform: translateY(0px); \/* \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0632\u0631 \u0644\u0648\u0636\u0639\u0647 \u0627\u0644\u0623\u0635\u0644\u064a \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 *\/\n box-shadow: 0 3px 8px rgba(14, 113, 133, 0.25);\n }\n\n\n #saveBtn {\n display: none; \/* \u064a\u0628\u062f\u0623 \u0645\u062e\u0641\u064a\u0627\u064b *\/\n background-color: #28a745; \/* \u0644\u0648\u0646 \u0645\u062e\u062a\u0644\u0641 \u0644\u0632\u0631 \u0627\u0644\u062d\u0641\u0638 (\u0623\u062e\u0636\u0631) *\/\n }\n #saveBtn:hover {\n background-color: #218838; \/* \u062f\u0631\u062c\u0629 \u0623\u063a\u0645\u0642 \u0644\u0644\u0623\u062e\u0636\u0631 \u0639\u0646\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0645 *\/\n box-shadow: 0 6px 16px rgba(40, 167, 69, 0.3);\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"page-container\">\n <h1>\u0627\u062e\u062a\u0631 \u0642\u0627\u0644\u0628 \u062a\u0647\u0646\u0626\u0629 \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:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/1.jpg\" onclick=\"selectTemplate(1)\" id=\"thumb1\" alt=\"\u0642\u0627\u0644\u0628 1\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 1<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/2.jpg\" onclick=\"selectTemplate(2)\" id=\"thumb2\" alt=\"\u0642\u0627\u0644\u0628 2\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 2<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/3.jpg\" onclick=\"selectTemplate(3)\" id=\"thumb3\" alt=\"\u0642\u0627\u0644\u0628 3\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 3<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/5.jpg\" onclick=\"selectTemplate(5)\" id=\"thumb5\" alt=\"\u0642\u0627\u0644\u0628 5\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 5<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/6.jpg\" onclick=\"selectTemplate(6)\" id=\"thumb6\" alt=\"\u0642\u0627\u0644\u0628 6\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 6<\/div>\n <\/div>\n <div class=\"thumbnail-item\">\n <img decoding=\"async\" src=\"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/7.jpg\" onclick=\"selectTemplate(7)\" id=\"thumb7\" alt=\"\u0642\u0627\u0644\u0628 7\">\n <div class=\"thumbnail-label\">\u0642\u0627\u0644\u0628 7<\/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\u062a\u0647\u0646\u0626\u0629<\/button>\n <button id=\"saveBtn\" class=\"main-button\" onclick=\"saveCard()\">\u0627\u062d\u0641\u0638 \u0627\u0644\u062a\u0647\u0646\u0626\u0629 \u0643\u0635\u0648\u0631\u0629<\/button>\n <\/div>\n\n <div id=\"card-container\" style=\"display:none;\">\n <img decoding=\"async\" id=\"card-image\" src=\"\" alt=\"\u0642\u0627\u0644\u0628 \u0627\u0644\u062a\u0647\u0646\u0626\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\n <script>\n const templates = {\n 1: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/1.jpg\",\n 2: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/2.jpg\",\n 3: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/3.jpg\",\n 5: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/5.jpg\",\n 6: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/6.jpg\",\n 7: \"https:\/\/arazaq.khaier.sa\/wp-content\/uploads\/2025\/05\/7.jpg\"\n };\n\n let selectedTemplateId = 1; \/\/ \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0627\u0633\u0645 \u0644\u064a\u0643\u0648\u0646 \u0623\u0648\u0636\u062d\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 \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0639\u0631\u0648\u0636\u0629 \u0645\u0628\u0627\u0634\u0631\u0629 \u0639\u0646\u062f \u0627\u062e\u062a\u064a\u0627\u0631 \u0642\u0627\u0644\u0628 \u062c\u062f\u064a\u062f \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0638\u0627\u0647\u0631\u0629 \u0648\u0627\u0644\u0627\u0633\u0645 \u0645\u0648\u062c\u0648\u062f\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'; \/\/ \u0625\u0638\u0647\u0627\u0631 \u0632\u0631 \u0627\u0644\u062d\u0641\u0638\n }\n\n function saveCard() {\n const cardContainer = document.getElementById('card-container');\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u062e\u0644\u0641\u064a\u0629 \u0628\u064a\u0636\u0627\u0621 \u0645\u0624\u0642\u062a\u064b\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0634\u0641\u0627\u0641\u064a\u0629 \u0648\u062a\u0631\u064a\u062f \u062e\u0644\u0641\u064a\u0629 \u062b\u0627\u0628\u062a\u0629 \u0644\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629\n \/\/ cardContainer.style.backgroundColor = 'white'; \/\/ \u0642\u0645 \u0628\u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u062a\u0639\u0644\u064a\u0642 \u0625\u0630\u0627 \u0644\u0632\u0645 \u0627\u0644\u0623\u0645\u0631\n\n html2canvas(cardContainer, {\n useCORS: true, \/\/ \u0645\u0647\u0645 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0635\u0648\u0631 \u0645\u0646 \u0646\u0637\u0627\u0642 \u0645\u062e\u062a\u0644\u0641\n \/\/ scale: 2, \/\/ \u064a\u0645\u0643\u0646 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062f\u0642\u0629 \u0625\u0630\u0627 \u0644\u0632\u0645 \u0627\u0644\u0623\u0645\u0631\n \/\/ backgroundColor: null \/\/ \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0634\u0641\u0627\u0641\u064a\u0629 \u0627\u0644\u0635\u0648\u0631\u0629 \u0625\u0646 \u0648\u062c\u062f\u062a (\u0642\u062f \u062a\u062d\u062a\u0627\u062c \u0627\u0644\u0635\u0648\u0631\u0629 \u0646\u0641\u0633\u0647\u0627 \u0644\u0623\u0646 \u062a\u0643\u0648\u0646 PNG \u0645\u0639 \u0634\u0641\u0627\u0641\u064a\u0629)\n }).then(function(canvas) {\n \/\/ cardContainer.style.backgroundColor = ''; \/\/ \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0625\u0630\u0627 \u062a\u0645 \u062a\u063a\u064a\u064a\u0631\u0647\n\n const link = document.createElement('a');\n link.download = '\u062a\u0647\u0646\u0626\u0629-\u0627\u0644\u0639\u064a\u062f-' + document.getElementById('name').value.trim() + '.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n }).catch(function(error) {\n console.error('Oops, something went wrong!', 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. \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0635\u0648\u0631 \u0645\u0633\u0645\u0648\u062d \u062a\u062d\u0645\u064a\u0644\u0647\u0627 (CORS).');\n });\n }\n\n \/\/ \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0642\u0627\u0644\u0628 \u0627\u0644\u0623\u0648\u0644 \u0643\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\n selectTemplate(selectedTemplateId);\n document.getElementById('thumb' + selectedTemplateId).classList.add('selected'); \/\/ \u062a\u0623\u0643\u062f \u0645\u0646 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0628\u0635\u0631\u064a\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0628\u0637\u0627\u0642\u0629 \u062a\u0647\u0646\u0626\u0629 \u0627\u0644\u0639\u064a\u062f \u0627\u062e\u062a\u0631 \u0642\u0627\u0644\u0628 \u062a\u0647\u0646\u0626\u0629 \u0648\u0623\u062f\u062e\u0644 \u0627\u0633\u0645\u0643 \u0642\u0627\u0644\u0628 1 \u0642\u0627\u0644\u0628 2 \u0642\u0627\u0644\u0628 3 \u0642\u0627\u0644\u0628 5 \u0642\u0627\u0644\u0628 6 \u0642\u0627\u0644\u0628 7 \u0627\u0639\u0631\u0636 \u0627\u0644\u062a\u0647\u0646\u0626\u0629 \u0627\u062d\u0641\u0638 \u0627\u0644\u062a\u0647\u0646\u0626\u0629 \u0643\u0635\u0648\u0631\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16209","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16209"}],"version-history":[{"count":15,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16209\/revisions"}],"predecessor-version":[{"id":16279,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16209\/revisions\/16279"}],"wp:attachment":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}