-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathindex.html
More file actions
198 lines (172 loc) · 7.4 KB
/
index.html
File metadata and controls
198 lines (172 loc) · 7.4 KB
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
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ✅ SEO Metadata -->
<title>Sorting Visualizer | Interactive Sorting Algorithm Demo</title>
<meta name="description"
content="Visualize and interact with various sorting algorithms like Bubble Sort, Merge Sort, Quick Sort, and more. Customize array size, speed, and order for a better learning experience." />
<meta name="keywords"
content="Sorting Visualizer, Algorithm Visualization, Bubble Sort, Merge Sort, Quick Sort, Insertion Sort, Selection Sort, Interactive Sorting, Algorithm Demo" />
<meta name="author" content="Ayushjhawar" />
<meta name="robots" content="index, follow" />
<meta name="language" content="English" />
<meta name="revisit-after" content="7 days" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Sorting Visualizer | Interactive Sorting Algorithm Demo" />
<meta property="og:description"
content="Visualize and interact with various sorting algorithms like Bubble Sort, Merge Sort, Quick Sort, and more. Customize array size, speed, and order for a better learning experience." />
<meta property="og:url" content="https://aj-sort.netlify.app/" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Sorting Visualizer | Interactive Sorting Algorithm Demo" />
<meta property="twitter:description"
content="Visualize and interact with various sorting algorithms like Bubble Sort, Merge Sort, Quick Sort, and more." />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<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=Roboto:wght@300;400&display=swap" rel="stylesheet" />
<!-- Initial load for theme -->
<script>
let theme = localStorage.getItem("theme");
if (currentTheme === 'dark') {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
updateThemeParticles();
</script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="./css/style.css" />
<title>Sorting visualizer</title>
</head>
<body id="body">
<div class="nav-container">
<h2 class="title" onclick="window.location.reload()">
Sorting visualizer
</h2>
<div class="navbar" id="navbar">
<a id="random">Generate array</a>
<span class="options">
<select name="select sort algorithm" id="menu" class="algo-menu">
<option value="0">Choose algorithm</option>
<option value="1">Bubble Sort</option>
<option value="2">Selection Sort</option>
<option value="3">Insertion Sort</option>
<option value="4">Merge Sort</option>
<option value="5">Quick Sort</option>
</select>
</span>
<span class="options">
<select name="select array size" id="menu" class="size-menu" onchange="changeArraySize()">
<option value="0">Array size</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="-1" id="size-custom">Custom</option>
</select>
</span>
<!-- <input type="text" placeholder="Input Array..." id="menu1"> -->
<span class="options">
<select name="input" id="menu" class="input">
<option value="N">Input</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</span>
<span class="options">
<select name="speed of visualization" id="menu" class="speed-menu" onchange="changeSpeed()">
<option value="0">Speed</option>
<option value="0.5">0.50x</option>
<option value="0.75">0.75x</option>
<option value="1">1.00x</option>
<option value="2">2.00x</option>
<option value="4">4.00x</option>
<option value="-1" id="speed-custom">Custom</option>
</select>
</span>
<span class="options">
<select name="sort-order" id="menu" class="order-menu">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
</span>
<a class="start">Sort</a>
<a class="icon"><i class="fa fa-bars"></i></a>
<button id="refresh-btn" class="refresh-button">
Refresh <i class="fa fa-refresh"></i>
</button>
<a class="about-btn" onclick="toggleAboutPopup()">About</a>
<label class="theme-switch">
<input type="checkbox" id="theme-toggle" />
<span class="slider">
<i class="fa fa-sun-o sun-icon"></i>
<i class="fa fa-moon-o moon-icon"></i>
</span>
</label>
</div>
</div>
<div class="center">
<div class="array"></div>
</div>
<!-- Chat Popup Button and Container -->
<button class="chat-toggle-button" onclick="toggleChat()">💬</button>
<div class="chat-container" id="chatContainer">
<div class="chat-header">
<h4>Chat Assistant</h4>
<button class="close-chat" onclick="toggleChat()">✖</button>
</div>
<div class="chat-body">
<input type="text" id="chatInput" placeholder="Type your request here..." />
<button id="chatButton" onclick="sendChat()">Send</button>
</div>
</div>
<footer class="footer">
<p class="time-info">
⏱️ Time Complexity = <span id="time"></span> | Total Time Taken = <span id="Ttime"></span> seconds
</p>
</footer>
<canvas id="particleCanvas"></canvas>
<!-- About Popup.........................................-->
<div id="overlay" class="overlay hidden"></div>
<div id="aboutPopup" class="about-popup hidden">
<div class="about-content">
<h2>About This App</h2>
<p>
<p>
This Sorting Visualizer offers an intuitive way to understand how various sorting algorithms work, including
Bubble Sort,
Merge Sort, Quick Sort, and more. You can customize the array size, sorting speed, and algorithm to suit your
learning pace.
Additionally, the visualizer provides real-time information on the time complexity of the selected algorithm
and the total time taken to complete the sort.
</p>
</p>
<button class="close-about" onclick="toggleAboutPopup()">Close</button>
</div>
</div>
<script>
function toggleAboutPopup() {
const popup = document.getElementById("aboutPopup");
const overlay = document.getElementById("overlay");
popup.classList.toggle("hidden");
overlay.classList.toggle("hidden");
}
</script>
<script src="./scripts/app.js"></script>
<script src="./scripts/helper.js"></script>
<script src="./scripts/sort-algorithms.js"></script>
<script src="./scripts/darkmode.js"></script>
</body>
</html>