WooaText

KO | EN

About

HTML

CSS

HTML

CSS

JavaScript

📺 Preview ● Ready

`; const frame = document.getElementById('previewFrame'); frame.srcdoc = doc; const status = document.getElementById('previewStatus'); status.textContent = '● Executed'; status.style.color = '#22c55e'; } /* ── Tab Switch (horizontal layout) ── */ function switchTab(lang) { document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); document.querySelectorAll('.editor-tab').forEach(t => t.classList.remove('active')); document.getElementById('tab-' + lang).classList.add('active'); document.querySelectorAll('.editor-tab').forEach(t => { if (t.textContent.trim().toLowerCase().startsWith(lang === 'js' ? 'js' : lang)) t.classList.add('active'); }); setTimeout(() => { cmHtml.refresh(); cmCss.refresh(); cmJs.refresh(); }, 10); } /* ── Layout Toggle ── */ let isVertical = false; function toggleLayout() { isVertical = !isVertical; const main = document.getElementById('editorMain'); const btn = document.getElementById('layoutBtn'); if (isVertical) { main.classList.add('layout-vertical'); btn.textContent = '↕ Horizontal layout'; } else { main.classList.remove('layout-vertical'); btn.textContent = '↔ Vertical layout'; } setTimeout(() => { cmHtml.refresh(); cmCss.refresh(); cmJs.refresh(); }, 50); } /* ── Fullscreen ── */ let isFullscreen = false; function toggleFullscreen() { isFullscreen = !isFullscreen; document.getElementById('previewPane').classList.toggle('fullscreen', isFullscreen); if (isFullscreen) { const closeBtn = document.createElement('button'); closeBtn.id = 'closeFullscreenBtn'; closeBtn.textContent = '✕ Close'; closeBtn.style.cssText = 'position:fixed;top:12px;right:16px;z-index:10001;padding:8px 16px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:0.9rem;'; closeBtn.onclick = toggleFullscreen; document.body.appendChild(closeBtn); } else { const btn = document.getElementById('closeFullscreenBtn'); if (btn) btn.remove(); } } /* ── URL Share ── */ function shareCode() { const data = { h: cmHtml.getValue(), c: cmCss.getValue(), j: cmJs.getValue() }; try { const encoded = btoa(unescape(encodeURIComponent(JSON.stringify(data)))); const url = location.origin + location.pathname + '#' + encoded; navigator.clipboard.writeText(url).then(() => showToast('🔗 URL copied to clipboard!')).catch(() => prompt('Copy this URL:', url)); } catch(e) { alert('Failed to generate share URL'); } } /* ── Restore from URL ── */ function loadFromHash() { const hash = location.hash.slice(1); if (!hash) return false; try { const data = JSON.parse(decodeURIComponent(escape(atob(hash)))); if (data.h !== undefined) cmHtml.setValue(data.h); if (data.c !== undefined) cmCss.setValue(data.c); if (data.j !== undefined) cmJs.setValue(data.j); return true; } catch(e) { return false; } } /* ── Load Template ── */ function loadTemplate(name) { if (!name) return; const t = TEMPLATES[name]; if (!t) return; cmHtml.setValue(t.html); cmCss.setValue(t.css); cmJs.setValue(t.js); runCode(); } /* ── Reset ── */ function clearAll() { if (!confirm('Reset all code?')) return; cmHtml.setValue(''); cmCss.setValue(''); cmJs.setValue(''); document.getElementById('previewFrame').srcdoc = ''; location.hash = ''; } /* ── Toast ── */ function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2800); } /* ── Initial Run ── */ window.addEventListener('load', () => { setEditorHeight(); const loaded = loadFromHash(); if (!loaded) loadTemplate('blank'); else runCode(); }); window.addEventListener('resize', () => { cmHtml.refresh(); cmCss.refresh(); cmJs.refresh(); });

Related Tools