You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
8.1 KiB
199 lines
8.1 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>System Design Game - Select Difficulty</title> |
|
<link rel="stylesheet" href="difficulty-select.css"> |
|
</head> |
|
<body> |
|
<div class="header"> |
|
<h1 class="header-text">System Design Game</h1> |
|
</div> |
|
|
|
<div class="main-container"> |
|
<div class="title-section"> |
|
<h1 class="main-title">Select Difficulty</h1> |
|
<p class="subtitle"> |
|
Choose your challenge level. Each difficulty offers unique constraints and learning opportunities |
|
to help you master system design at your own pace. |
|
</p> |
|
</div> |
|
|
|
<div class="difficulty-grid"> |
|
<!-- Easy Difficulty --> |
|
<div class="difficulty-card easy" onclick="selectDifficulty('easy')"> |
|
<div class="difficulty-header"> |
|
<div class="difficulty-icon">🌱</div> |
|
<h2 class="difficulty-title">Easy</h2> |
|
</div> |
|
|
|
<p class="difficulty-description"> |
|
Perfect for beginners. Learn the fundamentals with guided tutorials and forgiving constraints. |
|
</p> |
|
|
|
<ul class="difficulty-features"> |
|
<li>Extended time limits</li> |
|
<li>Helpful hints and tips</li> |
|
<li>Relaxed performance requirements</li> |
|
<li>Step-by-step guidance</li> |
|
<li>Basic component set</li> |
|
</ul> |
|
|
|
<div class="difficulty-stats"> |
|
<div class="stats-grid"> |
|
<div class="stat-item"> |
|
<div class="stat-label">Time Limit</div> |
|
<div class="stat-value">45 min</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Max RPS</div> |
|
<div class="stat-value">1K</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Budget</div> |
|
<div class="stat-value">$500</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Availability</div> |
|
<div class="stat-value">99%</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button class="select-button">Start Easy Mode</button> |
|
</div> |
|
|
|
<!-- Medium Difficulty --> |
|
<div class="difficulty-card medium" onclick="selectDifficulty('medium')"> |
|
<div class="difficulty-header"> |
|
<div class="difficulty-icon">⚡</div> |
|
<h2 class="difficulty-title">Medium</h2> |
|
</div> |
|
|
|
<p class="difficulty-description"> |
|
Balanced challenge for intermediate learners. Real-world constraints with moderate complexity. |
|
</p> |
|
|
|
<ul class="difficulty-features"> |
|
<li>Standard time constraints</li> |
|
<li>Realistic performance targets</li> |
|
<li>Full component library</li> |
|
<li>Trade-off decisions required</li> |
|
<li>Cost optimization needed</li> |
|
</ul> |
|
|
|
<div class="difficulty-stats"> |
|
<div class="stats-grid"> |
|
<div class="stat-item"> |
|
<div class="stat-label">Time Limit</div> |
|
<div class="stat-value">30 min</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Max RPS</div> |
|
<div class="stat-value">10K</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Budget</div> |
|
<div class="stat-value">$2K</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Availability</div> |
|
<div class="stat-value">99.9%</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button class="select-button">Start Medium Mode</button> |
|
</div> |
|
|
|
<!-- Hard Difficulty --> |
|
<div class="difficulty-card hard" onclick="selectDifficulty('hard')"> |
|
<div class="difficulty-header"> |
|
<div class="difficulty-icon">🔥</div> |
|
<h2 class="difficulty-title">Hard</h2> |
|
</div> |
|
|
|
<p class="difficulty-description"> |
|
Expert-level challenges. Tight constraints and complex requirements that mirror real FAANG interviews. |
|
</p> |
|
|
|
<ul class="difficulty-features"> |
|
<li>Strict time pressure</li> |
|
<li>High-scale requirements</li> |
|
<li>Complex failure scenarios</li> |
|
<li>Advanced optimization needed</li> |
|
<li>Multiple constraint conflicts</li> |
|
</ul> |
|
|
|
<div class="difficulty-stats"> |
|
<div class="stats-grid"> |
|
<div class="stat-item"> |
|
<div class="stat-label">Time Limit</div> |
|
<div class="stat-value">20 min</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Max RPS</div> |
|
<div class="stat-value">100K</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Budget</div> |
|
<div class="stat-value">$5K</div> |
|
</div> |
|
<div class="stat-item"> |
|
<div class="stat-label">Availability</div> |
|
<div class="stat-value">99.99%</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button class="select-button">Start Hard Mode</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
function selectDifficulty(difficulty) { |
|
// Add loading state to the selected button |
|
const selectedCard = document.querySelector(`.difficulty-card.${difficulty}`); |
|
const button = selectedCard.querySelector('.select-button'); |
|
const originalText = button.textContent; |
|
|
|
button.textContent = 'Loading...'; |
|
button.disabled = true; |
|
|
|
// Simulate loading and redirect |
|
setTimeout(() => { |
|
// In a real app, you'd pass the difficulty as a parameter |
|
window.location.href = `/game?difficulty=${difficulty}`; |
|
}, 1000); |
|
} |
|
|
|
// Add keyboard navigation |
|
document.addEventListener('keydown', function(e) { |
|
if (e.key === '1') { |
|
selectDifficulty('easy'); |
|
} else if (e.key === '2') { |
|
selectDifficulty('medium'); |
|
} else if (e.key === '3') { |
|
selectDifficulty('hard'); |
|
} else if (e.key === 'Escape') { |
|
window.location.href = '/game-modes'; |
|
} |
|
}); |
|
|
|
// Add hover sound effects (you'd need actual audio files) |
|
document.querySelectorAll('.difficulty-card').forEach(card => { |
|
card.addEventListener('mouseenter', () => { |
|
// Play hover sound |
|
console.log('🔊 Hover sound effect'); |
|
}); |
|
|
|
card.addEventListener('click', () => { |
|
// Play click sound |
|
console.log('🔊 Click sound effect'); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|