-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
144 lines (114 loc) · 5.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Library - Book Sorting Visualizer</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('bubble-sort-button').addEventListener('click', function() {
window.location.href = 'BubbleSort.html'; /* Add file Bubble to direct to new tab*/
});
document.getElementById('selection-sort-button').addEventListener('click', function() {
window.location.href = 'SelectionSort.html'; /* Add file Selection to direct to new tab*/
});
document.getElementById('quick-sort-button').addEventListener('click', function() {
window.location.href = 'QuickSort.html'; /* Add file Quick to direct to new tab*/
});
document.getElementById('insertion-sort-button').addEventListener('click', function() {
window.location.href = 'InsertionSort.html'; /* Add file Insertion to direct to new tab*/
});
document.getElementById('pathfinder-button').addEventListener('click', function() {
window.location.href = 'Pathfinder.html'; /* Add file Pathfinder to direct to new tab*/
});
});
</script>
</head>
<body>
<nav id="menu">
<a href="#bubble-sort">Bubble Sort</a>
<a href="#selection-sort">Selection Sort</a>
<a href="#quick-sort">Quick Sort</a>
<a href="#insertion-sort">Insertion Sort</a>
<a href="#pathfinder">Path finder</a>
</nav>
<header>
<div class="logo">Algorithms Visualizer</div>
<h1>
Book Sorting <br> Visualizer
</h1>
<div class="vertical-line1"></div>
<div class="vertical-line2"></div>
</header>
<section id="bubble-sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Bubble Sort</div>
<div class="sort-definition">Bubble sort is a simple algorithm for sorting integers or other objects. The procedure examines each group of neighboring items from left to right, swapping their locations if they are out of order. The algorithm repeats this until it finds no items to swap in the entire array.</div>
<a class="try-link" id="bubble-sort-button" href="./src/sort/index.html">Try Bubble Sort</a>
</div>
<div class="video-container">
<video src="./video/BubbleSort.mp4" controls></video>
</div>
</section>
<section id="selection-sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Selection Sort</div>
<div class="sort-definition">Selection sort is an in-place comparison sorting algorithm. It divides the input array into a sorted and an unsorted region. It repeatedly selects the smallest element from the unsorted region and swaps it with the leftmost element in the unsorted region, expanding the sorted region by one element.</div>
<a class="try-link" id="selection-sort-button" href="./src/sort/index.html">Try Selection Sort</a>
</div>
<div class="video-container">
<video src="./video/SelectionSort.mp4" controls></video>
</div>
</section>
<section id="quick-sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Quick Sort</div>
<div class="sort-definition">Quick sort is a highly efficient sorting algorithm and is based on the divide-and-conquer strategy. It works by selecting a pivot element from the array and partitioning the other elements into two sub-arrays, according to whether they are less than or greater than the pivot. The sub-arrays are then sorted recursively. This process is repeated for the sub-arrays until the entire array is sorted.</div>
<a class="try-link" id="quick-sort-button" href="./src/sort/index.html">Try Quick Sort</a>
</div>
<div class="video-container">
<video src="./video/QuickSort.mp4" controls></video>
</div>
</section>
<section id="insertion-sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Insertion Sort</div>
<div class="sort-definition">Insertion sort is a simple sorting algorithm that builds the final sorted array one item at a time. It works by iterating through the array, comparing each element with the previous elements, and moving the elements greater than the current element one position ahead.</div>
<a class="try-link" id="insertion-sort-button" href="./src/sort/index.html">Try Insertion Sort</a>
</div>
<div class="video-container">
<video src="./video/InsertionSort.mp4" controls></video>
</div>
</section>
<section id="pathfinder" class="hidden">
<div class="sort-info">
<div class="sort-name">Pathfinder</div>
<div class="sort-definition">
Pathfinder is a tool or concept used to find the best path between two points, considering obstacles and constraints. It involves algorithms and techniques for efficient navigation or routing.
</div>
<a class="try-link" id="pathfinder-button" href="./src/graph/index.html">Try Pathfinder</a>
</div>
<div class="image-container">
<img src="./image/pathfinder.png" alt="Pathfinder Image">
</div>
</section>
<a id="back-to-top" href="#header">
<img src="./image/up-arrow.png" alt="Up Arrow">
<span class="tooltip">Back to top</span>
</a>
<section id="information">
<div class="information-content">
<div class="information-logo">Algorithms Visualizer</div>
<div class="contact-info">
<div class="team-member">Đỗ Anh Quân</div>
<div class="team-member">Phạm Vũ Quang</div>
<div class="team-member">Nguyễn Mạnh Việt Khôi</div>
<div class="team-member">Lê Tuấn Phúc</div>
</div>
</div>
</section>
</body>
</html>