nelle/nelle-observer
1
1
Fork 0
Code Pull requests Activity

you can change colorrrsrsss

Browse source
This commit is contained in:
nelle 2025-01-21 13:25:28 -07:00
parent 2d1a4d2037
commit 4eecf24529
2 changed files with 19 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
frontend/public/scripts/main.js
View file

@ -1,16 +1,16 @@
const badgeGray = document.getElementById("badgeGray");
const badgeGreen = document.getElementById("badgeGreen");
const badgeOrange = document.getElementById("badgeOrange");
const badgePurple = document.getElementById("badgePurple");
const siteBadge = document.getElementById("siteBadge");
// generate a number between 1 and 3, also generate a random bool (true/false), if the number is 3 AND false, purple
const maxCol = 3
const minCol = 1
const randomCol = Math.floor(Math.random() * (maxCol - minCol + 1)) + minCol;
const is_root = location.pathname === "/";
const badgeAmount = 20
function randomCol() {
return Math.floor(Math.random() * (maxCol - minCol + 1)) + minCol
}
// loads all the functions to be loaded on load, pretty simple, it loads shit on load.
function onLoad() {
jsEnabled();
@ -192,6 +192,13 @@ function getbadges() {
const headTag = document.getElementsByTagName("head")[0];
const styleTag = document.createElement("style");
function manualButtonChange() {
sessionStorage.removeItem("themeGreen")
sessionStorage.removeItem("themeOrange")
sessionStorage.removeItem("themePurple")
getTheme();
}
function checkThemeStorage() {
if (sessionStorage.getItem("themeGreen")) {
setGreen();
@ -202,20 +209,14 @@ function checkThemeStorage() {
if (sessionStorage.getItem("themePurple")) {
setPurple();
}
if (
!sessionStorage.getItem("themeOrange") &&
!sessionStorage.getItem("themeGreen") &&
!sessionStorage.getItem("themePurple")
) {
else {
randomCol();
getTheme();
}
}
function setGreen() {
badgeGreen.style.display = "initial";
badgeOrange.style.display = "none";
badgeGray.style.display = "none";
badgePurple.style.display = "none";
siteBadge.src="/assets/images/badges/mine/nelleobserver-green.gif";
styleTag.innerHTML = `
:root {
@ -317,10 +318,7 @@ function setGreen() {
}
function setOrange() {
badgeOrange.style.display = "initial";
badgeGreen.style.display = "none";
badgeGray.style.display = "none";
badgePurple.style.display = "none";
siteBadge.src="/assets/images/badges/mine/nelleobserver-orange.gif";
styleTag.innerHTML = `
:root {
@ -421,10 +419,7 @@ function setOrange() {
}
function setPurple() {
badgeOrange.style.display = "none";
badgeGreen.style.display = "none";
badgeGray.style.display = "none";
badgePurple.style.display = "initial";
siteBadge.src="/assets/images/badges/mine/nelleobserver-purple.gif";
styleTag.innerHTML = `
:root {
@ -525,7 +520,7 @@ function setPurple() {
}
function getTheme() {
switch(randomCol) {
switch(randomCol()) {
case 1:
setGreen();
break;

5
frontend/src/components/footer/mybuttons.astro
View file

@ -1,10 +1,7 @@
<p>buttons i created</p>
<div style="display: flex; flex-wrap: nowrap; justify-content: center;">
<div class="badgeContainer">
<a id="badgeGray" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-gray.gif" alt="animation of a bunch of twinkling stars (but grayscale)" loading="lazy"/></a>
<a id="badgeOrange" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-orange.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
<a id="badgeGreen" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-green.gif" alt="animation of a bunch of twinkling stars (but green)" loading="lazy"/></a>
<a id="badgePurple" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-purple.gif" alt="animation of a bunch of twinkling stars (but purple)" loading="lazy"/></a>
<img id="siteBadge" onclick="manualButtonChange()" class="badge" style="cursor: pointer;" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-gray.gif" alt="animation of a bunch of twinkling stars (but grayscale)" loading="lazy"/>
<a href="https://ouroboros.gay/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/ouroboros.gay.png" loading="lazy"></a>
<img class="badge" src="/assets/images/badges/mine/missing-texture.png" alt="magenta and black checker pattern" loading="lazy">
<img id="sgaButton" style="cursor: pointer; 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">