-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (155 loc) · 7.57 KB
/
index.html
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4HHP888F7Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-4HHP888F7Y');
</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Sorting Visualizer</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<!-- CSS only -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/styles.css">
<style>
section {
display: none;
}
section.active {
display: block;
}
section h2 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Header START -->
<header>
<div id="logo"><img src="image/Untitled-1.png" alt="LOGO" /></div>
<nav id="navBar">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#sorting_visualizer">SORTING VISUALIZER</a></li>
<li><a href="#about">ABOUT US</a></li>
</ul>
</nav>
<div id="social">
<a id="gh" href="https://github.com/Ajitkhanta48"><img src="image/icons8-github.svg" alt="Github" /></a>
<a href="https://t.me/Sorting_Visualizer"><img src="image/icons8-telegram-app-32.svg" alt="Telegram" /></a>
</div>
<button id="btn">
<img src="image/icons8-menu-rounded-50.png" alt="" />
</button>
</header>
<!-- Header END -->
<!-- **************** MAIN CONTENT START **************** -->
<section id="home" class="active">
<div class="heroArea">
<h3>Welcome to Sorting Visualizer</h3>
<h1>Visualize Different Sorting Operations Perform on Array </h1>
<p>This website is dedicated to <strong>Array Visualization</strong>. Whether you're a beginner or an
experienced
programmer, you'll find valuable resources here to enhance your understanding of arrays and their
sorting
operations.</p>
<p>Explore our Sorting Visualizer learn about various <strong>Sorting Operations</strong>, visualize your
arrays in action, and get
to know
more about the creators behind this project.</p>
<p>Start your journey by navigating through the sections using the navbar above.</p>
</div>
</section>
<section id="sorting_visualizer" style="display: none;">
<div class="heroArea">
<h3>Sorting Visualizer</h3>
<h1>Visualize Different Sorting Operations Perform on Array </h1>
</div>
<div class="col range-input" id="input-panel">
<div class="input-panel">
<span id="size" class="label">Size
<input id="size_input" type="range" value=50 min="1" max="100">
</span>
</div>
<div class="input-panel">
<span id=" speed" class="label">Speed
<input id="speed_input" type="range" min="20" max="300" value=60 ">
</span>
</div>
</div>
<div class=" btn-group-md btn-group-horizontal center" style="margin-bottom: 15px;">
<button type="button" class="btn btn-outline-success new">New Array</button>
<button type="button" class="btn btn-outline-danger stop" disabled="true">Stop Sorting</button>
</div>
<div class="flex">
<div id="sorting" class="flex-container">
</div>
<div class="col-auto center" id="control-panel">
<div class="btn-group-md btn-group-vertical">
<button type="button" class="btn btn-outline-light bubbleSort">Bubble Sort</button>
<button type="button" class="btn btn-outline-light mergeSort">Merge Sort</button>
<button type="button" class="btn btn-outline-light selectionSort">Selection Sort</button>
<button type="button" class="btn btn-outline-light quickSort">Quick Sort</button>
<button type="button" class="btn btn-outline-light insertionSort">Insertion Sort</button>
<button type="button" class="btn btn-outline-light heapSort">Heap Sort</button>
</div>
</div>
</div>
</section>
<section id="about" style="display: none;">
<h2>About Us</h2>
<p>Welcome to our website dedicated to <strong>Array Visualization</strong>. We are a team of passionate
developers
who aim to provide valuable resources and tools for learning and exploring arrays.</p>
<h3>Our Mission:</h3>
<p>Our mission is to empower programmers of all levels with the knowledge and skills to effectively use arrays
in
their projects. We believe that arrays are fundamental data structures in programming and mastering them is
essential for becoming a proficient developer.</p>
<h3>What We Offer:</h3>
<p>On our website, you'll find:</p>
<ul>
<li>Interactive tools and visualizations to help you understand how arrays work.</li>
<li>Regular updates and new content to keep you engaged and informed.</li>
</ul>
<h3>Get in Touch:</h3>
<p>We'd love to hear from you! Whether you have questions, feedback, or suggestions for improvement, feel free
to
reach out to us. You can contact us through our website or connect with us on social media.</p>
</section>
<!-- **************** MAIN CONTENT END **************** -->
<!-- ======================= Footer START -->
<footer>
<p style="text-align: center;">Copyright © <span id="currentYear"></span><a href="https://ajitkhanta48.github.io/Sorting_Visualizer-/">
Sorting_Visualizer
</a>. All rights
reserved.
</p>
</footer>
<!-- ======================= Footer END -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script src="js/sorting.js" async defer></script>
<script src="js/algorithms/bubbleSort.js" async defer></script>
<script src="js/algorithms/mergeSort.js" async defer></script>
<script src="js/algorithms/selectionSort.js" async defer></script>
<script src="js/algorithms/quickSort.js" async defer></script>
<script src="js/algorithms/insertionSort.js" async defer></script>
<script src="js/algorithms/heapSort.js" async defer></script>
<script src="js/cy.js"></script>
<script src="js/section.js"></script>
</body>
</html>