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;
}

View File

@ -1,3 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -121.5 1267 1267" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1051.38 273.973c33.020 11.97 15.241 134.751 13.383 147.531-6.449 44.481-46.39 320.287-301.37 425.313-200.83 82.733-405.414 6.124-517.636-94.338-26.164-23.418-95.503-85.468-79.673-120.661 31.921-71.078 345.732 113.19 588.060-14.614 196.29-103.508 248.947-360.723 297.234-343.232z" fill="#FADC4A" /><path d="M1056.052 465.003c16.589 9.55-18.316 113.74-71.483 194.93-25.485 38.868-90.884 135.679-221.16 186.884-128.862 50.657-241.398 25.315-289.778 13.698-111.502-26.768-215.443-90.518-208.796-109.121 9.917-28.023 246.632 112.653 467.988 28.087 213.743-81.661 297.64-329.222 323.23-314.477z" fill="#D6BC40" /><path d="M587.187 907.507c-43.977-0.069-86.645-5.543-127.414-15.79-83.384-20.24-167.008-63.032-231.282-119.587-37.665-33.138-107.773-94.823-86.843-149.651 13.907-36.395 55.391-38.737 69.037-39.508 26.165-1.479 59.331 2.093 97.673 6.227 61.71 6.657 138.493 14.941 217.327 5.115 1.060-0.152 2.285-0.24 3.529-0.24 14.45 0 26.164 11.714 26.165 26.165 0 13.412-10.091 24.467-23.096 25.987-84.988 10.596-165.131 1.948-229.524-5.013-36.055-3.924-67.192-7.248-89.119-6.018-15.62 0.877-22.371 4.028-23.091 5.939-1.478 3.924 0.864 16.418 19.062 38.829 16.602 20.449 38.777 39.954 53.442 52.868 57.171 50.302 134.907 90.008 213.246 108.938 94.955 22.933 190.782 16.314 277.14-19.152 82.852-34.014 153.877-92.886 205.395-170.074 46.156-69.208 74.387-150.069 79.516-227.635 1.793-27.081 1.714-68.513-3.86-103.549-6.777-42.663-18.512-57.131-24.373-58.95-3.205-0.995-10.361 3.989-18.668 13.083-14.023 15.241-30.090 40.112-48.602 68.892-52.409 81.321-124.179 192.705-253.042 256.143-3.369 1.69-7.342 2.679-11.545 2.679-14.477 0-26.215-11.737-26.215-26.215 0-10.276 5.912-19.168 14.518-23.467 116.010-57.108 183.242-161.428 232.328-237.608 19.86-30.809 37.011-57.432 54.083-75.984 8.869-9.642 35.873-39 72.699-27.564 31.085 9.656 51.453 43.538 60.546 100.737 7.85 49.478 5.35 100.736 4.395 115.219-5.716 86.619-37.035 176.614-88.203 253.279-57.393 85.913-136.542 151.418-229.061 189.422-54.785 23.078-118.471 36.488-185.287 36.488-0.308 0-0.615 0-0.923-0.001z" fill="#000000" /><path d="M600.949 632.316c-0.006 0-0.008 0-0.016 0-14.45 0-26.164-11.714-26.165-26.165 0-11.976 8.044-22.072 19.023-25.178l3.638-1.013c2.179-0.653 4.682-1.032 7.274-1.032 14.45 0 26.164 11.714 26.165 26.165 0 11.954-8.017 22.036-18.968 25.162l-4.109 1.132c-2.068 0.588-4.443 0.928-6.899 0.929z" fill="#000000" /><path d="M536.846 780.267q-10.467 0-21.023-0.443c-43.788-1.832-87.522-9.446-126.482-22.031-10.478-3.575-17.881-13.332-17.881-24.818 0-14.45 11.714-26.164 26.165-26.165 2.787 0 5.473 0.436 7.993 1.245 37.31 12.217 80.479 19.448 125.287 19.793 58.86 2.697 127.189-11.457 190.104-42.385 132.983-65.282 189.030-179.793 207.005-225.988 3.857-9.945 13.349-16.868 24.458-16.868 14.45 0 26.164 11.714 26.165 26.165 0 3.468-0.675 6.779-1.9 9.807-20.085 51.723-83.077 180.363-232.504 253.835-59.99 30.185-130.736 47.86-205.613 47.86-0.624 0-1.245-0.002-1.867-0.005zM986.557 257.488c-91.852-15.948-147.505-94.285-147.283-112.576 0.115-5.789 1.636-11.199 4.232-15.935 2.684-4.569 7.18-8.572 12.577-10.868-3.792 1.997 4.253-3.053 13.843-1.22s15.084 9.157 17.673 12.428c11.604 14.731 22.789 30.089 36.92 42.453 28.521 24.857 58.872 36.985 90.099 35.964 21.167-0.694 41.865-7.286 61.488-19.624 3.974-2.564 8.83-4.086 14.041-4.086 14.45 0 26.164 11.714 26.165 26.165 0 9.368-4.924 17.585-12.322 22.207-30.201 18.891-67.21 27.838-87.763 27.616-10.936-0.076-21.589-1.061-31.952-2.881z" fill="#000000" /></svg>

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

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);
}
}, 50);
}
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;
}
if (n1 > n2) {
return 1;
}
// shouldnt happen but just incase
return 0;
});
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}`
});
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);
})
})
}
}
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++;
}
})
}
document.getElementById("noResults").style.display = total >= elements.length ? "flex" : "none"
})
});
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!",
});
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",
})
.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",
})
);
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,
})
.append(
$("<img>").prop({
src: pinnedarraynodes[0].src,
alt: pinnedarraynodes[0].alt,
class: "gameicon",
})
)
.append($("<h1>").text(pinnedarraynodes[1].innerHTML))
.append(
$("<img>").prop({
src: "img/star-fill.svg",
alt: "star",
class: "star",
id: "starred",
})
);
$("#pinned").append($element);
}
} 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).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!");
}
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")}`
});
})
} else {
starredGames.splice(starredGames.indexOf(game), 1);
document.querySelectorAll(`game[data-target='${game}'] #star`).forEach((e) => {
e.src = "/img/star.svg";
})
if(starredGames.length > 0) {
document.getElementById("starredHeader").style.display = "block";
} else {
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.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
})
})
}

View File

@ -1,97 +1,97 @@
.cookieConsentContainer {
z-index: 999;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: var(--uibg);
box-shadow: 0px 0px 10px 0px var(--uibg);
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
color: #ffffff;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
}
.cookieConsentContainer .cookieDesc a {
color: #ffffff;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: var(--inputbg);
box-sizing: border-box;
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover {
cursor: pointer;
filter: brightness(0.9);
}
@media (max-width: 980px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100% !important;
}
}
.cookieConsentContainer {
z-index: 999;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: var(--uibg);
box-shadow: 0px 0px 10px 0px var(--uibg);
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
color: #ffffff;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
}
.cookieConsentContainer .cookieDesc a {
color: #ffffff;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: var(--inputbg);
box-sizing: border-box;
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover {
cursor: pointer;
filter: brightness(0.9);
}
@media (max-width: 980px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100% !important;
}
}

View File

@ -1,72 +1,72 @@
// --- Config --- //
var purecookieTitle = "Cookies."; // Title
var purecookieDesc = "By using this website, you automatically accept that we use cookies."; // Description
var purecookieLink = 'Selenite uses cookies to store settings and game progress. Selenite is also powered by Google Adsense and a self hosted instance of Plausible Analytics.'; // Cookiepolicy link
var purecookieButton = "Understood"; // Button text
// --- --- //
function pureFadeIn(elem, display){
var el = document.getElementById(elem);
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .04) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
function pureFadeOut(elem){
var el = document.getElementById(elem);
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .04) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
function cookieConsent() {
if (!getCookie('purecookieDismiss')) {
let element = document.createElement("div");
element.innerHTML = '<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>' + purecookieTitle + '</a></div><div class="cookieDesc"><p>' + purecookieDesc + ' ' + purecookieLink + '</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">' + purecookieButton + '</a></div></div>';
document.body.appendChild(element);
pureFadeIn("cookieConsentContainer");
}
}
function purecookieDismiss() {
setCookie('purecookieDismiss','1',7);
pureFadeOut("cookieConsentContainer");
}
window.onload = function() { cookieConsent(); };
// --- Config --- //
var purecookieTitle = "Cookies."; // Title
var purecookieDesc = "By using this website, you automatically accept that we use cookies."; // Description
var purecookieLink = 'Selenite uses cookies to store settings and game progress. Selenite is also powered by Google Adsense and a self hosted instance of Plausible Analytics.'; // Cookiepolicy link
var purecookieButton = "Understood"; // Button text
// --- --- //
function pureFadeIn(elem, display){
var el = document.getElementById(elem);
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .04) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
function pureFadeOut(elem){
var el = document.getElementById(elem);
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .04) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
function cookieConsent() {
if (!getCookie('purecookieDismiss')) {
let element = document.createElement("div");
element.innerHTML = '<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>' + purecookieTitle + '</a></div><div class="cookieDesc"><p>' + purecookieDesc + ' ' + purecookieLink + '</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">' + purecookieButton + '</a></div></div>';
document.body.appendChild(element);
pureFadeIn("cookieConsentContainer");
}
}
function purecookieDismiss() {
setCookie('purecookieDismiss','1',7);
pureFadeOut("cookieConsentContainer");
}
window.onload = function() { cookieConsent(); };

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);