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.
113 lines
4.7 KiB
113 lines
4.7 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 - System Failed</title> |
|
<link rel="stylesheet" href="/static/failure.css"> |
|
</head> |
|
<body> |
|
<div class="screen-overlay"></div> |
|
|
|
<div class="header"> |
|
<h1 class="header-text">System Design Game</h1> |
|
</div> |
|
|
|
<div class="failure-container"> |
|
<h1 class="failure-title glitch" data-text="SYSTEM OVERLOAD" id="failureTitle">SYSTEM OVERLOAD</h1> |
|
<p class="failure-subtitle" id="failureSubtitle">Your architecture couldn't handle the load</p> |
|
|
|
<div class="failure-details"> |
|
<div class="failure-reason" id="failureReason"> |
|
Critical system failure detected. Your design exceeded operational limits. |
|
</div> |
|
|
|
<div class="failure-metrics"> |
|
<div class="metric-item"> |
|
<div class="metric-label">Target RPS</div> |
|
<div class="metric-value">10,000</div> |
|
</div> |
|
<div class="metric-item"> |
|
<div class="metric-label">Achieved RPS</div> |
|
<div class="metric-value exceeded">2,847</div> |
|
</div> |
|
<div class="metric-item"> |
|
<div class="metric-label">Max Latency</div> |
|
<div class="metric-value">200ms</div> |
|
</div> |
|
<div class="metric-item"> |
|
<div class="metric-label">Actual Latency</div> |
|
<div class="metric-value exceeded">1,247ms</div> |
|
</div> |
|
</div> |
|
|
|
<div class="error-log" id="errorLog"> |
|
<div class="error-line">[ERROR] Database connection pool exhausted</div> |
|
<div class="error-line">[ERROR] Load balancer timeout after 30s</div> |
|
<div class="error-line">[ERROR] Cache miss ratio: 89%</div> |
|
<div class="error-line">[FATAL] System unresponsive - shutting down</div> |
|
</div> |
|
</div> |
|
|
|
<div class="action-buttons"> |
|
<button class="action-button retry-button" onclick="retryLevel()"> |
|
Try Again |
|
</button> |
|
<a href="/game-modes" class="action-button menu-button"> |
|
Main Menu |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
// Recovery transition after 15 seconds |
|
setTimeout(() => { |
|
// Start recovery transition after message appears |
|
setTimeout(() => { |
|
document.body.classList.add('recovering'); |
|
|
|
// Update text content during recovery |
|
setTimeout(() => { |
|
document.getElementById('failureTitle').textContent = 'SYSTEM RECOVERED'; |
|
document.getElementById('failureSubtitle').textContent = 'Diagnostics complete - Ready to try again'; |
|
document.getElementById('failureReason').textContent = 'System has been stabilized. Analysis complete. Ready for next attempt.'; |
|
|
|
// Update error log to show recovery |
|
const errorLog = document.getElementById('errorLog'); |
|
errorLog.innerHTML = ` |
|
<div class="error-line">[INFO] Running system diagnostics...</div> |
|
<div class="error-line">[INFO] Database connections restored</div> |
|
<div class="error-line">[INFO] Load balancer optimized</div> |
|
<div class="error-line">[SUCCESS] All systems operational</div> |
|
`; |
|
}, 1500); |
|
|
|
// Hide recovery message after transition |
|
setTimeout(() => { |
|
recoveryMessage.classList.remove('show'); |
|
}, 3000); |
|
}, 1000); |
|
}, 15000); |
|
|
|
// Add some random glitch effects (only during failure state) |
|
function addRandomGlitch() { |
|
if (!document.body.classList.contains('recovering')) { |
|
const title = document.querySelector('.failure-title'); |
|
title.style.animation = 'none'; |
|
setTimeout(() => { |
|
title.style.animation = 'titleGlitch 3s ease-in-out infinite'; |
|
}, 100); |
|
} |
|
} |
|
|
|
// Trigger random glitches only during failure state |
|
const glitchInterval = setInterval(() => { |
|
if (document.body.classList.contains('recovering')) { |
|
clearInterval(glitchInterval); |
|
} else { |
|
addRandomGlitch(); |
|
} |
|
}, 8000); |
|
</script> |
|
</body> |
|
</html>
|
|
|