mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2025-01-18 06:09:19 -05:00
Add guestbook
This commit is contained in:
parent
6a917cb574
commit
9dab44d852
5 changed files with 284 additions and 2 deletions
|
|
@ -38,7 +38,7 @@
|
||||||
</div>
|
</div>
|
||||||
<p>Fill in the information for your app, using "Plasma Mobile Widgets" as the catagory.
|
<p>Fill in the information for your app, using "Plasma Mobile Widgets" as the catagory.
|
||||||
When you've entered all the needed catagories, press next. We can skip the settings step, so just click next again. Add your .plasmoid file, and click save.</p>
|
When you've entered all the needed catagories, press next. We can skip the settings step, so just click next again. Add your .plasmoid file, and click save.</p>
|
||||||
<p>That's it! If you go back to the main page of the KDE Store, search your app name and it should come up.</p>
|
<p>That's it! If you go back to the main page of the KDE Store, search your app name and it should come up. It'll also show up in the KDE Get New Widgets menu on the desktop. If you've got any questions, feel free to email me at <a href="mailto:hnasheralneam@gmail.com">hnasheraleam@gmail.com</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
|
||||||
24
index.html
24
index.html
|
|
@ -8,6 +8,7 @@
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="styles/home.css">
|
<link rel="stylesheet" href="styles/home.css">
|
||||||
<link rel="stylesheet" href="styles/styles.css">
|
<link rel="stylesheet" href="styles/styles.css">
|
||||||
|
<link rel="stylesheet" href="styles/guestbook.css">
|
||||||
<title>Hamza Nasher-Alneam</title>
|
<title>Hamza Nasher-Alneam</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -51,8 +52,29 @@
|
||||||
<button onclick="changeTheme()">Random</button>
|
<button onclick="changeTheme()">Random</button>
|
||||||
<button onclick="changeThemeHex()" class="hex-code-label">Hex code</button>
|
<button onclick="changeThemeHex()" class="hex-code-label">Hex code</button>
|
||||||
</div>
|
</div>
|
||||||
|
<br><br>
|
||||||
|
<!-- Guestbook -->
|
||||||
|
<div class="guestbook">
|
||||||
|
<h3 class="guestbook-title">Guest book</h3>
|
||||||
|
<div class="messages"></div>
|
||||||
|
<div class="show-all-messages">
|
||||||
|
<button onclick="this.remove(); showAll()">Show all messages</button>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
|
<button class="post-button" onclick="toggleElement('new-message')">Post a message</button>
|
||||||
|
<div class="new-message-container" onclick="if (event.target.classList.contains('new-message-container')) toggleElement('new-message')">
|
||||||
|
<div class="new-message">
|
||||||
|
<form class="new-message-form" method="POST" action="http://localhost:54321/message">
|
||||||
|
<label class="message-header" for="message">Your message for the world</label><br>
|
||||||
|
<textarea type="text" name="message" placeholder="your post"></textarea><br>
|
||||||
|
<label class="text-label" for="github">Your GitHub username</label><br>
|
||||||
|
<input class="text" type="text" name="github" placeholder="github username">
|
||||||
|
<input type="submit" value="Post" onclick="checkSubmissionValid(event)">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="thoughts-preview">
|
<div class="thoughts-preview">
|
||||||
<h2>Thoughts</h2>
|
<h2>Thoughts</h2>
|
||||||
<a href="articles/plasma-widgets.html#publish-widget">
|
<a href="articles/plasma-widgets.html#publish-widget">
|
||||||
|
|
@ -100,4 +122,6 @@
|
||||||
</body>
|
</body>
|
||||||
<script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
<script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
|
<script src="https://hnasheralneam.github.io/digit/main.js"></script>
|
||||||
|
<script src="scripts/guestbook.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
69
scripts/guestbook.js
Normal file
69
scripts/guestbook.js
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
function checkSubmissionValid(event) {
|
||||||
|
let message = document.querySelector('textarea[name="message"]').value;
|
||||||
|
let github = document.querySelector('input[name="github"]').value;
|
||||||
|
if (message.length < 1 || github.length < 1) {
|
||||||
|
event.preventDefault();
|
||||||
|
document.querySelector('.status').textContent = "Fill out all fields";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.querySelector('.status').textContent = "Post succesful!";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
fetch('https://guestbook-api.hnasheralneam.dev/messages/random-5')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
createMessage(data[i]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
function getAll() {
|
||||||
|
document.querySelector('.messages').innerHTML = "";
|
||||||
|
fetch('https://guestbook-api.hnasheralneam.dev/messages/all')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
createMessage(data[i]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMessage(message) {
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.classList.add('card');
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
<div>
|
||||||
|
<p class="message">${message.message}</p>
|
||||||
|
<a class="name" href="https://fetchcv.hnasheralneam.dev/user/github/${message.github}">${message.github}</a><br>
|
||||||
|
<i>${formatDate(message.timestamp.toLocaleString(), "dmy")}</i>
|
||||||
|
</div>`;
|
||||||
|
document.querySelector('.messages').appendChild(messageDiv);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleElement(elementName) {
|
||||||
|
const element = document.querySelector(`.${elementName}-container`);
|
||||||
|
if (element.style.opacity == 0) {
|
||||||
|
element.style.opacity = "1";
|
||||||
|
element.style.pointerEvents = "all";
|
||||||
|
} else {
|
||||||
|
element.style.opacity = 0;
|
||||||
|
element.style.pointerEvents = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showAll() {
|
||||||
|
getAll();
|
||||||
|
let messagesElement = document.querySelector(".messages");
|
||||||
|
messagesElement.style.overflowX = "hidden";
|
||||||
|
messagesElement.style.overflowY = "auto";
|
||||||
|
messagesElement.style.whiteSpace = "wrap";
|
||||||
|
}
|
||||||
188
styles/guestbook.css
Normal file
188
styles/guestbook.css
Normal file
|
|
@ -0,0 +1,188 @@
|
||||||
|
.guestbook {
|
||||||
|
padding-top: 2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook * {
|
||||||
|
font-family: "Comic Sans MS", "Comic Sans", cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .messages {
|
||||||
|
margin: 1rem 0;
|
||||||
|
max-width: 100vw;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
scrollbar-width: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .messages::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .card {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 .3rem;
|
||||||
|
min-height: 14rem;
|
||||||
|
min-width: 20rem;
|
||||||
|
max-width: 25rem;
|
||||||
|
/* max-width: 700px; */
|
||||||
|
border: solid .2rem var(--theme-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
white-space: wrap;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-bottom: .8rem;
|
||||||
|
padding: 1rem;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .card .message {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .card .name {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .card .name:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .card i {
|
||||||
|
font-size: .9rem;
|
||||||
|
color: #888;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .post-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .show-all-messages {
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guestbook .guestbook-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #eeeeee88;
|
||||||
|
backdrop-filter: blur(.2rem);
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message {
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
background-color: #ddddddaa;
|
||||||
|
box-shadow: 0 0 .2rem #999;
|
||||||
|
backdrop-filter: blur(.5rem);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message .message-header {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message textarea {
|
||||||
|
min-width: 20rem;
|
||||||
|
min-height: 6rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: .5rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background-color: #fff;
|
||||||
|
border: solid .2rem #aaa;
|
||||||
|
color: #222;
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message .text-label {
|
||||||
|
margin: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message input.text {
|
||||||
|
padding: .3rem .6rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background-color: #fff;
|
||||||
|
border: solid .2rem #aaa;
|
||||||
|
color: #222;
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message input.text:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message input[type="submit"] {
|
||||||
|
padding: .3rem .6rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background-color: var(--theme-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message input[type="submit"]:active {
|
||||||
|
transform: scale(.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.new-message-container {
|
||||||
|
background-color: #00000088;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message {
|
||||||
|
background-color: #222222aa;
|
||||||
|
box-shadow: 0 0 .2rem #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-message textarea {
|
||||||
|
background-color: #111;
|
||||||
|
border: solid .2rem #333;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.new-message input.text {
|
||||||
|
background-color: #111;
|
||||||
|
border: solid .2rem #333;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -77,4 +77,5 @@ function copy(txt) {
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue