TypeMatch/typeMatchv2.html at main · synthymental/TypeMatch · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TypeMatch</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="img/favicon.png"> <!-- Убедитесь, что favicon.png есть в папке img -->
  <link rel="stylesheet" href="tmAssets/junior_level.css">

  <!-- Google tag (gtag.js) - если используете -->
  <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID"></script> -->
  <!-- <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'YOUR_GA_ID');
  </script> -->

  <script src="tmAssets/libraries/p5.min.js"></script>
  <script src="tmAssets/matchtypep5.js"></script>
</head>

<body class="dark-theme"> <!-- Начальная тема темная, класс .dark-theme применен -->
  <div id="startScreen" class="start-screen">
    <h1>Type Match Junior</h1>
    <p class="game-goal">Get the maximum score in 3 minutes!</p>
    <p>Choose your difficulty:</p>
    <div class="difficulty-buttons">
      <button id="easyButton" class="difficulty-button">Easy (Only 'A')</button>
      <button id="hardButton" class="difficulty-button">Hard (All Letters)</button>
    </div>
  </div>

  <div id="gameContainer" class="game-container" style="display: none;">
    <header class="game-header">
      <div id="timerDisplay" class="ui-element timer">03:00</div>
      <div id="scoreDisplay" class="ui-element score">Score: 0</div>
    </header>

    <div class="game-wrapper">
      <main id="canvas-container">
        <!-- p5.js canvas will be inserted here -->
      </main>
    </div>

    <div class="game-ui-bottom">
      <div id="fontInfoContainer" class="ui-element font-info">
        <p class="font-info-title">Fonts in Game:</p>
        <!-- Font list will be inserted by JS -->
      </div>
      <button id="themeToggleButton" class="ui-element theme-button">☀️</button> <!-- Иконка для переключения на светлую -->
    </div>
  </div> <!-- Конец gameContainer -->

  <p class="text-left-bottom">CREATED BY <a href="http://www.instagram.com/synthymental/" target="_blank">DANIIL SVETLOV</a></p>
  <p class="text-right-bottom">ANY SUGGESTIONS <a href="mailto:synthymentalism@gmail.com" target="_blank">HERE</a></p>
</body>
</html>