you can change colorrrsrsss

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

View file

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

View file

@ -1,10 +1,7 @@
<p>buttons i created</p> <p>buttons i created</p>
<div style="display: flex; flex-wrap: nowrap; justify-content: center;"> <div style="display: flex; flex-wrap: nowrap; justify-content: center;">
<div class="badgeContainer"> <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> <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 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>
<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 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">
<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"> <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">