themes + begin user pages

This commit is contained in:
sky
2025-07-08 00:25:44 -04:00
parent aa4bb69786
commit c8d3d0d50c
10 changed files with 233 additions and 831 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="sl-theme-dark" lang="en">
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->

View File

@ -13,7 +13,7 @@ html,
body {
/* height: 100vh; */
width: 100vw;
color: white;
color: var(--text-color);
background-color: black;
}
@ -69,6 +69,39 @@ p {
font-size: 16px;
margin: 2px;
}
a {
color: var(--text-color);
}
img {
image-rendering: pixelated;
}
select,
::picker(select) {
appearance: base-select;
}
select {
padding: 8px;
background-color: color-mix(in srgb, var(--color-4) 30%, #00000000 70%);
transition-duration: 0.25s;
}
select:hover,
select:focus {
background: color-mix(in srgb, var(--color-3) 60%, #00000000 40%);
}
::picker(select) {
border: none;
border-radius: 8px;
}
option {
display: flex;
background: color-mix(in srgb, var(--color-3) 30%, var(--color-4) 60%);
padding: 2px;
transition: 0.25s;
color: var(--text-color)
}
option:hover {
background: color-mix(in srgb, var(--color-2) 40%, var(--color-4) 50%);
}
option:focus {
background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%);
}

View File

@ -1,673 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap");
@keyframes loadInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
:root {
--inputbg: #3c096c;
--inputborder: #5a189a;
--uibg: #240046;
--textcolor: #fff;
--bg: #10002b;
--margin: 4rem;
}
.hiddenUpload {
display: none;
visibility: hidden;
}
* {
transition-duration: 0.5s;
outline: none;
border: none;
box-sizing: border-box;
align-content: center;
text-align: center;
font-family: "Prompt", sans-serif;
color: var(--textcolor);
}
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--textcolor);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
header,
footer {
background-color: var(--uibg);
display: flex;
border-bottom: none;
font-weight:700;
padding: 0.7rem;
width: 100%;
z-index: 1;
justify-content: center;
text-align: center;
text-decoration: none;
}
#time {
font-weight:100;
}
header {
top: 0;
border-radius: 0 0 20px 20px;
position: fixed;
box-shadow: 0 5px 10px var(--uibg);
}
footer.noscroll {
position: fixed;
overflow: hidden;
}
footer {
bottom: 0;
border-radius: 20px 20px 0 0;
box-shadow: 0 -5px 10px var(--uibg);
}
footer a,
footer a:visited,
header a,
header a:visited {
margin-right: 1.5rem;
margin-left: 1.5rem;
text-decoration: none;
}
footer a:hover,
header a:hover {
text-shadow: 2px 2px 6px var(--textcolor);
}
@media only screen and (max-width: 768px) {
header,
footer {
flex-direction: column;
align-items: center;
}
header {
border-radius: 0;
}
footer {
border-radius: 0;
}
* {
--margin: 12rem;
}
}
main {
animation: 1.25s ease-in-out 0s 1 loadInAnimation;
align-items: center;
flex-direction: column;
display: flex;
min-height: calc(100vh - (2 * 0.7rem));
gap: 0;
flex-wrap: wrap;
margin: auto;
margin-top: var(--margin);
width: 90%;
height:auto;
}
main#main.noscroll {
justify-content: center;
}
h1,
h2,
h3,
p,
a,
label {
margin: 0;
padding: 0;
text-shadow: var(--shadow);
}
.samerow {
display: flex;
justify-content: center;
gap: 0;
flex-wrap: wrap;
align-items: center;
justify-content: center
}
h1 {
font-size: 60px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 20px;
}
p,
a {
font-size: 16px;
}
button,
input#websubmit.submit,
input[type="submit"] {
cursor: pointer;
background-color: var(--inputbg);
border-color: var(--inputborder);
border-width: 2px;
border-radius: 10px;
border-style: solid;
padding: 7px;
margin-left: 20px;
margin-right: 20px;
margin: 10px;
}
button:hover,
input#websubmit.submit:hover,
input[type="submit"]:hover {
filter: brightness(80%);
transform: scale(1.07);
}
img {
width: 100%;
aspect-ratio: auto;
user-select: none;
filter: drop-shadow(var(--shadow));
image-rendering: pixelated;
}
.img-container a {
width: 100%;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 0;
flex-wrap: wrap;
width: 6%;
aspect-ratio: 1 / 1;
margin: 2%;
}
.game,
.suggest {
width: 15%;
border-radius: 20px;
display: inline-block;
background-color: var(--uibg);
margin: 15px;
cursor: pointer;
box-shadow: 0px 0px 5px 5px var(--uibg);
}
.game:hover,
.suggest:hover {
transform: scale(1.1);
filter: brightness(85%);
box-shadow: 0px 0px 5px 5px var(--uibg);
}
.game h1,
.suggest h1 {
font-size: 12px;
float: right;
margin-right: 10px;
margin-top: 3px;
margin-bottom: 3px;
}
.game img,
.suggest img {
width: 100%;
border-radius: 20px;
aspect-ratio: 1 / 1;
}
img.star {
float: left;
width: 10%;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
}
#noscroll {
overflow-y: hidden;
justify-content: center;
}
#games,
#pinned {
width: 100%;
justify-content: center;
}
input[type="text"],
input[type="password"] {
width: 50%;
background-color: var(--inputbg);
box-sizing: border-box;
font-size: 20px;
padding: 0.8% 0.8%;
text-align: center;
border-radius: 5px;
outline: none;
margin: 10px;
border: 2px solid var(--inputborder);
border-radius: 5px;
transition: opacity 0.25s ease-in-out;
opacity: 100%;
}
input[type="text"]:hover,
input[type="password"]:hover {
opacity: 80%;
}
::placeholder {
color: var(--textcolor);
opacity: 0.4; /* Firefox */
}
.bookmarkletdiv {
width: 30%;
background-color: var(--uibg);
box-shadow: 0px 0px 5px 5px var(--uibg);
padding: 5px;
margin: 15px;
border-radius: 10px;
display: inline-block;
}
.bookmarkletdiv a {
font-size: 30px;
}
form {
width: 100%;
}
.samerow.themebtns {
width: 70%;
}
select {
border-radius: 5px;
background-color: var(--inputbg);
border-color: var(--inputborder);
border-width: 5px;
border-radius: 10px;
border-style: solid;
padding: 0.5% 0.5%;
margin: 0.25%;
}
thumb.png .img-credits {
height: 40vh;
width: auto;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.555);
}
label {
font-size: 20px;
padding-left: 5px;
}
.avatar {
margin: 5px;
}
#bgimg {
width: 30vw;
font-size: 16px;
}
.usericon {
width: 24px;
height: 24px;
align-self: right;
/* display: none; */
}
#toast {
position: fixed;
top: 0;
right: 0;
margin: 10px;
padding: 10px;
background-color: var(--inputbg);
border-radius: 10px;
border-width: 10px;
border-color: var(--inputborder);
border-style: solid;
z-index: 10000;
text-align: center;
opacity: 0;
transition-duration: 1s;
max-width: 30%;
}
#toast h1 {
font-size: 20px;
text-align: center;
}
#toast p {
font-size: 16px;
text-align: center;
}
#discord {
position: fixed;
bottom: 10px;
right: 10px;
width: 56px;
height: 56px;
z-index: 199975;
border-radius: 100%;
background-image: url("/img/discord.svg");
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
border-width: 0;
}
div.profile.top {
width: 90%;
height: 20vh;
background-color: var(--uibg);
border-radius: 10px;
display: flex;
justify-content: left;
align-items: center;
box-shadow: 0px 0px 5px 5px var(--uibg);
}
div.profile.top.text {
position: relative;
display: flex;
flex-direction: column;
width: auto;
justify-self: center;
height: auto;
margin: 30px;
max-width: 40%;
}
div.profile.top.text.right {
margin-left: auto;
margin-right: 80px;
}
div.profile.top.text h1 {
font-size: 2vw;
}
div.profile.top.text h2 {
font-size: 1.25vw;
}
div.profile.top.text a {
font-size: 1.25vw;
}
img.pfp {
height: 80%;
object-fit: contain;
width: auto;
margin: 30px;
border-radius: 20px;
aspect-ratio: 1 / 1;
}
div.profile.top.text .about {
height: auto;
max-width: 100%;
}
#edit {
cursor: pointer;
position: relative;
height: 2vw;
margin-left: 5px;
width: auto;
}
#counter {
position: absolute;
bottom: 0;
right: 0;
}
#popup {
width: 50%;
height: 40%;
z-index: 99999999;
position: absolute;
position: absolute;
top: 50%;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background-color: var(--inputbg);
border-color: var(--inputborder);
border-width: 5px;
border-radius: 10px;
border-style: solid;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 5px 5px var(--uibg);
}
#popup input {
width: 90%;
height: 30%;
}
#popup input[type=file] {
height: auto;
text-align-last: center;
display: block;
margin: 30px;
}
#popup h1 {
font-size: 32px;
}
#popup #close {
position: absolute;
right: 10px;
top: 10px;
}
img.badges {
position: relative;
height: 2vw;
margin-left: 5px;
width: auto;
}
p#counter {
bottom: 38%;
right: 7%;
}
.users {
text-decoration: none;
width: 30%;
height: 10vh;
background-color: var(--uibg);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 5px 5px var(--uibg);
margin: 1.5%;
}
.users h1, .users p {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
justify-self: center;
height: auto;
max-width: 100%;
margin: auto;
}
.user_info {
width: 100%;
}
.users h1 {
font-size: 1vw;
}
.users p {
font-size: 0.75vw;
}
.users a {
font-size: 0.75vw;
text-decoration: underline;
}
.users p {
height: auto;
max-width: 100%;
}
#users {
width: 95%;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
}
.pages-btn {
margin: 10px;
}
#ai {
position: absolute;
right: 10px;
bottom: 10px;
}
div.profile.played {
margin: 40px;
width: 90%;
height: auto;
padding: 30px;
background-color: var(--uibg);
border-radius: 10px;
display: flex;
justify-content: left;
align-items: center;
box-shadow: 0px 0px 5px 5px var(--uibg);
justify-content: center;
flex-wrap: wrap;
}
#played-games {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
div.played-game {
width: 13%;
height: auto;
margin: 2%;
padding: 0;
}
div.played-game img {
aspect-ratio: 1 / 1;
border-radius: 20px;
}
.friend-icon {
width: 5%;
position: absolute;
left: 2%;
}
#chat {
width: 90%;
background-color: var(--uibg);
height: calc(100vh - (var(--margin) * 2) - 60px - 24px - 12px - 30px - 80px);
}
#messages {
align-items: end;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
height: 88%;
display: flex;
}
message {
width: calc(100% - 20px);
padding: 20px;
margin: 10px;
background-color: var(--inputbg);
border-radius: 10px;
}
message h1 {
font-size: 40px;
}
message h2 {
font-size: 32px;
}
message.user {
background-color: var(--inputborder);
}
message.bot {
justify-self: right;
}
#chatbox {
width: calc(100% - 20px);
}
.messagebox {
width: 100%;
height: 12%;
}
.evensmaller {
font-size: 12px;
}
#gamecontainer {
width: 80vw;
height: calc(100vh - (var(--margin) * 2));
padding: 10px;
border-radius: 10px;
background-color: var(--uibg);
}
#gameFrame {
width: 100%;
height: 90%;
border-radius: 10px;
margin: 0;
padding: 0;
}
#infobox {
width: 100%;
height: 10%;
display: flex;
}
#infobox img {
height: 90%;
width: auto;
margin-right: 20px;
border-radius: 10px;
}
@keyframes toastFade {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
opacity: 0;
}
}

View File

@ -44,7 +44,27 @@ body {
transition-duration: 0.05s;
transition-timing-function: ease-out;
}
input[type=text] {
button {
border-style: solid;
border-width: 2px;
padding: 12px;
margin: 8px;
text-align: center;
border-radius: 10px;
background-color: var(--color-2);
border-color: var(--color-3);
color: var(--text-color);
outline: none;
transition-duration: 0.25s;
font-size: 14px;
text-shadow: var(--color-1) 0 0 10px;
cursor:pointer;
}
button:hover {
filter: brightness(1.1);
transform: scale(1.05);
}
input[type=text], input[type=password] {
width: 70%;
border-style: solid;
border-width: 2px;
@ -60,13 +80,13 @@ input[type=text] {
font-size: 20px;
text-shadow: var(--color-1) 0 0 10px;
}
input[type=text]:focus {
input[type=text]:focus, input[type=password]:focus {
filter:brightness(1.25) !important;
}
input[type=text]:hover {
input[type=text]:hover, input[type=password]:hover {
filter:brightness(1.1);
}
input[type=text]::placeholder {
input[type=text]::placeholder, input[type=password]::placeholder {
color: color-mix(in srgb, var(--text-color) 20%, #00000000 80%);
text-shadow: color-mix(in srgb, var(--text-color) 40%, #00000000 60%) 0 0 10px;
}
@ -104,3 +124,44 @@ input[type=text]::placeholder {
color: var(--color-1);
text-shadow: var(--color-1) 0 0 24px;
}
.h-captcha {
margin: 8px;
}
#popup {
width: 50%;
height: 40%;
z-index: 99999999;
position: absolute;
position: absolute;
top: 50%;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background-color: var(--color-3);
border-radius: 10px;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 5px 5px var(--color-3);
}
#popup input {
width: 90%;
height: 30%;
}
#popup input[type=file] {
height: auto;
text-align-last: center;
display: block;
margin: 30px;
}
#popup h1 {
font-size: 32px;
}
#popup #close {
position: absolute;
right: 10px;
top: 10px;
outline: none;
background-color: color-mix(in srgb, var(--color-4) 20%, #00000000 80%);;
}

23
css/settings.css Normal file
View File

@ -0,0 +1,23 @@
section {
width: 30%;
height: 400px;
height: auto;
padding: 8px;
margin: 16px;
background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 20px;
margin: 15px;
transition-duration: 0.25s;
backdrop-filter: blur(2px);
box-shadow: 0 0 10px var(--color-2);
}
sections {
width: 90vw;
display: flex;
justify-content: center;
align-items: center;
}

View File

@ -7,3 +7,39 @@ body {
--color-3: #3C096C;
--color-4: #240046;
}
body[theme=blackandwhite] {
--text-color: #fff;
--bg-1: #504d53;
--bg-2: #090909;
--color-1: #bfbfbf;
--color-2: #8e8e8e;
--color-3: #5c5c5c;
--color-4: #000000;
}
body[theme=grass] {
--text-color: #ffffff;
--bg-1: #1d3024;
--bg-2: #385041;
--color-1: #a8e5a7;
--color-2: #559b7a;
--color-3: #3a5c3f;
--color-4: #242e22;
}
body[theme=evil] {
--text-color: #ffffff;
--bg-1: #591414;
--bg-2: #ba2a2a;
--color-1: #eb8181;
--color-2: #ae4141;
--color-3: #7b3838;
--color-4: #4f2626;
}
body[theme=sky] {
--text-color: #ffffff;
--bg-1: #6aacbe;
--bg-2: #3e87bb;
--color-1: #46ccd6;
--color-2: #337792;
--color-3: #38617b;
--color-4: #263b4f;
}

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="sl-theme-dark" lang="en">
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
@ -32,8 +32,6 @@
]
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script>
<!-- initialize my stuff -->
<script src="/js/all.js"></script>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="sl-theme-dark" lang="en">
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->

View File

@ -32,15 +32,18 @@ function cursor() {
cursor.style.left = `${e.pageX - 15}px`;
})
}
function themes() {
document.body.setAttribute("theme", localStorage.getItem("selenite.theme") || "")
}
document.addEventListener("DOMContentLoaded", ()=>{
setBackground();
loadPJS();
cursor();
themes();
})
document.addEventListener("scroll", ()=>{
console.log("scroll");
document.getElementById("particles-js").style.top = window.scrollY + "px";
})

View File

@ -1,153 +1,74 @@
<!DOCTYPE html>
<html class="sl-theme-dark" lang="en">
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
<!-- initialize externals -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.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/all.js"></script>
<script src="/js/main.js"></script>
<script src="/js/widget.js"></script>
<script src="/js/themes.js"></script>
<script src="/js/cloaks.js"></script>
<script src="/js/themes.js"></script>
<link rel="stylesheet" href="/style.css" />
<!-- <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>Settings | Selenite</title>
<title>Selenite</title>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- toastify -->
<script></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelector(`option[value="${localStorage.getItem("selenite.theme")}"]`).setAttribute("selected", "");
document.getElementById("themes").addEventListener("input", (e)=>{
localStorage.setItem("selenite.theme", e.target.value);
document.body.setAttribute("theme", e.target.value);
})
})
</script>
</head>
<body>
<header>
<a href="/index.html">Home</a>
<a href="/bookmarklets.html">Bookmarklets</a>
<a href="/projects.html">Games</a>
<a href="/apps.html">Apps</a>
<a href="/settings.html">Settings</a>
<a id="blank" href="#">Open Blank</a>
<a href="/u/" class="usericon"><img src="/img/user.svg"></a>
</header>
<main>
<h1>Settings</h1>
<form action="javascript:setCloakCookie();">
<h3>Website Name</h3>
<input type="text" id="webname" name="webname" placeholder="Selenite" /><br />
<h3>Website Icon</h3>
<input type="text" id="webicon" name="webicon" placeholder="https://selenite.cc/" /><br />
<h3>Or select a preset:</h3>
<select id="presetCloaks">
<option>Select a preset:</option>
<option value="google">Google</option>
<option value="ddg">DuckDuckGo</option>
<option value="canvas">Canvas</option>
<option value="desmos">Desmos</option>
<option value="drive">Google Drive</option>
<option value="classroom">Google Classroom</option>
<option value="newtab">New Tab</option>
<option value="docs">Google Docs</option>
<option value="edpuzzle">Edpuzzle</option>
<option value="khan">Khan Academy</option>
<option value="quizlet">Quizlet</option>
<option value="schoology">Schoology</option>
</select><br />
<input id="websubmit" class="submit" type="submit" value="Set Tab Cloak" />
</form>
<button onclick="javascript:clearCloak();">Clear your current tab cloak</button>
<br />
<div class="samerow">
<input type="checkbox" id="discordIcon" name="discordIcon">
<label for="discordIcon">Disable Discord Icon</label><br>
</div>
<div class="samerow">
<input type="checkbox" id="blockClose" name="blockClose">
<label for="blockClose">Block tab from being closed</label><br>
</div>
<div class="samerow">
<input type="checkbox" id="tabDisguise" name="tabDisguise">
<label for="tabDisguise">Disguise your tab when you click off (currently only Google)</label><br>
</div>
<h3>Themes</h3>
<div class="samerow">
<input type="checkbox" id="bgTheme" name="bgTheme">
<label for="bgTheme">Background:</label><br>
</div>
<div class="samerow themebtns">
<button onclick="setTheme('main')" style="background-color: #3c096c; color: #fff; border: 5px solid #5a189a">selenite</button>
<button onclick="setTheme('mainnew')" style="background-color: #3c096c; color: #fff; border: 5px solid #5a189a">selenite 2.0</button>
<button onclick="setTheme('light')" style="background-color: #bbbbbb; color: #1a1a1a; border: 5px solid #e6e6e6">light mode</button>
<button onclick="setTheme('dark')" style="background-color: #333333; color: #fff; border: 5px solid #444444">dark mode</button>
<button onclick="setTheme('egamepass')" style="background-color: #596eb1; color: #cbe0ff; border: 5px solid #5586e0">e-gamepass</button>
<button onclick="setTheme('cools1te')" style="background-color: #a134dc; color: #d3a4fa; border: 5px solid #b153e3">cools1te</button>
<button onclick="setTheme('sunset' + (bgTheme.checked ? '' : 'false'))" style="background-color: #537294; color: #fff; border: 5px solid #30719c">sunset</button>
<button onclick="setTheme('mountains' + (bgTheme.checked ? '' : 'false'))" style="background-color: #d37f7f; color: #fff; border: 5px solid #e28a8a">mountains</button>
<button onclick="setTheme('vaporwave' + (bgTheme.checked ? '' : 'false'))" style="background-color: #4b2d64; color: #fff; border: 5px solid #74568d">vaporwave</button>
<button onclick="setTheme('threekho')" style="background-color: #28A018; color: #fff; border: 5px solid #0A8F00">3kh0</button>
<button onclick="setTheme('seraph' + (bgTheme.checked ? '' : 'false'))" style="background-color: #000; color: #fff; border: 2px solid #fff">seraph</button>
<button onclick="setTheme('nighttime' + (bgTheme.checked ? '' : 'false'))" style="background-color: #29374d; color: #fff; border: 2px solid #fff">nighttime</button>
<button onclick="setTheme('mocha' + (bgTheme.checked ? '' : 'false'))" style="background-color: #6c7086; color: #fff; border: 2px solid #7f849c">mocha</button>
<button onclick="setTheme('macchiato' + (bgTheme.checked ? '' : 'false'))" style="background-color: #6e738d; color: #fff; border: 5px solid #8087a2">macchiato</button>
<button onclick="setTheme('frappe' + (bgTheme.checked ? '' : 'false'))" style="background-color: #737994; color: #cad3f5; border: 2px solid #838ba7">frappe</button>
<button onclick="setTheme('latte' + (bgTheme.checked ? '' : 'false'))" style="background-color: #9ca0b0; color: #4c4f69; border: 5px solid #8c8fa1">latte</button>
<button onclick="setTheme('art')" style="background-color: #0284d4; color: #fff; border: 5px solid #0284d4">art class</button>
<button onclick="customTheme()">custom</button>
</div>
<div id="customMenu" style="display: none;">
<p>Input BG Color</p>
<input type="color" id="inputbg"/>
<p>Input Border Color</p>
<input type="color" id="inputborder"/>
<p>UI Background Color</p>
<input type="color" id="uibg"/>
<p>Text Color</p>
<input type="color" id="textcolor"/>
<p>Background</p>
<input type="color" id="bg"/>
<p>or select an image (click enter to set)</p>
<input type="text" id="bgimg" placeholder="https://selenite.cc/" /><br />
<!-- --inputbg: #000000;
--inputborder: #000000;
--uibg: #000000;
--textcolor: #000;
--bg: #000000; -->
</div>
<br />
<form action="javascript:setPanicMode();">
<h3 for="panic">Website URL</h3>
<input type="text" id="panic" name="panic" placeholder="https://google.com" /><br />
<input id="panic" class="submit" type="submit" value="Set Panic Mode" />
</form>
</main>
<br>
<footer>
<a href="https://gitlab.com/skysthelimit.dev/selenite">Source</a>
<a href="https://discord.gg/7jyufnwJNf">Discord</a>
<a href="/suggest.html">Suggestions & Bugs</a>
<a href="/contact.html">Contact</a>
<a href="/support.html">Donate</a>
<a href="/about.html">About</a>
</footer>
<h1 class="title">settings</h1>
<sections>
<section>
<h2>theme</h2>
<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>
</select>
</section>
</sections>
</body>
</html>