maverick/betondeez
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/betondeez.git synced 2026-07-26 06:37:31 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

x

Browse source
This commit is contained in:
Omar Najjar 2024-06-09 18:36:10 +10:00
parent 75f17a5b1a
commit 2e94057d52
1 changed files with 39 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Betting Platform</title>
<title>BetOnDeezNuts</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
@ -11,14 +11,35 @@
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: 'Courier New', Courier, monospace; /* Monospace font for the entire page */
}
.highlighted {
box-shadow: 0 0 15px 5px #ffc107; /* Adding a more noticeable highlight */
border: 2px solid black; /* Black border for highlighted option */
.option-box {
transition: box-shadow 0.3s, border-color 0.3s;
border: 2px solid transparent; /* Default state with transparent border */
}
.option-box.peer-checked {
box-shadow: 0 0 15px 5px #ffc107; /* More noticeable highlight when selected */
border-color: black; /* Black border only when selected */
}
.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">
🎉🎊🎉🎊🎉🎊 Ooooh do you feel the edge! 🎉🎊🎉🎊🎉🎊
</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>
@ -31,7 +52,7 @@
<!-- Option C Cup -->
<label class="cursor-pointer">
<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 ring-2 ring-transparent transition-all hover:shadow peer-checked:bg-yellow-400 peer-checked:text-black highlighted">
<div class="w-72 max-w-xl rounded-md bg-white dark:bg-gray-900 p-5 text-gray-600 dark:text-gray-300 ring-2 ring-transparent option-box peer-checked">
<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>
@ -42,7 +63,7 @@
<!-- Option D Cup -->
<label class="cursor-pointer">
<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 ring-2 ring-transparent transition-all hover:shadow peer-checked:bg-yellow-400 peer-checked:text-black highlighted">
<div class="w-72 max-w-xl rounded-md bg-white dark:bg-gray-900 p-5 text-gray-600 dark:text-gray-300 ring-2 ring-transparent option-box peer-checked">
<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>
@ -59,16 +80,26 @@
<!-- Elevated Buttons for Placing Bet -->
<div class="flex flex-wrap justify-center gap-6 mt-4">
<a class="relative" href="#">
<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">
<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'; // Show the confetti and Hooray text
setTimeout(function() {
celebrationDiv.style.display = 'none'; // Hide after 5 seconds
}, 5000);
}
</script>
</body>
</html>