apps loading..
diff --git a/css/games.css b/css/games.css index 2089bac..6fa0f6e 100755 --- a/css/games.css +++ b/css/games.css @@ -50,7 +50,7 @@ transform: scale(1.1); filter: drop-shadow(0 0 5px var(--color-1)) } -#games, #starredgames, #topGames { +#games, #starredgames, #topGames, #recentgames { width: 90vw; display: flex; flex-direction: row; @@ -64,16 +64,107 @@ font-size: 24px; color: var(--color-1); } -#starredHeader, #allHeader, #topHeader { +#starredHeader, #allHeader, #topHeader, #recentHeader { font-size: 32px; color: var(--color-1); } -#noResults, #starredHeader, #allHeader, #topHeader { +#noResults, #starredHeader, #allHeader, #topHeader, #recentHeader { display: none; } body { justify-content: flex-start; } +.gamesToolbar { + width: 90vw; + max-width: 700px; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 10px; + margin: 10px 0 4px; +} +.gamesToolbar .searchbar { + flex: 2 1 320px; + width: auto; + margin: 0; + padding: 16px 20px; + font-size: 18px; +} +.gamesToolbar #gamesort, +.gamesToolbar #randomGame, +.gamesToolbar #filtersToggle { + margin: 0; + flex: 0 0 auto; +} +.gamesToolbar #randomGame:hover, +.gamesToolbar #filtersToggle:hover { + filter: brightness(1.1); + box-shadow: none; + transform: none; +} +.gamesToolbar #filtersToggle.hasActive { + background-color: var(--color-1); + border-color: var(--color-1); + color: var(--bg-2); + font-weight: bold; +} +.gamesToolbar #filtersToggle.open { + box-shadow: inset 0 0 0 2px var(--text-color); +} +#tagFilters { + display: none; + flex-direction: column; + align-items: center; + gap: 6px; + width: 90vw; + max-width: 700px; + margin: 4px 0 10px; +} +#tagFilters.open { + display: flex; +} +#tagFilters #gamesort { + margin: 0; +} +.filterLabel { + font-size: 16px; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--text-color); + margin: 0; +} +#tagChipsLabel { + margin-top: 8px; +} +#tagChips { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; +} +.tagChip { + border-style: solid; + border-width: 2px; + padding: 6px 14px; + border-radius: 999px; + background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%); + border-color: var(--color-3); + color: var(--text-color); + outline: none; + transition-duration: 0.25s; + font-size: 13px; + cursor: pointer; +} +.tagChip:hover { + filter: brightness(1.15); +} +.tagChip.active { + background-color: var(--color-1); + border-color: var(--color-1); + color: var(--bg-2); + font-weight: bold; +} #gamesort { border-style: solid; border-width: 2px; diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000..88b4f0b --- /dev/null +++ b/css/home.css @@ -0,0 +1,50 @@ +.homeNav { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; + max-width: 700px; + margin-top: 24px; +} +.navCard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + width: 110px; + height: 100px; + border-radius: 16px; + background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%); + box-shadow: 0 0 10px var(--color-2); + backdrop-filter: blur(2px); + text-decoration: none; + color: var(--text-color); + transition-duration: 0.25s; +} +.navCard:hover { + transform: scale(1.1); +} +.navCard img { + width: 32px; + height: 32px; + user-select: none; +} +.navCard span { + font-size: 14px; +} +body[fast] .navCard { + background-color: color-mix(in srgb, var(--color-2) 70%, #000000 30%); + backdrop-filter: blur(0); +} +@-moz-document url-prefix() { + .navCard { + backdrop-filter: blur(0); + } +} +@media screen and (max-width: 500px) { + .navCard { + width: 90px; + height: 85px; + } +} diff --git a/css/pages.css b/css/pages.css index 6c6c2d7..b351a2d 100755 --- a/css/pages.css +++ b/css/pages.css @@ -36,7 +36,7 @@ body { #pjs { width: 100vw; height: 100vh; - position: absolute; + position: fixed; z-index: -1000; border: none; overflow-y: hidden; diff --git a/css/proxy.css b/css/proxy.css new file mode 100644 index 0000000..9f26614 --- /dev/null +++ b/css/proxy.css @@ -0,0 +1,165 @@ +body { + overflow: hidden; + align-items: stretch; + justify-content: flex-start; +} +#proxyBar { + display: flex; + align-items: center; + gap: 8px; + padding: 10px; + flex: 0 0 auto; + background-color: var(--bg-2); + box-shadow: 0 0 10px var(--color-2); + z-index: 10; +} +#proxyBar a { + flex: 0 0 auto; + display: flex; + align-items: center; +} +#proxyBar a img { + width: 28px; + height: 28px; +} +#sj-form { + display: flex; + flex: 1; + gap: 8px; +} +#sj-address { + flex: 1; + width: auto; + margin: 0; + padding: 10px 16px; + font-size: 16px; +} +#proxyBar button { + margin: 0; +} +#proxyFullscreen { + flex: 0 0 auto; + width: 28px; + height: 28px; + cursor: pointer; + transition-duration: 0.25s; + filter: brightness(0.9); +} +#proxyFullscreen:hover { + filter: brightness(1); + transform: scale(1.1); +} +#proxyFullscreen:active { + filter: brightness(1.2); + transform: scale(0.95); +} +#proxyError { + flex: 0 0 auto; + padding: 0 10px; + text-align: left; +} +#proxyError p { + color: #ff8a8a; + font-size: 14px; + margin: 4px 0; +} +#proxyError pre { + color: color-mix(in srgb, var(--text-color) 60%, #00000000 40%); + font-size: 12px; + white-space: pre-wrap; + word-break: break-all; + margin: 0 0 6px; +} +#proxyFrameHolder { + flex: 1; + width: 100%; + position: relative; +} +#sj-frame { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: none; + background-color: black; + display: block; +} +#proxyShortcuts { + width: 100%; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 18px; + padding: 24px 16px; + overflow-y: auto; +} +.filterLabel { + font-size: 16px; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--text-color); + margin: 0; +} +#proxyShortcutsGrid { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0; + width: 90vw; + max-width: 1000px; +} +.proxyShortcut { + width: 20vw; + min-width: 180px; + height: 9vh; + min-height: 64px; + 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; + border: none; + padding: 0; + backdrop-filter: blur(2px); + box-shadow: 0 0 10px var(--color-2); + color: var(--text-color); + outline: none; + transition-duration: 0.25s; + font-family: inherit; +} +.proxyShortcut:hover { + transform: scale(1.1); +} +.proxyShortcut img { + height: calc(100% - 8px); + border-radius: 15px; + aspect-ratio: 1 / 1; + margin: 4px; + margin-right: auto; +} +.proxyShortcutHolder { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-end; + height: 100%; +} +.proxyShortcutHolder h1 { + font-size: 14px; + margin: 15px; + text-align: right; +} +body[fast] .proxyShortcut { + background-color: color-mix(in srgb, var(--color-2) 70%, #000000 30%); + backdrop-filter: blur(0); +} +@-moz-document url-prefix() { + .proxyShortcut { + backdrop-filter: blur(0); + } +} diff --git a/css/settings.css b/css/settings.css index b07f995..db03cb7 100644 --- a/css/settings.css +++ b/css/settings.css @@ -1,6 +1,10 @@ +body { + justify-content: flex-start; +} + section { min-width: 20%; - height: 420px; + min-height: 420px; padding: 8px; margin: 16px; background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%); @@ -27,14 +31,132 @@ sections { margin: 6px; } +.feedback { + min-height: 16px; + font-size: 14px; + margin: 6px 4px 0; + text-align: center; +} + +.feedback.error { + color: #ff8a8a; +} + +.feedback.success { + color: #7cffb2; +} + +.toggleRow { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 10px; + width: 100%; + margin: 6px 0; +} + +.toggleRow label { + cursor: pointer; +} + +.toggleRow .switch { + display: inline-flex; + align-items: center; + flex: none; +} + +.toggleRow .switch input[type=checkbox] { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.toggleRow .switchTrack { + display: inline-block; + box-sizing: border-box; + width: 42px; + height: 24px; + border-radius: 999px; + background-color: color-mix(in srgb, var(--color-4) 60%, #00000000 40%); + border: 2px solid var(--color-3); + position: relative; + transition-duration: 0.25s; +} + +.toggleRow .switchTrack::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 16px; + height: 16px; + border-radius: 50%; + background-color: var(--text-color); + transition-duration: 0.25s; +} + +.toggleRow .switch:hover .switchTrack { + filter: brightness(1.15); +} + +.toggleRow .switch input[type=checkbox]:checked ~ .switchTrack { + background-color: var(--color-1); + border-color: var(--color-1); +} + +.toggleRow .switch input[type=checkbox]:checked ~ .switchTrack::after { + transform: translateX(18px); + background-color: var(--bg-2); +} + +.toggleRow .switch input[type=checkbox]:focus-visible ~ .switchTrack { + outline: 2px solid var(--color-1); + outline-offset: 2px; +} + +#hiddenGamesSection { + width: min(640px, 90vw); +} + +.hiddenGamesRow { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + gap: 16px; + width: 100%; +} + +.hiddenGamesControls { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + flex: 1 1 220px; +} + #hiddenGamesList { - width: min(280px, 90%); - height: 200px; + width: auto; + flex: 1 1 260px; + align-self: flex-start; + height: 340px; + min-height: 0; overflow-y: auto; + contain: layout; border: 1px solid color-mix(in srgb, var(--color-1) 50%, #00000000 50%); border-radius: 12px; padding: 8px; - margin: 8px 0; + margin: 0; + box-sizing: border-box; } .hidden-game-row { @@ -45,6 +167,58 @@ sections { width: 100%; } +.hidden-game-row input[type=checkbox] { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.hidden-game-row .checkboxBox { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 18px; + height: 18px; + min-width: 18px; + border: 2px solid var(--color-1); + border-radius: 4px; + background-color: color-mix(in srgb, var(--color-4) 40%, #00000000 60%); + cursor: pointer; + transition-duration: 0.25s; +} + +.hidden-game-row:hover .checkboxBox { + border-color: var(--text-color); + background-color: color-mix(in srgb, var(--color-3) 50%, #00000000 50%); +} + +.hidden-game-row input[type=checkbox]:checked ~ .checkboxBox { + background-color: var(--color-1); + border-color: var(--color-1); +} + +.hidden-game-row input[type=checkbox]:checked ~ .checkboxBox::after { + content: ""; + width: 4px; + height: 8px; + margin-bottom: 2px; + border: solid var(--bg-2); + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.hidden-game-row input[type=checkbox]:focus-visible ~ .checkboxBox { + outline: 2px solid var(--color-1); + outline-offset: 2px; +} + #hiddenGamesSearch { width: min(280px, 90%); } diff --git a/home.html b/home.html index 4470de2..8cdad9f 100755 --- a/home.html +++ b/home.html @@ -5,11 +5,11 @@ + @@ -59,6 +60,24 @@ document.getElementById("randomquote").innerHTML = randomQuote; }) .catch((error) => console.error("Error loading quotes:", error)); + + fetch("/api/proxy/status") + .then((res) => res.json()) + .then((data) => { + if (data.unlocked) document.getElementById("proxyNavCard").style.display = ""; + }) + .catch(() => { }); + + document.getElementById("openblank").addEventListener("click", (e) => { + e.preventDefault(); + let win = window.open(); + win.document.body.style.margin = "0"; + win.document.body.style.height = "100vh"; + let html = ``; + win.document.querySelector("html").innerHTML = html; + location.href = "https://google.com"; + window.close(); + }); }); @@ -74,16 +93,39 @@selenite.
better thank me for this unblocked website
-
- 
-
+
- 
-
-
-
- 
-
-
-
- 
-
+
-
+
+
+ games
+
+
+ 
+ apps
+
+
+
+ 
+ bookmarklets
+
+
+
+ profile
+
+
+ 
+ settings
+
+
+ 
+ open about:blank
+
+
+
+ discord
+
diff --git a/img/addlink.svg b/img/addlink.svg
index 365feea..edaaa3e 100755
--- a/img/addlink.svg
+++ b/img/addlink.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/index.html b/index.html
index da59bf8..af79874 100755
--- a/index.html
+++ b/index.html
@@ -5,11 +5,11 @@
+ games
+
+
+
+ apps
+
+
+
+ 
+
+ bookmarklets
+
+
+
+ profile
+
+
+
+ settings
+
+
+
+ open about:blank
+
+
+
+ discord
+
- 
diff --git a/info.html b/info.html
index 6bb8fcf..3372dc2 100644
--- a/info.html
+++ b/info.html
@@ -5,11 +5,11 @@
-
+
sorting
+ +game genres
+ +xx games loaded..
starred games
+recently played
+top games
all games
diff --git a/proxy-locked.html b/proxy-locked.html new file mode 100644 index 0000000..bff6357 --- /dev/null +++ b/proxy-locked.html @@ -0,0 +1,28 @@ + + + + + + + + + + + +locked
+this is locked behind a secret password.
+enter it in settings to unlock it.
+ + + diff --git a/proxy.html b/proxy.html new file mode 100644 index 0000000..af10d7f --- /dev/null +++ b/proxy.html @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + +
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scram-sw.js b/scram-sw.js
new file mode 100644
index 0000000..c924607
--- /dev/null
+++ b/scram-sw.js
@@ -0,0 +1,16 @@
+importScripts("/scram-assets/scramjet.all.js");
+
+const { ScramjetServiceWorker } = $scramjetLoadWorker();
+const scramjet = new ScramjetServiceWorker();
+
+async function handleRequest(event) {
+ await scramjet.loadConfig();
+ if (scramjet.route(event)) {
+ return scramjet.fetch(event);
+ }
+ return fetch(event.request);
+}
+
+self.addEventListener("fetch", (event) => {
+ event.respondWith(handleRequest(event));
+});
diff --git a/settings.html b/settings.html
index 65cf9f0..2267e69 100755
--- a/settings.html
+++ b/settings.html
@@ -6,7 +6,7 @@
+
+ recommended sites
+ +