From fb3fd8aea1713259bd62732e71cf4dd9c41f9f6e Mon Sep 17 00:00:00 2001 From: AkshatPandey Date: Fri, 12 Jul 2024 03:03:59 +0530 Subject: [PATCH 1/2] bubble sort --- Algorithm/Bubble.html | 380 ++++++++++++++++ Algorithm/bubble.js | 314 +++++++++++++ Algorithm/bubbles.css | 1007 +++++++++++++++++++++++++++++++++++++++++ Bubble.html | 274 ----------- 4 files changed, 1701 insertions(+), 274 deletions(-) create mode 100644 Algorithm/Bubble.html create mode 100644 Algorithm/bubble.js create mode 100644 Algorithm/bubbles.css delete mode 100644 Bubble.html diff --git a/Algorithm/Bubble.html b/Algorithm/Bubble.html new file mode 100644 index 0000000..c03ac5f --- /dev/null +++ b/Algorithm/Bubble.html @@ -0,0 +1,380 @@ + + + + + + + + + Bubble Sort + + + + + + +
+
+

Bubble Sort

+
+
+
+

Bubble Sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted. The algorithm, which is a comparison sort, is named for the way smaller elements "bubble" to the top of the list. Despite its simplicity, Bubble Sort is not suitable for large data sets as its average and worst-case time complexity is quite high.

+
+

Algorithm:

+
+
+
+
+
+ Bubble Sort Visualization +
+ + + + + + + + + + + + + + + + + + + + + + + + +
Complexity
Best Time ComplexityO(n)
Average Time ComplexityO(n2)
Worst Time ComplexityO(n2)
Space ComplexityO(1)
+
+
+
+
+ + +
+ +
+ + + +
+
+

Bubble Sort Visualizer

+
+
+
+
+ + + + + + + + +
+
+
+
+

+

+ + +
+
+
+
+ + +
+
+

Bubble Sort Code

+ +
+
+ 
public void bubbleSort(int[] arr) {
+    int n = arr.length;
+    for (int i = 0; i < n-1; i++) {
+        for (int j = 0; j < n-i-1; j++) {
+            if (arr[j] > arr[j+1]) {
+                int temp = arr[j];
+                arr[j] = arr[j+1];
+                arr[j+1] = temp;
+            }
+        }
+    }
+}
+
+
+ 
void bubbleSort(int arr[], int n) {
+    for (int i = 0; i < n-1; i++) {
+        for (int j = 0; j < n-i-1; j++) {
+            if (arr[j] > arr[j+1]) {
+                int temp = arr[j];
+                arr[j] = arr[j+1];
+                arr[j+1] = temp;
+            }
+        }
+    }
+}
+
+
+ 
void bubbleSort(int arr[], int n) {
+    for (int i = 0; i < n-1; i++) {
+        for (int j = 0; j < n-i-1; j++) {
+            if (arr[j] > arr[j+1]) {
+                int temp = arr[j];
+                arr[j] = arr[j+1];
+                arr[j+1] = temp;
+            }
+        }
+    }
+}
+
+
+ 
def bubble_sort(arr):
+    n = len(arr)
+    for i in range(n-1):
+        for j in range(n-i-1):
+            if arr[j] > arr[j+1]:
+                arr[j], arr[j+1] = arr[j+1], arr[j]
+
+
+
+
+ + +
+
+

Practice Questions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Question NumberQuestion TitleLevelLink
1Sort an ArrayEasyLink
2Sort ColorsMediumLink
3Largest NumberHardLink
+
+
+ + + + + + + + + diff --git a/Algorithm/bubble.js b/Algorithm/bubble.js new file mode 100644 index 0000000..ec4497c --- /dev/null +++ b/Algorithm/bubble.js @@ -0,0 +1,314 @@ +const codeDisplay = document.querySelector('.tab-content .tab-pane.active pre code'); +const languageTabs = document.querySelectorAll('#languageTabs a'); +let array = []; +let stop = false; +const delayTime = 300; +const delay = ms => new Promise(res => setTimeout(res, ms)); + +// Language code snippets +const codeSnippets = { + java: `public void bubbleSort(int[] arr) { + int n = arr.length; + for (int i = 0; i < n-1; i++) { + for (int j = 0; n-i-1 > j; j++) { + if (arr[j] > arr[j+1]) { + int temp = arr[j]; + arr[j] = arr[j+1]; + arr[j+1] = temp; + } + } + } +}`, + c: `void bubbleSort(int arr[], int n) { + for (int i = 0; i < n-1; i++) { + for (int j = 0; j < n-i-1; j++) { + if (arr[j] > arr[j+1]) { + int temp = arr[j]; + arr[j] = arr[j+1]; + arr[j+1] = temp; + } + } + } +}`, + cpp: `void bubbleSort(int arr[], int n) { + for (int i = 0; i < n-1; i++) { + for (int j = 0; j < n-i-1; j++) { + if (arr[j] > arr[j+1]) { + int temp = arr[j]; + arr[j] = arr[j+1]; + arr[j+1] = temp; + } + } + } +}`, + python: `def bubble_sort(arr): + n = len(arr) + for i in range(n-1): + for j in range(n-i-1): + if arr[j] > arr[j+1]: + arr[j], arr[j+1] = arr[j+1], arr[j]` +}; + +// Event listener for language tabs +languageTabs.forEach(tab => { + tab.addEventListener('click', event => { + const language = event.target.getAttribute('href').substring(1); + codeDisplay.innerText = codeSnippets[language]; + }); +}); + +// Set the initial code display content +codeDisplay.innerText = codeSnippets.java; + +// Function to submit array input +function submit() { + const input = document.getElementById("array").value; + array = input.split(" ").map(Number); + visualizeArray(array); +} + +// Function to visualize the array +function visualizeArray(arr) { + const container = document.getElementById("visualization"); + container.innerHTML = ""; + const maxVal = Math.max(...arr); + const containerWidth = container.offsetWidth; + const barWidth = Math.max(30, Math.min(100, containerWidth / arr.length - 2)); + + arr.forEach((val, idx) => { + const barContainer = document.createElement("div"); + barContainer.className = "bar-container"; + barContainer.style.width = `${barWidth}px`; + barContainer.style.left = `${idx * (barWidth + 2)}px`; + + const label = document.createElement("div"); + label.className = "bar-label"; + label.textContent = val; + + const bar = document.createElement("div"); + bar.className = "bar"; + bar.style.height = `${(val / maxVal) * 300}px`; + bar.style.width = `${barWidth}px`; + bar.id = `bar-${idx}`; + + barContainer.appendChild(label); + barContainer.appendChild(bar); + container.appendChild(barContainer); + }); +} + +// Function to update bars +async function updateBars() { + const maxVal = Math.max(...array); + array.forEach((val, idx) => { + const container = document.getElementById(`bar-${idx}`).parentElement; + const label = container.querySelector('.bar-label'); + const bar = container.querySelector('.bar'); + + label.textContent = val; + bar.style.height = `${(val / maxVal) * 300}px`; + }); + await delay(delayTime); +} + +// Function to swap array elements +async function swap(i, j) { + const temp = array[i]; + array[i] = array[j]; + array[j] = temp; + + const container1 = document.getElementById(`bar-${i}`).parentElement; + const container2 = document.getElementById(`bar-${j}`).parentElement; + + const tempLeft = container1.style.left; + container1.style.left = container2.style.left; + container2.style.left = tempLeft; + + container1.querySelector('.bar').id = `bar-${j}`; + container2.querySelector('.bar').id = `bar-${i}`; + + await updateBars(); +} + +// Bubble Sort algorithm +async function bubbleSort() { + for (let i = 0; i < array.length; i++) { + for (let j = 0; j < array.length - i - 1; j++) { + if (stop) return; + document.getElementById(`bar-${j}`).classList.add("comparing"); + document.getElementById(`bar-${j + 1}`).classList.add("comparing"); + await delay(delayTime); + if (array[j] > array[j + 1]) { + await swap(j, j + 1); + } + document.getElementById(`bar-${j}`).classList.remove("comparing"); + document.getElementById(`bar-${j + 1}`).classList.remove("comparing"); + } + document.getElementById(`bar-${array.length - i - 1}`).classList.add("sorted"); + } +} + +// Function to highlight bars +async function highlightBars(indices, className) { + indices.forEach(index => { + document.getElementById(`bar-${index}`).classList.remove("comparing", "sorted"); + if (className) { + document.getElementById(`bar-${index}`).classList.add(className); + } + }); + await delay(delayTime); +} + +// Function to update a single bar +async function updateSingleBar(index) { + const maxVal = Math.max(...array); + const container = document.getElementById(`bar-${index}`).parentElement; + const label = container.querySelector('.bar-label'); + const bar = container.querySelector('.bar'); + + label.textContent = array[index]; + bar.style.height = `${(array[index] / maxVal) * 300}px`; + await delay(delayTime); +} + +// Function to reset the visualization +function reset() { + stop = false; + visualizeArray(array); +} + +// Function to handle stop button click +function stopClicked() { + document.getElementById("resume").disabled = false; + document.getElementById("reset").disabled = false; +} + +// Functions to enable and disable buttons +function disableSubmitButton() { + document.getElementById("submit").disabled = true; + document.getElementById("start").disabled = true; + document.getElementById("resume").disabled = true; + document.getElementById("reset").disabled = true; +} + +function enableSubmitButton() { + document.getElementById("submit").disabled = false; + document.getElementById("start").disabled = false; + document.getElementById("resume").disabled = false; + document.getElementById("reset").disabled = false; +} + +// Function to start the sorting +async function startSort() { + disableSubmitButton(); + reset(); + const sortMethod = document.getElementById("sortSelect").value; + switch(sortMethod) { + case "bubble": + await bubbleSort(); + break; + // Add other sorting algorithms here + // case "selection": + // await selectionSort(); + // break; + // case "insertion": + // await insertionSort(); + // break; + // case "merge": + // await mergeSortWrapper(); + // break; + // case "heap": + // await heapSort(); + // break; + // case "comb": + // await combSort(); + // break; + // case "quick": + // await quickSort(); + // break; + } + enableSubmitButton(); +} + +// Function to show a step in the tour +function showStep(step) { + const tourPopup = document.getElementById("tourPopup"); + const targetElement = document.getElementById(tourSteps[step].target); + const targetRect = targetElement.getBoundingClientRect(); + + let top = targetRect.bottom + 10; + let left = targetRect.left + targetRect.width / 2 - 150; + + if (left < 10) left = 10; + if (left + 300 > window.innerWidth) left = window.innerWidth - 310; + + if (top + 200 > window.innerHeight) { + top = targetRect.top - 210; + if (top < 10) { + top = 10; + } + } + + top = Math.max(10, Math.min(top, window.innerHeight - 210)); + + tourPopup.style.left = `${left}px`; + tourPopup.style.top = `${top}px`; + + document.getElementById("tourTitle").textContent = tourSteps[step].title; + document.getElementById("tourDescription").textContent = tourSteps[step].description; + + if (step === tourSteps.length - 1) { + document.getElementById("tourNext").textContent = "Finish"; + } else { + document.getElementById("tourNext").textContent = "Next"; + } + + targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); +} + +// Event listener for tour next button +document.getElementById("tourNext").addEventListener("click", () => { + currentStep++; + if (currentStep < tourSteps.length) { + showStep(currentStep); + } else { + document.getElementById("tourOverlay").style.display = "none"; + currentStep = 0; + } +}); + +// Start the tour when the page loads +window.addEventListener("load", function() { + loader.style.display = "none"; + startTour(); +}); + +// Event listener for tour skip button +document.getElementById("tourSkip").addEventListener("click", () => { + document.getElementById("tourOverlay").style.display = "none"; + currentStep = 0; +}); + +// Loader +var loader = document.getElementById("Loader"); +window.addEventListener("load", function() { + loader.style.display = "none"; +}); + +const description = document.querySelector('.bubble-sort-description'); + +const bubbleSortAlgorithm = ` +1. Start at the beginning of the array. +2. Compare the first two elements. +3. If the first element is greater than the second element, swap them. +4. Move to the next pair of elements, and repeat step 3. +5. Continue this process until the end of the array. +6. The largest element will "bubble up" to its correct position at the end of the array. +7. Repeat the process for the rest of the array, excluding the last sorted elements. +8. Continue until no more swaps are needed. +`; + +description.querySelector('pre code.algorithm').innerText = bubbleSortAlgorithm; +$(document).ready(function() { + $('.dropdown-toggle').dropdown(); + }); \ No newline at end of file diff --git a/Algorithm/bubbles.css b/Algorithm/bubbles.css new file mode 100644 index 0000000..d67bdbf --- /dev/null +++ b/Algorithm/bubbles.css @@ -0,0 +1,1007 @@ +:root { + --primary-color: rgb(202, 111, 202); + --secondary-color: #9748cf; + --accent-color: rgb(202, 111, 202); + --light-bg-color: #ffffff; + --dark-bg-color: #333333; + --text-color: #333333; + --light-text-color: #ffffff; + --font-family: 'Muli', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +body { + font-family: var(--font-family); + background-color: var(--light-bg-color); + margin: 0; + padding: 0; +} + +/* .navbar { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; +} + +.navbar-brand, .nav-link { + color: var(--light-text-color) !important; + padding: 0.5rem 1rem; + text-decoration: none; + transition: background-color 0.3s, color 0.3s; +} + +.nav-link:hover { + background-color: rgba(255, 255, 255, 0.2); + color: var(--accent-color) !important; +} + +.navbar-toggler { + background-color: rgba(255, 255, 255, 0.3); +} */ + +.log { + background-color: var(--accent-color); + color: var(--light-text-color) !important; + padding: 5px 15px; + border-radius: 20px; +} +.log:hover{ + background-color: rgb(218, 5, 218); +} + +.bubble-sort-section { + padding: 100px 0; + background-color: var(--light-text-color); +} + +.bubble-sort-title { + font-size: 3rem; + font-weight: bold; + color: var(--primary-color); + text-align: center; +} + +.bubble-sort-description { + font-size: 1.2rem; + color: var(--text-color); + margin-top: 20px; +} + +#bubbleSortDescription h2 { + color: var(--primary-color); + font-size: 24px; + margin-bottom: 10px; +} + +#bubbleSortDescription p { + color: var(--text-color); + font-size: 16px; + line-height: 1.5; + margin-bottom: 20px; +} + +#bubbleSortDescription h3 { + color: var(--primary-color); + font-size: 20px; + margin-bottom: 10px; +} + +#bubbleSortDescription pre { + background: var(--dark-bg-color); + color: var(--light-text-color); + padding: 15px; + border-radius: 5px; + overflow: auto; +} + +#bubbleSortDescription pre code { + font-size: 14px; + line-height: 1.6; +} + +.bubble-sort-gif img { + width: 100%; + max-height: 300px; + object-fit: cover; + border: 2px solid var(--primary-color); + border-radius: 10px; +} + +.complexity-section { + border-top: 5px solid var(--primary-color); +} + +.visualizer-section { + padding: 50px 0; + background-color: var(--light-text-color); +} + +.bar-container { + display: flex; + justify-content: center; + align-items: flex-end; + height: 300px; + margin-bottom: 20px; + gap: 5px; +} + +.bar { + width: 20px; + background-color: var(--primary-color); + color: var(--light-text-color); + text-align: center; + border-radius: 5px; + transition: height 0.2s ease; +} + +.buttons-container { + text-align: center; + margin-bottom: 20px; +} + +.buttons-container button { + background-color: var(--accent-color); + color: var(--light-text-color); + border: none; + padding: 10px 20px; + margin: 0 10px; + border-radius: 5px; + cursor: pointer; +} + +.buttons-container button:hover { + background-color: #a95da1; +} + +.code-section { + background-color: #f1f1f1; + padding: 50px 0; + border-top: 5px solid var(--primary-color); + border-bottom: 5px solid var(--primary-color); +} + +.code-display { + font-family: 'Courier New', Courier, monospace; + font-size: 1rem; + background-color: #2d2d2d; + color: #f1f1f1; + padding: 15px; + border-radius: 5px; + margin-top: 10px; +} + +.nav-tabs .nav-link { + color: var(--primary-color) !important; +} + +.nav-tabs .nav-link.active { + background-color: var(--primary-color) !important; + color: var(--light-text-color) !important; +} + +.questions-section { + background-color: var(--light-text-color); + padding: 50px 0; + border-top: 5px solid var(--primary-color); + border-bottom: 5px solid var(--primary-color); +} + +.questions-section h2 { + color: var(--primary-color); +} + +.table th, +.table td { + vertical-align: middle; +} + +.table a { + color: var(--primary-color); + text-decoration: none; +} + +.table a:hover { + text-decoration: underline; +} + +#buttons { + margin: 20px; + text-align: center; +} + +input, button, select { + margin: 5px; + padding: 10px; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ccc; + outline: none; +} + +button { + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #ddd; +} + +.btn-primary { + background-color: var(--primary-color); + color: white; + border: none; +} + +.btn-primary:hover { + background-color: #a95da1; +} + +.btn-danger { + background-color: #dc3545; + color: white; + border: none; +} + +.btn-danger:hover { + background-color: #bd2130; +} + +.header { + background-color: var(--dark-bg-color); + color: var(--light-text-color); + padding: 20px 0; + text-align: center; +} + +.sh { + display: flex; + justify-content: center; + align-items: flex-end; + height: 400px; + margin-top: 20px; + width: 90%; + margin-left: auto; + margin-right: auto; + position: relative; +} + +#heading { + text-align: center; + margin-top: 20px; + color: var(--text-color); + font-size: 36px; + font-weight: bold; +} + +.bar-container { + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + transition: left 0.5s ease-in-out; +} + +.bar { + background-color: var(--primary-color); + transition: background-color 0.5s ease-in-out, height 0.5s ease-in-out; +} + +.bar-label { + margin-bottom: 5px; + font-weight: bold; +} + +.comparing { + background-color: #e74c3c; +} + +.sorted { + background-color: #2ecc71; +} + +.time { + display: flex; + align-items: end; + justify-content: space-around; + margin: 10px 20px; +} + +.tour-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + display: none; +} + +.tour-popup { + position: fixed; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 5px; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + max-width: 300px; + z-index: 1001; + max-height: calc(100vh - 40px); + overflow-y: auto; +} + +.tour-popup h3 { + margin-top: 0; + color: var(--text-color); +} + +.tour-popup p { + margin-bottom: 15px; +} + +.tour-popup button { + background-color: var(--primary-color); + color: white; + border: none; + padding: 5px 10px; + border-radius: 3px; + cursor: pointer; + margin-right: 10px; +} + +.tour-popup button:hover { + background-color: #a95da1; +} + +.tour-popup .skip-btn { + background-color: #dc3545; +} + +.tour-popup .skip-btn:hover { + background-color: #c82333; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .complexity-container { + flex-direction: column; + } + + .complexity-box { + width: 100%; + margin-bottom: 20px; + } + + .buttons-container { + flex-direction: column; + align-items: center; + } + + .buttons-container button { + width: 100%; + margin-bottom: 10px; + } + + .bubble-sort-title { + font-size: 2rem; + } + + .bubble-sort-description { + font-size: 1rem; + } + + .bar { + width: 10px; + } + + .bubble-sort-gif img { + max-height: 200px; + } + + #heading { + font-size: 24px; + } + + .sh { + height: 300px; + } +} + +@media (max-width: 480px) { + .navbar-brand, .nav-link { + font-size: 0.9rem; + } + + .bubble-sort-title { + font-size: 1.5rem; + } + + .bubble-sort-description { + font-size: 0.9rem; + } + + .bar { + width: 8px; + } + + .buttons-container { + flex-direction: column; + } + + .buttons-container button { + width: 100%; + margin-bottom: 5px; + } + + .bubble-sort-gif img { + max-height: 150px; + } + + #heading { + font-size: 18px; + } + + .sh { + height: 200px; + } +} +/* Navbar */ +.site-logo { + position: relative; + font-weight: 900; + font-size: 1.3rem; + } + .site-logo a { + color: #fff; + } + + .site-navbar { + margin-bottom: 0px; + z-index: 1999; + position: absolute; + width: 100%; + } + .site-navbar .container-fluid { + padding-left: 7rem; + padding-right: 7rem; + } + @media (max-width: 1199.98px) { + .site-navbar .container-fluid { + padding-left: 15px; + padding-right: 15px; + } + } + .site-navbar .site-navigation.border-bottom { + border-bottom: 1px solid #f3f3f4 !important; + } + .site-navbar .site-navigation .site-menu { + margin-bottom: 0; + } + .site-navbar .site-navigation .site-menu .active { + color: #7971ea; + display: inline-block; + padding: 5px 20px; + } + .site-navbar .site-navigation .site-menu a { + text-decoration: none !important; + display: inline-block; + } + .site-navbar .site-navigation .site-menu > li { + display: inline-block; + } + .site-navbar .site-navigation .site-menu > li > a { + padding: 5px 20px; + color: #fff; + display: inline-block; + text-decoration: none !important; + } + .site-navbar .site-navigation .site-menu > li > a:hover { + color: #fff; + } + .site-navbar .site-navigation .site-menu .has-children { + position: relative; + } + .site-navbar .site-navigation .site-menu .has-children > a { + position: relative; + padding-right: 20px; + } + .site-navbar .site-navigation .site-menu .has-children > a:before { + position: absolute; + content: "\e313"; + font-size: 16px; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + font-family: "icomoon"; + } + .site-navbar .site-navigation .site-menu .has-children .dropdown { + visibility: hidden; + opacity: 0; + top: 100%; + position: absolute; + text-align: left; + border-top: 2px solid #7971ea; + -webkit-box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1); + border-left: 1px solid #edf0f5; + border-right: 1px solid #edf0f5; + border-bottom: 1px solid #edf0f5; + padding: 0px 0; + margin-top: 20px; + margin-left: 0px; + background: #fff; + -webkit-transition: 0.2s 0s; + -o-transition: 0.2s 0s; + transition: 0.2s 0s; + } + .site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top { + position: absolute; + } + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown.arrow-top:before { + bottom: 100%; + left: 20%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown.arrow-top:before { + border-color: rgba(136, 183, 213, 0); + border-bottom-color: #fff; + border-width: 10px; + margin-left: -10px; + } + .site-navbar .site-navigation .site-menu .has-children .dropdown a { + text-transform: none; + letter-spacing: normal; + -webkit-transition: 0s all; + -o-transition: 0s all; + transition: 0s all; + color: #343a40; + } + .site-navbar .site-navigation .site-menu .has-children .dropdown .active > a { + color: #7971ea !important; + } + .site-navbar .site-navigation .site-menu .has-children .dropdown > li { + list-style: none; + padding: 0; + margin: 0; + min-width: 200px; + } + .site-navbar .site-navigation .site-menu .has-children .dropdown > li > a { + padding: 9px 20px; + display: block; + } + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown + > li + > a:hover { + background: #f4f5f9; + color: #25262a; + } + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown + > li.has-children + > a:before { + content: "\e315"; + right: 20px; + } + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown + > li.has-children + > .dropdown, + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown + > li.has-children + > ul { + left: 100%; + top: 0; + } + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown + > li.has-children:hover + > a, + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown + > li.has-children:active + > a, + .site-navbar + .site-navigation + .site-menu + .has-children + .dropdown + > li.has-children:focus + > a { + background: #f4f5f9; + color: #25262a; + } + .site-navbar .site-navigation .site-menu .has-children:hover > a, + .site-navbar .site-navigation .site-menu .has-children:focus > a, + .site-navbar .site-navigation .site-menu .has-children:active > a { + color: #7971ea; + } + .site-navbar .site-navigation .site-menu .has-children:hover, + .site-navbar .site-navigation .site-menu .has-children:focus, + .site-navbar .site-navigation .site-menu .has-children:active { + cursor: pointer; + } + .site-navbar .site-navigation .site-menu .has-children:hover > .dropdown, + .site-navbar .site-navigation .site-menu .has-children:focus > .dropdown, + .site-navbar .site-navigation .site-menu .has-children:active > .dropdown { + -webkit-transition-delay: 0s; + -o-transition-delay: 0s; + transition-delay: 0s; + margin-top: 0px; + visibility: visible; + opacity: 1; + } + .site-navbar .site-navigation .site-menu.site-menu-dark > li > a { + color: #000; + } + + .site-mobile-menu { + width: 300px; + position: fixed; + right: 0; + z-index: 2000; + padding-top: 20px; + background: #fff; + height: calc(100vh); + -webkit-transform: translateX(110%); + -ms-transform: translateX(110%); + transform: translateX(110%); + -webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1); + box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1); + -webkit-transition: 0.3s all ease-in-out; + -o-transition: 0.3s all ease-in-out; + transition: 0.3s all ease-in-out; + } + .offcanvas-menu .site-mobile-menu { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + } + .site-mobile-menu .site-mobile-menu-header { + width: 100%; + float: left; + padding-left: 20px; + padding-right: 20px; + } + .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close { + float: right; + margin-top: 8px; + } + .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span { + font-size: 30px; + display: inline-block; + padding-left: 10px; + padding-right: 0px; + line-height: 1; + cursor: pointer; + -webkit-transition: 0.3s all ease; + -o-transition: 0.3s all ease; + transition: 0.3s all ease; + } + .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover { + color: #25262a; + } + .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo { + float: left; + margin-top: 10px; + margin-left: 0px; + } + .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a { + display: inline-block; + text-transform: uppercase; + } + .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img { + max-width: 70px; + } + .site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover { + text-decoration: none; + } + .site-mobile-menu .site-mobile-menu-body { + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + position: relative; + padding: 0 20px 20px 20px; + height: calc(100vh - 52px); + padding-bottom: 150px; + } + .site-mobile-menu .site-nav-wrap { + padding: 0; + margin: 0; + list-style: none; + position: relative; + } + .site-mobile-menu .site-nav-wrap a { + padding: 10px 20px; + display: block; + position: relative; + color: #212529; + } + .site-mobile-menu .site-nav-wrap a:hover { + color: #7971ea; + } + .site-mobile-menu .site-nav-wrap li { + position: relative; + display: block; + } + .site-mobile-menu .site-nav-wrap li .active { + color: #7971ea; + } + .site-mobile-menu .site-nav-wrap .arrow-collapse { + position: absolute; + right: 0px; + top: 10px; + z-index: 20; + width: 36px; + height: 36px; + text-align: center; + cursor: pointer; + border-radius: 50%; + } + .site-mobile-menu .site-nav-wrap .arrow-collapse:hover { + background: #f8f9fa; + } + .site-mobile-menu .site-nav-wrap .arrow-collapse:before { + font-size: 12px; + z-index: 20; + font-family: "icomoon"; + content: "\f078"; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%) rotate(-180deg); + -ms-transform: translate(-50%, -50%) rotate(-180deg); + transform: translate(-50%, -50%) rotate(-180deg); + -webkit-transition: 0.3s all ease; + -o-transition: 0.3s all ease; + transition: 0.3s all ease; + } + .site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before { + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + .site-mobile-menu .site-nav-wrap > li { + display: block; + position: relative; + float: left; + width: 100%; + } + .site-mobile-menu .site-nav-wrap > li > a { + padding-left: 20px; + font-size: 20px; + } + .site-mobile-menu .site-nav-wrap > li > ul { + padding: 0; + margin: 0; + list-style: none; + } + .site-mobile-menu .site-nav-wrap > li > ul > li { + display: block; + } + .site-mobile-menu .site-nav-wrap > li > ul > li > a { + padding-left: 40px; + font-size: 16px; + } + .site-mobile-menu .site-nav-wrap > li > ul > li > ul { + padding: 0; + margin: 0; + } + .site-mobile-menu .site-nav-wrap > li > ul > li > ul > li { + display: block; + } + .site-mobile-menu .site-nav-wrap > li > ul > li > ul > li > a { + font-size: 16px; + padding-left: 60px; + } + .site-mobile-menu .site-nav-wrap[data-class="social"] { + float: left; + width: 100%; + margin-top: 30px; + padding-bottom: 5em; + } + .site-mobile-menu .site-nav-wrap[data-class="social"] > li { + width: auto; + } + .site-mobile-menu .site-nav-wrap[data-class="social"] > li:first-child a { + padding-left: 15px !important; + } + + .sticky-wrapper { + position: absolute; + z-index: 100; + width: 100%; + } + .sticky-wrapper + .site-blocks-cover { + margin-top: 96px; + } + .sticky-wrapper .site-navbar { + -webkit-transition: 0.3s all ease; + -o-transition: 0.3s all ease; + transition: 0.3s all ease; + } + .sticky-wrapper .site-navbar .site-menu > li { + display: inline-block; + } + .sticky-wrapper .site-navbar .site-menu > li > a.active { + color: #fff; + position: relative; + } + .sticky-wrapper .site-navbar .site-menu > li > a.active:after { + height: 2px; + background: #fff; + content: ""; + position: absolute; + bottom: 0; + left: 20px; + right: 20px; + } + .sticky-wrapper.is-sticky .site-navbar { + -webkit-box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2); + box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2); + background: #fff; + } + .sticky-wrapper.is-sticky .site-navbar .site-logo a { + color: #000; + } + .sticky-wrapper.is-sticky .site-navbar .site-menu > li { + display: inline-block; + } + .sticky-wrapper.is-sticky .site-navbar .site-menu > li > a { + padding: 5px 20px; + color: #000; + display: inline-block; + text-decoration: none !important; + } + .sticky-wrapper.is-sticky .site-navbar .site-menu > li > a:hover { + color: #7971ea; + } + .sticky-wrapper.is-sticky .site-navbar .site-menu > li > a.active:after { + background: #7971ea; + } + .sticky-wrapper .shrink { + padding-top: 10px !important; + padding-bottom: 10px !important; + } + + .img-absolute { + position: absolute; + right: 10%; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + } + .img-absolute img { + max-width: 600px; + -webkit-box-shadow: 0 10px 50px -5px rgba(0, 0, 0, 0.4); + box-shadow: 0 10px 50px -5px rgba(0, 0, 0, 0.4); + } + .dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0.125rem 0 0; + font-size: 1rem; + color: #212529; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); + } + + .nav-item.show .dropdown-menu { + display: block; + padding-left: 10px; + + } + .topbtn { + position: fixed; + width: 50px; + height: 50px; + background: #7971ea; + bottom: 11px; + right: 29px; + text-decoration: none; + text-align: center; + line-height: 50px; + color: white !important; + font-size: 22px; + border-radius: 50%; + } + + .gotopbtn i { + color: white !important; /* Ensure the icon color stays white */ + } + .dropdown-menu { + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); + } + + .dropdown-item { + color: #333; + padding: 0.5rem 1rem; + transition: background-color 0.2s, color 0.2s; + } + + .dropdown-item:hover, + .navbar-nav .dropdown-item:focus { + background-color: rgba(0, 0, 0, 0.075); + color: #000; + } + .dropdown-toggle::after { + margin-left: 0.255em; + vertical-align: 0.255em; + } + .heading { + font-weight: 600; + } + + .navbar-toggler-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); + } + + #particles-js { + position: absolute; + width: 100%; + height: 100%; + z-index: -1; + top: 0; + left: 0; + } + + .nav-link { + color: black; + text-decoration: none; + font-weight: 500; + } + + .nav-link:hover { + color: rgb(219, 127, 219); + transition: all 0.3s ease; + } + \ No newline at end of file diff --git a/Bubble.html b/Bubble.html deleted file mode 100644 index 0b2b995..0000000 --- a/Bubble.html +++ /dev/null @@ -1,274 +0,0 @@ - - -Bubble Sort - - - - - - - -
-
- Home - Bubble Sort - Insertion Sort - Selection Sort - Merge Sort -
-
-

BUBBLE SORT

-
- -
- - - - - - - -
-
- - - - - From 9c9ec9a50ec4ce2969b36fb9459141bce49b3cae Mon Sep 17 00:00:00 2001 From: AkshatPandey Date: Fri, 12 Jul 2024 16:30:15 +0530 Subject: [PATCH 2/2] bubble sort --- Algorithm/Bubble.html | 20 ++++++++++---------- index.html | 20 ++++++++++++++++---- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/Algorithm/Bubble.html b/Algorithm/Bubble.html index c03ac5f..0e4af1f 100644 --- a/Algorithm/Bubble.html +++ b/Algorithm/Bubble.html @@ -45,7 +45,7 @@