Page / Layout / UI / JS / CSS / Utility tools

Paste any page code, or load this page, then preview, post, and share.

Code Editor

Live Preview

GoldGame22 (iframe view)

Feed (feed.html)

Generated HTML Output

\n'); break; case 'insertStyle': this.insertAtCursor('\n'); break; case 'insertImg': this.insertAtCursor('

\n'); break; case 'insertIframe': this.insertAtCursor('\n'); break; case 'insertButton': this.insertAtCursor('\n'); break; case 'insertLinkCSS': this.insertAtCursor('\n'); break; case 'insertMeta': this.insertAtCursor('\n'); break; // Layout case 'addFlex': this.insertAtCursor('

Item 1

Item 2

\n'); break; case 'addGrid': this.insertAtCursor('

Cell 1

Cell 2

\n'); break; case 'add2Col': this.insertAtCursor('

Left

Right

\n'); break; case 'add3Col': this.insertAtCursor('

Col 1

Col 2

Col 3

\n'); break; case 'addHeaderFooter': this.insertAtCursor('

Header

Content...

\n\n'); break; // UI Components case 'addModal': this.insertAtCursor('\n'); break; case 'addTabs': this.insertAtCursor('

\n \n \n

Content 1

\n \n

\n\n'); break; case 'addAccordion': this.insertAtCursor('

\n \n \n

\n\n'); break; case 'addDropdown': this.insertAtCursor('\n'); break; case 'addNavbar': this.insertAtCursor('\n'); break; case 'addCard': this.insertAtCursor('

Card Title

Card content...

\n'); break; case 'addTable': this.insertAtCursor('\n \n \n

Header 1	Header 2
Row 1	Data

\n'); break; // JS Snippets case 'addAlert': this.insertAtCursor('\n'); break; case 'addConsole': this.insertAtCursor('\n'); break; case 'addFetch': this.insertAtCursor('\n'); break; case 'addListener': this.insertAtCursor('\n'); break; case 'addToggle': this.insertAtCursor('\n

Toggle me

\n'); break; case 'addSmoothScroll': this.insertAtCursor('Scroll to target\n

Target

\n\n'); break; case 'addDarkMode': this.insertAtCursor('\n\n'); break; // CSS Snippets case 'addGlow': this.insertAtCursor('\n'); break; case 'addGlass': this.insertAtCursor('\n'); break; case 'addNeon': this.insertAtCursor('\n'); break; case 'addHover': this.insertAtCursor('\n'); break; case 'addButtonStyles': this.insertAtCursor('\n'); break; case 'addGradient': this.insertAtCursor('\n'); break; // Utility placeholders case 'beautifyHTML': case 'beautifyCSS': case 'beautifyJS': case 'minifyHTML': case 'minifyCSS': case 'minifyJS': alert('Utility "' + action + '" is a placeholder. Wire in a beautifier/minifier later.'); break; } }, applyToPreview() { const html = this.codeEditor.value; const doc = this.previewFrame.contentWindow.document; doc.open(); doc.write(html); doc.close(); }, loadSelfHTML() { fetch(window.location.href) .then(r => r.text()) .then(t => { this.codeEditor.value = t; this.applyToPreview(); }) .catch(err => { console.error('Cannot load self HTML:', err); alert('Loading this page HTML may not work from file://. Paste code manually if needed.'); }); }, generateHTML() { this.generatedHTML = this.codeEditor.value; alert('HTML output generated. Use Copy or Show Modal.'); }, copyHTML() { const text = this.codeEditor.value; navigator.clipboard.writeText(text).then(() => { alert('HTML copied to clipboard. Paste into a new file in cPanel.'); }).catch(err => { console.error('Clipboard error:', err); alert('Clipboard copy failed. Use the modal and Select All instead.'); }); }, showModal() { this.modalTextarea.value = this.codeEditor.value; this.modalOverlay.style.display = 'flex'; }, hideModal() { this.modalOverlay.style.display = 'none'; }, postPreviewToFeed() { const html = this.codeEditor.value; const title = this.extractTitle(html) || 'Editor Post'; this.sendToFeed({ source: 'editor', title: title, html: html }); }, autopostGoldGame() { const src = this.goldSource.value; if (!src.trim()) { alert('Paste GoldGame22 HTML into the hidden textarea first.'); return; } // Simple strategy: treat each

...

as a post. // If that class doesn�t exist, we�ll just post the whole HTML once. const posts = []; const regex = /]*class=["']([^"']*gold[^"']*)["'][^>]*>[\s\S]*?<\/div>/gi; let match; while ((match = regex.exec(src)) !== null) { posts.push(match[0]); } if (posts.length === 0) { posts.push(src); } posts.forEach((block, idx) => { const title = this.extractTitle(block) || ('GoldGame22 Post ' + (idx + 1)); this.sendToFeed({ source: 'goldgame22', title: title, html: block }); }); alert('GoldGame22 autopost queued for ' + posts.length + ' item(s).'); }, extractTitle(html) { const m = html.match(/]*>(.*?)<\/h1>/i) || html.match(/]*>(.*?)<\/h2>/i) || html.match(/]*>(.*?)<\/title>/i); if (m && m[1]) { return m[1].replace(/<[^>]*>/g, '').trim(); } return ''; }, sendToFeed(payload) { const formData = new FormData(); formData.append('source', payload.source); formData.append('title', payload.title); formData.append('html', payload.html); fetch('save_feed.php', { method: 'POST', body: formData }).then(r => r.text()) .then(t => { console.log('Feed save result:', t); this.reloadFeed(); }) .catch(err => { console.error('Feed save error:', err); alert('Error saving to feed.'); }); }, reloadFeed() { this.feedFrame.src = 'feed.html?ts=' + Date.now(); }, sharePreview() { // You can change this to a real URL of the page you want to share const url = prompt('Enter URL to share for Preview (e.g. https://worldrealm.org/):', window.location.href); if (!url) return; const shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url); window.open(shareUrl, '_blank', 'width=600,height=500'); }, shareGoldGame() { const url = prompt('Enter URL of GoldGame22 (e.g. https://worldrealm.org/goldgame22.html):', 'https://worldrealm.org/goldgame22.html'); if (!url) return; const shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url); window.open(shareUrl, '_blank', 'width=600,height=500'); } }; window.addEventListener('load', () => EditorApp.init());