html-editor.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Previewer - Final Fixed</title>
  
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- CodeMirror -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">

  <style>
    body {
      background-color: #121212;
      color: #e0e0e0;
      transition: background-color 0.3s, color 0.3s;
    }
    #previewArea {
      background: #ffffff; /* Set white background for preview area */
      min-height: 400px;
      border-radius: 0.5rem;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s;
    }
    #previewIframe {
      width: 100%;
      min-height: 400px;
      border: none;
      border-radius: 0.5rem;
      background: white;
    }
    .CodeMirror {
      height: 400px;
      border-radius: 0.5rem;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      transition: background-color 0.3s, color 0.3s;
    }
    .open-new-window-btn {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .hidden {
      display: none !important;
    }
    .dark-mode {
      background-color: #121212 !important;
      color: #e0e0e0 !important;
    }
    .dark-mode #previewArea {
      background-color: #ffffff; /* Keep preview white even in dark mode */
    }
  </style>
</head>
<body class="container py-4 dark-mode">

  <div class="text-center position-relative mb-4">
    

    <button id="copyButton" class="btn btn-info px-4 py-2 me-2 position-relative">Copy Code
      <!-- Toast inside Copy Button -->
      <div id="copyToast" class="toast position-absolute top-0 start-100 translate-middle-x mt-2" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body bg-success text-white p-2 rounded">
          Copied!
        </div>
      </div>

    </button>



    <button id="clearButton" class="btn btn-danger px-4 py-2 me-2">Clear</button>
		<button id="previewButton" class="btn btn-primary px-4 py-2 me-2">Preview</button>
    <button id="liveSyncButton" class="btn btn-success px-4 py-2 me-2">Enable Live Sync</button>


    <button id="darkModeButton" class="btn btn-light px-4 py-2">Toggle Dark Mode</button>
  </div>

  <div class="row g-4" id="editorPreviewRow">
    <!-- Left Pane -->
    <div id="editorPane" class="col-md-6">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <h5 class="card-title text-center mb-3">Paste your HTML</h5>
          <textarea id="htmlInput"></textarea>
        </div>
      </div>
    </div>

    <!-- Right Pane -->
    <div id="previewPane" class="col-md-6">
      <div class="card shadow-sm h-100 position-relative">
        <div class="card-body">
          <h5 class="card-title text-center mb-3">Preview</h5>
          <button id="toggleNewWindow" class="btn btn-outline-secondary btn-sm open-new-window-btn">Open in New Window</button>
          <div id="previewArea" class="p-0">
            <iframe id="previewIframe"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    let previewWindow = null;
    let liveSync = false;
    let darkMode = true;

    const defaultHTML = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Example with Row/Col</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5">
    <div class="row">
      <div class="col text-center">
        <h1 class="text-primary">Bootstrap 5 Preview</h1>
        <p class="lead">This uses a row and single column!</p>
        <button class="btn btn-success mt-3">Bootstrap Button</button>
      </div>
    </div>
  </div>
</body>
</html>`;

    // Initialize CodeMirror
    const editor = CodeMirror.fromTextArea(document.getElementById('htmlInput'), {
      mode: 'htmlmixed',
      theme: 'dracula',
      lineNumbers: true,
      autofocus: true,
      indentUnit: 2,
      tabSize: 2,
      indentWithTabs: false,
      extraKeys: {
        "Tab": function(cm) {
          if (cm.somethingSelected()) {
            cm.indentSelection("add");
          } else {
            cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");
          }
        },
        "Enter": "newlineAndIndent"
      }
    });

    editor.setValue(defaultHTML);

    function updatePreview() {
      const htmlContent = editor.getValue();
      if (previewWindow && !previewWindow.closed) {
        previewWindow.document.getElementById('previewContent').innerHTML = htmlContent;
      } else {
        const iframe = document.getElementById('previewIframe');
        const doc = iframe.contentDocument || iframe.contentWindow.document;
        doc.open();
        doc.write(htmlContent);
        doc.close();
      }
    }

    document.getElementById('previewButton').addEventListener('click', function() {
      updatePreview();
    });

    document.getElementById('clearButton').addEventListener('click', function() {
      editor.setValue('');
      const iframe = document.getElementById('previewIframe');
      iframe.srcdoc = "";
      if (previewWindow && !previewWindow.closed) {
        previewWindow.close();
      }
    });

    document.getElementById('liveSyncButton').addEventListener('click', function() {
      liveSync = !liveSync;
      this.textContent = liveSync ? 'Disable Live Sync' : 'Enable Live Sync';
      this.classList.toggle('btn-success', !liveSync);
      this.classList.toggle('btn-warning', liveSync);
      if (liveSync) updatePreview();
    });

    editor.on('change', function() {
      if (liveSync) {
        updatePreview();
      }
    });

    document.getElementById('darkModeButton').addEventListener('click', function() {
      darkMode = !darkMode;
      document.body.classList.toggle('dark-mode');
      editor.setOption('theme', darkMode ? 'dracula' : 'eclipse');
    });


    // Copy Code Button with Toast
    document.getElementById('copyButton').addEventListener('click', function() {
      const codeContent = editor.getValue();
      navigator.clipboard.writeText(codeContent).then(function() {
        const toastElement = document.getElementById('copyToast');
        const toast = new bootstrap.Toast(toastElement, { delay: 1500 }); // Toast auto hide after 1.5s
        toast.show();
      }, function(err) {
        alert('Failed to copy text.');
      });
    });



    document.getElementById('toggleNewWindow').addEventListener('click', function() {
      const htmlContent = editor.getValue();

      if (!previewWindow || previewWindow.closed) {
        previewWindow = window.open('', '_blank', 'width=800,height=600');

        previewWindow.document.write(`
          <!DOCTYPE html>
          <html>
          <head>
            <title>Preview Window</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
          </head>
          <body class="container py-4">
            <div class="text-center mb-4">
              <button onclick="window.close()" class="btn btn-danger px-4 py-2">Close Preview</button>
            </div>
            <div id="previewContent" class="border p-4 rounded" style="background: #fff; min-height: 400px;">
              ${htmlContent}
            </div>
          </body>
          </html>
        `);
        previewWindow.document.close();

        document.getElementById('previewPane').classList.add('hidden');
        document.getElementById('editorPane').classList.remove('col-md-6');
        document.getElementById('editorPane').classList.add('col-md-12');

        let timer = setInterval(function() {
          if (previewWindow.closed) {
            clearInterval(timer);
            document.getElementById('previewPane').classList.remove('hidden');
            document.getElementById('editorPane').classList.remove('col-md-12');
            document.getElementById('editorPane').classList.add('col-md-6');
          }
        }, 500);
      } else {
        previewWindow.focus();
      }
    });

    // Initial load into iframe
    window.addEventListener('DOMContentLoaded', function() {
      updatePreview();
    });

  </script>

</body>
<footer style="text-align: center; font-size: 0.9em; margin-top: 2em; padding: 1em 0; color: #555;">
  <p>
    <a href="https://tools.itabu.xyz/" style="margin-right: 1em;">Home</a>
    <a href="terms.html" target="_blank" style="margin-right: 1em;">Terms of Service</a>
    <a href="privacy.html" target="_blank">Privacy Policy</a>
  </p>
  <p style="margin-top: 0.5em;">© 2025 i-Tabu Tool</p>
</footer>
</html>