Skip to content

Commit 361702f

Browse files
Fluffy728Fluffy728
authored
Remove insecure features on index.html
Removed account capability on the homepage until further notice due to a possibility of it being insecure.
1 parent 85861b7 commit 361702f

File tree

1 file changed

+227
-137
lines changed

1 file changed

+227
-137
lines changed

‎index.html‎

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

0 commit comments

Comments
 (0)