Kayan Bildirim

<style>
.notification {
  position: fixed;
  bottom: 20px;
  right: -300px;
  width: 280px;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 15px;
  transition: right 0.5s ease;
  z-index: 1000;
}

.notification.show {
  right: 20px;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.notification-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.notification-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
}

.notification-body {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.notification-progress {
  height: 3px;
  background-color: #f1f1f1;
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.notification-progress-bar {
  height: 100%;
  width: 100%;
  background-color: #4CAF50;
  border-radius: 3px;
  transition: width 0.1s linear;
}
</style>

<button id="show-notification" style="padding: 10px 20px;">Bildirimi Göster</button>

<div class="notification" id="notification">
  <div class="notification-header">
    <div class="notification-title">Bildirim Başlığı</div>
    <button class="notification-close">&times;</button>
  </div>
  <div class="notification-body">
    Bu bir bildirim mesajıdır. İstediğiniz içeriği buraya ekleyebilirsiniz.
  </div>
  <div class="notification-progress">
    <div class="notification-progress-bar" id="progress-bar"></div>
  </div>
</div>

<script>
const notification = document.getElementById("notification");
const progressBar = document.getElementById("progress-bar");
const closeBtn = document.querySelector(".notification-close");
const showBtn = document.getElementById("show-notification");

let timer;
let progress = 100;

function showNotification() {
  notification.classList.add("show");
  progress = 100;
  progressBar.style.width = "100%";
  
  timer = setInterval(() => {
    progress -= 1;
    progressBar.style.width = progress + "%";
    
    if (progress <= 0) {
      clearInterval(timer);
      hideNotification();
    }
  }, 30);
}

function hideNotification() {
  notification.classList.remove("show");
  clearInterval(timer);
}

closeBtn.addEventListener("click", hideNotification);
showBtn.addEventListener("click", showNotification);
</script>