const largeScreenMediaQuery = window.matchMedia("(min-width: 993px)"); // Example: 768px is a common breakpoint
const textarea = document.querySelector('textarea');
const preview = document.getElementById('md_preview');

if (largeScreenMediaQuery.matches) {
  textarea.addEventListener('input', function() {
    fetch('functions/preview.php', { // Create a separate preview.php file for real-time updates
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'markdown=' + encodeURIComponent(this.value),
    })
      .then(response => response.text())
      .then(data => {
        preview.innerHTML = decodeURIComponent(data);
      });
  });
} else {
  preview.style.display = 'none';
}