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>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 :root {14 --primary-color: #2d3748;15 --secondary-color: #4a5568;16 --accent-color: #63b3ed;17 }18 19 body {20 background-color: #0f172a;21 color: #e2e8f0;22 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;23 }24 25 .math-display {26 font-size: 1.2rem;27 text-align: center;28 margin: 1.5rem 0;29 }30 31 .algorithm-card {32 transition: transform 0.3s ease, box-shadow 0.3s ease;33 border: 1px solid rgba(94, 94, 94, 0.3);34 }35 36 .algorithm-card:hover {37 transform: translateY(-5px);38 box-shadow: 0 10px 25px rgba(94, 94, 94, 0.4);39 }40 41 .nav-link {42 position: relative;43 }44 45 .nav-link::after {46 content: '';47 position: absolute;48 bottom: -5px;49 left: 0;50 width: 0;51 height: 2px;52 background-color: var(--accent-color);53 transition: width 0.3s ease;54 }55 56 .nav-link:hover::after {57 width: 100%;58 }59 60 .visualization-container {61 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);62 border-radius: 12px;63 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);64 }65 66 .code-block {67 background-color: #1e293b;68 border-left: 4px solid var(--accent-color);69 font-family: 'Fira Code', monospace;70 }71 </style>72</head>73<body class="min-h-screen">74 <!-- Navigation -->75 <nav class="bg-slate-900 border-b border-slate-700 sticky top-0 z-50">76 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">77 <div class="flex items-center justify-between h-16">78 <div class="flex items-center">79 <div class="flex-shrink-0 flex items-center">80 <i data-feather="cpu" class="text-blue-400 mr-2"></i>81 <span class="font-bold text-xl text-white">Algorithm Animator</span>82 </div>83 <div class="hidden md:block">84 <div class="ml-10 flex items-baseline space-x-4">85 <a href="#" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>86 <a href="sorting.html" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Sorting</a>87 <a href="graph.html" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Graph Algorithms</a>88 <a href="dynamic.html" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dynamic Programming</a>89 </div>90 </div>91 </div>92 <div class="hidden md:block">93 <div class="ml-4 flex items-center md:ml-6">94 <button class="bg-slate-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">95 <i data-feather="search" class="h-5 w-5"></i>96 </button>97 </div>98 </div>99 </div>100 </div>101 </nav>102 103 <!-- Hero Section -->104 <div class="relative overflow-hidden">105 <div class="max-w-7xl mx-auto">106 <div class="relative z-10 pb-8 bg-transparent sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">107 <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">108 <div class="sm:text-center lg:text-left">109 <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">110 <span class="block">Visualize Algorithms</span>111 <span class="block text-blue-400 mt-2">Like Never Before</span>112 </h1>113 <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">114 Break down complex algorithmic concepts into easy-to-understand animated explanations with detailed step-by-step visualizations.115 </p>116 <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">117 <div class="rounded-md shadow">118 <a href="#algorithms" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-slate-900 bg-blue-400 hover:bg-blue-500 md:py-4 md:text-lg md:px-10">119 Get Started120 </a>121 </div>122 <div class="mt-3 sm:mt-0 sm:ml-3">123 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-300 bg-slate-800 hover:bg-slate-700 md:py-4 md:text-lg md:px-10">124 View Examples125 </a>126 </div>127 </div>128 </div>129 </main>130 </div>131 </div>132 <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">133 <div class="h-56 w-full bg-gradient-to-r from-blue-500 to-purple-600 sm:h-72 lg:w-full lg:h-full opacity-20"></div>134 </div>135 </div>136 137 <!-- Algorithm Categories -->138 <section id="algorithms" class="py-12 bg-slate-900">139 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">140 <div class="text-center">141 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">142 Explore Algorithm Categories143 </h2>144 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4">145 Choose from various algorithm types to visualize and understand their inner workings146 </p>147 </div>148 149 <div class="mt-10">150 <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">151 <!-- Sorting Algorithms -->152 <div class="algorithm-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">153 <div class="p-6">154 <div class="flex items-center">155 <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">156 <i data-feather="bar-chart-2" class="h-6 w-6 text-white"></i>157 </div>158 <div class="ml-4">159 <h3 class="text-lg font-medium text-white">Sorting Algorithms</h3>160 <p class="mt-1 text-sm text-gray-300">Quick Sort, Merge Sort, Bubble Sort</p>161 </div>162 </div>163 <div class="mt-6">164 <a href="sorting.html" class="text-blue-400 hover:text-blue-300 font-medium">165 Explore Visualizations166 <i data-feather="arrow-right" class="inline ml-1 h-4 w-4"></i>167 </a>168 </div>169 </div>170 </div>171 172 <!-- Graph Algorithms -->173 <div class="algorithm-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">174 <div class="p-6">175 <div class="flex items-center">176 <div class="flex-shrink-0 bg-green-500 rounded-md p-3">177 <i data-feather="git-branch" class="h-6 w-6 text-white"></i>178 </div>179 <div class="ml-4">180 <h3 class="text-lg font-medium text-white">Graph Algorithms</h3>181 <p class="mt-1 text-sm text-gray-300">Dijkstra, BFS, DFS, MST</p>182 </div>183 </div>184 <div class="mt-6">185 <a href="graph.html" class="text-green-400 hover:text-green-300 font-medium">186 Explore Visualizations187 <i data-feather="arrow-right" class="inline ml-1 h-4 w-4"></i>188 </a>189 </div>190 </div>191 </div>192 193 <!-- Dynamic Programming -->194 <div class="algorithm-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">195 <div class="p-6">196 <div class="flex items-center">197 <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">198 <i data-feather="layers" class="h-6 w-6 text-white"></i>199 </div>200 <div class="ml-4">201 <h3 class="text-lg font-medium text-white">Dynamic Programming</h3>202 <p class="mt-1 text-sm text-gray-300">Fibonacci, Knapsack, LCS</p>203 </div>204 </div>205 <div class="mt-6">206 <a href="dynamic.html" class="text-purple-400 hover:text-purple-300 font-medium">207 Explore Visualizations208 <i data-feather="arrow-right" class="inline ml-1 h-4 w-4"></i>209 </a>210 </div>211 </div>212 </div>213 </div>214 </div>215 </div>216 </section>217 218 <!-- How It Works -->219 <section class="py-12 bg-slate-800">220 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">221 <div class="lg:text-center">222 <h2 class="text-base text-blue-400 font-semibold tracking-wide uppercase">How It Works</h2>223 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">224 Understanding Algorithms Visually225 </p>226 <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">227 Our visualization tool breaks down complex algorithms into digestible steps with clear animations.228 </p>229 </div>230 231 <div class="mt-10">232 <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">233 <div class="flex">234 <div class="flex-shrink-0">235 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">236 <i data-feather="play-circle" class="h-6 w-6"></i>237 </div>238 </div>239 <div class="ml-4">240 <h3 class="text-lg font-medium text-white">Step-by-Step Visualization</h3>241 <p class="mt-2 text-base text-gray-300">242 Each algorithm is broken down into discrete steps with visual representations of data structures and operations.243 </p>244 </div>245 </div>246 247 <div class="flex">248 <div class="flex-shrink-0">249 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">250 <i data-feather="book-open" class="h-6 w-6"></i>251 </div>252 </div>253 <div class="ml-4">254 <h3 class="text-lg font-medium text-white">Mathematical Explanation</h3>255 <p class="mt-2 text-base text-gray-300">256 Clear mathematical notation accompanies each visualization to explain the underlying principles.257 </p>258 </div>259 </div>260 261 <div class="flex">262 <div class="flex-shrink-0">263 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">264 <i data-feather="code" class="h-6 w-6"></i>265 </div>266 </div>267 <div class="ml-4">268 <h3 class="text-lg font-medium text-white">Interactive Code</h3>269 <p class="mt-2 text-base text-gray-300">270 Follow along with pseudocode and real implementations that highlight key algorithmic concepts.271 </p>272 </div>273 </div>274 </div>275 </div>276 </div>277 </section>278 279 <!-- Sample Visualization Preview -->280 <section class="py-12 bg-slate-900">281 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">282 <div class="text-center">283 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">284 Sample Visualization Preview285 </h2>286 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4">287 See how our visualizations bring algorithms to life288 </p>289 </div>290 291 <div class="mt-10 flex flex-col lg:flex-row gap-8">292 <div class="lg:w-1/2">293 <div class="visualization-container p-6 rounded-xl">294 <h3 class="text-xl font-bold text-white mb-4">Merge Sort Visualization</h3>295 <div class="bg-slate-800 rounded-lg p-4 h-64 flex items-center justify-center">296 <div class="text-center">297 <div class="flex justify-center space-x-2 mb-4">298 <div class="w-8 h-16 bg-blue-500 rounded-t"></div>299 <div class="w-8 h-12 bg-blue-400 rounded-t"></div>300 <div class="w-8 h-20 bg-blue-500 rounded-t"></div>301 <div class="w-8 h-8 bg-blue-400 rounded-t"></div>302 <div class="w-8 h-16 bg-blue-500 rounded-t"></div>303 <div class="w-8 h-12 bg-blue-400 rounded-t"></div>304 </div>305 <p class="text-gray-300">Array being divided and merged</p>306 </div>307 </div>308 <div class="mt-4">309 <div class="code-block p-4 rounded">310 <pre class="text-green-400 text-sm">311function mergeSort(arr):312 if length(arr) <= 1:313 return arr314 315 mid = length(arr) / 2316 left = mergeSort(arr[0...mid])317 right = mergeSort(arr[mid...end])318 319 return merge(left, right)</pre>320 </div>321 </div>322 </div>323 </div>324 325 <div class="lg:w-1/2">326 <div class="visualization-container p-6 rounded-xl">327 <h3 class="text-xl font-bold text-white mb-4">Mathematical Explanation</h3>328 <div class="math-display text-blue-300">329 \( T(n) = 2T\left(\frac{n}{2}\right) + O(n) \)330 </div>331 <div class="mt-4 text-gray-300">332 <p class="mb-4">The recurrence relation for merge sort shows that the problem is divided into two subproblems of half the size, and then combined in linear time.</p>333 <p>The solution to this recurrence is:</p>334 <div class="math-display text-blue-300">335 \( T(n) = O(n \log n) \)336 </div>337 <p class="mt-4">This makes merge sort one of the most efficient sorting algorithms with guaranteed \( O(n \log n) \) performance.</p>338 </div>339 </div>340 </div>341 </div>342 </div>343 </section>344 345 <!-- Footer -->346 <footer class="bg-slate-900 border-t border-slate-800">347 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">348 <div class="md:flex md:items-center md:justify-between">349 <div class="flex justify-center md:justify-start">350 <div class="flex items-center">351 <i data-feather="cpu" class="text-blue-400 mr-2"></i>352 <span class="text-white font-bold">Algorithm Animator</span>353 </div>354 </div>355 <div class="mt-8 md:mt-0 md:order-1">356 <p class="text-center text-base text-gray-400">357 © 2023 Algorithm Animator. All rights reserved.358 </p>359 </div>360 </div>361 </div>362 </footer>363 364 <script>365 feather.replace();366 </script>367</body>368</html>369