Skip to content

Commit f9a0911

Browse files
mcgdjmcgdj
authored
Update about.html
Bugfixes, added account functionality
1 parent 17ee1ba commit f9a0911

File tree

1 file changed

+139
-229
lines changed

1 file changed

+139
-229
lines changed

‎about.html‎

Lines changed: 139 additions & 229 deletions
Original file line numberDiff line numberDiff line change
@@ -1,234 +1,144 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
3-
<title>About Coding Hut | Coding Hut Website</title>
4-
5-
<nav class="menu-container">
6-
<!-- burger menu -->
7-
<input type="checkbox" aria-label="Toggle menu" />
8-
<span></span>
9-
<span></span>
10-
<span></span>
11-
12-
<!-- logo -->
13-
<a href="scratch-coding-hut.github.io" class="menu-logo">
14-
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="My Awesome Website"/>
15-
</a>
16-
17-
<!-- menu items -->
18-
<div class="menu">
19-
<ul>
20-
<li>
21-
<a href="https://scratch-coding-hut.github.io">
22-
Home
23-
</a>
24-
</li>
25-
<li>
26-
<a href="https://scratch-coding-hut.github.io/about">
27-
About
28-
</a>
29-
</li>
30-
<li>
31-
<a href="https://scratch.mit.edu/discuss/topic/652178/">
32-
Scratch Forum Post
33-
</a>
34-
</li>
35-
<li>
36-
<a href="https://scratch-coding-hut.github.io/sitemaplinks">
37-
More...
38-
</a>
39-
</li>
40-
</ul>
41-
<ul>
42-
<li>
43-
<a href="https://scratch-coding-hut.github.io/account">
44-
My Account
45-
</a>
46-
</li>
47-
</ul>
48-
</div>
49-
</nav>
4+
<style>
5+
body {
6+
overflow-x: hidden;
7+
font-family: Sans-Serif;
8+
margin: 0;
9+
}
10+
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+
}
24+
25+
.menu-logo {
26+
line-height: 0;
27+
margin: 0 20px;
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-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+
}
55+
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+
}
65+
66+
.menu {
67+
display: none;
68+
position: absolute;
69+
right: 0;
70+
top: 60px;
71+
background: #ffffff;
72+
padding: 20px;
73+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
74+
}
75+
76+
.menu ul {
77+
list-style: none;
78+
padding: 0;
79+
}
80+
81+
.menu li {
82+
padding: 10px 0;
83+
}
84+
85+
.auth-status {
86+
padding: 10px;
87+
background: #f4f4f4;
88+
text-align: center;
89+
font-size: 18px;
90+
}
91+
92+
@media (max-width: 767px) {
93+
.menu {
94+
width: 100%;
95+
right: 0;
96+
text-align: center;
97+
}
98+
}
99+
</style>
100+
<title>About Coding Hut | Coding Hut Website</title>
50101
</head>
51102
<body>
52-
<h1><center><b>About Coding Hut</b></center></h1>
53-
<h2>Shop Created At Dec. 27, 2022 20:53:31</h2>
54-
55-
Coding Hut is a shop that does coding, art, and many more! For more than 3 years, we have been
56-
helping Scratchers as well as New Scratchers with lots of Scrztch related things.
57-
Coding Hut was founded by @MyScratchedAccount on the Dec. 27, 2022 20:53:31.</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>
123+
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>
58144
</html>
59-
60-
<style>body {
61-
overflow-x: hidden;
62-
font-family: Sans-Serif;
63-
margin: 0;
64-
}
65-
66-
.menu-container {
67-
position: relative;
68-
display: flex;
69-
align-items: center;
70-
margin-bottom: 20px;
71-
background: #c04d4d;
72-
color: #ffffff;
73-
padding: 20px;
74-
z-index: 1;
75-
-webkit-user-select: none;
76-
user-select: none;
77-
box-sizing: border-box;
78-
}
79-
80-
.menu-logo {
81-
line-height: 0;
82-
margin: 0 20px;
83-
}
84-
85-
.menu-logo img {
86-
max-height: 40px;
87-
max-width: 100px;
88-
flex-shrink: 0;
89-
}
90-
91-
.menu-container a {
92-
text-decoration: none;
93-
color: #c04d4d;
94-
transition: color 0.3s ease;
95-
}
96-
97-
.menu-container a:hover {
98-
color: #50e3c2;
99-
}
100-
101-
.menu-container input {
102-
display: block;
103-
width: 35px;
104-
height: 25px;
105-
margin: 0;
106-
position: absolute;
107-
cursor: pointer;
108-
opacity: 0; /* hide this */
109-
z-index: 2; /* and place it over the hamburger */
110-
-webkit-touch-callout: none;
111-
}
112-
113-
/* Burger menu */
114-
.menu-container span {
115-
display: block;
116-
width: 33px;
117-
height: 4px;
118-
margin-bottom: 5px;
119-
position: relative;
120-
background: #ffffff;
121-
border-radius: 3px;
122-
z-index: 1;
123-
transform-origin: 4px 0px;
124-
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
125-
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
126-
opacity 0.55s ease;
127-
}
128-
129-
.menu-container span:first-child {
130-
transform-origin: 0% 0%;
131-
}
132-
133-
.menu-container span:nth-child(3) {
134-
transform-origin: 0% 100%;
135-
}
136-
137-
.menu-container input:checked ~ span {
138-
opacity: 1;
139-
transform: rotate(45deg) translate(3px,-1px);
140-
background: #c04d4d;
141-
}
142-
143-
.menu-container input:checked ~ span:nth-child(4) {
144-
opacity: 0;
145-
transform: rotate(0deg) scale(0.2, 0.2);
146-
}
147-
148-
.menu-container input:checked ~ span:nth-child(3) {
149-
transform: rotate(-45deg) translate(-5px,11px);
150-
}
151-
152-
.menu ul {
153-
list-style: none;
154-
}
155-
156-
.menu li {
157-
padding: 10px 0;
158-
font-size: 22px;
159-
}
160-
161-
/* mobile styles */
162-
@media only screen and (max-width: 767px) {
163-
.menu-container {
164-
flex-direction: column;
165-
align-items: flex-end;
166-
}
167-
168-
.menu-logo {
169-
position: absolute;
170-
left: 0;
171-
top: 50%;
172-
transform: translateY(-50%);
173-
}
174-
175-
.menu-logo img {
176-
max-height: 30px;
177-
}
178-
179-
.menu {
180-
position: absolute;
181-
box-sizing: border-box;
182-
width: 300px;
183-
right: -300px;
184-
top: 0;
185-
margin: -20px;
186-
padding: 75px 50px 50px;
187-
background: #ffffff;
188-
-webkit-font-smoothing: antialiased;
189-
/* to stop flickering of text in safari */
190-
transform-origin: 0% 0%;
191-
transform: translateX(0%);
192-
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
193-
}
194-
195-
.menu-container input:checked ~ .menu {
196-
transform: translateX(-100%);
197-
}
198-
}
199-
200-
/* desktop styles */
201-
@media only screen and (min-width: 768px) {
202-
.menu-container {
203-
width: 100%;
204-
}
205-
206-
.menu-container a {
207-
color: #ffffff;
208-
}
209-
210-
.menu-container input {
211-
display: none;
212-
}
213-
214-
/* Burger menu */
215-
.menu-container span {
216-
display: none;
217-
}
218-
219-
.menu {
220-
position: relative;
221-
width: 100%;
222-
display: flex;
223-
justify-content: space-between;
224-
}
225-
226-
.menu ul {
227-
display: flex;
228-
padding: 0;
229-
}
230-
231-
.menu li {
232-
padding: 0 20px;
233-
}
234-
}</style>

0 commit comments

Comments
 (0)