Cookie Consent

<div class="cookie-bar" id="cookie">
  <span style="font-size:12px;color:#666">We use cookies to improve your experience.</span>
  <div class="cookie-btns">
    <button class="cookie-accept" id="cookie-ok">Accept</button>
    <button class="cookie-decline" id="cookie-no">Decline</button>
  </div>
</div>

.cookie-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -4px 16px rgba(0,0,0,.04);
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s;
  z-index: 10;
  animation: cookie-in .5s .5s both cubic-bezier(.16,1,.3,1);
}
.cookie-bar.hidden {
  transform: translateY(100%);
  opacity: 0;
}
@keyframes cookie-in {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.cookie-btns { display: flex; gap: 6px; }
.cookie-accept {
  padding: 6px 14px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.cookie-decline {
  padding: 6px 14px;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

const bar = document.getElementById('cookie');
document.getElementById('cookie-ok').addEventListener('click', () => {
  bar.classList.add('hidden');
});
document.getElementById('cookie-no').addEventListener('click', () => {
  bar.classList.add('hidden');
});