Programmers Playground<\/title>\n <style>\n body {\n background: linear-gradient(45deg, #2e4f94, #ff6b6b);\n color: white;\n font-family: Arial, sans-serif;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n }\n .title {\n text-align: center;\n padding: 20px;\n font-size: 36px;\n text-transform: uppercase;\n letter-spacing: 2px;\n }\n .editor-container {\n display: flex;\n flex: 1;\n align-items: stretch;\n }\n #editor {\n flex: 1;\n background-color: rgba(255, 255, 255, 0.9);\n color: black;\n padding: 20px;\n resize: both;\n overflow: auto;\n height: 70vh; \/* Twice the original height *\/\n }\n #output {\n flex: 1;\n background-color: rgba(255, 255, 255, 0.9);\n color: black;\n padding: 20px;\n resize: both;\n overflow: auto;\n height: 70vh; \/* Twice the original height *\/\n }\n .button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n .button {\n background-color: #ff6b6b;\n color: white;\n padding: 10px 20px;\n border: none;\n cursor: pointer;\n border-radius: 5px;\n margin: 10px;\n font-weight: bold;\n transition: background-color 0.3s;\n }\n .button:hover {\n background-color: #e74c3c;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"title\">Programmers Playground<\/div>\n <div class=\"editor-container\">\n <textarea id=\"editor\" placeholder=\"Enter HTML, CSS, or JavaScript code\"><\/textarea>\n <iframe id=\"output\"><\/iframe>\n <\/div>\n <div class=\"button-container\">\n <button id=\"info-btn\" class=\"button\">Info<\/button>\n <button id=\"download-btn\" class=\"button\">Download as HTML<\/button>\n <\/div>\n <script>\n const editor = document.getElementById('editor');\n const output = document.getElementById('output');\n const downloadBtn = document.getElementById('download-btn');\n const infoBtn = document.getElementById('info-btn');\n editor.addEventListener('input', updateOutput);\n downloadBtn.addEventListener('click', downloadAsHTML);\n infoBtn.addEventListener('click', showInfoMessage);\n function updateOutput() {\n const code = editor.value;\n output.srcdoc = code;\n }\n function downloadAsHTML() {\n const code = editor.value;\n const blob = new Blob([code], { type: 'text\/html' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'code.html';\n a.click();\n URL.revokeObjectURL(url);\n }\n function showInfoMessage() {\n alert(\"Welcome to the Programmers Playground!\\n\\n\" +\n \"1. Enter your HTML, CSS, or JavaScript code in the left editor.\\n\" +\n \"2. The output will be displayed on the right.\\n\" +\n \"3. Use the 'Download as HTML' button to save your code as an HTML file.\");\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Programmers Playground Programmers Playground Info Download as HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/pages\/219"}],"collection":[{"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/comments?post=219"}],"version-history":[{"count":6,"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/pages\/219\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/pages\/219\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/burnbabyburn.fun\/index.php\/wp-json\/wp\/v2\/media?parent=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}