diff --git a/about.html b/about.html
index 6f80044..e0b30e5 100755
--- a/about.html
+++ b/about.html
@@ -1,5 +1,5 @@
-
+
diff --git a/css/main.css b/css/main.css
index 99442f7..1b33054 100755
--- a/css/main.css
+++ b/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%);
}
\ No newline at end of file
diff --git a/css/oldstyle.css b/css/oldstyle.css
deleted file mode 100755
index 6a0502b..0000000
--- a/css/oldstyle.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/css/pages.css b/css/pages.css
index a3e9107..8d01ea8 100755
--- a/css/pages.css
+++ b/css/pages.css
@@ -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;
}
@@ -103,4 +123,45 @@ input[type=text]::placeholder {
.title {
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%);;
}
\ No newline at end of file
diff --git a/css/settings.css b/css/settings.css
new file mode 100644
index 0000000..856cff8
--- /dev/null
+++ b/css/settings.css
@@ -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;
+}
\ No newline at end of file
diff --git a/css/themes.css b/css/themes.css
index 22f0a1c..c493de1 100755
--- a/css/themes.css
+++ b/css/themes.css
@@ -6,4 +6,40 @@ body {
--color-2: #7B2CBF;
--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;
}
\ No newline at end of file
diff --git a/home.html b/home.html
index f3ee942..669aa2e 100755
--- a/home.html
+++ b/home.html
@@ -1,5 +1,5 @@
-
+
@@ -32,8 +32,6 @@
]
}
-
-
diff --git a/index.html b/index.html
index 93510d6..9ea8d3b 100755
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-
+
diff --git a/js/main.js b/js/main.js
index 8ad8a71..b398c9a 100755
--- a/js/main.js
+++ b/js/main.js
@@ -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";
})
diff --git a/settings.html b/settings.html
index 040dff1..5191077 100755
--- a/settings.html
+++ b/settings.html
@@ -1,153 +1,74 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- Settings | Selenite
-
-
-
-
-
-
-
-
-
-
-
-
- Settings
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Themes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ Selenite
+
+
+
+
+
+ settings
+
+
+ theme
+
+
+
+
-
-