[Back] <!-- <!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Menarik</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #008080;
margin: 0;
padding: 0;
}
.popup {
display: none;
position: absolute;
width: 300px;
background: #C0C0C0;
color: black;
padding: 15px;
border: 2px solid black;
box-shadow: 5px 5px black;
text-align: center;
cursor: grab;
transition: transform 0.3s ease-in-out;
}
.popup-header {
background: navy;
color: white;
padding: 8px;
font-weight: bold;
cursor: move;
}
.popup img {
width: 80px;
height: auto;
margin-bottom: 10px;
}
.popup button {
background: silver;
border: 1px solid black;
padding: 8px 12px;
margin: 5px;
cursor: pointer;
font-size: 14px;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<h1 style="color: white;">Cubalah Tangkap Saya!</h1>
<div class="popup" id="popup1">
<div class="popup-header">Amaran Sistem</div>
<img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" alt="Alert">
<p>Kalau awak hebat, cuba klik saya!</p>
<button onclick="showNext(2)">Klik Saya</button>
</div>
<div class="popup" id="popup2">
<div class="popup-header">Tahniah!</div>
<p>Anda berjaya menangkap popup ini.</p>
<button onclick="resetPopup()">Cuba Lagi</button>
</div>
<audio id="beep" src="https://www.soundjay.com/button/beep-07.wav"></audio>
<script>
function showNext(nextId) {
let currentPopup = document.getElementById('popup' + (nextId - 1));
if (currentPopup) {
currentPopup.style.display = 'none';
}
let nextPopup = document.getElementById('popup' + nextId);
if (nextPopup) {
nextPopup.style.display = 'block';
nextPopup.style.left = "50px";
nextPopup.style.top = "50px";
makeDraggable(nextPopup);
}
document.getElementById('beep').play();
}
function resetPopup() {
document.getElementById('popup2').style.display = 'none';
document.getElementById('popup1').style.display = 'block';
}
function makeDraggable(el) {
let offsetX, offsetY, isDown = false;
el.querySelector('.popup-header').addEventListener('mousedown', function (e) {
isDown = true;
offsetX = e.clientX - el.offsetLeft;
offsetY = e.clientY - el.offsetTop;
});
document.addEventListener('mousemove', function (e) {
if (isDown) {
el.style.left = (e.clientX - offsetX) + 'px';
el.style.top = (e.clientY - offsetY) + 'px';
}
});
document.addEventListener('mouseup', function () {
isDown = false;
});
}
function randomMove(el) {
el.addEventListener('mouseenter', function () {
el.style.left = Math.random() * (window.innerWidth - 300) + 'px';
el.style.top = Math.random() * (window.innerHeight - 150) + 'px';
el.style.animation = 'shake 0.5s';
setTimeout(() => el.style.animation = '', 500);
});
}
document.addEventListener("DOMContentLoaded", function () {
let popup = document.getElementById("popup1");
popup.style.display = "block";
popup.style.left = "50px";
popup.style.top = "50px";
makeDraggable(popup);
randomMove(popup);
});
</script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birthday Surprise!</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #222;
color: white;
margin: 0;
overflow: hidden;
}
.popup {
display: none;
position: fixed;
width: 80%;
max-width: 350px;
background: #FFD700;
color: black;
padding: 15px;
border: 2px solid black;
box-shadow: 5px 5px black;
text-align: center;
font-size: 16px;
z-index: 100;
}
.popup img {
width: 80px;
height: auto;
margin-bottom: 10px;
}
.popup button {
background: red;
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
font-size: 14px;
}
.popup:nth-child(1) { top: 10%; left: 10%; }
.popup:nth-child(2) { top: 10%; right: 10%; }
.popup:nth-child(3) { bottom: 10%; left: 10%; }
.popup:nth-child(4) { bottom: 10%; right: 10%; }
.popup:nth-child(5) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
color: white;
}
#finalPopup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
background: #4CAF50;
color: white;
padding: 20px;
border: 2px solid black;
text-align: center;
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: translate(-50%, -50%) rotate(0deg); }
25% { transform: translate(-48%, -48%) rotate(2deg); }
50% { transform: translate(-50%, -50%) rotate(0deg); }
75% { transform: translate(-52%, -52%) rotate(-2deg); }
100% { transform: translate(-50%, -50%) rotate(0deg); }
}
</style>
</head>
<body>
<h1>Welcome to a special surprise...</h1>
<div class="popup" id="popup1">
<p>Uh-oh! Something went wrong!</p>
<button onclick="showNext(1)">Fix it</button>
</div>
<div class="popup" id="popup2">
<p>Error 404: Fun not found! 😜</p>
<button onclick="showNext(2)">Try again</button>
</div>
<div class="popup" id="popup3">
<p>Wait, are you cheating?! 😆</p>
<button onclick="showNext(3)">Oops!</button>
</div>
<div class="popup" id="popup4">
<p>Almost there...</p>
<button onclick="showNext(4)">Final step</button>
</div>
<div class="popup" id="popup5">
<p>System failure! Self-destruct in 3...2...1...</p>
<button onclick="showFinalPopup()">Help!</button>
</div>
<div id="finalPopup">
<h2>🎉 Happy Birthday! 🎉</h2>
<p>Wishing you a fantastic year ahead! 🎂🥳</p>
<img src="https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif" alt="Birthday">
</div>
<audio id="birthdaySong" src="Besday.mp3"></audio>
<script>
let currentPopup = 1;
document.getElementById('popup1').style.display = 'block';
function showNext(index) {
document.getElementById('popup' + index).style.display = 'none';
let nextPopup = document.getElementById('popup' + (index + 1));
if (nextPopup) nextPopup.style.display = 'block';
}
function showFinalPopup() {
document.querySelectorAll('.popup').forEach(popup => popup.style.display = 'none');
let finalPopup = document.getElementById('finalPopup');
finalPopup.style.display = 'block';
let audio = document.getElementById('birthdaySong');
audio.play();
}
</script>
</body>
</html>