Skip to content

Commit a66d05a

Browse files
Fluffy728Fluffy728
authored
Recover private_messages.html
Recovered from backup
1 parent 3ef3ebb commit a66d05a

File tree

1 file changed

+274
-0
lines changed

1 file changed

+274
-0
lines changed

‎private_messages.html

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Messages | 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+
13+
.header {
14+
padding: 60px;
15+
text-align: center;
16+
background: #1abc9c;
17+
color: white;
18+
font-size: 30px;
19+
}
20+
21+
.badge {
22+
background-color: red;
23+
color: white;
24+
padding: 4px 8px;
25+
text-align: center;
26+
border-radius: 5px;
27+
}
28+
29+
/* The alert message box */
30+
.alert {
31+
padding: 20px;
32+
background-color: #f44336; /* Red */
33+
color: white;
34+
margin-bottom: 15px;
35+
}
36+
37+
/* The close button */
38+
.closebtn {
39+
margin-left: 15px;
40+
color: white;
41+
font-weight: bold;
42+
float: right;
43+
font-size: 22px;
44+
line-height: 20px;
45+
cursor: pointer;
46+
transition: 0.3s;
47+
}
48+
49+
/* When moving the mouse over the close button */
50+
.closebtn:hover {
51+
color: black;
52+
}
53+
54+
.menu-container {
55+
position: relative;
56+
display: flex;
57+
align-items: center;
58+
justify-content: space-between;
59+
background: #c04d4d;
60+
padding: 20px;
61+
z-index: 1;
62+
user-select: none;
63+
box-sizing: border-box;
64+
}
65+
66+
/* The snackbar - position it at the bottom and in the middle of the screen */
67+
#snackbar {
68+
visibility: hidden; /* Hidden by default. Visible on click */
69+
min-width: 250px; /* Set a default minimum width */
70+
margin-left: -125px; /* Divide value of min-width by 2 */
71+
background-color: #333; /* Black background color */
72+
color: #fff; /* White text color */
73+
text-align: center; /* Centered text */
74+
border-radius: 2px; /* Rounded borders */
75+
padding: 16px; /* Padding */
76+
position: fixed; /* Sit on top of the screen */
77+
z-index: 1; /* Add a z-index if needed */
78+
left: 50%; /* Center the snackbar */
79+
bottom: 30px; /* 30px from the bottom */
80+
}
81+
82+
/* Show the snackbar when clicking on a button (class added with JavaScript) */
83+
#snackbar.show {
84+
visibility: visible; /* Show the snackbar */
85+
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
86+
However, delay the fade out process for 2.5 seconds */
87+
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
88+
animation: fadein 0.5s, fadeout 0.5s 2.5s;
89+
}
90+
91+
/* Animations to fade the snackbar in and out */
92+
@-webkit-keyframes fadein {
93+
from {bottom: 0; opacity: 0;}
94+
to {bottom: 30px; opacity: 1;}
95+
}
96+
97+
@keyframes fadein {
98+
from {bottom: 0; opacity: 0;}
99+
to {bottom: 30px; opacity: 1;}
100+
}
101+
102+
@-webkit-keyframes fadeout {
103+
from {bottom: 30px; opacity: 1;}
104+
to {bottom: 0; opacity: 0;}
105+
}
106+
107+
@keyframes fadeout {
108+
from {bottom: 30px; opacity: 1;}
109+
to {bottom: 0; opacity: 0;}
110+
}
111+
112+
.menu-logo img {
113+
max-height: 40px;
114+
max-width: 100px;
115+
flex-shrink: 0;
116+
}
117+
118+
.menu-container a {
119+
text-decoration: none;
120+
color: #ffffff;
121+
transition: color 0.3s ease;
122+
}
123+
124+
.menu-container a:hover {
125+
color: #50e3c2;
126+
}
127+
128+
.menu ul {
129+
list-style: none;
130+
display: flex;
131+
padding: 0;
132+
margin: 0;
133+
}
134+
135+
.menu li {
136+
padding: 0 20px;
137+
font-size: 22px;
138+
}
139+
140+
/* Mobile Styles */
141+
@media only screen and (max-width: 767px) {
142+
.menu-container {
143+
flex-direction: column;
144+
align-items: flex-start;
145+
}
146+
147+
.menu-logo {
148+
margin-bottom: 10px;
149+
}
150+
151+
.menu {
152+
display: none;
153+
width: 100%;
154+
flex-direction: column;
155+
}
156+
157+
.menu ul {
158+
flex-direction: column;
159+
width: 100%;
160+
}
161+
162+
.menu li {
163+
padding: 10px 0;
164+
text-align: center;
165+
}
166+
167+
/* Menu button */
168+
.hamburger {
169+
display: block;
170+
font-size: 30px;
171+
cursor: pointer;
172+
}
173+
}
174+
175+
/* Desktop Styles */
176+
@media only screen and (min-width: 768px) {
177+
.menu {
178+
display: flex;
179+
justify-content: space-between;
180+
width: 100%;
181+
}
182+
183+
.hamburger {
184+
display: none;
185+
}
186+
}
187+
</style>
188+
</head>
189+
<body>
190+
<nav class="menu-container">
191+
<!-- Logo -->
192+
<a href="https://scratch-coding-hut.github.io" class="menu-logo">
193+
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut Logo"/>
194+
</a>
195+
196+
<!-- Menu for Mobile -->
197+
<span class="hamburger" onclick="toggleMenu()">&#9776;</span>
198+
199+
<!-- Menu Items -->
200+
<div class="menu">
201+
<ul>
202+
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
203+
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
204+
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
205+
<li><a href="https://scratch-coding-hut.github.io/Wiki/sitemaplinks">Wiki | FAQ | More Links</a></li>
206+
</ul>
207+
<ul>
208+
<li><a href="https://scratch-coding-hut.github.io/account">My Account</a></li>
209+
</ul>
210+
</div>
211+
</nav>
212+
213+
<div class="header">
214+
<h1>Messages</h1>
215+
<p>Check the messages, alerts and news from Coding Hut here.</p>
216+
</div>
217+
218+
<br>
219+
220+
<!-- Use a button to open the snackbar, that says Coming Soon, as messaging staff through the messages menu is not a feature yet -->
221+
<b>Actions:</b> <button onclick="myFunction()">Message Staff</button>
222+
223+
<!-- The actual snackbar -->
224+
<div id="snackbar">This feature is Coming Soon!</div>
225+
226+
<h3>Messages<span id="alerts" class="badge">Loading...</span></h3>
227+
228+
<script>
229+
function toggleMenu() {
230+
var menu = document.querySelector('.menu');
231+
menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
232+
}
233+
function myFunction() {
234+
// Get the snackbar DIV
235+
var x = document.getElementById("snackbar");
236+
237+
// Add the "show" class to DIV
238+
x.className = "show";
239+
240+
// After 3 seconds, remove the show class from DIV
241+
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
242+
window.location.href = "message_person.html";
243+
244+
}
245+
window.onload = function {
246+
getMessagesForRecipient();
247+
};
248+
window.onload = function() {
249+
const message = localStorage.getItem('username') || 'No message found.';
250+
document.getElementById('getRecipient').textContent = message;
251+
};
252+
253+
function getMessagesForRecipient() {
254+
const recipient = document.getElementById('getRecipient').value;
255+
const userMessages = JSON.parse(localStorage.getItem(recipient)) || [];
256+
const messagesDisplay = document.getElementById('messagesDisplay');
257+
258+
messagesDisplay.innerHTML = '';
259+
260+
if (userMessages.length > 0) {
261+
userMessages.forEach(message => {
262+
const listItem = document.createElement('li');
263+
listItem.textContent = message;
264+
messagesDisplay.appendChild(listItem);
265+
});
266+
} else {
267+
const noMessagesItem = document.createElement('li');
268+
noMessagesItem.textContent = `No messages found for ${recipient}.`;
269+
messagesDisplay.appendChild(noMessagesItem);
270+
}
271+
}
272+
</script>
273+
</body>
274+
</html>

0 commit comments

Comments
 (0)