[{"id":"bbd52a3","elType":"container","settings":{"flex_direction":"column","boxed_width":{"unit":"px","size":1299,"sizes":[]},"margin":{"unit":"px","top":"50","right":"0","bottom":"50","left":"0","isLinked":false}},"elements":[{"id":"9225446","elType":"widget","settings":{"shortcode":"[events_listing]"},"elements":[],"widgetType":"shortcode"}],"isInner":false},{"id":"ed532e0","elType":"container","settings":{"boxed_width":{"unit":"px","size":1300,"sizes":[]}},"elements":[{"id":"f65ec77","elType":"widget","settings":{"shortcode":"[recipe_listing]"},"elements":[],"widgetType":"shortcode"}],"isInner":false},{"id":"7ec0378","elType":"container","settings":{"flex_direction":"column"},"elements":[{"id":"f4dbc3f","elType":"widget","settings":{"html":"<div class=\"designer-app\">\n\n    <div class=\"sidebar\">\n        <h3>Tools<\/h3>\n\n        <input type=\"file\" id=\"upload\">\n        \n        <input type=\"text\" id=\"textInput\" placeholder=\"Add text\">\n        <button onclick=\"addText()\">Add Text<\/button>\n\n        <input type=\"color\" id=\"colorPicker\">\n\n        <button onclick=\"deleteObject()\">Delete<\/button>\n\n        <hr>\n\n        <button onclick=\"loadFront()\">Front<\/button>\n        <button onclick=\"loadBack()\">Back<\/button>\n\n        <hr>\n\n        <button onclick=\"saveDesign()\">Save<\/button>\n    <\/div>\n\n    <div class=\"canvas-area\">\n        <canvas id=\"canvas\" width=\"400\" height=\"500\"><\/canvas>\n    <\/div>\n\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fabric.js\/5.2.4\/fabric.min.js\"><\/script>\n\n<script>\nconst canvas = new fabric.Canvas('canvas');\n\nlet frontImage = \"YOUR_FRONT_IMAGE\";\nlet backImage = \"YOUR_BACK_IMAGE\";\n\nloadFront();\n\nfunction setBg(imgUrl){\n    fabric.Image.fromURL(imgUrl, function(img) {\n        img.selectable = false;\n        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {\n            scaleX: canvas.width \/ img.width,\n            scaleY: canvas.height \/ img.height\n        });\n    });\n}\n\nfunction loadFront(){\n    setBg(frontImage);\n}\n\nfunction loadBack(){\n    setBg(backImage);\n}\n\ndocument.getElementById('upload').addEventListener('change', function(e) {\n    const reader = new FileReader();\n    reader.onload = function(event) {\n        fabric.Image.fromURL(event.target.result, function(img) {\n            img.set({ left: 100, top: 100, scaleX: 0.4, scaleY: 0.4 });\n            canvas.add(img);\n            canvas.setActiveObject(img);\n        });\n    };\n    reader.readAsDataURL(e.target.files[0]);\n});\n\nfunction addText() {\n    const textValue = document.getElementById('textInput').value;\n    const color = document.getElementById('colorPicker').value;\n\n    const text = new fabric.Textbox(textValue || \"Your Text\", {\n        left: 80,\n        top: 80,\n        fill: color,\n        fontSize: 24\n    });\n\n    canvas.add(text);\n    canvas.setActiveObject(text);\n}\n\nfunction deleteObject(){\n    const obj = canvas.getActiveObject();\n    if(obj) canvas.remove(obj);\n}\n\nfunction saveDesign(){\n    const data = canvas.toDataURL({ format: 'png' });\n    console.log(data);\n    alert(\"Design Saved (check console)\");\n}\n<\/script>\n\n<style>\n.designer-app {\n    display: flex;\n    font-family: Arial;\n}\n\n.sidebar {\n    width: 220px;\n    background: #0d1b2a;\n    color: #fff;\n    padding: 15px;\n}\n\n.sidebar input,\n.sidebar button {\n    width: 100%;\n    margin-bottom: 10px;\n    padding: 8px;\n    border-radius: 5px;\n}\n\n.sidebar button {\n    background: #1b263b;\n    color: #fff;\n    cursor: pointer;\n}\n\n.canvas-area {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: #f5f5f5;\n}\n\ncanvas {\n    background: #fff;\n    box-shadow: 0 0 10px rgba(0,0,0,0.2);\n}\n<\/style>"},"elements":[],"widgetType":"html"}],"isInner":false}]