hide all javascript elements until javascript is loaded
This commit is contained in:
parent
719d60dc55
commit
b7b14f9521
8 changed files with 33 additions and 13 deletions
14
public/scripts/main.js
Normal file
14
public/scripts/main.js
Normal 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";
|
||||
}
|
|
@ -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://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>
|
||||
<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>
|
||||
<hr>
|
||||
every coin counts!
|
||||
|
|
|
@ -40,7 +40,7 @@ other buttons
|
|||
<!-- 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.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>
|
||||
<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>
|
||||
|
|
|
@ -6,8 +6,5 @@ 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></span></a></h2>
|
||||
<LastFM />
|
||||
<br>
|
||||
<hr />
|
||||
<br>
|
||||
<NTFY />
|
||||
</section>
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
<div id="lastfm-widget">
|
||||
<div
|
||||
id="lastfm-widget"
|
||||
style="display: none;">
|
||||
<div id="widget">
|
||||
<a href="https://www.last.fm/user/LimePotato"
|
||||
><span style="color: var(--alt-accent-600);"
|
||||
|
@ -15,4 +17,7 @@
|
|||
></span
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
</div>
|
||||
|
|
|
@ -6,13 +6,14 @@
|
|||
<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;">
|
||||
<br>
|
||||
<br>
|
||||
<!-- TEXT AREAS -->
|
||||
<div>
|
||||
<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-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
|
||||
|
@ -49,8 +50,9 @@
|
|||
<span>meow</span>
|
||||
</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<!-- 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>
|
|
@ -5,3 +5,7 @@
|
|||
<!-- <script is:inline src="/scripts/ntfy.js"></script>-->
|
||||
<script is:inline src="/scripts/lastfm.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>
|
|
@ -16,7 +16,7 @@ const { title } = Astro.props;
|
|||
<head>
|
||||
<Head title={title} />
|
||||
</head>
|
||||
<body onload="getSGAState(), redirect(), checkBoxes(), getPlaceholder()" id="body">
|
||||
<body onload="jsEnabled(), getSGAState(), redirect(), checkBoxes(), getPlaceholder()" id="body">
|
||||
<Header />
|
||||
<section class="content center">
|
||||
<h1 class="title">{title}</h1>
|
||||
|
@ -24,9 +24,7 @@ const { title } = Astro.props;
|
|||
<slot />
|
||||
<Footer />
|
||||
<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>-->
|
||||
<audio
|
||||
id="clickSound"
|
||||
|
|
Loading…
Reference in a new issue