-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
98 lines (91 loc) · 4.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array Simulator</title>
<link rel="icon" type="image/x-icon" href="./img/favi.jpg">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="togglebtn.css" />
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<!--modal section-->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content text-dark">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Performace of Your Sort</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="content">
<span>...</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Header section-->
<nav class="navbar fixed-top">
<div class="container-fluid ">
<a href="#"> <h2>Sorting Visualizer</h2> </a>
<div class="two-components">
<div class="toggle-container">
<input id="switch" type="checkbox" name="theme">
<label class="toggleLabel" for="switch"></label>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Sorting Options</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<button type="button" id="newArray" class="mg-lg-3 btn btn-outline-success newArray">Array Generator</button>
</li>
<div class="p-lg-3 input">
<span id="size" class="m-lg-2" ><span class="p-lg-2">Size</span><input id="arr_sz" type="range" min="5" max="100" step=1 value=60></span>
<span id="speed" class="m-lg-2" ><span class="p-lg-2">Speed</span><input id="speed_input" type="range" min="20" max="500" stepDown=10 value=60></span>
</div>
<div class="d-grid gap-3 diff-sorts">
<button type="button" class="btn bubbleSort" data-bs-dismiss="offcanvas">Bubble Sort</button>
<button type="button" class="btn selectionSort" data-bs-dismiss="offcanvas">Selection Sort</button>
<button type="button" class="btn insertionSort" data-bs-dismiss="offcanvas">Insertion Sort</button>
<button type="button" class="btn mergeSort" data-bs-dismiss="offcanvas">Merge Sort</button>
<button type="button" class="btn quickSort" data-bs-dismiss="offcanvas">Quick Sort</button>
<button type="button" class="btn performance" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-bs-dismiss="offcanvas">Performance</button>
</div>
</ul>
</div>
</div>
</div>
</nav>
<body class="p-2 mb-2">
<h2 id="title">Unsorted Array</h2>
<div id="bars" class="flex-container"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="togglebtn.js"></script>
<script src="sort.js"></script>
<script src="bubble.js"></script>
<script src="selection.js"></script>
<script src="insertion.js"></script>
<script src="quick.js"></script>
<script src="merge.js"></script>
</body>
</html>