bookmarklets page, apps, info/credits, other misc
This commit is contained in:
109
apps.html
109
apps.html
@ -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
38
css/bookmarklets.css
Normal 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;
|
||||
}
|
@ -35,6 +35,7 @@
|
||||
padding: 2px;
|
||||
width: 7%;
|
||||
transition-duration: 0.25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
filter: brightness(1.1);
|
||||
|
@ -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%;
|
||||
|
@ -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%;
|
||||
}
|
@ -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 {
|
||||
|
@ -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
49
css/users.css
Normal 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
1
img/info.svg
Normal 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
1
img/reload.svg
Normal 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 |
@ -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
77
info.html
Normal 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>
|
311
js/apps.js
311
js/apps.js
@ -1,197 +1,142 @@
|
||||
$.getJSON("/data/apps.json", function (data) {
|
||||
if (document.readyState === "complete") {
|
||||
loadGames(data);
|
||||
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 {
|
||||
let areGamesReady = setInterval(() => {
|
||||
if (document.readyState === "complete") {
|
||||
loadGames(data);
|
||||
clearInterval(areGamesReady);
|
||||
element.style.display = "none";
|
||||
total++;
|
||||
}
|
||||
}, 50);
|
||||
})
|
||||
}
|
||||
document.getElementById("noResults").style.display = total >= elements.length ? "flex" : "none"
|
||||
})
|
||||
});
|
||||
|
||||
function loadGames(data) {
|
||||
starredgames = getCookie("starred");
|
||||
if (!starredgames) {
|
||||
starredgames = [];
|
||||
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 {
|
||||
starredgames = JSON.parse(decodeURIComponent(getCookie("starred")));
|
||||
document.getElementById("starredHeader").style.display = "none";
|
||||
}
|
||||
$("#gamesearch").prop({
|
||||
placeholder: "Click here to search through our " + data.length + " apps!",
|
||||
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")}`
|
||||
});
|
||||
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);
|
||||
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 {
|
||||
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.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);
|
||||
})
|
||||
})
|
||||
}
|
10
loader.html
10
loader.html
@ -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>
|
||||
|
@ -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);
|
||||
|
Reference in New Issue
Block a user