themes + begin user pages
This commit is contained in:
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="sl-theme-dark" lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- initialize theme vars
|
<!-- initialize theme vars
|
||||||
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
||||||
|
35
css/main.css
35
css/main.css
@ -13,7 +13,7 @@ html,
|
|||||||
body {
|
body {
|
||||||
/* height: 100vh; */
|
/* height: 100vh; */
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
color: white;
|
color: var(--text-color);
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -69,6 +69,39 @@ p {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
|
a {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
img {
|
img {
|
||||||
image-rendering: pixelated;
|
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%);
|
||||||
}
|
}
|
673
css/oldstyle.css
673
css/oldstyle.css
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
@ -44,7 +44,27 @@ body {
|
|||||||
transition-duration: 0.05s;
|
transition-duration: 0.05s;
|
||||||
transition-timing-function: ease-out;
|
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%;
|
width: 70%;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
@ -60,13 +80,13 @@ input[type=text] {
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-shadow: var(--color-1) 0 0 10px;
|
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;
|
filter:brightness(1.25) !important;
|
||||||
}
|
}
|
||||||
input[type=text]:hover {
|
input[type=text]:hover, input[type=password]:hover {
|
||||||
filter:brightness(1.1);
|
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%);
|
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;
|
text-shadow: color-mix(in srgb, var(--text-color) 40%, #00000000 60%) 0 0 10px;
|
||||||
}
|
}
|
||||||
@ -103,4 +123,45 @@ input[type=text]::placeholder {
|
|||||||
.title {
|
.title {
|
||||||
color: var(--color-1);
|
color: var(--color-1);
|
||||||
text-shadow: var(--color-1) 0 0 24px;
|
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
23
css/settings.css
Normal 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;
|
||||||
|
}
|
@ -6,4 +6,40 @@ body {
|
|||||||
--color-2: #7B2CBF;
|
--color-2: #7B2CBF;
|
||||||
--color-3: #3C096C;
|
--color-3: #3C096C;
|
||||||
--color-4: #240046;
|
--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;
|
||||||
}
|
}
|
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="sl-theme-dark" lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- initialize theme vars
|
<!-- initialize theme vars
|
||||||
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
||||||
@ -32,8 +32,6 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
</script>
|
</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 -->
|
<!-- initialize my stuff -->
|
||||||
<script src="/js/all.js"></script>
|
<script src="/js/all.js"></script>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="sl-theme-dark" lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- initialize theme vars
|
<!-- initialize theme vars
|
||||||
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
||||||
|
@ -32,15 +32,18 @@ function cursor() {
|
|||||||
cursor.style.left = `${e.pageX - 15}px`;
|
cursor.style.left = `${e.pageX - 15}px`;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
function themes() {
|
||||||
|
document.body.setAttribute("theme", localStorage.getItem("selenite.theme") || "")
|
||||||
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", ()=>{
|
document.addEventListener("DOMContentLoaded", ()=>{
|
||||||
setBackground();
|
setBackground();
|
||||||
loadPJS();
|
loadPJS();
|
||||||
cursor();
|
cursor();
|
||||||
|
themes();
|
||||||
})
|
})
|
||||||
|
|
||||||
document.addEventListener("scroll", ()=>{
|
document.addEventListener("scroll", ()=>{
|
||||||
console.log("scroll");
|
|
||||||
document.getElementById("particles-js").style.top = window.scrollY + "px";
|
document.getElementById("particles-js").style.top = window.scrollY + "px";
|
||||||
})
|
})
|
||||||
|
|
||||||
|
215
settings.html
215
settings.html
@ -1,153 +1,74 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="sl-theme-dark" lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- initialize theme vars
|
<!-- initialize theme vars
|
||||||
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
|
||||||
|
|
||||||
<!-- initialize externals -->
|
<!-- initialize externals -->
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
<meta property="og:title" content="Selenite" />
|
||||||
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script>
|
<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.js"></script>
|
||||||
|
<script src="/js/main.js"></script>
|
||||||
|
<!-- <script src="/js/widget.js"></script> -->
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/css/main.css" />
|
||||||
<!-- initialize my stuff -->
|
<link rel="stylesheet" href="/css/pages.css" />
|
||||||
<script src="/js/all.min.js"></script>
|
<link rel="stylesheet" href="/css/settings.css" />
|
||||||
<script src="/js/main.js"></script>
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<script src="/js/widget.js"></script>
|
<!-- seo + other things -->
|
||||||
<script src="/js/themes.js"></script>
|
<title>Selenite</title>
|
||||||
<script src="/js/cloaks.js"></script>
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<script src="/js/themes.js"></script>
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
|
||||||
|
<script>
|
||||||
<link rel="stylesheet" href="/style.css" />
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
document.querySelector(`option[value="${localStorage.getItem("selenite.theme")}"]`).setAttribute("selected", "");
|
||||||
|
document.getElementById("themes").addEventListener("input", (e)=>{
|
||||||
<!-- seo + other things -->
|
localStorage.setItem("selenite.theme", e.target.value);
|
||||||
<title>Settings | Selenite</title>
|
document.body.setAttribute("theme", e.target.value);
|
||||||
<link rel="icon" href="/favicon.ico" />
|
})
|
||||||
|
})
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
</script>
|
||||||
|
</head>
|
||||||
<!-- toastify -->
|
<body>
|
||||||
<script></script>
|
<h1 class="title">settings</h1>
|
||||||
</head>
|
<sections>
|
||||||
|
<section>
|
||||||
<body>
|
<h2>theme</h2>
|
||||||
<header>
|
<select id="themes">
|
||||||
<a href="/index.html">Home</a>
|
<option value="">selenite</option>
|
||||||
<a href="/bookmarklets.html">Bookmarklets</a>
|
<option value="blackandwhite">black and white</option>
|
||||||
<a href="/projects.html">Games</a>
|
<option value="grass">grass</option>
|
||||||
<a href="/apps.html">Apps</a>
|
<option value="evil">evil</option>
|
||||||
<a href="/settings.html">Settings</a>
|
<option value="sky">sky</option>
|
||||||
<a id="blank" href="#">Open Blank</a>
|
</select>
|
||||||
<a href="/u/" class="usericon"><img src="/img/user.svg"></a>
|
</section>
|
||||||
|
</sections>
|
||||||
</header>
|
</body>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user