Sorting-Algorithm-Visualizer/page1.html at main · SyedaRaviaEjaz/Sorting-Algorithm-Visualizer · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Algo Project</title>
    <link rel="stylesheet" type="text/css" href="/Css/style1.css" />

  </head>
  <body>
    <style>
      body {
        background-image: url('/Images/sorting.jpg');
      }
      .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #7fcbe9;
    margin: auto;
    padding:20px;
    font-size: larger;
    border: 1px solid #888;
    width: 80%;
    text-align: center;
  }
  .close {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: rgb(250, 248, 248);
    text-decoration: none;
    cursor: pointer;
  }
      </style>
    <div class="main">
      </video>
      <div class="overlay"></div>
      <div class="navbar">
        <ul>

        </ul>
      </div>
      <div class="heading">
        <br><br><br><br><br><br><br><br><br>
        <h1 class="head" style="margin: 50px;">WELCOME TO <span>SORTING APP</span></h1>
        <h3 class="sub">Choose your Sorting Algorithm</h3>
        <button id="myBtn" style="font-size: larger; background-color:rgb(228, 80, 80); cursor: pointer; ">Enter</button>
        <br><br><br><div style=" background-color: rgb(56, 53, 53);
        width: 300px;
        border: 15px solid rgb(21, 126, 21);
        padding: 0%;
        margin: 5px; display: inline-block;">
      <h3>PROJECT BY:</h3>
      <ul >
        <li>Ayesha Zia (20K-0414)</li>
        <li>Syeda Ravia Ejaz (20k-0246)</li>
      </ul>
    </div>

        <div id="myModal" class="modal">
     <div class="modal-content">
       <span class="close">&times;</span>
       <form action="/action_page.php"><input type="file" id="myFile" name="filename"></form>
       <a href="page2.html"><br>
        <button onclick="doSomething()" style="font-size: larger;
          font-family:Verdana, Geneva, Tahoma, sans-serif
            background-color: #333333;
            color:rgb(204, 8, 93);
            border-radius: 10px;
            cursor: pointer;
          "
        >
         ENTER
        </button>
      </a>
      <script>
        function doSomething() {
          document.getElementById("test").innerHTML = "Goodbye";
        }
      </script>
     </div>
   </div>
   <script>
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
      modal.style.display = "block";
    }
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
    </script>
        </div>
      </div>
    </div>
  </body>
</html>