Skip to content

Commit 4d1b9ee

Browse files
kRxZykRxZykRxZykRxZy
authored
Create message_person.html
1 parent 04c00af commit 4d1b9ee

File tree

1 file changed

+234
-0
lines changed

1 file changed

+234
-0
lines changed

‎Wiki/message_person.html

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Send 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></img>
195+
196+
<!-- Menu Items -->
197+
<div class="menu">
198+
<ul>
199+
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
200+
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
201+
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
202+
<li><a href="https://scratch-coding-hut.github.io/Wiki/sitemaplinks">Wiki | FAQ | More Links</a></li>
203+
</ul>
204+
<ul>
205+
<li><a href="https://scratch-coding-hut.github.io/account">My Account</a></li>
206+
</ul>
207+
</div>
208+
</nav>
209+
<body>
210+
<center> <h2>Send Messages</h2>
211+
<form id="messageForm" onsubmit="saveMessageToLocalStorage(event)">
212+
<label for="recipient">Send to:</label>
213+
<input type="text" id="recipient" name="recipient" required>
214+
215+
<label for="message">Message:</label>
216+
<input type="text" id="message" name="message" required>
217+
218+
<button type="submit">Send Message</button>
219+
</form></center>
220+
221+
<script>
222+
function saveMessageToLocalStorage(event) {
223+
event.preventDefault();
224+
const recipient = document.getElementById('recipient').value;
225+
const message = document.getElementById('message').value;
226+
227+
const userMessages = JSON.parse(localStorage.getItem(recipient)) || [];
228+
userMessages.push(message);
229+
localStorage.setItem(recipient, JSON.stringify(userMessages));
230+
231+
document.getElementById('messageForm').reset();
232+
alert(`Message sent to ${recipient}!`);
233+
}
234+
</script>

0 commit comments

Comments
 (0)