Skip to content

Commit 97ae4d4

Browse files
Fluffy728Fluffy728
authored
Update strike-info.html
wip
1 parent df07f39 commit 97ae4d4

File tree

1 file changed

+206
-0
lines changed

1 file changed

+206
-0
lines changed

‎Strikes/strike-info.html

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,207 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Strike Info | Coding Hut Website</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<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+
}
117

18+
.dynamic-content {
19+
display:none;
20+
}
21+
22+
.menu-container {
23+
position: relative;
24+
display: flex;
25+
align-items: center;
26+
justify-content: space-between;
27+
background: #c04d4d;
28+
padding: 20px;
29+
z-index: 1;
30+
user-select: none;
31+
box-sizing: border-box;
32+
}
33+
34+
.menu-logo img {
35+
max-height: 40px;
36+
max-width: 100px;
37+
flex-shrink: 0;
38+
}
39+
40+
.menu-container a {
41+
text-decoration: none;
42+
color: #ffffff;
43+
transition: color 0.3s ease;
44+
}
45+
46+
.menu-container a:hover {
47+
color: #50e3c2;
48+
}
49+
50+
.menu ul {
51+
list-style: none;
52+
display: flex;
53+
padding: 0;
54+
margin: 0;
55+
}
56+
57+
.menu li {
58+
padding: 0 20px;
59+
font-size: 22px;
60+
}
61+
62+
/* Mobile Styles */
63+
@media only screen and (max-width: 767px) {
64+
.menu-container {
65+
flex-direction: column;
66+
align-items: flex-start;
67+
}
68+
69+
.menu-logo {
70+
margin-bottom: 10px;
71+
}
72+
73+
.menu {
74+
display: none;
75+
width: 100%;
76+
flex-direction: column;
77+
}
78+
79+
.menu ul {
80+
flex-direction: column;
81+
width: 100%;
82+
}
83+
84+
.menu li {
85+
padding: 10px 0;
86+
text-align: center;
87+
}
88+
89+
/* Menu button */
90+
.hamburger {
91+
display: block;
92+
font-size: 30px;
93+
cursor: pointer;
94+
}
95+
}
96+
97+
/* Desktop Styles */
98+
@media only screen and (min-width: 768px) {
99+
.menu {
100+
display: flex;
101+
justify-content: space-between;
102+
width: 100%;
103+
}
104+
105+
.hamburger {
106+
display: none;
107+
}
108+
}
109+
</style>
110+
</head>
111+
<body>
112+
<nav class="menu-container">
113+
<!-- Logo -->
114+
<a href="https://scratch-coding-hut.github.io" class="menu-logo">
115+
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut Logo"/>
116+
</a>
117+
118+
<!-- Menu for Mobile -->
119+
<span class="hamburger" onclick="toggleMenu()">&#9776;</span>
120+
121+
<!-- Menu Items -->
122+
<div class="menu">
123+
<ul>
124+
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
125+
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
126+
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
127+
<li><a href="https://scratch-coding-hut.github.io/Wiki/sitemaplinks">Wiki | FAQ | More Links</a></li>
128+
</ul>
129+
<ul>
130+
<li><a href="https://scratch-coding-hut.github.io/messages">Messages</a></li>
131+
<li><a href="https://scratch-coding-hut.github.io/account">My Account</a></li>
132+
</ul>
133+
</div>
134+
</nav>
135+
136+
<!-- This is the staff profile system -->
137+
<h1>Staff Profile</h1>
138+
139+
<!-- Default Dynamic Section -->
140+
<div id="default-content" class="dynamic-content">
141+
<h2>No Strike ID</h2>
142+
Make sure you got a vaild link and come back
143+
</div>
144+
<!-- Dynamic Section 1 -->
145+
<div id="myscratchedaccount" class="dynamic-content">
146+
<h2>MyScratchedAccount</h2>
147+
<h3>Role: Owner</h3>
148+
<br>
149+
MyScratchedAccount founded Coding Hut. The reason that MyScratchedAccount made Coding Hut is to help lots of people with Coding and Art.
150+
</div>
151+
<!-- Dynamic Section 2 -->
152+
<div id="staff2" class="dynamic-content">
153+
<h2>Staff2</h2>
154+
<br>
155+
DESCRIPTION HERE
156+
</div>
157+
<!-- Dynamic Section 3 -->
158+
<div id="staff3" class="dynamic-content">
159+
<h2>Staff3</h2>
160+
<br>
161+
DESCRIPTION HERE
162+
</div>
163+
164+
<script>
165+
function toggleMenu() {
166+
var menu = document.querySelector('.menu');
167+
menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
168+
}
169+
</script>
170+
</body>
171+
</html>
172+
173+
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
174+
<script type="text/javascript">
175+
// Parse the URL parameter
176+
function getParameterByName(name, url) {
177+
if (!url) url = window.location.href;
178+
name = name.replace(/[\[\]]/g, "\\$&");
179+
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
180+
results = regex.exec(url);
181+
if (!results) return null;
182+
if (!results[2]) return '';
183+
return decodeURIComponent(results[2].replace(/\+/g, " "));
184+
}
185+
// Give the parameter a variable name
186+
var dynamicContent = getParameterByName('strikeid');
187+
188+
$(document).ready(function() {
189+
190+
// Check if the URL parameter is apples
191+
if (dynamicContent == 'myscratchedaccount') {
192+
$('#myscratchedaccount').show();
193+
}
194+
// Check if the URL parameter is oranges
195+
else if (dynamicContent == 'staff2') {
196+
$('#staff2').show();
197+
}
198+
// Check if the URL parameter is bananas
199+
else if (dynamicContent == 'staff3') {
200+
$('#staff3').show();
201+
}
202+
// Check if the URL parmeter is empty or not defined, display default content
203+
else {
204+
$('#default-content').show();
205+
}
206+
});
207+
</script>

0 commit comments

Comments
 (0)