xxxxxxxxxx
108
<html>
<head>
<title>Quick Sort</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script> -->
<script src="./sketch.js"></script>
<style>
html,
body {
background-color: #333;
color: #eee;
margin: 10px;
margin-top: 5px;
margin-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: rgb(97, 84, 63);
}
/* #canvasContainer {
margin-left: auto;
margin-right: auto;
} */
.settingsDiv, #heading{
margin-left: auto;
margin-right: auto;
width: fit-content;
}
canvas {
display: block;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.Btn {
margin-left: 30px;
margin-right: 30px;
color: #494949 !important;
text-transform: uppercase;
/* text-decoration: none; */
background: #ffffff;
/* padding: 15px; */
border: 3px solid #494949 !important;
display: inline-block;
transition: all 0.4s ease 0s;
}
.Btn:hover {
/* color: #ffffff !important; */
background: rgba(255, 215, 0, 20);
border-color: #474747 !important;
transition: all 0.4s ease 0s;
}
.slider,
.sliderValue {
vertical-align: -2px;
}
.sliderValue {
overflow: hidden;
display: inline-block;
margin-left: 4px;
text-align: center;
width: 30px;
background: #222;
border-radius: 3px;
font-size: 12px;
/* line-height: 16px; */
}
.sliderLabel,
.checkbox {
margin: 0 8px 0 0;
display: inline-block;
}
.sliderLabel{
width: 100px;
}
.sliderValue,
.checkbox {
margin-right: 20px;
}
.checkbox input {
margin-right: 8px;
}
</style>
</head>
<body>
<h1>Quick Sort</h1>
<h2 id="heading"></h2>
<div id="canvasContainer"></div>
</body>
</html>