Skip to content

Commit

Permalink
Merge branch 'MastanSayyad:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@AkshatPandey-2004
AkshatPandey-2004 authored Jul 13, 2024
2 parents 4d69aab + 4f06034 commit da77ad8
Showing 1 changed file with 139 additions and 70 deletions.
209 changes: 139 additions & 70 deletions visual.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Sorting Algorithms Visualization</title>
<meta charset="UTF-8">
Expand All @@ -14,6 +14,9 @@
#buttons {
margin: 20px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
input, button, select {
margin: 5px;
Expand Down Expand Up @@ -56,12 +59,14 @@
display: flex;
justify-content: center;
align-items: flex-end;
height: 400px;
height: 60vh;
margin-top: 20px;
width: 90%;
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
overflow-x: auto;
}
#heading {
text-align: center;
Expand All @@ -76,13 +81,31 @@
align-items: center;
transition: left 0.5s ease-in-out;
}
.bar {
background-color: #3498db;
transition: background-color 0.5s ease-in-out, height 0.5s ease-in-out;
.bar{
background-color: #3498db;
transition: background-color 0.5s ease-in-out, height 0.5s ease-in-out;
}
@media screen and (max-width: 768px) {
.sh {
height: 50vh;
}
.bar-label {
font-size: 10px;
}
}
@media screen and (max-width: 480px) {
.sh {
height: 40vh;
}
.bar-label {
font-size: 8px;
}
}
.bar-label {

.bar-label {
margin-bottom: 5px;
font-weight: bold;
font-size: 12px;
}
.comparing {
background-color: #e74c3c;
Expand Down Expand Up @@ -137,7 +160,7 @@
background-color: #c82333;
}
.sidebar {
height: 90%;
height: 100%;
width: 0;
position: fixed;
z-index: 1000;
Expand Down Expand Up @@ -169,33 +192,31 @@
margin-bottom: 15px;
}
.sidebar pre {
white-space: pre-wrap;
word-wrap: break-word;
background-color: #222;
border: 1px solid #444;
padding: 10px;
border-radius: 5px;
font-size: 12px;
line-height: 1.4;
margin-bottom: 15px;
}
white-space: pre-wrap;
word-wrap: break-word;
background-color: #222;
border: 1px solid #444;
padding: 10px;
border-radius: 5px;
font-size: 12px;
line-height: 1.4;
margin-bottom: 15px;
}
.sidebar-content {
padding: 0 20px;
}
.sidebar table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
}

.sidebar table td {
padding: 5px;
border-bottom: 1px solid #444;
}

.sidebar table td:first-child {
width: 30%;
}
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
}
.sidebar table td {
padding: 5px;
border-bottom: 1px solid #444;
}
.sidebar table td:first-child {
width: 30%;
}
.openbtn {
font-size: 20px;
cursor: pointer;
Expand All @@ -212,44 +233,71 @@
background-color: #4CAF50;
}
.complexity-container {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}

.complexity-box {
width: 48%;
background-color: #222;
border: 1px solid #444;
border-radius: 5px;
padding: 10px;
}

.complexity-box h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
}

.complexity-box table {
width: 100%;
}

.complexity-box p {
margin: 0;
}

.sidebar {
overflow-y: auto;
}

.sidebar-content {
padding: 0 20px 20px 20px;
}
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.complexity-box {
width: 100%;
background-color: #222;
border: 1px solid #444;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.complexity-box h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
}
.complexity-box table {
width: 100%;
}
.complexity-box p {
margin: 0;
}
.sidebar {
overflow-y: auto;
}
.sidebar-content {
padding: 0 20px 20px 20px;
}
#main {
transition: margin-right .5s;
padding: 16px;
}

@media screen and (max-width: 768px) {
#heading {
font-size: 24px;
}
.sh {
height: 300px;
}
.sidebar {
width: 100%;
}
#main {
margin-right: 0;
}
.openbtn {
width: 100%;
margin-bottom: 10px;
}
input, button, select {
width: calc(100% - 10px);
margin: 5px;
}
#buttons {
flex-direction: column;
}
.tour-popup {
width: 90%;
left: 5% !important;
max-height: 80vh;
overflow-y: auto;
}
}
</style>
</head>
<body>
Expand Down Expand Up @@ -315,7 +363,8 @@ <h3 id="tourTitle"></h3>
container.innerHTML = "";
const maxVal = Math.max(...arr);
const containerWidth = container.offsetWidth;
const barWidth = Math.max(30, Math.min(100, containerWidth / arr.length - 2));
const containerHeight = container.offsetHeight;
const barWidth = Math.max(20, Math.min(80, containerWidth / arr.length - 2));

arr.forEach((val, idx) => {
const barContainer = document.createElement("div");
Expand All @@ -329,6 +378,7 @@ <h3 id="tourTitle"></h3>

const bar = document.createElement("div");
bar.className = "bar";
const barHeight = (val / maxVal) * (containerHeight - 30);
bar.style.height = `${(val / maxVal) * 300}px`;
bar.style.width = `${barWidth}px`;
bar.id = `bar-${idx}`;
Expand All @@ -340,14 +390,17 @@ <h3 id="tourTitle"></h3>
}

async function updateBars() {
const container = document.getElementById("visualization");
const maxVal = Math.max(...array);
const containerHeight = container.offsetHeight;
array.forEach((val, idx) => {
const container = document.getElementById(`bar-${idx}`).parentElement;
const label = container.querySelector('.bar-label');
const bar = container.querySelector('.bar');
const barContainer = document.getElementById(`bar-${idx}`).parentElement;
const label = barContainer.querySelector('.bar-label');
const bar = barContainer.querySelector('.bar');

label.textContent = val;
bar.style.height = `${(val / maxVal) * 300}px`;
const barHeight = (val / maxVal) * (containerHeight - 30);
bar.style.height = `${barHeight}px`;
});
await delay(delayTime);
}
Expand Down Expand Up @@ -903,6 +956,22 @@ <h3>Algorithm:</h3>
document.getElementById("tourOverlay").style.display = "none";
currentStep = 0;
});
window.addEventListener('load', function() {
loader.style.display = "none";
updateAlgoInfo();
visualizeArray([10, 8, 6, 4, 2, 1, 3, 5, 7, 9]); // Default array
startTour();

// Add resize event listener
window.addEventListener('resize', function() {
visualizeArray(array);
});
});

// Ensure the sidebar is closed on page load
window.addEventListener('DOMContentLoaded', (event) => {
closeNav();
});
</script>
<script>
var loader = document.getElementById("Loader");
Expand Down

0 comments on commit da77ad8

Please sign in to comment.