Script Glassmorphism Code Box - XWAPPER

---

Glassmorphism Code Box adalah script untuk pembungkus kode baik CSS, HTML dan JavaScript, dilengkapi dengan menu copy (salin) kode.

Cara Pemasangan

Masuk ke dashboard dan edit tema, cari penutup body </body>, taruh kode javascript tepat diatasnya. Salin kode dibawah ini:

<script>
document.addEventListener("DOMContentLoaded", function() {
  // 1. Cari semua box kode di artikel
  const boxes = document.querySelectorAll('.xwapper-glass-box');

  boxes.forEach(box => {
    // 2. Cek jika box belum punya header (agar tidak double)
    if (!box.querySelector('.glass-header')) {
      // 3. Buat HTML Header secara otomatis
      const headerHTML = `
        <div class="glass-header">
          <div class="glass-dots">
            <span class="dot red"></span>
            <span class="dot yellow"></span>
            <span class="dot green"></span>
          </div>
          <button class="copy-btn" onclick="copyDulu(this)">
            <span class="btn-text">COPY SCRIPT</span>
          </button>
        </div>`;
      
      // 4. Masukkan ke bagian paling atas box
      box.insertAdjacentHTML('afterbegin', headerHTML);
    }
  });
});


function copyDulu(btn) {
  const kotak = btn.closest('.xwapper-glass-box');
  const teks = kotak.querySelector('code').innerText;
  const el = document.createElement('textarea');
  el.value = teks;
  document.body.appendChild(el);
  el.select();
  try {
    document.execCommand('copy');
    const btnText = btn.querySelector('.btn-text');
    btnText.innerText = "BERHASIL!";
    btn.style.background = "#00aaff";
    setTimeout(() => {
      btnText.innerText = "COPY SCRIPT";
      btn.style.background = "#27c93f";
    }, 2000);
  } catch (err) { console.log('Gagal copy'); }
  document.body.removeChild(el);
}
</script>

---

Untuk pemanggilnya, silakan gunakan div class dibawah ini:

<div class="xwapper-glass-box">
  <pre><code>// Tempel script Anda di sini langsung</code></pre>
</div>