diff --git a/frontend/public/assets/images/badges/mine/limepotxyz.gif b/frontend/public/assets/images/badges/mine/nelleobserver-purple.gif
similarity index 100%
rename from frontend/public/assets/images/badges/mine/limepotxyz.gif
rename to frontend/public/assets/images/badges/mine/nelleobserver-purple.gif
diff --git a/frontend/public/scripts/main.js b/frontend/public/scripts/main.js
index 39555e8..561015e 100644
--- a/frontend/public/scripts/main.js
+++ b/frontend/public/scripts/main.js
@@ -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;
}
}
diff --git a/frontend/src/components/footer/mybuttons.astro b/frontend/src/components/footer/mybuttons.astro
index 97ca586..76fb0e5 100644
--- a/frontend/src/components/footer/mybuttons.astro
+++ b/frontend/src/components/footer/mybuttons.astro
@@ -1,9 +1,10 @@
buttons i created
+ 
