[Back] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday!</title>
<style>
body {
font-family: Tahoma, sans-serif;
text-align: center;
background-image: url('keje/2.jpeg');
background-size: cover; /* Ensures the image covers the entire screen */
background-position: center center; /* Centers the image horizontally and vertically */
background-repeat: no-repeat; /* Prevents the image from repeating */
margin: 0;
padding: 0;
height: 100vh; /* Ensures the body takes up the full height of the viewport */
}
.popup {
display: none;
position: fixed;
width: 90%; /* Adjust width for smaller screens */
max-width: 300px;
height: auto;
background: #C0C0C0;
color: black;
padding: 10px;
border: 2px solid black;
box-shadow: 5px 5px black;
font-size: 14px;
text-align: center;
}
.popup-header {
background: navy;
color: white;
padding: 8px;
text-align: left;
font-weight: bold;
}
.popup-content {
padding: 10px;
}
.popup img {
width: 60%; /* Make images scale properly */
max-width: 100px;
height: auto;
margin-bottom: 10px;
}
.popup button {
background: silver;
border: 1px solid black;
padding: 8px 12px;
margin: 5px;
cursor: pointer;
font-size: 14px;
}
.popup:nth-child(1) { top: 10%; left: 5%; }
.popup:nth-child(2) { top: 10%; right: 5%; }
.popup:nth-child(3) { bottom: 10%; left: 5%; }
.popup:nth-child(4) { bottom: 10%; right: 5%; }
.popup:nth-child(5) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #C0C0C0;
}
#finalPopup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
background: #C0C0C0;
color: black;
padding: 20px;
border: 2px solid black;
box-shadow: 5px 5px black;
text-align: center;
}
/* Mobile View: Adjust popups for smaller screens */
@media screen and (max-width: 600px) {
.popup {
width: 90%;
max-width: 280px;
font-size: 12px;
padding: 8px;
}
.popup img {
width: 50%;
max-width: 80px;
}
.popup button {
padding: 6px 10px;
font-size: 12px;
}
#finalPopup {
width: 90%;
max-width: 350px;
padding: 15px;
}
}
</style>
</head>
<body>
<h1 style="color: white;"></h1>
<div class="popup">
<div class="popup-header">System Alert</div>
<div class="popup-content">
<img src="keje/6.jpeg" alt="Alert">
<p>Kalau awak hebat cuba tangkap saya ;)</p>
<button onclick="showNext(1)">Tak Mahu</button>
<button onclick="showNext(1)">Tangkap</button>
</div>
</div>
<div class="popup">
<div class="popup-header">System Alert</div>
<div class="popup-content">
<img src="keje/3.jpeg" alt="Warning">
<p>Tak kira tangkap juga 😜, tangkap saya 🤣</p>
<button onclick="showNext(2)">OK</button>
<button onclick="showNext(2)">Click Me</button>
</div>
</div>
<div class="popup">
<div class="popup-header">System Alert</div>
<div class="popup-content">
<img src="keje/1.jpeg" alt="Caution">
<p>Tak dapat ke tu, LEMAH 👎</p>
<button onclick="showNext(3)">OK</button>
<button onclick="showNext(3)">Click Me</button>
</div>
</div>
<div class="popup">
<div class="popup-header">System Alert</div>
<div class="popup-content">
<img src="keje/8.jpeg" alt="Happy Birthday">
<p>Come onnnnnn cepat sikit cantik!</p>
<button onclick="showNext(4)">OK</button>
<button onclick="showNext(4)">Click Me</button>
</div>
</div>
<div class="popup" id="finalPopup">
<div class="popup-header">Final Alert</div>
<div class="popup-content">
<img src="keje/7.jpeg" alt="Notice">
<p>Aduhh sikit je lagi yangg! 🤏</p>
<button onclick="playSong()">OK</button>
<button onclick="playSong()">Click Me</button>
</div>
</div>
<audio id="birthdaySong" src="Besday.mp3"></audio>
<script>
let currentPopup = 0;
document.querySelectorAll('.popup')[0].style.display = 'block';
function showNext(index) {
document.querySelectorAll('.popup')[index - 1].style.display = 'none';
if (index < 5) {
document.querySelectorAll('.popup')[index].style.display = 'block';
}
}
function playSong() {
let audio = document.getElementById('birthdaySong');
let finalPopup = document.getElementById('finalPopup');
// Start playing the song
audio.play().then(() => {
console.log("Audio started playing");
}).catch(error => {
console.log("Audio play blocked:", error);
});
// Show the birthday wish in the middle of the screen
finalPopup.innerHTML = `
<div class="popup-header">🎉 Happy Birthday Sayangku! 🎉</div>
<div class="popup-content">
<img src="keje/4.jpeg" alt="Birthday Celebration">
<p>Happy Birthday, my love! Your present, beauty, and love make my world a better place. I love you more than words can say. Wishing you the happiest of birthdays, filled with all the joy and love you deserve. ❤️</p>
</div>
`;
finalPopup.style.display = 'block';
}
</script>
</body>
</html>