{"id":26361,"date":"2025-05-15T19:54:21","date_gmt":"2025-05-15T16:54:21","guid":{"rendered":"https:\/\/www.qu.edu.sa\/?page_id=26361"},"modified":"2025-06-02T20:31:30","modified_gmt":"2025-06-02T17:31:30","slug":"generate-logo-department","status":"publish","type":"page","link":"https:\/\/www.qu.edu.sa\/en\/mainservices\/generate-logo-department\/","title":{"rendered":"Logo Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26361\" class=\"elementor elementor-26361\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f871d4 e-flex e-con-boxed e-con e-parent\" data-id=\"4f871d4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e1e6f5d e-con-full e-flex e-con e-child\" data-id=\"e1e6f5d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8febaf elementor-widget elementor-widget-text-editor\" data-id=\"f8febaf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u062e\u062f\u0645\u0629 \u062a\u0648\u0644\u064a\u062f \u0634\u0639\u0627\u0631 \u0645\u062e\u0635\u0635\u0629 \u0644\u062c\u0647\u0627\u062a \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0642\u0635\u064a\u0645\u060c \u0645\u062b\u0644 \u0627\u0644\u0643\u0644\u064a\u0627\u062a \u0648\u0627\u0644\u0625\u062f\u0627\u0631\u0627\u062a\u060c \u062a\u062a\u064a\u062d \u0625\u0646\u0634\u0627\u0621 \u0634\u0639\u0627\u0631\u0627\u062a \u0631\u0633\u0645\u064a\u0629 \u0628\u0633\u0647\u0648\u0644\u0629 \u0648\u0628\u062c\u0648\u062f\u0629 \u0639\u0627\u0644\u064a\u0629.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31f8f68 elementor-widget elementor-widget-spacer\" data-id=\"31f8f68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bcac76 elementor-widget elementor-widget-shortcode\" data-id=\"1bcac76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <script src=\"https:\/\/challenges.cloudflare.com\/turnstile\/v0\/api.js\" async defer><\/script>\n\n    <style>\n        .form-row {\n            display: flex;\n            justify-content: center;\n            flex-wrap: wrap;\n            gap: 40px;\n            margin-bottom: 20px;\n        }\n        .form-group {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n        label {\n            font-size: 16px;\n            font-weight: bold;\n            margin-bottom: 5px;\n        }\n        input[type=\"text\"],\n        input[type=\"number\"] {\n            padding: 8px;\n            width: 300px;\n            font-size: 16px;\n            text-align: center;\n        }\n        .note {\n            font-size: 14px;\n            color: #666;\n            margin-top: 5px;\n        }\n        .cf-turnstile {\n            margin: 20px auto;\n            display: flex;\n            justify-content: center;\n        }\n        .download-btn {\n            margin: 0 auto;\n            padding: 10px 25px;\n            background: #1B8354;\n            color: white;\n            border: none;\n            font-size: 18px;\n            cursor: pointer;\n            display: block;\n        }\n        .bg-options {\n            display: flex;\n            gap: 15px;\n            margin-top: 10px;\n        }\n        .bg-options label {\n            font-weight: normal;\n        }\n    <\/style>\n\n    <div class=\"form-row\">\n        <div class=\"form-group\">\n            <label for=\"logo-text\">\u0627\u0633\u0645 \u0627\u0644\u062c\u0647\u0629<\/label>\n            <input type=\"text\" id=\"logo-text\" value=\"\u0639\u0645\u0627\u062f\u0629 \u0627\u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u062c\u0647\u0629\">\n        <\/div>\n\n        <div class=\"form-group\">\n            <label for=\"logo-fontSize\">\u062d\u062c\u0645 \u0627\u0644\u062e\u0637<\/label>\n            <input type=\"number\" id=\"logo-fontSize\" value=\"200\" placeholder=\"\u0645\u062b\u0627\u0644: 200\">\n            <div class=\"note\">\u062d\u062c\u0645 \u0627\u0644\u062e\u0637 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a 200px<\/div>\n        <\/div>\n\n        <div class=\"form-group\">\n            <label>\u0627\u0644\u062e\u0644\u0641\u064a\u0629<\/label>\n            <div class=\"bg-options\">\n                <label><input type=\"radio\" name=\"background-option\" value=\"white\" checked> \u062e\u0644\u0641\u064a\u0629 \u0628\u064a\u0636\u0627\u0621<\/label>\n                <label><input type=\"radio\" name=\"background-option\" value=\"transparent\"> \u062e\u0644\u0641\u064a\u0629 \u0634\u0641\u0627\u0641\u0629<\/label>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"cf-turnstile\" data-sitekey=\"0x4AAAAAABc6Jga4MdcjvjIL\"><\/div>\n\n    <button class=\"download-btn\" onclick=\"generateLogoImage()\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0634\u0639\u0627\u0631<\/button>\n\n    <canvas id=\"logo-canvas\" style=\"display: none;\"><\/canvas>\n\n    <script>\n        async function generateLogoImage() {\n            const token = document.querySelector('input[name=\"cf-turnstile-response\"]')?.value;\n            if (!token) return;\n\n            const canvas = document.getElementById('logo-canvas');\n            const ctx = canvas.getContext('2d');\n\n            const text = document.getElementById('logo-text').value;\n            const fontSize = parseInt(document.getElementById('logo-fontSize').value) || 200;\n            const fontColor = \"#213467\";\n            const fontFile = \"\/wp-content\/uploads\/qu_fonts_logo\/Frutiger3.ttf\";\n            const logoPath = \"\/wp-content\/uploads\/2025\/05\/qu_logo_w_2025_v5.png\";\n            const textMarginTop = 150;\n            const bgOption = document.querySelector('input[name=\"background-option\"]:checked')?.value;\n\n            const font = new FontFace('FrutigerArabic', `url(${fontFile})`);\n            await font.load();\n            document.fonts.add(font);\n\n            const image = new Image();\n            image.crossOrigin = \"anonymous\";\n            image.onload = function () {\n                const textHeight = fontSize + 40;\n                const width = image.width;\n                const height = image.height + textMarginTop + textHeight;\n\n                canvas.width = width;\n                canvas.height = height;\n\n                if (bgOption === \"white\") {\n                    ctx.fillStyle = \"#ffffff\";\n                    ctx.fillRect(0, 0, width, height);\n                }\n                \/\/ else: \u062e\u0644\u0641\u064a\u0629 \u0634\u0641\u0627\u0641\u0629 (\u0644\u0627 \u062a\u0641\u0639\u0644 \u0634\u064a\u0626\u0627\u064b)\n\n                ctx.drawImage(image, 0, 0);\n\n                ctx.fillStyle = fontColor;\n                ctx.font = `${fontSize}px FrutigerArabic`;\n                ctx.textAlign = \"center\";\n                ctx.fillText(text, width \/ 2, image.height + textMarginTop + fontSize \/ 2);\n\n                const link = document.createElement('a');\n                link.download = \"qu_logo_with_department_name.png\";\n                link.href = canvas.toDataURL(\"image\/png\");\n                link.click();\n            };\n\n            image.src = logoPath;\n        }\n    <\/script>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-495386e elementor-widget elementor-widget-spacer\" data-id=\"495386e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>A custom logo generation service for Qassim University entities, such as colleges and departments, allows for easy creation of official logos with high quality.<\/p>","protected":false},"author":2,"featured_media":0,"parent":25876,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"departments-pages-type":[239],"class_list":["post-26361","page","type-page","status-publish","hentry","departments-pages-type-static-content"],"_links":{"self":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/26361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/comments?post=26361"}],"version-history":[{"count":10,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/26361\/revisions"}],"predecessor-version":[{"id":32685,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/26361\/revisions\/32685"}],"up":[{"embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/25876"}],"wp:attachment":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/media?parent=26361"}],"wp:term":[{"taxonomy":"departments-pages-type","embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/departments-pages-type?post=26361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}