page6.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/Css/style.css"/>
    <title>Quick Sort</title>    
    <style>
        * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  .header {
    font-size: 30px;
    text-align: center;
  }
  #array {
    background-color: rgb(204, 104, 104);
    height: 410px;
    width: 1500px;
    margin: auto;
    position: relative;
    margin-top: 90px;
  }
  .block {
    width: 20px;
    background-color: #6cc983;
    position: absolute;
    bottom: 0px;
    transition: 0.2s all ease;
  }
  .block_id {
    position: absolute;
    color: black;
    margin-top: -20px;
    width: 100%;
    text-align: center;
  }
  .block_id2 {
    position: absolute;
    color: black;
    margin-top: 22px;
    width: 100%;
    text-align: center;
  }
  .block2 {
    width: 28px;
    background-color: rgb(255, 116, 116);
    position: absolute;
    transition: 0.2s all ease;
  }
  .block_id3 {
    position: absolute;
    color: rgb(0, 0, 0);
    margin-top: 1px;
    width: 100%;
    text-align: center;
  }
  #count {
    height: 60px;
    width: 1500px;
    margin: auto;
  }
  .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: 70%;
    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>
  </head>
  <body>
    <br/>
    <p class="header">Quick Sort</p>
    <button id="myBtn" style="font-size: larger; background-color: #6cc983;">Complexity</button>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Worst Case Time Complexity = O(N^2)</p>
        <p>Average Case Time Complexity = O(N*log(N))</p>
        <p>Best Case Time Complexity = O(N*log(N))</p>
        <p>Space Complexity = O(N)</p>
      </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 id="array"></div>
    <div id="count"></div><br/>
    <h2 class="range" style="text-align: center"></h2>
    <script src="/Codes/quick.js"></script>
  </body>
</html>