<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Betting Arena</title>
<style>
:root {
--bg: #121212;
--accent: #ffcb05;
--text: #f5f5f5;
--card-radius: 8px;
--transition: 0.3s;
}
* { box-sizing: border-box; margin:0; padding:0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
min-height: 100vh;
}
h1, h2 { margin-bottom: 20px; font-size: 2rem; color: var(--accent); }
#betting { margin-bottom: 20px; font-size: 2rem; }
#betting label { margin-right: 8px; font-size: 1rem; }
#betAmount {
width: 80px;
padding: 6px;
border: 1px solid var(--accent);
border-radius: var(--card-radius);
background: transparent;
color: var(--text);
font-size: 1rem;
}
#heroes { display: flex; gap: 20px; margin-bottom: 20px; }
.hero-img {
width: 100px;
height: 100px;
border-radius: var(--card-radius);
transition: transform var(--transition);
cursor: pointer;
}
.hero-img:hover,
.hero-img.touch-active {
transform: scale(1.2);
}
#result { margin-bottom: 20px; min-height: 1.2rem; font-size: 1.2rem; }
#videoOverlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
justify-content: center;
align-items: center;
}
#videoContent { position: relative; }
#battleVideo {
width: 90vw;
max-width: 500px;
border-radius: var(--card-radius);
}
#messageModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
color: var(--text);
}
#messageModal button {
margin-top: 15px;
background: var(--accent);
border: none;
border-radius: var(--card-radius);
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
transition: background var(--transition);
}
#messageModal button:hover { background: #ffd566; }
#preloader,
#introOverlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
color: var(--text);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
z-index: 1000;
flex-direction: column;
gap: 10px;
}
#introOverlay button {
margin-top: 10px;
background: var(--accent);
border: none;
padding: 10px 20px;
border-radius: var(--card-radius);
color: var(--bg);
font-size: 1rem;
cursor: pointer;
transition: background var(--transition);
}
#introOverlay button:hover { background: #ffd566; }
</style>
</head>
<body>
<div id="preloader">Loading assets...</div>
<div id="introOverlay">
<div>Increase volume for best experience.<br>Hover (desktop) or hold (mobile) a hero to hear their intro.</div>
<button id="startBtn">Start Playing</button>
</div>
<h1>Brainrot battle Arena</h1>
<div id="betting">
<label for="betAmount">Bet Amount:</label>
<input id="betAmount" type="number" value="100" min="100" />
</div>
<div>
<h2> choose your hero for a battle:</h2>
</div>
<div id="heroes">
<img class="hero-img" src="https://htmlify.artizote.com/amar/brainrot%20image/lirilalarilla.png" data-hero="1" data-audio="https://htmlify.artizote.com/amar/brainrot%20sound/VID_20250401_184408.mp3" alt="Hero 1" />
<img class="hero-img" src="https://htmlify.artizote.com/amar/brainrot%20image/Bombardiro_Crocodillo.png" data-hero="2" data-audio="https://htmlify.artizote.com/amar/brainrot%20sound/VID_20250401_184356.mp3" alt="Hero 2" />
<img class="hero-img" src="https://htmlify.artizote.com/amar/brainrot%20image/Tralalero_Tralala_on_the_beach.png" data-hero="3" data-audio="https://htmlify.artizote.com/amar/brainrot%20sound/VID_20250401_184402.mp3" alt="Hero 3" />
</div>
<div id="result"></div>
<!-- Modal Structure -->
<div id="popupModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; z-index: 1000;">
<div style="background: #222; padding: 20px; border-radius: 10px; text-align: center; color: white;">
<h2>Wallpaper Redeemed!</h2>
<p>Click below to download your exclusive wallpaper:</p>
<a id="modalDownloadLink" href="https://htmlify.artizote.com/amar/wallpaperfor2500$.png" download style="color: #00ffcc; font-weight: bold;">Download Wallpaper</a><br><br>
<button id="closePopup" style="padding: 10px 20px; background: #e74c3c; color: white; border: none; border-radius: 5px;">Close</button>
</div>
</div>
<div id="redeemSection" style="margin-bottom: 10px;">
<button id="redeemBtn" style="background: var(--accent); border: none; padding: 10px 20px; border-radius: var(--card-radius); font-size: 1rem; cursor: pointer;">Redeem Wallpaper for $2500</button>
</div>
<div id="videoOverlay">
<div id="videoContent">
<video id="battleVideo" controls></video>
</div>
</div>
<div id="messageModal">
<div id="messageText"></div>
<button id="closeMessage">OK</button>
</div>
<script>
let balance = 1000;
const balanceEl = document.createElement('div');
const betInput = document.getElementById('betAmount');
const heroes = document.querySelectorAll('.hero-img');
const resultDiv = document.getElementById('result');
const preloader = document.getElementById('preloader');
const intro = document.getElementById('introOverlay');
const startBtn = document.getElementById('startBtn');
const overlay = document.getElementById('videoOverlay');
const videoEl = document.getElementById('battleVideo');
const messageModal = document.getElementById('messageModal');
const messageText = document.getElementById('messageText');
const closeMsg = document.getElementById('closeMessage');
const audioMap = {};
const videoURLs = {
'1': { win: 'https://htmlify.artizote.com/amar/Battle/lwinblose.mp4', lose: 'https://htmlify.artizote.com/amar/Battle/twinllose.mp4' },
'2': { win: 'https://htmlify.artizote.com/amar/Battle/bwintlose.mp4', lose: 'https://htmlify.artizote.com/amar/Battle/lwinblose.mp4' },
'3': { win: 'https://htmlify.artizote.com/amar/Battle/twinllose.mp4', lose: 'https://htmlify.artizote.com/amar/Battle/bwintlose.mp4' }
};
function updateBalance() {
if (!document.getElementById('balanceDisplay')) {
balanceEl.id = 'balanceDisplay';
document.body.insertBefore(balanceEl, document.getElementById('betting'));
}
balanceEl.textContent = `Balance: $${balance}`;
}
startBtn.addEventListener('click', () => {
intro.style.display = 'none';
updateBalance();
});
// Preload audio
const promises = [];
heroes.forEach(img => {
const id = img.dataset.hero;
const audio = new Audio(img.dataset.audio);
audio.preload = 'auto'; audio.load();
audioMap[id] = audio;
promises.push(new Promise(r => audio.oncanplaythrough = r));
// Intro audio
img.addEventListener('mouseenter', () => audio.play());
img.addEventListener('mouseleave', () => { audio.pause(); audio.currentTime = 0; });
img.addEventListener('touchstart', () => { audio.currentTime = 0; audio.play(); }, { passive: true });
img.addEventListener('touchend', () => { audio.pause(); audio.currentTime = 0; }, { passive: true });
// Betting on click
img.addEventListener('click', () => {
// stop any intro audio when video starts
Object.values(audioMap).forEach(a => { a.pause(); a.currentTime = 0; });
const hero = img.dataset.hero;
const bet = Math.min(parseInt(betInput.value) || 0, balance);
if (bet < 1) { resultDiv.textContent = 'Enter a valid bet.'; return; }
balance -= bet;
resultDiv.textContent = '';
const win = Math.random() < 0.5;
videoEl.src = win ? videoURLs[hero].win : videoURLs[hero].lose;
overlay.style.display = 'flex';
videoEl.play();
videoEl.onended = () => {
overlay.style.display = 'none';
const payout = win ? bet * 2 : 0;
balance += payout;
updateBalance();
messageText.textContent = win
? `Hero won! You gain $${payout}`
: `Hero lost... You lose $${bet}`;
messageModal.style.display = 'flex';
};
});
});
closeMsg.addEventListener('click', () => { messageModal.style.display = 'none'; });
Promise.all(promises).then(() => { preloader.style.display = 'none'; });
</script>
<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
const redeemBtn = document.getElementById('redeemBtn');
const popupModal = document.getElementById('popupModal');
const closePopup = document.getElementById('closePopup');
redeemBtn.addEventListener('click', () => {
if (balance >= 2500) {
balance -= 2500;
updateBalance();
popupModal.style.display = 'flex';
} else {
messageText.textContent = 'you dont have 2500$, earn more and try again later.';
messageModal.style.display = 'flex';
}
});
closePopup.addEventListener('click', () => {
popupModal.style.display = 'none';
});
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
</body>
</html>