44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Typing Speed & RSI Awareness Game</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<h1>Fast Fingers, Healthy Habits</h1>
|
|
<p style="font-style: italic; margin-top: -5px; color: #555;">
|
|
Type fast. Type smart. Stay safe.
|
|
</p>
|
|
|
|
<div class="game-container">
|
|
<button id="dark-mode-toggle">🌙 Toggle Dark Mode</button>
|
|
<div id="session-timer">You've been typing for 0 minutes.</div>
|
|
<div id="high-score">🏆 Highest Score: 0</div>
|
|
|
|
<h1>Typing Speed & RSI Awareness</h1>
|
|
<div id="word-display">Start</div>
|
|
<input type="text" id="word-input" placeholder="Type here..." autofocus />
|
|
|
|
<div class="stats">
|
|
<span id="score">Score: 0</span>
|
|
<span id="accuracy">Accuracy: 100%</span>
|
|
<span id="timer">Time: 0:00</span>
|
|
</div>
|
|
|
|
<div id="rsi-tip" class="tip-box">💡 Keep your wrists straight while typing.</div>
|
|
<div id="stretch-popup" class="stretch-popup"></div>
|
|
|
|
<div class="gif-container">
|
|
<img id="stretch-gif"
|
|
src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHpoc3hwOTQ4Nm0xcWowN2h3ODhudXdybnYzdWJrZ2JiamNkajU3eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/395GQQavHm5CPXboEG/giphy.gif"
|
|
alt="Stretch your hands!"
|
|
style="display: none; width: 140px; border-radius: 12px;" />
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|