games.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Games — Python Pro Hub</title><link rel="stylesheet" href="style.css"></head><body><nav class="nav"><div class="container nav-inner"><a class="brand" href="index.html">PYTHON <span>PRO HUB</span></a><div class="nav-links"><a href="index.html">Home</a><a href="python.html">Python</a><a href="tools.html">Dev Tools</a><a href="games.html">Games</a><a href="portfolio.html">Portfolio</a><a href="about.html">About</a></div><button class="btn btn-secondary mobile-menu" data-menu>Menu</button></div></nav><header class="page-head"><div class="container"><span class="kicker">MINI GAMES</span><h1>Code. Break. <span class="accent">Play.</span></h1><p>Two lightweight games built with plain JavaScript.</p></div></header><main class="section"><div class="container tools-grid"><section class="game-box"><h2>Reaction Test</h2><p class="section-lead">Click the box, wait for green, then click as fast as you can.</p><div class="game-stage" id="reactionStage">Click to start</div><div class="result" id="reactionScore">Your score will appear here.</div></section><section class="game-box"><h2>Guess the Number</h2><p class="section-lead">I picked a number from 1 to 20.</p><input class="field" id="guessInput" type="number" min="1" max="20" placeholder="Enter 1-20"><div class="actions"><button class="btn btn-primary" id="guessBtn">Guess</button></div><div class="result" id="guessMsg">Start guessing.</div></section></div></main><footer class="footer"><div class="container footer-inner"><span>© <span data-year></span> Python Pro Hub</span><span>Built with JavaScript.</span></div></footer><script src="app.js"></script><script src="games.js"></script></body></html>