Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
164 lines (153 loc) · 6 KB
/
Copy pathindex.html
File metadata and controls
164 lines (153 loc) · 6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="./css/style.css" />
<title>Sorting visualizer</title>
</head>
<body>
<div class="nav-container">
<h2 class="title" onclick="window.location.reload()">
Sorting visualizer
</h2>
<div class="navbar" id="navbar">
<a id="audio-toggle" title="Toggle Sound"><i class="fa fa-volume-up"></i></a>
<a id="random" onclick="RenderScreen()">Generate array</a>
<span class="options">
<select name="select sort algorithm" id="algo-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="size-menu" class="size-menu">
<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>
</select>
</span>
<span class="options">
<select name="speed of visualization" id="speed-menu" class="speed-menu">
<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>
</select>
</span>
<a id="pause-btn" class="control-btn hidden">Pause</a>
<a id="cancel-btn" class="control-btn hidden">Stop</a>
<a class="start">Sort</a>
<a class="icon"><i class="fa fa-bars"></i></a>
</div>
</div>
<div class="main-layout">
<div class="center">
<div class="array"></div>
</div>
<div class="dashboard">
<div class="tabs-container">
<button class="tab-btn active" data-tab="stats">Live Stats</button>
<button class="tab-btn" data-tab="info">Algorithm Info</button>
<button class="tab-btn" data-tab="code">Pseudo-code</button>
</div>
<!-- Live Stats Tab -->
<div class="tab-content" id="tab-stats">
<div class="stats-grid">
<div class="stat-card">
<span class="stat-label">Comparisons</span>
<span class="stat-value" id="stat-comparisons">0</span>
</div>
<div class="stat-card">
<span class="stat-label">Swaps & Writes</span>
<span class="stat-value" id="stat-swaps">0</span>
</div>
<div class="stat-card">
<span class="stat-label">Array Accesses</span>
<span class="stat-value" id="stat-accesses">0</span>
</div>
<div class="stat-card">
<span class="stat-label">Elapsed Time</span>
<span class="stat-value" id="stat-time">0.0s</span>
</div>
</div>
<div class="custom-input-container">
<span class="custom-input-title">Custom Array Input</span>
<div class="custom-input-row">
<input type="text" id="custom-array-val" placeholder="e.g. 12, 45, 30, 90, 5, 66" />
<button id="custom-array-btn">Load</button>
</div>
</div>
</div>
<!-- Info Tab -->
<div class="tab-content hidden" id="tab-info">
<div class="info-section">
<h3 class="info-title" id="info-algo-name">Select an Algorithm</h3>
<table class="complexity-table">
<thead>
<tr>
<th>Complexity</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Best Time</td>
<td><span class="complexity-badge best" id="info-best-time">-</span></td>
</tr>
<tr>
<td>Average Time</td>
<td><span class="complexity-badge avg" id="info-avg-time">-</span></td>
</tr>
<tr>
<td>Worst Time</td>
<td><span class="complexity-badge worst" id="info-worst-time">-</span></td>
</tr>
<tr>
<td>Space Complexity</td>
<td><span class="complexity-badge space" id="info-space-comp">-</span></td>
</tr>
</tbody>
</table>
<p class="info-description" id="info-algo-desc">
Choose a sorting algorithm from the dropdown to see its time and space complexity details, implementation logic, and pseudo-code.
</p>
</div>
</div>
<!-- Pseudo-code Tab -->
<div class="tab-content hidden" id="tab-code">
<div class="code-container">
<pre><code id="code-block">Select an algorithm to view pseudo-code.</code></pre>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>
Choose Array Size, Algorithm and Start Sorting
</p>
</footer>
<script src="./scripts/app.js"></script>
<script src="./scripts/helper.js"></script>
<script src="./scripts/sort-algorithms.js"></script>
</body>
</html>