nelle-observer/frontend/public/scripts/main.js

const badgeGray = document.getElementById("badgeGray");
const badgeGreen = document.getElementById("badgeGreen");
const badgeOrange = document.getElementById("badgeOrange");

const colorBool = Math.random() < 0.5;
const is_root = location.pathname === "/";

const badgeAmount = 16

// loads all the functions to be loaded on load, pretty simple, it loads shit on load.
function onLoad() {
  jsEnabled();
  checkThemeStorage();
  getSGAState();
  redirect();
  checkBoxes();
  getPlaceholder();
}

// if javascript is enabled, this script will load, enabling all site elements that use javascript, by default these are all hidden.
function jsEnabled() {
  // if on main page, activate widgets
  if (is_root) {
    const lastFmWidget = document.getElementById("lastfm-widget");
    const ntfyWidgetContainer = document.getElementById("ntfyWidgetContainer");


    lastFmWidget.style.display = "initial";
    ntfyWidgetContainer.style.display = "initial";
  }
  // Get JS required element ids
  const sgaButton = document.getElementById("sgaButton");
  const sgaButtonText = document.getElementById("sgaButtonText");
  const incrementButton = document.getElementById("incrementButton");

  // enable js required element ids
  sgaButton.style.display = "initial";
  sgaButtonText.style.visibility = "initial";
  incrementButton.style.display = "initial";


  // badge
  for (var badgeNum = 0; badgeNum < badgeAmount; badgeNum++) {
    document.getElementById('badge' + (badgeNum + 1)).style.display = "initial";
  }
  for (var badgeDefaultNum = 0; badgeDefaultNum < badgeAmount; badgeDefaultNum++) {
    document.getElementById('badgeDefault' + (badgeDefaultNum + 1)).style.display = "none";
  }

  getbadges()
}

// LastFM stuff
const user = "limepotato";
const url = `https://lastfm-last-played.biancarosa.com.br/${user}/latest-song`;
const song = document.querySelector("#song");
fetch(url)
  .then((response) => response.json())
  .then((json) => {
    song.innerHTML = `${json.track.name} - ${json.track.artist["#text"]}`;
  });

// Chrome Redirect
function redirect() {
  const chromium = /Chrome|Chromium|OPR|Opera|Edge|UC|QQ/.test(
    navigator.userAgent,
  );

  if (navigator.brave) {
    window.location.replace("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
  }
  if (!navigator.brave) {
    if (!localStorage.getItem("disclaimerAccepted")) {
      if (chromium && screen.width >= 699) {
        window.location.replace("/bsod");
      }
      if (chromium && screen.width <= 699) {
        window.location.replace("/mobile-warn");
      }
    }
  }
}

// Show/Hide Info Boxes
const posterInfoButton = document.getElementById("poster-info-button");
const posterInfo = document.getElementById("poster-info");
let isPosterInfoHidden = true;

const ntfyInfoButton = document.getElementById("ntfy-info-button");
const ntfyInfo = document.getElementById("ntfy-info");
let isNtfyInfoHidden = true;

function showPosterInfo() {
  if (isPosterInfoHidden) {
    posterInfo.style.display = "initial";
    posterInfoButton.innerHTML = "[hide more info]";
    isPosterInfoHidden = false;
  } else {
    posterInfo.style.display = "none";
    posterInfoButton.innerHTML = "[show more info]";
    isPosterInfoHidden = true;
  }
}

function showNtfyInfo() {
  if (isNtfyInfoHidden) {
    ntfyInfo.style.display = "initial";
    ntfyInfoButton.innerHTML = "[hide more info]";
    isNtfyInfoHidden = false;
  } else {
    ntfyInfo.style.display = "none";
    ntfyInfoButton.innerHTML = "[show more info]";
    isNtfyInfoHidden = true;
  }
}
//// badges

const elke = '<a href="https://elke.cafe/"><img class="badge" src="/assets/images/badges/friends/elke.cafe.gif" alt="dark static background, on the left side, a triquetra, in yellow/orange text \'elke.cafe\'" loading="lazy"></a>'
const tomo = '<a href="https://azumanga.gay/"><img class="badge" src="/assets/images/badges/friends/kaitbutton.png" alt="kait" loading="lazy"></a>'
const lily = '<a href="https://lilysthings.org/"><img class="badge" src="/assets/images/badges/friends/lilysthings.png" alt="the word \'lily!!\' next to a microwave" loading="lazy"></a>'
const eris = '<a href="https://eris.meows.gay/"><img class="badge" src="/assets/images/badges/friends/eris.png" alt="purple background, with pink text that reads \'eris\' and a cat" loading="lazy"></a>'
const zvava = '<a href="https://zvava.org/"><img class="badge" src="/assets/images/badges/friends/zvava.org.png" alt="black background, with a slanted dark purple grid, and a purple outline, pink text saying \'zvava.org\'" loading="lazy"></a>'
const mira = '<a href="https://csillagpor.net"><img class="badge" src="/assets/images/badges/friends/mira-button.png" alt="miras button\'" loading="lazy"></a>'
const tempest = '<a href="https://tempest.dev/"><img class="badge" src="/assets/images/badges/friends/tempest.dev.png" alt="badge for tempest.dev\'" loading="lazy"></a>'
const disarray = '<a href="https://disarray.sh/"><img class="badge" src="/assets/images/badges/friends/disarray.sh.png" alt="jade disarray site" loading="lazy"></a>'
const astrid = '<a href="https://astrid.tech/"><img class="badge" src="/assets/images/badges/friends/astrid.tech.png" alt="astrid dot tech" loading="lazy"></a>'
const nbsp = '<a href="https://enby.space/"><img class="badge" src="/assets/images/badges/friends/nbsp.gif" alt="ralsei clapping next to the text \'nbsp\'" loading="lazy"></a>'
const loveshock = '<a href="https://loveshock.xyz/"><img class="badge" src="/assets/images/badges/friends/loveshock.gif" alt="dark background, with a curved grid/web, with the text \'vist the jukebox at loveshock.xyz\'" loading="lazy"></a>'
const pancakes = '<a href="https://trypancakes.com/"><img class="badge" src="/assets/images/badges/friends/pancakes.png" alt="purple background, with a drawing of a cat, to the left of the cat is the underlined word \'pancakes\'" loading="lazy"></a>'
const sophari = '<a href="https://sophari.org/"><img class="badge" src="https://sophari.org/img/sophari.gif" alt="black background, with white borders and text, colorful snow-like substance falling down, text says \'Sophari.org\' " loading="lazy"></a>'
const constellatory = '<a href="https://constellatory.net/"><img class="badge" src="/assets/images/badges/friends/constellatory.net.png" alt="constellatory" loading="lazy"></a>'
const micro = '    <a id="badgeDefault12" href="https://micro.pages.gay/"><img class="badge" src="/assets/images/badges/friends/niko.png" alt="prototype from oneshot giviing a :3c expression with a darker background and Micro in purple 500 from tailwindcss on the right with dithering between the two sections" loading="lazy"></a>'
const lykrast = '    <a id="badgeDefault16" href="https://lykrast.com/"><img class="badge" src="https://lykrast.com/8831.png" alt="hand holding a black hole, with the text \'Lykrast\'" loading="lazy"></a>'
const starshines = '    <a id="badgeDefault17" href="https://starshines.gay/"><img class="badge" src="/assets/images/badges/friends/foxfoxfox.png" alt="image of a neofox in a box, next to it is some text reading off the screen \'fox fox fox fox fox\'" loading="lazy"></a>'

const badges = [
    elke,
    tomo,
    lily,
    eris,
    zvava,
    mira,
    tempest,
    disarray,
    astrid,
    constellatory,
    nbsp,
    micro,
    loveshock,
    pancakes,
    sophari,
    lykrast,
    starshines
];


function shuffle(array) {
  var currentIndex = array.length;
  var temporaryValue;
  var randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}


function getbadges() {
  var shuffledBadges = shuffle(badges);
  for (var badgeNum = 0; badgeNum < badgeAmount; badgeNum++) {
    document.getElementById('badge' + (badgeNum + 1)).innerHTML = shuffledBadges[badgeNum];
  }
}


//// color scheme change
const headTag = document.getElementsByTagName("head")[0];
const styleTag = document.createElement("style");

function checkThemeStorage() {
  if (sessionStorage.getItem("themeGreen")) {
    setGreen();
  }
  if (sessionStorage.getItem("themeOrange")) {
    setOrange();
  }
  if (
    !sessionStorage.getItem("themeOrange") &&
    !sessionStorage.getItem("themeGreen")
  ) {
    getTheme();
  }
}

function setGreen() {
  badgeGreen.style.display = "initial";
  badgeOrange.style.display = "none";
  badgeGray.style.display = "none";

  styleTag.innerHTML = `
:root {
    --text: #e7eeea;
    --background: #060d09;
    --primary: #9ae2b9;
    --secondary: #14904a;
    --accent: #47e48a;

    --content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900));
    --accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);

    --link: var(--accent-300);
    --visited: var(--accent-400);
    --hover: var(--accent-500);

    --text-50: #f0f4f2;
    --text-100: #e1eae5;
    --text-200: #c3d5cb;
    --text-300: #a5c0b1;
    --text-400: #88aa97;
    --text-500: #6a957d;
    --text-600: #557764;
    --text-700: #3f5a4b;
    --text-800: #2a3c32;
    --text-900: #151e19;
    --text-950: #0b0f0c;
    
    --background-50: #eef7f2;
    --background-100: #dcefe4;
    --background-200: #b9dfc9;
    --background-300: #96cfaf;
    --background-400: #73bf94;
    --background-500: #50af79;
    --background-600: #408c61;
    --background-700: #306949;
    --background-800: #204630;
    --background-900: #102318;
    --background-950: #08110c;
    
    --primary-50: #ebf9f1;
    --primary-100: #d7f4e4;
    --primary-200: #b0e8c8;
    --primary-300: #88ddad;
    --primary-400: #61d192;
    --primary-500: #39c676;
    --primary-600: #2e9e5f;
    --primary-700: #227747;
    --primary-800: #174f2f;
    --primary-900: #0b2818;
    --primary-950: #06140c;
    
    --secondary-50: #e9fcf1;
    --secondary-100: #d2f9e3;
    --secondary-200: #a5f3c7;
    --secondary-300: #78edab;
    --secondary-400: #4be78f;
    --secondary-500: #1fe073;
    --secondary-600: #18b45c;
    --secondary-700: #128745;
    --secondary-800: #0c5a2e;
    --secondary-900: #062d17;
    --secondary-950: #03160b;
    
    --accent-50: #e9fcf1;
    --accent-100: #d3f8e3;
    --accent-200: #a6f2c7;
    --accent-300: #7aebab;
    --accent-400: #4ee48f;
    --accent-500: #21de73;
    --accent-600: #1bb15c;
    --accent-700: #148545;
    --accent-800: #0d592e;
    --accent-900: #072c17;
    --accent-950: #03160b;

    --alt-accent: #fbb055;

    /* TODO: Alter This */
    --glitch-1: var(--alt-accent-400);
    --glitch-2: var(--alt-accent-500);
    --glitch-3: var(--alt-accent-600);

    --alt-accent-50: #fef3e7;
    --alt-accent-100: #fce8cf;
    --alt-accent-200: #fad19e;
    --alt-accent-300: #f7b96e;
    --alt-accent-400: #f5a23d;
    --alt-accent-500: #f28b0d;
    --alt-accent-600: #c26f0a;
    --alt-accent-700: #915308;
    --alt-accent-800: #613805;
    --alt-accent-900: #301c03;
    --alt-accent-950: #180e01;
}
`;
  headTag.appendChild(styleTag);
  sessionStorage.setItem("themeGreen", 1);
}

function setOrange() {
  badgeOrange.style.display = "initial";
  badgeGreen.style.display = "none";
  badgeGray.style.display = "none";

  styleTag.innerHTML = `
:root {
    --text: #f2ede7;
    --background: var(--background-950);
    --primary: #d7bfa2;
    --secondary: #76552e;
    --accent: #ffa941;

    --content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900));
    --accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);

    --link: var(--accent-300);
    --visited: var(--accent-400);
    --hover: var(--accent-500);

    --text-50: #f6f3ee;
    --text-100: #ede6de;
    --text-200: #dbcebd;
    --text-300: #c9b59c;
    --text-400: #b89c7a;
    --text-500: #a68359;
    --text-600: #856947;
    --text-700: #634f36;
    --text-800: #423524;
    --text-900: #211a12;
    --text-950: #110d09;

    --background-50: #f7f3ee;
    --background-100: #efe7dc;
    --background-200: #dfcfb9;
    --background-300: #cfb696;
    --background-400: #bf9e73;
    --background-500: #af8650;
    --background-600: #8c6b40;
    --background-700: #695030;
    --background-800: #463620;
    --background-900: #231b10;
    --background-950: #110d08;

    --primary-50: #f7f3ed;
    --primary-100: #f0e7db;
    --primary-200: #e0ceb8;
    --primary-300: #d1b694;
    --primary-400: #c29d70;
    --primary-500: #b3854d;
    --primary-600: #8f6a3d;
    --primary-700: #6b502e;
    --primary-800: #47351f;
    --primary-900: #241b0f;
    --primary-950: #120d08;

    --secondary-50: #f8f3ed;
    --secondary-100: #f1e7da;
    --secondary-200: #e2ceb6;
    --secondary-300: #d4b691;
    --secondary-400: #c69d6c;
    --secondary-500: #b88547;
    --secondary-600: #936a39;
    --secondary-700: #6e502b;
    --secondary-800: #49351d;
    --secondary-900: #251b0e;
    --secondary-950: #120d07;

    --accent-50: #fff4e5;
    --accent-100: #ffe8cc;
    --accent-200: #ffd199;
    --accent-300: #ffba66;
    --accent-400: #ffa333;
    --accent-500: #ff8c00;
    --accent-600: #cc7000;
    --accent-700: #995400;
    --accent-800: #663800;
    --accent-900: #331c00;
    --accent-950: #1a0e00;

    --alt-accent: #60fe35;

    --glitch-1: var(--alt-accent-600);
    --glitch-2: var(--alt-accent-700);
    --glitch-3: var(--alt-accent-800);

    --alt-accent-50: #ebffe6;
    --alt-accent-100: #d7ffcc;
    --alt-accent-200: #affe9a;
    --alt-accent-300: #88fe67;
    --alt-accent-400: #60fe34;
    --alt-accent-500: #38fe01;
    --alt-accent-600: #2dcb01;
    --alt-accent-700: #229801;
    --alt-accent-800: #166501;
    --alt-accent-900: #0b3300;
    --alt-accent-950: #061900;
}
`;
  headTag.appendChild(styleTag);
  sessionStorage.setItem("themeOrange", 1);
}

function getTheme() {
  if (colorBool) {
    // if true: green
    setGreen();
  } else {
    // if false: orange
    setOrange();
  }
}