Save theme color across pages

Character limit on guestbook entries, guestbook takes full space, menu links can be clicked anywhere
2025-06-27 06:47:27 -04:00 · 2025-05-05 18:15:42 -04:00 · 2025-05-05 15:09:15 -04:00
13 changed files with 139 additions and 130 deletions
--- a/guestbook.html
+++ b/guestbook.html
@ -1,15 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta name="viewport" content="width=device-width">
   <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
   <meta name="theme-color" content="#f69b46">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
   <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&amp;display=swap"
      rel="stylesheet">
-   <link rel="stylesheet" href="styles/home.css">
   <link rel="stylesheet" href="styles/styles.css">
   <link rel="stylesheet" href="styles/guestbook.css">
   <title>Guestbook | Hamza Nasher-Alneam</title>
@ -22,14 +20,12 @@
   <br><br>

   <div class="content" style="min-height: 60vh">
-      <div class="main-text">
-         <div>
            <!-- Guestbook -->
            <div class="guestbook">
               <h2 class="guestbook-title">Guest book - leave a note!</h2>
               <div class="messages"></div>
               <div class="show-all-messages">
-                  <button onclick="this.remove(); showAll()">Show all messages</button>
+                  <button onclick="this.remove(); getAll()">Show all messages</button>
               </div>
               <br>
               <button class="post-button" onclick="toggleElement('new-message')">Post a message</button>
@ -39,7 +35,7 @@
                     <form class="new-message-form" method="POST"
                        action="https://guestbook-api.hnasheralneam.dev/message">
                        <label class="message-header" for="message">Your message for the world</label><br>
-                        <textarea type="text" name="message" placeholder="your post"></textarea><br>
+                        <textarea type="text" name="message" placeholder="your post" maxlength="500"></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)">
@ -48,14 +44,13 @@
               </div>
            </div>
   </div>
-      </div>
-   </div>

   <br><br>
   <div w3-include-html="partials/footer.html"></div>
   <div w3-include-html="partials/menu.html"></div>
 </body>
 <script src="scripts/include-html.js"></script>
+<script src="scripts/script.js"></script>
 <script defer src="https://umami.hnasheralneam.dev/script.js"
   data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
 <script src="https://hnasheralneam.github.io/digit/main.js"></script>
--- a/icons/phil.png
+++ b/icons/phil.png
--- a/icons/race.png
+++ b/icons/race.png
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width">
   <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
   <meta name="theme-color" content="#f69b46">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
   <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&amp;display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles/home.css">
   <link rel="stylesheet" href="styles/styles.css">
@ -12,9 +12,7 @@
   <title>Hamza Nasher-Alneam</title>
 </head>
 <body>
-   <div class="progress-parent">
-      <div class="progress"></div>
-   </div>
+   <div class="progress-parent"><div class="progress"></div></div>
   <br><br>

   <div class="content">
@ -64,63 +62,18 @@
               <p>Change the website color theme</p>
               <button onclick="changeTheme()">Random</button>
               <button onclick="changeThemeHex()" class="hex-code-label">Hex code</button>
+               <button onclick="resetTheme()">Reset</button>
+            </div>
         </div>
         <br><br>
-            <!-- Guestbook -->
-            <!-- <div class="guestbook">
-               <h2 class="guestbook-title">Guest book - leave a note!</h2>
-               <div class="messages"></div>
-               <div class="show-all-messages">
-                  <button onclick="this.remove(); showAll()">Show all messages</button>
-               </div>
-               <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="https://guestbook-api.hnasheralneam.dev/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">
-            <h2>Thoughts</h2>
-            <a hre="articles/plasma-widgets.html#publish-widget">
-               <div class="thoughts-bit"
-                  <h4>Publish your Plasma widget</h4>
-                  <i>May 15 2024</i>
-                  <p>A quick tutorial that shows how publish a KDE widget on the widget store. More on KDE widgets coming soon
-                     hopefully!</p>
-               </div>
-            </a>
-            <a href="thoughts.html#imessage-lockin">
-               <div class="thoughts-bit">
-                  <h4>The social issues with iMessage</h4>
-                  <i>Dec 1 2022</i>
-                  <p>I discusses the technology behind SMS, which is used when messaging between iPhones and other devices, as well as the newer MMS and RCS standards.</p>
-               </div>
-            </a>
-            <a href="thoughts.html#reject-folding-phones">
-               <div class="thoughts-bit">
-                  <h4>An argument against folding phones</h4>
-                  <i>Dec 1 2022</i>
-                  <p>I mention the impracticalities in more words than strictly necessary.</p>
-               </div>
-            </a>
-         </div> -->
-      </div>
-   </div>
-
   <br><br>
   <div w3-include-html="partials/footer.html"></div>
   <div w3-include-html="partials/menu.html"></div>
 </body>
 <script src="scripts/include-html.js"></script>
+<script src="scripts/script.js"></script>
 <script src="scripts/main.js"></script>
 <script src="https://hnasheralneam.github.io/digit/main.js"></script>
 <script defer src="https://umami.hnasheralneam.dev/script.js"
--- a/partials/menu.html
+++ b/partials/menu.html
@ -1,24 +1,16 @@
 <div class="menu">
   <div>
-      <div class="item">
-         <a href="index.html" title="home">
+      <a class="item" href="index.html" title="home">
         <img src="icons/home.svg" alt="home">
      </a>
-      </div>
-      <div class="item">
-         <a href="projects.html" title="projects">
+      <a class="item" href="projects.html" title="projects">
         <img src="icons/web_stories.svg" alt="projects">
      </a>
-      </div>
-      <div class="item">
-         <a href="thoughts.html" title="thoughts">
+      <a class="item" href="thoughts.html" title="thoughts">
         <img src="icons/rss_feed.svg" alt="thoughts">
      </a>
-      </div>
-      <div class="item">
-         <a href="guestbook.html" title="guestbook">
+      <a class="item" href="guestbook.html" title="guestbook">
         <img src="icons/developer_guide.svg" alt="guestbook">
      </a>
   </div>
 </div>
-</div>
--- a/projects.html
+++ b/projects.html
@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width">
   <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
   <meta name="theme-color" content="#f69b46">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
   <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&amp;display=swap"
      rel="stylesheet">
@ -21,6 +21,7 @@
   <div w3-include-html="partials/menu.html"></div>
 </body>
 <script src="scripts/include-html.js"></script>
+<script src="scripts/script.js"></script>
 <script src="scripts/projects.js"></script>
 <script defer src="https://umami.hnasheralneam.dev/script.js"
   data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
--- a/scripts/copypopup.js
+++ b/scripts/copypopup.js
@ -0,0 +1,24 @@
+let url = document.location.href;
+
+function copy(txt) {
+   let link = `${url}#${txt}`;
+   navigator.clipboard.writeText(link).then(() => {
+      console.log("Copied link!");
+   }, () => { console.log("Error copying link."); });
+   let alert = document.createElement("DIV");
+   alert.textContent = "Copied Link to Heading!";
+   alert.classList.add("tempAlert");
+   document.body.appendChild(alert);
+   setTimeout(() => {
+      alert.style.opacity = "1";
+      alert.style.bottom = ".5rem";
+   }, 200);
+   setTimeout(() => {
+      alert.style.opacity = "0";
+      alert.style.bottom = "-10rem";
+   }, 4200);
+   setTimeout(() => {
+      alert.remove();
+   }, 4400);
+
+}
--- a/scripts/guestbook.js
+++ b/scripts/guestbook.js
@ -5,6 +5,10 @@ function checkSubmissionValid(event) {
      event.preventDefault();
      document.querySelector('.status').textContent = "Fill out all fields";
   }
+   else if (message.length > 500) {
+      event.preventDefault();
+      document.querySelector('.status').textContent = "Message too long";
+   }
   else {
      document.querySelector('.status').textContent = "Post succesful!";
   }
@ -59,11 +63,3 @@ function toggleElement(elementName) {
      element.style.pointerEvents = "none";
   }
 }
-
-function showAll() {
-   getAll();
-   let messagesElement = document.querySelector(".messages");
-   messagesElement.style.overflowX = "hidden";
-   messagesElement.style.overflowY = "auto";
-   messagesElement.style.whiteSpace = "wrap";
-}
--- a/scripts/main.js
+++ b/scripts/main.js
@ -1,5 +1,3 @@
-console.log("hello");
-
 window.addEventListener("scroll", () => {
   document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
 }, false);
@ -20,8 +18,6 @@ function changeThemeHex() {
   }
 }

-function setThemeColor(color) {
-   document.documentElement.style.setProperty("--theme-color", color);
-   let metaThemeColor = document.querySelector("meta[name=theme-color]");
-   metaThemeColor.setAttribute("content", color);
+function resetTheme() {
+   setThemeColor("#f69b46");
 }
--- a/scripts/script.js
+++ b/scripts/script.js
@ -0,0 +1,11 @@
+// theme color
+let themeColor = localStorage.getItem("theme-color");
+if (!themeColor) themeColor = "#f69b46";
+setThemeColor(themeColor);
+
+function setThemeColor(color) {
+   document.documentElement.style.setProperty("--theme-color", color);
+   let metaThemeColor = document.querySelector("meta[name=theme-color]");
+   metaThemeColor.setAttribute("content", color);
+   localStorage.setItem("theme-color", color);
+}
--- a/styles/guestbook.css
+++ b/styles/guestbook.css
@ -1,3 +1,73 @@
+* {
+    font-family: "Nunito", "Times New Roman", Times, serif;
+}
+
+body {
+    overflow-x: hidden;
+}
+
+.content {
+    transition: .2s;
+    margin: auto;
+    max-width: 80rem;
+    transition: .2s;
+}
+
+h2 {
+    position: relative;
+    margin: 1rem .75rem .75rem 2.5rem;
+    font-size: 1.5rem;
+    transition: .2s;
+}
+
+h3 {
+    margin: .75rem 0 0 2rem;
+}
+
+button {
+    padding: .2rem .5rem;
+    font-size: 1.1rem;
+    color: #fff;
+    background-color: var(--theme-color);
+    border: solid .2rem var(--theme-color);
+    border-radius: .5rem;
+    box-shadow: 0 .1rem .2rem #ddd;
+    transition: .15s;
+}
+
+button:hover {
+    color: var(--theme-color);
+    background-color: transparent;
+}
+
+button:active {
+    transform: scale(.98);
+}
+
+a {
+    color: var(--theme-color);
+}
+
+@media only screen and (max-width: 700px) {
+    .content {
+        grid-template-columns: 100%;
+        margin-right: 0;
+        width: 100vw;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    button {
+        box-shadow: 0 .2rem .2rem #000;
+    }
+}
+
+
+
+
+
+
+
 .guestbook {
    padding-top: 2rem;
    position: relative;
@ -9,11 +79,6 @@

 .guestbook .messages {
    margin: 1rem 0;
-    max-width: 100vw;
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-    scrollbar-width: none;
    text-align: center;
 }

@ -26,7 +91,7 @@
    margin: 0 .3rem;
    min-height: 14rem;
    min-width: 20rem;
-    max-width: 25rem;
+    max-width: 24rem;
    /* max-width: 700px; */
    border: solid .2rem var(--theme-color);
    border-radius: 1rem;
--- a/styles/styles.css
+++ b/styles/styles.css
@ -84,7 +84,7 @@ a {
 .menu {
   position: fixed;
   top: 0;
-   left: .2rem;
+   left: .3rem;
   bottom: 0;
   width: 10rem;
   display: flex;
--- a/thoughts.html
+++ b/thoughts.html
@ -3,7 +3,7 @@
 <head>
   <meta name="viewport" content="width=device-width">
   <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
-   <link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
+   <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
   <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&amp;display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles/styles.css">
@ -40,31 +40,7 @@
   <div w3-include-html="partials/menu.html"></div>
 </body>
 <script src="scripts/include-html.js"></script>
-<script>
-let url = document.location.href;
-
-function copy(txt) {
-   let link = `${url}#${txt}`;
-   navigator.clipboard.writeText(link).then(() => {
-       console.log("Copied link!");
-   }, () => { console.log("Error copying link."); });
-   let alert = document.createElement("DIV");
-   alert.textContent = "Copied Link to Heading!";
-   alert.classList.add("tempAlert");
-   document.body.appendChild(alert);
-   setTimeout(() => {
-      alert.style.opacity = "1";
-      alert.style.bottom = ".5rem";
-   }, 200);
-   setTimeout(() => {
-      alert.style.opacity = "0";
-      alert.style.bottom = "-10rem";
-   }, 4200);
-   setTimeout(() => {
-      alert.remove();
-   }, 4400);
-
-}
-</script>
+<script src="scripts/script.js"></script>
+<script src="scripts/copypopup.js"></script>
 <script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
 </html>
Author	SHA1	Message	Date
Hamza Nasher-Alneam	ebb8568ca1	Save theme color across pages	2025-05-05 18:15:42 -04:00
Hamza Nasher-Alneam	9c0a834c71	Character limit on guestbook entries, guestbook takes full space, menu links can be clicked anywhere	2025-05-05 15:09:15 -04:00