UI Improved

Author: kanavphull

image_1.png

@@ -5,48 +5,44 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Visualizer for Sorting Algorithms</title>
+    <title>Sorting Visualizer</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
 </head>
 <header>
-    <nav style="background-color: #42C2FF; font-weight: bold;" class=" navbar-brand navbar-expand-lg" align="center" >Visualizer for Sorting Algorithms</nav>
+    <nav class=" navbar-brand navbar-expand-lg bg-info" align="center">Sorting Visualizer</nav>
     <nav>
-        <div class="row navbar navbar-expand-lg navbar-dark" style="background-color: #85F4FF;">
-            
+        <div class="row navbar navbar-expand-lg navbar-dark bg-dark">
             <div class=" navbar-brand nav-link col gap-2 d-sm-flex" id="newArray">
                 <button type="button" class="btn btn-toolbar btn-outline-success btn-light btn-group btn-sm newArray">New Array</button>
             </div>
-
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse  col gap-2 ms-auto justify-content-end" id="navbarNav">
-
-                <button type="button" class="btn btn-outline-info btn-light btn-sm insertionSort" style="color: black;">Insertion Sort</button>
-                <button type="button" class="btn btn-outline-info btn-light btn-sm selectionSort" style="color: black;">Selection Sort</button>
-                <button type="button" class="btn btn-outline-info btn-light btn-sm bubbleSort" style="color: black;">Bubble Sort</button>
-                <button type="button" class="btn btn-outline-info btn-light btn-sm quickSort" style="color: black;">Quick Sort</button>
-                <button type="button" class="btn btn-outline-info btn-light btn-sm mergeSort" style="color: black;">Merge Sort</button>
-            </div>
-
-            <div class="col" id="input" >
-                <span id="size" style="font-size: 20px; font-weight: bold; margin-left: 100px;">Size
+            <div class="col" id="input">
+                <span id="size">Size
                     <input id="arr_sz" type="range" min="5" max="100" step=1 value=60>
                 </span>
-                <span id="speed" style="font-size: 20px; font-weight: bold; margin-right: 50px;">Speed
+                <span id="speed">Speed
                     <input id="speed_input" type="range" min="20" max="300" stepDown=10 value=60>
                 </span>
             </div>
-            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+            <div class="collapse navbar-collapse  col gap-2 ms-auto justify-content-end" id="navbarNav">
+
+                <button type="button" class="btn btn-outline-info btn-light btn-sm insertionSort">Insertion Sort</button>
+                <button type="button" class="btn btn-outline-info btn-light btn-sm selectionSort">Selection Sort</button>
+                <button type="button" class="btn btn-outline-info btn-light btn-sm bubbleSort">Bubble Sort</button>
+                <button type="button" class="btn btn-outline-info btn-light btn-sm quickSort">Quick Sort</button>
+                <button type="button" class="btn btn-outline-info btn-light btn-sm mergeSort">Merge Sort</button>
+            </div>
         </div>
     </nav>
     </div>
 </header>
 
 <body class="bottom  text-white">
 
-    <div id="bars" class="flex-container bg-gradient border-2" style="background-color: #B8FFF9;"></div>
+    <div id="bars" class="flex-container bg-gradient border-2"></div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
     <script src="js_files/sorting.js"></script>
     <script src="js_files/bubble.js"></script>

image_2.png

@@ -1,4 +1,3 @@
-
 .flex-container {
     margin-top: 20px;
     display: flex;
@@ -31,15 +30,15 @@
 }
 
 .flex-item {
-    background: #42C2FF;
+    background: cyan;
     border: 1pt solid black;
     width: 15px;
     transition: 0.1s all ease;
 }
 
 .row {
     display: grid;
-    grid-template-columns: 0.25fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 2fr;
 }
 
 .bottom {
@@ -50,5 +49,4 @@
     display: flex;
     padding: 10px;
     justify-content: space-around;
-}
-
+}