-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (122 loc) · 6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A Website to demonstrate the working of different types of sorting">
<meta name="title" content="Sorting Visualizer by Kaustubh">
<meta name="author" content="Kaustubh Vats">
<meta name="country" content="IN">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#030031">
<meta name="keywords"
content="sorting visualizer, sorting techniques, learn algorithms, learn sorting, sorting demo">
<title>Sorting Visualizer by Kaustubh</title>
<!-- Facebook meta tags -->
<meta property="og:type" content="Website" />
<meta property="og:title" content="Sorting Visualizer by Kaustubh" />
<meta property="og:description" content="A Website to demonstrate the working of different types of sorting" />
<meta property="og:image" content="https://sorting-visualizer-kaustubh.netlify.app/screenshots/2.jpeg" />
<meta property="og:url" content="https://sorting-visualizer-kaustubh.netlify.app/">
<!-- twitter meta tags -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://sorting-visualizer-kaustubh.netlify.app/">
<meta property="twitter:title"
content="Sorting Visualizer by Kaustubh">
<meta property="twitter:description"
content="A Website to demonstrate the working of different types of sorting">
<meta property="twitter:image"
content="https://sorting-visualizer-kaustubh.netlify.app/screenshots/2.jpeg">
<link rel="stylesheet" href="/css/header.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="/css/atom-one-dark.min.css">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<nav id="header" class="helloheader">
<div class="logo">Sorting Visualizer</div>
<ul class="nav-links">
<li class="lis">
<div class="algorithms">
<button onclick="showDropDown('algorithms')">Select an Algorithm
<i class="fas fa-angle-down"></i></button>
<ul class="invisible-links">
<li onclick="selectthis(this,'algorithms')">Bubble Sort</li>
<li onclick="selectthis(this,'algorithms')">Insertion Sort</li>
<li onclick="selectthis(this,'algorithms')">Selection Sort</li>
<li onclick="selectthis(this,'algorithms')">Quick Sort</li>
<li onclick="selectthis(this,'algorithms')">Merge Sort</li>
<li onclick="selectthis(this,'algorithms')">Shell Sort</li>
<li onclick="selectthis(this,'algorithms')">Heap Sort</li>
<li onclick="selectthis(this,'algorithms')">Counting Sort</li>
<li onclick="selectthis(this,'algorithms')">Cycle Sort</li>
<li onclick="selectthis(this,'algorithms')">Cocktail Sort</li>
<li onclick="selectthis(this,'algorithms')">Radix Sort</li>
<li onclick="selectthis(this,'algorithms')">Gnome Sort</li>
</ul>
</div>
</li>
<li class="lis">
<div class="array-size">
<button onclick="showDropDown('array-size')">Size of Array <i
class="fas fa-angle-down"></i></button>
<ul class="invisible-links">
<li onclick="selectthis(this,'array-size')">5</li>
<li onclick="selectthis(this,'array-size')">10</li>
<li onclick="selectthis(this,'array-size')">20</li>
<li onclick="selectthis(this,'array-size')">30</li>
<li onclick="selectthis(this,'array-size')">50</li>
<li onclick="selectthis(this,'array-size')">75</li>
<li onclick="selectthis(this,'array-size')">100</li>
</ul>
</div>
</li>
<li class="lis">
<button id="rand-button" onclick="setArray()">Randomize</button>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="main-div">
<p id="instruction"></p>
</div>
<div class="relative-div">
<span onclick="beginSorting(this)" class="round-button"><i class="fa fa-play fa-2x"></i></span>
</div>
<div class="data-div">
<div class="code-div">
<pre>
<code id="code">
<H1>Code</H1>
</code>
</pre>
</div>
<div class="details-div">
<div id="speedDiv">
<p>Speed:
<p id='speedp'>550</p>
</p>
</div>
<input onchange="changeSpeed(this)" id="speed" type="range" min="100" max="1000" value="550">
<h1 id='algoName'>Algo Name</h1>
<p id='complexity'>
</p>
</div>
</div>
<footer>
<p>Made with<i class="fas fa-heart"></i> by <a class="footer-name" target="_blank" href="#">Mohammed Farooq</a></p>
<div>
<a href="https://github.com/mo7ammedfarooq/Sorting-Visualiser" target="_blank" class="github-link"><i class="fab fa-github"></i> Github Repo</a>
</div>
</footer>
<script type="text/javascript" src="/js/algo.js"></script>
<script type="text/javascript" src="/js/header.js"></script>
<script type="text/javascript" src="/js/highlight.min.js"></script>
</body>
</html>