<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");  
$title_message = 'popper 연습'; 
include $_SERVER['DOCUMENT_ROOT'] . '/load_header.php';   
?>
<title> <?=$title_message?> </title>
<link rel="stylesheet" href="css/style.css">


<style>
/* 전체 컨테이너 */
.notification-container {
  width: 300px;
  border: 1px solid rgba(80, 108, 158, 0.8);
  background: linear-gradient(135deg, #2e3440, #3b4252);
  color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  animation: slide-in 0.5s ease-in-out;
  z-index: 1000;
}

/* 상단 헤더 */
.notification-header {
  background: rgba(46, 52, 64, 0.9);
  text-align: center;
  font-size: 16px;
  padding: 10px;
  font-weight: bold;
  color: #ffffff;
  border-bottom: 1px solid rgba(80, 108, 158, 0.8);
}

.notification-header i {
  color: #ff4500;
  margin: 0 5px;
}

/* 본문 내용 */
.notification-body {
  display: flex;
  align-items: center;
  padding: 15px;
}

/* 아이콘 섹션 */
.icon-container {
  flex: 1;
  text-align: center;
  animation: bounce 2s infinite;
}

.icon-container i {
  color: #00bcd4;
  font-size: 50px;
}

/* 메시지 섹션 */
.message-container {
  flex: 2;
  padding-left: 10px;
}

.message-container h4 {
  margin: 0;
  font-size: 18px;
  color: #ffcc00;
}

.message-container p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #e0e0e0;
}

/* 애니메이션 */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

</style>
</head>
<body>	

<div class="container mb-5 mt-2">
	<div class="d-flex align-items-center justify-content-center mb-5">
	</div>
	

<div class="notification-container">
  <div class="notification-header">
    <span><i class="fa fa-star text-red905"></i> 알람 내용 확인하세요 <i class="fa fa-star text-red905"></i></span>
  </div>
  <div id="stickyinner" class="notification-body">
    <div class="icon-container">
      <i class="fa fa-envelope fa-4x"></i>
    </div>
    <div class="message-container">
      <h4>새로운 메시지가 도착했습니다!</h4>
      <p>쪽지가 3통 도착했습니다. 확인해보세요!</p>
    </div>
  </div>
</div>

	
</div>


<!-- 페이지로딩 -->
<script>
$(document).ready(function(){	
    var loader = document.getElementById('loadingOverlay');
	if(loader)
		loader.style.display = 'none';

});

  // const stickyinner = document.getElementById('stickyinner');
  
  // const popperInstance = Popper.createPopper(document.body, stickyinner, {
    // placement: 'bottom-end', // 화면 우측 하단 고정
    // modifiers: [
      // {
        // name: 'offset',
        // options: {
          // offset: [0, 10], // 아래로 10px 이동
        // },
      // },
      // {
        // name: 'preventOverflow',
        // options: {
          // boundary: document.body, // 화면 내에서 제한
        // },
      // },
    // ],
  // });
  
  // 일정 시간 후 알림창 닫기
setTimeout(() => {
  const notification = document.querySelector('.notification-container');
  if (notification) {
    notification.style.opacity = '0';
    setTimeout(() => notification.remove(), 500); // 애니메이션 후 제거
  }
}, 5000);

	
</script>

</body>
</html>