frontend/public/scripts/main.js

@@ -75,3 +75,39 @@ async function beepClick() {
   beepButton.innerHTML = "<span>sleeping...</span>";
     sendMeow(beepEndpoint);
 }
+
+
+// Show/Hide Info Boxes
+const posterInfoButton = document.getElementById("poster-info-button");
+const posterInfo = document.getElementById("poster-info");
+let isPosterInfoHidden = true
+
+const ntfyInfoButton = document.getElementById("ntfy-info-button");
+const ntfyInfo = document.getElementById("ntfy-info");
+let isNtfyInfoHidden = true
+
+function showPosterInfo() {
+  if (isPosterInfoHidden) {
+    posterInfo.style.display = "initial";
+    posterInfoButton.innerHTML = "[hide more info]"
+    isPosterInfoHidden = false;
+  }
+  else {
+    posterInfo.style.display = "none";
+    posterInfoButton.innerHTML = "[show more info]"
+    isPosterInfoHidden = true;
+  }
+}
+
+function showNtfyInfo() {
+  if (isNtfyInfoHidden) {
+    ntfyInfo.style.display = "initial";
+    ntfyInfoButton.innerHTML = "[hide more info]"
+    isNtfyInfoHidden = false;
+  }
+  else {
+    ntfyInfo.style.display = "none";
+    ntfyInfoButton.innerHTML = "[show more info]"
+    isNtfyInfoHidden = true;
+  }
+}

frontend/src/components/main-page/widgets/meow.astro

@@ -1,22 +1,30 @@
 <div class="funny-meow">
     <br>
-    <small>press the buttons bellow to make me meow/beep on the fediverse, 
+    <hr>
-        there is a global timeout of 33 minutes, and a separate timer for each button. if it says its sleeping, come back and try again later!
+    <h3>meow/beep </h3>
-        <br>you can POST to <span class="glitch">https://nelle.observer/api/meow</span> or <span class="glitch">https://nelle.observer/api/beep</span>
+    <p>press the buttons bellow to make me meow/beep on the fediverse, 
-        respectively, and GET at the same endpoints to check the status of the timer.</small>
+        there is a global timeout of 33 minutes, and a separate timer for each button. if it says its sleeping, come back and try again later!</p>
-        <br>
+
         <button
         class="custom-btn btn-1"
-        style="width: 25%; margin-top: 4%; margin-bottom: 4%;"
+        style="width: 25%; margin-top: 4%; margin-bottom: 2%;"
         onclick="meowClick()"
         id="meow-button">
         <span>meow</span>
         </button>
+
         <button
         class="custom-btn btn-1"
-        style="width: 25%; margin-top: 4%; margin-bottom: 4%;"
+        style="width: 25%; margin-top: 4%; margin-bottom: 2%;"
         onclick="beepClick()"
         id="beep-button">
         <span>beep</span>
         </button>
+
+        <div id="poster-info" style="display: none;">
+            <br>you can POST to <span class="glitch">https://nelle.observer/api/meow</span> or <span class="glitch">https://nelle.observer/api/beep</span>
+            respectively, and GET at the same endpoints to check the status of the timer.</small>
+        </div>
+        <br>
+        <a onclick="showPosterInfo()"><span id="poster-info-button" class="glitch" style="cursor: pointer;">[show more info]</span></a>
 </div>

frontend/src/components/main-page/widgets/ntfy.astro

@@ -1,9 +1,9 @@
 <div class="ntfy-box">
+  <h3>ntfy box</h3>
   <!-- DISCLAIMER/INFO -->
     <h4 style="margin-bottom: 0px;">send me a notification! type words and press send</h4>
-    <small style="font-size: 15px;">music recs, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</small>
+    <p>music recommendations, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</p>
-    <br>
+    <small style=" color: rgb(252, 76, 76);">
-    <small style="font-size: 12px; color: rgb(252, 76, 76);">
       DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
     </small>
     <div id="ntfyWidgetContainer" style="display: none;">
@@ -47,5 +47,12 @@
   <br>
   <br>
   <!-- DISCLAIMER/INFO -->
-  <small>if it doesnt seem to be working/you cant see the field, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
+
+  <div id="ntfy-info" style="display: none;">
+  <small>if it doesnt seem to be working/you cant see the field, or you have javascript disabled, 
+    <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
     </div>
+  </div>
+
+  <br>
+  <a onclick="showNtfyInfo()"><span id="ntfy-info-button" class="glitch" style="margin-bottom: 2%; cursor: pointer;">[show more info]</span></a>