CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reflex Master</title>
<style>
.reflexMaster6254-body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
}
.reflexMaster6254-container {
display: flex;
width: 100%;
height: 100%;
}
.reflexMaster6254-sidebar {
width: 300px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.reflexMaster6254-game-area {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
}
.reflexMaster6254-button {
padding: 12px 24px;
font-size: 18px;
cursor: pointer;
background: linear-gradient(45deg, #4CAF50, #45a049);
color: white;
border: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
margin-bottom: 10px;
}
.reflexMaster6254-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.reflexMaster6254-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.reflexMaster6254-instructions {
margin-bottom: 20px;
}
.reflexMaster6254-score {
font-size: 18px;
margin-top: 20px;
text-align: center;
}
@media (max-width: 768px) {
.reflexMaster6254-container {
flex-direction: column;
}
.reflexMaster6254-sidebar {
width: 100%;
height: auto;
}
.reflexMaster6254-game-area {
height: 60vh;
}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body class="reflexMaster6254-body">
<div class="reflexMaster6254-container">
<div class="reflexMaster6254-sidebar">
<div>
<h1>Reflex Master</h1>
<p>Test your reflexes and challenge your friends!</p>
<div class="reflexMaster6254-instructions">
<h3>How to Play:</h3>
<ol>
<li>Click "Start Challenge" to begin</li>
<li>Wait for the game area to turn green</li>
<li>Click anywhere as fast as you can when it changes</li>
<li>See your response time and try to beat it!</li>
</ol>
</div>
</div>
<div>
<button id="startButton" class="reflexMaster6254-button">Start Challenge</button>
<div id="scoreDisplay" class="reflexMaster6254-score">
Best Time: -- ms
</div>
</div>
</div>
<div id="gameArea" class="reflexMaster6254-game-area">
Ready to start!
</div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const startButton = document.getElementById('startButton');
const scoreDisplay = document.getElementById('scoreDisplay');
let startTime;
let timeoutId;
let isGameActive = false;
let bestScore = Infinity;
function startGame() {
if (isGameActive) return;
isGameActive = true;
gameArea.style.background = 'linear-gradient(45deg, #FF6B6B, #4ECDC4)';
gameArea.textContent = 'Wait for green...';
gameArea.style.animation = 'none';
startButton.disabled = true;
const randomDelay = Math.random() * 4500 + 500; // 0.5 to 5 seconds
timeoutId = setTimeout(() => {
gameArea.style.background = 'linear-gradient(45deg, #4CAF50, #45a049)';
gameArea.textContent = 'Click now!';
gameArea.style.animation = 'pulse 0.5s infinite';
startTime = Date.now();
}, randomDelay);
}
function endGame() {
isGameActive = false;
clearTimeout(timeoutId);
startButton.disabled = false;
gameArea.style.animation = 'none';
}
function checkResponseTime() {
if (isGameActive && !startTime) {
gameArea.style.background = 'linear-gradient(45deg, #FF0000, #CC0000)';
gameArea.textContent = 'Too early! Wait for green.';
endGame();
return;
}
if (!isGameActive) return;
const endTime = Date.now();
const responseTime = endTime - startTime;
gameArea.textContent = `${responseTime} ms`;
gameArea.style.background = 'linear-gradient(45deg, #FF6B6B, #4ECDC4)';
if (responseTime < bestScore) {
bestScore = responseTime;
scoreDisplay.textContent = `Best Time: ${bestScore} ms`;
gameArea.style.animation = 'pulse 0.5s 3';
}
endGame();
}
gameArea.addEventListener('click', checkResponseTime);
startButton.addEventListener('click', startGame);
</script>
</body>
</html>