Files
frontend/settings.html
2025-10-26 10:27:36 -04:00

230 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>
<meta property="og:title" content="Selenite" />
<meta property="description" content="Selenite is the best unblocked games site. With over 400 games and an account system, no other websites come close to Selenite." />
<meta name="keywords" content="proxy, web proxy, unblock websites, unblock chromebook, free web proxy, proxy list, proxy sites, un block chromebook, online proxy, proxy server, proxysite, proxy youtube, bypass securly, bypass iboss, bypass lightspeed filter, chromebooks, unblock youtube, youtube proxy, unblocked youtube, youtube unblocked, unblock games, selenite, unblocked games, free games">
<meta content="/favicon.png" property="og:image" />
<meta content="#c77dff" data-react-helmet="true" name="theme-color" />
<meta name="googlebot" content="index, follow, snippet" />
<link rel="canonical" href="https://selenite.cc/" />
<meta property="og:description" content="Selenite is the best unblocked games site. With over 400 games and an account system, no other websites come close to Selenite." />
<meta property="og:title" content="Selenite">
<meta property="og:type" content="website">
<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 async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
<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() {
// grab localstorage
// grab cookies
// json.stringify
// base64
alert("not completed");
}
function uploadData() {
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") {
// prompt file upload
// read file
// atob
// set cookies
// set localstorage
alert("not completed");
}
}
</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>
<p>not implemented</p>
<button id="downloadData">download</button>
<button id="uploadData">upload</button>
<button onclick="wipeData()">wipe (erases all game data)</button>
</section>
</sections>
</body>
</html>