Options

Input HTML
Output 

        

      

    

  









  

    
    
Drop your HTML file here

    .html, .htm, .xhtml, .xml, .svg
  








\n\xF0\x9F\x92\x99 Tip\xF0\x9F\x93\x9A Get Bundle \x244.99\n';
    showToast('Sample HTML loaded', 'success');
  };

  // ── Copy / Download ──
  window.copyOutput = function() {
    if (!rawOutput) { showToast('Nothing to copy', 'error'); return; }
    navigator.clipboard.writeText(rawOutput).then(function() {
      showToast('Copied to clipboard!', 'success');
    }).catch(function() {
      // Fallback
      const ta = document.createElement('textarea');
      ta.value = rawOutput;
      ta.style.cssText = 'position:fixed;opacity:0';
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
      showToast('Copied to clipboard!', 'success');
    });
  };

  window.downloadOutput = function() {
    if (!rawOutput) { showToast('Nothing to download', 'error'); return; }
    const blob = new Blob([rawOutput], { type: 'text/html;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'output.html';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast('File downloaded!', 'success');
  };

  // ── Clear ──
  window.clearAll = function() {
    $input.value = '';
    rawOutput = '';
    $output.innerHTML = '';
    $lineNums.textContent = '';
    $statsBar.style.display = 'none';
    showToast('Cleared', 'success');
  };

  // ── Toast ──
  let toastTimer = null;
  function showToast(msg, type) {
    clearTimeout(toastTimer);
    $toast.textContent = msg;
    $toast.className = 'toast ' + (type || '') + ' show';
    toastTimer = setTimeout(function() { $toast.classList.remove('show'); }, 2500);
  }

  // ── File Upload ──
  $fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) readFile(file);
    e.target.value = '';
  });

  function readFile(file) {
    if (file.size > 5 * 1024 * 1024) {
      showToast('File too large (max 5 MB)', 'error');
      return;
    }
    const reader = new FileReader();
    reader.onload = function(e) {
      $input.value = e.target.result;
      showToast('File loaded: ' + file.name, 'success');
    };
    reader.onerror = function() {
      showToast('Error reading file', 'error');
    };
    reader.readAsText(file);
  }

  // ── Drag & Drop ──
  let dragCount = 0;
  document.addEventListener('dragenter', function(e) {
    e.preventDefault();
    dragCount++;
    if (dragCount === 1) $dropZone.classList.add('active');
  });
  document.addEventListener('dragleave', function(e) {
    e.preventDefault();
    dragCount--;
    if (dragCount <= 0) { dragCount = 0; $dropZone.classList.remove('active'); }
  });
  document.addEventListener('dragover', function(e) {
    e.preventDefault();
  });
  document.addEventListener('drop', function(e) {
    e.preventDefault();
    dragCount = 0;
    $dropZone.classList.remove('active');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      const file = files[0];
      const ext = file.name.split('.').pop().toLowerCase();
      if (['html', 'htm', 'xhtml', 'xml', 'svg'].indexOf(ext) !== -1 || file.type.indexOf('html') !== -1 || file.type.indexOf('xml') !== -1) {
        readFile(file);
      } else {
        showToast('Please drop an HTML file', 'error');
      }
    }
  });

  // ── Keyboard Shortcuts ──
  document.addEventListener('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
      if (e.key === 'm' || e.key === 'M') { e.preventDefault(); window.minifyHTML(); }
      if (e.key === 'b' || e.key === 'B') { e.preventDefault(); window.beautifyHTML(); }
    }
  });
})();