Enerquest/modo.html at main · PedroLima-07/Enerquest · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>EnerQuest - Seleção de Modo</title>

  <link rel="stylesheet" href="/Enerquest/assets/css/pages/modo/modo.css" />
</head>

<body>
  <!-- TUTORIAL -->
  <div id="tutorial-overlay" class="tutorial-overlay">
    <div class="tutorial-card">
      <div
        id="tutorial-content"
        class="tutorial-container-split">
      </div>
      <div class="tutorial-nav">
        <button
          class="nav-arrow"
          id="btn-prev"
          onclick="prevStep()">
          &#10094;
        </button>

        <button
          class="nav-arrow"
          id="btn-next"
          onclick="nextStep()">
          &#10095;
        </button>
      </div>

      <button
        class="close-tutorial"
        onclick="closeTutorial()">
        Pular Tutorial
      </button>
    </div>
  </div>

  <!-- LOGO -->
  <div class="logo">
    <img
      src="./assets/img/logo2UPX.png"
      alt="logo"
    />
  </div>

  <!-- SUBTÍTULO -->
  <div class="subtitle">
    <h2>
      Selecione o seu modo de jogo
    </h2>
  </div>

  <!-- CARDS -->
  <div class="container_card">
    <!-- ESTUDO -->
    <div class="card">
      <div class="card-img">
        <img
          src="./assets/img/Livro mágico e brilhante .png"
          alt="Estudo"
        />
      </div>
      <div class="card-title">
        <h3>Modo Estudo</h3>
      </div>
      <div class="card-text">
        <p>
          Aprenda os conceitos básicos.
          Sem pressa, sem pontos.
        </p>
      </div>
      <span class="hover-message">
        Comece sua jornada aqui
      </span>
      <div class="card-button">
        <a href="./estudo/modo-estudo.html">
          <button>
            Estudar
          </button>
        </a>
      </div>
    </div>
    <!-- SOLO -->
    <div class="card">
      <div class="card-img">
        <img
          src="./assets/img/Ícone de usuário iluminado .png"
          alt="Solo"
        />
      </div>
      <div class="card-title">
        <h3>Modo Solo</h3>
      </div>
      <div class="card-text">
        <p>
          Enfrente o Quiz e acumule
          pontos e conquistas.
        </p>
      </div>
      <span class="hover-message">
        Teste seus conhecimentos
      </span>
      <div class="card-button">
        <a href="./solo/quiz.html">
          <button>
            Jogar
          </button>
        </a>
      </div>
    </div>
    <!-- MULTIPLAYER -->
    <div class="card">
      <div class="card-img">
        <img
          src="./assets/img/Ícones humanos estilizados e brilhantes .png"
          alt="Multiplayer"
        />
      </div>
      <div class="card-title">
        <h3>Modo Multiplayer</h3>
      </div>
      <div class="card-text">
        <p>
          Desafie seus amigos e veja
          quem sabe mais.
        </p>
      </div>
      <span class="hover-message">
        Prove seu nível localmente
      </span>
      <div class="card-button">
        <!-- BOTÃO CORRIGIDO -->
        <a href="./multiplayer/multiplayer.html">
          <button>
            Desafiar
          </button>
        </a>
      </div>
    </div>
  </div>
  <!-- TEXTO INFERIOR -->
  <p class="bottom-guide">

    Comece pelo modo Estudo,
    evolua no Solo e prove seu nível
    no Multiplayer.

  </p>
  <!-- JS -->
  <script src="./assets/js/pages/Modo/tutorial.js"></script>
</body>
</html>