{"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":"<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>&#1582;&#1583;&#1605;&#1577; &#1578;&#1608;&#1604;&#1610;&#1583; &#1588;&#1593;&#1575;&#1585; &#1605;&#1582;&#1589;&#1589;&#1577; &#1604;&#1580;&#1607;&#1575;&#1578; &#1580;&#1575;&#1605;&#1593;&#1577; &#1575;&#1604;&#1602;&#1589;&#1610;&#1605;&#1548; &#1605;&#1579;&#1604; &#1575;&#1604;&#1603;&#1604;&#1610;&#1575;&#1578; &#1608;&#1575;&#1604;&#1573;&#1583;&#1575;&#1585;&#1575;&#1578;&#1548; &#1578;&#1578;&#1610;&#1581; &#1573;&#1606;&#1588;&#1575;&#1569; &#1588;&#1593;&#1575;&#1585;&#1575;&#1578; &#1585;&#1587;&#1605;&#1610;&#1577; &#1576;&#1587;&#1607;&#1608;&#1604;&#1577; &#1608;&#1576;&#1580;&#1608;&#1583;&#1577; &#1593;&#1575;&#1604;&#1610;&#1577;.<\/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\">&#1575;&#1587;&#1605; &#1575;&#1604;&#1580;&#1607;&#1577;<\/label>\n            <input type=\"text\" id=\"logo-text\" value=\"&#1593;&#1605;&#1575;&#1583;&#1577; &#1575;&#1604;&#1578;&#1593;&#1604;&#1605; &#1575;&#1604;&#1573;&#1604;&#1603;&#1578;&#1585;&#1608;&#1606;&#1610; &#1608;&#1578;&#1602;&#1606;&#1610;&#1577; &#1575;&#1604;&#1605;&#1593;&#1604;&#1608;&#1605;&#1575;&#1578;\" placeholder=\"&#1571;&#1583;&#1582;&#1604; &#1575;&#1587;&#1605; &#1575;&#1604;&#1580;&#1607;&#1577;\">\n        <\/div>\n\n        <div class=\"form-group\">\n            <label for=\"logo-fontSize\">&#1581;&#1580;&#1605; &#1575;&#1604;&#1582;&#1591;<\/label>\n            <input type=\"number\" id=\"logo-fontSize\" value=\"200\" placeholder=\"&#1605;&#1579;&#1575;&#1604;: 200\">\n            <div class=\"note\">&#1581;&#1580;&#1605; &#1575;&#1604;&#1582;&#1591; &#1575;&#1604;&#1575;&#1601;&#1578;&#1585;&#1575;&#1590;&#1610; 200px<\/div>\n        <\/div>\n\n        <div class=\"form-group\">\n            <label>&#1575;&#1604;&#1582;&#1604;&#1601;&#1610;&#1577;<\/label>\n            <div class=\"bg-options\">\n                <label><input type=\"radio\" name=\"background-option\" value=\"white\" checked> &#1582;&#1604;&#1601;&#1610;&#1577; &#1576;&#1610;&#1590;&#1575;&#1569;<\/label>\n                <label><input type=\"radio\" name=\"background-option\" value=\"transparent\"> &#1582;&#1604;&#1601;&#1610;&#1577; &#1588;&#1601;&#1575;&#1601;&#1577;<\/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()\">&#1578;&#1581;&#1605;&#1610;&#1604; &#1575;&#1604;&#1588;&#1593;&#1575;&#1585;<\/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: &#1582;&#1604;&#1601;&#1610;&#1577; &#1588;&#1601;&#1575;&#1601;&#1577; (&#1604;&#1575; &#1578;&#1601;&#1593;&#1604; &#1588;&#1610;&#1574;&#1575;&#1611;)\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","protected":false},"excerpt":{"rendered":"<p>&#1582;&#1583;&#1605;&#1577; &#1578;&#1608;&#1604;&#1610;&#1583; &#1588;&#1593;&#1575;&#1585; &#1605;&#1582;&#1589;&#1589;&#1577; &#1604;&#1580;&#1607;&#1575;&#1578; &#1580;&#1575;&#1605;&#1593;&#1577; &#1575;&#1604;&#1602;&#1589;&#1610;&#1605;&#1548; &#1605;&#1579;&#1604; &#1575;&#1604;&#1603;&#1604;&#1610;&#1575;&#1578; &#1608;&#1575;&#1604;&#1573;&#1583;&#1575;&#1585;&#1575;&#1578;&#1548; &#1578;&#1578;&#1610;&#1581; &#1573;&#1606;&#1588;&#1575;&#1569; &#1588;&#1593;&#1575;&#1585;&#1575;&#1578; &#1585;&#1587;&#1605;&#1610;&#1577; &#1576;&#1587;&#1607;&#1608;&#1604;&#1577; &#1608;&#1576;&#1580;&#1608;&#1583;&#1577; &#1593;&#1575;&#1604;&#1610;&#1577;.<\/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}]}}