Skip to content

Commit 4426cf2

Browse files
1337Xcode1337Xcode
authored
Update index.html
1 parent a7aec78 commit 4426cf2

File tree

1 file changed

+86
-53
lines changed

1 file changed

+86
-53
lines changed

‎index.html

Lines changed: 86 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,94 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
2+
<html lang="en">
23
<head>
3-
<meta charset="UTF-8">
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5-
<title>Sorting Algorithms Demo</title>
6-
<!-- UIkit CSS -->
7-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<!-- Bootstrap CSS -->
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
10+
<link rel="stylesheet" href="style.css">
11+
12+
<script src="functions/quickSort.js" defer></script>
13+
<script src="functions/bubbleSort.js" defer></script>
14+
<script src="functions/selectionSort.js" defer></script>
15+
<script src="functions/insertionSort.js" defer></script>
16+
<script src="functions/utils.js" defer></script>
17+
<script src="script.js" defer></script>
818
</head>
9-
<body>
10-
<section class="uk-section uk-section-default uk-padding">
11-
<container class="uk-container uk-container-expand">
12-
<div class="uk-text-center" uk-grid>
13-
<div class="uk-width-1-1">
14-
<h1 class="uk-heading-medium">Sorting Algorithms</h1>
15-
</div>
16-
</div>
17-
</container>
18-
</section>
19+
<body class="bg-dark">
1920

20-
<section class="uk-section uk-section-default uk-padding">
21-
<container class="uk-container uk-container-expand">
22-
<div class="uk-text-center uk-align-center" uk-grid>
23-
<div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
24-
<div>
25-
<a class="uk-link-toggle" href="./bubblesort.html">
26-
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
27-
<h2 class="uk-card-title">Bubble Sort</h2>
28-
</div>
29-
</a>
30-
</div>
31-
<div>
32-
<a class="uk-link-toggle" href="./selectionsort.html">
33-
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
34-
<h2 class="uk-card-title">Selection Sort</h2>
35-
</div>
36-
</a>
37-
</div>
38-
<div>
39-
<a class="uk-link-toggle" href="./insertionsort.html">
40-
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
41-
<h2 class="uk-card-title">Insertion Sort</h2>
42-
</div>
43-
</a>
44-
</div>
45-
<div>
46-
<a class="uk-link-toggle" href="./quicksort.html">
47-
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
48-
<h2 class="uk-card-title">Quicksort</h2>
49-
</div>
50-
</a>
21+
<div class="container-fluid">
22+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
23+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
24+
<span class="navbar-toggler-icon"></span>
25+
</button>
26+
<div class="collapse navbar-collapse" id="navbarNav">
27+
<ul class="navbar-nav">
28+
<li class="nav-item dropdown">
29+
<a class="nav-link dropdown-toggle" href="#" id="select_algorithm_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
30+
Algorithm
31+
</a>
32+
<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="algorithm_list">
33+
<!-- algorithm list -->
5134
</div>
35+
</li>
36+
<li class="nav-item">
37+
<button class="nav-link ml-2 btn btn-primary font-weight-bold" id="start_btn">Start</button>
38+
</li>
39+
<li class="nav-item">
40+
<button class="nav-link ml-2 btn btn-danger font-weight-bold" id="reset_btn">Reset</button>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link ml-2 cursor-pointer font-weight-bold" id="custom_input_btn">Custom Input <i class="fas fa-sort-down ml-1"></i></a>
44+
</li>
45+
</ul>
46+
</div>
47+
</nav>
48+
49+
<!-- Graph -->
50+
<div class="graph ml-3 mb-3 mr-3" id="graph">
51+
<div class="graph-header" id="graph_header">
52+
<div class="row m-0 p-2">
53+
<div class="row m-0" id="indicator_panel">
54+
<!-- Indicator Panel -->
5255
</div>
56+
<div class="ml-3 text-light"> Algorithm: </div><div class="text-light ml-2" id="algorithm_message"></div>
57+
<a class="ml-2 cursor-pointer text-light algorithm-info-btn" id="algorithm_info_btn"><i class="fas fa-info-circle"></i></a>
58+
<div class="ml-3 text-light">|</div>
59+
<div class="text-light ml-2" id="status_message"></div>
60+
</div>
61+
</div>
62+
<div class="graph-body" id="graph_body">
63+
<!-- Visualizer Graph -->
64+
</div>
65+
</div>
66+
<!-- Custom Input Popup -->
67+
<div class="card custom-input" id="custom_input">
68+
<div class="card-header">
69+
<span class="custom-input-header" id="custom_input_header">Custom Input</span>
70+
<span class="custom-input-cancel-btn cursor-pointer" id="custom_input_cancel_btn"><i class="fas fa-times-circle"></i></span>
71+
</div>
72+
<div class="card-body custom-input-body" id="custom_input_body">
73+
<div class="form-group">
74+
<label for="custom_input_field">Range: 5, 500</label>
75+
<textarea name="customInput" class="form-control" id="custom_input_field" cols="30" rows="5" placeholder="2, 6, 5"></textarea>
5376
</div>
54-
</container>
55-
</section>
77+
<button type="button" class="btn btn-outline-info" id="custom_input_submit_btn">Submit</button>
78+
</div>
79+
</div>
80+
<!-- Algorithm Details Popup -->
81+
<div class="card algorithm-info" id="algorithm_info">
82+
<div class="card-header">
83+
<span class="algorithm-info-header" id="algorithm_info_header"></span>
84+
<span class="algorithm-info-cancel-btn cursor-pointer" id="algorithm_info_cancel_btn"><i class="fas fa-times-circle"></i></span>
85+
</div>
86+
<div class="card-body algorithm-info-body" id="algorithm_info_body"></div>
87+
</div>
88+
</div>
5689

57-
<!-- UIkit JS -->
58-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
59-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
90+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
91+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
92+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
6093
</body>
61-
</html>
94+
</html>

0 commit comments

Comments
 (0)