-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (163 loc) · 9.23 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-12EXH499EG"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-12EXH499EG');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Algorithm Visualizer</title>
<link rel="stylesheet" href="style.css">
<script src="script.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('QueueLink').addEventListener('click', function() {
window.location.href = 'https://kanishk3813.github.io/Real-Time-Queue-Application/';
});
document.getElementById('Linked-list').addEventListener('click', function() {
window.location.href = 'https://vinayaksoni1729.github.io/Train_Compartment_Linked_List/';
});
document.getElementById('BinaryTree').addEventListener('click', function() {
window.location.href = 'https://scolin16.github.io/Binary-Tree/';
});
document.getElementById('Stack').addEventListener('click', function() {
window.location.href = 'https://kanishk3813.github.io/Real-Time-Stack-Application/';
});
document.getElementById('Array').addEventListener('click', function() {
window.location.href = 'https://kanishk3813.github.io/Real-Time-Array-Application/';
});
document.getElementById('PathFinder').addEventListener('click', function() {
window.location.href = 'https://tpspace.github.io/Algorithms-Visualizer/src/graph/index.html';
});
});
</script>
</head>
<body>
<nav id="menu">
<a id="QueueLink">Queue</a>
<a id="Linked-list">Linked-List</a>
<a id="BinaryTree">Binary Tree</a>
<a id="Stack">Stack</a>
<a id="Array">Array</a>
<a id="PathFinder">PathFinder</a>
</nav>
<header>
<!-- <div class="logo">Algorithms Visualizer</div> -->
<h1>
Real World <br> Algorithms
</h1>
<div class="vertical-line1"></div>
<div class="vertical-line2"></div>
</header>
<section id="bubble-sort sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Queue</div>
<div class="sort-definition">A queue is a fundamental data structure used for organizing and processing elements in a linear order. It follows the principle of "first in, first out" (FIFO), where elements are added at the rear and removed from the front. Items in a queue are processed in the order in which they were added, making it suitable for various applications, such as task scheduling and managing resources in a sequential manner.</div>
<a class="try-link" id="bubble-sort-button" href="https://predator3813.github.io/Real-Time-Queue-Application/">Try Queue</a>
</div>
<div class="video-container">
<video src="assets/Queue Data Structure Animation.mp4" controls></video>
</div>
</section>
<section id="selection-sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Linked-List</div>
<div class="sort-definition">A linked list is a dynamic data structure that consists of a sequence of elements, each containing data and a reference (or link) to the next element in the sequence. This structure allows for efficient insertion and deletion of elements, making it versatile for various applications. Linked lists can be singly linked (each element points to the next) or doubly linked (each element points to both the next and the previous), providing flexibility in data management and traversal.</div>
<a class="try-link" id="selection-sort-button" href="https://vinayaksoni1729.github.io/Train_Compartment_Linked_List/">Try Linked-List</a>
</div>
<div class="video-container">
<video src="assets/Linked List Data Structure Animation.mp4" controls></video>
</div>
</section>
<section id="quick-sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Binary Tree</div>
<div class="sort-definition">A binary tree is a hierarchical data structure composed of nodes, where each node has at most two child nodes, typically referred to as the left child and the right child. This structure allows for efficient searching and retrieval of data, making binary trees an essential foundation for various data structures and algorithms. The organization of nodes in a binary tree is conducive to tasks like sorting, searching, and hierarchical data representation.</div>
<a class="try-link" id="quick-sort-button" href="https://scolin16.github.io/Binary-Tree/">Try Binary Tree</a>
</div>
<div class="video-container">
<video src="assets/Tree Data Structure Summary.mp4" controls></video>
</div>
</section>
<section id="insertion-sort" class = "hidden">
<div class="sort-info">
<div class="sort-name">Stack</div>
<div class="sort-definition">A stack is a fundamental data structure that operates on the "last in, first out" (LIFO) principle. It is a collection of elements with two primary operations: pushing (adding) elements onto the top of the stack and popping (removing) elements from the top. Stacks are used for managing data in a sequential manner, where the most recently added item is the first to be processed or removed. They are essential for tasks like function call management, expression evaluation, and undo functionality in software applications.</div>
<a class="try-link" id="insertion-sort-button" href="https://predator3813.github.io/Real-Time-Stack-Application/">Try Stack</a>
</div>
<div class="video-container">
<video src="assets/Stack Data Structure Animation.mp4" controls></video>
</div>
</section>
<section id="array1" class="hidden">
<div class="sort-info">
<div class="sort-name">Array</div>
<div class="sort-definition">
An array is a fundamental data structure that represents a collection of elements, each identified by an index or a key. It provides a contiguous memory allocation for its elements, allowing for efficient random access and manipulation of data. Arrays are versatile and widely used for storing and organizing data of the same data type, making them suitable for tasks such as data storage, sorting, and searching, and are the foundation for more complex data structures and algorithms.
</div>
<a class="try-link" id="pathfinder-button" href="https://predator3813.github.io/Real-Time-Array-Application/">Try Array</a>
</div>
<div class="image-container">
<img src="assets/1.gif" alt="Pathfinder Image">
</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="https://tpspace.github.io/Algorithms-Visualizer/src/graph/index.html">Try Pathfinder</a>
</div>
<div class="image-container">
<img src="assets/pathfinder.png" alt="Pathfinder Image">
</div>
</section>
<a id="back-to-top" href="#header">
<img src="assets/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-members">
<div class="team-member">
<span>Vinayak Soni</span>
<a href="https://github.com/vinayaksoni1729" target="_blank">
<img src="assets/github.png" alt="GitHub" />
</a>
</div>
<div class="team-member">
<span>Kanishk Reddy</span>
<a href="https://github.com/predator3813" target="_blank">
<img src="assets/github.png" alt="GitHub" />
</a>
</div>
<div class="team-member">
<span>Agradeep Sarkar</span>
<a href="https://github.com/agradeep1123" target="_blank">
<img src="assets/github.png" alt="GitHub" />
</a>
</div>
<div class="team-member">
<span>Priyansh Nandwana</span>
<a href="https://github.com/NguyenManhVietKhoi" target="_blank">
<img src="assets/github.png" alt="GitHub" />
</a>
</div>
</div>
</div>
</div>
<span class="footer2">
<p>Copyright © 2023 Algorithms Visualizer. All Rights Reserved.</p>
</span>
</section>
</body>
</html>