\n\t\t\t\t\t\t\t\t\t
<\/p>\n
<\/doctype><\/p>\n
AI Website Builder | Text to WordPress<\/title><br> <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br> <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"><\/p>\n<style>\n .gradient-bg {<br \/> background: linear-gradient(135deg, #6e8efb, #a777e3);<br \/> }<\/p>\n<p> .preview-frame {<br \/> border: 1px solid #e2e8f0;<br \/> border-radius: 0.5rem;<br \/> transform-origin: top left;<br \/> }<\/p>\n<p> .draggable {<br \/> cursor: move;<br \/> transition: all 0.2s ease;<br \/> }<\/p>\n<p> .draggable:hover {<br \/> box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);<br \/> }<\/p>\n<p> .resize-handle {<br \/> width: 10px;<br \/> height: 10px;<br \/> background: #4f46e5;<br \/> position: absolute;<br \/> right: 0;<br \/> bottom: 0;<br \/> cursor: nwse-resize;<br \/> }<\/p>\n<p> .sidebar-item:hover {<br \/> background-color: rgba(79, 70, 229, 0.1);<br \/> }<\/p>\n<p> .animate-pulse {<br \/> animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;<br \/> }<\/p>\n<p> @keyframes pulse {<\/p>\n<p> 0%,<br \/> 100% {<br \/> opacity: 1;<br \/> }<\/p>\n<p> 50% {<br \/> opacity: 0.5;<br \/> }<br \/> }<br \/> <\/style>\n<p><\/p>\n<div class=\"flex flex-col h-screen\">\n <!-- Header --><p><\/p>\n<header class=\"gradient-bg text-white p-4 shadow-md\">\n<div class=\"container mx-auto flex justify-between items-center\">\n<div class=\"flex items-center space-x-2\">\n <i class=\"fas fa-robot text-2xl\"><\/i><p><\/p>\n<h1 class=\"text-xl font-bold\">AI Website Builder<\/h1>\n<\/div>\n<div class=\"flex space-x-4\">\n <button class=\"px-4 py-2 bg-white text-indigo-600 rounded-md font-medium hover:bg-gray-100 transition\"><br> <i class=\"fas fa-save mr-2\"><\/i>Save Project<br> <\/button><br> <button id=\"exportBtn\" class=\"px-4 py-2 bg-indigo-700 text-white rounded-md font-medium hover:bg-indigo-800 transition\"><br> <i class=\"fas fa-wordpress mr-2\"><\/i>Export to WordPress<br> <\/button>\n <\/div>\n<\/div>\n<\/header>\n<p> <!-- Main Content --><\/p>\n<div class=\"flex flex-1 overflow-hidden\">\n <!-- Sidebar --><p><\/p>\n<div class=\"w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto\">\n<div class=\"mb-6\">\n<h2 class=\"text-lg font-semibold text-gray-800 mb-3\">AI Tools<\/h2>\n<div class=\"space-y-2\">\n <button class=\"sidebar-item w-full text-left px-3 py-2 rounded-md text-gray-700 hover:text-indigo-600 transition flex items-center\"><br> <i class=\"fas fa-magic mr-2 text-indigo-500\"><\/i> Generate from Text<br> <\/button><br> <button class=\"sidebar-item w-full text-left px-3 py-2 rounded-md text-gray-700 hover:text-indigo-600 transition flex items-center\"><br> <i class=\"fas fa-image mr-2 text-indigo-500\"><\/i> AI Image Generator<br> <\/button><br> <button class=\"sidebar-item w-full text-left px-3 py-2 rounded-md text-gray-700 hover:text-indigo-600 transition flex items-center\"><br> <i class=\"fas fa-font mr-2 text-indigo-500\"><\/i> Content Rewriter<br> <\/button>\n <\/div>\n<\/div>\n<div class=\"mb-6\">\n<h2 class=\"text-lg font-semibold text-gray-800 mb-3\">Elements<\/h2>\n<div class=\"grid grid-cols-2 gap-2\">\n<div class=\"element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition\">\n <i class=\"fas fa-heading text-indigo-500 mb-1\"><\/i><p><\/p>\n<p class=\"text-xs text-gray-600\">Heading<\/p>\n<\/div>\n<div class=\"element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition\">\n <i class=\"fas fa-paragraph text-indigo-500 mb-1\"><\/i><p><\/p>\n<p class=\"text-xs text-gray-600\">Text<\/p>\n<\/div>\n<div class=\"element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition\">\n <i class=\"fas fa-image text-indigo-500 mb-1\"><\/i><p><\/p>\n<p class=\"text-xs text-gray-600\">Image<\/p>\n<\/div>\n<div class=\"element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition\">\n <i class=\"fas fa-th text-indigo-500 mb-1\"><\/i><p><\/p>\n<p class=\"text-xs text-gray-600\">Grid<\/p>\n<\/div>\n<div class=\"element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition\">\n <i class=\"fas fa-play text-indigo-500 mb-1\"><\/i><p><\/p>\n<p class=\"text-xs text-gray-600\">Video<\/p>\n<\/div>\n<div class=\"element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition\">\n <i class=\"fas fa-form text-indigo-500 mb-1\"><\/i><p><\/p>\n<p class=\"text-xs text-gray-600\">Form<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mb-6\">\n<h2 class=\"text-lg font-semibold text-gray-800 mb-3\">Templates<\/h2>\n<div class=\"space-y-2\">\n<div class=\"template-item p-2 border border-gray-200 rounded-md cursor-pointer hover:border-indigo-300 transition\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/200x120?text=Business\" alt=\"Business Template\" class=\"rounded-md mb-1\"><p><\/p>\n<p class=\"text-sm text-center text-gray-600\">Business<\/p>\n<\/div>\n<div class=\"template-item p-2 border border-gray-200 rounded-md cursor-pointer hover:border-indigo-300 transition\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/200x120?text=Portfolio\" alt=\"Portfolio Template\" class=\"rounded-md mb-1\"><p><\/p>\n<p class=\"text-sm text-center text-gray-600\">Portfolio<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p> <!-- Editor Area --><\/p>\n<div class=\"flex-1 flex flex-col\">\n <!-- Toolbar --><p><\/p>\n<div class=\"bg-white border-b border-gray-200 p-3 flex items-center justify-between\">\n<div class=\"flex space-x-2\">\n <select class=\"border border-gray-300 rounded-md px-3 py-1 text-sm\"><option>Desktop<\/option><option>Tablet<\/option><option>Mobile<\/option><\/select><br> <button class=\"p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md\"><br> <i class=\"fas fa-undo\"><\/i><br> <\/button><br> <button class=\"p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md\"><br> <i class=\"fas fa-redo\"><\/i><br> <\/button>\n <\/div>\n<div class=\"flex space-x-2\">\n <button class=\"p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md\"><br> <i class=\"fas fa-eye\"><\/i><br> <\/button><br> <button class=\"p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md\"><br> <i class=\"fas fa-code\"><\/i><br> <\/button>\n <\/div>\n<\/div>\n<p> <!-- Main Editor --><\/p>\n<div class=\"flex-1 overflow-auto p-6 bg-gray-100\">\n<div class=\"max-w-4xl mx-auto\">\n <!-- AI Input Section --><p><\/p>\n<div class=\"bg-white rounded-lg shadow-md p-6 mb-6\">\n<h2 class=\"text-xl font-semibold mb-4 text-gray-800\">Generate Your Website with AI<\/h2>\n<div class=\"mb-4\">\n <label class=\"block text-gray-700 text-sm font-medium mb-2\">Describe your website<\/label><br> <textarea id=\"aiPrompt\" class=\"w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\" rows=\"4\" placeholder=\"Example: I need a business website for my digital marketing agency. It should have a hero section, services, portfolio, and contact form...\"><\/textarea>\n <\/div>\n<div class=\"flex justify-between items-center\">\n<div class=\"flex space-x-2\">\n <select class=\"border border-gray-300 rounded-md px-3 py-1 text-sm\"><option>Professional<\/option><option>Creative<\/option><option>Minimal<\/option><option>Vibrant<\/option><\/select><br> <select class=\"border border-gray-300 rounded-md px-3 py-1 text-sm\"><option>Light Theme<\/option><option>Dark Theme<\/option><\/select>\n <\/div>\n<p> <button id=\"generateBtn\" class=\"px-4 py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition flex items-center\"><br> <i class=\"fas fa-bolt mr-2\"><\/i> Generate Website<br> <\/button>\n <\/p>\n<\/div>\n<\/div>\n<p> <!-- Preview Area --><\/p>\n<div class=\"relative\">\n<div class=\"flex justify-between items-center mb-3\">\n<h3 class=\"text-lg font-medium text-gray-800\">Website Preview<\/h3>\n<div class=\"text-sm text-gray-500\">Drag and drop to edit<\/div>\n<\/div>\n<div id=\"previewContainer\" class=\"preview-frame bg-white mx-auto w-full\" style=\"height: 600px; overflow: auto;\">\n <!-- Default content or generated content will appear here --><p><\/p>\n<div class=\"text-center py-20 text-gray-400\" id=\"defaultPreviewContent\">\n <i class=\"fas fa-magic text-4xl mb-3\"><\/i><p><\/p>\n<p class=\"text-xl\">Your AI-generated website will appear here<\/p>\n<p class=\"text-sm mt-2\">Describe your website above and click “Generate Website”<\/p>\n<\/div>\n<p> <!-- Sample generated content (hidden by default) --><\/p>\n<div id=\"generatedContent\" class=\"hidden\">\n <!-- Sample Hero Section --><p><\/p>\n<div class=\"draggable relative p-4 border-2 border-dashed border-transparent hover:border-indigo-300\" style=\"min-height: 100px;\">\n<div class=\"gradient-bg text-white p-12 rounded-lg text-center\">\n<h1 class=\"text-4xl font-bold mb-4\">Your Business Name<\/h1>\n<p class=\"text-xl mb-8\">Professional digital marketing solutions tailored for your success<\/p>\n<p> <button class=\"px-6 py-3 bg-white text-indigo-600 rounded-md font-medium hover:bg-gray-100 transition\"><br> Get Started<br> <\/button>\n <\/p>\n<\/div>\n<div class=\"absolute top-0 right-0 p-2 bg-white bg-opacity-80 rounded-bl-md\">\n <button class=\"edit-element p-1 text-gray-600 hover:text-indigo-600\"><br> <i class=\"fas fa-pen\"><\/i><br> <\/button><br> <button class=\"delete-element p-1 text-gray-600 hover:text-red-600\"><br> <i class=\"fas fa-trash\"><\/i><br> <\/button>\n <\/div>\n<\/div>\n<p> <!-- Sample Services Section --><\/p>\n<div class=\"draggable relative p-4 border-2 border-dashed border-transparent hover:border-indigo-300 mt-6\" style=\"min-height: 100px;\">\n<div class=\"container mx-auto px-4\">\n<h2 class=\"text-3xl font-bold text-center mb-12\">Our Services<\/h2>\n<div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n<div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition\">\n<div class=\"text-indigo-600 mb-4\">\n <i class=\"fas fa-bullseye text-3xl\"><\/i>\n <\/div>\n<h3 class=\"text-xl font-semibold mb-3\">SEO Optimization<\/h3>\n<p class=\"text-gray-600\">Improve your search rankings and organic traffic with our proven strategies.<\/p>\n<\/div>\n<div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition\">\n<div class=\"text-indigo-600 mb-4\">\n <i class=\"fas fa-ad text-3xl\"><\/i>\n <\/div>\n<h3 class=\"text-xl font-semibold mb-3\">PPC Advertising<\/h3>\n<p class=\"text-gray-600\">Targeted ads that deliver measurable results and maximize your ROI.<\/p>\n<\/div>\n<div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition\">\n<div class=\"text-indigo-600 mb-4\">\n <i class=\"fas fa-paint-brush text-3xl\"><\/i>\n <\/div>\n<h3 class=\"text-xl font-semibold mb-3\">Content Creation<\/h3>\n<p class=\"text-gray-600\">Engaging content that resonates with your audience and drives conversions.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"absolute top-0 right-0 p-2 bg-white bg-opacity-80 rounded-bl-md\">\n <button class=\"edit-element p-1 text-gray-600 hover:text-indigo-600\"><br> <i class=\"fas fa-pen\"><\/i><br> <\/button><br> <button class=\"delete-element p-1 text-gray-600 hover:text-red-600\"><br> <i class=\"fas fa-trash\"><\/i><br> <\/button>\n <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p> <!-- Properties Panel --><\/p>\n<div class=\"w-72 bg-white border-l border-gray-200 p-4 overflow-y-auto\">\n<h2 class=\"text-lg font-semibold text-gray-800 mb-4\">Properties<\/h2>\n<div id=\"emptyProperties\" class=\"text-center py-10 text-gray-400\">\n <i class=\"fas fa-mouse-pointer text-3xl mb-3\"><\/i><p><\/p>\n<p>Select an element to edit its properties<\/p>\n<\/div>\n<div id=\"elementProperties\" class=\"hidden\">\n<div class=\"mb-6\">\n<h3 class=\"font-medium text-gray-700 mb-3 flex justify-between items-center\">\n <span>Section Settings<\/span><br> <span class=\"text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded\">Hero Section<\/span><br> <\/h3>\n<div class=\"space-y-4\">\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Background<\/label><p><\/p>\n<div class=\"flex space-x-2\">\n <button class=\"w-8 h-8 rounded-full bg-indigo-600 border-2 border-indigo-700\"><\/button><br> <button class=\"w-8 h-8 rounded-full bg-white border border-gray-300\"><\/button><br> <button class=\"w-8 h-8 rounded-full bg-gray-800 border border-gray-900\"><\/button><br> <button class=\"w-8 h-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 border border-gray-300\"><\/button>\n <\/div>\n<\/div>\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Padding<\/label><p><\/p>\n<div class=\"grid grid-cols-4 gap-2\">\n <input type=\"number\" class=\"border border-gray-300 rounded-md px-2 py-1 text-sm\" placeholder=\"Top\" value=\"48\"><br> <input type=\"number\" class=\"border border-gray-300 rounded-md px-2 py-1 text-sm\" placeholder=\"Right\" value=\"16\"><br> <input type=\"number\" class=\"border border-gray-300 rounded-md px-2 py-1 text-sm\" placeholder=\"Bottom\" value=\"48\"><br> <input type=\"number\" class=\"border border-gray-300 rounded-md px-2 py-1 text-sm\" placeholder=\"Left\" value=\"16\">\n <\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mb-6\">\n<h3 class=\"font-medium text-gray-700 mb-3\">Content<\/h3>\n<div class=\"space-y-4\">\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Heading<\/label><br> <input type=\"text\" class=\"w-full border border-gray-300 rounded-md px-3 py-2\" value=\"Your Business Name\">\n <\/div>\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Subheading<\/label><br> <textarea class=\"w-full border border-gray-300 rounded-md px-3 py-2\" rows=\"2\">Professional digital marketing solutions tailored for your success<\/textarea>\n <\/div>\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Button Text<\/label><br> <input type=\"text\" class=\"w-full border border-gray-300 rounded-md px-3 py-2\" value=\"Get Started\">\n <\/div>\n<\/div>\n<\/div>\n<div class=\"mb-6\">\n<h3 class=\"font-medium text-gray-700 mb-3\">Advanced<\/h3>\n<div class=\"space-y-2\">\n <label class=\"inline-flex items-center\"><br> <input type=\"checkbox\" class=\"rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\" checked=\"\"><br> <span class=\"ml-2 text-sm text-gray-700\">Full-width section<\/span><br> <\/label><br> <label class=\"inline-flex items-center\"><br> <input type=\"checkbox\" class=\"rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\"><br> <span class=\"ml-2 text-sm text-gray-700\">Parallax effect<\/span><br> <\/label>\n <\/div>\n<\/div>\n<p> <button class=\"w-full py-2 bg-red-100 text-red-600 rounded-md font-medium hover:bg-red-200 transition\"><br> <i class=\"fas fa-trash mr-2\"><\/i> Delete Section<br> <\/button>\n <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p> <!-- Export Modal --><\/p>\n<div id=\"exportModal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden\">\n<div class=\"bg-white rounded-lg shadow-xl w-full max-w-md\">\n<div class=\"p-6\">\n<div class=\"flex justify-between items-center mb-4\">\n<h3 class=\"text-lg font-semibold text-gray-800\">Export to WordPress<\/h3>\n<p> <button id=\"closeModal\" class=\"text-gray-500 hover:text-gray-700\"><br> <i class=\"fas fa-times\"><\/i><br> <\/button>\n <\/p>\n<\/div>\n<div class=\"space-y-4\">\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">WordPress Site URL<\/label><br> <input type=\"url\" class=\"w-full border border-gray-300 rounded-md px-3 py-2\" placeholder=\"https:\/\/yourwordpresssite.com\">\n <\/div>\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Admin Username<\/label><br> <input type=\"text\" class=\"w-full border border-gray-300 rounded-md px-3 py-2\" placeholder=\"username\">\n <\/div>\n<div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Application Password<\/label><br> <input type=\"password\" class=\"w-full border border-gray-300 rounded-md px-3 py-2\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\"><p><\/p>\n<p class=\"text-xs text-gray-500 mt-1\">Create in WordPress: Users > Your Profile > Application Passwords<\/p>\n<\/div>\n<div class=\"pt-4\">\n <button id=\"confirmExport\" class=\"w-full py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition flex items-center justify-center\"><br> <i class=\"fas fa-cloud-upload-alt mr-2\"><\/i> Export Now<br> <\/button>\n <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p> <!-- Loading Overlay --><\/p>\n<div id=\"loadingOverlay\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden\">\n<div class=\"bg-white rounded-lg shadow-xl p-8 max-w-sm text-center\">\n<div class=\"animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-indigo-500 mx-auto mb-4\"><\/div>\n<h3 class=\"text-lg font-medium text-gray-800 mb-2\">Generating Your Website<\/h3>\n<p class=\"text-gray-600\">Our AI is creating your perfect website. This may take a moment…<\/p>\n<\/div>\n<\/div>\n<p> <script>\n \/\/ DOM Elements\n const generateBtn = document.getElementById('generateBtn');\n const exportBtn = document.getElementById('exportBtn');\n const exportModal = document.getElementById('exportModal');\n const closeModal = document.getElementById('closeModal');\n const confirmExport = document.getElementById('confirmExport');\n const loadingOverlay = document.getElementById('loadingOverlay');\n const defaultPreviewContent = document.getElementById('defaultPreviewContent');\n const generatedContent = document.getElementById('generatedContent');\n const emptyProperties = document.getElementById('emptyProperties');\n const elementProperties = document.getElementById('elementProperties');\n \/\/ Event Listeners\n generateBtn.addEventListener('click', generateWebsite);\n exportBtn.addEventListener('click', showExportModal);\n closeModal.addEventListener('click', hideExportModal);\n confirmExport.addEventListener('click', exportToWordPress);\n \/\/ Make elements draggable (simplified for demo)\n document.querySelectorAll('.draggable').forEach(el => {\n el.addEventListener('mousedown', initDrag);\n });\n \/\/ Show edit buttons on hover\n document.querySelectorAll('.draggable').forEach(el => {\n el.addEventListener('mouseenter', () => {\n el.querySelector('.absolute').classList.remove('hidden');\n });\n el.addEventListener('mouseleave', () => {\n el.querySelector('.absolute').classList.add('hidden');\n });\n });\n \/\/ Functions\n function generateWebsite() {\n const prompt = document.getElementById('aiPrompt').value;\n if (!prompt) {\n alert('Please describe your website first');\n return;\n }\n \/\/ Show loading overlay\n loadingOverlay.classList.remove('hidden');\n \/\/ Simulate AI generation delay\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n \/\/ Hide default content and show generated content\n defaultPreviewContent.classList.add('hidden');\n generatedContent.classList.remove('hidden');\n \/\/ Show properties panel\n emptyProperties.classList.add('hidden');\n elementProperties.classList.remove('hidden');\n \/\/ Update the preview based on the prompt (simplified for demo)\n \/\/ In a real app, this would be an API call to an AI service\n console.log('Generating website based on:', prompt);\n }, 2000);\n }\n\n function showExportModal() {\n exportModal.classList.remove('hidden');\n }\n\n function hideExportModal() {\n exportModal.classList.add('hidden');\n }\n\n function exportToWordPress() {\n \/\/ Show loading overlay\n loadingOverlay.classList.remove('hidden');\n hideExportModal();\n \/\/ Simulate export process\n setTimeout(() => {\n loadingOverlay.classList.add('hidden');\n alert('Website successfully exported to WordPress!');\n }, 1500);\n }\n \/\/ Simplified drag functionality for demo\n function initDrag(e) {\n if (e.target.classList.contains('edit-element') ||\n e.target.classList.contains('delete-element')) {\n return;\n }\n const element = e.currentTarget;\n let pos1 = 0,\n pos2 = 0,\n pos3 = 0,\n pos4 = 0;\n e = e || window.event;\n e.preventDefault();\n \/\/ Get the mouse cursor position at startup\n pos3 = e.clientX;\n pos4 = e.clientY;\n document.onmouseup = closeDragElement;\n document.onmousemove = elementDrag;\n\n function elementDrag(e) {\n e = e || window.event;\n e.preventDefault();\n \/\/ Calculate the new cursor position\n pos1 = pos3 - e.clientX;\n pos2 = pos4 - e.clientY;\n pos3 = e.clientX;\n pos4 = e.clientY;\n \/\/ Set the element's new position\n element.style.top = (element.offsetTop - pos2) + \"px\";\n element.style.left = (element.offsetLeft - pos1) + \"px\";\n }\n\n function closeDragElement() {\n \/\/ Stop moving when mouse button is released\n document.onmouseup = null;\n document.onmousemove = null;\n }\n }\n \/\/ Demo: Click on elements in the sidebar to add them to the preview\n document.querySelectorAll('.element-item').forEach(el => {\n el.addEventListener('click', () => {\n alert('In a full implementation, this would add a new element to the preview area.');\n });\n });\n <\/script><br> <\/p>\n<p> <br><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI Website Builder | Text to WordPress AI Website Builder Save Project Export to WordPress AI Tools Generate from Text […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-581","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"AI Website Builder | Text to WordPress AI Website Builder Save Project Export to WordPress AI Tools Generate from Text […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=581"}],"version-history":[{"count":5,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/581\/revisions"}],"predecessor-version":[{"id":587,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/581\/revisions\/587"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}