better widgets

frontend/TODO.md

@@ -1,7 +1,5 @@
 # TODO
 
 - redo the footer to look nicer
-  - add elkes scaleway button
   - make site button lead to a blog page or something that shows the different themes of the button and an explanation
-- redo the widget container to look nicer
-- redo the about container to look nicer
+  - purple theme

frontend/src/components/footer/other-buttons.astro

@@ -14,6 +14,7 @@
     <iframe id="incrementButton" src="//incr.easrng.net/badge?key=nelle" style="background: url(//incr.easrng.net/bg.gif); border: 0; display: none;" title="increment badge" width="88" height="31" loading="lazy"></iframe>
     <a href="https://archlinux.org/"><img class="badge" width="88" height="31" src="/assets/images/badges/archlinux.gif" alt="Archlinux badge" loading="lazy"/></a>
     <a href="https://godotengine.org/"><img class="badge" width="88" height="31" src="/assets/images/badges/godot.png" alt="Godot game engine" loading="lazy"></a>
+    <img class="badge" width="88" height="31" src="/assets/images/badges/friends/better-uptime-than-scaleway-dark.png" alt="background is black with red bars showing downtime, text above it says 'better uptime than scaleway' with black borders and why text, gray bars on top and bottom" loading="lazy"/>
 <!-- Flags -->
     <a href="https://new.lgbtqia.wiki/wiki/LGBT"><img class="badge" width="88" height="31" src="/assets/images/badges/rainbow_bev.gif" alt="Rainbow" loading="lazy"/></a>
     <a href="https://new.lgbtqia.wiki/wiki/Demigender#Subgenders"><img class="badge" width="88" height="31" src="/assets/images/badges/demigirl.png" alt="Demigirl flag" loading="lazy"></a>
@@ -22,5 +23,4 @@
     <a href="https://new.lgbtqia.wiki/wiki/Transgender"><img class="badge" width="88" height="31" src="/assets/images/badges/trans.png" alt="Trans flag" loading="lazy"></a>
 <!-- placehold -->
     <img class="badge" src="/assets/images/badges/mine/missing-texture.png" alt="magenta and black checker pattern" loading="lazy">
-    <img class="badge" src="/assets/images/badges/mine/missing-texture.png" alt="magenta and black checker pattern" loading="lazy">
 </div>

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

@@ -2,7 +2,6 @@
 import LastFM from "./widgets/lastfm.astro";
 import NTFY from "./widgets/ntfy.astro";
 ---
-
 <section class="content center" id="silly-widgets" >
   <h2>silly widgets <a href="#silly-widgets"><i class="nf nf-oct-link"></i></a></h2>
   <LastFM />

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

@@ -1,6 +1,7 @@
 <div
   id="lastfm-widget"
   style="display: none;">
+  <h4>lastfm scrobbling</h4>
   <div id="widget">
     <a href="https://www.last.fm/user/LimePotato"
       ><span style="color: var(--alt-accent-600);"
@@ -19,5 +20,4 @@
   </div>
   <br />
   <hr />
-  <br />
 </div>

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

@@ -1,29 +1,27 @@
 <div class="ntfy-box">
-  <h3>ntfy box</h3>
+  <h4 style="margin-bottom: -10px;">ntfy box</h4>
   <!-- DISCLAIMER/INFO -->
-    <h4 style="margin-bottom: 0px;">send me a notification! type words and press send</h4>
-    <p>music recommendations, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</p>
-    <small style=" color: rgb(252, 76, 76);">
-      DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
-    </small>
+    <p style="margin-bottom: 0px;">send me a notification! type words and press send</p>
+  <p style="font-size: smaller; margin-top: -1px; margin-bottom: -1px;">please click hide more bellow for rules, and instructions</p>
     <div id="ntfyWidgetContainer" style="display: none;">
     <br>
-    <br>
   <!-- TEXT AREAS -->
-    <div>
+      <div style="display: flex; flex-wrap: nowrap; justify-content: center; margin-left: -42px;">
+    <div style="width: 69%">
     <textarea id="ntfy-title" placeholder="title: Title" rows=1 style="resize: none; display: none;"></textarea>
     <textarea id="ntfy-message" placeholder="message: message" rows=2></textarea>
     <textarea id="ntfy-attach" placeholder="attachment: https://http.cat/images/100.jpg" rows=1 style="resize: none ;display: none;"></textarea>
     <textarea id="ntfy-click" placeholder="click: https://www.youtube.com/watch?v=dQw4w9WgXcQ" rows=1 style="resize: none; display: none;"></textarea>
   </div>
+
   <button
   class="custom-btn btn-1"
-  style="width: 42%; margin-top: 2%"
+  style="width: 15%; margin-top: 3px; margin-left: -30px;"
   onclick="ntfyClick()"
   id="ntfy-button">
   <span>Send</span>
   </button>
-  <br>
+  </div>
     <!-- OPTIONS BOXES -->
     <fieldset class="ntfyOpts">
         <div>
@@ -49,10 +47,13 @@
   <!-- DISCLAIMER/INFO -->
 
   <div id="ntfy-info" style="display: none;">
+    <p style="font-size: smaller; margin-bottom: -1px;">music recommendations, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</p>
+    <small style="font-size: smaller; color: rgb(252, 76, 76);">
+      DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
+    </small>
+    <br>
   <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/pushy</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>