This folder contains sample images for future reference

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>PixSort Studio</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<link rel="stylesheet" href="./style.scss">

<script src="./script.js" type="text/javascript"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="container">

<a class="navbar-brand" href="#">PixSort Studio</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse justify-content-end" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">About</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</div>

</div>

</nav>

<div class="jumbotron">

<div class="container">

<h1 class="display-4">Welcome to PixSort Studio</h1>

<p class="lead">Explore common sorting algorithms using images as the base.</p>

</div>

</div>

<div class="container">

<div class="row">

<div class="col-md-6">

<h2>Original</h2>

<img id="original-image" style="display: none;"></img>

<canvas id="canvas"></canvas>

</div>

<div class="col-md-6">

<h2>Sorted</h2>

<canvas id="sorting"></canvas>

</div>

</div>

<div class="row mt-5">

<div class="col-md-6">

<div class="form-group">

<label for="sorting-algorithm">Choose Sorting Algorithm:</label>

<select class="form-control" id="sorting-algorithm">

<option value="bubble">Bubble Sort</option>

<option value="selection">Selection Sort</option>

<option value="insertion">Insertion Sort</option>

<option value="merge">Merge Sort</option>

<option value="quick" selected>Quick Sort</option>

</select>

</div>

</div>

<div class="col-md-6">

<div class="form-group">

<label for="image" class="custom-file-label">Choose an Image:</label>

<input type="file" id="image" class="custom-file-input" accept=".png, .jpg, .jpeg, image/*">

</div>

</div>

</div>

</div>

<hr>

<div class="container">

<h3>Notes:</h3>

<ul>

<li>The speed isn't necessarily true to the actual algorithm speed since some had to be modified to run in a loop with updates in between.</li>

<li>Please wait for one operation to finish. It might take some time in few algorithms</li>

<li>Merge sort might hang the browser for a bit when first run since it has to create a stack to be used later on.</li>

</ul>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>