notifier

public/css/classes.css

@@ -42,4 +42,37 @@
 .small-quote {
     font-size: smaller;
     color: #a6adc8;
+}
+
+.ntfy-send::before {
+    content: "[[";
+}
+
+.ntfy-send::after {
+    content: "]]";
+}
+
+.ntfy-box {
+    margin: 0 1ch;
+    padding: 1ch 2ch 2ch 2ch;
+    background: #ffffff13;
+    border-radius: 10px;
+}
+
+input,
+select {
+    width: 50%;
+    appearance: none;
+    outline: none;
+    font-family: inherit;
+    background: transparent;
+    color: inherit;
+    border-bottom: 1px solid currentColor;
+    -webkit-box-shadow: 0 0 20px #f5a97f;
+    -moz-box-shadow: 0 0 20px #f5a97f;
+    box-shadow: 0 0 20px #f5a97f;
+}
+
+select {
+    width: unset
 }

public/scripts/ntfy.js

@@ -0,0 +1,50 @@
+// both
+function send(message) {
+    let r = new XMLHttpRequest()
+    r.open("POST", "https://ntfy.ouroboros.group/beep", true)
+    r.setRequestHeader("Content-Type", "text/plain")
+    r.send(message)
+  }
+  // send notification
+  let ntfyInput = document.getElementById("ntfy-input")
+  function sendNotification() {
+    if (ntfyInput.value.length <= 0) return
+    send(ntfyInput.value)
+    ntfyInput.value = ""
+  }
+  ntfyInput.addEventListener("keyup", e => e.keyCode == 13 && send())
+  // send praise
+  let praiseSentence = document.getElementById("pp-sentence"),
+    praiseA = document.getElementById("pp-a"),
+    praiseAdj = document.getElementById("pp-adj"),
+    praiseNoun = document.getElementById("pp-noun"),
+    praiseAfter = document.getElementById("pp-after")
+  resetPraise()
+  praiseAdj.addEventListener("change", updatePraiseA)
+  praiseSentence.addEventListener("change", () => {
+    if (praiseSentence.selectedOptions[0].hasAttribute("data-suffix")) praiseAfter.innerText = praiseSentence.selectedOptions[0].attributes["data-suffix"].value
+    else praiseAfter.innerText = ""
+    updatePraiseA()
+  })
+  function sendPraise() {
+    if (praiseAdj.value == "0" || praiseNoun.value == "0") return
+    text = praiseSentence.selectedOptions[0].innerText
+    if (text) text += " " + praiseA.innerText + " "
+    text += praiseAdj.selectedOptions[0].innerText + " " + praiseNoun.selectedOptions[0].innerText
+    if (praiseAfter.innerText) text += praiseSentence.selectedOptions[0].attributes["data-suffix"].value
+    send(text)
+    resetPraise()
+  }
+  // praise helpers
+  function resetPraise() {
+    praiseSentence.value = "0"
+    praiseA.innerText = ""
+    praiseAdj.value = "0"
+    praiseNoun.value = "0"
+    praiseAfter.innerText = ""
+  }
+  function updatePraiseA() {
+    if (praiseSentence.value == "0") praiseA.innerText = ""
+    else if (praiseAdj.selectedOptions[0].hasAttribute("data-mod")) praiseA.innerText = "an"
+    else praiseA.innerText = "a"
+  }

src/layouts/Layout.astro

@@ -14,5 +14,6 @@ import Footer from "../components/Footer.astro";
         <slot />
     <Footer />
     <script type='text/javascript' src='/scripts/limepot.js'></script>
+    <script type='text/javascript' src='/scripts/ntfy.js'></script>
   </body>
 </html>

src/pages/index.astro

@@ -65,5 +65,76 @@ import Layout from "../layouts/Layout.astro";
       <p><a href="https://ouroboros.gay/@limepot">==> The Fediverse</a><a href="https://jointhefediverse.net/"><span style="color: #fab387;">*</span></a></p>
       <p><a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA">==> Youtube</a></p>
     </div>
+    <div class="content">
+      <div class="ntfy-box">
+        <p>send me a notification! put word and press send</p>
+        <input id="ntfy-input"> <a class="ntfy-send nob4" href="javascript:sendNotification()">send</a>
+      </div>
+      <!-- 
+      <p></p>
+      <div class="ntfy-box">
+        ...or instead, please praise me!! :3<br>
+      
+        <select id="pp-sentence">
+          <option value="0"></option>
+          <option value="1" data-suffix="?">who's</option>
+          <option value="2" data-suffix="!">what</option>
+          <option value="3" data-suffix=" you are">everyone can see what</option>
+          <option value="4" data-suffix=" don't you?">you love being</option>
+          <option value="5">nothing but</option>
+          <option value="6" data-suffix="!">such</option>
+          <option value="7" data-suffix=" like you...">the things i'd do to</option>
+          <option value="8" data-suffix=" you can be">show us what</option>
+          <option value="9">i think you'd make</option>
+        </select>
+        <span id="pp-a"></span>
+        <select id="pp-adj">
+          <option value="0">-</option>
+          <option value="1">good</option>
+          <option value="2">perfect</option>
+          <option value="3" data-mod="">amazing</option>
+          <option value="4">sweet</option>
+          <option value="5">precious</option>
+          <option value="6">wonderful</option>
+          <option value="7">charming</option>
+          <option value="8">lovely</option>
+          <option value="9">beautiful</option>
+          <option value="10">pretty</option>
+          <option value="11">soft</option>
+          <option value="12">comfy</option>
+          <option value="13">fluffy</option>
+          <option value="14">cuddly</option>
+          <option value="15">silly</option>
+          <option value="16">cute</option>
+          <option value="17">slutty</option>
+          <option value="18">needy</option>
+          <option value="19" data-mod="">obedient</option>
+          <option value="20">hopeless</option>
+          <option value="21" data-mod="">easy</option>
+          <option value="22">pathetic</option>
+          <option value="23">naughty</option>
+        </select>
+        <select id="pp-noun">
+          <option value="0">-</option>
+          <option value="1">girl</option>
+          <option value="2">pet</option>
+          <option value="3">mouse</option>
+          <option value="4">thing</option>
+          <option value="5">bot</option>
+          <option value="6">doll</option>
+          <option value="7">drone</option>
+          <option value="8">toy</option>
+          <option value="9">princess</option>
+          <option value="10">rat</option>
+          <option value="11">kitty</option>
+          <option value="12">puppy</option>
+          <option value="13">bunny</option>
+          <option value="14">slut</option>
+        </select>
+        <span id="pp-after"></span>
+        <a class="ntfy-send nob4" href="javascript:sendPraise()">send</a>
+      </div>
+      -->
+    </div>
   </main>
 </Layout>

src/pages/site-info.astro

@@ -12,6 +12,7 @@ import Layout from "../layouts/Layout.astro";
                 <li><s>Uh, God And My Country</s></li>
                 <li>All the cool creatures in my <b>Friendly Buttons</b> section</li>
                 <li>Last.FM Presence Widget powered by<a href="https://github.com/biancarosa/lastfm-last-played" target="_blank"> @biancarosa/lastfm-last-played</a></li>
+                <li>The <a href="https://git.zvava.org/zvava/zvava.org/src/branch/master/src/templates/misc/notify-me.html">notification sender</a> on main page by <a href="https://zvava.org/">Sophie/Zvava</a>, and adapted to work with this site</li>
             </ul>
             <hr>
             <h2 class="subtitle">Privacy & Security</h2>