sorting-visualizer/index.html at main · TylerMommsen/sorting-visualizer · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Sorting Visualizer</title>
	</head>
	<body>
		<div id="app">
			<div id="background"></div>
			<header>
				<h1>Sorting Visualizer</h1>
			</header>
			<main>
				<div class="btn-selections">
					<div class="algorithms">
						<div style="display: flex; flex-direction: column; position: relative">
							<div id="select-algorithm">
								<p>Quicksort</p>
								<span
									><svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
										stroke-width="1.5"
										stroke="#000"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="m19.5 8.25-7.5 7.5-7.5-7.5"
										/>
									</svg>
								</span>
							</div>
							<div class="algorithm-options">
								<div class="option" role="button">Quicksort</div>
								<div class="option" role="button">Bubble Sort</div>
								<div class="option" role="button">Insertion Sort</div>
								<div class="option" role="button">Merge Sort</div>
								<div class="option" role="button">Selection Sort</div>
								<div class="option" role="button">Radix Sort</div>
								<div class="option" role="button">Bucket Sort</div>
								<div class="option" role="button">Heap Sort</div>
							</div>
						</div>

						<button id="visualize-btn">Visualize Quicksort</button>
						<button id="shuffle-btn">Shuffle</button>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke="currentColor"
							id="speaker-btn"
							class="speaker-btn speaker-btn-on"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
							/>
						</svg>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke="currentColor"
							class="speaker-btn speaker-btn-off hidden"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
							/>
						</svg>
					</div>

					<div class="customization-btns">
						<div style="display: flex; flex-direction: column; align-items: center">
							<label for="size-slider">Size: <span id="size-value">50</span></label>
							<input type="range" id="size-slider" min="5" max="1000" value="50" step="5" />
						</div>

						<div style="display: flex; flex-direction: column; align-items: center">
							<label for="speed-slider">Speed: <span id="speed-value">50ms</span></label>
							<input type="range" id="speed-slider" min="1" max="1000" value="50" step="1" />
						</div>
					</div>
				</div>

				<div id="bar-container"></div>
			</main>
		</div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>