Skip to content

Commit 38ab6f3

Browse files
iamujj15iamujj15
committed
remove g ad code and ui update
1 parent 8a3986b commit 38ab6f3

File tree

4 files changed

+139
-79
lines changed

4 files changed

+139
-79
lines changed

‎ads.txt

-1
This file was deleted.

‎content/rotate.png

13 KB
Loading

‎index.html

+59-67
Original file line numberDiff line numberDiff line change
@@ -15,80 +15,86 @@
1515
/>
1616
<link rel="stylesheet" href="styles.css" />
1717
<title>Sorting Visualizer</title>
18-
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8246776799485595"
19-
crossorigin="anonymous"></script>
2018
</head>
2119
<body>
20+
<div class="spcl">
21+
<h1 class="h1" style="color: #183024;">Rotate Your Phone </h1>
22+
<div>
23+
<img src="content/rotate.png" alt="Rotate Phone" width="50px">
24+
</div>
25+
</div>
2226
<div class="root">
2327
<header>
24-
<a href="/">
28+
<a href="/" style="text-decoration: none;">
2529
<p class="hd-txt"><strong>Sorting Visualizer</strong></p>
2630
</a>
2731
</header>
2832

2933
<div class="main-cnt">
3034
<div class="menu">
31-
<div>
32-
<input
33-
type="range"
34-
min="10"
35-
max="200"
36-
value="20"
37-
step="10"
38-
name="size"
39-
class="slider"
40-
id="size"
41-
/>
42-
</div>
43-
<div>
44-
<label for="size" class="mt-2" style="color: #395144;">Size</label>
45-
</div>
46-
<div>
47-
<input
48-
type="range"
49-
min="10"
50-
max="410"
51-
value="60"
52-
step="50"
53-
name="speed"
54-
class="slider"
55-
id="speed"
56-
/>
57-
</div>
58-
<div>
59-
<label for="speed" class="mt-2" style="color: #395144;">Speed</label>
60-
</div>
61-
<div>
62-
<button class="btn btn-clr mt-2" id="new-array" type="button">
63-
New Array
64-
</button>
65-
</div>
66-
<div>
67-
<button class="btn reload mt-4 mb-2" id="reload">Reload</button>
35+
<div class="othr-btns">
36+
<div>
37+
<input
38+
type="range"
39+
min="10"
40+
max="200"
41+
value="20"
42+
step="10"
43+
name="size"
44+
class="slider"
45+
id="size"
46+
/>
47+
</div>
48+
<div>
49+
<label for="size" style="color: #395144;">Size</label>
50+
</div>
51+
<div>
52+
<input
53+
type="range"
54+
min="10"
55+
max="410"
56+
value="60"
57+
step="50"
58+
name="speed"
59+
class="slider"
60+
id="speed"
61+
/>
62+
</div>
63+
<div>
64+
<label for="speed" style="color: #395144;">Speed</label>
65+
</div>
66+
<div>
67+
<button class="btn btn-sm btn-clr" id="new-array" type="button">
68+
New Array
69+
</button>
70+
</div>
71+
<div>
72+
<button class="btn btn-sm reload" id="reload">Reload</button>
73+
</div>
6874
</div>
6975
<div class="srt-btn">
7076
<div>
71-
<button class="btn btn-clr" id="bubble" type="button">
77+
<button class="btn btn-sm btn-clr" id="bubble" type="button">
7278
Bubble Sort
7379
</button>
7480
</div>
7581
<div>
76-
<button class="btn btn-clr" id="selection" type="button">
82+
<button class="btn btn-sm btn-clr" id="selection" type="button">
7783
Selection Sort
7884
</button>
7985
</div>
8086
<div>
81-
<button class="btn btn-clr" id="insertion" type="button">
87+
<button class="btn btn-sm btn-clr" id="insertion" type="button">
8288
Insertion Sort
8389
</button>
8490
</div>
8591
<div>
86-
<button class="btn btn-clr" id="merge" type="button">
92+
<button class="btn btn-sm btn-clr" id="merge" type="button">
8793
Merge Sort
8894
</button>
8995
</div>
9096
<div>
91-
<button class="btn btn-clr" id="quick" type="button">
97+
<button class="btn btn-sm btn-clr" id="quick" type="button">
9298
Quick Sort
9399
</button>
94100
</div>
@@ -97,26 +103,12 @@
97103
<div class="bars-cnt" id="bars">
98104
<!-- Bars -->
99105
</div>
100-
<div>
101-
<div style="position: relative; width: 100%; max-width: 100%;">
102-
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8246776799485595"
103-
crossorigin="anonymous"></script>
104-
<!-- HomePageRightAd -->
105-
<ins class="adsbygoogle"
106-
style="display:block; position: absolute; width: inherit; max-width: inherit;"
107-
data-ad-client="ca-pub-8246776799485595"
108-
data-ad-slot="8333530099"
109-
data-ad-format="auto"
110-
data-full-width-responsive="true">
111-
</ins>
112-
<script>
113-
(adsbygoogle = window.adsbygoogle || []).push({});
114-
</script>
115-
</div>
116-
</div>
106+
<!-- <div>
107+
Future Content Here [Need to Change CSS Grid Column]
108+
</div> -->
117109
</div>
118110
<footer
119-
class="d-flex flex-wrap justify-content-space-between align-items-center py-3 border-top"
111+
class="py-3 border-top"
120112
>
121113
<div class="ftr">
122114
<div>
@@ -143,8 +135,8 @@
143135
>
144136
<svg
145137
xmlns="http://www.w3.org/2000/svg"
146-
width="24"
147-
height="24"
138+
width="22"
139+
height="22"
148140
fill="currentColor"
149141
class="bi bi-linkedin"
150142
viewBox="0 0 16 16"
@@ -159,8 +151,8 @@
159151
<a class="text-dark" href="https://github.com/iamujj15">
160152
<svg
161153
xmlns="http://www.w3.org/2000/svg"
162-
width="24"
163-
height="24"
154+
width="22"
155+
height="22"
164156
fill="currentColor
165157
class="bi bi-github"
166158
viewBox="0 0 16 16"

‎styles.css

+80-11
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ header {
2626
footer {
2727
display: flex;
2828
flex-direction: row;
29-
justify-content: center;
29+
justify-content: space-around;
3030
align-items: center;
3131
height: 6vh;
3232
background-color: #e1ecc8;
@@ -148,7 +148,7 @@ footer {
148148

149149
.main-cnt {
150150
display: grid;
151-
grid-template-columns: 1fr 6fr 1.5fr;
151+
grid-template-columns: 1.5fr 6fr;
152152
grid-template-rows: 1fr;
153153
grid-gap: 10px;
154154
padding: 20px;
@@ -159,8 +159,9 @@ footer {
159159
display: flex;
160160
flex-direction: row;
161161
justify-content: space-around;
162+
align-items: center;
162163
width: 100vw;
163-
font-size: calc(min(2vw, 2vh));
164+
font-size: calc(min(15px, 3vw, 3vh));
164165
}
165166

166167
.ftr-txt {
@@ -181,7 +182,17 @@ footer {
181182
justify-content: flex-start;
182183
align-items: center;
183184
overflow: auto;
184-
/* height: 100%; */
185+
flex-wrap: nowrap;
186+
}
187+
188+
.othr-btns {
189+
display: flex;
190+
flex-direction: column;
191+
justify-content: flex-start;
192+
align-items: center;
193+
gap: 10px;
194+
height: 100%;
195+
margin-bottom: 15px;
185196
}
186197

187198
.srt-btn {
@@ -198,36 +209,52 @@ footer {
198209
flex-direction: row;
199210
justify-content: center;
200211
align-items: flex-end;
212+
width: 100%;
201213
padding: 5px;
202-
/* height: 100%; */
203214
}
204215

205216
.active-btn {
206217
background-color: green;
207218
}
208219

209-
@media screen and (max-width: 950px) {
220+
.spcl {
221+
display: none;
222+
}
223+
224+
@media screen and (max-width: 1080px) {
210225
.main-cnt {
211226
display: grid;
212-
grid-template-rows: 1fr 6fr 1.5fr;
227+
grid-template-rows: 1.5fr 6fr;
213228
grid-template-columns: 1fr;
214229
grid-gap: 10px;
215230
padding: 20px;
231+
width: 100vw;
216232
}
217233

218234
.menu {
219235
display: flex;
220236
flex-direction: row;
221237
justify-content: flex-start;
222238
align-items: center;
223-
/* overflow: auto; */
224-
height: 100%;
239+
width: 100%;
240+
flex-wrap: wrap;
241+
overflow: auto;
242+
}
243+
244+
.othr-btns {
245+
display: flex;
246+
flex-direction: row;
247+
justify-content: flex-start;
248+
align-items: center;
249+
gap: 10px;
250+
width: 100%;
251+
margin-right: 15px;
225252
}
226253

227254
.srt-btn {
228255
display: flex;
229256
flex-direction: row;
230-
justify-content: flex-end;
257+
justify-content: flex-start;
231258
align-items: center;
232259
gap: 10px;
233260
width: 100%;
@@ -238,8 +265,50 @@ footer {
238265
flex-direction: row;
239266
justify-content: center;
240267
align-items: flex-end;
268+
width: 100vw;
241269
padding: 5px;
242-
/* height: 100%; */
270+
}
271+
}
272+
273+
@media screen and (max-width: 850px) {
274+
.menu {
275+
display: block;
276+
width: 100%;
277+
overflow: auto;
278+
}
279+
280+
.othr-btns {
281+
display: flex;
282+
flex-direction: row;
283+
justify-content: flex-start;
284+
align-items: center;
285+
gap: 10px;
286+
/* width: 100%; */
287+
margin-right: 15px;
288+
flex-wrap: wrap;
289+
}
290+
291+
.srt-btn {
292+
display: flex;
293+
flex-direction: row;
294+
justify-content: flex-start;
295+
align-items: center;
296+
gap: 10px;
297+
/* width: 100%; */
298+
flex-wrap: wrap;
299+
}
300+
}
301+
302+
@media screen and (max-width: 850px) {
303+
.root {
304+
display: none;
305+
}
306+
.spcl {
307+
display: flex;
308+
flex-direction: column;
309+
justify-content: center;
310+
align-items: center;
311+
height: 100vh;
243312
}
244313
}
245314

0 commit comments

Comments
 (0)