you can change colorrrsrsss
This commit is contained in:
parent
2d1a4d2037
commit
4eecf24529
2 changed files with 19 additions and 27 deletions
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Add table
Reference in a new issue