hide all javascript elements until javascript is loaded

This commit is contained in:
nelle 2024-09-08 14:00:09 -06:00
parent 719d60dc55
commit b7b14f9521
8 changed files with 33 additions and 13 deletions

14
public/scripts/main.js Normal file
View file

@ -0,0 +1,14 @@
// if javascript is enabled, this script will load, enabling all site elements that use javascript, by default these are all hidden.
function jsEnabled() {
// Get JS required element ids
const lastFmWidget = document.getElementById("lastfm-widget");
const ntfyWidgetContainer = document.getElementById("ntfyWidgetContainer");
const sgaButton = document.getElementById("sgaButton");
const incrementButton = document.getElementById("incrementButton");
// enable js required element ids
lastFmWidget.style.display = "initial";
ntfyWidgetContainer.style.display = "initial";
sgaButton.style.display = "initial";
incrementButton.style.display = "initial";
}

View file

@ -3,7 +3,7 @@ buttons i created
<a href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a> <a href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
<a href="https://limepot.xyz/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/limepotxyz.gif" alt="animation of a bunch of twinkling stars (but purple)" loading="lazy"/></a> <a href="https://limepot.xyz/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/limepotxyz.gif" alt="animation of a bunch of twinkling stars (but purple)" loading="lazy"/></a>
<a href="https://ouroboros.gay/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/ouroboros.gay.png" loading="lazy"></a> <a href="https://ouroboros.gay/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/ouroboros.gay.png" loading="lazy"></a>
<img width="88" height="31" style="cursor:pointer;" onclick="toggleTheme()" src="/assets/images/badges/mine/standard-galactic-alphabet.png" alt="animation of a bunch of twinkling stars" loading="lazy"/> <img id="sgaButton" style="display: none;" width="88" height="31" style="cursor:pointer;" onclick="toggleTheme()" src="/assets/images/badges/mine/standard-galactic-alphabet.png" alt="animation of a bunch of twinkling stars" loading="lazy"/>
</div> </div>
<hr> <hr>
every coin counts! every coin counts!

View file

@ -40,7 +40,7 @@ other buttons
<!-- Memes --> <!-- Memes -->
<a href="https://www.noaa.gov/"><img class="badge" width="88" height="31" src="/assets/images/badges/noaa.gif" alt="NOAA" loading="lazy"/></a> <a href="https://www.noaa.gov/"><img class="badge" width="88" height="31" src="/assets/images/badges/noaa.gif" alt="NOAA" loading="lazy"/></a>
<a href="https://www.java.com/"><img class="badge" width="88" height="31" src="/assets/images/badges/get_java.gif" alt="Get Java Now" loading="lazy"/></a> <a href="https://www.java.com/"><img class="badge" width="88" height="31" src="/assets/images/badges/get_java.gif" alt="Get Java Now" loading="lazy"/></a>
<iframe src="//incr.easrng.net/badge?key=nelle" style="background: url(//incr.easrng.net/bg.gif); border: 0;" title="increment badge" width="88" height="31" loading="lazy"></iframe> <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>
<img class="badge" width="88" height="31" src="/assets/images/badges/win7startup.gif" alt="Windows 7 Startup" loading="lazy"></img> <img class="badge" width="88" height="31" src="/assets/images/badges/win7startup.gif" alt="Windows 7 Startup" loading="lazy"></img>
<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://archlinux.org/"><img class="badge" width="88" height="31" src="/assets/images/badges/archlinux.gif" alt="Archlinux badge" loading="lazy"/></a>
<a href="https://github.com/yt-dlp/yt-dlp"><img class="badge" width="88" height="31" src="/assets/images/badges/youtube-dl.gif" alt="youtube-dl badge" loading="lazy"></a> <a href="https://github.com/yt-dlp/yt-dlp"><img class="badge" width="88" height="31" src="/assets/images/badges/youtube-dl.gif" alt="youtube-dl badge" loading="lazy"></a>

View file

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

View file

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

View file

@ -6,13 +6,14 @@
<small style="font-size: 12px; 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. DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
</small> </small>
<div id="ntfyWidgetContainer" style="display: none;">
<br> <br>
<br> <br>
<!-- TEXT AREAS --> <!-- TEXT AREAS -->
<div> <div>
<textarea id="ntfy-title" placeholder="title: Title" rows=1 style="resize: none; display: none;"></textarea> <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-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-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> <textarea id="ntfy-click" placeholder="click: https://www.youtube.com/watch?v=dQw4w9WgXcQ" rows=1 style="resize: none; display: none;"></textarea>
</div> </div>
<button <button
@ -49,8 +50,9 @@
<span>meow</span> <span>meow</span>
</button> </button>
</fieldset> </fieldset>
</div>
<br> <br>
<br> <br>
<!-- DISCLAIMER/INFO --> <!-- DISCLAIMER/INFO -->
<small>if it doesnt seem to be working, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small> <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>

View file

@ -4,4 +4,8 @@
<!-- unoptimized --> <!-- unoptimized -->
<!-- <script is:inline src="/scripts/ntfy.js"></script>--> <!-- <script is:inline src="/scripts/ntfy.js"></script>-->
<script is:inline src="/scripts/lastfm.js"></script> <script is:inline src="/scripts/lastfm.js"></script>
<script is:inline src="/scripts/sound.js"></script> <script is:inline src="/scripts/sound.js"></script>
<script is:inline src="/scripts/fuckchrome.js"></script>
<script is:inline src="/scripts/sga.js"></script>
<script is:inline src="/scripts/ntfy.js"></script>
<script is:inline src="/scripts/main.js"></script>

View file

@ -16,7 +16,7 @@ const { title } = Astro.props;
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body onload="getSGAState(), redirect(), checkBoxes(), getPlaceholder()" id="body"> <body onload="jsEnabled(), getSGAState(), redirect(), checkBoxes(), getPlaceholder()" id="body">
<Header /> <Header />
<section class="content center"> <section class="content center">
<h1 class="title">{title}</h1> <h1 class="title">{title}</h1>
@ -24,9 +24,7 @@ const { title } = Astro.props;
<slot /> <slot />
<Footer /> <Footer />
<NormalScripts /> <NormalScripts />
<script is:inline src="/scripts/fuckchrome.js"></script>
<script is:inline src="/scripts/sga.js"></script>
<script is:inline src="/scripts/ntfy.js"></script>
<!-- <script is:inline src="/scripts/sn.js"></script>--> <!-- <script is:inline src="/scripts/sn.js"></script>-->
<audio <audio
id="clickSound" id="clickSound"