Fizo_Game/index.html at main · fisayoadabs/Fizo_Game · 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
<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Fizo</title>
  <link rel="stylesheet" href="./style.css" />
  <script src="./wordle.js"></script>
</head>

<body>
  <header>
    <div id="shuffle-container">
      <label id="shuffle">&#9776</label>
      <div id="shuffle-options">
        <label id="four">4-Letter</label>
        <label id="five">5-Letter</label>
        <label id="six">6-Letter</label>
        <label id="random">Random</label>
      </div>
    </div>
    <h1 id="word">Fizo</h1>
    <div id="icons">
      <label id="dark">&#9681</label>
      <label id="question">&#63</label>
      <label id="exclaim">&#9432</label>
    </div>
  </header>

  <div class="split">
    <div id="left">
      <div id="table"></div>
      <img src="https://media.tenor.com/4NWj_bMKm9QAAAAM/tyler-hynes-falling-for-you.gif" id="winner">
      <img
        src="https://media1.giphy.com/media/xTiIzFfQlzj8caUOGI/giphy.gif?cid=6c09b952bc9182c64a7b6db2a9fc6d5fffa9d9d3ee936819&ep=v1_internal_gifs_gifId&rid=giphy.gif&ct=g"
        id="loser">
      <label id="start">Start Over</label>
      <div id="lost"></div>
      <div id="won"></div>
      <div id="hint"></div>
      <div id="keyboard"></div>
    </div>
    <div id="right">
      <h2>How To Play</h2>
      <ul>
        <li>Start typing. The letters will appear in the boxes</li>
        <li>Remove letters with Backspace</li>
        <li>Hit Enter/Return to submit an answer</li>
        <li>Letters with green background are in the right spot</li>
        <li>Letters with yellow background exist in the word, but are in the wrong spots</li>
        <li>Letters with grey background do not exist in the word</li>
        <li>If you need a hint, click the ? icon</li>
        <li>Click the menu button on the top left side to decide the mode you want</li>
      </ul>
    </div>
  </div>
  <footer> &#169; fiztech 2023</footer>
</body>

</html>