Skip to content

Commit 75c63b0

Browse files
mcgdjmcgdj
authored
Update order-tracker.html
I've made improvements to the structure, added some accessibility features, and refined the styling for better aesthetics and responsiveness. Additionally, I've included comments to explain the changes.
1 parent 353df49 commit 75c63b0

File tree

1 file changed

+130
-116
lines changed

1 file changed

+130
-116
lines changed

‎order-tracker.html

Lines changed: 130 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,160 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Order Tracker | Coding Hut Website</title>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Order Tracker | Coding Hut Website</title>
7+
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>
68
<style>
7-
body {
8-
overflow-x: hidden;
9-
font-family: Sans-Serif;
10-
margin: 0;
11-
}
12-
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>
13-
<style>
14-
body {
15-
font-family: 'Comfortaa';font-size: 22px;
16-
}
17-
18-
.menu-container {
19-
position: relative;
20-
display: flex;
21-
align-items: center;
22-
justify-content: space-between;
23-
background: #c04d4d;
24-
padding: 20px;
25-
z-index: 1;
26-
user-select: none;
27-
box-sizing: border-box;
28-
}
29-
30-
.menu-logo img {
31-
max-height: 40px;
32-
max-width: 100px;
33-
flex-shrink: 0;
34-
}
35-
36-
.menu-container a {
37-
text-decoration: none;
38-
color: #ffffff;
39-
transition: color 0.3s ease;
40-
}
41-
42-
.menu-container a:hover {
43-
color: #50e3c2;
44-
}
45-
46-
.menu ul {
47-
list-style: none;
48-
display: flex;
49-
padding: 0;
50-
margin: 0;
51-
}
52-
53-
.menu li {
54-
padding: 0 20px;
55-
font-size: 22px;
56-
}
57-
58-
/* Mobile Styles */
59-
@media only screen and (max-width: 767px) {
9+
body {
10+
overflow-x: hidden;
11+
font-family: 'Comfortaa', sans-serif;
12+
font-size: 22px;
13+
margin: 0;
14+
background-color: #f9f9f9; /* Light background for better contrast */
15+
color: #333; /* Dark text for readability */
16+
}
17+
6018
.menu-container {
61-
flex-direction: column;
62-
align-items: flex-start;
19+
display: flex;
20+
align-items: center;
21+
justify-content: space-between;
22+
background: #c04d4d;
23+
padding: 20px;
24+
z-index: 1;
25+
user-select: none;
26+
box-sizing: border-box;
27+
}
28+
29+
.menu-logo img {
30+
max-height: 40px;
31+
max-width: 100px;
32+
flex-shrink: 0;
33+
}
34+
35+
.menu-container a {
36+
text-decoration: none;
37+
color: #ffffff;
38+
transition: color 0.3s ease;
6339
}
6440

65-
.menu-logo {
66-
margin-bottom: 10px;
41+
.menu-container a:hover {
42+
color: #50e3c2;
6743
}
6844

6945
.menu {
70-
display: none;
71-
width: 100%;
72-
flex-direction: column;
46+
display: flex;
47+
justify-content: space-between;
48+
width: 100%;
7349
}
7450

7551
.menu ul {
76-
flex-direction: column;
77-
width: 100%;
52+
list-style: none;
53+
display: flex;
54+
padding: 0;
55+
margin: 0;
7856
}
7957

8058
.menu li {
81-
padding: 10px 0;
82-
text-align: center;
59+
padding: 0 20px;
60+
font-size: 22px;
8361
}
8462

85-
/* Menu button */
86-
.hamburger {
87-
display: block;
88-
font-size: 30px;
89-
cursor: pointer;
63+
/* Mobile Styles */
64+
@media only screen and (max-width: 767px) {
65+
.menu-container {
66+
flex-direction: column;
67+
align-items: flex-start;
68+
}
69+
70+
.menu {
71+
display: none;
72+
width: 100%;
73+
flex-direction: column;
74+
}
75+
76+
.menu ul {
77+
flex-direction: column;
78+
width: 100%;
79+
}
80+
81+
.menu li {
82+
padding: 10px 0;
83+
text-align: center;
84+
}
85+
86+
.hamburger {
87+
display: block;
88+
font-size: 30px;
89+
cursor: pointer;
90+
}
9091
}
91-
}
9292

93-
/* Desktop Styles */
94-
@media only screen and (min-width: 768px) {
95-
.menu {
96-
display: flex;
97-
justify-content: space-between;
98-
width: 100%;
93+
/* Desktop Styles */
94+
@media only screen and (min-width: 768px) {
95+
.hamburger {
96+
display: none;
97+
}
98+
}
99+
100+
h1, h2 {
101+
text-align: center;
102+
margin: 20px 0;
99103
}
100104

101-
.hamburger {
102-
display: none;
105+
p {
106+
text-align: center;
107+
margin: 10px 0;
108+
padding: 0 20px; /* Add some padding for better readability */
109+
}
110+
111+
.airtable-embed {
112+
width: 100%;
113+
height: 533px;
114+
border: 1px solid #ccc;
115+
background: transparent;
103116
}
104-
}
105117
</style>
106-
</head>
107-
<body>
108-
<nav class="menu-container">
109-
<!-- Logo -->
110-
<a href="https://scratch-coding-hut.github.io" class="menu-logo">
111-
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut Logo"/>
112-
</a>
113-
114-
<!-- Menu for Mobile -->
115-
<span class="hamburger" onclick="toggleMenu()">&#9776;</span>
116-
117-
<!-- Menu Items -->
118-
<div class="menu">
119-
<ul>
120-
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
121-
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
122-
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
123-
<li><a href="https://scratch-coding-hut.github.io/Wiki/sitemaplinks">Wiki | FAQ | More Links</a></li>
124-
</ul>
125-
<ul>
126-
<li><a href="https://scratch-coding-hut.github.io/messages">Messages</a></li>
127-
<li><a href="https://scratch-coding-hut.github.io/account">My Account</a></li>
128-
</ul>
129-
</div>
118+
</head>
119+
<body>
120+
<nav class="menu-container" role="navigation" aria-label="Main Navigation">
121+
<!-- Logo -->
122+
<a href="https://scratch-coding-hut.github.io" class="menu-logo" aria-label="Coding Hut Home">
123+
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut Logo"/>
124+
</a>
125+
126+
<!-- Menu for Mobile -->
127+
<span class="hamburger" onclick="toggleMenu()" aria-label="Toggle Menu">&#9776;</span>
128+
129+
<!-- Menu Items -->
130+
<div class="menu" aria-hidden="true">
131+
<ul>
132+
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
133+
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
134+
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
135+
<li><a href="https://scratch-coding-hut.github.io/Wiki/sitemaplinks">Wiki | FAQ | More Links</a></li>
136+
</ul>
137+
<ul>
138+
<li><a href="https://scratch-coding-hut.github.io/messages">Messages</a></li>
139+
<li><a href="https://scratch-coding-hut.github.io/account">My Account</a></li>
140+
</ul>
141+
</div>
130142
</nav>
131143

132-
<h1 style="text-align:center;"><b>Coding Hut</b></h1>
133-
<h2 style="text-align:center;">Order Tracker</h2>
134-
<p style="text-align:center;">Track your order right here in the Coding Hut website.</p>
135-
You can get a order tracking number when you make an order. If you don't get one please tell us.
144+
<h1><b>Coding Hut</b></h1>
145+
<h2>Order Tracker</h2>
146+
<p>Track your order right here on the Coding Hut website.</p>
147+
<p>You can get an order tracking number when you make an order. If you don't receive one, please let us know.</p>
136148

137-
<iframe class="airtable-embed" src="https://airtable.com/embed/appGCYJV0HhSkXNam/shrMXtySk394l4x7u" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
149+
<iframe class="airtable-embed" src="https://airtable.com/embed/appGCYJV0HhSkXNam/shrMXtySk394l4x7u" frameborder="0" onmousewheel="" style="background: transparent;"></iframe>
138150

139151
<script>
140-
function toggleMenu() {
141-
var menu = document.querySelector('.menu');
142-
menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
143-
}
152+
function toggleMenu() {
153+
var menu = document.querySelector('.menu');
154+
var isMenuVisible = menu.style.display === 'flex';
155+
menu.style.display = isMenuVisible ? 'none' : 'flex';
156+
menu.setAttribute('aria-hidden', isMenuVisible); // Update ARIA attribute for accessibility
157+
}
144158
</script>
145-
</body>
159+
</body>
146160
</html>

0 commit comments

Comments
 (0)