اعلان شناور

/*
MIT License

Copyright (c) 2026 TEAM 1111

Permission is hereby granted, free of charge, to any person obtaining a copy of this software to deal in the software without restriction, including the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies, subject to including this notice in all copies or substantial portions.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
*/

<button type="button" id="show">نمایش اعلان</button>
<div id="toasts" role="status" aria-live="polite"></div>

<style>
#show {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: #e2ad62;
  color: #1a120a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#toasts {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  display: grid;
  gap: 0.5rem;
}

.toast {
  padding: 0.75rem 1rem;
  border: 1px solid #3a322a;
  border-radius: 0.625rem;
  background: #1b1612;
  font-size: 0.875rem;
  animation: toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}
</style>

<script>
const STAY_MS = 3500;
const area = document.getElementById('toasts');

function toast(text) {
  const item = document.createElement('div');
  item.className = 'toast';
  item.textContent = text;
  area.append(item);
  setTimeout(() => item.remove(), STAY_MS);
}

document.getElementById('show').addEventListener('click', () => toast('تغییرات ذخیره شد.'));
</script>