maverick/instinct
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

x

Browse source
This commit is contained in:
Omar Najjar 2024-07-07 16:12:05 +10:00
parent 3680a77239
commit 28b465543c
1 changed files with 64 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
index.html
View file

@ -39,7 +39,7 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
background: rgba(20, 20, 20, 0.8); background: rgba(20, 20, 20, 0.8);
border: 1px solid #fff; /* Added white thin border */ border: 1px solid #fff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.15); box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
margin-top: 20px; margin-top: 20px;
} }
@ -75,8 +75,8 @@
background-color: #222; background-color: #222;
color: #fff; color: #fff;
margin-top: 10px; margin-top: 10px;
font-weight: 300; /* Lighter font */ font-weight: 300;
line-height: 1.5; /* Taller text */ line-height: 1.5;
} }
.avatars img { .avatars img {
width: 60px; width: 60px;
@ -97,8 +97,8 @@
max-width: 600px; max-width: 600px;
height: 300px; height: 300px;
border-radius: 10px; border-radius: 10px;
margin: 0 auto; /* Centers the video frame */ margin: 0 auto;
overflow: hidden; /* Ensures no overflow from the video */ overflow: hidden;
} }
.live-indicator { .live-indicator {
position: absolute; position: absolute;
@ -111,7 +111,7 @@
padding: 5px 10px; padding: 5px 10px;
border-radius: 5px; border-radius: 5px;
animation: flash 1s infinite; animation: flash 1s infinite;
z-index: 20; /* Ensures it is above the video */ z-index: 20;
} }
.countdown { .countdown {
position: absolute; position: absolute;
@ -121,7 +121,7 @@
font-size: 48px; font-size: 48px;
font-weight: 700; font-weight: 700;
z-index: 10; z-index: 10;
color: #FFF; /* Ensures visibility on top of any background */ color: #FFF;
} }
.bet-buttons { .bet-buttons {
display: flex; display: flex;
@ -165,7 +165,7 @@
} }
95% { 95% {
box-shadow: var(--neon-shadow); box-shadow: var(--neon-shadow);
border-color: var (--primary-neon); border-color: var(--primary-neon);
} }
95.01% { 95.01% {
box-shadow: none; box-shadow: none;
@ -197,7 +197,7 @@
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 30; /* Ensures it is above other elements */ z-index: 30;
} }
.live-chat-btn:hover { .live-chat-btn:hover {
background-color: #0056b3; background-color: #0056b3;
@ -211,13 +211,13 @@
height: 50%; height: 50%;
max-height: 400px; max-height: 400px;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
border: 1px solid #fff; /* Added white thin border */ border: 1px solid #fff;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
display: none; display: none;
flex-direction: column; flex-direction: column;
z-index: 40; /* Ensures it is above the chat button */ z-index: 40;
overflow-y: scroll; /* Enable scrolling */ overflow-y: scroll;
} }
.live-chat-popup.active { .live-chat-popup.active {
display: flex; display: flex;
@ -259,6 +259,14 @@
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 5px; border-radius: 5px;
} }
.floating-bet {
position: absolute;
font-size: 24px;
font-weight: bold;
color: #fff;
pointer-events: none;
transition: all 1.5s ease-out;
}
</style> </style>
</head> </head>
<body> <body>
@ -300,15 +308,15 @@
<div class="video-frame mb-4"> <div class="video-frame mb-4">
<div class="countdown" id="countdown">5</div> <div class="countdown" id="countdown">5</div>
<div class="live-indicator">LIVE</div> <div class="live-indicator">LIVE</div>
<!-- iframe is now dynamically added by the script to control timing -->
</div> </div>
<div class="bet-buttons"> <div class="bet-buttons">
<button class="btn-place" id="betLionBtn" onclick="placeBet(0)">Bet Lion</button> <button class="btn-place" id="btnLion" onclick="placeBet('Lion')">Bet Lion</button>
<button class="btn-confirm" id="betBuffaloBtn" onclick="placeBet(1)">Bet Buffalo</button> <button class="btn-confirm" id="btnBuffalo" onclick="placeBet('Buffalo')">Bet Buffalo</button>
</div> </div>
<div> <div class="bet-info">
<p>Total Bets on Lion: <span id="totalBetsLion">0</span></p> <p>Total Bets on Lion: $<span id="totalBetsLion">0</span></p>
<p>Total Bets on Buffalo: <span id="totalBetsBuffalo">0</span></p> <p>Total Bets on Buffalo: $<span id="totalBetsBuffalo">0</span></p>
<p>Your Potential Payout: $<span id="potentialPayout">0</span></p>
</div> </div>
</div> </div>
@ -323,9 +331,10 @@
</div> </div>
<script> <script>
const WORKER_URL = 'https://instinct-api.yazdani.dev/user'; // Updated API URL const WORKER_URL = 'https://instinct-api.yazdani.dev';
let userEmail = ''; let userEmail = '';
let defaultBetSize = 0; let defaultBetSize = 0;
let eventID = 95; // Default event ID
async function navigateTo(pageId) { async function navigateTo(pageId) {
document.querySelectorAll('.page').forEach(page => { document.querySelectorAll('.page').forEach(page => {
@ -340,7 +349,7 @@
generateRandomAvatars(); generateRandomAvatars();
} else if (pageId === 'page5') { } else if (pageId === 'page5') {
userEmail = document.getElementById('email').value; userEmail = document.getElementById('email').value;
defaultBetSize = document.getElementById('defaultBetSize').value; defaultBetSize = parseFloat(document.getElementById('defaultBetSize').value);
startCountdown(5); startCountdown(5);
await fetchUserBalance(); await fetchUserBalance();
await fetchTotalBets(); await fetchTotalBets();
@ -361,7 +370,6 @@
if (--timer < 0) { if (--timer < 0) {
countdownElement.style.display = 'none'; countdownElement.style.display = 'none';
clearInterval(countdownTimer); clearInterval(countdownTimer);
// Only create and display the video after the countdown finishes
var iframe = document.createElement('iframe'); var iframe = document.createElement('iframe');
iframe.src = "https://customer-0sb72e7akfw9m0dg.cloudflarestream.com/7d7cb4e7e6ead747b72073c3824a9d3f/iframe?preload=true&autoplay=true&poster=https%3A%2F%2Fcustomer-0sb72e7akfw9m0dg.cloudflarestream.com%2F7d7cb4e7e6ead747b72073c3824a9d3f%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600&controls=false"; iframe.src = "https://customer-0sb72e7akfw9m0dg.cloudflarestream.com/7d7cb4e7e6ead747b72073c3824a9d3f/iframe?preload=true&autoplay=true&poster=https%3A%2F%2Fcustomer-0sb72e7akfw9m0dg.cloudflarestream.com%2F7d7cb4e7e6ead747b72073c3824a9d3f%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600&controls=false";
iframe.style.cssText = 'border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;'; iframe.style.cssText = 'border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;';
@ -369,7 +377,6 @@
iframe.allowfullscreen = true; iframe.allowfullscreen = true;
videoFrame.appendChild(iframe); videoFrame.appendChild(iframe);
// Listen for the end of the first video
iframe.onload = function () { iframe.onload = function () {
var firstVideo = iframe.contentWindow.document.querySelector('video'); var firstVideo = iframe.contentWindow.document.querySelector('video');
if (firstVideo) { if (firstVideo) {
@ -383,9 +390,7 @@
} }
function playEndingVideo(videoFrame) { function playEndingVideo(videoFrame) {
// Remove the first video
videoFrame.innerHTML = ''; videoFrame.innerHTML = '';
// Add the ending video
var iframe = document.createElement('iframe'); var iframe = document.createElement('iframe');
iframe.src = "https://customer-0sb72e7akfw9m0dg.cloudflarestream.com/ea82c3f795b5a68a78ef3d44c85a689f/watch/iframe?preload=true&autoplay=true"; iframe.src = "https://customer-0sb72e7akfw9m0dg.cloudflarestream.com/ea82c3f795b5a68a78ef3d44c85a689f/watch/iframe?preload=true&autoplay=true";
iframe.style.cssText = 'border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;'; iframe.style.cssText = 'border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;';
@ -413,7 +418,7 @@
async function fetchUserData() { async function fetchUserData() {
const email = document.getElementById('email').value; const email = document.getElementById('email').value;
const response = await fetch(`${WORKER_URL}?email=${encodeURIComponent(email)}`, { method: 'GET' }); const response = await fetch(`${WORKER_URL}/user?email=${encodeURIComponent(email)}`, { method: 'GET' });
if (response.ok) { if (response.ok) {
const userData = await response.json(); const userData = await response.json();
document.getElementById('name').value = userData.name || ''; document.getElementById('name').value = userData.name || '';
@ -426,7 +431,7 @@
async function saveUserData() { async function saveUserData() {
if (document.getElementById('bypassValidation').checked) { if (document.getElementById('bypassValidation').checked) {
navigateTo('page3'); // Skip validation and navigate to next page navigateTo('page3');
return; return;
} }
@ -435,13 +440,13 @@
name: document.getElementById('name').value, name: document.getElementById('name').value,
phone: document.getElementById('phone').value phone: document.getElementById('phone').value
}; };
const response = await fetch('https://instinct-api.yazdani.dev/signup', { const response = await fetch(`${WORKER_URL}/signup`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData) body: JSON.stringify(userData)
}); });
if (response.ok) { if (response.ok) {
navigateTo('page3'); // Navigate to the next page after saving data navigateTo('page3');
} else { } else {
console.error('Failed to save user data'); console.error('Failed to save user data');
} }
@ -452,39 +457,37 @@
} }
async function placeBet(team) { async function placeBet(team) {
const response = await fetch('https://instinct-api.yazdani.dev/bet', { const betAmount = defaultBetSize;
const response = await fetch(`${WORKER_URL}/bet`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
email: userEmail, email: userEmail,
team: team, event: eventID,
amount: defaultBetSize team: team === 'Lion' ? 0 : 1,
amount: betAmount
}) })
}); });
if (response.ok) { if (response.ok) {
console.log('Bet placed successfully'); console.log('Bet placed successfully');
animateBetAmount(team, defaultBetSize);
await fetchUserBalance(); await fetchUserBalance();
await fetchTotalBets(); await fetchTotalBets();
displayFloatingBet(betAmount);
} else { } else {
console.error('Failed to place bet'); console.error('Failed to place bet');
} }
} }
async function fetchUserBalance() { async function fetchUserBalance() {
const response = await fetch(`${WORKER_URL}?email=${encodeURIComponent(userEmail)}`, { method: 'GET' }); const response = await fetch(`${WORKER_URL}/user?email=${encodeURIComponent(userEmail)}`, { method: 'GET' });
if (response.ok) { if (response.ok) {
const userData = await response.json(); const userData = await response.json();
document.getElementById('userBalance').textContent = userData.user.balance || '0'; document.getElementById('userBalance').textContent = userData.user.balance || '0';
// Disable bet buttons if balance is insufficient const betButtons = document.querySelectorAll('.bet-buttons button');
const betLionBtn = document.getElementById('betLionBtn');
const betBuffaloBtn = document.getElementById('betBuffaloBtn');
if (userData.user.balance < defaultBetSize) { if (userData.user.balance < defaultBetSize) {
betLionBtn.disabled = true; betButtons.forEach(button => button.disabled = true);
betBuffaloBtn.disabled = true;
} else { } else {
betLionBtn.disabled = false; betButtons.forEach(button => button.disabled = false);
betBuffaloBtn.disabled = false;
} }
} else { } else {
console.error('Failed to fetch user balance'); console.error('Failed to fetch user balance');
@ -492,7 +495,7 @@
} }
async function fetchTotalBets() { async function fetchTotalBets() {
const response = await fetch(`https://instinct-api.yazdani.dev/totals?event=95`, { method: 'GET' }); const response = await fetch(`${WORKER_URL}/totals?event=${eventID}`, { method: 'GET' });
if (response.ok) { if (response.ok) {
const totals = await response.json(); const totals = await response.json();
const totalBetsLion = totals.bets.find(bet => bet.team === 0)?.total || 0; const totalBetsLion = totals.bets.find(bet => bet.team === 0)?.total || 0;
@ -506,7 +509,7 @@
function generateRandomAvatars() { function generateRandomAvatars() {
const avatarsContainer = document.querySelector('.avatars'); const avatarsContainer = document.querySelector('.avatars');
avatarsContainer.innerHTML = ''; // Clear existing avatars avatarsContainer.innerHTML = '';
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
const avatarId = Math.floor(Math.random() * 1000000); const avatarId = Math.floor(Math.random() * 1000000);
@ -518,27 +521,30 @@
} }
} }
function animateBetAmount(team, amount) { function displayFloatingBet(amount) {
const betButton = team === 0 ? document.getElementById('betLionBtn') : document.getElementById('betBuffaloBtn'); const betElement = document.createElement('div');
const betAnimation = document.createElement('div'); betElement.classList.add('floating-bet');
betAnimation.textContent = `$${amount}`; betElement.textContent = `+ $${amount}`;
betAnimation.style.position = 'absolute'; document.body.appendChild(betElement);
betAnimation.style.color = 'yellow';
betAnimation.style.top = `${betButton.getBoundingClientRect().top}px`; const startPos = {
betAnimation.style.left = `${betButton.getBoundingClientRect().left}px`; x: window.innerWidth / 2 - betElement.offsetWidth / 2,
betAnimation.style.zIndex = 1000; y: window.innerHeight / 2
betAnimation.style.transition = 'all 1s ease-out'; };
document.body.appendChild(betAnimation);
betElement.style.left = `${startPos.x}px`;
betElement.style.top = `${startPos.y}px`;
setTimeout(() => { setTimeout(() => {
betAnimation.style.transform = `translateY(-100px)`; betElement.style.transform = `translateY(-200px)`;
betAnimation.style.opacity = 0; betElement.style.opacity = '0';
}, 100); }, 100);
setTimeout(() => { setTimeout(() => {
betAnimation.remove(); document.body.removeChild(betElement);
}, 1100); }, 1600);
} }
// Add to Home Screen Prompt
let deferredPrompt; let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => { window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault(); e.preventDefault();
@ -566,7 +572,6 @@
}); });
} }
// Service Worker Registration
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {
navigator.serviceWorker.register('/instinct/service-worker.js').then((registration) => { navigator.serviceWorker.register('/instinct/service-worker.js').then((registration) => {