selenite/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign loader

Browse Source
This commit is contained in:
sky
2025-09-25 17:57:35 -04:00
parent 9395403389
commit 7fca0fbde6
7 changed files with 94 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
404.html
View File

@ -1,101 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="sl-theme-dark" lang="en"> <html lang="en">
<head> <head>
<!-- initialize theme vars <!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff --> https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
<!-- initialize externals --> <!-- initialize externals -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <meta property="og:title" content="Selenite" />
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script> <meta property="description" content="Selenite is the best unblocked games site. With over 400 games and an account system, no other websites come close to Selenite." />
<meta 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." />
<!-- initialize my stuff --> <meta property="og:title" content="Selenite">
<script src="/js/all.min.js"></script> <meta property="og:type" content="website">
<script src="/js/main.js"></script>
<script src="/js/widget.js"></script> <script type="application/ld+json">
<script src="/js/themes.js"></script> {
"@context": "https://schema.org",
<link rel="stylesheet" href="/style.css" /> "@type": "Organization",
"name": "Selenite",
"alternateName": "selenite.cc",
"url": "https://selenite.cc",
"logo": "https://selenite.cc/favicon.png",
"sameAs": [
<!-- seo + other things --> "https://github.com/selenite-cc",
<title>Selenite</title> "https://youtube.com/@selenitecc",
<link rel="icon" href="/favicon.ico" /> "https://tiktok.com/@selenitecc",
"https://selenite.cc",
<meta name="viewport" content="width=device-width,initial-scale=1" /> ]
<!-- toastify -->
<script>
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"
}
} }
})
</script>
</head>
<alerts>
</alerts>
<body id="noscroll">
<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 id="main" class="noscroll">
<h1>Page not found!</h1>
<p>We could not find this page.</p>
<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>
<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> </script>
</main> <!-- initialize my stuff -->
<script src="/js/all.js"></script>
<footer class="noscroll"> <script src="/js/main.js"></script>
<a href="https://gitlab.com/skysthelimit.dev/selenite">Source</a> <!-- <script src="/js/widget.js"></script> -->
<a href="https://discord.gg/7jyufnwJNf">Discord</a> <script>
<a href="/suggest.html">Suggestions & Bugs</a> document.addEventListener("DOMContentLoaded", () => {
<a href="/contact.html">Contact</a> setBackground();
<a href="/support.html">Donate</a> fetch("/quotes.json")
<a href="/about.html">About</a> .then((response) => response.json())
</footer> .then((data) => {
const randomQuote = data[Math.floor(Math.random() * data.length)];
</body>
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>404 | 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">page not found</h1>
<p>we could not find the page you were trying to open. try again?</p>
<p>:3</p>
</body>
</html> </html>

4
css/games.css
View File

@ -8,7 +8,7 @@ game {
cursor: pointer; cursor: pointer;
border-radius: 20px; border-radius: 20px;
margin: 15px; margin: 15px;
transition-duration: 0.25s; /* transition-duration: 0.25s; */
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
box-shadow: 0 0 10px var(--color-2); box-shadow: 0 0 10px var(--color-2);
} }
@ -43,7 +43,7 @@ game img {
justify-self: right; justify-self: right;
margin-left: auto; margin-left: auto;
margin-right: 15px; margin-right: 15px;
transition-duration: 0.25s; /* transition-duration: 0.25s; */
} }
#star:hover { #star:hover {
transform: scale(1.1); transform: scale(1.1);

26
css/loader.css
View File

@ -1,28 +1,22 @@
#gamecontainer { body {
width: 90vw; overflow: hidden;
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 { #gameFrame {
width: 99%; width: 100vw;
height: 75vh; height: 90vh;
margin: 0.5%; margin: 0;
margin-bottom: 0;
border-radius: 10px;
} }
#infobox { #infobox {
height: 8vh; height: 10vh;
width: 100%; width: 100%;
margin: 1% 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #000000;
backdrop-filter: blur(4px);
} }
#infobox img { #infobox img {
height: 100%; height: 90%;
margin: 0.5%; margin: 0.5%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
border-radius: 8px; border-radius: 8px;
@ -34,7 +28,7 @@
margin: 4px; margin: 4px;
padding: 2px; padding: 2px;
width: 7%; width: 7%;
transition-duration: 0.25s; /* transition-duration: 0.25s; */
cursor: pointer; cursor: pointer;
} }
.button:hover { .button:hover {

4
css/main.css
View File

@ -83,7 +83,7 @@ select,
select { select {
padding: 8px; padding: 8px;
background-color: color-mix(in srgb, var(--color-4) 30%, #00000000 70%); background-color: color-mix(in srgb, var(--color-4) 30%, #00000000 70%);
transition-duration: 0.25s; /* transition-duration: 0.25s; */
color: var(--text-color); color: var(--text-color);
border-radius: 4px; border-radius: 4px;
} }
@ -119,6 +119,6 @@ mobile-warning {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
transition-duration: 1s; /* transition-duration: 1s; */
text-align: center; text-align: center;
} }

5
css/sidebar.css
View File

@ -81,11 +81,16 @@ iframe {
height: 15px; height: 15px;
width: 70px; width: 70px;
z-index: 5; z-index: 5;
filter: drop-shadow(0 0 16px #fff5);
} }
#bottom-menu[enabled=true] { #bottom-menu[enabled=true] {
bottom: 10px; bottom: 10px;
color: white; color: white;
filter: drop-shadow(0 0 16px #fff5);
z-index: 0;
} }
#open-bottom-menu[enabled=true] { #open-bottom-menu[enabled=true] {
bottom: 60px; bottom: 60px;
filter: drop-shadow(0 0 0 #fff5);
opacity: 0;
} }

1
info.html
View File

@ -59,6 +59,7 @@
<p><a href="https://gitlab.com/3kh0/3kh0-assets">3kh0 assets</a> by <a href="https://3kh0.com">3kh0</a> (games)</p> <p><a href="https://gitlab.com/3kh0/3kh0-assets">3kh0 assets</a> by <a href="https://3kh0.com">3kh0</a> (games)</p>
<p><a href="https://github.com/genizy/web-port">web ports</a> by <a href="https://gn-math.github.io/">gn-math</a> (games)</p> <p><a href="https://github.com/genizy/web-port">web ports</a> by <a href="https://gn-math.github.io/">gn-math</a> (games)</p>
<p><a href="https://github.com/genizy/web-port">more ports</a> by <a href="https://truffled.lol/">bog</a> (games)</p> <p><a href="https://github.com/genizy/web-port">more ports</a> by <a href="https://truffled.lol/">bog</a> (games)</p>
<p>even more ports by <a href="https://www.slqnt.dev/">slqnt</a> (games)</p>
<p><a href="https://cobalt.tools">cobalt</a> by <a href="https://github.com/imputnet">imputnet</a> (music implementation)</p> <p><a href="https://cobalt.tools">cobalt</a> by <a href="https://github.com/imputnet">imputnet</a> (music implementation)</p>
<h2>suggest a game</h2> <h2>suggest a game</h2>
<p>you can either <a href="support@selenite.cc">email us</a> or <a href="https://discord.gg/discord">join the discord</a> to suggest a game/other improvements.</p> <p>you can either <a href="support@selenite.cc">email us</a> or <a href="https://discord.gg/discord">join the discord</a> to suggest a game/other improvements.</p>

18
loader.html
View File

@ -9,11 +9,9 @@
<meta content="Selenite is the best unblocked games site. With over 400 games, an account system, and a free AI chat bot, no other websites come close to Selenite." property="og:description" /> <meta content="Selenite is the best unblocked games site. With over 400 games, an account system, and a free AI chat bot, no other websites come close to Selenite." property="og:description" />
<meta content="/favicon.png" property="og:image" /> <meta content="/favicon.png" property="og:image" />
<meta content="#c77dff" data-react-helmet="true" name="theme-color" /> <meta content="#c77dff" data-react-helmet="true" name="theme-color" />
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script>
<!-- initialize my stuff --> <!-- initialize my stuff -->
<script src="/js/all.min.js"></script> <script src="/js/all.min.js"></script>
<script src="/js/main.js"></script>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
if (location.search != "") { if (location.search != "") {
@ -53,15 +51,13 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</head> </head>
<body> <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>
<iframe id="gameFrame" allow="fullscreen" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-scripts allow-same-origin"></iframe> <div id="infobox">
<div id="infobox"> <img id="gameImage" src="favicon.png" />
<img id="gameImage" src="favicon.png" /> <h2 id="gameName">Selenite</h2>
<h2 id="gameName">Selenite</h2> <div class="opposite">
<div class="opposite"> <img class="button" id="reload" src="/img/reload.svg">
<img class="button" id="reload" src="/img/reload.svg"> <img class="button" id="fullscreen" src="/img/fullscreen.svg">
<img class="button" id="fullscreen" src="/img/fullscreen.svg">
</div>
</div> </div>
</div> </div>
</body> </body>