selenite/frontend
1
0
Fork 0
mirror of https://gitlab.com/skysthelimit.dev/selenite.git synced 2025-06-16 02:22:07 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

theme updates

Browse Source
This commit is contained in:
skysthelimitt 2023-11-03 20:38:35 -04:00
parent 387d25543b
commit 639553d948
8 changed files with 166 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
about.html
View File

@ -64,9 +64,10 @@
<p><a href="https://github.com/js-cookie/js-cookie/">js-cookie</a>: working with cookies.</p> <p><a href="https://github.com/js-cookie/js-cookie/">js-cookie</a>: working with cookies.</p>
<p><a href="https://shoelace.style">Shoelace</a>: a lot of smaller styling, such as the safe mode alert</p> <p><a href="https://shoelace.style">Shoelace</a>: a lot of smaller styling, such as the safe mode alert</p>
<p><a href="https://3kh0.net">3kh0</a>: a lot of games, the download/upload save feature, and the main inspiration</p> <p><a href="https://3kh0.net">3kh0</a>: a lot of games, the download/upload save feature, and the main inspiration</p>
<p><a href="/backgrounds.html">View Background Credits</a></p>
<h2>Developers</h2> <h2>Developers</h2>
<a href="https://github.com/selenite-cc"><sl-avatar image="https://cdn.discordapp.com/avatars/1014608595263950848/fbc25e2f109d98e9f50c361342dbc4f7.webp" label="skysthelimitt"></sl-avatar> <p>Sky</p></a> <a href="https://github.com/skysthelimitt"><sl-avatar image="https://cdn.discordapp.com/avatars/1014608595263950848/fbc25e2f109d98e9f50c361342dbc4f7.webp" label="skysthelimitt"></sl-avatar> <p>Sky</p></a>
<h2>Supporters</h2> <h2>Supporters</h2>
<a href="https://discord.com/users/731338278082445376"><sl-avatar image="https://cdn.discordapp.com/avatars/731338278082445376/1844d9f0f33f23cb385c6b412e3a6040.webp?size=80" label="skysthelimitt"></sl-avatar> <p>Caidn</p></a> <a href="https://discord.com/users/731338278082445376"><sl-avatar image="https://cdn.discordapp.com/avatars/731338278082445376/1844d9f0f33f23cb385c6b412e3a6040.webp?size=80" label="skysthelimitt"></sl-avatar> <p>Caidn</p></a>

81
backgrounds.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html class="sl-theme-dark" lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
<!-- initialize externals -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.9.0/cdn/themes/dark.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.9.0/cdn/shoelace-autoloader.js"></script>
<!-- initialize my stuff -->
<script src="/js/themes.js"></script>
<script src="/js/all.js"></script>
<script src="/js/main.js"></script>
<link rel="stylesheet" href="/themes.css" />
<link rel="stylesheet" href="/style.css" />
<!-- seo + other things -->
<title>Selenite</title>
<link rel="icon" href="/favicon.ico" />
<meta
name="keywords"
content="front-end web developer, unblocked, games, google sites, unblocked games mom, ublocked, code, coding, programmer, development, javascript, jquery, bootstrap, sass, less, git, gaming, internet, website, best, site, cool, free games"
/>
<meta property="og:title" content="Welcome to Selenite." />
<meta property="og:site_name" content="https://selenite.cc" />
<meta
property="og:description"
content="Welcome to the one and only option for unblocked games. Welcome to Selenite."
/>
<meta
name="description"
content="Welcome to the one and only option for unblocked games. Welcome to Selenite."
/>
<meta name="author" content="Website Creator" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- toastify -->
<script>
</script>
</head>
<alerts>
</alerts>
<body>
<header>
<a href="/index.html">Home</a>
<a href="/bookmarklets.html">Bookmarklets</a>
<a href="/projects.html">Games</a>
<a href="/settings.html">Settings</a>
<a href="/support.html">Support</a>
<a href="/blank.html">Open Blank</a>
<a href="/about.html">About</a>
</header>
<main id="main">
<img src="themebgs/sunset_theme.jpg" class="img-credits">
<a href="https://www.pixiv.net/en/users/10746425">邦乔彦</a>
<img src="themebgs/mountains_theme.jpg" class="img-credits">
<a href="https://www.mattvince.com/">Matt Vince</a>
</main>
<footer>
<a href="https://github.com/selenite-cc/Selenite">Source Code</a>
<a id="panicmode">Panic Mode</a>
<a href="/transfer.html">Transfer your data</a>
<a href="/suggest.html">Bug Reports</a>
<a href="https://discord.gg/7jyufnwJNf">Discord</a>
<a href="/suggest.html">Suggestions</a>
<a href="/contact.html">Contact</a>
</footer>
</body>
</html>

2
index.html
View File

@ -56,7 +56,7 @@
</script> </script>
</head> </head>
<alerts> <alerts>
<sl-dialog label="Welcome to Selenite!" class="dialog-width" style="--width: 60vw;"> <sl-dialog label="Welcome to Selenite!" class="dialog-width" style="--width: 60vw;display:none;">
Thank you for choosing Selenite! You will be able to play over 140 high quality games, and we have many tools to make your experience better. Thank you for choosing Selenite! You will be able to play over 140 high quality games, and we have many tools to make your experience better.
<br> <br>
Wanting to transfer your data from another website? Try the transfer utility in the footer! Wanting to transfer your data from another website? Try the transfer utility in the footer!

2
js/cloaks.js
View File

@ -31,7 +31,7 @@ function clearCloak() {
document.cookie = "tabname=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; document.cookie = "tabname=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
var link = document.querySelector("link[rel~='icon']"); var link = document.querySelector("link[rel~='icon']");
link.remove(); link.remove();
document.title = "Tab Cloak | e-gamepass"; document.title = "Settings | Selenite";
link = document.createElement("link"); link = document.createElement("link");
link.rel = "icon"; link.rel = "icon";
document.head.appendChild(link); document.head.appendChild(link);

31
js/main.js
View File

@ -14,11 +14,31 @@ function check() {
} }
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem("theme")) { const iconSetting = document.querySelector("input#discordIcon");
document.body.setAttribute("theme", localStorage.getItem("theme")); if(localStorage.getItem("theme")) {
localStorage.setItem("selenite.theme", localStorage.getItem("theme"));
localStorage.removeItem("theme");
}
if (localStorage.getItem("selenite.theme")) {
document.body.setAttribute("theme", localStorage.getItem("selenite.theme"));
} else { } else {
document.body.setAttribute("theme", "main"); document.body.setAttribute("theme", "main");
} }
if(document.querySelector("widgetbot-crate")) {
if(localStorage.getItem("selenite.discordIcon") == "true") {
const widget = document.querySelector("widgetbot-crate");
widget.setAttribute("style", "display:none");
}
}
if(document.querySelector("input#discordIcon")) {
if(localStorage.getItem("selenite.discordIcon") == "true") {
iconSetting.checked = true;
}
iconSetting.addEventListener("click", () => {
localStorage.setItem("selenite.discordIcon", iconSetting.checked)
});
}
check(); check();
checkAlert(); checkAlert();
}); });
@ -29,6 +49,7 @@ function checkAlert() {
const openButton = dialog.nextElementSibling; const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('sl-button[slot="footer"]'); const closeButton = dialog.querySelector('sl-button[slot="footer"]');
setTimeout(() => { setTimeout(() => {
dialog.removeAttribute("display");
dialog.show(); dialog.show();
}, 250) }, 250)
closeButton.addEventListener('click', () => dialog.hide()); closeButton.addEventListener('click', () => dialog.hide());
@ -50,7 +71,7 @@ function copyToClipboard(text) {
} }
function setTheme(theme) { function setTheme(theme) {
localStorage.setItem("theme", theme); localStorage.setItem("selenite.theme", theme);
document.body.setAttribute("theme", theme); document.body.setAttribute("theme", theme);
} }
function setPanicMode() { function setPanicMode() {
@ -60,3 +81,7 @@ function setPanicMode() {
} }
document.cookie = "panicurl=" + $("#panic").val(); document.cookie = "panicurl=" + $("#panic").val();
} }
function customTheme() {
const customMenu = document.querySelector('#customMenu');
customMenu.removeAttribute("display");
}

20
settings.html
View File

@ -63,7 +63,7 @@
<h3>Website Name</h3> <h3>Website Name</h3>
<input type="text" id="webname" name="webname" placeholder="Selenite" /><br /> <input type="text" id="webname" name="webname" placeholder="Selenite" /><br />
<h3>Website Icon</h3> <h3>Website Icon</h3>
<input type="text" id="webicon" name="webicon" placeholder="https://selenite.pages.dev/" /><br /> <input type="text" id="webicon" name="webicon" placeholder="https://selenite.cc/" /><br />
<h3>Or select a preset:</h3> <h3>Or select a preset:</h3>
<select id="presetCloaks"> <select id="presetCloaks">
<option value="google">Google</option> <option value="google">Google</option>
@ -77,13 +77,25 @@
</form> </form>
<button onclick="javascript:clearCloak();">Clear your current tab cloak</button> <button onclick="javascript:clearCloak();">Clear your current tab cloak</button>
<br /> <br />
<div class="samerow">
<input type="checkbox" id="discordIcon" name="discordIcon">
<label for="discordIcon">Disable Discord Icon</label><br>
</div>
<h3>Themes</h3> <h3>Themes</h3>
<div class="samerow themebtns"> <div class="samerow themebtns">
<button onclick="setTheme('main')" style="background-color: #3c096c; color: #fff; border: 5px solid #5a189a">Selenite</button> <button onclick="setTheme('main')" style="background-color: #3c096c; color: #fff; border: 5px solid #5a189a">selenite</button>
<button onclick="setTheme('light')" style="background-color: #bbbbbb; color: #1a1a1a; border: 5px solid #e6e6e6">Light Mode</button> <button onclick="setTheme('light')" style="background-color: #bbbbbb; color: #1a1a1a; border: 5px solid #e6e6e6">light mode</button>
<button onclick="setTheme('dark')" style="background-color: #333333; color: #fff; border: 5px solid #444444">Dark Mode</button> <button onclick="setTheme('dark')" style="background-color: #333333; color: #fff; border: 5px solid #444444">dark mode</button>
<button onclick="setTheme('egamepass')" style="background-color: #596eb1; color: #cbe0ff; border: 5px solid #5586e0">e-gamepass</button> <button onclick="setTheme('egamepass')" style="background-color: #596eb1; color: #cbe0ff; border: 5px solid #5586e0">e-gamepass</button>
<button onclick="setTheme('cools1te')" style="background-color: #a134dc; color: #d3a4fa; border: 5px solid #b153e3">cools1te</button> <button onclick="setTheme('cools1te')" style="background-color: #a134dc; color: #d3a4fa; border: 5px solid #b153e3">cools1te</button>
<button onclick="setTheme('sunset')" style="background-color: #537294; color: #fff; border: 5px solid #30719c">sunset</button>
<button onclick="setTheme('mountains')" style="background-color: #d37f7f; color: #fff; border: 5px solid #e28a8a">mountains</button>
<!-- <button onclick="customTheme()">custom</button>
one day ill add this.. maybe -->
</div>
<div id="customMenu" style="display: none;">
<p>Input Background Colors</p>
<input type="color" id="inputbg" value="var(--uibg)" />
</div> </div>
<br /> <br />
<form action="javascript:setPanicMode();"> <form action="javascript:setPanicMode();">

23
style.css
View File

@ -21,8 +21,12 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--bg); background: var(--bg);
color: var(--textcolor); color: var(--textcolor);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
} }
header, header,
footer { footer {
@ -78,16 +82,16 @@ main {
main#main.noscroll { main#main.noscroll {
justify-content: center; justify-content: center;
} }
h1, h1,
h2, h2,
h3, h3,
p, p,
a { a,
label {
margin: 0; margin: 0;
padding: 0; padding: 0;
text-shadow: var(--shadow);
} }
.samerow { .samerow {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -274,3 +278,14 @@ sl-icon-button {
h3#gametitle { h3#gametitle {
font-size: 2rem; font-size: 2rem;
} }
.img-credits {
height: 40vh;
width: auto;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.555)
}
label {
font-size: 20px;
padding-left: 5px;
}

18
themes.css
View File

@ -40,3 +40,21 @@ body[theme=cools1te] {
--textcolor: #d3a4fa; --textcolor: #d3a4fa;
--bg: #8e14af; --bg: #8e14af;
} }
body[theme=sunset] {
--inputbg: #537294;
--inputborder: #30719c;
--uibg: #2a7491;
--textcolor: #fff;
--bg: url("themebgs/sunset_theme.jpg"), rgb(59, 67, 78);
/* https://wallhaven.cc/w/jxl3qp */
--shadow: 0px 0px 2px #a5dcf5;
}
body[theme=mountains] {
--inputbg: #d37f7f;
--inputborder: #e28a8a;
--uibg: #d38493;
--textcolor: #fff;
--bg: url("themebgs/mountains_theme.jpg"), #bf7483;
/* https://wallhaven.cc/w/l82kpr */
--shadow: 0px 0px 3px #88726c;
}