Files
frontend/settings.html
2025-11-14 21:53:45 -05:00

246 lines
10 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
<!-- initialize externals -->
<!-- chroma.js -->
<script src="https://cdn.jsdelivr.net/npm/chroma-js@latest/chroma.min.js"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Selenite",
"alternateName": "selenite.cc",
"url": "https://selenite.cc",
"logo": "https://selenite.cc/favicon.png",
"sameAs": [
"https://github.com/selenite-cc",
"https://youtube.com/@selenitecc",
"https://tiktok.com/@selenitecc",
"https://selenite.cc",
]
}
</script>
<!-- initialize my stuff -->
<script src="/js/all.min.js"></script>
<script src="/js/main.js"></script>
<!-- <script src="/js/widget.js"></script> -->
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/settings.css" />
<link rel="manifest" href="/manifest.json" />
<!-- seo + other things -->
<title>Selenite</title>
<link rel="icon" href="/favicon.ico" />
<script>
let cloaks = {
"powerschool": [
"Grades and Attendance", "https://www.powerschool.com/"
],
"canvas": [
"Dashboard", "https://usc.instructure.com/"
],
"google": [
"Google", "https://google.com/"
],
"drive": [
"My Drive - Google Drive", "https://drive.google.com"
],
"classroom": [
"Home", "https://google-classroom.en.softonic.com"
],
"ixl": [
"IXL | Dashboard", "https://www.ixl.com/favicon.ico"
],
"khan": [
"Dashboard | Khan Academy", "https://www.khanacademy.org/favicon.ico"
]
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelector(`option[value="${localStorage.getItem("selenite.theme") || ""}"]`).setAttribute("selected", "");
if(document.getElementById("themes").value == "custom") {
document.getElementById("colorPicker").style.display = "block";
document.getElementById("colorPicker").value = localStorage.getItem("selenite.customThemeMainColor");
} else {
document.getElementById("colorPicker").style.display = "none";
}
if(localStorage.getItem("selenite.fast-mode") == 'true') {
document.getElementById("fastMode").setAttribute("checked", "")
};
if(localStorage.getItem("selenite.super-fast-mode") == 'true') {
document.getElementById("superFastMode").setAttribute("checked", "")
};
document.getElementById("themes").addEventListener("input", (e)=>{
localStorage.setItem("selenite.theme", e.target.value);
document.body.setAttribute("theme", e.target.value);
if(e.target.value == "custom") {
document.getElementById("colorPicker").style.display = "block";
document.getElementById("colorPicker").value = localStorage.getItem("selenite.customThemeMainColor");
} else {
document.getElementById("colorPicker").style.display = "none";
document.body.removeAttribute("style");
}
});
document.getElementById("colorPicker").addEventListener("input", (e) => {
let generatedTheme = generatePallete(e.target.value);
localStorage.setItem("selenite.customTheme", JSON.stringify(generatedTheme));
localStorage.setItem("selenite.customThemeMainColor", e.target.value);
setTheme(generatedTheme);
})
document.getElementById("fastMode").addEventListener("click", (e) => {
localStorage.setItem("selenite.fast-mode", !(e.target.checked == false));
location.reload();
});
document.getElementById("superFastMode").addEventListener("click", (e) => {
localStorage.setItem("selenite.super-fast-mode", !(e.target.checked == false));
location.reload();
});
document.getElementById("submitCloak").addEventListener("click", (e) => {
if(document.getElementById("cloaks").value) {
localStorage.setItem("selenite.tab-cloak", JSON.stringify({
"name": cloaks[document.getElementById("cloaks").value][0],
"icon": cloaks[document.getElementById("cloaks").value][1]
}));
} else {
localStorage.setItem("selenite.tab-cloak", JSON.stringify({
"name": document.getElementById("cloakName").value || "",
"icon": document.getElementById("cloakIcon").value || ""
}));
}
});
document.getElementById("submitPanic").addEventListener("click", (e) => {
localStorage.setItem("selenite.panic-mode", JSON.stringify({
"key": document.getElementById("panicKey").value || "",
"url": document.getElementById("panicURL").value || ""
}));
})
function generatePallete(color) {
let theme = {};
let chromaColor = chroma(color);
theme["color-1"] = chromaColor.hex();
theme["color-2"] = chromaColor.darken(1).hex();
theme["color-3"] = chromaColor.darken(2).hex();
theme["color-4"] = chromaColor.darken(3).hex();
theme["bg-1"] = chromaColor.darken(1.5).hex();
theme["bg-2"] = chromaColor.darken(2.5).hex();
theme["text-color"] = "#fff"
return theme;
}
});
function wipeData() {
if(prompt("Wiping your data means you will lose all progress in every game, and every setting you have selected.\nAre you sure you would like to continue?\n\nType \"please wipe my data\" to continue.") == "please wipe my data") {
localStorage.clear();
document.cookie.split(";").forEach(e => {
document.cookie = e.split("=")[0] + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"
})
}
}
function downloadData() {
let storage = JSON.stringify(localStorage);
let cookies = document.cookie;
let data = btoa(JSON.stringify({localStorage: storage, cookies: cookies}));
let file = new Blob([data], {type: "text"});
let a = document.createElement("a");
a.href = URL.createObjectURL(file);
a.download = "selenite.dat";
a.click();
}
function uploadData() {
let input = document.createElement("input");
input.type = "file";
input.accept = "dat";
input.click();
input.addEventListener("change", e => {
if(prompt("Are you sure you want to upload data?\nThis may overwrite any previous data you had stored.\n\nType \"i am sure\" to continue.") == "i am sure") {
let fileReader = new FileReader();
fileReader.addEventListener("load", e => {
let data = JSON.parse(atob(e.target.result));
let local = JSON.parse(data["localStorage"]);
let cookies = data["cookies"];
document.cookie = cookies;
Object.keys(local).forEach(e => {
localStorage.setItem(e, local[e]);
})
});
fileReader.readAsText(e.target.files[0]);
}
})
}
async function deleteAllCaches() {
try {
const cacheNames = await caches.keys();
await Promise.all(
cacheNames.map(cacheName => {
return caches.delete(cacheName);
})
);
} catch {}
}
</script>
</head>
<body>
<h1 class="title">settings</h1>
<sections>
<section>
<h2>style</h2>
<p style="font-size:20px;margin:6px;">themes</p>
<select id="themes">
<option value="">selenite</option>
<option value="blackandwhite">black and white</option>
<option value="grass">grass</option>
<option value="evil">evil</option>
<option value="sky">sky</option>
<option value="custom">custom</option>
</select>
<input type="color" id="colorPicker" style="display: none">
<p style="font-size:20px;margin:6px;">toggles</p>
<div class="samerow"><input type="checkbox" id="fastMode"><label for="fastMode" title="disables particles, animated background, & other misc effects">fast mode</label></div>
<div class="samerow"><input type="checkbox" id="superFastMode"><label for="superFastMode" title="disables all blurs and transparency">super fast mode</label></div>
</section>
<section>
<h2>tab cloak</h2>
<p>website name</p>
<input type="text" id="cloakName">
<p>website icon</p>
<input type="text" id="cloakIcon">
<select id="cloaks">
<option value="">or select a preset</option>
<option value="powerschool">powerschool</option>
<option value="canvas">canvas</option>
<option value="google">google</option>
<option value="drive">google drive</option>
<option value="classroom">google classroom</option>
<option value="ixl">ixl</option>
<option value="khan">khan academy</option>
</select>
<button id="submitCloak">set tab cloak</button>
</section>
<section>
<h2>panic mode</h2>
<p title="the key you need to click to automatically exit selenite">key</p>
<input type="text" id="panicKey" maxlength="1">
<p title="the url itll direct you to">website</p>
<input type="text" id="panicURL">
<button id="submitPanic">set panic mode</button>
</section>
<section>
<h2>manage data</h2>
<button onclick="downloadData()">download</button>
<button onclick="uploadData()">upload</button>
<button onclick="wipeData()">wipe (erases all game data)</button>
<button onclick="deleteAllCaches()">wipe all cache</button>
</section>
</sections>
</body>
</html>