<div class="container py-5 d-flex justify-content-center">
  <div class="card bscp-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-3">Choose a color</h5>

      <div class="d-flex flex-wrap gap-2 mb-3" id="bscpSwatches">
        <button type="button" class="bscp-swatch" style="background:#dc3545" data-color="#dc3545" aria-label="Red"></button>
        <button type="button" class="bscp-swatch" style="background:#fd7e14" data-color="#fd7e14" aria-label="Orange"></button>
        <button type="button" class="bscp-swatch" style="background:#ffc107" data-color="#ffc107" aria-label="Yellow"></button>
        <button type="button" class="bscp-swatch" style="background:#198754" data-color="#198754" aria-label="Green"></button>
        <button type="button" class="bscp-swatch" style="background:#0dcaf0" data-color="#0dcaf0" aria-label="Cyan"></button>
        <button type="button" class="bscp-swatch" style="background:#0d6efd" data-color="#0d6efd" aria-label="Blue"></button>
        <button type="button" class="bscp-swatch" style="background:#6f42c1" data-color="#6f42c1" aria-label="Purple"></button>
        <button type="button" class="bscp-swatch" style="background:#212529" data-color="#212529" aria-label="Black"></button>
        <label class="bscp-swatch bscp-custom" title="Custom color">
          <input type="color" id="bscpCustom" class="visually-hidden" value="#dc3545">
        </label>
      </div>

      <div class="bscp-preview mb-3" id="bscpPreview"></div>

      <div class="input-group">
        <span class="input-group-text">HEX</span>
        <input type="text" class="form-control" id="bscpHex" value="#DC3545" readonly>
        <button class="btn btn-outline-secondary" type="button" id="bscpCopy">Copy</button>
      </div>
    </div>
  </div>
</div>

.bscp-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bscp-swatch { width: 36px; height: 36px; border-radius: 8px; border: 2px solid transparent; padding: 0; cursor: pointer; }
.bscp-swatch.active { border-color: #212529; box-shadow: 0 0 0 2px #fff inset; }
.bscp-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); display: flex; align-items: center; justify-content: center; }
.bscp-preview { height: 90px; border-radius: 10px; border: 1px solid #eceef1; transition: background-color .15s ease; }

const swatches = Array.from(document.querySelectorAll('.bscp-swatch[data-color]'));
const customInput = document.getElementById('bscpCustom');
const preview = document.getElementById('bscpPreview');
const hexField = document.getElementById('bscpHex');
const copyBtn = document.getElementById('bscpCopy');

function setColor(hex) {
  const upper = hex.toUpperCase();
  preview.style.backgroundColor = upper;
  hexField.value = upper;
  swatches.forEach(s => s.classList.toggle('active', s.dataset.color.toUpperCase() === upper));
}

swatches.forEach(swatch => {
  swatch.addEventListener('click', () => {
    setColor(swatch.dataset.color);
    customInput.value = swatch.dataset.color;
  });
});

customInput.addEventListener('input', () => {
  setColor(customInput.value);
});

copyBtn.addEventListener('click', async () => {
  const original = copyBtn.textContent;
  try {
    await navigator.clipboard.writeText(hexField.value);
    copyBtn.textContent = 'Copied!';
  } catch (err) {
    // Clipboard API can throw in insecure contexts or without permission;
    // fall back to a visible message instead of a silent failure.
    copyBtn.textContent = 'Failed';
  }
  setTimeout(() => { copyBtn.textContent = original; }, 1500);
});

setColor('#dc3545');