LogicPuzzle/index.html at main · DaceT/LogicPuzzle · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <title>Logic Puzzle</title>
</head>
  <body>
    <header id="showcase">
      <h1>Logic Puzzles</h1>
      <p>The ultimate test of your deduction skills.</p>
      <!-- Trigger/Open The Modal -->
      <button id="myBtn">Read More</button>

      <!-- The Modal -->
      <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
          <span class="close">&times;</span>
          <p>Logic Puzzles is a game where players can use deductive reasoning to solve elimination grid puzzles.
           Players can select between single and multiplayer game modes.Players will also be able to see
           how they rank on different puzzle leaderboards and see their win/loss ratio against friends.</p>
        </div>

      </div>
      <div class="flex">
        <a href="login.html" class="flex-child" >Sign In</a>
        <a href="login.html" class="flex-child" >Sign Up</a>
      </div>
    </header>

    <script>
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on the button, open the modal
    btn.onclick = function() {
      modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>


  </body>
</html>