firasx/algorithm-playground

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Sorting Algorithms | Algorithm Playground</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://unpkg.com/feather-icons"></script>10    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>13    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>14</head>15<body class="bg-gray-900 text-white font-['Inter']">16    <custom-navbar></custom-navbar>17    18    <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>19    20    <main class="container mx-auto px-4 py-12 max-w-6xl">21        <section class="mb-12">22            <h1 class="text-4xl md:text-5xl font-bold mb-6">Sorting Algorithms</h1>23            <p class="text-xl text-gray-300 max-w-3xl">24                Visualize how different sorting algorithms work with interactive animations and Python implementations.25            </p>26        </section>27 28        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">29            <!-- Algorithm Selection -->30            <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">31                <h2 class="text-2xl font-bold mb-6">Select Algorithm</h2>32                33                <div class="grid grid-cols-2 gap-4">34                    <button id="bubble-sort-btn" class="algorithm-btn active" data-algo="bubble">35                        Bubble Sort36                    </button>37                    <button id="selection-sort-btn" class="algorithm-btn" data-algo="selection">38                        Selection Sort39                    </button>40                    <button id="insertion-sort-btn" class="algorithm-btn" data-algo="insertion">41                        Insertion Sort42                    </button>43                    <button id="merge-sort-btn" class="algorithm-btn" data-algo="merge">44                        Merge Sort45                    </button>46                    <button id="quick-sort-btn" class="algorithm-btn" data-algo="quick">47                        Quick Sort48                    </button>49                    <button id="heap-sort-btn" class="algorithm-btn" data-algo="heap">50                        Heap Sort51                    </button>52                </div>53                54                <div class="mt-8">55                    <label class="block text-gray-300 mb-2">Array Size</label>56                    <input type="range" id="array-size" min="5" max="50" value="15" class="w-full">57                    58                    <label class="block text-gray-300 mb-2 mt-4">Sorting Speed</label>59                    <input type="range" id="sort-speed" min="1" max="10" value="5" class="w-full">60                    61                    <div class="flex gap-4 mt-6">62                        <button id="generate-array" class="control-btn bg-blue-600 hover:bg-blue-700">63                            Generate New Array64                        </button>65                        <button id="start-sort" class="control-btn bg-green-600 hover:bg-green-700">66                            Start Sorting67                        </button>68                    </div>69                </div>70            </div>71            72            <!-- Animation Container -->73            <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">74                <h2 class="text-2xl font-bold mb-4">Visualization</h2>75                <div class="animation-container" id="sorting-animation">76                    <!-- Canvas will be injected here by JS -->77                </div>78                79                <div class="flex justify-between items-center mt-4 text-sm text-gray-400">80                    <div>Comparisons: <span id="comparisons">0</span></div>81                    <div>Swaps: <span id="swaps">0</span></div>82                    <div>Time: <span id="time">0</span>ms</div>83                </div>84            </div>85        </div>86        87        <!-- Algorithm Explanation -->88        <div class="explanation mt-12">89            <h2 class="text-2xl font-bold mb-4">Bubble Sort Explained</h2>90            <p class="text-gray-300 mb-4">91                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. 92                The pass through the list is repeated until the list is sorted.93            </p>94            <div class="code-block">95                <div class="code-header">96                    <span>Python Implementation</span>97                    <button class="code-copy-btn">Copy</button>98                </div>99                <pre><code class="language-python">def bubble_sort(arr):100    n = len(arr)101    for i in range(n):102        # Last i elements are already in place103        for j in range(0, n-i-1):104            # Traverse the array from 0 to n-i-1105            # Swap if the element found is greater than the next element106            if arr[j] > arr[j+1]:107                arr[j], arr[j+1] = arr[j+1], arr[j]108    return arr</code></pre>109            </div>110            111            <h3 class="text-xl font-bold mt-6 mb-3">Complexity Analysis</h3>112            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">113                <div class="bg-gray-700 p-4 rounded-lg">114                    <h4 class="font-bold text-blue-400 mb-2">Time Complexity</h4>115                    <p>Best: O(n)</p>116                    <p>Average: O(n²)</p>117                    <p>Worst: O(n²)</p>118                </div>119                <div class="bg-gray-700 p-4 rounded-lg">120                    <h4 class="font-bold text-purple-400 mb-2">Space Complexity</h4>121                    <p>O(1)</p>122                </div>123                <div class="bg-gray-700 p-4 rounded-lg">124                    <h4 class="font-bold text-green-400 mb-2">Stable</h4>125                    <p>Yes</p>126                </div>127            </div>128        </div>129    </main>130 131    <custom-footer></custom-footer>132 133    <script src="components/navbar.js"></script>134    <script src="components/footer.js"></script>135    <script src="script.js"></script>136    <script src="algorithms/sorting.js"></script>137    <script>138        feather.replace();139        VANTA.NET({140            el: "#vanta-bg",141            mouseControls: true,142            touchControls: true,143            gyroControls: false,144            minHeight: 200.00,145            minWidth: 200.00,146            scale: 1.00,147            scaleMobile: 1.00,148            color: 0x3f3f8f,149            backgroundColor: 0x111827,150            points: 9.00,151            maxDistance: 25.00,152            spacing: 15.00153        });154        155        // Initialize sorting visualization156        document.addEventListener('DOMContentLoaded', () => {157            initSortingVisualization();158        });159    </script>160</body>161</html>