{"id":775,"date":"2021-07-13T11:06:00","date_gmt":"2021-07-13T09:06:15","guid":{"rendered":"https:\/\/ocardoo.com\/?page_id=775"},"modified":"2026-01-28T10:12:28","modified_gmt":"2026-01-28T09:12:28","slug":"editor","status":"publish","type":"page","link":"https:\/\/ocardoo.com\/en\/editor\/","title":{"rendered":"Our editor"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"775\" class=\"elementor elementor-775\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4d3bf0f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4d3bf0f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3c3167f\" data-id=\"3c3167f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6220a02 elementor-widget elementor-widget-ocardoo-editor\" data-id=\"6220a02\" data-element_type=\"widget\" data-widget_type=\"ocardoo-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script>\n\tasync function copyPageUrl(url = false, redirect = false) {\n\t\tif (url) {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(url);\n\t\t\tconsole.log('Page URL copied to clipboard');\n\t\t\talert('The link to your greeting card has been copied to the clipboard:\\r\\n'+url);\n\t\t\t\n\t\t\tSwal.fire({\n\t\t\t  title: 'Custom width, padding, color, background.',\n\t\t\t  html: 'The link to your greeting card has been copied to the clipboard:<br>'+url,\n\t\t\t  icon: 'success',\n\t\t\t  backdrop: `\n\t\t\t\trgba(0,0,123,0.4)\n\t\t\t\turl(\"https:\/\/sweetalert2.github.io\/images\/nyan-cat.gif\")\n\t\t\t\tleft top\n\t\t\t\tno-repeat\n\t\t\t  `\n\t\t\t})\n\t\t\t\n\t\t\tif (redirect) {\n\t\t\t\t\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error('Failed to copy: ', err);\n\t\t}\n\t\t}\n\t} \n<\/script>\n<div id=\"font-container\" aria-hidden=\"true\">\n    <span style=\"font-family: 'Permanent Marker';\">highlighter<\/span>\n    <span style=\"font-family: 'Zen Tokyo Zoo';\">Lines<\/span>\n    <span style=\"font-family: 'Zen Loop';\">Curls<\/span>\n    <span style=\"font-family: 'Dancing Script';\">Cursive<\/span>\n    <span style=\"font-family: 'Otomanopee One';\">Thick<\/span>\n\t<span style=\"font-family: 'Alfa Slab One';\">Alfa Slab<\/span>\n\t<span style=\"font-family: 'Amatic SC';\">Amatic<\/span>\n\t<span style=\"font-family: 'Carattere';\">Carattere<\/span>\n\t<span style=\"font-family: 'Caveat';\">Print font<\/span>\n\t<span style=\"font-family: 'Cookie';\">Cookie<\/span>\n\t<span style=\"font-family: 'Corinthia';\">Corinthia<\/span>\n\t<span style=\"font-family: 'FrederickatheGreat';\">Fredericka<\/span>\n\t<span style=\"font-family: 'GlassAntiqua';\">Glass Antiqua<\/span>\n\t<span style=\"font-family: 'GreatVibes';\">Great Vibes<\/span>\n\t<span style=\"font-family: 'Gruppo';\">Gruppo<\/span>\n\t<span style=\"font-family: 'Indie Flower';\">Indie Flower<\/span>\n\t<span style=\"font-family: 'Lobster Two';\">Lobster<\/span>\n\t<span style=\"font-family: 'Poiret One';\">Poiret<\/span>\n\t<span style=\"font-family: 'Shadows Into Light Two';\">Shadows Intro<\/span>\n\t<span style=\"font-family: 'Roboto';\">Sans-serif<\/span>\t\n<\/div>\n<div class=\"loading-overlay hidden\">\n    <div class=\"loader\"><\/div>\n<\/div>\n\n\n<div class=\"ocardoo-wellcome step0 ocardoo-card-container\">\n        <h2><i class=\"fas fa-hand-peace\"><\/i> Dear testers<\/h2>\n    <p>This is our <b>Ocardo Demo greeting card<\/b>!<br>You can test our editor on this page.<br><br>If you are satisfied, you can also start directly with your own greeting card.<\/p>\n    <div class=\"elementor-button-wrapper\">\n        <a href=\"\/en\/?post_type=product\" class=\"elementor-button-link elementor-button elementor-size-lg\" role=\"button\">\n            <span class=\"elementor-button-content-wrapper\">\n                <span class=\"elementor-button-text\">\n                    Choose my own card<\/span>\n            <\/span>\n        <\/a>\n    <\/div>\n    <\/div>\n\n<div class=\"ocardoo-info step1 ocardoo-card-container\">\n    <h2><i class=\"fas fa-info-circle\"><\/i> Information<\/h2>\n    <form id=\"cardInfo\" action=\"\">\n        <div class=\"form-group row owner-fields\">\n            <label for=\"owner\"\n                class=\"col-md-4 col-form-label\">Initiator<\/label>\n            <div class=\"col-md-8\">\n                <div class=\"input-group disabled\">\n                    <div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n                            <i aria-hidden=\"true\" class=\"fa fa-address-card\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <input id=\"owner\" name=\"owner\" placeholder=\"Service Team\" type=\"text\"\n                        class=\"form-control\" value=\"Service Team\" readonly>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"form-group row card-fields\">\n            <label for=\"card\" class=\"col-md-4 col-form-label\">My card<br>(Identification number)<\/label>\n            <div class=\"col-md-4\">\n                <div class=\"input-group disabled\">\n                    <div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n                            <i aria-hidden=\"true\" class=\"fa fa-heart\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <input id=\"card\" name=\"card\" type=\"text\" class=\"form-control\" value=\"#1\"\n                        readonly>\n                <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n                <img decoding=\"async\" src=\"https:\/\/ocardoo.com\/wp-content\/uploads\/2021\/10\/42.009.jpg\" class=\"product-image\">            <\/div>\n        <\/div>\n                        <div class=\"form-group row titel-fields\">\n            <label for=\"title\"\n                class=\"col-md-4 col-form-label\">Card title<\/label>\n            <div class=\"col-md-8\">\n                <div class=\"input-group disabled\">\n                    <div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n                            <i aria-hidden=\"true\" class=\"fas fa-hand-holding-heart\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <input id=\"title\" name=\"title\"\n                        placeholder=\"Happy Birthday!\" type=\"text\"\n                        class=\"form-control\" value=\"Unsere Demo-Karte\"\n                        readonly>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"form-group row receiver_name-fields\">\n            <label for=\"receiver_name\"\n                class=\"col-md-4 col-form-label\">Who is the greeting card for (recipient:in)<\/label>\n            <div class=\"col-md-8\">\n                <div class=\"input-group disabled\">\n                    <div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n                            <i aria-hidden=\"true\" class=\"fa fa-address-card\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <input id=\"receiver_name\" name=\"receiver_name\"\n                        placeholder=\"Firstname Lastname\" type=\"text\"\n                        required=\"required\" class=\"form-control\" value=\"Monika Mustermann\"\n                        readonly>\n                <\/div>\n            <\/div>\n        <\/div>\t\n\t\t\t\t\n\t\t\n        \n        \n\t\t\n\t\t\t\t\n\n        <div class=\"form-group row date-field\">\n            <label for=\"send_date\"\n                class=\"col-md-4 col-form-label\">Send date<\/label>\n            <div class=\"col-md-8\">\n                <input id=\"orignal_send_date\" name=\"orignal_send_date\" type=\"hidden\" class=\"form-control\" value=\"2022-02-07\">\t\t\t\t<div class=\"input-group disabled\" style=\"width:47.5%; float:left; margin-right:5%;\">\n                    <div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n                            <i aria-hidden=\"true\" class=\"fa fa-calendar-check\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <input id=\"send_date\" name=\"send_date\" type=\"date\" class=\"form-control\" value=\"2022-02-07\"\n                    readonly>\n                <\/div>\n\t\t\t\t<div class=\"input-group disabled\" style=\"width:47.5%;\">\n\t\t\t\t\t<div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-clock\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <input id=\"send_time\" name=\"send_time\" type=\"time\" class=\"form-control\" value=\"14:58\"\n                    readonly>\n                <\/div>\n                <span id=\"send_dateHelpBlock\" class=\"form-text text-muted\" style=\"display:none; margin-left:.75rem;\"><i\n                        aria-hidden=\"true\" class=\"fas fa-info-circle\"><\/i> <span\n                        class=\"label\">Your date has been corrected so that you have enough time to finish your greeting card.<\/span><\/span>\n            <\/div>\n\t\t\t\n        <\/div>\n        <div class=\"form-group row effect-fields\">\n            <label for=\"effekt\" class=\"col-md-4 col-form-label\">Effect<\/label>\n            <div class=\"col-md-8\">\n                <div class=\"input-group disabled\">\n                    <div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n                            <i aria-hidden=\"true\" class=\"fas fa-snowflake\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <select id=\"effect\" name=\"effect\" required=\"required\" class=\"custom-select\" readonly disabled>\n                        <option value=\"none\" >\n                            None<\/option>\n                        <option value=\"confetti\" >\n                            Confetti<\/option>\n                        <option value=\"snow\" >\n                            Snow<\/option>\n                        <option value=\"rain\" >\n                            Rain<\/option>\n                        <option value=\"gold\" selected>\n                            Golden confetti<\/option>\n                    <\/select>\n                    <script>\n                    jQuery(document).ready(function() {\n                        if (jQuery.isFunction(confetti)) {\n\n                            switch (jQuery('select#effect').val()) {\n                                case 'confetti':\n                                    confetti(1000);\n                                    break;\n                                case 'snow':\n                                    snow(1000);\n                                    break;\n                                case 'rain':\n                                    snow(1000);\n                                    break;\n                                case 'rain':\n                                    gold(1000);\n                                    break;\n                                default:\n                                    \/\/ code block\n                            }\n\n                            jQuery('select#effect').on('change', function() {\n                                \/\/alert( this.value );\n                                if (this.value == 'confetti') {\n                                    confetti(1000);\n                                } else if (this.value == 'snow') {\n                                    snow(1000);\n                                } else if (this.value == 'rain') {\n                                    rain(1000);\n                                } else if (this.value == 'gold') {\n                                    gold(1000);\n                                }\n                            });\n                        }\n                    });\n                    <\/script>\n                <\/div>\n            <\/div>\n        <\/div>\n\t\t\n\t\t\t\t\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/div>\n<div id=\"ocardoo-editor-container\" class=\"ocardoo-editor step2 ocardoo-card-container\">\n    \n\t\t\t<h2><i class=\"fas fa-edit\"><\/i> Card editor<\/h2>\n\t\t<div class=\"ui-wrapper\">\n\t\t\t\n        <div class=\"ui-editor\">\n            <div id=\"loading-overlay-c\" class=\"loading-overlay-c\">\n                <div class=\"loading-container\">\n                <img decoding=\"async\" src=\"https:\/\/ocardoo.com\/wp-content\/uploads\/2021\/05\/Ocardoo_Logo_Claim.png\" alt=\"Loading Logo\" class=\"loading-logo-c\">                    <div class=\"spinner\"><\/div>\n                <\/div>\n\n            <\/div>\n            <div id=\"pages\">\n\n                <div>\n                    <img decoding=\"async\" src=\"https:\/\/ocardoo.com\/wp-content\/uploads\/2021\/10\/42.009.jpg\" style=\"height: 100%;width: 100%;\">                <\/div>\n                <div class=\"canvas-wrapper hard\" style=\"background-color: #fff;\">\n                    <canvas id=\"c\"><\/canvas>\n                <\/div>\n            <\/div>\n            <div id=\"canvasControlPage\">\n                    <div class=\"page-prev-control\">\n                    <button id=\"page-previous-start\"><i class=\"fas fa-angle-double-left\"><\/i><\/button>\n                    <button id=\"page-previous\"><i class=\"fas fa-angle-left\"><\/i><span> Zur\u00fcck<\/span><\/button>\n                <\/div>\n\n                <div>\n                    <span>Seite<\/span>\n                    <span class=\"custom-number-input\" id=\"currentPage\" contenteditable=\"true\" data-placeholder=\"1\">1<\/span>\n                    <input type=\"hidden\" id=\"current_page\" name=\"current_page\" value=\"1\">\n                    <span class=\"extended\" style=\"display:none;\">\n                        from <span id=\"pageCount\"><\/span>\n                    <\/span>\n                <\/div>\n                <div class=\"page-next-control\">\n                    <button id=\"page-next\"><span>Weiter <\/span><i class=\"fas fa-angle-right\"><\/i><\/i><\/button>\n                    <button id=\"page-next-end\"><i class=\"fas fa-angle-double-right\"><\/i><\/button>\n                <\/div>\n            <\/div>\n             <div id=\"canvasControlAdmin\">\n\n                \n            <\/div>\n            <div id=\"saveandview\">\n                                <a id=\"viewer\" class=\"btn btn-primary\" href=\"https:\/\/ocardoo.com\/en\/card\/?card=MQ%3D%3D\" type=\"button\"\n                    target=\"blank\"><i aria-hidden=\"true\" class=\"fas fa-eye\"><\/i> <span\n                        class=\"label\">Preview<\/span><\/a>\n\n                                <button id=\"saveCanvas\" disabled\n title=\"Saving is not allowed on the demo greeting card \ud83d\ude09\"\n                    style=\"background:gray; cursor:not-allowed; color:darkred;\"><i aria-hidden=\"true\"\n                        class=\"fas fa-save\"><\/i> <span\n                        class=\"label\">Save<\/span><span class=\"saved\"\n                        style=\"display:none\"> <i aria-hidden=\"true\" class=\"fas fa-check\"><\/i><\/span><\/button>\n                \n            <\/div>\n            <div id=\"downloadCanvasPDF\" style=\"margin-top: 10px;\">\n\t\t\t\t<div class=\"last_page\" style=\"display:none;\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"backplate\" src=\"https:\/\/ocardoo.com\/wp-content\/plugins\/ocardoo-editor\/includes\/..\/public\/img\/ocardoo_backplate.jpg\"  style=\"height: 100%;width: 100%;\">\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n        <\/div>\n        <div class=\"ui-elements\">\n            <div class=\"ui-elements-editor ocardoo-card-container\">\n                <!-- Standard Toolbar -->\n                <div id=\"addTools\">\n                    <button id=\"toggleFreeDrawing\"><img decoding=\"async\"\n                            src=\"https:\/\/ocardoo.com\/wp-content\/plugins\/ocardoo-editor\/includes\/..\/public\/img\/icons\/editor-paint.svg\"\n                            aria-hidden=\"true\" type=\"icon\" class=\"icon\"> <span\n                            class=\"label\">Enable free drawing<\/span><\/button>\n                    <button id=\"addText\"><img decoding=\"async\"\n                            src=\"https:\/\/ocardoo.com\/wp-content\/plugins\/ocardoo-editor\/includes\/..\/public\/img\/icons\/editor-text.svg\"\n                            aria-hidden=\"true\" type=\"icon\" class=\"icon\"> <span\n                            class=\"label\">Add text<\/span><\/button>\n\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#textInputModal\" style=\"display:none;\">\n\t\t\t\t\t  Launch demo modal\n\t\t\t\t\t<\/button>\n                    <button id=\"addGif\"><img decoding=\"async\"\n                            src=\"https:\/\/ocardoo.com\/wp-content\/plugins\/ocardoo-editor\/includes\/..\/public\/img\/icons\/editor-gif.svg\"\n                            aria-hidden=\"true\" type=\"icon\" class=\"icon\"> <span\n                            class=\"label\">Add GIF<\/span><\/button>\n                    <button id=\"addImage\"><img decoding=\"async\"\n                            src=\"https:\/\/ocardoo.com\/wp-content\/plugins\/ocardoo-editor\/includes\/..\/public\/img\/icons\/editor-img.svg\"\n                            aria-hidden=\"true\" type=\"icon\" class=\"icon\"> <span\n                            class=\"label\">Add image<\/span><\/button>\n                    <input id=\"imageInput\" type=\"file\" accept=\".jpg, .png, .jpeg, .svg\" name=\"image\" style=\"display: none;\">\n                     <button id=\"addCanvasBg\"><i aria-hidden=\"true\" class=\"fas fa-paint-roller icon\" style=\"font-size:24px;margin-right:10px;\"><\/i> <span\n                                        class=\"label\"> <span\n                            class=\"label\">Hintergrund f\u00e4rben<\/span><\/button>\n                <\/div>\n                <!-- if objects are marked -->\n                <div id=\"editTools\">\n                    <div id=\"freeDrawingControls\" class=\"container text-center\" style=\"display: none;\">\n                        <div class=\"row\">\n                            <div class=\"col-6 text-center\">\n                                <input type=\"range\" id=\"brushWidth\" name=\"brushWidth\" min=\"1\" max=\"10\" value=\"1\">\n                                <label for=\"brushWidth\">Brush width<\/label>\n                            <\/div>\n                            <div class=\"col-6 text-center\">\n\t\t\t\t\t\t\t\t<div class=\"input-group colorpicker\">\n\t\t\t\t\t\t\t\t\t<div class=\"input-group-prepend\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fas fa-fill-drip\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<input id=\"brushColor\" name=\"brushColor\" type=\"color\" class=\"form-control\">\n\t\t\t\t\t\t\t\t<\/div>\n                                <label for=\"brushColor\">Color<\/label>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div id=\"up-and-down\" class=\"container text-center\" style=\"display:none;\">\n                        <div class=\"row\">\n                            <div class=\"col-6\">\n                                <button id=\"moveToTop\" style=\"display: none;\"><i aria-hidden=\"true\"\n                                        class=\"fas fa-arrow-alt-circle-up\"><\/i> <span\n                                        class=\"label\">Level up<\/span><\/button>\n                            <\/div>\n                            <div class=\"col-6\">\n                                <button id=\"moveToBottom\" style=\"display: none;\"><i aria-hidden=\"true\"\n                                        class=\"fas fa-arrow-alt-circle-down\"><\/i> <span\n                                        class=\"label\">Level down<\/span><\/button>\n                            <\/div>\n                            <div class=\"col-12 text-left\">\n                                <span class=\"info\">\n                                Mit \"Ebene h\u00f6her\" bzw. \"Ebene tiefer\" kannst du Elemente \u00fcber- bzw. untereinander paltzieren.<hr style=\"margin: 0.5rem;\">\n                                    <i aria-hidden=\"true\" class=\"fas fa-info-circle\"><\/i>\n                                    <span\n                                        class=\"label\">During editing, the selected item is always displayed at the top level.                                    <\/span>\n                                <\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div id=\"colorControls\" class=\"container\" style=\"display: none\">\n                        <div class=\"row\">\n                            <div class=\"col-4\">\n\t\t\t\t\t\t\t\t<div class=\"input-group colorpicker\">\n\t\t\t\t\t\t\t\t\t<div class=\"input-group-prepend\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fas fa-fill-drip\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<input id=\"selectedColor\" name=\"selectedColor\" type=\"color\" class=\"form-control\">\n\t\t\t\t\t\t\t\t<\/div>\n                            <\/div>\n                            <div class=\"col-4 applyButtons\">\n                                <button id=\"fillColor\"><i aria-hidden=\"true\" class=\"fas fa-paint-roller\"><\/i> <span\n                                        class=\"label\">Fill<\/span><\/button>\n                            <\/div>\n                            <div class=\"col-4 applyButtons\">\n                                <button id=\"strokeColor\"><i aria-hidden=\"true\" class=\"fas fa-palette\"><\/i> <span\n                                        class=\"label\">Contour<\/span><\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div style=\"display: none\" id=\"textControls\" class=\"container text-center\">\n                        <div class=\"row\">\n                            <div class=\"col-6\">\n                                <div class=\"input-group\">\n                                    <div class=\"input-group-prepend\">\n                                        <div class=\"input-group-text\">\n                                            <i aria-hidden=\"true\" class=\"fas fa-font\"><\/i>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"custom-select\">\n                                        <div class=\"selected-value\"><\/div>\n                                            <ul id=\"fontList\">\n                                        <\/ul>\n                                    <\/div>\n                                    <select id=\"selectedFont\" name=\"selectedFont\" class=\"custom-select\">\n                                        <option value=\"Caveat\" style=\"font-family: 'Caveat', cursive;\">\n                                            Print font<\/option>\n                                        <option value=\"Dancing Script\" style=\"font-family: 'Dancing Script', cursive;\">\n                                            Cursive<\/option>\n                                        <option value=\"Otomanopee One\"\n                                            style=\"font-family: 'Otomanopee One', sans-serif;\">\n                                            Thick<\/option>\n                                        <option value=\"Permanent Marker\"\n                                            style=\"font-family: 'Permanent Marker', cursive;\">\n                                            highlighter<\/option>\n                                        <option value=\"Roboto\" style=\"font-family: 'Roboto', sans-serif;\">\n                                            Sans-serif<\/option>\n                                        <option value=\"Zen Loop\" style=\"font-family: 'Zen Loop', cursive;\">\n                                            Curls<\/option>\n                                        <option value=\"Zen Tokyo Zoo\" style=\"font-family: 'Zen Tokyo Zoo', cursive;\">\n                                            Lines<\/option>\n\n\t\t\t\t\t\t\t\t\t\t<option value=\"Alfa Slab One\" style=\"font-family: 'Alfa Slab One', cursive;\">\n                                            Alfa Slab<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Amatic SC\" style=\"font-family: 'Amatic SC', cursive;\">\n                                            Amatic<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Carattere\" style=\"font-family: 'Carattere', cursive;\">\n                                            Carattere<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Cookie\" style=\"font-family: 'Cookie', cursive;\">\n                                            Cookie<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Corinthia\" style=\"font-family: 'Corinthia', cursive;\">\n                                            Corinthia<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"FrederickatheGreat\" style=\"font-family: 'FrederickatheGreat', cursive;\">\n                                            Fredericka<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"GlassAntiqua\" style=\"font-family: 'GlassAntiqua', cursive;\">\n                                            Glass Antiqua<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"GreatVibes\" style=\"font-family: 'GreatVibes', cursive;\">\n                                            Great Vibes<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Gruppo\" style=\"font-family: 'Gruppo', cursive;\">\n                                            Gruppo<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Indie Flower\" style=\"font-family: 'Indie Flower', cursive;\">\n                                            Indie Flower<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Lobster Two\" style=\"font-family: 'Lobster Two', cursive;\">\n                                            Lobster<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Poiret One\" style=\"font-family: 'Poiret One', cursive;\">\n                                            Poiret<\/option>\n\t\t\t\t\t\t\t\t\t\t<option value=\"Shadows Into Light Two\" style=\"font-family: 'Shadows Into Light Two', cursive;\">\n                                            Shadows Intro<\/option>\n                                    <\/select>\n                                <\/div>\n                            <\/div>\n                            <div class=\"col-6\">\n                                <div class=\"input-group\">\n                                    <div class=\"input-group-prepend\">\n                                        <div class=\"input-group-text\">\n                                            <i aria-hidden=\"true\" class=\"fas fa-italic\"><\/i>\n                                        <\/div>\n                                    <\/div>\n                                    <select id=\"selectedFontStyle\" name=\"selectedFontStyle\" class=\"custom-select\">\n                                        <option value=\"regular\">Normal<\/option>\n                                        <option value=\"italic\">Cursive<\/option>\n                                        <option value=\"bold\">Bold<\/option>\n                                        <option value=\"underline\">Underlined                                        <\/option>\n                                    <\/select>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div id=\"addCanvasBgControls\" class=\"container text-center\" style=\"display: none;\">\n                        <div class=\"row\">\n                            <div class=\"col-12 text-center\">\n\t\t\t\t\t\t\t\t<div class=\"input-group colorpicker\">\n\t\t\t\t\t\t\t\t\t<div class=\"input-group-prepend\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fas fa-fill-drip\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<input id=\"canvasBgColor\" name=\"canvasBgColor\" type=\"color\" class=\"form-control\">\n\t\t\t\t\t\t\t\t<\/div>\n                                <label for=\"canvasBgColor\">Color<\/label>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\t\t\t\t<div id=\"giphyControls\" style=\"display: none;\">\n                        <form id=\"giphySearchForm\" action=\"\">\n                            <div class=\"searchFormRadio form-group row\">\n                                <div class=\"col-12\">\n                                    <div class=\"custom-control custom-radio custom-control-inline\">\n                                        <input name=\"giphySwitcher\" id=\"giphySwitcher_Sticker\" type=\"radio\"\n                                            class=\"custom-control-input\" value=\"sticker\" checked=\"checked\">\n                                        <label for=\"giphySwitcher_Sticker\" class=\"custom-control-label\">Sticker<\/label>\n                                    <\/div>\n                                    <div class=\"custom-control custom-radio custom-control-inline\">\n                                        <input name=\"giphySwitcher\" id=\"giphySwitcher_Gif\" type=\"radio\"\n                                            class=\"custom-control-input\" value=\"gif\">\n                                        <label for=\"giphySwitcher_Gif\" class=\"custom-control-label\">GIF<\/label>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"searchFormBtn form-group row\">\n                                <div class=\"col-12\">\n                                    <div class=\"input-group\">\n                                        <input id=\"giphySearchQuery\" name=\"giphySearchQuery\" placeholder=\"Happy\"\n                                            type=\"text\" class=\"form-control\">\n                                        <div class=\"input-group-append\">\n                                            <button type=\"submit\" title=\"search\">\n                                                <i class=\"fa fa-search\"><\/i>\n                                            <\/button>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n                        <div id=\"giphyPreviewGrid\"><\/div><img decoding=\"async\"\n                            src=\"https:\/\/ocardoo.com\/wp-content\/plugins\/ocardoo-editor\/includes\/..\/public\/img\/Powered_By_GIPHY.png\"\n                            alt=\"Powered By GIPHY\" width=\"200\" style=\"margin:20px 10px 0px 10px;\">\n                    <\/div>\n                    <button id=\"deleteSelected\" style=\"display: none;\"><i aria-hidden=\"true\" class=\"fas fa-trash\"><\/i>\n                        <span class=\"label\">Remove element<\/span><\/button>\n\n                <\/div>\n            <\/div>\n\n            <!-- For development only -->\n            <div class=\"ui-elements-dev\" style=\"display:none;\">\n                <label>Developer<\/label>\n                <button id=\"loadCanvas\"><i aria-hidden=\"true\" class=\"fas fa-file-upload\"><\/i> <span\n                        class=\"label\">Load<\/span><\/button>\n                <button id=\"clearCanvas\"><i aria-hidden=\"true\" class=\"fas fa-hand-sparkles\"><\/i> <span\n                        class=\"label\">Clear<\/span><\/button>\n                <button id=\"export\"><i aria-hidden=\"true\" class=\"fas fa-download\"><\/i> <span\n                        class=\"label\">Save as image<\/span><\/button>\n                <button id=\"consoleLog\"><i aria-hidden=\"true\" class=\"fas fa-laptop-code\"><\/i> <span\n                        class=\"label\">Log to console<\/span><\/button>\n            <\/div>\n\n\n        <\/div>\n    <\/div>\n    <div style=\"display: none\">\n        <img decoding=\"async\" src=\"\" alt=\"\" id=\"exportImage\" \/>\n    <\/div>\n    <textarea name=\"\" id=\"serialized\" cols=\"60\" rows=\"30\" style=\"display: none;\"><\/textarea>\n\n\t<!-- Modal Text-Input -->\n\t<div class=\"modal fade\" id=\"textInputModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"Text input\" aria-hidden=\"true\">\n\t  <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n\t\t<div class=\"modal-content\">\n\t\t  <div class=\"modal-header\">\n\t\t\t<h5 class=\"modal-title\" id=\"exampleModalLongTitle\">Text input<\/h5>\n\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n\t\t\t  <span aria-hidden=\"true\">\u00d7<\/span>\n\t\t\t<\/button>\n\t\t  <\/div>\n\t\t  <div class=\"modal-body\">\n\t\t\t<textarea id=\"textareaInput\" name=\"textareaInput\" rows=\"5\" cols=\"30\" placeholder=\"Enter your text >HERE<.\" style=\"border-radius: 15px;\"><\/textarea>\n\t\t\t<div id=\"emojis\">\n\t\t\t    <span data-code=\"U+1F60A\" title=\"smiling face with smiling eyes\">\ud83d\ude0a<\/span>\n                <span data-code=\"U+1F643\" title=\"upside-down face\">\ud83d\ude43<\/span>\n                <span data-code=\"U+1F609\" title=\"winking face\">\ud83d\ude09<\/span>\n                <span data-code=\"U+1F970\" title=\"smiling face with hearts\">\ud83e\udd70<\/span>\n                <span data-code=\"U+1F929\" title=\"star-struck\">\ud83e\udd29<\/span>\n                <span data-code=\"U+263A\" title=\"smiling face\">\u263a\ufe0f\ufe0f<\/span>\n                <span data-code=\"U+1F60B\" title=\"face savoring food\">\ud83d\ude0b<\/span>\n                <span data-code=\"U+1F61D\" title=\"squinting face with tongue\">\ud83d\ude1d<\/span>\n                <span data-code=\"U+1F92D\" title=\"face with hand over mouth\">\ud83e\udd2d<\/span>\n                <span data-code=\"U+1F910\" title=\"zipper-mouth face\">\ud83e\udd10<\/span>\n                <span data-code=\"U+1F644\" title=\"face with rolling eyes\">\ud83d\ude44<\/span>\n                <span data-code=\"U+1F62C\" title=\"grimacing face\">\ud83d\ude2c<\/span>\n                <span data-code=\"U+1F924\" title=\"drooling face\">\ud83e\udd24<\/span>\n                <span data-code=\"U+1F922\" title=\"nauseated face\">\ud83e\udd22<\/span>\n                <span data-code=\"U+1F92E\" title=\"face vomiting\">\ud83e\udd2e<\/span>\n                <span data-code=\"U+1F975\" title=\"hot face\">\ud83e\udd75<\/span>\n                <span data-code=\"U+1F973\" title=\"partying face\">\ud83e\udd73<\/span>\n                <span data-code=\"U+1F60E\" title=\"smiling face with sunglasses\">\ud83d\ude0e<\/span>\n                <span data-code=\"U+2639\" title=\"frowning face\">\u2639\ufe0f<\/span>\n                <span data-code=\"U+1F62E\" title=\"face with open mouth\">\ud83d\ude2e<\/span>\n                <span data-code=\"U+1F97A\" title=\"pleading face\">\ud83e\udd7a<\/span>\n\n\n                <span data-code=\"U+1F601\" title=\"grinning face with smiling eyes\">\ud83d\ude01<\/span>\n\t\t\t\t<span data-code=\"U+1F602\" title=\"face with tears of joy\">\ud83d\ude02<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F603\" title=\"smiling face with open mouth\">\ud83d\ude03<\/span> -->\n\t\t\t\t<span data-code=\"U+1F604\" title=\"smiling face with open mouth and smiling eyes\">\ud83d\ude04<\/span>\n\t\t\t\t<span data-code=\"U+1F605\" title=\"smiling face with open mouth and cold sweat\">\ud83d\ude05<\/span>\n\t\t\t\t<span data-code=\"U+1F606\" title=\"smiling face with open mouth and tightly-closed eyes\">\ud83d\ude06<\/span>\n\t\t\t\t<span data-code=\"U+1F609\" title=\"winking face\">\ud83d\ude09<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F60A\" title=\"smiling face with smiling eyes\" >\ud83d\ude0a<\/span> -->\n\t\t\t\t<span data-code=\"U+1F60B\" title=\"face savouring delicious food\">\ud83d\ude0b<\/span>\n\t\t\t\t<span data-code=\"U+1F60C\" title=\"relieved face\">\ud83d\ude0c<\/span>\n\t\t\t\t<span data-code=\"U+1F60D\" title=\"smiling face with heart-shaped eyes\">\ud83d\ude0d<\/span>\n\t\t\t\t<span data-code=\"U+1F60F\" title=\"smirking face\">\ud83d\ude0f<\/span>\n\t\t\t\t<span data-code=\"U+1F612\" title=\"unamused face\">\ud83d\ude12<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F613\" title=\"face with cold sweat\">\ud83d\ude13<\/span> -->\n\t\t\t\t<span data-code=\"U+1F614\" title=\"pensive face\">\ud83d\ude14<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F616\" title=\"confounded face\">\ud83d\ude16<\/span> -->\n\t\t\t\t<span data-code=\"U+1F618\" title=\"face throwing a kiss\">\ud83d\ude18<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F61A\" title=\"kissing face with closed eyes\">\ud83d\ude1a<\/span> -->\n\t\t\t\t<span data-code=\"U+1F61C\" title=\"face with stuck-out tongue and winking eye\">\ud83d\ude1c<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F61D\" title=\"face with stuck-out tongue and tightly-closed eyes\">\ud83d\ude1d<\/span> -->\n\t\t\t\t<span data-code=\"U+1F61E\" title=\"disappointed face\">\ud83d\ude1e<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F620\" title=\"angry face\">\ud83d\ude20<\/span> -->\n\t\t\t\t<span data-code=\"U+1F622\" title=\"crying face\">\ud83d\ude22<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F623\" title=\"persevering face\">\ud83d\ude23<\/span> -->\n\t\t\t\t<span data-code=\"U+1F624\" title=\"face with look of triumph\">\ud83d\ude24<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F625\" title=\"disappointed but relieved face\">\ud83d\ude25<\/span> -->\n\t\t\t\t<span data-code=\"U+1F628\" title=\"fearful face\">\ud83d\ude28<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F629\" title=\"weary face\">\ud83d\ude29<\/span> -->\n\t\t\t\t<!-- <span data-code=\"U+1F62A\" title=\"sleepy face\">\ud83d\ude2a<\/span> -->\n\t\t\t\t<span data-code=\"U+1F62B\" title=\"tired face\">\ud83d\ude2b<\/span>\n\t\t\t\t<span data-code=\"U+1F62D\" title=\"loudly crying face\">\ud83d\ude2d<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F630\" title=\"face with open mouth and cold sweat\">\ud83d\ude30<\/span> -->\n\t\t\t\t<span data-code=\"U+1F631\" title=\"face screaming in fear\">\ud83d\ude31<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F632\" title=\"astonished face\">\ud83d\ude32<\/span> -->\n\t\t\t\t<span data-code=\"U+1F633\" title=\"flushed face\">\ud83d\ude33<\/span>\n\t\t\t\t<span data-code=\"U+1F635\" title=\"dizzy face\">\ud83d\ude35<\/span>\n\t\t\t\t<span data-code=\"U+1F637\" title=\"face with medical mask\">\ud83d\ude37<\/span>\n\t\t\t\t<span data-code=\"U+1F638\" title=\"grinning cat face with smiling eyes\">\ud83d\ude38<\/span>\n\t\t\t\t<span data-code=\"U+1F639\" title=\"cat face with tears of joy\">\ud83d\ude39<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F63A\" title=\"smiling cat face with open mouth\">\ud83d\ude3a<\/span> -->\n\t\t\t\t<span data-code=\"U+1F63B\" title=\"smiling cat face with heart-shaped eyes\">\ud83d\ude3b<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F63C\" title=\"cat face with wry smile\">\ud83d\ude3c<\/span> -->\n\t\t\t\t<!-- <span data-code=\"U+1F63D\" title=\"kissing cat face with closed eyes\">\ud83d\ude3d<\/span> -->\n\t\t\t\t<!-- <span data-code=\"U+1F63E\" title=\"pouting cat face\">\ud83d\ude3e<\/span> -->\n\t\t\t\t<span data-code=\"U+1F63F\" title=\"crying cat face\">\ud83d\ude3f<\/span>\n\t\t\t\t<span data-code=\"U+1F640\" title=\"weary cat face\">\ud83d\ude40<\/span>\n\t\t\t\t<span data-code=\"U+1F645\" title=\"face with no good gesture\">\ud83d\ude45<\/span>\n\t\t\t\t<span data-code=\"U+1F646\" title=\"face with ok gesture\">\ud83d\ude46<\/span>\n\t\t\t\t<span data-code=\"U+1F647\" title=\"person bowing deeply\">\ud83d\ude47<\/span>\n\t\t\t\t<span data-code=\"U+1F648\" title=\"see-no-evil monkey\">\ud83d\ude48<\/span>\n\t\t\t\t<span data-code=\"U+1F649\" title=\"hear-no-evil monkey\">\ud83d\ude49<\/span>\n\t\t\t\t<span data-code=\"U+1F64A\" title=\"speak-no-evil monkey\">\ud83d\ude4a<\/span>\n\t\t\t\t<span data-code=\"U+1F64B\" title=\"happy person raising one hand\">\ud83d\ude4b<\/span>\n\t\t\t\t<span data-code=\"U+1F64C\" title=\"person raising both hands in celebration\">\ud83d\ude4c<\/span>\n\t\t\t\t<!-- <span data-code=\"U+1F64D\" title=\"person frowning\">\ud83d\ude4d<\/span> -->\n\t\t\t\t<!-- <span data-code=\"U+1F64E\" title=\"person with pouting face\">\ud83d\ude4e<\/span> -->\n\t\t\t\t<span data-code=\"U+1F64F\" title=\"person with folded hands\">\ud83d\ude4f<\/span>\n\t\t\t\t<span data-code=\"U+1F680\" title=\"rocket\">\ud83d\ude80<\/span>\n\t\t\t\t<span data-code=\"U+2764\" title=\"red heart\">\u2764\ufe0f<\/span>\n\t\t\t\t<span data-code=\"U+270C\" title=\"victory hand\">\u270c\ufe0f<\/span>\n\t\t\t\t<span data-code=\"U+1F4A9\" title=\"pile of poo\">\ud83d\udca9<\/span>\n\t\t\t\t<span data-code=\"U+1F921\" title=\"clown face\">\ud83e\udd21<\/span>\n\t\t\t\t<span data-code=\"U+1F479\" title=\"ogre\">\ud83d\udc79<\/span>\n\t\t\t\t<span data-code=\"U+1F47A\" title=\"goblin\">\ud83d\udc7a<\/span>\n\t\t\t\t<span data-code=\"U+1F47B\" title=\"ghost\">\ud83d\udc7b<\/span>\n\t\t\t\t<span data-code=\"U+1F47D\" title=\"alien\">\ud83d\udc7d<\/span>\n\t\t\t\t<span data-code=\"U+1F47E\" title=\"alien monster\">\ud83d\udc7e<\/span>\n\t\t\t\t<span data-code=\"U+1F916\" title=\"robot\">\ud83e\udd16<\/span>\n\n\t\t\t\t<span data-code=\"U+1F388\" title=\"balloon\">\ud83c\udf88<\/span>\n\t\t\t\t<span data-code=\"U+1F389\" title=\"party popper\">\ud83c\udf89<\/span>\n\t\t\t\t<span data-code=\"U+1F37B\" title=\"clinking beer mugs\">\ud83c\udf7b<\/span>\n\t\t\t\t<span data-code=\"U+1F37B\" title=\"wrapped present\">\ud83c\udf81<\/span>\n\t\t\t\t<span data-code=\"U+1F37B\" title=\"birthday cake\">\ud83c\udf82<\/span>\n\n                <span data-code=\"U+1F48B\" title=\"kiss mark\">\ud83d\udc8b<\/span>\n                <span data-code=\"U+1F48C\" title=\"love letter\">\ud83d\udc8c<\/span>\n                <span data-code=\"U+1F498\" title=\"heart with arrow\">\ud83d\udc98<\/span>\n                <span data-code=\"U+1F493\" title=\"beating heart\">\ud83d\udc93<\/span>\n                <span data-code=\"U+2763\" title=\"heart exclamation\">\u2763\ufe0f<\/span>\n                <span data-code=\"U+1F494\" title=\"broken heart\">\ud83d\udc94<\/span>\n                <span data-code=\"U+2764\" title=\"heart on fire\">\u2764\ufe0f\ud83d\udd25<\/span>\n                <span data-code=\"U+1F499\" title=\"blue heart\">\ud83d\udc99<\/span>\n                <span data-code=\"U+1F9E1\" title=\"orange heart\">\ud83e\udde1<\/span>\n                <span data-code=\"U+1F49B\" title=\"yellow heart\">\ud83d\udc9b<\/span>\n                <span data-code=\"U+1F49A\" title=\"green heart\">\ud83d\udc9a<\/span>\n                <span data-code=\"U+1F4AF\" title=\"hundred points\">\ud83d\udcaf<\/span>\n                <span data-code=\"U+1F4A3\" title=\"bomb\">\ud83d\udca3<\/span>\n                <span data-code=\"U+1F44B\" title=\"waving hand\">\ud83d\udc4b<\/span>\n                <span data-code=\"U+1F44D\" title=\"thumbs up\">\ud83d\udc4d<\/span>\n                <span data-code=\"U+1F44F\" title=\"clapping hands\">\ud83d\udc4f<\/span>\n                <span data-code=\"U+1F64F\" title=\"folded hands\">\ud83d\ude4f<\/span>\n                <span data-code=\"U+1F4AA\" title=\"flexed biceps\">\ud83d\udcaa<\/span>\n                <span data-code=\"U+1F476\" title=\"baby\">\ud83d\udc76<\/span>\n                <span data-code=\"U+1F9D2\" title=\"child\">\ud83e\uddd2<\/span>\n                <span data-code=\"U+1F466\" title=\"boy\">\ud83d\udc66<\/span>\n                <span data-code=\"U+1F467\" title=\"girl\">\ud83d\udc67<\/span>\n                <span data-code=\"U+1F340\" title=\"four leaf clover\">\ud83c\udf40<\/span>\n                <span data-code=\"U+1F490\" title=\"bouquet\">\ud83d\udc90<\/span>\n                <span data-code=\"U+2708\" title=\"airplane\">\u2708\ufe0f<\/span>\n                <span data-code=\"U+1F697\" title=\"automobile\">\ud83d\ude97<\/span>\n                <span data-code=\"U+231B\" title=\"hourglass done\">\u231b<\/span>\n                <span data-code=\"U+2600\" title=\"sun\">\u2600\ufe0f<\/span>\n                <span data-code=\"U+2B50\" title=\"star\">\u2b50<\/span>\n                <span data-code=\"U+2603\" title=\"snowman\">\u2603\ufe0f<\/span>\n                <span data-code=\"U+1F383\" title=\"jack-o-lantern\">\ud83c\udf83<\/span>\n                <span data-code=\"U+1F384\" title=\"Christmas tree\">\ud83c\udf84<\/span>\n                <span data-code=\"U+1F387\" title=\"sparkler\">\ud83c\udf87<\/span>\n                <span data-code=\"U+1F38A\" title=\"confetti ball\">\ud83c\udf8a<\/span>\n                <span data-code=\"U+1F381\" title=\"wrapped gift\">\ud83c\udf81<\/span>\n                <span data-code=\"U+1F94\" title=\"1st place medal\">\ud83e\udd47<\/span>\n                <span data-code=\"U+1F9FF\" title=\"nazar amulet\">\ud83e\uddff<\/span>\n                <span data-code=\"U+1F393\" title=\"graduation cap\">\ud83c\udf93<\/span>\n                <span data-code=\"U+1F48D\" title=\"ring\">\ud83d\udc8d<\/span>\n                <span data-code=\"U+1F4A1\" title=\"light bulb\">\ud83d\udca1<\/span>\n                <span data-code=\"U+1F4DA\" title=\"books\">\ud83d\udcda<\/span>\n                <span data-code=\"U+1F4B0\" title=\"money bag\">\ud83d\udcb0<\/span>\n                <span data-code=\"U+2753\" title=\"red question mark\">\u2753<\/span>\n                <span data-code=\"U+2757\" title=\"red exclamation mark\">\u2757<\/span>\n                <span data-code=\"U+2714\" title=\"check mark\">\u2714\ufe0f<\/span>\n                <span data-code=\"U+274C\" title=\"cross mark\">\u274c<\/span>\n                <span data-code=\"U+1F3C1\" title=\"chequered flag\">\ud83c\udfc1<\/span>\n\n\t\t\t<\/div>\n\t\t\t<script>\n\t\t\tjQuery( document ).ready(function() {\n\t\t\t\/\/ Handler for .ready() called.\n\t\t\t\tjQuery('#emojis').children('span').click(function(e) {\n\t\t\t\t\t\/\/console.log(\"Clicked\");\n\t\t\t\t\tvar emoji = jQuery(this).text();\n\t\t\t\t\t    if (!emoji || !emoji.length) {\n\t\t\t\t\t\temoji = jQuery(this).find('img').attr('alt');\n\t\t\t\t\t}\n\t\t\t\t\tif (!emoji) { \n\t\t\t\t\t\tconsole.warn('No emoji found!');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t\/\/console.log(emoji);\n\t\t\t\t\tjQuery('#textareaInput').val(jQuery('#textareaInput').val() + emoji);\n\t\t\t\t});\n\t\t\t\tjQuery('#selectedFontModal').on('change', function() {\n\t\t\t\t\tvar fontFamily = document.getElementById('selectedFontModal').value;\n\t\t\t\t\tfontFamily = fontFamily + ', \"Noto Color Emoji\", \"Apple Color Emoji\", \"Segoe UI Emoji\", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort';\n\t\t\t\t\tjQuery('#textareaInput').css(\"fontFamily\", fontFamily);\n\t\t\t\t});\n\n\t\t\t\tjQuery('#selectedFontStyleModal').on('change', function() {\n\t\t\t\t\tvar style = document.getElementById('selectedFontStyleModal').value;\n\t\t\t\t\tswitch (style) {\n\t\t\t\t\t\tcase 'bold':\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontWeight', 'bold');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontStyle', 'normal');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('text-decoration', 'none');\n\t\t\t\t\t\t\tbreak;\n\n\t\t\t\t\t\tcase 'italic':\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontStyle', 'italic');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontWeight', 'normal');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('text-decoration', 'none');\n\t\t\t\t\t\t\tbreak;\n\n\t\t\t\t\t\tcase 'underline':\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('text-decoration', 'underline');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontWeight', 'normal');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontStyle', 'normal');\n\t\t\t\t\t\t\tbreak;\n\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontWeight', 'normal');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('fontStyle', 'normal');\n\t\t\t\t\t\t\tjQuery('#textareaInput').css('text-decoration', 'none');\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t\t<\/script>\n\t\t\t<div id=\"textControlsModal\" class=\"container text-center\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col-6\">\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<div class=\"input-group-prepend\">\n\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-font\"><\/i>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"custom-select\">\n                                <div class=\"selected-value\"><\/div>\n                                    <ul id=\"fontList\">\n                                <\/ul>\n                            <\/div>\n\n\t\t\t\t\t\t\t<select id=\"selectedFontModal\" name=\"selectedFont\" class=\"custom-select\">\n\t\t\t\t\t\t\t\t<option value=\"Caveat\" style=\"font-family: 'Caveat', cursive;\">\n\t\t\t\t\t\t\t\t\tPrint font<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Dancing Script\" style=\"font-family: 'Dancing Script', cursive;\">\n\t\t\t\t\t\t\t\t\tCursive<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Otomanopee One\"\n\t\t\t\t\t\t\t\t\tstyle=\"font-family: 'Otomanopee One', sans-serif;\">\n\t\t\t\t\t\t\t\t\tThick<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Permanent Marker\"\n\t\t\t\t\t\t\t\t\tstyle=\"font-family: 'Permanent Marker', cursive;\">\n\t\t\t\t\t\t\t\t\thighlighter<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Roboto\" style=\"font-family: 'Roboto', sans-serif;\">\n\t\t\t\t\t\t\t\t\tSans-serif<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Zen Loop\" style=\"font-family: 'Zen Loop', cursive;\">\n\t\t\t\t\t\t\t\t\tCurls<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Zen Tokyo Zoo\" style=\"font-family: 'Zen Tokyo Zoo', cursive;\">\n\t\t\t\t\t\t\t\t\tLines<\/option>\n\n\t\t\t\t\t\t\t\t<option value=\"Alfa Slab One\" style=\"font-family: 'Alfa Slab One', cursive;\">\n\t\t\t\t\t\t\t\t\tAlfa Slab<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Amatic SC\" style=\"font-family: 'Amatic SC', cursive;\">\n\t\t\t\t\t\t\t\t\tAmatic<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Carattere\" style=\"font-family: 'Carattere', cursive;\">\n\t\t\t\t\t\t\t\t\tCarattere<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Cookie\" style=\"font-family: 'Cookie', cursive;\">\n\t\t\t\t\t\t\t\t\tCookie<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Corinthia\" style=\"font-family: 'Corinthia', cursive;\">\n\t\t\t\t\t\t\t\t\tCorinthia<\/option>\n\t\t\t\t\t\t\t\t<option value=\"FrederickatheGreat\" style=\"font-family: 'FrederickatheGreat', cursive;\">\n\t\t\t\t\t\t\t\t\tFredericka<\/option>\n\t\t\t\t\t\t\t\t<option value=\"GlassAntiqua\" style=\"font-family: 'GlassAntiqua', cursive;\">\n\t\t\t\t\t\t\t\t\tGlass Antiqua<\/option>\n\t\t\t\t\t\t\t\t<option value=\"GreatVibes\" style=\"font-family: 'GreatVibes', cursive;\">\n\t\t\t\t\t\t\t\t\tGreat Vibes<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Gruppo\" style=\"font-family: 'Gruppo', cursive;\">\n\t\t\t\t\t\t\t\t\tGruppo<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Indie Flower\" style=\"font-family: 'Indie Flower', cursive;\">\n\t\t\t\t\t\t\t\t\tIndie Flower<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Lobster Two\" style=\"font-family: 'Lobster Two', cursive;\">\n\t\t\t\t\t\t\t\t\tLobster<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Poiret One\" style=\"font-family: 'Poiret One', cursive;\">\n\t\t\t\t\t\t\t\t\tPoiret<\/option>\n\t\t\t\t\t\t\t\t<option value=\"Shadows Into Light Two\" style=\"font-family: 'Shadows Into Light Two', cursive;\">\n\t\t\t\t\t\t\t\t\tShadows Intro<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"col-6\">\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<div class=\"input-group-prepend\">\n\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-italic\"><\/i>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<select id=\"selectedFontStyleModal\" name=\"selectedFontStyle\" class=\"custom-select\">\n\t\t\t\t\t\t\t\t<option value=\"regular\">Normal<\/option>\n\t\t\t\t\t\t\t\t<option value=\"italic\">Cursive<\/option>\n\t\t\t\t\t\t\t\t<option value=\"bold\">Bold<\/option>\n\t\t\t\t\t\t\t\t<option value=\"underline\">Underlined\t\t\t\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<p>Please enter your text here, it will be loaded into the greeting card as soon as you click on \"Apply\". By double-clicking on the text, you can edit it again later.<\/p>\n\t\t  <\/div>\n\t\t  <style>\n            #textControlsModal, #textControls {\n                .custom-select {\n                    position: relative;\n                    display: flex;\n                    align-content: center;\n                    justify-content: center;\n                    align-items: center;\n                }\n\n                .custom-select .selected-value {\n                    cursor: pointer;\n                    width: 100%; \/* Passen Sie die Breite nach Bedarf an *\/\n                    font-size:15px;\n                    display: flex;\n                }\n\n                .custom-select ul {\n                    display: none;\n                    width:100%;\n                    position: absolute; \/* Position absolutely within .custom-select *\/\n                    top: 100%; \/* Position below the .custom-select *\/\n                    left: 0;\n                    list-style: none;\n                    padding: 0;\n                    margin: 0;\n                    background-color: #fff;\n                    z-index: 1;\n                    overflow: auto;\n                    \/* make the select max 200px height and scrollable *\/\n                    max-height: 200px;\n                }\n                .input-group-text {\n                    background-color:unset!important\n                }\n                .input-group-prepend {\n                    background-color:#e9ecef;\n                    border-radius: 25px 0 0 25px;\n                }\n\n                .custom-select ul li {\n                    padding: 10px;\n                    cursor: pointer;\n                }\n                .custom-select {\n                    border-radius: 0 25px 25px 0;\n                }\n\n                .custom-select ul li:hover {\n                    background-color: #f0f0f0;\n                }\n            }\n\n            <\/style>\n            <script>\n                jQuery(document).ready(function($) {\n                    \/\/ Function to initialize the custom select for a given container and select element\n                    function initializeCustomSelect(containerId, selectId) {\n                        \/\/ Verstecken Sie das urspr\u00fcngliche <select>-Element\n                        $(\"#\" + containerId + \" #\" + selectId).hide();\n\n                        \/\/ Holen Sie die Optionen aus dem urspr\u00fcnglichen <select>\n                        $(\"#\" + containerId + \" #\" + selectId + \" option\").each(function() {\n                            var optionValue = $(this).val();\n                            var optionText = $(this).text();\n\n                            \/\/ F\u00fcgen Sie die Optionen in die <ul>-Liste ein\n                            $(\"#\" + containerId + \" #fontList\").append('<li data-value=\"' + optionValue + '\" style=\"font-family: ' + optionValue + ';\">' + optionText + '<\/li>');\n                        });\n\n                        \/\/ Klicken Sie auf das ausgew\u00e4hlte Element, um die Liste anzuzeigen\n                        $(\"#\" + containerId + \" .custom-select .selected-value\").click(function() {\n                            $(\"#\" + containerId + \" .custom-select ul\").toggle();\n                        });\n\n                        \/\/ Aktualisieren Sie den ausgew\u00e4hlten Wert, wenn ein <li> geklickt wird\n                        $(\"#\" + containerId + \" .custom-select ul li\").click(function() {\n                            var selectedValue = $(this).data(\"value\");\n                            var selectedFontFamily = $(this).css(\"font-family\");\n                            var selectedText = $(this).text();\n\n                            \/\/ Update the selected value and font-family\n                            $(\"#\" + containerId + \" .selected-value\").text(selectedText).css(\"font-family\", selectedFontFamily);\n\n                            \/\/ Update the value of the hidden select element\n                            $(\"#\" + containerId + \" #\" + selectId).val(selectedValue).change();\n\n                            \/\/ Hide the dropdown\n                            $(\"#\" + containerId + \" .custom-select ul\").hide();\n                        });\n\n                        $(\"#\" + containerId + \" .custom-select #fontList li:first-child\").click();\n                    }\n\n                    \/\/ Initialize the custom select for textControlsModal with the select element selectedFontModal\n                    initializeCustomSelect(\"textControlsModal\", \"selectedFontModal\");\n\n                    \/\/ Initialize the custom select for textControls with the select element selectedFont\n                    initializeCustomSelect(\"textControls\", \"selectedFont\");\n                });\n                <\/script>\n\n\n\t\t  <div class=\"modal-footer\">\n\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\"><i aria-hidden=\"true\" class=\"fas fa-times\"><\/i> Cancel<\/button>\n\t\t\t<button type=\"button\" id=\"addTextareaToFabric\" class=\"btn btn-primary\"><i aria-hidden=\"true\" class=\"fas fa-save\"><\/i> Apply<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\t  <\/div>\n\t<\/div>\n\t<!-- Modal Text-Input - END -->\n\n<\/div>\n\n\n\t\t<div class=\"ocardoo-saveAndClose step5 ocardoo-card-container text-center\">\n\t\t\t<button name=\"submit\" type=\"submit\" id=\"saveAndClose\" class=\"btn btn-primary\" onclick=\"\t\t\tlocalStorage.setItem('redirect', 'false');\t\t\tdocument.getElementById('successModalButton').addEventListener('click', function(e){ e.preventDefault(); window.location.href = 'https:\/\/ocardoo.com'; }); document.getElementById('successModalButton').innerText = 'Close and exit'; document.getElementById('saveCanvas').click();\"><i aria-hidden=\"true\" class=\"fas fa-save\"><\/i> Save & exit<\/button>\n\t\t<\/div>\n\t\t\n<!-- Modal success -->\n<div class=\"modal fade\" id=\"successModal\" tabindex=\"-1\" role=\"dialog\"\n\taria-labelledby=\"successModalTitle\" aria-hidden=\"true\">\n\t<div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n\t\t<div class=\"modal-content\">\n\t\t\t<div class=\"modal-header\">\n\t\t\t\t<h5 class=\"modal-title\" id=\"successModalTitle\">\n\t\t\t\t\tIt's okay<\/h5>\n\t\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n\t\t\t\t\t<span aria-hidden=\"true\">\u00d7<\/span>\n\t\t\t\t<\/button>\n\t\t\t<\/div>\n\t\t\t<div class=\"modal-body\">\n\t\t\t\t<div class=\"container\">\n\t\t\t\t\t<h2>\ud83d\ude09 Congratulations!<\/h2>\n\t\t\t\t\t<p>Everything worked, your entries were successfully processed.<\/p>\n\t\t\t\t\t<div id=\"pushedInfo\" style=\"display:none;\" class=\"alert alert-info\" role=\"alert\">\n\t\t\t\t\t\t<!-- If elements have been pushed to another page. -->\n\t\t\t\t\t\t<strong><i aria-hidden=\"true\" class=\"fas fa-info-circle\"><\/i> Remove element<\/strong><br>\n\t\t\t\t\t\t<p style=\"margin-bottom: 0;\">Since someone else is editing this card at the same time as you, your greeting has been moved to <strong>page <span id=\"pushedToPage\">X<\/span><\/strong> !<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p>We wish you a lot of fun with ocardoo.com<\/p>\n\t\t\t\t\t<p class=\"msg\" style=\"display:none;\"><!-- Only for System outputs --><\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"modal-footer\">\n\t\t\t\t<button id=\"successModalButton\" type=\"button\" class=\"btn btn-secondary\"\n\t\t\t\t\tdata-dismiss=\"modal\">Okay<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<!-- Modal error -->\n<div class=\"modal fade\" id=\"errorModal\" tabindex=\"-1\" role=\"dialog\"\n\taria-labelledby=\"errorModalTitle\" aria-hidden=\"true\">\n\t<div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n\t\t<div class=\"modal-content\">\n\t\t\t<div class=\"modal-header\">\n\t\t\t\t<h5 class=\"modal-title\" id=\"errorModalTitle\">\n\t\t\t\t\tSorry<\/h5>\n\t\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n\t\t\t\t\t<span aria-hidden=\"true\">\u00d7<\/span>\n\t\t\t\t<\/button>\n\t\t\t<\/div>\n\t\t\t<div class=\"modal-body\">\n\t\t\t\t<div class=\"container\">\n\t\t\t\t\t<h2>Something went terribly wrong \ud83d\ude22<\/h2>\n\t\t\t\t\t<p>Unfortunately, something didn't work out.<\/p>\n\t\t\t\t\t<p>Of course, this should not happen, please try again later.<\/p>\n\t\t\t\t\t<p class=\"msg\" style=\"display:none;\"><!-- Only for System outputs --><\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"modal-footer\">\n\t\t\t\t<button id=\"errorModalButton\" type=\"button\" class=\"btn btn-secondary\"\n\t\t\t\t\tdata-dismiss=\"modal\">Okay<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\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>","protected":false},"excerpt":{"rendered":"<p>Textmarker Linien Kringel Schreibschrift Dick Alfa Slab Amatic Carattere Druckschrift Cookie Corinthia Fredericka Glass Antiqua Great Vibes Gruppo Indie Flower Lobster Poiret Shadows Intro Sans Hallo Service Team Bitte trage [&hellip;]<\/p>","protected":false},"author":47,"featured_media":0,"parent":0,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-775","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/pages\/775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/comments?post=775"}],"version-history":[{"count":33,"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/pages\/775\/revisions"}],"predecessor-version":[{"id":19850,"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/pages\/775\/revisions\/19850"}],"wp:attachment":[{"href":"https:\/\/ocardoo.com\/en\/wp-json\/wp\/v2\/media?parent=775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}