From b6c7d612a44dfe0d7ac018f43301da4e73241918 Mon Sep 17 00:00:00 2001 From: sky Date: Tue, 12 Aug 2025 14:15:49 -0400 Subject: [PATCH] bookmarklets page, apps, info/credits, other misc --- apps.html | 109 ++------------ bookmarklets.html | 129 +++++++--------- css/bookmarklets.css | 38 +++++ css/loader.css | 1 + css/pages.css | 5 +- css/profile.css | 41 +++++- css/sidebar.css | 2 +- css/themes.css | 8 +- css/users.css | 49 +++++++ img/badges/banana.svg | 4 +- img/info.svg | 1 + img/reload.svg | 1 + index.html | 1 + info.html | 77 ++++++++++ js/apps.js | 333 ++++++++++++++++++------------------------ js/cookieConsent.css | 194 ++++++++++++------------ js/cookieConsent.js | 144 +++++++++--------- loader.html | 10 +- settings.html | 2 +- 19 files changed, 589 insertions(+), 560 deletions(-) create mode 100644 css/bookmarklets.css create mode 100644 css/users.css create mode 100644 img/info.svg create mode 100644 img/reload.svg create mode 100644 info.html diff --git a/apps.html b/apps.html index 122685e..874b71b 100755 --- a/apps.html +++ b/apps.html @@ -12,122 +12,35 @@ - - + + + - Apps | Selenite + Projects | Selenite - + - -
- -
-
- Home - Bookmarklets - Games - Apps - Settings - Open Blank - - -
-
- - - -
- - - - +

starred apps

+
- -

Starred Apps

-

Star some apps for things to show up here!

-
- -

All Apps

+

all apps

-
- Add Game logo -

Suggest a app!

-
-

apps loading..

-

apps not loading? click ctrl + shift + r

- +

games loading..

+

nothing was found! try a new search query.

-
-
- - - diff --git a/bookmarklets.html b/bookmarklets.html index b8107ff..0f445c3 100755 --- a/bookmarklets.html +++ b/bookmarklets.html @@ -1,98 +1,79 @@ - + - - - - - + + + + + + + + + + + + - + - - - - + + + + - Bookmarklets | Selenite + Selenite - - - - - + - + -
- Home - Bookmarklets - Games - Apps - Settings - Open Blank - - -
- -
- - - - -

Bookmarklets

-

Official Selenite Bookmarklets

+

bookmarklets

+

drag the underlined text to your bookmarks bar and click it to use it

- Selenite Save Utility -

This is the official Selenite Save Utility, which allows you to download your data from any website easily.

+ Adblocker +

This is a simple adblocker in a bookmarklet, may not work that great.

- Selenite Upload Utility -

This is the official Selenite Upload Utility, which allows you to upload a Selenite save file to any website easily.

-
-
- Selenite Adblocker -

This is the official Selenite Adblocker bookmarklet, which blocks suspicious frames that are likely advertisements.

-
-
- Selenite Minified -

This is a minified version of Selenite, that you can open at any time, without relying on a single website.

-
-
- The Ultimate Tab Cloak + The Ultimate Tab Cloak

Disguise any website you're on as Canvas, Desmos, or Google Drive!

-

Other Bookmarklets

- Car Axle Client + Car Axle Client

Car Axle Client is a bookmarklet with tons of features, including a mini browser, YouTube embedder, and tons of other smaller scripts! (made by Penguinify)

- Stats.js + Stats.js

This allows you to view your FPS, RAM, and MS.

- Edit any page + Edit any page

This allows you to edit the text of any webpage.

- X-Ray Goggles + X-Ray Goggles

This allows you to view and edit the source code of any website, like a more powerful version of "Edit any page".

@@ -100,35 +81,25 @@

This bookmarklet floods your history. Credits to awesome78910.

- Dark Mode + Dark Mode

This sets any page to dark mode.

- Piano + Piano

This adds a piano to the page.

- Developer Console + Developer Console

This adds all features of the developer console to whatever page your on.

- Asteroids + Asteroids

This allows you to play Asteroids on the website you are on, destroying everything.

- Katamari + Katamari

This allows you to collect the words on the page into a ball. Fun game, I recommend playing it.

-
- - \ No newline at end of file diff --git a/css/bookmarklets.css b/css/bookmarklets.css new file mode 100644 index 0000000..ac4bbb1 --- /dev/null +++ b/css/bookmarklets.css @@ -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; +} \ No newline at end of file diff --git a/css/loader.css b/css/loader.css index 10db70e..660e4b4 100644 --- a/css/loader.css +++ b/css/loader.css @@ -35,6 +35,7 @@ padding: 2px; width: 7%; transition-duration: 0.25s; + cursor: pointer; } .button:hover { filter: brightness(1.1); diff --git a/css/pages.css b/css/pages.css index 8d01ea8..04df717 100755 --- a/css/pages.css +++ b/css/pages.css @@ -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%; diff --git a/css/profile.css b/css/profile.css index 3e01b4d..ad5493d 100644 --- a/css/profile.css +++ b/css/profile.css @@ -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%; +} \ No newline at end of file diff --git a/css/sidebar.css b/css/sidebar.css index dd32ceb..6ed3ac4 100755 --- a/css/sidebar.css +++ b/css/sidebar.css @@ -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 { diff --git a/css/themes.css b/css/themes.css index c493de1..8e521b8 100755 --- a/css/themes.css +++ b/css/themes.css @@ -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; diff --git a/css/users.css b/css/users.css new file mode 100644 index 0000000..a48e22c --- /dev/null +++ b/css/users.css @@ -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; +} \ No newline at end of file diff --git a/img/badges/banana.svg b/img/badges/banana.svg index dd37b84..2e02b8b 100755 --- a/img/badges/banana.svg +++ b/img/badges/banana.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/img/info.svg b/img/info.svg new file mode 100644 index 0000000..9ae001c --- /dev/null +++ b/img/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/reload.svg b/img/reload.svg new file mode 100644 index 0000000..87b1132 --- /dev/null +++ b/img/reload.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 9ea8d3b..0068477 100755 --- a/index.html +++ b/index.html @@ -88,6 +88,7 @@ + diff --git a/info.html b/info.html new file mode 100644 index 0000000..d8f89b7 --- /dev/null +++ b/info.html @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Selenite + + + + + +

information

+

credits

+

whilst the majority of the work has been done by the creator, sky, selenite would not be possible without some key sources and people.

+

seraph by a456pur

+

3kh0 assets by 3kh0

+ + diff --git a/js/apps.js b/js/apps.js index bb7cca1..106d1ff 100755 --- a/js/apps.js +++ b/js/apps.js @@ -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 = $("") - .attr({ - class: "game", - id: data[i].directory, - recommended: data[i].recommended, - href: "sppa/" + data[i].directory + "/index.html", - }) - .data("recommended", data[i].recommended) - .append( - $("").prop({ - src: "sppa/" + data[i].directory + "/" + data[i].image, - alt: data[i].name + " logo", - }) - ) - .append($("

").text(data[i].name)) - .append( - $("").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 = $("
") - .prop({ - class: "game", - id: pinnedarray[i].id, - }) - .append( - $("").prop({ - src: pinnedarraynodes[0].src, - alt: pinnedarraynodes[0].alt, - class: "gameicon", - }) - ) - .append($("

").text(pinnedarraynodes[1].innerHTML)) - .append( - $("").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); + }) + }) } \ No newline at end of file diff --git a/js/cookieConsent.css b/js/cookieConsent.css index cd15f53..e922660 100755 --- a/js/cookieConsent.css +++ b/js/cookieConsent.css @@ -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; + } +} diff --git a/js/cookieConsent.js b/js/cookieConsent.js index e09952c..7786e73 100755 --- a/js/cookieConsent.js +++ b/js/cookieConsent.js @@ -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 = '

' + purecookieDesc + ' ' + purecookieLink + '

'; - 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 = '

' + purecookieDesc + ' ' + purecookieLink + '

'; + document.body.appendChild(element); + pureFadeIn("cookieConsentContainer"); + } +} + +function purecookieDismiss() { + setCookie('purecookieDismiss','1',7); + pureFadeOut("cookieConsentContainer"); +} + +window.onload = function() { cookieConsent(); }; diff --git a/loader.html b/loader.html index 3635d68..c4153ec 100755 --- a/loader.html +++ b/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; + }); }); @@ -51,6 +54,7 @@

Selenite

+
diff --git a/settings.html b/settings.html index 5191077..a205945 100755 --- a/settings.html +++ b/settings.html @@ -48,7 +48,7 @@