HTML
CSS
JS

      

        

        
      

    

    

    

      
    

  


  

`,
        css: `body {
  margin:0; padding:0; height:100vh;
  background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
  background-size:400% 400%; animation:gradientFlow 15s ease infinite;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; color:#fff; font-family:'Segoe UI',sans-serif;
  text-align:center;
}
.hero h1 { font-size:3rem; margin-bottom:1rem; animation:fadeIn 2s ease; }
.hero button { padding:.75rem 1.5rem; font-size:1rem;
  background:rgba(0,0,0,0.2); border:2px solid #fff; color:#fff;
  border-radius:8px; cursor:pointer; transition:all .3s ease; }
.hero button:hover { background:#fff; color:#333; }
@keyframes gradientFlow {
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}
@keyframes fadeIn {
  from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}
}`,
        js: `function changeTitle() {
  const title = document.getElementById("mainTitle");
  title.innerText = "🎉 You Clicked the Button!";
  title.style.color = "#ffeb3b";
  title.style.textShadow = "0 0 10px #fff000";
}`
      };

      const voidTags = ['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr'];
      const pairs    = { '(':')','[':']','{':'}','"':'"',"'" : "'" };

      let currentTab = 'html';

      function escapeHTML(str) {
        return str.replace(/&/g,'&').replace(//g,'>');
      }

      function syntaxHighlight(code, lang) {
        let html = escapeHTML(code).replace(/\n/g,'
\u200B') + '\u200B';
        if (lang==='html') {
          html = html
            .replace(/(<!--[\s\S]*?-->)/g,'$1')
            .replace(/(<\/?)\s*([A-Za-z0-9-]+)([^<>]*?)(\s*\/??>)/g,
              (_,o,tag,a,cl)=>`${o}${tag}`+
                              (a.replace(/([A-Za-z-]+)=(".*?"|'.*?')/g,
                                (m,k,v)=>` ${k}=${v}`
                              ))+
                              `${cl}`);
        }
        if (lang==='css') {
          html = html
            .replace(/\/\*[\s\S]*?\*\//g,'$&')
            .replace(/("[^"]*"|'[^']*')/g,'$1')
            .replace(/([A-Za-z-]+)(?=\s*:)/g,'$1');
        }
        if (lang==='js') {
          html = html
            .replace(/(\/\/.*)/g,'$1')
            .replace(/("[^"]*"|'[^']*')/g,'$1')
            .replace(/\b(function|return|if|else|let|const|var|class|new|true|false|null)\b/g,
                     '$1');
        }
        return html;
      }

      function updateLineNumbers() {
        lineNumbers.textContent = editor.value.split('\n').map((_,i)=>i+1).join('\n');
      }

      function syncScroll() {
        highlight.scrollTop   = editor.scrollTop;
        highlight.scrollLeft  = editor.scrollLeft;
        lineNumbers.scrollTop = editor.scrollTop;
      }

      function updatePreview() {
        const src = buffers.html
          .replace('', ``)
          .replace('', `