-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
134 lines (121 loc) · 4.4 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
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta info -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="SortVisual is a web platform which is used to visualize the sorting algorithms. It supports Merge, Quick, Bubble, Heap, Selection, Insertion, Shell, Cocktail shaker, comb, and cycle sort.">
<meta name="keywords" content="algorithms, visualization, sorting algorithms, heap sort, merge sort, quick sort, bubble sort, selection sort, insertion sort, shell sort, cocktail-shaker sort, comb sort, cycle sort, sorting algorithms visualization">
<!-- google fonts link -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
<!-- internal CSS -->
<link rel="stylesheet" href="scss/style.css" />
<!-- title -->
<title>SortVisual - Visualise things for ease</title>
</head>
<body>
<!-- left sidebar for extra algos -->
<div id="extra-algos-sidebar-container">
<div id="extra-algos-container">
<span class="insertion button">Insertion</span>
<span class="shell button">Shell</span>
<span class="cocktail-shaker button">Cocktail Shaker</span>
<span class="comb button">comb</span>
<span class="cycle button">cycle</span>
</div>
<div id="extra-algos-container-toggler">
<img src="img/icons/forward-arrow.svg" alt="arrow" />
</div>
</div>
<!-- github link -->
<div id="github-link-container">
<a href="https://github.com/dipanshparmar/sortvisual" target="_blank">
<img src="img/octocat.svg" alt="octocat" />
</a>
</div>
<!-- header with navbar and stuff8 -->
<header>
<!-- logo section8 -->
<div id="logo">
<span class="logo-text">SortVisual</span>
</div>
<!-- hamburger for controls -->
<div id="controls-hamburger">
<img src="./img/icons/hamburger.svg" alt="controls">
</div>
<!-- controls with speed and size controlling -->
<div id="controls">
<div id="speed-controls-container">
<span>Speed</span>
<input
class="slider"
type="range"
name="speed"
id="speed-control"
min="0"
max="101"
value="50"
step="20"
/>
</div>
<div id="size-controls-container">
<span>Size</span>
<input
class="slider"
type="range"
name="size"
id="size-control"
min="10"
max="101"
value="50"
step="10"
/>
</div>
</div>
<!-- different sorting algos selection -->
<div id="options">
<span class="merge button">Merge</span>
<span class="quick button">Quick</span>
<span class="bubble button">Bubble</span>
<span class="heap button">Heap</span>
<span class="selection button">Selection</span>
</div>
<!-- generate new array button -->
<div id="new-array-button">
<button type="button" id="new-array">
<span>new array</span>
</button>
</div>
<!-- hamburger -->
<div id="hamburger">
<img src="./img/icons/hamburger.svg" alt="menu">
</div>
</header>
<!-- header closes -->
<!-- algorithms working body -->
<main>
<div id="important-info-container">
<span>Best case time complexity: <strong class="bctc">?</strong></span>
<span>Worst case time complexity: <strong class="wctc">?</strong></span>
<span>Average case time complexity: <strong class="actc">?</strong></span>
<span>Space complexity: <strong class="sc">?</strong></span>
</div>
<div id="visualizer-container">
<!-- dynamic bars go here -->
</div>
<div id="additional-info-container">
<span>Stable: <strong class="stability">?</strong></span>
</div>
</main>
<!-- internal script -->
<script type="module" src="js/interface.js"></script>
<script type="text/javascript" src="js/sideBars.js"></script>
<script type="module" src="js/main.js"></script>
</body>
</html>