Skip to content

Commit 1c45f60

Browse files
SyedMuhammadFaheemSyedMuhammadFaheem
committed
Initial Commit
0 parents  commit 1c45f60

File tree

6 files changed

+640
-0
lines changed

6 files changed

+640
-0
lines changed

‎arrayfile.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
"80,73,20,89,24,86,96,71,43,21,64"

‎images/4030.png

6.96 KB
Loading

‎images/algo2.png

71.1 KB
Loading

‎index.html

+306
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Algo Visualisation</title>
9+
<link href="style.css" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@500&display=swap" rel="stylesheet">
13+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
14+
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
15+
</head>
16+
17+
<body>
18+
<section class="title">
19+
<div class="container-fluid">
20+
21+
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark py-4">
22+
<div class="container-fluid">
23+
<img src="images/4030.png" alt="Bootstrap" width="30" height="24">
24+
<a class="navbar-brand" href="#">FI-ALGOS.com</a>
25+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
26+
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
27+
aria-expanded="false" aria-label="Toggle navigation">
28+
<span class="navbar-toggler-icon"></span>
29+
</button>
30+
<div class="collapse navbar-collapse text-bg-dark" id="navbarSupportedContent">
31+
<ul class="navbar-nav ms-auto">
32+
<li class="nav-item">
33+
<a class="nav-link active" href="#">Home</a>
34+
</li>
35+
<li class="nav-item dropdown">
36+
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
37+
aria-expanded="false">
38+
Sortings
39+
</a>
40+
<ul class="dropdown-menu">
41+
<li><a href="#insertion-sort" class="dropdown-item" href="#">Insertion</a></li>
42+
<li><a href="#merge-sort" class="dropdown-item" href="#">Merge</a></li>
43+
<li><a href="#bubble-sort" class="dropdown-item" href="#">Bubble</a></li>
44+
<li><a href="#heap-sort" class="dropdown-item" href="#">Heap</a></li>
45+
<li><a href="#quick-sort" class="dropdown-item" href="#">Quick</a></li>
46+
<li><a href="#radix-sort" class="dropdown-item" href="#">Radix</a></li>
47+
<li><a href="#bucket-sort" class="dropdown-item" href="#">Bucket</a></li>
48+
<li><a href="#counting-sort" class="dropdown-item" href="#">Counting</a></li>
49+
</ul>
50+
</li>
51+
52+
</ul>
53+
54+
55+
</div>
56+
</div>
57+
</nav>
58+
59+
60+
<div class="row">
61+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
62+
<h1>We Sort it<br> for you!</h1>
63+
</div>
64+
<div class="col-lg-6">
65+
<img src="images/algo2.png" style=" height: 400px; width: 500px; border-radius: 20px;" alt="">
66+
</div>
67+
68+
</div>
69+
70+
<div class="row">
71+
<div class="col-lg-6">
72+
<div class="mb-3">
73+
<label for="formFile" class="form-label text-white">Input file containing elements of array</label>
74+
<input class="form-control" type="file" id="formFile">
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</section>
81+
82+
<section id="insertion-sort"class="sorting">
83+
<div class="container-fluid">
84+
<div class="row">
85+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
86+
<h2>Insertion<br> Sort</h2>
87+
</div>
88+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
89+
<div class="chart"></div>
90+
91+
</div>
92+
</div>
93+
<div class="row">
94+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
95+
<button id='ins-btn' type="button" class="btn btn-success">Start Sorting</button>
96+
</div>
97+
</div>
98+
</div>
99+
</section>
100+
101+
<hr class="mt-2 mb-3"/>
102+
<section id="merge-sort" class="sorting">
103+
<div class="container-fluid">
104+
<div class="row">
105+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
106+
<h2>Merge<br> Sort</h2>
107+
</div>
108+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
109+
<div class="chart"></div>
110+
111+
</div>
112+
</div>
113+
<div class="row">
114+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
115+
<button type="button" class="btn btn-success">Start Sorting</button>
116+
</div>
117+
</div>
118+
</div>
119+
</section>
120+
121+
122+
<hr class="mt-2 mb-3"/>
123+
<section id="bubble-sort" class="sorting">
124+
<div class="container-fluid">
125+
<div class="row">
126+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
127+
<h2>Bubble<br> Sort</h2>
128+
</div>
129+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
130+
<div class="chart"></div>
131+
132+
</div>
133+
</div>
134+
<div class="row">
135+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
136+
<button type="button" class="btn btn-success">Start Sorting</button>
137+
</div>
138+
</div>
139+
</div>
140+
</section>
141+
142+
143+
144+
<hr class="mt-2 mb-3"/>
145+
<section id="heap-sort" class="sorting">
146+
<div class="container-fluid">
147+
<div class="row">
148+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
149+
<h2>Heap<br> Sort</h2>
150+
</div>
151+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
152+
<div class="chart"></div>
153+
154+
</div>
155+
</div>
156+
<div class="row">
157+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
158+
<button type="button" class="btn btn-success">Start Sorting</button>
159+
</div>
160+
</div>
161+
</div>
162+
</section>
163+
164+
165+
166+
<hr id="quick-sort" class="mt-2 mb-3"/>
167+
<section class="sorting">
168+
<div class="container-fluid">
169+
<div class="row">
170+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
171+
<h2>Quick<br> Sort</h2>
172+
</div>
173+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
174+
<div class="chart"></div>
175+
176+
</div>
177+
</div>
178+
<div class="row">
179+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
180+
<button type="button" class="btn btn-success">Start Sorting</button>
181+
</div>
182+
</div>
183+
</div>
184+
</section>
185+
186+
187+
188+
<hr class="mt-2 mb-3"/>
189+
190+
<section id="radix-sort" class="sorting">
191+
<div class="container-fluid">
192+
<div class="row">
193+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
194+
<h2>Radix<br> Sort</h2>
195+
</div>
196+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
197+
<div class="chart"></div>
198+
199+
</div>
200+
</div>
201+
<div class="row">
202+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
203+
<button type="button" class="btn btn-success">Start Sorting</button>
204+
</div>
205+
</div>
206+
</div>
207+
</section>
208+
209+
210+
211+
<hr class="mt-2 mb-3"/>
212+
<section id="counting-sort" class="sorting">
213+
<div class="container-fluid">
214+
<div class="row">
215+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
216+
<h2>Counting<br> Sort</h2>
217+
</div>
218+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
219+
<div class="chart"></div>
220+
221+
</div>
222+
</div>
223+
<div class="row">
224+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
225+
<button type="button" class="btn btn-success">Start Sorting</button>
226+
</div>
227+
</div>
228+
</div>
229+
</section>
230+
231+
232+
<hr id="bucket-sort" class="mt-2 mb-3"/>
233+
<section class="sorting">
234+
<div class="container-fluid">
235+
<div class="row">
236+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
237+
<h2>Bucket<br> Sort</h2>
238+
</div>
239+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
240+
<div class="chart"></div>
241+
242+
</div>
243+
</div>
244+
<div class="row">
245+
<div class="col-lg-6 align-items-center d-flex justify-content-center">
246+
<button type="button" class="btn btn-success">Start Sorting</button>
247+
</div>
248+
</div>
249+
</div>
250+
</section>
251+
252+
253+
254+
<div id="fileOutput" ></div>
255+
256+
<!-- Footer -->
257+
<footer class="bg-dark text-center text-white f">
258+
<!-- Grid container -->
259+
<div class="container p-4">
260+
261+
<section class="">
262+
<form action="">
263+
<div class="row d-flex justify-content-center">
264+
<div class="col-auto">
265+
<p class="pt-2">
266+
<strong>Sign up for queries</strong>
267+
</p>
268+
</div>
269+
270+
<div class="col-md-5 col-12">
271+
272+
<div class="form-outline form-white mb-4">
273+
<input type="email" id="form5Example21" class="form-control" />
274+
<label class="form-label" for="form5Example21">Email address</label>
275+
</div>
276+
</div>
277+
278+
<div class="col-auto">
279+
<button type="submit" class="btn btn-outline-light mb-4">
280+
Sign up
281+
</button>
282+
</div>
283+
</div>
284+
</form>
285+
</section>
286+
287+
<section class="mb-4">
288+
<p>
289+
<b>"Programming is the art of algorithm design and the craft of debugging errant code..."</b>
290+
</p>
291+
</section>
292+
293+
</div>
294+
<div id='footer' class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
295+
© 2020 Copyright: All rights are reserved!
296+
</div>
297+
</footer>
298+
299+
<script
300+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
301+
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
302+
crossorigin="anonymous"></script>
303+
<script src="script.js"></script>
304+
</body>
305+
306+
</html>

0 commit comments

Comments
 (0)