Skip to content

Commit 17ee1ba

Browse files
mcgdjmcgdj
authored
Update index.html
Added account capability
1 parent b55a3f9 commit 17ee1ba

File tree

1 file changed

+137
-227
lines changed

1 file changed

+137
-227
lines changed

‎index.html‎

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

0 commit comments

Comments
 (0)