themes + begin user pages
This commit is contained in:
@ -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 -->
|
||||
|
35
css/main.css
35
css/main.css
@ -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%);
|
||||
}
|
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-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
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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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>
|
||||
|
@ -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,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";
|
||||
})
|
||||
|
||||
|
193
settings.html
193
settings.html
@ -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>
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user