Sunbelt Computer Software

PL/B Language Development and Support

serpbyte/index.html at main · muhammadhammadtech/serpbyte · GitHub

Repository navigation

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>