bookmarklets page, apps, info/credits, other misc

This commit is contained in:
sky
2025-08-12 14:15:49 -04:00
parent 0c2d272068
commit b6c7d612a4
19 changed files with 589 additions and 560 deletions

109
apps.html
View File

@ -12,122 +12,35 @@
<script src="/js/apps.js"></script>
<script src="/js/search.js"></script>
<script src="/js/main.js"></script>
<script src="/js/widget.js"></script>
<script src="/js/themes.js"></script>
<script src="/js/cookie.js"></script>
<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" />
<!-- seo + other things -->
<title>Apps | Selenite</title>
<title>Projects | Selenite</title>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
<!-- toastify -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563"
crossorigin="anonymous"></script>
<script></script>
</head>
<alerts>
<div id="toast"></div>
<script>
$.getJSON("data/changelog.json", (data) => {
if (localStorage.getItem("selenite.version") != data.version) {
toast({ title: "New Update!", message: data.desc, time: data.timestamp });
localStorage.setItem("selenite.version", data.version);
}
});
function toast(message, type) {
const toast = document.getElementById("toast");
toast.innerHTML = `<div class=samerow><h1>${message.title} - ${timeAgo(new Date(message.time * 1000))}</h1></div><p>${message.message}</p>`;
toast.style.animation = "toastFade 6s";
}
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);
}
}
}
</script>
</alerts>
<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>
<h3 id="popunder" style="display: none;">You may be redirected upon clicking on the screen. This is an ad. <a style="font-size: inherit;" href="ad.html">Learn more.</a></h3>
<input class="hiddenUpload" type="file" accept=".save" hidden />
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
<div class="samerow">
<sl-tooltip content="Remember to download your save, so you don't lose your progress." trigger="manual" class="manual-tooltip">
<button onclick="downloadMainSave()">Download Save</button>
</sl-tooltip>
<button id="upload" onclick="uploadMainSave()">Upload Save</button>
<p id="starredHeader">starred apps</p>
<div id="starredgames">
</div>
<h2>Starred Apps</h2>
<p id="pinnedmessage">Star some apps for things to show up here!</p>
<div id="pinned"></div>
<h2>All Apps</h2>
<p id="allHeader">all apps</p>
<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 app!</h1>
</div></a
>
<p id="message">apps loading..</p>
<p id="message">apps not loading? click ctrl + shift + r</p>
<button id="message" onclick='$.getJSON("/data/apps.json", function (data) {loadGames(data)})'>Apps not loading? Click here.</button>
<p id="loadingMsg">games loading..</p>
<p id="noResults">nothing was found! try a new search query.</p>
</div>
<br />
</main>
<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>
<script>
document.addEventListener("DOMContentLoaded", function () {
const adContainers = document.querySelectorAll("[id=adcontainer]");
if (adContainers.length > 0) {
for (let i = 0; i < adContainers.length; i++) {
if (Math.random() < 0.5 && localStorage.getItem("selenite.adblock") != "true") {
adContainers[i].innerHTML = "";
}
}
}
});
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

38
css/bookmarklets.css Normal file
View File

@ -0,0 +1,38 @@
.bookmarklet {
width: 90vw;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
height: 100%;
gap: 0px;
}
.bookmarkletdiv {
width: 25vw;
height: 15vh;
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);
}
.bookmarkletdiv a {
width: 90%;
}
.bookmarkletdiv:hover {
transform: scale(1.1);
filter:brightness(1.15);
}
#bookmarklets {
display: flex;
height: auto;
width: 90%;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}

View File

@ -35,6 +35,7 @@
padding: 2px;
width: 7%;
transition-duration: 0.25s;
cursor: pointer;
}
.button:hover {
filter: brightness(1.1);

View File

@ -138,11 +138,12 @@ input[type=text]::placeholder, input[type=password]::placeholder {
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background-color: var(--color-3);
background-color: color-mix(in srgb, var(--color-2) 70%, #00000000 30%);
border-radius: 10px;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 5px 5px var(--color-3);
backdrop-filter: blur(2px);
box-shadow: 0 0 10px var(--color-2);
}
#popup input {
width: 90%;

View File

@ -43,6 +43,15 @@ p {
margin-right: auto;
max-width: 33.3%;
}
.profile-element h2 {
font-size: 32px;
}
.profile-element h2 {
font-size: 28px;
}
.profile-element h3 {
font-size: 20px;
}
#enter {
position: absolute;
width: 100vw;
@ -57,20 +66,29 @@ p {
flex-direction: column;
transition-duration: 1s;
}
#edit {
width: 48px;
cursor: pointer;
}
#search {
height: 36px !important;
}
.edit {
cursor: context-menu;
}
#blur {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
backdrop-filter: blur(16px);
z-index: 999;
display: none;
}
results {
display: flex;
width: 95%;
height: 120px;
overflow-y: scroll;
background-color: var(--color-4);
box-shadow: 0 0 10px var(--color-4);
background-color: color-mix(in srgb, var(--color-3) 50%, #00000000 50%);
box-shadow: 0 0 10px var(--color-3);
bottom: 16px;
flex-direction: column;
border-radius: 8px;
@ -83,8 +101,12 @@ result {
margin: 2px;
width: auto;
text-align: left;
display: flex;
display: none;
flex-direction: column;
transition-duration: 0.25s;
}
result:hover {
background-color: #ffffff11;
}
result h2 {
font-size: 16px;
@ -93,4 +115,9 @@ result h2 {
result p {
font-size: 12px;
margin: 0px;
line-height: 16px;
width: 80%;
}
.about {
width: 70%;
}

View File

@ -34,7 +34,7 @@ iframe {
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);
margin-bottom: calc(100vh - 26px * 8 - ((6px + 6px) * 2) * 8);
}
.sidebar-item-descriptor {

View File

@ -18,8 +18,8 @@ body[theme=blackandwhite] {
}
body[theme=grass] {
--text-color: #ffffff;
--bg-1: #1d3024;
--bg-2: #385041;
--bg-1: #385041;
--bg-2: #1d3024;
--color-1: #a8e5a7;
--color-2: #559b7a;
--color-3: #3a5c3f;
@ -27,8 +27,8 @@ body[theme=grass] {
}
body[theme=evil] {
--text-color: #ffffff;
--bg-1: #591414;
--bg-2: #ba2a2a;
--bg-1: #ba2a2a;
--bg-2: #591414;
--color-1: #eb8181;
--color-2: #ae4141;
--color-3: #7b3838;

49
css/users.css Normal file
View File

@ -0,0 +1,49 @@
#users {
display: flex;
height: auto;
width: 90%;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.users {
width: 25vw;
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.5s;
backdrop-filter: blur(2px);
box-shadow: 0 0 10px var(--color-2);
text-decoration: none;
text-align: right;
}
.users:hover {
transform: scale(1.05);
filter:brightness(1.15);
}
.users img {
height: 80%;
border-radius: 15px;
aspect-ratio: 1 / 1;
margin: 20px;
justify-self: left;
margin-right: auto;
}
.user_info {
width: 60%;
margin: 12px;
}
.user_info h1 {
font-size: 20px;
}
.user_info p {
font-size: 12px;
}
.pages-btn {
margin: 6px;
}

1
img/info.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

After

Width:  |  Height:  |  Size: 535 B

1
img/reload.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path 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"/></svg>

After

Width:  |  Height:  |  Size: 333 B

View File

@ -88,6 +88,7 @@
<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 -->
<div class="sidebar-item"><a href="#" target="/info"><img src="/img/info.svg" /></a><div class="sidebar-item-descriptor">information</div></div> <!-- info -->
</sidebar>
</body>
</html>

77
info.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html 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>
<!-- 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">information</h1>
<h2>credits</h2>
<p>whilst the majority of the work has been done by the creator, sky, selenite would not be possible without some key sources and people.</p>
<p><a href="https://github.com/a456pur/seraph">seraph</a> by <a href="https://a456pur.dev">a456pur</a></p>
<p><a href="https://gitlab.com/3kh0/3kh0-assets">3kh0 assets</a> by <a href="https://3kh0.com">3kh0</a></p>
</body>
</html>

View File

@ -1,197 +1,142 @@
$.getJSON("/data/apps.json", function (data) {
if (document.readyState === "complete") {
loadGames(data);
} else {
let areGamesReady = setInterval(() => {
if (document.readyState === "complete") {
loadGames(data);
clearInterval(areGamesReady);
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("/resources/apps.json")).json();
let sorted = data.sort((a, b) => {
const n1 = a.name.toUpperCase();
const n2 = b.name.toUpperCase();
if (n1 < n2) {
return -1;
}
}, 50);
if (n1 > n2) {
return 1;
}
// shouldnt happen but just incase
return 0;
});
function loadGames(data) {
starredgames = getCookie("starred");
if (!starredgames) {
starredgames = [];
} else {
starredgames = JSON.parse(decodeURIComponent(getCookie("starred")));
}
$("#gamesearch").prop({
placeholder: "Click here to search through our " + data.length + " apps!",
let gamesElement = document.getElementById("games");
let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
sorted.forEach(element => {
isStarred = starredGames.indexOf(element.directory) != -1;
let newElement = document.createElement("game");
newElement.setAttribute("data-target", element.directory);
newElement.setAttribute("data-image", element.image);
let image = document.createElement("img");
image.src = `/resources/sppa/${element.directory}/${element.image}`
let holder = document.createElement("div");
holder.id = "holder";
let title = document.createElement("h1");
title.innerText = element.name;
let star = document.createElement("img");
star.id = "star";
star.classList = "star";
star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg";
newElement.appendChild(image);
holder.appendChild(title);
holder.appendChild(star);
newElement.appendChild(holder);
gamesElement.appendChild(newElement);
elements.push(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
});
data.sort(dynamicSort("name"));
gamelist = data;
for (let i = 0; i < data.length; i++) {
let $element = $("<a>")
.attr({
class: "game",
id: data[i].directory,
recommended: data[i].recommended,
href: "sppa/" + data[i].directory + "/index.html",
star.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
});
});
document.getElementById("loadingMsg").style.display = "none";
document.getElementById("allHeader").style.display = "block";
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
if(starredGames.length > 0) {
document.getElementById("starredHeader").style.display = "block";
starredGames.forEach((e) => {
let element = document.querySelector(`#games game[data-target='${e}']`);
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
});
});
document.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
})
.data("recommended", data[i].recommended)
.append(
$("<img>").prop({
src: "sppa/" + data[i].directory + "/" + data[i].image,
alt: data[i].name + " logo",
})
)
.append($("<h1>").text(data[i].name))
.append(
$("<img>").prop({
src: "img/star.svg",
alt: "star",
class: "star",
}
}
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].childNodes[0].innerText.toUpperCase();
if(title.includes(input)) {
element.style.display = "flex";
} else {
element.style.display = "none";
total++;
}
})
);
if (starredgames.includes(data[i].directory)) {
$element.find("img.star").attr("id", "starred");
$element.find("img.star").attr("src", "img/star-fill.svg");
let $pinnedelement = $element.clone();
$("#pinned").append($pinnedelement);
if ($("#pinnedmessage")) {
$("#pinnedmessage").hide();
}
}
$("#games").append($element);
}
$("#games #message").remove();
if ((search = 1)) {
var txt = $("#gamesearch").val();
if (txt == "") {
$("#games .suggest").show();
} else {
$("#games .suggest").hide();
}
$("#games .game").hide();
$("#games .game").each(function () {
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1 || $(this).attr("id").toUpperCase().indexOf(txt.toUpperCase()) != -1) {
$(this).show();
}
});
}
// starred games
let starred;
$(document).on("click", "img.star", function (event) {
});
$(document).on("click", ".game", function (event) {
if ($(event.target).is("img.star")) {
event.preventDefault();
event.stopPropagation();
if (!$(event.target).attr("id")) {
$(event.target).prop({ id: "starred" });
$(event.target).prop({ src: "img/star-fill.svg" });
starred = Cookies.get("starred");
if (starred) {
starred = JSON.parse(starred);
} else {
starred = [];
}
starred.push($(this).attr("id"));
Cookies.set("starred", JSON.stringify(starred));
$element = $(this).clone();
$("#pinned").append($element);
$("#pinnedmessage").hide();
temp = $("#pinned")[0].childNodes;
pinnedarray = [...temp];
pinnedarray.sort(dynamicSort("id"));
$("#pinned").empty();
for (let i = 0; i < pinnedarray.length; i++) {
pinnedarraynodes = pinnedarray[i].childNodes;
pinnedarraynodes = [...pinnedarraynodes];
let $element = $("<div>")
.prop({
class: "game",
id: pinnedarray[i].id,
document.getElementById("noResults").style.display = total >= elements.length ? "flex" : "none"
})
.append(
$("<img>").prop({
src: pinnedarraynodes[0].src,
alt: pinnedarraynodes[0].alt,
class: "gameicon",
});
function starEvent(e) {
let game = e.target.parentNode.parentNode.getAttribute("data-target");
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
if(starredGames.indexOf(game) == -1) {
starredGames.push(game);
starredGames.sort();
if(starredGames.length > 0) {
document.getElementById("starredHeader").style.display = "block";
} else {
document.getElementById("starredHeader").style.display = "none";
}
localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
e.target.src = "/img/star-fill.svg";
starredgames.innerHTML = "";
starredGames.forEach((e) => {
let element = document.querySelector(`#games game[data-target='${e}']`);
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
});
})
)
.append($("<h1>").text(pinnedarraynodes[1].innerHTML))
.append(
$("<img>").prop({
src: "img/star-fill.svg",
alt: "star",
class: "star",
id: "starred",
} else {
starredGames.splice(starredGames.indexOf(game), 1);
document.querySelectorAll(`game[data-target='${game}'] #star`).forEach((e) => {
e.src = "/img/star.svg";
})
);
$("#pinned").append($element);
}
if(starredGames.length > 0) {
document.getElementById("starredHeader").style.display = "block";
} else {
$(event.target).removeAttr("id");
$(event.target).attr("src", "img/star.svg");
$thisdiv = "#" + $(this).attr("id");
$thisdiv = $thisdiv.replace(".", "\\.");
starred = Cookies.get("starred");
starred = JSON.parse(starred);
ourindex = starred.indexOf($(this).attr("id"));
starred.splice(ourindex, 1);
Cookies.set("starred", JSON.stringify(starred));
$("#pinned " + $thisdiv).remove();
if ($("#pinned").is(":empty")) {
$("#pinnedmessage").show();
}
$($thisdiv + " #starred").attr("src", "img/star.svg");
$($thisdiv + " #starred").removeAttr("id");
}
document.getElementById("starredHeader").style.display = "none";
}
localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
starredgames.innerHTML = "";
starredGames.forEach((e) => {
let element = document.querySelector(`#games game[data-target='${e}']`);
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
});
$(document).on("click", "#game img .star", function (event) {
event.stopPropagation();
$(this).prop({ class: "material-symbols-outlined fill" });
});
}
function redirectGame(dir) {
window.location.href = window.location.origin + "/sppa/" + dir + "/index.html";
}
function dynamicSort(property) {
var sortOrder = 1;
if (property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function (a, b) {
if (sortOrder == -1) {
return b[property].localeCompare(a[property]);
} else {
return a[property].localeCompare(b[property]);
}
};
}
function selectRandomGame() {
redirectGame(gamelist[Math.floor(Math.random() * gamelist.length - 1)].directory);
}
let viewrecommended = 0;
function recommendedGames() {
if (viewrecommended == 0) {
$("#games .game").hide();
$("#games .game").each(function () {
if ($(this).attr("recommended")) {
$(this).show();
}
});
$("#recommend").text("Click to view all apps again!");
viewrecommended = 1;
} else {
$("#games .game").hide();
$("#games .game").show();
viewrecommended = 0;
$("#recommend").text("Click to view recommended apps!");
})
}
document.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
})
})
}

View File

@ -31,9 +31,12 @@
document.getElementById("gameImage").setAttribute("src", `/resources/semag/${game[0]}/${decodeURIComponent(game[1])}`);
document.getElementById("gameName").innerText = game[2];
}
// document.getElementById("fullscreen").addEventListener("click", () => {
// })
document.getElementById("fullscreen").addEventListener("click", () => {
document.getElementById("gameFrame").requestFullscreen();
});
document.getElementById("reload").addEventListener("click", () => {
document.getElementById("gameFrame").src = document.getElementById("gameFrame").src;
});
});
</script>
@ -51,6 +54,7 @@
<img id="gameImage" src="favicon.png" />
<h2 id="gameName">Selenite</h2>
<div class="opposite">
<img class="button" id="reload" src="/img/reload.svg">
<img class="button" id="fullscreen" src="/img/fullscreen.svg">
</div>
</div>

View File

@ -48,7 +48,7 @@
<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.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);