Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Algorithm Animator</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script> | |
| <style> | |
| :root { | |
| --primary-color: #2d3748; | |
| --secondary-color: #4a5568; | |
| --accent-color: #63b3ed; | |
| } | |
| body { | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .math-display { | |
| font-size: 1.2rem; | |
| text-align: center; | |
| margin: 1.5rem 0; | |
| } | |
| .algorithm-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| border: 1px solid rgba(94, 94, 94, 0.3); | |
| } | |
| .algorithm-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(94, 94, 94, 0.4); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--accent-color); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .visualization-container { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .code-block { | |
| background-color: #1e293b; | |
| border-left: 4px solid var(--accent-color); | |
| font-family: 'Fira Code', monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-slate-900 border-b border-slate-700 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="cpu" class="text-blue-400 mr-2"></i> | |
| <span class="font-bold text-xl text-white">Algorithm Animator</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="nav-link text-white px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-slate-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="search" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <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"> | |
| <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"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Visualize Algorithms</span> | |
| <span class="block text-blue-400 mt-2">Like Never Before</span> | |
| </h1> | |
| <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"> | |
| Break down complex algorithmic concepts into easy-to-understand animated explanations with detailed step-by-step visualizations. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <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"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <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"> | |
| View Examples | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Algorithm Categories --> | |
| <section id="algorithms" class="py-12 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Explore Algorithm Categories | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4"> | |
| Choose from various algorithm types to visualize and understand their inner workings | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Sorting Algorithms --> | |
| <div class="algorithm-card bg-slate-800 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i data-feather="bar-chart-2" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Sorting Algorithms</h3> | |
| <p class="mt-1 text-sm text-gray-300">Quick Sort, Merge Sort, Bubble Sort</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="sorting.html" class="text-blue-400 hover:text-blue-300 font-medium"> | |
| Explore Visualizations | |
| <i data-feather="arrow-right" class="inline ml-1 h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Graph Algorithms --> | |
| <div class="algorithm-card bg-slate-800 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i data-feather="git-branch" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Graph Algorithms</h3> | |
| <p class="mt-1 text-sm text-gray-300">Dijkstra, BFS, DFS, MST</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="graph.html" class="text-green-400 hover:text-green-300 font-medium"> | |
| Explore Visualizations | |
| <i data-feather="arrow-right" class="inline ml-1 h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dynamic Programming --> | |
| <div class="algorithm-card bg-slate-800 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i data-feather="layers" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Dynamic Programming</h3> | |
| <p class="mt-1 text-sm text-gray-300">Fibonacci, Knapsack, LCS</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="dynamic.html" class="text-purple-400 hover:text-purple-300 font-medium"> | |
| Explore Visualizations | |
| <i data-feather="arrow-right" class="inline ml-1 h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-12 bg-slate-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-400 font-semibold tracking-wide uppercase">How It Works</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Understanding Algorithms Visually | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| Our visualization tool breaks down complex algorithms into digestible steps with clear animations. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i data-feather="play-circle" class="h-6 w-6"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Step-by-Step Visualization</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| Each algorithm is broken down into discrete steps with visual representations of data structures and operations. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <i data-feather="book-open" class="h-6 w-6"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Mathematical Explanation</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| Clear mathematical notation accompanies each visualization to explain the underlying principles. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i data-feather="code" class="h-6 w-6"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Interactive Code</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| Follow along with pseudocode and real implementations that highlight key algorithmic concepts. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sample Visualization Preview --> | |
| <section class="py-12 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Sample Visualization Preview | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4"> | |
| See how our visualizations bring algorithms to life | |
| </p> | |
| </div> | |
| <div class="mt-10 flex flex-col lg:flex-row gap-8"> | |
| <div class="lg:w-1/2"> | |
| <div class="visualization-container p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4">Merge Sort Visualization</h3> | |
| <div class="bg-slate-800 rounded-lg p-4 h-64 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="flex justify-center space-x-2 mb-4"> | |
| <div class="w-8 h-16 bg-blue-500 rounded-t"></div> | |
| <div class="w-8 h-12 bg-blue-400 rounded-t"></div> | |
| <div class="w-8 h-20 bg-blue-500 rounded-t"></div> | |
| <div class="w-8 h-8 bg-blue-400 rounded-t"></div> | |
| <div class="w-8 h-16 bg-blue-500 rounded-t"></div> | |
| <div class="w-8 h-12 bg-blue-400 rounded-t"></div> | |
| </div> | |
| <p class="text-gray-300">Array being divided and merged</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="code-block p-4 rounded"> | |
| <pre class="text-green-400 text-sm"> | |
| function mergeSort(arr): | |
| if length(arr) <= 1: | |
| return arr | |
| mid = length(arr) / 2 | |
| left = mergeSort(arr[0...mid]) | |
| right = mergeSort(arr[mid...end]) | |
| return merge(left, right)</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="visualization-container p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4">Mathematical Explanation</h3> | |
| <div class="math-display text-blue-300"> | |
| \( T(n) = 2T\left(\frac{n}{2}\right) + O(n) \) | |
| </div> | |
| <div class="mt-4 text-gray-300"> | |
| <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> | |
| <p>The solution to this recurrence is:</p> | |
| <div class="math-display text-blue-300"> | |
| \( T(n) = O(n \log n) \) | |
| </div> | |
| <p class="mt-4">This makes merge sort one of the most efficient sorting algorithms with guaranteed \( O(n \log n) \) performance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 border-t border-slate-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="flex justify-center md:justify-start"> | |
| <div class="flex items-center"> | |
| <i data-feather="cpu" class="text-blue-400 mr-2"></i> | |
| <span class="text-white font-bold">Algorithm Animator</span> | |
| </div> | |
| </div> | |
| <div class="mt-8 md:mt-0 md:order-1"> | |
| <p class="text-center text-base text-gray-400"> | |
| © 2023 Algorithm Animator. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |