serpbyte/index.html at main · muhammadhammadtech/serpbyte · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SerpByte</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app-shell">
      <section class="game-card" aria-label="Snake game panel">
        <header class="game-header">
          <h1 class="brand" aria-label="SerpByte">
            <span class="brand-mark" aria-hidden="true">
              <svg viewBox="0 0 64 64" role="img" aria-label="SerpByte logo">
                <defs>
                  <linearGradient id="logoBody" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#95d56d" />
                    <stop offset="100%" stop-color="#4b7b2a" />
                  </linearGradient>
                </defs>
                <rect x="4" y="4" width="56" height="56" rx="16" fill="#163920" />
                <path
                  d="M48 18c-11-6-27 1-27 12 0 7 9 9 14 11 3 1 4 2 4 4 0 4-7 6-14 2"
                  fill="none"
                  stroke="url(#logoBody)"
                  stroke-width="8"
                  stroke-linecap="round"
                />
                <circle cx="47" cy="17" r="2.5" fill="#f8fafc" />
              </svg>
            </span>
            <span class="brand-text">Serp<span>Byte</span></span>
          </h1>
          <div class="scoreboard" aria-live="polite">
            <span class="metric">🍎 Apple: <span id="appleCount">0</span></span>
            <span class="metric">🏆 Score: <span id="score">0</span></span>
          </div>
        </header>

        <div class="game-stage">
          <canvas
            id="gameCanvas"
            width="480"
            height="480"
            role="img"
            aria-label="Snake game board"
          ></canvas>
          <div id="startOverlay" class="start-overlay">
            <div class="start-card">
              <p class="start-title">Ready to Hunt?</p>
              <button id="playBtn" type="button">Play</button>
            </div>
          </div>
        </div>

        <div class="controls">
          <button id="restartBtn" type="button">Restart</button>
          <label class="difficulty" for="difficultySelect">
            Difficulty
            <select id="difficultySelect">
              <option value="low">Low</option>
              <option value="medium" selected>Medium</option>
              <option value="high">High</option>
            </select>
          </label>
          <p id="statusText">Use arrow keys to play.</p>
        </div>

        <div class="mobile-pad" aria-label="Touch arrow controls">
          <div class="pad-grid">
            <button type="button" class="pad-btn pad-up" data-dir="up" aria-label="Move up">▲</button>
            <button type="button" class="pad-btn pad-left" data-dir="left" aria-label="Move left">◀</button>
            <button type="button" class="pad-btn pad-right" data-dir="right" aria-label="Move right">▶</button>
            <button type="button" class="pad-btn pad-down" data-dir="down" aria-label="Move down">▼</button>
          </div>
        </div>
      </section>
    </main>
    <footer class="beta-footer" aria-label="Release channel">
      <span class="beta-pill">
        <span class="beta-mark" aria-hidden="true">
          <svg viewBox="0 0 64 64" role="img" aria-label="Beta logo">
            <defs>
              <linearGradient id="betaGlow" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#b9ef88" />
                <stop offset="100%" stop-color="#4e8a2e" />
              </linearGradient>
            </defs>
            <rect x="6" y="6" width="52" height="52" rx="14" fill="#1b4425" />
            <path d="M21 18h14c7 0 11 4 11 9 0 4-2 7-6 8 5 1 7 4 7 8 0 6-5 11-13 11H21z" fill="url(#betaGlow)" />
            <path d="M29 25v8h5c3 0 5-1 5-4s-2-4-5-4zm0 15v8h6c3 0 5-2 5-4s-2-4-5-4z" fill="#eaf9d9" />
          </svg>
        </span>
        <span class="beta-text">BETA VERSION</span>
      </span>
    </footer>

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