BoltType/index.html at main · mananmadani/BoltType · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="theme-color" content="#0d0f1a" />
  <meta name="description" content="BoltType – Test your typing speed on mobile!" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <title>BoltType</title>
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;800&display=swap" rel="stylesheet" />
</head>
<body>

  <canvas id="bg-canvas"></canvas>

  <div class="app-wrapper">

    <header class="app-header">
      <div class="logo-wrap">
        <img src="BoltType.png" alt="BoltType Logo" class="logo-img" onerror="this.style.display='none'" />
        <span class="logo-text">Bolt<span class="logo-accent">Type</span></span>
      </div>
      <div class="badge" id="mode-badge">READY</div>
    </header>

    <div class="stats-bar">
      <div class="stat-pill">
        <span class="stat-icon">⏱</span>
        <span class="stat-value" id="timer-display">60</span>
        <span class="stat-label">SEC</span>
      </div>
      <div class="stat-pill stat-pill--center">
        <span class="stat-value large" id="wpm-display">0</span>
        <span class="stat-label">WPM</span>
      </div>
      <div class="stat-pill">
        <span class="stat-icon">🏆</span>
        <span class="stat-value" id="highscore-display">0</span>
        <span class="stat-label">BEST</span>
      </div>
    </div>

    <main class="typing-card" id="typing-card">
      <div class="idle-screen" id="idle-screen">
        <p class="idle-hint">Press <strong>Start</strong> and type as fast as you can!</p>
        <div class="bolt-icon">⚡</div>
      </div>
      <div class="text-display" id="text-display" aria-live="polite"></div>
      <div class="accuracy-bar-wrap" id="accuracy-wrap" style="display:none">
        <div class="accuracy-bar-track">
          <div class="accuracy-bar-fill" id="accuracy-bar"></div>
        </div>
        <span class="accuracy-label" id="accuracy-label">100%</span>
      </div>
    </main>

    <input
      type="text"
      id="hidden-input"
      class="hidden-input"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
      spellcheck="false"
      aria-label="Typing input"
    />

    <div class="controls">
      <button class="btn btn--start" id="start-btn">Start Game</button>
      <button class="btn btn--ghost" id="reset-btn" style="display:none">↺ Restart</button>
    </div>

    <div class="results-overlay" id="results-overlay" style="display:none">
      <div class="results-card">
        <div class="results-title">⚡ Round Over</div>
        <div class="results-grid">
          <div class="result-item">
            <span class="result-num" id="result-wpm">0</span>
            <span class="result-lbl">WPM</span>
          </div>
          <div class="result-item">
            <span class="result-num" id="result-acc">0%</span>
            <span class="result-lbl">Accuracy</span>
          </div>
          <div class="result-item">
            <span class="result-num" id="result-chars">0</span>
            <span class="result-lbl">Chars</span>
          </div>
        </div>
        <div class="new-best" id="new-best" style="display:none">🏆 New High Score!</div>
        <button class="btn btn--start" id="play-again-btn">Play Again</button>
      </div>
    </div>

  </div>

  <script src="app.js"></script>
</body>
</html>