|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Insertion Sort Visualizer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3B82F6', |
|
|
secondary: '#10B981', |
|
|
highlight: '#F59E0B', |
|
|
sorted: '#10B981', |
|
|
comparing: '#FBBF24', |
|
|
current: '#EF4444', |
|
|
info: '#60A5FA' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.array-bar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.algorithm-step { |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
.card-hover { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-2">Insertion Sort Visualizer</h1> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto"> |
|
|
Understand insertion sort algorithm through step-by-step visualization and detailed explanation |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-8"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
|
|
<div class="p-6 border-b border-gray-200 bg-gradient-to-r from-primary to-blue-400"> |
|
|
<h2 class="text-2xl font-bold text-white">Understanding Insertion Sort</h2> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-blue-100 p-4 rounded-full mr-4"> |
|
|
<i class="fas fa-lightbulb text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2">What is Insertion Sort?</h3> |
|
|
<p class="text-gray-600"> |
|
|
Insertion sort is a simple, efficient sorting algorithm that builds the final sorted array one element at a time. |
|
|
It works similarly to how you might sort a hand of playing cards by repeatedly inserting a new card into |
|
|
its correct position in your already sorted hand. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 rounded-lg p-5 mb-6"> |
|
|
<h3 class="font-bold text-gray-800 flex items-center mb-3"> |
|
|
<i class="fas fa-code mr-2 text-blue-600"></i> Algorithmic Steps |
|
|
</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<span class="bg-blue-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0">1</span> |
|
|
<span class="text-gray-700">Start with the second element (index 1) and consider it as the key</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="bg-blue-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0">2</span> |
|
|
<span class="text-gray-700">Compare key with elements to its left</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="bg-blue-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0">3</span> |
|
|
<span class="text-gray-700">If key is smaller, shift elements to the right</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="bg-blue-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0">4</span> |
|
|
<span class="text-gray-700">Insert key in its correct sorted position</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="bg-blue-500 text-white rounded-full h-6 w-6 flex items-center justify-center mr-3 flex-shrink-0">5</span> |
|
|
<span class="text-gray-700">Repeat for all elements in the array</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-emerald-50 rounded-lg p-5"> |
|
|
<h3 class="font-bold text-gray-800 flex items-center mb-3"> |
|
|
<i class="fas fa-check-circle mr-2 text-emerald-600"></i> Advantages |
|
|
</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-chevron-right text-emerald-500 mt-1 mr-2 text-xs"></i> |
|
|
<span>Efficient for small data sets</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-chevron-right text-emerald-500 mt-1 mr-2 text-xs"></i> |
|
|
<span>Adaptive - efficient for nearly sorted data</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-chevron-right text-emerald-500 mt-1 mr-2 text-xs"></i> |
|
|
<span>Stable sorting algorithm</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-chevron-right text-emerald-500 mt-1 mr-2 text-xs"></i> |
|
|
<span>Low overhead - only O(1) additional memory</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-amber-50 rounded-lg p-5"> |
|
|
<h3 class="font-bold text-gray-800 flex items-center mb-3"> |
|
|
<i class="fas fa-exclamation-triangle mr-2 text-amber-600"></i> Limitations |
|
|
</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-chevron-right text-amber-500 mt-1 mr-2 text-xs"></i> |
|
|
<span>Inefficient for large lists (O(n²) worst-case)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-chevron-right text-amber-500 mt-1 mr-2 text-xs"></i> |
|
|
<span>Performance degrades with large unsorted data</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-chevron-right text-amber-500 mt-1 mr-2 text-xs"></i> |
|
|
<span>Less efficient than algorithms like quicksort for larger datasets</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
|
|
<div class="p-6 border-b border-gray-200 bg-gradient-to-r from-secondary to-emerald-400"> |
|
|
<h2 class="text-2xl font-bold text-white">Step-by-Step Process</h2> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div id="stepContainer" class="space-y-4"> |
|
|
<div class="algorithm-step bg-white border border-gray-200 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-green-500 text-white rounded-full h-8 w-8 flex items-center justify-center mr-3 flex-shrink-0">1</div> |
|
|
<h3 class="font-bold text-gray-800">Start with the second element</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 ml-11 mb-3"> |
|
|
Consider array[1] as the key (current element to be sorted) |
|
|
</p> |
|
|
<div class="flex justify-center"> |
|
|
<div class="flex items-end h-32"> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-blue-500" style="height: 80px;"> |
|
|
<span class="text-white font-bold mt-1">8</span> |
|
|
<span class="text-white text-xs">[0]</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-red-500" style="height: 50px;"> |
|
|
<span class="text-white font-bold mt-1">5</span> |
|
|
<span class="text-white text-xs">[1]</span> |
|
|
<span class="text-white text-xs mt-1">(Key)</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 70px;"> |
|
|
<span class="text-white font-bold mt-1">7</span> |
|
|
<span class="text-white text-xs">[2]</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 40px;"> |
|
|
<span class="text-white font-bold mt-1">3</span> |
|
|
<span class="text-white text-xs">[3]</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-step bg-white border border-gray-200 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-green-500 text-white rounded-full h-8 w-8 flex items-center justify-center mr-3 flex-shrink-0">2</div> |
|
|
<h3 class="font-bold text-gray-800">Compare with left element</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 ml-11 mb-3"> |
|
|
Compare key (5) with element to its left (8). Since 5 < 8, we need to shift 8 to the right. |
|
|
</p> |
|
|
<div class="flex justify-center"> |
|
|
<div class="flex items-end h-32"> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-yellow-500" style="height: 80px;"> |
|
|
<span class="text-white font-bold mt-1">8</span> |
|
|
<span class="text-white text-xs">[0]</span> |
|
|
<span class="text-white text-xs mt-1">Comparing</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-red-500" style="height: 50px;"> |
|
|
<span class="text-white font-bold mt-1">5</span> |
|
|
<span class="text-white text-xs">[1]</span> |
|
|
<span class="text-white text-xs mt-1">(Key)</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 70px;"> |
|
|
<span class="text-white font-bold mt-1">7</span> |
|
|
<span class="text-white text-xs">[2]</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 40px;"> |
|
|
<span class="text-white font-bold mt-1">3</span> |
|
|
<span class="text-white text-xs">[3]</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-step bg-white border border-gray-200 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-green-500 text-white rounded-full h-8 w-8 flex items-center justify-center mr-3 flex-shrink-0">3</div> |
|
|
<h3 class="font-bold text-gray-800">Shift and Insert</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 ml-11 mb-3"> |
|
|
Shift 8 to the right and insert key (5) in its correct position. |
|
|
</p> |
|
|
<div class="flex justify-center"> |
|
|
<div class="flex items-end h-32"> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-green-500" style="height: 50px;"> |
|
|
<span class="text-white font-bold mt-1">5</span> |
|
|
<span class="text-white text-xs">[0]</span> |
|
|
<span class="text-white text-xs mt-1">Sorted</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-green-500" style="height: 80px;"> |
|
|
<span class="text-white font-bold mt-1">8</span> |
|
|
<span class="text-white text-xs">[1]</span> |
|
|
<span class="text-white text-xs mt-1">Sorted</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 70px;"> |
|
|
<span class="text-white font-bold mt-1">7</span> |
|
|
<span class="text-white text-xs">[2]</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 40px;"> |
|
|
<span class="text-white font-bold mt-1">3</span> |
|
|
<span class="text-white text-xs">[3]</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-blue-50 rounded-lg p-5"> |
|
|
<h3 class="font-bold text-gray-800 flex items-center mb-3"> |
|
|
<i class="fas fa-calculator mr-2 text-blue-600"></i> Complexity Analysis |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="text-center p-4 bg-white rounded-lg"> |
|
|
<div class="text-lg font-semibold">Best Case</div> |
|
|
<div class="text-2xl font-bold text-green-600">O(n)</div> |
|
|
<p class="text-gray-600 mt-2">When array is already sorted</p> |
|
|
</div> |
|
|
<div class="text-center p-4 bg-white rounded-lg"> |
|
|
<div class="text-lg font-semibold">Average Case</div> |
|
|
<div class="text-2xl font-bold text-amber-600">O(n²)</div> |
|
|
<p class="text-gray-600 mt-2">Typical performance</p> |
|
|
</div> |
|
|
<div class="text-center p-4 bg-white rounded-lg"> |
|
|
<div class="text-lg font-semibold">Worst Case</div> |
|
|
<div class="text-2xl font-bold text-red-600">O(n²)</div> |
|
|
<p class="text-gray-600 mt-2">Reverse sorted array</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden sticky top-8 card-hover"> |
|
|
<div class="p-6 border-b border-gray-200 bg-gradient-to-r from-highlight to-amber-400"> |
|
|
<h2 class="text-2xl font-bold text-white">Interactive Visualization</h2> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div id="visualization" class="mb-6"> |
|
|
<div class="flex flex-col items-center justify-center"> |
|
|
|
|
|
<div id="key-display" class="mb-6 bg-amber-100 rounded-lg p-4 text-center"> |
|
|
<span class="text-gray-600 font-semibold">Current Key:</span> |
|
|
<span id="current-key" class="ml-2 bg-red-500 text-white font-bold px-3 py-1 rounded-lg">5</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-64 w-full flex items-end justify-center px-4" id="array-container"> |
|
|
<div class="flex items-end"> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-green-500" style="height: 80px;"> |
|
|
<span class="text-white font-bold mt-1">5</span> |
|
|
<span class="text-white text-xs">[0]</span> |
|
|
<span class="text-white text-xs mt-1">Sorted</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-green-500" style="height: 50px;"> |
|
|
<span class="text-white font-bold mt-1">8</span> |
|
|
<span class="text-white text-xs">[1]</span> |
|
|
<span class="text-white text-xs mt-1">Sorted</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-red-500" style="height: 70px;"> |
|
|
<span class="text-white font-bold mt-1">7</span> |
|
|
<span class="text-white text-xs">[2]</span> |
|
|
<span class="text-white text-xs mt-1">(Key)</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 40px;"> |
|
|
<span class="text-white font-bold mt-1">3</span> |
|
|
<span class="text-white text-xs">[3]</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 100px;"> |
|
|
<span class="text-white font-bold mt-1">10</span> |
|
|
<span class="text-white text-xs">[4]</span> |
|
|
</div> |
|
|
<div class="array-bar flex flex-col items-center mx-1 w-12 bg-gray-400" style="height: 60px;"> |
|
|
<span class="text-white font-bold mt-1">6</span> |
|
|
<span class="text-white text-xs">[5]</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="status-info" class="mt-4 text-center px-4 py-3 bg-blue-100 rounded-lg w-full max-w-md"> |
|
|
<p class="font-medium text-blue-800">Comparing 7 and 8. Shift required.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="flex flex-wrap justify-center gap-3"> |
|
|
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Start |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg flex items-center"> |
|
|
<i class="fas fa-step-forward mr-2"></i> Next Step |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg flex items-center"> |
|
|
<i class="fas fa-random mr-2"></i> New Array |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg flex items-center"> |
|
|
<i class="fas fa-backward mr-2"></i> Reset |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-gray-100 rounded-lg p-4"> |
|
|
<h4 class="font-bold text-gray-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-tachometer-alt mr-2 text-gray-600"></i> Adjust Speed |
|
|
</h4> |
|
|
<input type="range" min="1" max="10" value="5" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between mt-1 text-sm text-gray-600"> |
|
|
<span>Slow</span> |
|
|
<span>Medium</span> |
|
|
<span>Fast</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-gray-50 rounded-lg p-5"> |
|
|
<h3 class="font-bold text-gray-800 mb-3 flex items-center"> |
|
|
<i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Key Insight |
|
|
</h3> |
|
|
<p class="text-gray-600"> |
|
|
Insertion sort's efficiency comes from its simplicity and adaptability. |
|
|
While not optimal for large datasets, it excels when the data is nearly sorted |
|
|
or when processing small datasets with low overhead. |
|
|
</p> |
|
|
<div class="mt-4 flex items-center"> |
|
|
<i class="fas fa-code mr-2 text-gray-500"></i> |
|
|
<span class="text-sm bg-gray-200 px-2 py-1 rounded font-mono">arr[j + 1] = arr[j] // Shift element right</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
|
|
<div class="p-6 border-b border-gray-200 bg-gradient-to-r from-purple-500 to-indigo-400"> |
|
|
<h2 class="text-2xl font-bold text-white">Real-world Applications</h2> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-gamepad text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800">Game Leaderboards</h3> |
|
|
<p class="text-gray-600">Online games use insertion sort for player rankings where scores are constantly updated incrementally.</p> |
|
|
</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-database text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800">Database Optimizations</h3> |
|
|
<p class="text-gray-600">Databases use insertion sort for small datasets or when data is almost sorted.</p> |
|
|
</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-shopping-cart text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800">E-commerce Filtering</h3> |
|
|
<p class="text-gray-600">E-commerce sites use it for real-time sorting of products when filters change incrementally.</p> |
|
|
</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-network-wired text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800">Network Routing</h3> |
|
|
<p class="text-gray-600">Network devices sort routing tables efficiently when there are minor changes.</p> |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-12 pt-6 border-t border-gray-200 text-center text-gray-600"> |
|
|
<p>Interactive Insertion Sort Visualizer & Algorithm Explanation</p> |
|
|
<p class="mt-2">Explore how insertion sort efficiently builds a sorted array one element at a time.</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const sampleArray = [8, 5, 7, 3, 10, 6]; |
|
|
|
|
|
|
|
|
const state = { |
|
|
array: [...sampleArray], |
|
|
currentKeyIndex: 2, |
|
|
comparingIndex: 1, |
|
|
isPlaying: false, |
|
|
speed: 5, |
|
|
sortedIndices: [0, 1] |
|
|
}; |
|
|
|
|
|
|
|
|
function initVisualization() { |
|
|
|
|
|
|
|
|
console.log("Visualization initialized"); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
initVisualization(); |
|
|
|
|
|
document.querySelectorAll('button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
this.classList.add('animate-pulse'); |
|
|
setTimeout(() => { |
|
|
this.classList.remove('animate-pulse'); |
|
|
}, 300); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.algorithm-step').forEach(step => { |
|
|
step.addEventListener('click', function() { |
|
|
document.querySelectorAll('.algorithm-step').forEach(s => { |
|
|
s.classList.remove('border-blue-500', 'bg-blue-50'); |
|
|
}); |
|
|
this.classList.add('border-blue-500', 'bg-blue-50'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aigpt4robo/awesomeinsertionsortvisulizer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
