<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaming & Cricket Voting</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container {
width: 100%;
max-width: 500px;
background: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.screen {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
animation: fadeIn 0.5s ease;
}
.active {
display: flex;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
h1, h2 {
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.logo {
font-size: 2.5rem;
margin-bottom: 20px;
color: #fdbb2d;
text-shadow: 0 0 10px rgba(253, 187, 45, 0.7);
}
.insta-link {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
color: white;
padding: 12px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.insta-link:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.insta-logo {
margin-right: 10px;
font-size: 1.5rem;
}
.btn {
background: linear-gradient(to right, #ff8a00, #da1b60);
color: white;
border: none;
padding: 12px 30px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.input-field {
width: 100%;
padding: 12px 20px;
border-radius: 50px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
margin: 15px 0;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.input-field:focus {
outline: none;
border: 1px solid #fdbb2d;
box-shadow: 0 0 10px rgba(253, 187, 45, 0.5);
}
.kmr-text {
font-size: 2.5rem;
font-weight: bold;
color: #fdbb2d;
text-shadow: 0 0 10px rgba(253, 187, 45, 0.7);
margin: 20px 0;
letter-spacing: 2px;
}
.vote-options {
display: flex;
justify-content: space-between;
width: 100%;
margin: 20px 0;
}
.vote-btn {
flex: 1;
padding: 15px;
margin: 0 10px;
border-radius: 10px;
border: none;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.yes-btn {
background: linear-gradient(to right, #00b09b, #96c93d);
color: white;
}
.no-btn {
background: linear-gradient(to right, #ff416c, #ff4b2b);
color: white;
}
.vote-btn:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}
.vote-count {
margin-top: 10px;
font-size: 0.9rem;
opacity: 0.8;
}
.option-card {
width: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
cursor: pointer;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.option-card:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.option-title {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}
.ff-logo {
color: #ff4655;
margin-right: 10px;
font-size: 1.5rem;
}
.password-field {
width: 100%;
padding: 12px 20px;
border-radius: 50px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
margin: 15px 0;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.message {
margin: 15px 0;
padding: 10px;
border-radius: 5px;
width: 100%;
text-align: center;
}
.success {
background: rgba(0, 255, 0, 0.2);
border: 1px solid rgba(0, 255, 0, 0.5);
}
.error {
background: rgba(255, 0, 0, 0.2);
border: 1px solid rgba(255, 0, 0, 0.5);
}
.telegram-link {
display: inline-block;
background: #0088cc;
color: white;
padding: 12px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.telegram-link:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.coming-soon {
font-size: 2rem;
color: #fdbb2d;
margin: 30px 0;
text-shadow: 0 0 10px rgba(253, 187, 45, 0.7);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.gaming-theme {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 15px;
background: rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.gaming-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
}
.gaming-icons i {
font-size: 1.5rem;
color: #fdbb2d;
text-shadow: 0 0 5px rgba(253, 187, 45, 0.7);
}
</style>
</head>
<body>
<div class="container">
<!-- Screen 1: Instagram Link & Let's Go -->
<div class="screen active" id="screen1">
<div class="logo">
<i class="fas fa-gamepad"></i>
</div>
<h1>Welcome to Gaming Hub</h1>
<a href="https://instagram.com/ayaanmaqbool01" target="_blank" class="insta-link">
<i class="fab fa-instagram insta-logo"></i>
@ayaanmaqbool01
</a>
<p>Get ready for an amazing gaming experience!</p>
<button class="btn" id="letsGoBtn">Let's Go <i class="fas fa-arrow-right"></i></button>
<div class="gaming-theme">
<p>GAMING HUB | PLAY & WIN</p>
<div class="gaming-icons">
<i class="fas fa-headset"></i>
<i class="fas fa-trophy"></i>
<i class="fas fa-dice"></i>
<i class="fas fa-joystick"></i>
</div>
</div>
</div>
<!-- Screen 2: Name Input -->
<div class="screen" id="screen2">
<h2>What is your name?</h2>
<input type="text" class="input-field" id="nameInput" placeholder="Enter your name">
<button class="btn" id="submitNameBtn">Submit</button>
</div>
<!-- Screen 3: KMR Cricket Voting -->
<div class="screen" id="screen3">
<div class="kmr-text">KMR CRICKET</div>
<h2>Vote for KMR Cricket</h2>
<div class="vote-options">
<button class="vote-btn yes-btn" id="yesVote">
YES
<div class="vote-count">29K Votes</div>
</button>
<button class="vote-btn no-btn" id="noVote">
NO
<div class="vote-count">199 Votes</div>
</button>
</div>
</div>
<!-- Screen 4: Options Selection -->
<div class="screen" id="screen4">
<h2>Choose an Option</h2>
<div class="option-card" id="ffProxyOption">
<div class="option-title">
<i class="fas fa-fire ff-logo"></i>
Free Fire Proxy Server
</div>
</div>
<div class="option-card" id="kmrCricketOption">
<div class="option-title">
<i class="fas fa-baseball-ball"></i>
KMR Cricket
</div>
</div>
</div>
<!-- Screen 5: Password for Free Fire Proxy -->
<div class="screen" id="screen5">
<h2>Free Fire Proxy Server</h2>
<p>Enter password to continue</p>
<input type="password" class="password-field" id="passwordInput" placeholder="Enter password">
<div id="passwordMessage" class="message"></div>
<button class="btn" id="checkPasswordBtn">Continue</button>
</div>
<!-- Screen 6: Telegram Link -->
<div class="screen" id="screen6">
<h2>Access Granted!</h2>
<p>Welcome to the Free Fire Proxy Server</p>
<a href="#" class="telegram-link" id="telegramLink">
<i class="fab fa-telegram"></i> Join My Telegram Channel
</a>
<p>Get the latest updates and proxy configurations</p>
</div>
<!-- Screen 7: Coming Soon for KMR Cricket -->
<div class="screen" id="screen7">
<div class="kmr-text">KMR CRICKET</div>
<div class="coming-soon">COMING SOON</div>
<p>We're working on something amazing!</p>
<p>Stay tuned for updates.</p>
</div>
</div>
<script>
// DOM Elements
const screens = document.querySelectorAll('.screen');
const letsGoBtn = document.getElementById('letsGoBtn');
const submitNameBtn = document.getElementById('submitNameBtn');
const yesVoteBtn = document.getElementById('yesVote');
const noVoteBtn = document.getElementById('noVote');
const ffProxyOption = document.getElementById('ffProxyOption');
const kmrCricketOption = document.getElementById('kmrCricketOption');
const checkPasswordBtn = document.getElementById('checkPasswordBtn');
const passwordInput = document.getElementById('passwordInput');
const passwordMessage = document.getElementById('passwordMessage');
const telegramLink = document.getElementById('telegramLink');
// Show specific screen
function showScreen(screenId) {
screens.forEach(screen => {
screen.classList.remove('active');
});
document.getElementById(screenId).classList.add('active');
}
// Event Listeners
letsGoBtn.addEventListener('click', () => {
showScreen('screen2');
});
submitNameBtn.addEventListener('click', () => {
const nameInput = document.getElementById('nameInput');
if (nameInput.value.trim() !== '') {
showScreen('screen3');
} else {
alert('Please enter your name');
}
});
yesVoteBtn.addEventListener('click', () => {
showScreen('screen4');
});
noVoteBtn.addEventListener('click', () => {
showScreen('screen4');
});
ffProxyOption.addEventListener('click', () => {
showScreen('screen5');
});
kmrCricketOption.addEventListener('click', () => {
showScreen('screen7');
});
checkPasswordBtn.addEventListener('click', () => {
const password = passwordInput.value;
if (password === 'abc123') {
passwordMessage.textContent = 'Password correct! Redirecting...';
passwordMessage.className = 'message success';
// Set the telegram link (replace with your actual link)
telegramLink.href = 'https://t.me/yourtelegramchannel';
setTimeout(() => {
showScreen('screen6');
}, 1500);
} else {
passwordMessage.textContent = 'Password failed! Please try again.';
passwordMessage.className = 'message error';
passwordInput.value = '';
// Shake animation for wrong password
passwordInput.style.animation = 'shake 0.5s';
setTimeout(() => {
passwordInput.style.animation = '';
}, 500);
}
});
// Add shake animation for wrong password
const style = document.createElement('style');
style.textContent = `
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-10px); }
40%, 80% { transform: translateX(10px); }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>