new ui

Author: avinashvermaaa

README.md

@@ -1,3 +1,44 @@
-# Sorting_Visualizer
+# Algorithms Visualizer :-
 Website :- https://avinashvermaaa.github.io/Sorting_Visualizer/
-* It helps to Visualize the sorting algorithms like ( BUBBLE SORT, INSERTION SORT, SELECTION SORT, QUICK SORT, HEAP SORT, SHELL SORT )
+
+It's a high-performance, visually stunning web application designed to help students and developers visualize the inner workings of common sorting algorithms. Built with a modern **Glassmorphism** aesthetic, it provides real-time feedback on comparisons, swaps, and sorted states.
+
+
+## 🚀 Supported Algorithms
+- **Bubble Sort**: Simple comparison-based sorting.
+- **Insertion Sort**: Build a sorted array one element at a time.
+- **Selection Sort**: Find the minimum and move it to the start.
+- **Quick Sort**: Efficient divide-and-conquer with pivoting.
+- **Heap Sort**: Binary tree-based sorting structure.
+- **Merge Sort**: Stable divide-and-conquer via recursive merging.
+- **Shell Sort**: Optimized version of insertion sort.
+
+
+## ✨ Key Features
+- **Modern UI**: Dark-themed glassmorphism design with neon cyan accents.
+- **Dynamic Sizing**: Automatically calculates the number of bars based on your screen size to prevent overflow.
+- **Real-Time Visualization**: Uses `async/await` to provide smooth, adjustable animations.
+- **Responsive Design**: Adapts to any screen size, from mobile phones to ultra-wide monitors.
+- **State Coloring**:
+  - <kbd>Teal (#39A6A3)</kbd>: Elements currently being compared.
+  - <kbd>Yellow (#FFE268)</kbd>: Elements in their correct relative positions.
+  - <kbd>Gold (#FFC93C)</kbd>: Final verified sorted state.
+
+
+
+
+## 🛠️ Technical Stack
+- **HTML5**: Semantic structure.
+- **CSS3**: Custom properties (variables), Flexbox, and Glassmorphism (backdrop-blur).
+- **Vanilla JavaScript**: Pure logic with no heavy frameworks.
+- **Bootstrap 5**: Used for the off-canvas navigation and layout grid.
+
+
+## 📂 Project Structure
+```text
+├── index.html          # Landing Page
+├── shared.style.css    # Modern UI styles used across all pages
+├── shared.js           # Core logic (generate array, disable buttons)
+├── sorting algorithms/
+│   ├── all algos       # separate folder for all algos
+└── assets/             # Icons and images