diff --git a/articles/plasma-widgets.html b/articles/plasma-widgets.html index 15453a4..07e13b7 100644 --- a/articles/plasma-widgets.html +++ b/articles/plasma-widgets.html @@ -38,7 +38,7 @@

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.

-

That's it! If you go back to the main page of the KDE Store, search your app name and it should come up.

+

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 hnasheraleam@gmail.com



diff --git a/index.html b/index.html index 7a8d50c..6a3f3fd 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + Hamza Nasher-Alneam @@ -51,8 +52,29 @@ +

+ +
+

Guest book

+
+
+ +
+
+ +
+
+
+
+
+
+ + +
+
+
+
-

Thoughts

@@ -100,4 +122,6 @@ + + diff --git a/scripts/guestbook.js b/scripts/guestbook.js new file mode 100644 index 0000000..7333edb --- /dev/null +++ b/scripts/guestbook.js @@ -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 = ` +
+

${message.message}

+ ${message.github}
+ ${formatDate(message.timestamp.toLocaleString(), "dmy")} +
`; + 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"; +} \ No newline at end of file diff --git a/styles/guestbook.css b/styles/guestbook.css new file mode 100644 index 0000000..567f065 --- /dev/null +++ b/styles/guestbook.css @@ -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; + } +} \ No newline at end of file diff --git a/thoughts.html b/thoughts.html index 26adc15..5d05509 100644 --- a/thoughts.html +++ b/thoughts.html @@ -77,4 +77,5 @@ function copy(txt) { } + \ No newline at end of file