first dev commit

2025-06-22 11:46:39 -04:00
parent 3bb16e3824
commit c34e53111c
23 changed files with 1650 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+resources/
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+  "printWidth": 10000
+}
--- a/404.html
+++ b/404.html
@ -32,9 +32,22 @@

    <!-- toastify -->
    <script>
+<<<<<<< HEAD
      if(document.href.contains("eg1.8") || document.href.contains("eaglercraft")) {
        document.href = "/semag/eg/"
      }
+=======
+      document.addEventListener("DOMContentLoaded", () => {
+        
+      })
+      $.getJSON("/data/games.json", (data) => {
+        for(let i = 0;i < data.length;i++) {
+          if(location.pathname.includes(data[i]["directory"])) {
+            location.href = "/semag/" + data[i]["directory"] + "/index.html"
+          }
+        }
+      })
+>>>>>>> c2041b6 (first dev commit)
    </script>
  </head>
  <alerts>
@ -57,8 +70,33 @@
      <p>Trying to access a page such as login, register, or a user page? Those are only available on official links.</p>
      <p><a href="https://discord.gg/7jyufnwJNf">Join the Discord to find official links.</a></p>
      <a href="/index.html"><button>Go home</button></a>
+<<<<<<< HEAD
    </div>

+=======
+      <button onclick="statsForNerds()">Stats for nerds</button>
+          <div id="sfn" style="display: none;" class="message">
+      Please report this to our <a href="https://discord.gg/7jyufnwJNf">Discord</a> or <a href="mailto:support@selenite.cc">email.</a> <br> 
+      Requested URL: <span id="full">You need Javascript to show the Stats for nerds</span><br>
+      Referrer: <span id="ref">You need Javascript to show the Stats for nerds</span><br>
+      Title: <span id="title">You need Javascript to show the Stats for nerds</span><br>
+      Screen height: <span id="height">You need Javascript to show the Stats for nerds</span><br>
+      Screen width: <span id="width">You need Javascript to show the Stats for nerds</span><br>
+      Window height: <span id="winheight">You need Javascript to show the Stats for nerds</span><br>
+      Window width: <span id="winwidth">You need Javascript to show the Stats for nerds</span><br>
+      Cookies: <span id="cookie">You need Javascript to show the Stats for nerds</span><br>
+      User agent: <span id="ua">You need Javascript to show the Stats for nerds</span><br>
+      OS platform: <span id="plat">You need Javascript to show the Stats for nerds</span><br>
+      Online: <span id="online">You need Javascript to show the Stats for nerds</span>
+      <br />IP: <span id="ip">You need Javascript to show the Stats for nerds</span><br>
+      Error code: 404<br>
+    </div>
+
+    <script>
+"innerText"in document.body||Object.defineProperty(HTMLElement.prototype,"innerText",{get:function(){return this.textContent},set:function(a){this.textContent=a}}),window.fetch||(window.fetch=function(a){return new Promise(function(b,c){var d=new XMLHttpRequest;d.open("GET",a),d.onload=function(){200===d.status?b(JSON.parse(d.responseText)):c(Error(d.statusText))},d.onerror=function(){c(Error("Network Error"))},d.send()})}),window.XMLHttpRequest||(window.XMLHttpRequest=function(){try{return new ActiveXObject("Msxml2.XMLHTTP.6.0")}catch(a){}try{return new ActiveXObject("Msxml2.XMLHTTP.3.0")}catch(a){}try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(a){}throw new Error("This browser does not support XMLHttpRequest.")});function statsForNerds(){var a=document.getElementById("sfn");"none"===a.style.display?(a.style.display="block",console.log("[\u2139\uFE0F] Showing the stats for nerds!")):(a.style.display="none",console.log("[\u2139\uFE0F] Hiding the stats for nerds!"))}document.getElementById("full").innerText=window.location.href,document.getElementById("ref").innerHTML=document.referrer,document.getElementById("title").innerText=document.title,document.getElementById("height").innerHTML=screen.height+"px",document.getElementById("width").innerHTML=screen.width+"px",document.getElementById("winheight").innerHTML=window.innerHeight+"px",document.getElementById("winwidth").innerHTML=window.innerWidth+"px",document.getElementById("cookie").innerText=navigator.cookieEnabled,document.getElementById("ua").innerHTML=navigator.userAgent,document.getElementById("plat").innerHTML=navigator.platform,document.getElementById("online").innerHTML=navigator.onLine;var echolog={};fetch("//wtfismyip.com/json").then(function(a){return a.json()}).then(function(a){var b={ipAddress:a.YourFuckingIPAddress,hostname:a.YourFuckingHostname},c=document.getElementById("ip");c.innerText=b.ipAddress})["catch"](function(a){return console.error(a)});
+    </script>
+
+>>>>>>> c2041b6 (first dev commit)
    </main>
    
    <footer class="noscroll">
--- a/css/games.css
+++ b/css/games.css
@ -0,0 +1,48 @@
+game {
+    width: 20vw;
+    height: 10vh;
+    background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 20px;
+    margin: 15px;
+    transition-duration: 0.25s;
+	backdrop-filter: blur(2px);
+    box-shadow: 0 0 10px var(--color-2);
+}
+game:hover {
+    transform: scale(1.1);
+    filter:brightness(1.15);
+}
+game img {
+    height: 80%;
+	border-radius: 15px;
+	aspect-ratio: 1 / 1;
+    margin: 10px;
+    justify-self: left;
+    margin-right: auto;
+}
+game h1 {
+    font-size: 14px;
+    margin: 15px;
+    max-width: 50%;
+}
+#games {
+    width: 90vw;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    min-height: calc(100vh - (18px * 2 + 5px * 2 + 20px * 2));
+    gap: 0px;
+}
+
+#noResults {
+    display: none;
+    font-size: 28px;
+    color: var(--color-1);
+    text-shadow: var(--color-1) 0 0 10px;
+}
--- a/css/loader.css
+++ b/css/loader.css
@ -0,0 +1,32 @@
+#gamecontainer {
+    width: 90vw;
+    height: auto;
+    border-radius: 15px;
+    background-color: color-mix(in srgb, var(--color-2) 50%, #00000000 50%);
+    box-shadow: 0 0 10px var(--color-2);
+	backdrop-filter: blur(6px);
+}
+#gameFrame {
+    width: 99%;
+    height: 75vh;
+    margin: 0.5%;
+    margin-bottom: 0;
+    border-radius: 10px;
+}
+#infobox {
+    height: 8vh;
+    width: 100%;
+    margin: 1% 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#infobox img {
+    height: 100%;
+    margin: 1.5%;
+    aspect-ratio: 1 / 1;
+    border-radius: 8px;
+}
+#infobox h2 {
+    margin-right: auto;
+}
--- a/css/main.css
+++ b/css/main.css
@ -0,0 +1,70 @@
+@import url("/css/themes.css");
+@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
+:root {
+    --text-color: #fff;
+    --bg-1: #5a189a;
+    --bg-2: #10002b;
+    --color-1: #E0AAFF;
+    --color-2: #7B2CBF;
+    --color-3: #3C096C;
+    --color-4: #240046;
+}
+html,
+body {
+    /* height: 100vh; */
+    width: 100vw;
+    color: white;
+    background-color: black;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    border: none;
+    font-family: "Mulish", serif;
+}
+body {
+    animation: 1s ease-out loadIn;
+}
+@keyframes loadIn {
+    from {opacity: 0;transform: translateY(-32px);}
+    to {opacity: 1;transform: translateY(0px);}
+}
+
+body {
+    display: flex;
+    filter: drop-shadow(0px 0px 4px #ffffff99);
+}
+
+.samerow {
+	display: flex;
+	justify-content: center;
+	gap: 0;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+}
+.samerow img {
+    width: 80px;
+    aspect-ratio: 1 / 1;
+    padding: 5px;
+    margin: 10px;
+    user-select: none;
+}
+
+h1 {
+    font-size: 48px;
+    margin: 10px;
+}
+h2 {
+    font-size: 32px;
+    margin: 8px;
+}
+h3 {
+    font-size: 24px;
+    margin: 4px;
+}
+p {
+    font-size: 16px;
+    margin: 2px;
+}
--- a/css/oldstyle.css
+++ b/css/oldstyle.css
@ -0,0 +1,673 @@
+@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;
+	}
+}
--- a/css/pages.css
+++ b/css/pages.css
@ -0,0 +1,107 @@
+@property --gradient-x {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --gradient-y {
+    syntax: "<percentage>";
+    inherits: false;
+    initial-value: 0%;
+}
+body {
+  background: rgb(16, 0, 43);
+  background: radial-gradient(
+    circle at var(--gradient-x) var(--gradient-y),
+    var(--bg-1) 0%,
+    var(--bg-2) 100%
+  );
+  background-size: 100vw 100vh;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  transition: --gradient-x 30s ease-in-out,
+  --gradient-y 30s ease-in-out;
+  overflow-x: hidden;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100vw;
+    min-height: 100vh;
+    position: relative;
+}
+#particles-js {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    z-index: -1000;
+    border: none;
+    overflow-y: hidden;
+    top: 0;
+    transition-duration: 0.05s;
+    transition-timing-function: ease-out;
+}
+input[type=text] {
+  width: 70%;
+  border-style: solid;
+  border-width: 2px;
+  padding: 18px;
+  margin: 5px;
+  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: 20px;
+  text-shadow: var(--color-1) 0 0 10px;
+}
+input[type=text]:focus {
+  filter:brightness(1.25) !important;
+}
+input[type=text]:hover {
+  filter:brightness(1.1);
+}
+input[type=text]::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;
+}
+/* Chrome, Edge and Safari */
+*::-webkit-scrollbar {
+  height: 10px;
+  width: 8px;
+}
+*::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background-color: var(--color-4);
+}
+
+*::-webkit-scrollbar-track:hover {
+  filter:brightness(1.1);
+}
+
+*::-webkit-scrollbar-track:active {
+  filter:brightness(1.25);
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: var(--color-2);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  filter:brightness(1.1);
+}
+
+*::-webkit-scrollbar-thumb:active {
+  filter:brightness(1.25);
+}
+
+.title {
+  color: var(--color-1);
+  text-shadow: var(--color-1) 0 0 24px;
+}
--- a/css/sidebar.css
+++ b/css/sidebar.css
@ -0,0 +1,58 @@
+body {
+    overflow: hidden;
+}
+sidebar {
+    background-color: linear-gradient(19deg,rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);;
+    height: 100%;
+    width: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.sidebar-item {
+    margin: 6px;
+    padding: 6px;
+    height: 26px;
+    width: 26px;
+	transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+iframe {
+    width: calc(100% - 50px - 10px);
+    height: calc(100vh - 20px);
+    margin: 10px;
+    margin-right: 0px;
+    border-radius: 8px;
+}
+
+.sidebar-divider {
+    height: 2px;
+    border-radius: 20px;
+    width: 80%;
+    background-color: #ffffff22;
+    /* auto is being stupid
+    100vh minus height of 1 object 7 times minus the margin and padding of 7 objects (multiplied twice bc margin and padding on top and bottom) */
+    margin-bottom: calc(100vh - 26px * 7 - ((6px + 6px) * 2) * 7);
+}
+
+.sidebar-item-descriptor {
+    position: fixed;
+    right: 25px;
+    opacity: 0;
+    transform: translateY(-32px);
+    text-align: left;
+    background-color: black;
+    border-radius: 10px;
+    padding: 8px;
+    color: white;
+    font-size: 12px;
+    user-select: none;
+    pointer-events: none;
+    transition: opacity 0.5s 0.2s, right 0.5s 0.2s;
+    font-family: "Mulish", serif;
+}
+.sidebar-item:hover .sidebar-item-descriptor {
+    opacity: 1;
+    right: 55px;
+}
--- a/css/themes.css
+++ b/css/themes.css
@ -1,3 +1,4 @@
+<<<<<<< HEAD
 :root {
     --inputbg: #3c096c;
    --inputborder: #5a189a;
@ -293,3 +294,14 @@ body[theme=nighttime] {
    --shadow: 0px 0px 4px #fff;
 }

+=======
+body {
+    --text-color: #fff;
+    --bg-1: #5a189a;
+    --bg-2: #10002b;
+    --color-1: #E0AAFF;
+    --color-2: #7B2CBF;
+    --color-3: #3C096C;
+    --color-4: #240046;
+}
+>>>>>>> c2041b6 (first dev commit)
--- a/home.html
+++ b/home.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html class="sl-theme-dark" lang="en">
+	<head>
+		<!-- initialize theme vars
+    https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
+
+		<!-- initialize externals -->
+		<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>
+		<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>
+		<script src="/js/main.js"></script>
+		<!-- <script src="/js/widget.js"></script> -->
+		<script>
+			document.addEventListener("DOMContentLoaded", () => {
+				setBackground();
+				fetch("/data/quotes.json")
+					.then((response) => response.json())
+					.then((data) => {
+						const randomQuote = data[Math.floor(Math.random() * data.length)];
+
+						if (randomQuote.includes("OGNUM1") && randomQuote.includes("SQRTNUM1")) {
+							const ognum = Math.floor(Math.random() * 3000);
+							randomQuote = `the square root of ${ognum} is ${Math.sqrt(ognum)}`;
+						} else if (randomQuote.includes("CURRENTURL")) {
+							randomQuote = window.location.hostname;
+						}
+
+						document.getElementById("randomquote").innerHTML = randomQuote;
+					})
+					.catch((error) => console.error("Error loading quotes:", error));
+			});
+		</script>
+
+		<link rel="stylesheet" href="/css/main.css" />
+		<link rel="stylesheet" href="/css/pages.css" />
+		<link rel="manifest" href="/manifest.json" />
+		<!-- seo + other things -->
+		<title>Selenite</title>
+		<link rel="icon" href="/favicon.ico" />
+		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
+	</head>
+	<alerts> </alerts>
+	<body>
+			<h1 class="title">selenite.</h1>
+			<noscript>enable javascript if you want the games to actually load</noscript>
+			<p id="randomquote">better thank me for this unblocked website</p>
+			<div class="samerow">
+				<div class="img-container">
+					<a href="/users"><img src="img/user_index.svg" /></a>
+				</div>
+				<div class="img-container">
+					<a href="projects.html"><img src="img/games.svg" /></a>
+				</div>
+				<div class="img-container">
+					<a href="https://discord.gg/7jyufnwJNf"><img src="img/discord.svg" /></a>
+				</div>
+			</div>
+	</body>
+</html>
--- a/img/apps.svg
+++ b/img/apps.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/></svg>
--- a/img/bookmarklets.svg
+++ b/img/bookmarklets.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z"/></svg>
--- a/img/games.svg
+++ b/img/games.svg
@ -1,3 +1,7 @@
+<<<<<<< HEAD
 <svg width="1080" height="1080" xmlns="http://www.w3.org/2000/svg">
  <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAACpUlEQVR42u2aO08UURiGT6MNuMslJoSOhp5rIpJg4i8gIYGFAhujFaWCcvkRxgaK5VISqPQXyIKthoJCQ8ImJLBbkKBRLsljh6Lu7veduZ3ie+o577zPZmfmzDnjnGEYhmEYhmEYhmEYIsgxxgolDrkgLi44pMQKY+SSLd9NkUuS5JIi3cmUb2KZa9LgmmWa4q7fwwFpckBPnPWHOCdtzhmKq/4AZ2TBGQNx1M9zRFYckY8uUCRLilHrD5M1w9EEtjMX2I5SvyulO3/9p0KXv8BM5vUBZvwFNhun3xwrp0yBDjooUBYdv+kvcJyAQJn2mzHtIoVj3/ptkj5qgcKtcxREY9r8BAYTEei8dY5O0ZhBP4HJYAQm/QSWgvkLLfkJbCQioL+IYcNPYC8RAf1tFPb8BKr1CjccHSdVn/qt9X/xVAWgVS8wEJSA/tWm1v0hI4GCXmBRlhxDYclFvagXWE9JQHZbXdcL7KYkIHuw7eoFKikJyKYWFW39Fun5UxKAFp1Af2oC0rlRv05gIjUB6dxoQiewkJqAdG60oBNYIzTWdAKl4ARKOoHT4ARONfXzwdUHFAu99AUp0CcXGA9SYFwuMB+kwLxcYDVIgVW5wE6QAjtygZMgBU6k9XNB1geE+/j0BivQKxMY9YhWL/7JFi7/YlQWPaUO1r9y+ylMyYKnlbELzhO1wrQs9qEq9LWLgFJB9vEBzVyJI1+5iCgUrmiWhkp3h+dcDIgVtuSRI6LAWRcTQoURTWTj2dBLFyMCBd1XE+T4XDfuhYuZBgqfuKcNbONjjbCfPHEJwPOa3+PteewPOMdd5vj+T9gH5RKT5owP/rOt9Y1Z7vhH3ucZ7/nKBRX2ecMjlzA85i37VPnBF97x9Peyl2EYhmEYhmEYhmEYf/ILpJ54reMDuewAAAAASUVORK5CYII=" height="1080" width="1080" />
 </svg>
+=======
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M189-160q-60 0-102.5-43T42-307q0-9 1-18t3-18l84-336q14-54 57-87.5t98-33.5h390q55 0 98 33.5t57 87.5l84 336q2 9 3.5 18.5T919-306q0 61-43.5 103.5T771-160q-42 0-78-22t-54-60l-28-58q-5-10-15-15t-21-5H385q-11 0-21 5t-15 15l-28 58q-18 38-54 60t-78 22Zm3-80q19 0 34.5-10t23.5-27l28-57q15-31 44-48.5t63-17.5h190q34 0 63 18t45 48l28 57q8 17 23.5 27t34.5 10q28 0 48-18.5t21-46.5q0 1-2-19l-84-335q-7-27-28-44t-49-17H285q-28 0-49.5 17T208-659l-84 335q-2 6-2 18 0 28 20.5 47t49.5 19Zm348-280q17 0 28.5-11.5T580-560q0-17-11.5-28.5T540-600q-17 0-28.5 11.5T500-560q0 17 11.5 28.5T540-520Zm80-80q17 0 28.5-11.5T660-640q0-17-11.5-28.5T620-680q-17 0-28.5 11.5T580-640q0 17 11.5 28.5T620-600Zm0 160q17 0 28.5-11.5T660-480q0-17-11.5-28.5T620-520q-17 0-28.5 11.5T580-480q0 17 11.5 28.5T620-440Zm80-80q17 0 28.5-11.5T740-560q0-17-11.5-28.5T700-600q-17 0-28.5 11.5T660-560q0 17 11.5 28.5T700-520Zm-360 60q13 0 21.5-8.5T370-490v-40h40q13 0 21.5-8.5T440-560q0-13-8.5-21.5T410-590h-40v-40q0-13-8.5-21.5T340-660q-13 0-21.5 8.5T310-630v40h-40q-13 0-21.5 8.5T240-560q0 13 8.5 21.5T270-530h40v40q0 13 8.5 21.5T340-460Zm140-20Z"/></svg>
+>>>>>>> c2041b6 (first dev commit)
--- a/img/home.svg
+++ b/img/home.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
--- a/img/open.svg
+++ b/img/open.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>
--- a/img/settings.svg
+++ b/img/settings.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
--- a/index.html
+++ b/index.html
@ -32,6 +32,7 @@
            ]
        }
    </script>
+<<<<<<< HEAD
 		<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>

@ -60,12 +61,21 @@
 		</script>

 		<link rel="stylesheet" href="/style.css" />
+=======
+
+		<!-- initialize my stuff -->
+		<script src="/js/all.js"></script>
+
+		<link rel="stylesheet" href="/css/main.css" />
+		<link rel="stylesheet" href="/css/sidebar.css" />
+>>>>>>> c2041b6 (first dev commit)
 		<link rel="manifest" href="/manifest.json" />

 		<!-- seo + other things -->
 		<title>Selenite</title>
 		<link rel="icon" href="/favicon.ico" />
 		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
+<<<<<<< HEAD
 	</head>
 	<alerts> </alerts>
 	<body id="noscroll">
@ -102,5 +112,52 @@
 			<a href="/support.html">Donate</a>
 			<a href="/about.html">About</a>
 		</footer>
+=======
+		<script>
+			document.addEventListener("DOMContentLoaded", ()=>{
+				document.getElementById("iframe").addEventListener("load", () => {
+					document.getElementById("iframe").contentWindow.addEventListener("beforeunload", () => {
+						alert("unloading! show loading bar")
+					})
+				});
+				document.querySelectorAll(".sidebar-item").forEach((item) => {
+					if(item.childNodes[0].target) {
+						item.childNodes[0].addEventListener("click", (e)=>{
+							console.log("created event listneer")
+							e.preventDefault();
+							document.getElementById("iframe").src = item.childNodes[0].target;
+						})
+					} else if(item.childNodes[0].id == "openblank") {
+						item.childNodes[0].addEventListener("click", (e)=>{
+							e.preventDefault();
+							win = window.open();
+							win.document.body.style.margin = "0";
+							win.document.body.style.height = "100vh";
+							html = `<style>*{margin:0;padding:0;border:none;height:100vh;width:100vw}</style><iframe src=${location.href}></iframe>`;
+							win.document.querySelector("html").innerHTML = html;
+							location.href = "https://google.com";
+							window.close();
+						})
+
+					}
+				})
+			})
+		</script>
+	</head>
+	<body>
+        <iframe id="iframe" src="home.html"></iframe>
+		<!-- to do
+		add colors -->
+		<sidebar>
+			<div class="sidebar-item"><a href="#" target="/home"><img src="/img/home.svg" /></a><div class="sidebar-item-descriptor">home</div></div> <!-- home -->
+			<div class="sidebar-item"><a href="#" target="/projects"><img src="/img/games.svg" /></a><div class="sidebar-item-descriptor">games</div></div> <!-- games -->
+			<div class="sidebar-item"><a href="#" target="/apps"><img src="/img/apps.svg" /></a><div class="sidebar-item-descriptor">apps</div></div> <!-- apps -->
+			<div class="sidebar-item"><a href="#" target="/bookmarklets"><img src="/img/bookmarklets.svg" /></a><div class="sidebar-item-descriptor">bookmarklets</div></div> <!-- reload -->
+			<div class="sidebar-item"><a href="#" id="openblank"><img src="/img/open.svg" /></a><div class="sidebar-item-descriptor">open blank</div></div> <!-- open blank -->
+			<div class="sidebar-divider"></div>
+			<div class="sidebar-item"><a href="#" target="/u/"><img src="/img/user.svg" /></a><div class="sidebar-item-descriptor">user profile</div></div> <!-- user -->
+			<div class="sidebar-item"><a href="#" target="/settings"><img src="/img/settings.svg" /></a><div class="sidebar-item-descriptor">settings</div></div> <!-- settings -->
+        </sidebar>
+>>>>>>> c2041b6 (first dev commit)
 	</body>
 </html>
--- a/js/games.js
+++ b/js/games.js
@ -1,3 +1,4 @@
+<<<<<<< HEAD
 $.getJSON("/data/games.json", function (data) {
 	if (document.readyState === "complete") {
 		loadGames(data);
@ -197,3 +198,58 @@ function recommendedGames() {
 		$("#recommend").text("Click to view recommended games!");
 	}
 }
+=======
+document.addEventListener("DOMContentLoaded", loadGames);
+let elements = [];
+async function loadGames() {
+  // taken from mdn
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
+  let data = await (await fetch("/data/games.json")).json();
+  sorted = data.sort((a, b) => {
+    const n1 = a.name.toUpperCase();
+    const n2 = b.name.toUpperCase();
+    if (n1 < n2) {
+      return -1;
+    }
+    if (n1 > n2) {
+      return 1;
+    }
+    // shouldnt happen but just incase
+    return 0;
+  });
+  let gamesElement = document.getElementById("games");
+  sorted.forEach(element => {
+    let newElement = document.createElement("game");
+    newElement.setAttribute("data-target", element.directory);
+    let image = document.createElement("img");
+    image.src = `/semag/${element.directory}/${element.image}`
+    let title = document.createElement("h1");
+    title.innerText = element.name;
+    newElement.appendChild(image);
+    newElement.appendChild(title);
+    gamesElement.appendChild(newElement);
+    newElement.addEventListener("click", ()=>{
+      location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
+    })
+    elements.push(newElement);
+  });
+}
+document.addEventListener("DOMContentLoaded", ()=>{
+  document.getElementById("gamesearch").addEventListener("input", ()=>{
+    let input = document.getElementById("gamesearch").value.toUpperCase();
+    let total = 0;
+    if(elements.length > 0) {
+      elements.forEach((element) => {
+        let title = element.childNodes[1].innerText.toUpperCase();
+        if(title.includes(input)) {
+          element.style.display = "flex";
+        } else {
+          element.style.display = "none";
+          total++;
+        }
+      })
+    }
+    document.getElementById("noResults").style.display = total >= elements.length ?  "flex" : "none"
+  })
+})
+>>>>>>> c2041b6 (first dev commit)
--- a/js/main.js
+++ b/js/main.js
@ -1,3 +1,4 @@
+<<<<<<< HEAD
 var interval;
 document.addEventListener("DOMContentLoaded", function () {
 	if (localStorage.getItem("theme")) {
@ -162,3 +163,217 @@ let cookieConsentStyle = document.createElement("link");
 cookieConsentStyle.href = "/js/cookieConsent.css";
 cookieConsentStyle.rel = "stylesheet";
 document.head.appendChild(cookieConsentStyle);
+=======
+function setBackground() {
+	let randomNumbers = [100-Math.abs(Math.floor(Math.random() * 200) - 99), 100-Math.abs(Math.floor(Math.random() * 200) - 99)];
+	document.body.style.setProperty("--gradient-x", randomNumbers[0] + "%");
+	document.body.style.setProperty("--gradient-y", randomNumbers[1] + "%");
+	setTimeout(setBackground, 30000)
+}
+function loadPJS() {
+	let div = document.createElement("div");
+	div.id = "particles-js";
+	document.body.appendChild(div);
+	let script = document.createElement("script");
+	script.src = "https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js";
+	document.head.appendChild(script);
+	script.addEventListener("load", ()=>{
+		particlesJS.load('particles-js', "js/particlesjs-config.json", ()=>{});
+	});
+}
+
+function cursor() {
+	let cursor = document.createElement("div");
+	cursor.style.width = "30px";
+	cursor.style.height = "30px";
+	cursor.style.backgroundColor = "var(--color-1)";
+	cursor.style.position = "absolute";
+	cursor.style.borderRadius = "100%";
+	// cursor.style.filter = "blur(40px)";
+	cursor.style.pointerEvents = "none";
+	document.body.appendChild(cursor);
+	document.addEventListener("mousemove", (e) => {
+		cursor.style.top = `${e.clientY - 15}px`;
+		cursor.style.left = `${e.clientX - 15}px`;
+	})
+}
+
+document.addEventListener("DOMContentLoaded", ()=>{
+	setBackground();
+	loadPJS();
+	cursor();
+})
+
+document.addEventListener("scroll", ()=>{
+	console.log("scroll");
+	document.getElementById("particles-js").style.top = window.scrollY + "px";
+})
+
+
+
+
+// var interval;
+// document.addEventListener("DOMContentLoaded", function () {
+// 	if (localStorage.getItem("theme")) {
+// 		localStorage.setItem("selenite.theme", localStorage.getItem("theme"));
+// 		localStorage.removeItem("theme");
+// 	}
+// 	if (localStorage.getItem("selenite.theme")) {
+// 		document.body.setAttribute("theme", localStorage.getItem("selenite.theme"));
+// 	} else {
+// 		document.body.setAttribute("theme", "main");
+// 	}
+// 	if (document.querySelectorAll("[id=adcontainer]")) {
+// 		for (let i = 0; i < document.querySelectorAll("[id=adcontainer]").length; i++) {
+// 			if (Math.random() < 0.5 || localStorage.getItem("selenite.adblock") == "true") document.querySelectorAll("[id=adcontainer]")[i].innerHTML = "";
+// 		}
+// 	}
+// 	const iconSetting = document.querySelector("input#discordIcon");
+// 	const blockClose = document.querySelector("input#blockClose");
+// 	const openBlank = document.getElementById("blank");
+// 	const bgTheme = document.querySelector("input#bgTheme");
+// 	// if (document.querySelector("widgetbot-crate")) {
+// 	// 	if (localStorage.getItem("selenite.discordIcon") == "true") {
+// 	// 		const widget = document.querySelector("widgetbot-crate");
+// 	// 		widget.setAttribute("style", "display:none");
+// 	// 	}
+// 	// }
+// 	if (document.querySelector("input#discordIcon")) {
+// 		if (localStorage.getItem("selenite.discordIcon") == "true") {
+// 			iconSetting.checked = true;
+// 		}
+// 		iconSetting.addEventListener("click", () => {
+// 			localStorage.setItem("selenite.discordIcon", iconSetting.checked);
+// 		});
+// 	}
+// 	if (document.querySelector("input#blockClose")) {
+// 		if (localStorage.getItem("selenite.blockClose") == "true") {
+// 			blockClose.checked = true;
+// 		}
+// 		blockClose.addEventListener("click", () => {
+// 			localStorage.setItem("selenite.blockClose", blockClose.checked);
+// 		});
+// 	}
+// 	if (document.querySelector("input#tabDisguise")) {
+// 		if (localStorage.getItem("selenite.tabDisguise") == "true") {
+// 			tabDisguise.checked = true;
+// 		}
+// 		tabDisguise.addEventListener("click", () => {
+// 			localStorage.setItem("selenite.tabDisguise", tabDisguise.checked);
+// 		});
+// 	}
+// 	if (document.querySelector("input#bgTheme")) {
+// 		bgTheme.checked = true;
+// 	}
+// 	document.getElementById("blank").addEventListener("click", () => {
+// 		win = window.open();
+// 		win.document.body.style.margin = "0";
+// 		win.document.body.style.height = "100vh";
+// 		html = `
+//         <style>*{margin:0;padding:0;border:none}body,iframe{height:100vh;width:100vw}iframe{height:96vh}header{display:flex;height:4vh;justify-content:center;}button{margin-right:100px;height:100%;aspect-ratio: 1 / 1}#reload{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z'/%3E%3C/svg%3E");background-size:cover;}#goBack{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z'/%3E%3C/svg%3E");background-size:cover;}</style><script>
+//         </script><header><button id=goBack></button><button id=reload></button></header><iframe id=selenite></iframe>`;
+// 		win.document.querySelector("html").innerHTML = html;
+// 		win.eval(`let selenite = document.getElementById("selenite");console.log(selenite);selenite.setAttribute("src", "${location.origin}");console.log(selenite);document.getElementById("goBack").addEventListener("click", function () {selenite.contentDocument.location.href = selenite.contentDocument.location.origin;});document.getElementById("reload").addEventListener("click", function () {selenite.contentDocument.location.href = selenite.contentDocument.location.href;})`);
+// 		location.href = "https://google.com";
+// 		close();
+// 	});
+// 	if ($("#panicmode").length > 0) {
+// 		$("#panicmode").prop({ href: panicurl });
+// 	}
+// 	if ($(".seleniteminified").length > 0) {
+// 		$.get("https://raw.githubusercontent.com/skysthelimitt/selenite-optimized/main/build/bookmark.txt", function (data) {
+// 			$(".seleniteminified").prop({ href: data });
+// 		});
+// 		$.get("https://raw.githubusercontent.com/car-axle-client/car-axle-client/v10/dist/build.js", function (data) {
+// 			$(".caraxle").prop({ href: `javascript:${encodeURI(data)}` });
+// 		});
+// 	}
+// });
+// function setPanicMode() {
+// 	if (!$("#panic").val().startsWith("https")) {
+// 		document.cookie = "panicurl=https://" + $("#panic").val();
+// 		return;
+// 	}
+
+// 	document.cookie = "panicurl=" + $("#panic").val();
+// }
+// function copyToClipboard(text) {
+// 	navigator.clipboard.writeText(text);
+// 	alert("Copied text!");
+// }
+// function setTheme(theme) {
+// 	localStorage.setItem("selenite.theme", theme);
+// 	document.body.setAttribute("theme", theme);
+// 	if (theme != "custom") {
+// 		document.getElementById("customMenu").style.display = "none";
+// 		document.body.style = "";
+// 	}
+// }
+// function setPanicMode() {
+// 	if (!$("#panic").val().startsWith("https")) {
+// 		document.cookie = "panicurl=https://" + $("#panic").val();
+// 		return;
+// 	}
+// 	document.cookie = "panicurl=" + $("#panic").val();
+// }
+// function setPassword() {
+// 	localStorage.setItem("selenite.password", enc.encode(document.getElementById("pass").value));
+// }
+// function delPassword() {
+// 	location.hash = "";
+// 	localStorage.removeItem("selenite.passwordAtt");
+// 	localStorage.removeItem("selenite.password");
+// }
+
+// $(document).ready(function () {
+// 	if (!window.location.href.startsWith("about:")) {
+// 		$("#webicon").attr("placeholder", window.location.href.replace(/\/[^\/]*$/, "/"));
+// 	}
+// });
+// function loadScript(a, b) {
+// 	var c = document.createElement("script");
+// 	(c.type = "text/javascript"), (c.src = a), (c.onload = b), document.head.appendChild(c);
+// }
+// function toast(message, onclick) {
+// 	const toast = document.createElement("div");
+// 	toast.setAttribute("id", "toast");
+// 	console.log(message.time);
+// 	toast.innerHTML = `<div class=samerow><h1>${message.title}${message.time ? ` - ${timeAgo(new Date(message.time * 1000))}` : ""}</h1></div><p>${message.message}</p>`;
+// 	toast.style.animation = "toastFade 6s";
+// 	document.body.appendChild(toast);
+// 	if (onclick) {
+// 		toast.addEventListener("click", onclick);
+// 		toast.style.cursor = "pointer";
+// 	}
+// 	setTimeout(() => {
+// 		toast.remove();
+// 	}, 6000);
+// }
+// function timeAgo(input) {
+// 	const date = input instanceof Date ? input : new Date(input);
+// 	const formatter = new Intl.RelativeTimeFormat("en");
+// 	const ranges = {
+// 		years: 3600 * 24 * 365,
+// 		months: 3600 * 24 * 30,
+// 		weeks: 3600 * 24 * 7,
+// 		days: 3600 * 24,
+// 		hours: 3600,
+// 		minutes: 60,
+// 		seconds: 1,
+// 	};
+// 	const secondsElapsed = (date.getTime() - Date.now()) / 1000;
+// 	for (let key in ranges) {
+// 		if (ranges[key] < Math.abs(secondsElapsed)) {
+// 			const delta = secondsElapsed / ranges[key];
+// 			return formatter.format(Math.round(delta), key);
+// 		}
+// 	}
+// }
+// let cookieConsentScript = document.createElement("script");
+// cookieConsentScript.src = "/js/cookieConsent.js";
+// document.head.appendChild(cookieConsentScript);
+// let cookieConsentStyle = document.createElement("link");
+// cookieConsentStyle.href = "/js/cookieConsent.css";
+// cookieConsentStyle.rel = "stylesheet";
+// document.head.appendChild(cookieConsentStyle);
+>>>>>>> c2041b6 (first dev commit)
--- a/js/particlesjs-config.json
+++ b/js/particlesjs-config.json
@ -0,0 +1,105 @@
+{
+  "particles": {
+    "number": {
+      "value": 100,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 1
+      }
+    },
+    "opacity": {
+      "value": 1,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 1,
+        "opacity_min": 0,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 5,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 1,
+        "size_min": 0.3,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 0.4,
+      "direction": "bottom",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": true,
+        "rotateX": 5000,
+        "rotateY": 5000
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "window",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "grab"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 200,
+        "line_linked": {
+          "opacity": 0.3
+        }
+      },
+      "bubble": {
+        "distance": 250,
+        "size": 0,
+        "duration": 2,
+        "opacity": 0,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 50,
+        "duration": 1
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
--- a/loader.html
+++ b/loader.html
@ -16,6 +16,7 @@
 		<script src="/js/main.js"></script>
 		<script>
 			document.addEventListener("DOMContentLoaded", () => {
+<<<<<<< HEAD
 				if (document.location.hash) {
 					let game = JSON.parse(decodeURIComponent(atob(document.location.hash.substring(1))));
 					document.getElementById("gameFrame").setAttribute("src", `/semag/${game[0]}/index.html`);
@ -23,12 +24,24 @@
 					document.getElementById("gameName").innerText = game[2];
 					localStorage.setItem("selenite.lastGame", document.location.hash.substring(1))
 					document.location.hash = '';
+=======
+				if (location.search != "") {
+					let items = {};
+					location.search.substr(1).split("&").forEach((e)=>{
+						items[e.split("=")[0]] = e.split("=")[1]
+					});
+					document.getElementById("gameFrame").setAttribute("src", `/semag/${items.dir}/index.html`);
+					document.getElementById("gameImage").setAttribute("src", `/semag/${items.dir}/${items.img}`);
+					document.getElementById("gameName").innerText = decodeURIComponent(items.title);
+					console.log(items);
+>>>>>>> c2041b6 (first dev commit)
 				} else if(localStorage.getItem("selenite.lastGame")) {
 					let game = JSON.parse(decodeURIComponent(atob(localStorage.getItem("selenite.lastGame"))));
 					document.getElementById("gameFrame").setAttribute("src", `/semag/${game[0]}/index.html`);
 					document.getElementById("gameImage").setAttribute("src", `/semag/${game[0]}/${decodeURIComponent(game[1])}`);
 					document.getElementById("gameName").innerText = game[2];
 				}
+<<<<<<< HEAD
 				document.getElementById("fullscreen").addEventListener("click", () => {
 					
 				})
@ -38,10 +51,22 @@
 		<link rel="stylesheet" href="/style.css" />
 		<link rel="manifest" href="/manifest.json" />

+=======
+				// document.getElementById("fullscreen").addEventListener("click", () => {
+					
+				// })
+			});
+		</script>
+
+		<link rel="stylesheet" href="/css/main.css" />
+		<link rel="stylesheet" href="/css/pages.css" />
+		<link rel="stylesheet" href="/css/loader.css" />
+>>>>>>> c2041b6 (first dev commit)
 		<!-- seo + other things -->
 		<title>Selenite</title>
 		<link rel="icon" href="/favicon.ico" />
 	</head>
+<<<<<<< HEAD
 	<alerts> </alerts>
 	<body>
 		<header>
@ -73,5 +98,18 @@
 			<a href="/support.html">Donate</a>
 			<a href="/about.html">About</a>
 		</footer>
+=======
+	<body>
+		<div id="gamecontainer">
+			<iframe id="gameFrame" allow="fullscreen" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-scripts allow-same-origin"></iframe>
+			<div id="infobox">
+				<img id="gameImage" src="favicon.png" />
+				<h2 id="gameName">Selenite</h2>
+				<div class="opposite">
+					<img class="button" id="fullscreen" src="/img/fullscreen.svg">
+				</div>
+			</div>
+		</div>
+>>>>>>> c2041b6 (first dev commit)
 	</body>
 </html>
--- a/projects.html
+++ b/projects.html
@ -17,7 +17,13 @@
 		<script src="/js/cookie.js"></script>

 		
+<<<<<<< HEAD
 		<link rel="stylesheet" href="/style.css" />
+=======
+		<link rel="stylesheet" href="/css/main.css" />
+		<link rel="stylesheet" href="/css/pages.css" />
+		<link rel="stylesheet" href="/css/games.css" />
+>>>>>>> c2041b6 (first dev commit)
 		

 		<!-- seo + other things -->
@ -31,6 +37,7 @@
 		crossorigin="anonymous"></script>
 		<script></script>
 	</head>
+<<<<<<< HEAD
 	<alerts>
 		<div id="toast"></div>
 		<script>
@ -108,5 +115,35 @@
 				}
 			});
 		</script>
+=======
+	<body>
+		<div id="particles-js"></div>
+			<!-- <input class="hiddenUpload" type="file" accept=".save" hidden /> -->
+<!--  -->
+			<!-- <div class="samerow"> -->
+					<!-- <button onclick="downloadMainSave()">Download Save</button> -->
+				<!-- <button id="upload" onclick="uploadMainSave()">Upload Save</button> -->
+			<!-- </div> -->
+			<!-- <div class="samerow"> -->
+				<!-- <button id="random" onclick="selectRandomGame()">Play a random game!</button> -->
+				<!-- <button id="category" onclick="categoryChanger()">Game Categories</button> -->
+			<!-- </div> -->
+<!--  -->
+			<!-- <h2>Starred Games</h2> -->
+			<!-- <p id="pinnedmessage">Star some games for things to show up here!</p>
+			<div id="pinned"></div> -->
+
+			<!-- <h2>All Games</h2> -->
+			<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
+			<div id="games">
+				<!-- <a href="/suggest.html"
+					><div class="suggest">
+						<img src="img/addlink.svg" alt="Add Game logo" style="filter: invert(1) !important" />
+						<h1>Suggest a game!</h1>
+					</div></a> -->
+				<!-- <p id="message">games loading..</p> -->
+				<p id="noResults">nothing was found! try a new search query.</p>
+			</div>
+>>>>>>> c2041b6 (first dev commit)
 	</body>
 </html>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z"/></svg>`