Copy Button

<!-- Copy Button — toggle .is-copied for ~1.5s after copy succeeds -->
<button class="nuda-copy" type="button" aria-label="Copy">
  <svg class="nuda-copy__copy" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <rect x="8" y="8" width="13" height="13" rx="2" />
    <path d="M16 8 L16 5 A 2 2 0 0 0 14 3 L5 3 A 2 2 0 0 0 3 5 L3 14 A 2 2 0 0 0 5 16 L8 16" />
  </svg>
  <svg class="nuda-copy__check" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="3"
       stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 12 L10 17 L20 7" />
  </svg>
</button>

/* Copy Button
   Two icons (copy / check) cross-fade on .is-copied.
   Customize: --copy-accent */

.nuda-copy {
  --copy-accent: #e4ff54;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nuda-copy:hover {
  background: rgba(228, 255, 84, 0.08);
  color: var(--copy-accent);
  border-color: rgba(228, 255, 84, 0.3);
}

.nuda-copy svg {
  position: absolute;
  width: 16px;
  height: 16px;
  transition: transform 0.3s, opacity 0.25s;
}

.nuda-copy__check {
  transform: scale(0);
  opacity: 0;
  color: var(--copy-accent);
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}

.nuda-copy.is-copied .nuda-copy__copy  { transform: scale(0); opacity: 0; }
.nuda-copy.is-copied .nuda-copy__check { transform: scale(1); opacity: 1; }

/* Copy Button — copies a target's text, then flashes the check. */

(function () {
  document.querySelectorAll('.nuda-copy').forEach(function (btn) {
    btn.addEventListener('click', function () {
      // Replace this with the text you want to copy.
      var text = btn.dataset.copy ||
                 btn.previousElementSibling?.textContent ||
                 '';

      navigator.clipboard.writeText(text).then(function () {
        btn.classList.add('is-copied');
        setTimeout(function () { btn.classList.remove('is-copied'); }, 1500);
      });
    });
  });
})();