better widgets

frontend/TODO.md

@@ -2,4 +2,4 @@
 
 - redo the footer to look nicer
   - 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
+  - purple theme

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>