mirror of
https://github.com/kingomarnajjar/betondeez.git
synced 2026-07-25 22:27:30 +10:00
115 lines
5.3 KiB
HTML
115 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BetOnDeezNuts</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background-image: url('https://wallpapercave.com/wp/wp3087084.jpg'); /* Background image */
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
font-family: 'Courier New', Courier, monospace; /* Monospace font */
|
|
}
|
|
.option-box {
|
|
transition: box-shadow 0.3s, border-color 0.3s;
|
|
border: 2px solid transparent;
|
|
}
|
|
.selected {
|
|
box-shadow: 0 0 15px 5px #ffc107; /* Bright highlight */
|
|
border-color: black; /* Black border */
|
|
background-color: #ffff99; /* Light yellow background for more visibility */
|
|
}
|
|
.confetti {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
z-index: 999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-200 dark:bg-gray-800 flex items-center justify-center min-h-screen">
|
|
<div class="confetti" id="celebration">
|
|
🎉🎊🎉🎊🎉🎊 Hooray! 🎉🎊🎉🎊🎉🎊
|
|
</div>
|
|
<div class="container mx-auto max-w-6xl px-12">
|
|
<h1 class="text-2xl font-bold text-center text-black mb-4">Bet on the Twin's Cup Size</h1>
|
|
|
|
<!-- Video Embed Section -->
|
|
<div class="rounded-lg shadow-lg bg-white mx-auto mb-4 p-4">
|
|
<iframe width="100%" height="315" src="https://www.youtube.com/embed/VT5OrFgfGcM?autoplay=1&loop=1&playlist=VT5OrFgfGcM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap justify-center gap-3">
|
|
<!-- Option C Cup -->
|
|
<label class="cursor-pointer option-box" onclick="selectOption(this)">
|
|
<input type="radio" class="peer sr-only" name="bet" value="C" />
|
|
<div class="w-72 max-w-xl rounded-md bg-white dark:bg-gray-900 p-5 text-gray-600 dark:text-gray-300">
|
|
<div class="flex flex-col items-center">
|
|
<p class="text-lg font-bold">C Cup</p>
|
|
<p class="text-sm">Bet on size C</p>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Option D Cup -->
|
|
<label class="cursor-pointer option-box" onclick="selectOption(this)">
|
|
<input type="radio" class="peer sr-only" name="bet" value="D" />
|
|
<div class="w-72 max-w-xl rounded-md bg-white dark:bg-gray-900 p-5 text-gray-600 dark:text-gray-300">
|
|
<div class="flex flex-col items-center">
|
|
<p class="text-lg font-bold">D Cup</p>
|
|
<p class="text-sm">Bet on size D</p>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Bet Amount Input -->
|
|
<div class="flex flex-col items-center mt-4">
|
|
<div class="w-72 max-w-xl px-5 py-3">
|
|
<input type="number" placeholder="Enter your bet amount ($)" class="w-full p-3 rounded-md text-gray-800 dark:text-gray-300 bg-white dark:bg-gray-900 border-2 border-gray-500 focus:border-blue-400 focus:outline-none transition-all">
|
|
</div>
|
|
|
|
<!-- Betting Buttons -->
|
|
<div class="flex flex-wrap justify-center gap-6 mt-4">
|
|
<a class="relative" href="#" onclick="celebrate()">
|
|
<span class="absolute top-0 left-0 mt-1 ml-1 h-full w-full rounded bg-black"></span>
|
|
<span class="font-bold relative inline-block h-full w-full rounded border-2 border-black bg-white px-3 py-1 text-base font-bold text-black transition duration-100 hover:bg-yellow-400 hover:text-gray-900">Place Bet</span>
|
|
</a>
|
|
<a href="#" class="relative" onclick="celebrate()">
|
|
<span class="absolute top-0 left-0 mt-1 ml-1 h-full w-full rounded bg-gray-700"></span>
|
|
<span class="font-bold relative inline-block h-full w-full rounded border-2 border-black bg-black px-3 py-1 text-base font-bold text-white transition duration-100 hover:bg-gray-900 hover:text-yellow-500">Confirm Bet</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function celebrate() {
|
|
const celebrationDiv = document.getElementById('celebration');
|
|
celebrationDiv.style.display = 'flex';
|
|
setTimeout(function() {
|
|
celebrationDiv.style.display = 'none';
|
|
}, 5000);
|
|
}
|
|
|
|
function selectOption(selectedLabel) {
|
|
// Remove 'selected' from all other labels
|
|
document.querySelectorAll('.option-box').forEach(box => {
|
|
box.classList.remove('selected');
|
|
});
|
|
// Add 'selected' to the clicked label
|
|
selectedLabel.classList.add('selected');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|