Skip to content

Commit 8be995c

Browse files
mcgdjmcgdj
authored
Update about.html
Bugfixes related to Issue #2
1 parent 85068fe commit 8be995c

File tree

1 file changed

+148
-125
lines changed

1 file changed

+148
-125
lines changed

‎about.html‎

Lines changed: 148 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,167 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<style>
5-
body {
6-
overflow-x: hidden;
7-
font-family: Sans-Serif;
8-
margin: 0;
9-
}
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>About Coding Hut | Coding Hut Website</title>
7+
<style>
8+
body {
9+
overflow-x: hidden;
10+
font-family: Sans-Serif;
11+
margin: 0;
12+
}
1013

11-
.menu-container {
12-
position: relative;
13-
display: flex;
14-
align-items: center;
15-
margin-bottom: 20px;
16-
background: #c04d4d;
17-
color: #ffffff;
18-
padding: 20px;
19-
z-index: 1;
20-
-webkit-user-select: none;
21-
user-select: none;
22-
box-sizing: border-box;
23-
}
14+
.menu-container {
15+
position: relative;
16+
display: flex;
17+
align-items: center;
18+
margin-bottom: 20px;
19+
background: #c04d4d;
20+
color: #ffffff;
21+
padding: 20px;
22+
z-index: 1;
23+
-webkit-user-select: none;
24+
user-select: none;
25+
box-sizing: border-box;
26+
}
2427

25-
.menu-logo {
26-
line-height: 0;
27-
margin: 0 20px;
28-
}
28+
.menu-logo {
29+
line-height: 0;
30+
margin: 0 20px;
31+
}
2932

30-
.menu-logo img {
31-
max-height: 40px;
32-
max-width: 100px;
33-
flex-shrink: 0;
34-
}
33+
.menu-logo img {
34+
max-height: 40px;
35+
max-width: 100px;
36+
flex-shrink: 0;
37+
}
3538

36-
.menu-container a {
37-
text-decoration: none;
38-
color: #ffffff;
39-
transition: color 0.3s ease;
40-
}
39+
.menu-container a {
40+
text-decoration: none;
41+
color: #ffffff;
42+
transition: color 0.3s ease;
43+
}
4144

42-
.menu-container a:hover {
43-
color: #50e3c2;
44-
}
45+
.menu-container a:hover {
46+
color: #50e3c2;
47+
}
4548

46-
.menu-container input {
47-
display: block;
48-
width: 35px;
49-
height: 25px;
50-
position: absolute;
51-
cursor: pointer;
52-
opacity: 0;
53-
z-index: 2;
54-
}
49+
.menu-container input {
50+
display: block;
51+
width: 35px;
52+
height: 25px;
53+
position: absolute;
54+
cursor: pointer;
55+
opacity: 0;
56+
z-index: 2;
57+
}
5558

56-
.menu-container span {
57-
display: block;
58-
width: 33px;
59-
height: 4px;
60-
margin-bottom: 5px;
61-
background: #ffffff;
62-
border-radius: 3px;
63-
transition: all 0.5s;
64-
}
59+
.menu-container span {
60+
display: block;
61+
width: 33px;
62+
height: 4px;
63+
margin-bottom: 5px;
64+
background: #ffffff;
65+
border-radius: 3px;
66+
transition: all 0.5s;
67+
}
68+
69+
.menu {
70+
display: none;
71+
position: absolute;
72+
right: 0;
73+
top: 60px;
74+
background: #ffffff;
75+
padding: 20px;
76+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
77+
}
78+
79+
.menu ul {
80+
list-style: none;
81+
padding: 0;
82+
}
83+
84+
.menu li {
85+
padding: 10px 0;
86+
}
87+
88+
.auth-status {
89+
padding: 10px;
90+
background: #f4f4f4;
91+
text-align: center;
92+
font-size: 18px;
93+
margin-top: 20px;
94+
}
6595

96+
@media (max-width: 767px) {
6697
.menu {
67-
display: none;
68-
position: absolute;
98+
width: 100%;
6999
right: 0;
70-
top: 60px;
71-
background: #ffffff;
72-
padding: 20px;
73-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
100+
text-align: center;
74101
}
102+
}
75103

76-
.menu ul {
77-
list-style: none;
78-
padding: 0;
79-
}
104+
#menu-toggle:checked + span {
105+
transform: rotate(45deg);
106+
}
80107

81-
.menu li {
82-
padding: 10px 0;
83-
}
108+
#menu-toggle:checked + span + span {
109+
opacity: 0;
110+
}
84111

85-
.auth-status {
86-
padding: 10px;
87-
background: #f4f4f4;
88-
text-align: center;
89-
font-size: 18px;
90-
}
112+
#menu-toggle:checked + span + span + span {
113+
transform: rotate(-45deg);
114+
}
115+
116+
#menu-toggle:checked ~ .menu {
117+
display: block;
118+
}
119+
</style>
120+
</head>
121+
<body>
122+
<!-- Navigation Bar -->
123+
<nav class="menu-container">
124+
<input type="checkbox" id="menu-toggle" />
125+
<span></span>
126+
<span></span>
127+
<span></span>
128+
<a href="https://scratch-coding-hut.github.io" class="menu-logo">
129+
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut" />
130+
</a>
131+
<div class="menu" id="menu">
132+
<ul>
133+
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
134+
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
135+
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
136+
<li><a href="https://scratch-coding-hut.github.io/sitemaplinks">More...</a></li>
137+
<li><a href="https://scratch-coding-hut.github.io/account" id="account-link">My Account</a></li>
138+
</ul>
139+
</div>
140+
</nav>
91141

92-
@media (max-width: 767px) {
93-
.menu {
94-
width: 100%;
95-
right: 0;
96-
text-align: center;
97-
}
142+
<!-- Authentication Status -->
143+
<div class="auth-status" id="authStatus">Checking login status...</div>
144+
145+
<!-- Main Content -->
146+
<h1><center><b>About Coding Hut</b></center></h1>
147+
<h2>Shop Created At Dec. 27, 2022 20:53:31</h2>
148+
<p>Coding Hut is a shop that does coding, art, and many more! For more than 3 years, we have been helping Scratchers as well as New Scratchers with lots of Scratch-related things.</p>
149+
<p>Coding Hut was founded by @MyScratchedAccount on Dec. 27, 2022 20:53:31.</p>
150+
151+
<!-- Script for Updating Auth Status -->
152+
<script>
153+
function updateAuthStatus() {
154+
const storedUser = localStorage.getItem("loggedInUser");
155+
const authStatus = document.getElementById("authStatus");
156+
if (storedUser) {
157+
authStatus.innerText = `Logged in as: ${storedUser}`;
158+
document.getElementById("account-link").innerText = `My Account (${storedUser})`;
159+
} else {
160+
authStatus.innerText = "Not logged in";
98161
}
99-
</style>
100-
<title>About Coding Hut | Coding Hut Website</title>
101-
</head>
102-
<body>
103-
<nav class="menu-container">
104-
<input type="checkbox" id="menu-toggle" />
105-
<span></span>
106-
<span></span>
107-
<span></span>
108-
<a href="https://scratch-coding-hut.github.io" class="menu-logo">
109-
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut" />
110-
</a>
111-
<div class="menu" id="menu">
112-
<ul>
113-
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
114-
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
115-
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
116-
<li><a href="https://scratch-coding-hut.github.io/sitemaplinks">More...</a></li>
117-
<li><a href="https://scratch-coding-hut.github.io/account" id="account-link">My Account</a></li>
118-
</ul>
119-
</div>
120-
</nav>
121-
122-
<div class="auth-status" id="authStatus">Checking login status...</div>
162+
}
123163

124-
<h1><center><b>About Coding Hut</b></center></h1>
125-
<h2>Shop Created At Dec. 27, 2022 20:53:31</h2>
126-
<p>Coding Hut is a shop that does coding, art, and many more! For more than 3 years, we have been helping Scratchers as well as New Scratchers with lots of Scratch-related things.</p>
127-
<p>Coding Hut was founded by @MyScratchedAccount on Dec. 27, 2022 20:53:31.</p>
128-
129-
<script>
130-
function updateAuthStatus() {
131-
const storedUser = localStorage.getItem("loggedInUser");
132-
const authStatus = document.getElementById("authStatus");
133-
if (storedUser) {
134-
authStatus.innerText = `Logged in as: ${storedUser}`;
135-
document.getElementById("account-link").innerText = `My Account (${storedUser})`;
136-
} else {
137-
authStatus.innerText = "Not logged in";
138-
}
139-
}
140-
141-
window.onload = updateAuthStatus;
142-
</script>
143-
</body>
164+
window.onload = updateAuthStatus;
165+
</script>
166+
</body>
144167
</html>

0 commit comments

Comments
 (0)