podsni/algorithm-animator
0
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 Animator</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>12 <style>13 body {14 background-color: #0f172a;15 color: #e2e8f0;16 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;17 }18 19 .algorithm-selector {20 background-color: #1e293b;21 border-radius: 8px;22 transition: all 0.3s ease;23 }24 25 .algorithm-selector:hover {26 background-color: #334155;27 }28 29 .active-algorithm {30 background-color: #334155;31 border-left: 4px solid #60a5fa;32 }33 34 .visualization-area {35 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);36 border-radius: 12px;37 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);38 }39 40 .array-bar {41 background: linear-gradient(to top, #3b82f6, #60a5fa);42 border-radius: 4px 4px 0 0;43 transition: height 0.3s ease, background-color 0.3s ease;44 }45 46 .comparing {47 background: linear-gradient(to top, #f59e0b, #fbbf24);48 }49 50 .swapping {51 background: linear-gradient(to top, #ef4444, #f87171);52 }53 54 .sorted {55 background: linear-gradient(to top, #10b981, #34d399);56 }57 58 .code-block {59 background-color: #1e293b;60 border-left: 4px solid #60a5fa;61 font-family: 'Fira Code', monospace;62 }63 64 .complexity-badge {65 background-color: #334155;66 }67 </style>68</head>69<body class="min-h-screen">70 <!-- Navigation -->71 <nav class="bg-slate-900 border-b border-slate-700 sticky top-0 z-50">72 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">73 <div class="flex items-center justify-between h-16">74 <div class="flex items-center">75 <div class="flex-shrink-0 flex items-center">76 <i data-feather="cpu" class="text-blue-400 mr-2"></i>77 <span class="font-bold text-xl text-white">Algorithm Animator</span>78 </div>79 <div class="hidden md:block">80 <div class="ml-10 flex items-baseline space-x-4">81 <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>82 <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Sorting</a>83 <a href="graph.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Graph Algorithms</a>84 <a href="dynamic.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dynamic Programming</a>85 </div>86 </div>87 </div>88 </div>89 </div>90 </nav>91 92 <!-- Main Content -->93 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">94 <div class="text-center mb-10">95 <h1 class="text-3xl font-extrabold text-white sm:text-4xl">96 Sorting Algorithms Visualization97 </h1>98 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300">99 Understand how different sorting algorithms work through interactive visualizations100 </p>101 </div>102 103 <div class="flex flex-col lg:flex-row gap-8">104 <!-- Algorithm Selection Panel -->105 <div class="lg:w-1/4">106 <div class="bg-slate-800 rounded-lg p-6 sticky top-24">107 <h2 class="text-xl font-bold text-white mb-4">Sorting Algorithms</h2>108 <div class="space-y-3">109 <div class="algorithm-selector p-4 cursor-pointer active-algorithm">110 <h3 class="font-medium text-white">Bubble Sort</h3>111 <p class="text-sm text-gray-300 mt-1">Simple comparison-based algorithm</p>112 </div>113 <div class="algorithm-selector p-4 cursor-pointer">114 <h3 class="font-medium text-white">Merge Sort</h3>115 <p class="text-sm text-gray-300 mt-1">Divide and conquer approach</p>116 </div>117 <div class="algorithm-selector p-4 cursor-pointer">118 <h3 class="font-medium text-white">Quick Sort</h3>119 <p class="text-sm text-gray-300 mt-1">Efficient partitioning algorithm</p>120 </div>121 <div class="algorithm-selector p-4 cursor-pointer">122 <h3 class="font-medium text-white">Heap Sort</h3>123 <p class="text-sm text-gray-300 mt-1">Uses binary heap data structure</p>124 </div>125 <div class="algorithm-selector p-4 cursor-pointer">126 <h3 class="font-medium text-white">Insertion Sort</h3>127 <p class="text-sm text-gray-300 mt-1">Builds final sorted array one item at a time</p>128 </div>129 </div>130 131 <div class="mt-8">132 <h3 class="font-medium text-white mb-3">Controls</h3>133 <div class="grid grid-cols-2 gap-3">134 <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">135 Play136 </button>137 <button class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded">138 Pause139 </button>140 <button class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded">141 Reset142 </button>143 <button class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded">144 Step145 </button>146 </div>147 </div>148 149 <div class="mt-8">150 <h3 class="font-medium text-white mb-3">Array Size</h3>151 <input type="range" min="5" max="50" value="15" class="w-full">152 <div class="flex justify-between text-sm text-gray-400 mt-1">153 <span>Small</span>154 <span>Large</span>155 </div>156 </div>157 </div>158 </div>159 160 <!-- Visualization Area -->161 <div class="lg:w-3/4">162 <div class="visualization-area p-6 rounded-xl">163 <div class="flex justify-between items-center mb-6">164 <h2 class="text-2xl font-bold text-white">Bubble Sort Visualization</h2>165 <div class="flex space-x-3">166 <div class="complexity-badge px-3 py-1 rounded-full text-sm">167 Time: O(n²)168 </div>169 <div class="complexity-badge px-3 py-1 rounded-full text-sm">170 Space: O(1)171 </div>172 </div>173 </div>174 175 <!-- Array Visualization -->176 <div class="mb-8">177 <div class="flex items-end justify-center h-64 space-x-1">178 <!-- Bars representing array elements -->179 <div class="array-bar w-8 h-32"></div>180 <div class="array-bar w-8 h-24"></div>181 <div class="array-bar w-8 h-40 comparing"></div>182 <div class="array-bar w-8 h-28 swapping"></div>183 <div class="array-bar w-8 h-36"></div>184 <div class="array-bar w-8 h-20"></div>185 <div class="array-bar w-8 h-44"></div>186 <div class="array-bar w-8 h-32 sorted"></div>187 <div class="array-bar w-8 h-24"></div>188 <div class="array-bar w-8 h-36"></div>189 </div>190 </div>191 192 <!-- Current Step Description -->193 <div class="bg-slate-800 rounded-lg p-4 mb-6">194 <h3 class="font-bold text-white mb-2">Current Step</h3>195 <p class="text-gray-300">Comparing elements at positions 2 and 3. Since 40 > 28, we swap them.</p>196 </div>197 198 <!-- Pseudocode -->199 <div class="code-block p-4 rounded mb-6">200 <h3 class="font-bold text-white mb-2">Pseudocode</h3>201 <pre class="text-green-400 text-sm">202for i = 0 to n-1:203 for j = 0 to n-i-2:204 if array[j] > array[j+1]:205 swap(array[j], array[j+1])</pre>206 </div>207 208 <!-- Mathematical Explanation -->209 <div class="bg-slate-800 rounded-lg p-4">210 <h3 class="font-bold text-white mb-3">Mathematical Analysis</h3>211 <div class="math-display text-blue-300">212 \( \text{Worst Case: } O(n^2) \)213 </div>214 <p class="text-gray-300 mt-3">215 In the worst case (reverse sorted array), bubble sort requires \( n-1 \) passes, 216 with the \( i^{th} \) pass making \( n-i \) comparisons. The total number of 217 comparisons is:218 </p>219 <div class="math-display text-blue-300">220 \( \sum_{i=1}^{n-1}(n-i) = \frac{n(n-1)}{2} = O(n^2) \)221 </div>222 </div>223 </div>224 </div>225 </div>226 </div>227 228 <!-- Footer -->229 <footer class="bg-slate-900 border-t border-slate-800 mt-12">230 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">231 <div class="md:flex md:items-center md:justify-between">232 <div class="flex justify-center md:justify-start">233 <div class="flex items-center">234 <i data-feather="cpu" class="text-blue-400 mr-2"></i>235 <span class="text-white font-bold">Algorithm Animator</span>236 </div>237 </div>238 <div class="mt-8 md:mt-0 md:order-1">239 <p class="text-center text-base text-gray-400">240 © 2023 Algorithm Animator. All rights reserved.241 </p>242 </div>243 </div>244 </div>245 </footer>246 247 <script>248 feather.replace();249 </script>250</body>251</html>252