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

purple theme

Browse source
This commit is contained in:
nelle 2025-01-21 02:37:12 -07:00
parent 539ba59d29
commit 0e5391103b
3 changed files with 111 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
frontend/public/assets/images/badges/mine/limepotxyz.gif → frontend/public/assets/images/badges/mine/nelleobserver-purple.gif
View file

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

@ -1,8 +1,12 @@
const badgeGray = document.getElementById("badgeGray");
const badgeGreen = document.getElementById("badgeGreen");
const badgeOrange = document.getElementById("badgeOrange");
const badgePurple = document.getElementById("badgePurple");
const colorBool = Math.random() < 0.5;
// 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
@ -195,9 +199,13 @@ function checkThemeStorage() {
if (sessionStorage.getItem("themeOrange")) {
setOrange();
}
if (sessionStorage.getItem("themePurple")) {
setPurple();
}
if (
!sessionStorage.getItem("themeOrange") &&
!sessionStorage.getItem("themeGreen")
!sessionStorage.getItem("themeGreen") &&
!sessionStorage.getItem("themePurple")
) {
getTheme();
}
@ -207,6 +215,7 @@ function setGreen() {
badgeGreen.style.display = "initial";
badgeOrange.style.display = "none";
badgeGray.style.display = "none";
badgePurple.style.display = "none";
styleTag.innerHTML = `
:root {
@ -311,6 +320,7 @@ function setOrange() {
badgeOrange.style.display = "initial";
badgeGreen.style.display = "none";
badgeGray.style.display = "none";
badgePurple.style.display = "none";
styleTag.innerHTML = `
:root {
@ -410,12 +420,102 @@ function setOrange() {
sessionStorage.setItem("themeOrange", 1);
}
function setPurple() {
badgeOrange.style.display = "none";
badgeGreen.style.display = "none";
badgeGray.style.display = "none";
badgePurple.style.display = "initial";
styleTag.innerHTML = `
:root {
--text: #cdd6f4;
--background: #1d1d2e;
--primary: #45475a;
--secondary: #181825;
--accent: #cba6f7;
--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: #eaeefa;
--text-100: #d5ddf6;
--text-200: #abbbed;
--text-300: #8298e3;
--text-400: #5876da;
--text-500: #2e54d1;
--text-600: #2543a7;
--text-700: #1c327d;
--text-800: #122254;
--text-900: #09112a;
--text-950: #050815;
--background-50: #efeff5;
--background-100: #e0e0eb;
--background-200: #c0c0d8;
--background-300: #a1a1c4;
--background-400: #8282b0;
--background-500: #62629d;
--background-600: #4f4f7d;
--background-700: #3b3b5e;
--background-800: #27273f;
--background-900: #14141f;
--background-950: #0a0a10;
--primary-50: #f1f1f4;
--primary-100: #e2e3e9;
--primary-200: #c5c7d3;
--primary-300: #a9abbc;
--primary-400: #8c8ea6;
--primary-500: #6f7290;
--primary-600: #595b73;
--primary-700: #434556;
--primary-800: #2c2e3a;
--primary-900: #16171d;
--primary-950: #0b0b0e;
--secondary-50: #f0f0f5;
--secondary-100: #e0e0eb;
--secondary-200: #c1c1d7;
--secondary-300: #a2a2c3;
--secondary-400: #8484ae;
--secondary-500: #65659a;
--secondary-600: #51517b;
--secondary-700: #3c3c5d;
--secondary-800: #28283e;
--secondary-900: #14141f;
--secondary-950: #0a0a0f;
--accent-50: #f1e8fd;
--accent-100: #e3d0fb;
--accent-200: #c8a1f7;
--accent-300: #ac72f3;
--accent-400: #9043ef;
--accent-500: #7514eb;
--accent-600: #5d10bc;
--accent-700: #460c8d;
--accent-800: #2f085e;
--accent-900: #17042f;
--accent-950: #0c0217;
}
`;
headTag.appendChild(styleTag);
sessionStorage.setItem("themePurple", 1);
}
function getTheme() {
if (colorBool) {
// if true: green
setGreen();
} else {
// if false: orange
setOrange();
switch(randomCol) {
case 1:
setGreen();
break;
case 2:
setOrange();
break;
case 3:
setPurple();
break;
}
}

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

@ -1,9 +1,10 @@
<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 amber)" loading="lazy"/></a>
<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 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>
<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">