File size: 7,353 Bytes
a98921a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structa Clone - Visualize Data Structures</title>
<link rel="stylesheet" href="style.css">
<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="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-grow container mx-auto px-4 py-8">
<section class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Visualize Data Structures</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
An interactive tool to visualize and understand data structures and algorithms
</p>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
<!-- Array Card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="bg-blue-500 p-4">
<h2 class="text-white text-xl font-semibold">Array</h2>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">A collection of elements identified by index or key</p>
<a href="array.html" class="inline-flex items-center text-blue-500 hover:text-blue-700">
Visualize <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Linked List Card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="bg-green-500 p-4">
<h2 class="text-white text-xl font-semibold">Linked List</h2>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">A linear collection of data elements whose order is not given by their physical placement</p>
<a href="linked-list.html" class="inline-flex items-center text-green-500 hover:text-green-700">
Visualize <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Stack Card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="bg-purple-500 p-4">
<h2 class="text-white text-xl font-semibold">Stack</h2>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">A collection of elements with LIFO (Last In First Out) principle</p>
<a href="stack.html" class="inline-flex items-center text-purple-500 hover:text-purple-700">
Visualize <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Queue Card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="bg-yellow-500 p-4">
<h2 class="text-white text-xl font-semibold">Queue</h2>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">A collection of elements with FIFO (First In First Out) principle</p>
<a href="queue.html" class="inline-flex items-center text-yellow-500 hover:text-yellow-700">
Visualize <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Tree Card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="bg-red-500 p-4">
<h2 class="text-white text-xl font-semibold">Tree</h2>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">A hierarchical data structure with a root value and subtrees of children</p>
<a href="tree.html" class="inline-flex items-center text-red-500 hover:text-red-700">
Visualize <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<!-- Graph Card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="bg-indigo-500 p-4">
<h2 class="text-white text-xl font-semibold">Graph</h2>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">A non-linear data structure consisting of nodes and edges</p>
<a href="graph.html" class="inline-flex items-center text-indigo-500 hover:text-indigo-700">
Visualize <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
<section class="bg-white rounded-lg shadow-md p-6 mb-12">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">How it works</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center">
<div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="edit" class="text-blue-500 w-8 h-8"></i>
</div>
<h3 class="text-lg font-medium text-gray-800 mb-2">1. Choose a Structure</h3>
<p class="text-gray-600">Select from various data structures to visualize</p>
</div>
<div class="text-center">
<div class="bg-green-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="sliders" class="text-green-500 w-8 h-8"></i>
</div>
<h3 class="text-lg font-medium text-gray-800 mb-2">2. Configure Options</h3>
<p class="text-gray-600">Customize the visualization parameters</p>
</div>
<div class="text-center">
<div class="bg-purple-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="play" class="text-purple-500 w-8 h-8"></i>
</div>
<h3 class="text-lg font-medium text-gray-800 mb-2">3. Visualize & Learn</h3>
<p class="text-gray-600">Watch the structure come to life with animations</p>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>
feather.replace();
</script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |