{"id":775,"date":"2021-07-13T11:06:00","date_gmt":"2021-07-13T09:06:15","guid":{"rendered":"https:\/\/ocardoo.com\/?page_id=775"},"modified":"2024-02-21T11:50:01","modified_gmt":"2024-02-21T10:50:01","slug":"editor","status":"publish","type":"page","link":"https:\/\/dev.ocardoo.com\/en\/editor\/","title":{"rendered":"Our editor"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"775\" class=\"elementor elementor-775\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4d3bf0f elementor-section-full_width 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\t\t<div class=\"elementor-element elementor-element-d13ca4f elementor-widget elementor-widget-ocardoo-editor\" data-id=\"d13ca4f\" data-element_type=\"widget\" data-widget_type=\"ocardoo-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<span id=\"d13ca4f\"><\/span>                <style>\n                     .swal2-qr-code-denyButton {\n                        display: none!important;\n                     }\n                <\/style>\n                \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>\n<\/div>\n<div class=\"loading-overlay hidden\">\n    <div class=\"loader\"><\/div>\n<\/div>\n\n\n    <script>\n        jQuery(document).ready(function ($) {\n            const mstep = \"false\";\n\n            const containers = {\n                welcome: jQuery('#ocardoo-welcome-container'),\n\t\t\t\tinfo: jQuery('#ocardoo-info-container'),\n\t\t\t\treceiver: jQuery('#ocardoo-receiver-container'),\n                edit: jQuery('#ocardoo-editor-container'),\n                inv: jQuery('#ocardoo-inv-container'),\n                video: jQuery('#ocardoo-video-container')\n            };\n\n            \/\/ Hide all containers by default\n            Object.values(containers).forEach(container => container.hide());\n\n            const buttons = {\n                edit: '#side-edit',\n                inv: '#side-inv',\n                video: '#side-video',\n                receiver: '#side-receiver',\n                info: '#side-info',\n            };\n\n            if (mstep !== false && buttons[mstep] !== undefined) {\n                containers[mstep].show();\n                jQuery(buttons[mstep]).addClass('active-button');\n            } else {\n                \/\/ If mstep is false or undefined, only show infoContainer\n                containers.welcome.show();\n\t\t\t\tcontainers.info.show();\n                jQuery(buttons.info).addClass('active-button');\n            }\n        });\n\n    <\/script>\n\n<div class=\"ocardoo-editor-side-menu\">\n    <div class=\"menu-buttons\">\n        <button id=\"side-info\">\n\t\t\t<span class=\"step-number\" aria-label=\"Step 1\">1<\/span>\n\t\t\t<i class=\"fas fa-info-circle\"><\/i> \n\t\t\t<span class=\"side-btn-txt\">Information<\/span>\n\t\t<\/button>\n\t\t<button id=\"side-receiver\">\n\t\t\t<span class=\"step-number\" aria-label=\"Step 2\">2<\/span>\n\t\t\t<i class=\"fas fa-envelope\"><\/i> \n\t\t\t<span class=\"side-btn-txt\">Recipient\t\t\t<\/span>\n\t\t<\/button>\n        <button id=\"side-edit\">\n\t\t\t<span class=\"step-number\" aria-label=\"Step 3\">3<\/span>\n\t\t\t<i class=\"fas fa-paint-brush\"><\/i>\n\t\t\t<span class=\"side-btn-txt\">Design greeting card<\/span>\n\t\t<\/button>\n                    <!-- Sponsoring (Geld sammeln) -->\n            <button id=\"side-sponsoring\">\n                <span class=\"step-number\" aria-label=\"Step 2\">4<\/span>\n                <i class=\"fas fa-hands-helping\"><\/i>\n                <span class=\"side-btn-txt\">Geld sammeln<\/span>\n            <\/button>\n\t\t\t<button id=\"side-inv\">\n\t\t\t\t<span class=\"step-number\" aria-label=\"Step 4\">5<\/span>\n\t\t\t\t<i class=\"fas fa-users\"><\/i> \n\t\t\t\t<span class=\"side-btn-txt\">Congratulators<\/span>\n\t\t\t<\/button>\n\t\t    <\/div>\n    <div class=\"menu-footer\">\n                        <!-- \/\/ old\n                    <button name=\"submit\" type=\"submit\" id=\"saveAndClose\" class=\"btn btn-primary\" onclick=\"\n                    localStorage.setItem('redirect', 'false');\n                    document.getElementById('successModalButton').addEventListener('click', function(e){ e.preventDefault(); window.location.href = 'https:\/\/dev.ocardoo.com'; }); document.getElementById('successModalButton').innerText = 'Close and exit'; document.getElementById('saveCanvas').click();\">\n                    <i aria-hidden=\"true\" class=\"fas fa-save\"><\/i>\n                    <span class=\"side-btn-txt\">Save & exit<\/span>\n                    <\/button> -->\n                                        <button name=\"submit\" type=\"submit\" id=\"saveAndClose\" class=\"btn btn-primary sidebottomBtns\" onclick=\"\" data-home-url=\"https:\/\/dev.ocardoo.com\" data-product-id=\"5276\" data-owner-id=\"1\" data-cart-url=\"https:\/\/dev.ocardoo.com\/en\/account\/warenkorb\/\">\n                <i aria-hidden=\"true\" class=\"fas fa-save\"><\/i> <span class=\"side-btn-txt\">Save & exit<\/span>\n            <\/button>\n                    <button id=\"side-toggle-menu\">\n\t\t\t<i class=\"fas fa-list\"><\/i> \n\t\t\t<span class=\"side-btn-txt\">Minimize<\/span>\n\t\t<\/button>\n    <\/div>\n<\/div>\n<div class=\"ocardoo-editor-tabs-cont\" style=\"display:flex;\" id=\"ocardoo-editor-tab2\">\n\n    <div class=\"ocardoo-side-menu-trap\" id=\"ocardoo-side-menu-trap\">\n\n    <\/div>\n\n<div class=\"ocardoo-editor-tap\" id=\"ocardoo-editor-tap\">\n<div class=\"ocardoo-wellcome step0 ocardoo-card-container\" id=\"ocardoo-welcome-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    \t<\/div>\n<form id=\"cardInfo\" action=\"\">\n<div class=\"ocardoo-info step1 ocardoo-card-container\" id=\"ocardoo-info-container\">\n    <h2><i class=\"fas fa-info-circle\"><\/i> Information<\/h2>\n    \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=\"Chris\" type=\"text\"\n                        class=\"form-control\" value=\"Chris\" 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 src=\"https:\/\/dev.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=\"lock-participant 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 lock-participant\" value=\"\"\n                        readonly>\n                <\/div>\n            <\/div>\n        <\/div>\n\t\t\n\t\t<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-magic\"><\/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\n\t\t<div class=\"form-group row cover-fields\">\n            <label for=\"title\"\n                class=\"col-md-4 col-form-label\">Eigenes Deckblatt<\/label>\n            <div class=\"col-md-8\">\n                <div class=\"lock-participant input-group disabled\">\n                    <div class=\"input-group-prepend\">\n                        <div class=\"input-group-text\">\n                            <i aria-hidden=\"true\" class=\"fas fa-image\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <input id=\"coverUpload\" name=\"coverUpload\"\n                        placeholder=\"Eigenes Bild hochladen ...\" type=\"file\"\n                        class=\"form-control lock-participant\" value=\"\" accept=\".jpg, .png, .jpeg, .svg\" style=\"padding:5px 10px;\" readonly>\n\t\t\t\t\t\t\t\t\t\t<input id=\"image\" name=\"image\" type=\"hidden\" class=\"form-control\" value=\"\">\n\t\t\t\t\t                <\/div>\n                             <\/div>\n        <\/div>\n\t\t\n\t<!--<\/form>-->\n<\/div>\t\t\n<div class=\"ocardoo-receiver step2 ocardoo-card-container\" id=\"ocardoo-receiver-container\">\n    <h2><i class=\"fas fa-envelope\"><\/i> Recipient<\/h2>\n    <!--<form id=\"cardInfo\">-->\t\t\n\t\t\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=\"lock-participant 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 lock-participant\" value=\"\"\n                        readonly>\n                <\/div>\n            <\/div>\n        <\/div>\n\n\t\t\n        \n        \n\t\t\n\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=\"2025-10-22\">\t\t\t\t<div class=\"lock-participant 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 lock-participant\" value=\"2025-10-22\"\n                    readonly>\n                <\/div>\n\t\t\t\t<div class=\"input-group lock-participant 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 lock-participant\" value=\"12:12\"\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\n        <\/div>\n\n\t\t\n            <!--<\/form>-->\n<\/div>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n\n    <div class=\"ocardoo-sponsoring step3 ocardoo-card-container\" id=\"ocardoo-sponsoring-container\" style=\"display:none;\">\n        <div class=\"collectMoney\">\n\n            <!-- two columns. first column: string with Geld sammeln and Button: Jetzt am Gutschein beteiligen. second column a table with only outline border. within: teilnehmer and Gesammelt -->\n            <div class=\"row\">\n                <div class=\"col-md-4 col-sm-12\">\n                    <h2><i class=\"fas fa-hands-helping\"><\/i> Geld sammeln<\/h2>\n                    <img src=\"https:\/\/dev.ocardoo.com\/wp-content\/uploads\/2024\/03\/WGS-Logo.webp\" style=\"width:100%;max-width:300px;\" alt=\"\">\n                    <p  style=\"margin-top:15px;\">Sammelt Geld f\u00fcr einen Gutschein von Wunschgutschein.de. Ihr k\u00f6nnt euch mit einem beliebigen Betrag beteiligen. Am Ende der Laufzeit wird ein Gutschein \u00fcber die gesammelte Gesamtsumme erstellt und mit eurer Gruppen-Gru\u00dfkarte zusammen versendet!<\/p>\n                    <button class=\"btn btn-primary\" style=\"margin-top:15px;\" disabled>Nach dem Kauf wird die Funktion aktiviert.<\/button>               <\/div>\n                <div class=\"col-md-6 col-sm-12 mt-sm-2\" style=\"display: flex;align-items: center;\">\n                    <table class=\"table table-bordered\" id=\"ocardoo-sponsoring-table\">\n                        <thead>\n                            <tr>\n                                <th scope=\"col\">Teilnehmer<\/th>\n                                <th scope=\"col\">Betrag<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            <tr><td colspan=\"2\">Noch keine Teilnehmer<\/td><\/tr>                        <\/tbody>\n                    <\/table>\n                <\/div>\n                <div class=\"col-md-5 col-sm-0\">\n                <\/div>\n        <\/div>\n        <\/div>\n<\/div>\n    \n<div id=\"ocardoo-editor-container\" class=\"ocardoo-editor step3 ocardoo-card-container\">\n\n\t\t\t<h2><i class=\"fas fa-paint-brush\"><\/i> Design greeting card<\/h2>\n\t\t<div class=\"ui-wrapper\">\n\t\t\n        <div class=\"ui-editor\">\n            <div id=\"loading-overlay-c\" class=\"loading-overlay-c\">\n                <div class=\"loading-container\">\n                <img src=\"https:\/\/dev.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 src=\"https:\/\/dev.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 style=\"margin-left:5px;\">Back<\/span><\/button>\n                <\/div>\n\n                <div class=\"page_number\">\n                    <span class=\"page_number_site_before\">Page<\/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 style=\"margin-right: 5px;\">Next<\/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:\/\/dev.ocardoo.com\/en\/card\/?card=MQ==\" 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 class=\"backplate\" src=\"https:\/\/dev.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\" id=\"start-edit-div\">\n            <div class=\"ui-elements-editor ocardoo-card-container\">\n                <!-- button to start editing-->\n                <button type=\"button\" class=\"elementor-button elementor-size-md btn btn-primary\" id=\"startEditCanvas\"><i class=\"fas fa-paint-brush\"><\/i> Jetzt Gestalten<\/button>\n\t\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\" title=\"Enable free drawing\"><img\n                            src=\"https:\/\/dev.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\" title=\"Add text\"><img\n                            src=\"https:\/\/dev.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\" title=\"Add GIF\"><img\n                            src=\"https:\/\/dev.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\" title=\"Add image\"><img\n                            src=\"https:\/\/dev.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\" title=\"Coloring the background\"><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\">Coloring the background<\/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 platzieren.<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\n                            src=\"https:\/\/dev.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                    <div id=\"ObjectControls\" style=\"display:none;\">\n                        <!-- Copy Button -->\n                        <button id=\"copyObject\" title=\"Copy element\"><i aria-hidden=\"true\" class=\"fas fa-cut\"><\/i> <span\n                                class=\"label\">Copy element<\/span><\/button>\n                        <!-- Paste Button -->\n                        <button id=\"pasteObject\" title=\"Paste element\"><i aria-hidden=\"true\" class=\"fas fa-paste\"><\/i> <span\n                                class=\"label\">Paste element<\/span><\/button>\n                        <!-- Delete Button -->\n                        <button id=\"deleteSelected\" title=\"Remove element\"><i aria-hidden=\"true\" class=\"fas fa-trash\"><\/i> <span\n                                class=\"label\">Remove element<\/span><\/button>\n                    <\/div>\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 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=\"smiling 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=\"green 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=\"Automobiles\">\ud83d\ude97<\/span>\n                <span data-code=\"U+231B\" title=\"hourglass done\">\u231b<\/span>\n                <span data-code=\"U+2600\" title=\"search\">\u2600\ufe0f<\/span>\n                <span data-code=\"U+2B50\" title=\"starling\">\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\">\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=\"Curls\">\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\tvar emoji = jQuery(this).text();\n                    if (!emoji) {\n                        \/\/ check if this has a img element. get the alt attribute\n                        emoji = jQuery(this).children('img').attr('alt');\n                    }\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, .custom-select {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-content: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.custom-select .selected-value {\n\t\t\t\tcursor: pointer;\n\t\t\t\twidth: 100%;\n\t\t\t\tfont-size:15px;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\n\t\t\t.custom-select ul {\n\t\t\t\tdisplay: none;\n\t\t\t\twidth:100%;\n\t\t\t\tposition: absolute; \/* Position absolutely within .custom-select *\/\n\t\t\t\ttop: 100%; \/* Position below the .custom-select *\/\n\t\t\t\tleft: 0;\n\t\t\t\tlist-style: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tz-index: 1;\n\t\t\t\toverflow: auto;\n\t\t\t\t\/* make the select max 200px height and scrollable *\/\n\t\t\t\tmax-height: 200px;\n\t\t\t\tfont-size: 18px;\n\t\t\t}\n\t\t\t.input-group-text {\n\t\t\t\tbackground-color:unset!important\n\t\t\t}\n\t\t\t.input-group-prepend {\n\t\t\t\tbackground-color:#e9ecef;\n\t\t\t\tborder-radius: 25px 0 0 25px;\n\t\t\t}\n\n\t\t\t.custom-select ul li {\n\t\t\t\tpadding: 10px;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t.custom-select {\n\t\t\t\tborder-radius: 0 25px 25px 0;\n\t\t\t}\n\n\t\t\t.custom-select ul li:hover {\n\t\t\t\tbackground-color: #f0f0f0;\n\t\t\t}\n            #draftCardButton {\n\t\t\t\tdisplay:none!important;\n\t\t\t}\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                        $(\"#\" + containerId + \" #\" + selectId).hide();\n                        $(\"#\" + containerId + \" #\" + selectId + \" option\").each(function() {\n                            var optionValue = $(this).val();\n                            var optionText = $(this).text();\n                            $(\"#\" + containerId + \" #fontList\").append('<li data-value=\"' + optionValue + '\" style=\"font-family: ' + optionValue + ';\">' + optionText + '<\/li>');\n                        });\n\t\t\t\t\t\t$(\"#\" + containerId + \" .custom-select .selected-value\").click(function() {\n                            $(\"#\" + containerId + \" .custom-select ul\").toggle();\n\t\t\t\t\t\t\t$(\"#\" + containerId + \" .col-6:first-of-type .input-group\").attr('style','overflow:visible!important');\n                        });\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                            $(\"#\" + containerId + \" .selected-value\").text(selectedText).css(\"font-family\", selectedFontFamily);\n                            if (containerId == \"textControlsModal\") {\n                                $(\"#\" + containerId + \" #\" + selectId).val(selectedValue).change();\n                            }\n\n                            $(\"#\" + containerId + \" .custom-select ul\").hide();\n                        });\n                        $(\"#\" + containerId + \" .custom-select #fontList li:first-child\").click();\n                    }\n                    initializeCustomSelect(\"textControlsModal\", \"selectedFontModal\");\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<div class=\"ocardoo-nextStep ocardoo-card-container text-center\">\n    <button name=\"backStep\" type=\"submit\" id=\"backStep\" class=\"btn btn-primary backStepBtn\" style=\"opacity: 0.2;\" onclick=\"\" disabled><i class=\"fas fa-arrow-circle-left\"><\/i> Zur\u00fcck<\/button>\n    <button name=\"nextStep\" type=\"submit\" id=\"nextStep\" class=\"btn btn-primary\" onclick=\"\">Weiter <i class=\"fas fa-arrow-circle-right\"><\/i><\/button>\n<\/div>\n\n<\/div>\n\n<\/div>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Karte gestalten NULL Zur\u00fcck Seite 1 von Weiter Diese Seite l\u00f6schen Vorschau Speichern Jetzt Gestalten Zeichnen aktivieren Text hinzuf\u00fcgen Launch demo modal GIF hinzuf\u00fcgen Bild hinzuf\u00fcgen Hintergrund f\u00e4rben Pinselst\u00e4rke Farbe [&hellip;]<\/p>","protected":false},"author":47,"featured_media":0,"parent":0,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/pages\/775"}],"collection":[{"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/comments?post=775"}],"version-history":[{"count":33,"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/pages\/775\/revisions"}],"predecessor-version":[{"id":16709,"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/pages\/775\/revisions\/16709"}],"wp:attachment":[{"href":"https:\/\/dev.ocardoo.com\/en\/wp-json\/wp\/v2\/media?parent=775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}