Sorting-Visualizer/index.html at main · Anjali-collab21/Sorting-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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="A great visualization tool for the most famous sorting algorithms.
              Includes 6 different algorithms with multiple options that helps to know them more and compare
              between them."
    />
    <title>Sorting Visulaizer</title>
    <link rel="Stylesheet" href="sorting.css" />
    <link rel=" icon" href="favicon.ico" />
    <link rel =" Stylesheet" href="
    https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
  </head>

  <div class="video-container">
    <video autoplay loop muted play-inline class ="back-video">
      <source src="video1.mp4" type="video/mp4">
    </video>

         <nav class="navbar">
      <ul>
        <li><a href="index1.html" onclick ="navigateTopage('index1.html')">Bubble Sort</a></li>
        <li><a href="index2.html" onclick = "navigateTopage('index2.html')">Insertion Sort</a></li>
        <li><a href="index3.html" onclick = "navigateTopage('index3.html')">Selection Sort</a></li>
        <li><a href="index4.html" onclick ="navigateTopage('index4.html')">Merge Sort</a></li>
        <li><a href="index5.html" onclick ="navigateTopage('index5.html')">Quick Sort</a></li>
              </ul>
    </nav>

    <div id="header">
            <h4 align="center"> Sorting </h4>
        <br/>
             <h4 align="center"> Visualizer </h4>
    </div>

    <div id="cover">
      <div id="description-box">
        <h2 style="font-family: 'Electrolize', Courier, monospace">
         <b>Sorting Algorithms</b>
        </h2>
        <div class="description-content">
          <p>
            Sorting algorithms are used to sort a data structure according to a
            specific order relationship, such as numerical order or
            lexicographical order.This operation is one of the most important and widespread in
            computer science. For a long time, new methods have been developed
            to make this procedure faster and faster.
          </p>
          <p>
            There are currently hundreds of different sorting algorithms, each
            with its own specific characteristics. They are classified according
            to two metrics: space complexity and time complexity.<br /><br />
            Those two kinds of complexity are represented with
            <a
 href="https://www.programiz.com/dsa/asymptotic-notations#:~:text=Asymptotic%20notations%20are%20the%20mathematical,linear%20i.e
 .%20the%20best%20case."
              target="_blank"
              >asymptotic notations</a
            >, mainly with the symbols O, <span class="symbol">Θ</span>,
            <span class="symbol">Ω</span>, representing respectively the upper
            bound, the tight bound, and the lower bound of the algorithm's
            complexity, specifying in brackets an expression in terms of
            <code><var>n</var></code
            >, the number of the elements of the data structure.<br /><br />
            Most of them fall into two categories:
          </p>
          <ol>
            <li>
              <b><u>A. Logarithmic:-</u></b>
                <br />
                <br/>

                </li>
              The complexity is proportional to the binary logarithm (i.e to the
              base 2) of <code><var>n</var></code
              >. An example of a logarithmic sorting algorithm is Quick sort, with
              space and time complexity O<code>(n × log n)</code>.<br /><br />
            </li>
            <li>
              <b> <u>B. Quadratic:-</u></b><br />
              <br />
              The complexity is proportional to the square of
              <code><var>n</var></code>. An example of a quadratic sorting algorithm is Bubble sort, with a
              time complexity of O<code>(n<sup>2</sup>)</code>. Space and time complexity can also be further subdivided into 3
              different cases: best case, average case and worst case.
            </li>
          </ol>
          <p>
            Sorting algorithms can be difficult to understand and it's easy to
            get confused. We believe visualizing sorting algorithms can be a
            great way to better understand their functioning while having fun!
          </p>
                  </div>
      </div>
    </div>
    <footer class="footer">
      <div class="container">
        <div class="col1">
         <div class="media-icons">
          <p> <b>Reference </b></p>
          <div class="m-icons">
            <a href="https://github.com/shi123vani/Sorting-Visualizer"><i class="fa-brands fa-github"></i></a>

            <a href ="https://en.wikipedia.org/wiki/Sorting_algorithm"><i class="fa-brands fa-wikipedia-w"></i></a>
          </div>
          </div>
        </div>
        <div class="col2">
          <ul>
            <br>
            <li>Contacts</a>
              <br>
                 <br>
            anjalibariya214@gmail.com
            <br>
            <br>
            </li>
          </ul>
        </div>

        <div class ="col3">
          <p> ©2024 </p>
          <p> Anjali Bariya</p>
        </div>
         </form>
        </div>
      </div>
        </div>
      </div>
    </footer>
    <script src="script/main1.js"></script>
    </body>
</html>