Add astro linting, and make some css changes.
This commit is contained in:
wearrrrr
parent
39fc988bce
commit
6af2cd3428
25 changed files with 1840 additions and 1309 deletions
47
package-lock.json
generated
47
package-lock.json
generated
|
|
@ -26,7 +26,8 @@
|
||||||
"typescript": "^5.3.3"
|
"typescript": "^5.3.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"prettier": "3.2.5"
|
"prettier": "3.2.5",
|
||||||
|
"prettier-plugin-astro": "^0.13.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@ampproject/remapping": {
|
"node_modules/@ampproject/remapping": {
|
||||||
|
|
@ -8393,6 +8394,26 @@
|
||||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/prettier-plugin-astro": {
|
||||||
|
"version": "0.13.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.13.0.tgz",
|
||||||
|
"integrity": "sha512-5HrJNnPmZqTUNoA97zn4gNQv9BgVhv+et03314WpQ9H9N8m2L9OSV798olwmG2YLXPl1iSstlJCR1zB3x5xG4g==",
|
||||||
|
"devOptional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/compiler": "^1.5.5",
|
||||||
|
"prettier": "^3.0.0",
|
||||||
|
"sass-formatter": "^0.7.6"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^14.15.0 || >=16.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
|
||||||
|
"version": "1.8.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.8.2.tgz",
|
||||||
|
"integrity": "sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==",
|
||||||
|
"devOptional": true
|
||||||
|
},
|
||||||
"node_modules/prismjs": {
|
"node_modules/prismjs": {
|
||||||
"version": "1.29.0",
|
"version": "1.29.0",
|
||||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
|
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
|
||||||
|
|
@ -9182,6 +9203,12 @@
|
||||||
"queue-microtask": "^1.2.2"
|
"queue-microtask": "^1.2.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/s.color": {
|
||||||
|
"version": "0.0.15",
|
||||||
|
"resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
|
||||||
|
"integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
|
||||||
|
"devOptional": true
|
||||||
|
},
|
||||||
"node_modules/safe-buffer": {
|
"node_modules/safe-buffer": {
|
||||||
"version": "5.2.1",
|
"version": "5.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||||
|
|
@ -9206,6 +9233,15 @@
|
||||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
||||||
},
|
},
|
||||||
|
"node_modules/sass-formatter": {
|
||||||
|
"version": "0.7.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz",
|
||||||
|
"integrity": "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==",
|
||||||
|
"devOptional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"suf-log": "^2.5.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/sax": {
|
"node_modules/sax": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
|
||||||
|
|
@ -9665,6 +9701,15 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/suf-log": {
|
||||||
|
"version": "2.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
|
||||||
|
"integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
|
||||||
|
"devOptional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"s.color": "0.0.15"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/supports-color": {
|
"node_modules/supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@
|
||||||
"typescript": "^5.3.3"
|
"typescript": "^5.3.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"prettier": "3.2.5"
|
"prettier": "3.2.5",
|
||||||
|
"prettier-plugin-astro": "^0.13.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ const config = {
|
||||||
bracketSpacing: true,
|
bracketSpacing: true,
|
||||||
bracketSameLine: true,
|
bracketSameLine: true,
|
||||||
arrowParens: "always",
|
arrowParens: "always",
|
||||||
|
plugins: ["prettier-plugin-astro"],
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
export default config;
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,31 @@
|
||||||
<script>
|
<script>
|
||||||
function loadCloak() {
|
function loadCloak() {
|
||||||
let localStorageCloak = localStorage.getItem('alu__selectedCloak');
|
let localStorageCloak = localStorage.getItem("alu__selectedCloak");
|
||||||
if (localStorageCloak) {
|
if (localStorageCloak) {
|
||||||
let parsedCloak = JSON.parse(localStorageCloak);
|
let parsedCloak = JSON.parse(localStorageCloak);
|
||||||
if (parsedCloak) {
|
if (parsedCloak) {
|
||||||
if (parsedCloak.name != "None") {
|
if (parsedCloak.name != "None") {
|
||||||
document.title = parsedCloak.name
|
document.title = parsedCloak.name;
|
||||||
let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
|
let link = document.querySelector(
|
||||||
|
"link[rel~='icon']"
|
||||||
|
) as HTMLLinkElement;
|
||||||
if (!link) {
|
if (!link) {
|
||||||
link = document.createElement('link');
|
link = document.createElement("link");
|
||||||
link.rel = 'icon';
|
link.rel = "icon";
|
||||||
}
|
}
|
||||||
link.href = parsedCloak.icon;
|
link.href = parsedCloak.icon;
|
||||||
document.getElementsByTagName('head')[0].appendChild(link);
|
document.getElementsByTagName("head")[0].appendChild(link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Load default cloak
|
// Load default cloak
|
||||||
let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
|
let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
|
||||||
if (!link) {
|
if (!link) {
|
||||||
link = document.createElement('link');
|
link = document.createElement("link");
|
||||||
link.rel = 'icon';
|
link.rel = "icon";
|
||||||
}
|
}
|
||||||
link.href = "/favicon.png";
|
link.href = "/favicon.png";
|
||||||
document.getElementsByTagName('head')[0].appendChild(link);
|
document.getElementsByTagName("head")[0].appendChild(link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,20 @@
|
||||||
---
|
---
|
||||||
|
|
||||||
const { buttonNameDefault, dropdownList, id } = Astro.props;
|
const { buttonNameDefault, dropdownList, id } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button id={id} class="dropdown-toggle" type="button" data-toggle="dropdown">
|
<button id={id} class="dropdown-toggle" type="button" data-toggle="dropdown">
|
||||||
{buttonNameDefault}
|
{buttonNameDefault}
|
||||||
<span class="caret"></span></button>
|
<span class="caret"></span></button
|
||||||
|
>
|
||||||
<ul class="dropdown-menu" id={id + "-menu"}>
|
<ul class="dropdown-menu" id={id + "-menu"}>
|
||||||
{
|
{
|
||||||
dropdownList.map((item: any) => {
|
dropdownList.map((item: any) => {
|
||||||
return <li class="dropdown-item" data-setting={item.value}>{item.name}</li>
|
return (
|
||||||
|
<li class="dropdown-item" data-setting={item.value}>
|
||||||
|
{item.name}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -29,7 +33,7 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: 'Varela Round', sans-serif;
|
font-family: "Varela Round", sans-serif;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
---
|
---
|
||||||
|
import { getLangFromUrl, useTranslations } from "../i18n/utils";
|
||||||
import { getLangFromUrl, useTranslations } from "../i18n/utils"
|
|
||||||
import WaveSVG from "./WaveSVG.astro";
|
import WaveSVG from "./WaveSVG.astro";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
|
@ -40,6 +38,7 @@ const t = useTranslations(lang);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
|
filter: brightness(1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
|
@ -51,7 +50,8 @@ const t = useTranslations(lang);
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
}
|
}
|
||||||
.footer-top, .footer-bottom {
|
.footer-top,
|
||||||
|
.footer-bottom {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
@ -63,5 +63,4 @@ const t = useTranslations(lang);
|
||||||
a {
|
a {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -3,18 +3,21 @@ const { name, image, slugName } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="game">
|
<div class="game">
|
||||||
<a href=`/games/${slugName || name}`><img class="game-img" src=`${image}` alt=""></a>
|
<a href=`/games/${slugName || name}`
|
||||||
|
><img class="game-img" src=`${image}` alt="" /></a
|
||||||
|
>
|
||||||
<p class="game-title">{name}</p>
|
<p class="game-title">{name}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.game {
|
.game {
|
||||||
border: 2px solid #D8DEE9;
|
border: 2px solid var(--text-color);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
.game-img {
|
.game-img {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import { getLangFromUrl, useTranslations } from "../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../i18n/utils";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
---
|
---
|
||||||
|
|
@ -39,7 +39,8 @@
|
||||||
border-bottom-right-radius: 5px;
|
border-bottom-right-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left, .right {
|
.left,
|
||||||
|
.right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,8 @@
|
||||||
---
|
---
|
||||||
const { type, inputName, defaultTextContent, height, placeholder } = Astro.props;
|
const { inputName, defaultTextContent, height, placeholder } = Astro.props;
|
||||||
|
|
||||||
// typescript brainrot
|
|
||||||
type HTMLInputTypeAttribute = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
type?: HTMLInputTypeAttribute;
|
|
||||||
inputName: string;
|
inputName: string;
|
||||||
defaultTextContent?: string;
|
defaultTextContent?: string;
|
||||||
height: string;
|
height: string;
|
||||||
|
|
@ -13,16 +10,22 @@ interface Props {
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<input style={`height: ${height}`} id={inputName + "-input"} placeholder={placeholder || ""} value={defaultTextContent || ""} type={type} />
|
<input
|
||||||
|
style={`height: ${height}`}
|
||||||
|
id={inputName + "-input"}
|
||||||
|
placeholder={placeholder || ""}
|
||||||
|
value={defaultTextContent || ""}
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 2px solid var(--accent-color-brighter);
|
border: 2px solid var(--background-highlight);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #1b1b1b;
|
background-color: var(--accent-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
transition: .1s ease-in-out;
|
transition: 0.1s ease-in-out;
|
||||||
}
|
}
|
||||||
input:focus {
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,71 @@
|
||||||
---
|
---
|
||||||
import Input from "../Input.astro"
|
import Input from "../Input.astro";
|
||||||
|
|
||||||
|
|
||||||
const presetCloaks = [
|
const presetCloaks = [
|
||||||
{"cloakTitle": "None", "favicon": "/favicon.png"},
|
{ cloakTitle: "None", favicon: "/favicon.png" },
|
||||||
{"cloakTitle": "Google", "favicon": "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128"},
|
{
|
||||||
{"cloakTitle": "Instructure", "favicon": "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico"},
|
cloakTitle: "Google",
|
||||||
{"cloakTitle": "Google Classroom", "favicon": "https://ssl.gstatic.com/classroom/ic_product_classroom_144.png"},
|
favicon:
|
||||||
{"cloakTitle": "Classlink", "favicon": "https://cdn.classlink.com/production/launchpad/resources/images/favicon/favicon-32x32.png"},
|
"https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128",
|
||||||
{"cloakTitle": "Google Drive", "favicon": "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png"},
|
},
|
||||||
{"cloakTitle": "Schoology", "favicon": "https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico"}
|
{
|
||||||
]
|
cloakTitle: "Instructure",
|
||||||
|
favicon:
|
||||||
|
"https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cloakTitle: "Google Classroom",
|
||||||
|
favicon: "https://ssl.gstatic.com/classroom/ic_product_classroom_144.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cloakTitle: "Classlink",
|
||||||
|
favicon:
|
||||||
|
"https://cdn.classlink.com/production/launchpad/resources/images/favicon/favicon-32x32.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cloakTitle: "Google Drive",
|
||||||
|
favicon:
|
||||||
|
"https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cloakTitle: "Schoology",
|
||||||
|
favicon:
|
||||||
|
"https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico",
|
||||||
|
},
|
||||||
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="settings-container">
|
<div class="settings-container">
|
||||||
<div class="cloak-container">
|
<div class="cloak-container">
|
||||||
<div id="cloak-list">
|
<div id="cloak-list">
|
||||||
{presetCloaks.map((cloak: any) => {
|
{
|
||||||
return <div class="cloak-item" data-cloak-name={cloak.cloakTitle} data-cloak-icon={cloak.favicon}><img class="cloak-image" src={cloak.favicon} alt={cloak.cloakTitle}/></div>
|
presetCloaks.map((cloak: any) => {
|
||||||
})}
|
return (
|
||||||
|
<div
|
||||||
|
class="cloak-item"
|
||||||
|
data-cloak-name={cloak.cloakTitle}
|
||||||
|
data-cloak-icon={cloak.favicon}>
|
||||||
|
<img
|
||||||
|
class="cloak-image"
|
||||||
|
src={cloak.favicon}
|
||||||
|
alt={cloak.cloakTitle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="cloak-custom-override">
|
<div class="cloak-custom-override">
|
||||||
<Input inputName="cloak-custom-name" placeholder="Custom Name" height="30px" />
|
<Input
|
||||||
<Input inputName="cloak-custom-favicon" placeholder="Custom Favicon" height="30px" />
|
inputName="cloak-custom-name"
|
||||||
|
placeholder="Custom Name"
|
||||||
|
height="30px"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
inputName="cloak-custom-favicon"
|
||||||
|
placeholder="Custom Favicon"
|
||||||
|
height="30px"
|
||||||
|
/>
|
||||||
<button id="cloak-custom-button">Update Cloak</button>
|
<button id="cloak-custom-button">Update Cloak</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -53,7 +95,7 @@ import Input from "../Input.astro"
|
||||||
}
|
}
|
||||||
.cloak-item.selected {
|
.cloak-item.selected {
|
||||||
/* Make border color brighter */
|
/* Make border color brighter */
|
||||||
border: 3px solid var(--accent-color-brighter)
|
border: 3px solid var(--accent-color-brighter);
|
||||||
}
|
}
|
||||||
.cloak-image {
|
.cloak-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -82,7 +124,7 @@ import Input from "../Input.astro"
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
transition: .1s ease-in-out;
|
transition: 0.1s ease-in-out;
|
||||||
}
|
}
|
||||||
.cloak-custom-input:focus {
|
.cloak-custom-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,26 @@
|
||||||
---
|
---
|
||||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="settings-container">
|
<div class="settings-container">
|
||||||
|
|
||||||
<div class="credits-container">
|
<div class="credits-container">
|
||||||
<p class="credit-item">{t("ultraviolet")} - <a href="https://titaniumnetwork.org/">Titanium Network</a></p>
|
<p class="credit-item">
|
||||||
<p class="credit-item">{t("settings.credits.japaneseTranslations")} - <a href="https://wearr.dev">wearr</a></p>
|
{t("ultraviolet")} - <a href="https://titaniumnetwork.org/"
|
||||||
<p class="credit-item">{t("settings.credits.mochaandmacchiatothemes")} - <a href="">Catppuccin</a></p>
|
>Titanium Network</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p class="credit-item">
|
||||||
|
{t("settings.credits.japaneseTranslations")} - <a href="https://wearr.dev"
|
||||||
|
>wearr</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p class="credit-item">
|
||||||
|
{t("settings.credits.mochaandmacchiatothemes")} - <a href="">Catppuccin</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,40 @@
|
||||||
---
|
---
|
||||||
import Dropdown from "../Dropdown.astro"
|
import Dropdown from "../Dropdown.astro";
|
||||||
|
|
||||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
const themeList = [
|
const themeList = [
|
||||||
{"name": t("settings.customization.theme.Alu"), "value": "alu"},
|
{ name: t("settings.customization.theme.Alu"), value: "alu" },
|
||||||
{"name": t("settings.customization.theme.Macchiato"), "value": "macchiato"},
|
{ name: t("settings.customization.theme.Macchiato"), value: "macchiato" },
|
||||||
{"name": t("settings.customization.theme.Mocha"), "value": "mocha"},
|
{ name: t("settings.customization.theme.Mocha"), value: "mocha" },
|
||||||
{"name": "Rosé Pine", "value": "rose_pine"}
|
{ name: "Rosé Pine", value: "rose_pine" },
|
||||||
]
|
];
|
||||||
|
|
||||||
const languageList = [
|
const languageList = [
|
||||||
{"name": "English", "value": "en"},
|
{ name: "English", value: "en" },
|
||||||
{"name": "日本語", "value": "jp"}
|
{ name: "日本語", value: "jp" },
|
||||||
]
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="settings-container">
|
<div class="settings-container">
|
||||||
<div class="setting__theme">
|
<div class="setting__theme">
|
||||||
<label class="setting-label">{t("settings.customization.theme")}</label>
|
<label class="setting-label">{t("settings.customization.theme")}</label>
|
||||||
<Dropdown buttonNameDefault="Alu" dropdownList={themeList}, id="dropdown__selected-theme" />
|
<Dropdown
|
||||||
|
buttonNameDefault="Alu"
|
||||||
|
dropdownList={themeList}
|
||||||
|
,
|
||||||
|
id="dropdown__selected-theme"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="setting__language">
|
<div class="setting__language">
|
||||||
<label class="setting-label">{t("settings.customization.language")}</label>
|
<label class="setting-label">{t("settings.customization.language")}</label>
|
||||||
<Dropdown buttonNameDefault="English" dropdownList={languageList}, id="dropdown__selected-language" />
|
<Dropdown
|
||||||
|
buttonNameDefault="English"
|
||||||
|
dropdownList={languageList}
|
||||||
|
,
|
||||||
|
id="dropdown__selected-language"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,51 +1,74 @@
|
||||||
---
|
---
|
||||||
import Input from "../Input.astro"
|
import Input from "../Input.astro";
|
||||||
import Dropdown from "../Dropdown.astro"
|
import Dropdown from "../Dropdown.astro";
|
||||||
|
|
||||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
const proxyList = [
|
const proxyList = [
|
||||||
{ "name": t("settings.proxy.auto"), "value": "auto" },
|
{ name: t("settings.proxy.auto"), value: "auto" },
|
||||||
{ "name": t("ultraviolet"), "value": "ultraviolet" },
|
{ name: t("ultraviolet"), value: "ultraviolet" },
|
||||||
{ "name": "Rammerhead", "value": "rammerhead" },
|
{ name: "Rammerhead", value: "rammerhead" },
|
||||||
{ "name": "Dynamic", "value": "dynamic" }
|
{ name: "Dynamic", value: "dynamic" },
|
||||||
]
|
];
|
||||||
|
|
||||||
const searchEngineList = [
|
const searchEngineList = [
|
||||||
{ "name": "Google", "value": "google" },
|
{ name: "Google", value: "google" },
|
||||||
{ "name": "Bing", "value": "bing" },
|
{ name: "Bing", value: "bing" },
|
||||||
{ "name": "Brave", "value": "brave" },
|
{ name: "Brave", value: "brave" },
|
||||||
{ "name": "Searx", "value": "searx" }
|
{ name: "Searx", value: "searx" },
|
||||||
]
|
];
|
||||||
|
|
||||||
const openPageWith = [
|
const openPageWith = [
|
||||||
{ "name": t("settings.proxy.openPageWith.embed"), "value": "embed" },
|
{ name: t("settings.proxy.openPageWith.embed"), value: "embed" },
|
||||||
{ "name": "About:Blank", "value": "about:blank" },
|
{ name: "About:Blank", value: "about:blank" },
|
||||||
{ "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab" },
|
{ name: t("settings.proxy.openPageWith.newTab"), value: "newTab" },
|
||||||
]
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="settings-container">
|
<div class="settings-container">
|
||||||
<div class="setting__selected-proxy">
|
<div class="setting__selected-proxy">
|
||||||
<label class="setting-label">{t("settings.proxy.selectedProxy")}</label>
|
<label class="setting-label">{t("settings.proxy.selectedProxy")}</label>
|
||||||
<Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList}, id="dropdown__selected-proxy" />
|
<Dropdown
|
||||||
|
buttonNameDefault="Ultraviolet"
|
||||||
|
dropdownList={proxyList}
|
||||||
|
,
|
||||||
|
id="dropdown__selected-proxy"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="setting__search-engine">
|
<div class="setting__search-engine">
|
||||||
<label class="setting-label">{t("settings.proxy.searchEngine")}</label>
|
<label class="setting-label">{t("settings.proxy.searchEngine")}</label>
|
||||||
<Dropdown buttonNameDefault="Google" dropdownList={searchEngineList}, id="dropdown__search-engine" />
|
<Dropdown
|
||||||
|
buttonNameDefault="Google"
|
||||||
|
dropdownList={searchEngineList}
|
||||||
|
,
|
||||||
|
id="dropdown__search-engine"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="setting__open_with">
|
<div class="setting__open_with">
|
||||||
<label class="setting-label">{t("settings.proxy.openPageWith")}</label>
|
<label class="setting-label">{t("settings.proxy.openPageWith")}</label>
|
||||||
<Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith}, id="dropdown__open-with" />
|
<Dropdown
|
||||||
|
buttonNameDefault={t("settings.proxy.openPageWith.embed")}
|
||||||
|
dropdownList={openPageWith}
|
||||||
|
,
|
||||||
|
id="dropdown__open-with"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="setting__bare-url">
|
<div class="setting__bare-url">
|
||||||
<label class="setting-label" for="bare-url-input">{t("settings.proxy.bareURL")}</label>
|
<label class="setting-label" for="bare-url-input"
|
||||||
|
>{t("settings.proxy.bareURL")}</label
|
||||||
|
>
|
||||||
<Input inputName="bare-url" height="50px" />
|
<Input inputName="bare-url" height="50px" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="setting__searxng-url">
|
<div class="setting__searxng-url">
|
||||||
<label for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
|
<label for="searxng-url-input" class="setting-label"
|
||||||
<Input height="50px" inputName="searxng-url" defaultTextContent="https://searxng.site/" />
|
>{t("settings.proxy.searxngURL")}</label
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
height="50px"
|
||||||
|
inputName="searxng-url"
|
||||||
|
defaultTextContent="https://searxng.site/"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import ProxyTab from "./SettingsContent/ProxyTab.astro";
|
import ProxyTab from "./SettingsContent/ProxyTab.astro";
|
||||||
import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
||||||
|
|
||||||
import { getLangFromUrl, useTranslations } from "../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../i18n/utils";
|
||||||
import CloakingTab from "./SettingsContent/CloakingTab.astro";
|
import CloakingTab from "./SettingsContent/CloakingTab.astro";
|
||||||
import CreditsTab from "./SettingsContent/CreditsTab.astro";
|
import CreditsTab from "./SettingsContent/CreditsTab.astro";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
|
|
@ -13,7 +13,6 @@ const t = useTranslations(lang);
|
||||||
<div id="content-setting-tab-proxy">
|
<div id="content-setting-tab-proxy">
|
||||||
<h1 class="content-setting-header">{t("settings.proxy")}</h1>
|
<h1 class="content-setting-header">{t("settings.proxy")}</h1>
|
||||||
<ProxyTab />
|
<ProxyTab />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="content-setting-tab-customization">
|
<div id="content-setting-tab-customization">
|
||||||
<h1 class="content-setting-header">{t("settings.customization")}</h1>
|
<h1 class="content-setting-header">{t("settings.customization")}</h1>
|
||||||
|
|
@ -32,93 +31,121 @@ const t = useTranslations(lang);
|
||||||
|
|
||||||
<div class="popup">
|
<div class="popup">
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true">
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="setting-tab-proxy"
|
||||||
|
class="setting-tab"
|
||||||
|
name="tab"
|
||||||
|
checked="true"
|
||||||
|
/>
|
||||||
<label for="setting-tab-proxy">Proxy</label>
|
<label for="setting-tab-proxy">Proxy</label>
|
||||||
<input type="radio" id="setting-tab-customization" class="setting-tab" name="tab">
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="setting-tab-customization"
|
||||||
|
class="setting-tab"
|
||||||
|
name="tab"
|
||||||
|
/>
|
||||||
<label for="setting-tab-customization">Customization</label>
|
<label for="setting-tab-customization">Customization</label>
|
||||||
<input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab">
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="setting-tab-cloaking"
|
||||||
|
class="setting-tab"
|
||||||
|
name="tab"
|
||||||
|
/>
|
||||||
<label for="setting-tab-cloaking">Cloaking</label>
|
<label for="setting-tab-cloaking">Cloaking</label>
|
||||||
<input type="radio" id="setting-tab-credits" class="setting-tab" name="tab">
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="setting-tab-credits"
|
||||||
|
class="setting-tab"
|
||||||
|
name="tab"
|
||||||
|
/>
|
||||||
<label for="setting-tab-credits">Credits</label>
|
<label for="setting-tab-credits">Credits</label>
|
||||||
<div class="marker">
|
<div class="marker">
|
||||||
<div id="top"></div>
|
<div id="top"></div>
|
||||||
<div id="bottom"></div>
|
<div id="bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="current-content">
|
<div id="current-content"></div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
document.addEventListener("astro:before-swap", () => {
|
document.addEventListener("astro:before-swap", () => {
|
||||||
window.currentlySelectedTab = ""
|
window.currentlySelectedTab = "";
|
||||||
document.removeEventListener('setting-tabChange', determineListener)
|
document.removeEventListener("setting-tabChange", determineListener);
|
||||||
})
|
});
|
||||||
window.currentlySelectedTab;
|
window.currentlySelectedTab;
|
||||||
window.loadedContentStorage = {}
|
window.loadedContentStorage = {};
|
||||||
|
|
||||||
Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{
|
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
|
||||||
let contentToLoad = document.getElementById('content-' + tab.id)
|
let contentToLoad = document.getElementById("content-" + tab.id);
|
||||||
if (contentToLoad) {
|
if (contentToLoad) {
|
||||||
window.loadedContentStorage[tab.id] = contentToLoad.innerHTML
|
window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
|
||||||
contentToLoad.remove()
|
contentToLoad.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
tab.addEventListener('click', (event) => {
|
tab.addEventListener("click", (event) => {
|
||||||
loadContent(event.target.id)
|
loadContent(event.target.id);
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
function loadContent(tabID) {
|
function loadContent(tabID) {
|
||||||
if (window.currentlySelectedTab == tabID) return
|
if (window.currentlySelectedTab == tabID) return;
|
||||||
else window.currentlySelectedTab = tabID
|
else window.currentlySelectedTab = tabID;
|
||||||
let currentContent = document.getElementById('current-content')
|
let currentContent = document.getElementById("current-content");
|
||||||
if (currentContent) {
|
if (currentContent) {
|
||||||
currentContent.style.opacity = '0'
|
currentContent.style.opacity = "0";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
currentContent.innerHTML = window.loadedContentStorage[tabID]
|
currentContent.innerHTML = window.loadedContentStorage[tabID];
|
||||||
currentContent.style.opacity = '1'
|
currentContent.style.opacity = "1";
|
||||||
document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID }))
|
document.dispatchEvent(
|
||||||
document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: tabID }))
|
new CustomEvent("setting-tabChange", { detail: tabID })
|
||||||
|
);
|
||||||
|
document.dispatchEvent(
|
||||||
|
new CustomEvent("setting-tabLoad", { detail: tabID })
|
||||||
|
);
|
||||||
}, 250);
|
}, 250);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addDropdownListener() {
|
function addDropdownListener() {
|
||||||
let dropdown_toggles = document.getElementsByClassName('dropdown-toggle')
|
let dropdown_toggles = document.getElementsByClassName("dropdown-toggle");
|
||||||
Array.from(dropdown_toggles).forEach((toggle) => {
|
Array.from(dropdown_toggles).forEach((toggle) => {
|
||||||
toggle.addEventListener('click', () => {
|
toggle.addEventListener("click", () => {
|
||||||
let dropdown = document.getElementById(toggle.id + "-menu")
|
let dropdown = document.getElementById(toggle.id + "-menu");
|
||||||
if (dropdown) {
|
if (dropdown) {
|
||||||
if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
|
if (
|
||||||
dropdown.style.maxHeight = dropdown.scrollHeight + 'px';
|
dropdown.style.maxHeight == "0px" ||
|
||||||
toggle.style.borderRadius = '10px 10px 0 0';
|
dropdown.style.maxHeight == ""
|
||||||
|
) {
|
||||||
|
dropdown.style.maxHeight = dropdown.scrollHeight + "px";
|
||||||
|
toggle.style.borderRadius = "10px 10px 0 0";
|
||||||
} else {
|
} else {
|
||||||
dropdown.style.maxHeight = '0px';
|
dropdown.style.maxHeight = "0px";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
toggle.style.borderRadius = '10px';
|
toggle.style.borderRadius = "10px";
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function determineListener(event) {
|
function determineListener(event) {
|
||||||
if (event.detail == "setting-tab-proxy") {
|
if (event.detail == "setting-tab-proxy") {
|
||||||
addDropdownListener()
|
addDropdownListener();
|
||||||
} else if (event.detail == "setting-tab-customization") {
|
} else if (event.detail == "setting-tab-customization") {
|
||||||
addDropdownListener()
|
addDropdownListener();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeDropdown(dropdownID) {
|
function closeDropdown(dropdownID) {
|
||||||
let dropdown = document.getElementById(dropdownID)
|
let dropdown = document.getElementById(dropdownID);
|
||||||
if (dropdown) {
|
if (dropdown) {
|
||||||
dropdown.style.maxHeight = '0px';
|
dropdown.style.maxHeight = "0px";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
let dropdown_toggle = document.getElementById(dropdownID.replace('-menu', ''));
|
let dropdown_toggle = document.getElementById(
|
||||||
dropdown_toggle.style.borderRadius = '10px';
|
dropdownID.replace("-menu", "")
|
||||||
|
);
|
||||||
|
dropdown_toggle.style.borderRadius = "10px";
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -131,10 +158,13 @@ const t = useTranslations(lang);
|
||||||
if (dropdown && dropdownMenu) {
|
if (dropdown && dropdownMenu) {
|
||||||
// Now we find the child that matches localStorageItem.value.
|
// Now we find the child that matches localStorageItem.value.
|
||||||
let dropdownItem = Array.from(dropdownMenu.children).find((item) => {
|
let dropdownItem = Array.from(dropdownMenu.children).find((item) => {
|
||||||
return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting
|
return (
|
||||||
})
|
JSON.parse(localStorage.getItem(localStorageItem)).value ==
|
||||||
|
item.dataset.setting
|
||||||
|
);
|
||||||
|
});
|
||||||
// Now set the inner text to the name in the dropdownItem.
|
// Now set the inner text to the name in the dropdownItem.
|
||||||
return dropdownItem.innerText
|
return dropdownItem.innerText;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -142,26 +172,37 @@ const t = useTranslations(lang);
|
||||||
if (localStorage.getItem(localStorageItem)) {
|
if (localStorage.getItem(localStorageItem)) {
|
||||||
let dropdown_toggle = document.getElementById(dropdownID);
|
let dropdown_toggle = document.getElementById(dropdownID);
|
||||||
if (dropdown_toggle) {
|
if (dropdown_toggle) {
|
||||||
dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID)
|
dropdown_toggle.innerText = getLocalStorageValue(
|
||||||
|
localStorageItem,
|
||||||
|
dropdownID
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
|
function applyDropdownEventListeners(
|
||||||
|
item,
|
||||||
|
dropdownID,
|
||||||
|
localStorageItem,
|
||||||
|
optionalCallback
|
||||||
|
) {
|
||||||
Array.from(item.children).forEach((item) => {
|
Array.from(item.children).forEach((item) => {
|
||||||
item.addEventListener('click', () => {
|
item.addEventListener("click", () => {
|
||||||
let localStorageItemContent = {
|
let localStorageItemContent = {
|
||||||
"name": item.innerText,
|
name: item.innerText,
|
||||||
"value": item.dataset.setting,
|
value: item.dataset.setting,
|
||||||
}
|
};
|
||||||
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent))
|
localStorage.setItem(
|
||||||
applySavedLocalStorage(localStorageItem, dropdownID)
|
localStorageItem,
|
||||||
|
JSON.stringify(localStorageItemContent)
|
||||||
|
);
|
||||||
|
applySavedLocalStorage(localStorageItem, dropdownID);
|
||||||
closeDropdown(item.parentElement.id);
|
closeDropdown(item.parentElement.id);
|
||||||
if (typeof optionalCallback == "function") {
|
if (typeof optionalCallback == "function") {
|
||||||
optionalCallback();
|
optionalCallback();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
// Array.from(item.children).forEach((item) => {
|
// Array.from(item.children).forEach((item) => {
|
||||||
// item.addEventListener('click', () => {
|
// item.addEventListener('click', () => {
|
||||||
// localStorage.setItem(localStorageItem, item.dataset.setting)
|
// localStorage.setItem(localStorageItem, item.dataset.setting)
|
||||||
|
|
@ -176,100 +217,137 @@ const t = useTranslations(lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
function applyInputListeners(item, localStorageItem) {
|
function applyInputListeners(item, localStorageItem) {
|
||||||
item.addEventListener('input', () => {
|
item.addEventListener("input", () => {
|
||||||
localStorage.setItem(localStorageItem, item.value)
|
localStorage.setItem(localStorageItem, item.value);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('setting-tabChange', determineListener)
|
document.addEventListener("setting-tabChange", determineListener);
|
||||||
|
|
||||||
loadContent('setting-tab-proxy')
|
loadContent("setting-tab-proxy");
|
||||||
|
|
||||||
function setupCustomizationSettings() {
|
function setupCustomizationSettings() {
|
||||||
applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
|
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
|
||||||
applySavedLocalStorage('alu__selectedLanguage', 'dropdown__selected-language');
|
applySavedLocalStorage(
|
||||||
let themeDropdown = document.getElementById('dropdown__selected-theme-menu')
|
"alu__selectedLanguage",
|
||||||
let languageDropdown = document.getElementById('dropdown__selected-language-menu')
|
"dropdown__selected-language"
|
||||||
applyDropdownEventListeners(themeDropdown, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
|
);
|
||||||
applyDropdownEventListeners(languageDropdown, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage);
|
let themeDropdown = document.getElementById(
|
||||||
|
"dropdown__selected-theme-menu"
|
||||||
|
);
|
||||||
|
let languageDropdown = document.getElementById(
|
||||||
|
"dropdown__selected-language-menu"
|
||||||
|
);
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
themeDropdown,
|
||||||
|
"dropdown__selected-theme",
|
||||||
|
"alu__selectedTheme",
|
||||||
|
changeTheme
|
||||||
|
);
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
languageDropdown,
|
||||||
|
"dropdown__selected-language",
|
||||||
|
"alu__selectedLanguage",
|
||||||
|
navigateToNewLangaugePage
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupCloakingSettings() {
|
function setupCloakingSettings() {
|
||||||
Array.from(document.getElementById('cloak-list').children).forEach((cloak) => {
|
Array.from(document.getElementById("cloak-list").children).forEach(
|
||||||
cloak.addEventListener('click', () => {
|
(cloak) => {
|
||||||
let cloakName = cloak.dataset.cloakName
|
cloak.addEventListener("click", () => {
|
||||||
let cloakIcon = cloak.dataset.cloakIcon
|
let cloakName = cloak.dataset.cloakName;
|
||||||
|
let cloakIcon = cloak.dataset.cloakIcon;
|
||||||
|
|
||||||
let localStorageItem = {
|
let localStorageItem = {
|
||||||
"name": cloakName,
|
name: cloakName,
|
||||||
"icon": cloakIcon,
|
icon: cloakIcon,
|
||||||
"isCustom": false,
|
isCustom: false,
|
||||||
}
|
};
|
||||||
localStorage.setItem('alu__selectedCloak', JSON.stringify(localStorageItem))
|
localStorage.setItem(
|
||||||
|
"alu__selectedCloak",
|
||||||
|
JSON.stringify(localStorageItem)
|
||||||
|
);
|
||||||
|
|
||||||
if (cloakName == "None") {
|
if (cloakName == "None") {
|
||||||
localStorage.removeItem('alu__selectedCloak')
|
localStorage.removeItem("alu__selectedCloak");
|
||||||
cloakName = "Settings | Alu"
|
cloakName = "Settings | Alu";
|
||||||
cloakIcon = "/favicon.png"
|
cloakIcon = "/favicon.png";
|
||||||
}
|
}
|
||||||
let link = document.querySelector("link[rel~='icon']");
|
let link = document.querySelector("link[rel~='icon']");
|
||||||
if (!link) {
|
if (!link) {
|
||||||
link = document.createElement('link');
|
link = document.createElement("link");
|
||||||
link.rel = 'icon';
|
link.rel = "icon";
|
||||||
document.head.appendChild(link);
|
document.head.appendChild(link);
|
||||||
}
|
}
|
||||||
link.href = cloakIcon;
|
link.href = cloakIcon;
|
||||||
document.title = cloakName;
|
document.title = cloakName;
|
||||||
|
|
||||||
if (!cloak.classList.contains("selected")) {
|
if (!cloak.classList.contains("selected")) {
|
||||||
Array.from(document.getElementById('cloak-list').children).forEach((cloak2) => {
|
Array.from(document.getElementById("cloak-list").children).forEach(
|
||||||
cloak2.classList.remove('selected')
|
(cloak2) => {
|
||||||
})
|
cloak2.classList.remove("selected");
|
||||||
cloak.classList.add('selected')
|
|
||||||
}
|
}
|
||||||
})
|
);
|
||||||
})
|
cloak.classList.add("selected");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
let customNameInput = document.getElementById('cloak-custom-name-input')
|
let customNameInput = document.getElementById("cloak-custom-name-input");
|
||||||
let customFaviconInput = document.getElementById('cloak-custom-favicon-input')
|
let customFaviconInput = document.getElementById(
|
||||||
if (localStorage.getItem('alu__selectedCloak')) {
|
"cloak-custom-favicon-input"
|
||||||
let selectedCloak = JSON.parse(localStorage.getItem('alu__selectedCloak'))
|
);
|
||||||
|
if (localStorage.getItem("alu__selectedCloak")) {
|
||||||
|
let selectedCloak = JSON.parse(
|
||||||
|
localStorage.getItem("alu__selectedCloak")
|
||||||
|
);
|
||||||
if (selectedCloak.isCustom) {
|
if (selectedCloak.isCustom) {
|
||||||
customNameInput.value = selectedCloak.name
|
customNameInput.value = selectedCloak.name;
|
||||||
customFaviconInput.value = selectedCloak.icon
|
customFaviconInput.value = selectedCloak.icon;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('cloak-custom-button').addEventListener("click", () => {
|
document
|
||||||
let cloakName = document.getElementById('cloak-custom-name-input').value
|
.getElementById("cloak-custom-button")
|
||||||
let cloakIcon = document.getElementById('cloak-custom-favicon-input').value
|
.addEventListener("click", () => {
|
||||||
|
let cloakName = document.getElementById(
|
||||||
|
"cloak-custom-name-input"
|
||||||
|
).value;
|
||||||
|
let cloakIcon = document.getElementById(
|
||||||
|
"cloak-custom-favicon-input"
|
||||||
|
).value;
|
||||||
let localStorageItem = {
|
let localStorageItem = {
|
||||||
"name": cloakName,
|
name: cloakName,
|
||||||
"icon": cloakIcon,
|
icon: cloakIcon,
|
||||||
"isCustom": true,
|
isCustom: true,
|
||||||
}
|
};
|
||||||
localStorage.setItem('alu__selectedCloak', JSON.stringify(localStorageItem))
|
localStorage.setItem(
|
||||||
|
"alu__selectedCloak",
|
||||||
|
JSON.stringify(localStorageItem)
|
||||||
|
);
|
||||||
if (cloakName == "None") {
|
if (cloakName == "None") {
|
||||||
localStorage.removeItem('alu__selectedCloak')
|
localStorage.removeItem("alu__selectedCloak");
|
||||||
cloakName = "Settings | Alu"
|
cloakName = "Settings | Alu";
|
||||||
cloakIcon = "/favicon.png"
|
cloakIcon = "/favicon.png";
|
||||||
}
|
}
|
||||||
let link = document.querySelector("link[rel~='icon']");
|
let link = document.querySelector("link[rel~='icon']");
|
||||||
if (!link) {
|
if (!link) {
|
||||||
link = document.createElement('link');
|
link = document.createElement("link");
|
||||||
link.rel = 'icon';
|
link.rel = "icon";
|
||||||
document.head.appendChild(link);
|
document.head.appendChild(link);
|
||||||
}
|
}
|
||||||
link.href = cloakIcon;
|
link.href = cloakIcon;
|
||||||
document.title = cloakName;
|
document.title = cloakName;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeTheme() {
|
function changeTheme() {
|
||||||
let theme = JSON.parse(localStorage.getItem('alu__selectedTheme')).value
|
let theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value;
|
||||||
if (theme) {
|
if (theme) {
|
||||||
document.documentElement.setAttribute('data-theme', theme.toLowerCase())
|
document.documentElement.setAttribute("data-theme", theme.toLowerCase());
|
||||||
let footer = document.getElementById('footer');
|
let footer = document.getElementById("footer");
|
||||||
if (footer) {
|
if (footer) {
|
||||||
footer.dataset.theme = theme.toLowerCase();
|
footer.dataset.theme = theme.toLowerCase();
|
||||||
}
|
}
|
||||||
|
|
@ -278,29 +356,49 @@ const t = useTranslations(lang);
|
||||||
|
|
||||||
function setupSettings(event) {
|
function setupSettings(event) {
|
||||||
if (event.detail == "setting-tab-proxy") {
|
if (event.detail == "setting-tab-proxy") {
|
||||||
applySavedLocalStorage('alu__selectedProxy', 'dropdown__selected-proxy');
|
applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
|
||||||
applySavedLocalStorage('alu__search_engine', 'dropdown__search-engine');
|
applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
|
||||||
applySavedLocalStorage("alu__selectedOpenWith", 'dropdown__open-with');
|
applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
|
||||||
let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
|
let selectedProxyDropdown = document.getElementById(
|
||||||
let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
|
"dropdown__selected-proxy-menu"
|
||||||
let openWithDropdown = document.getElementById('dropdown__open-with-menu')
|
);
|
||||||
let bareUrlInput = document.getElementById('bare-url-input')
|
let searchEngineDropdown = document.getElementById(
|
||||||
let searxngUrlInput = document.getElementById('searxng-url-input')
|
"dropdown__search-engine-menu"
|
||||||
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl")
|
);
|
||||||
|
let openWithDropdown = document.getElementById(
|
||||||
|
"dropdown__open-with-menu"
|
||||||
|
);
|
||||||
|
let bareUrlInput = document.getElementById("bare-url-input");
|
||||||
|
let searxngUrlInput = document.getElementById("searxng-url-input");
|
||||||
|
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
|
||||||
if (savedSearxngUrl != undefined) {
|
if (savedSearxngUrl != undefined) {
|
||||||
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
|
if (savedSearxngUrl == "")
|
||||||
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
|
localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
|
||||||
|
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
|
||||||
}
|
}
|
||||||
// Proxy settings
|
// Proxy settings
|
||||||
applyInputListeners(bareUrlInput, 'alu__bareUrl')
|
applyInputListeners(bareUrlInput, "alu__bareUrl");
|
||||||
applyInputListeners(searxngUrlInput, 'alu__searxngUrl')
|
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
|
||||||
applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
|
applyDropdownEventListeners(
|
||||||
applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'alu__selectedProxy');
|
searchEngineDropdown,
|
||||||
applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'alu__selectedOpenWith');
|
"dropdown__search-engine",
|
||||||
if (localStorage.getItem('bareUrl')) {
|
"alu__search_engine",
|
||||||
bareUrlInput.value = localStorage.getItem('bareUrl')
|
checkSearxng
|
||||||
|
);
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
selectedProxyDropdown,
|
||||||
|
"dropdown__selected-proxy",
|
||||||
|
"alu__selectedProxy"
|
||||||
|
);
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
openWithDropdown,
|
||||||
|
"dropdown__open-with",
|
||||||
|
"alu__selectedOpenWith"
|
||||||
|
);
|
||||||
|
if (localStorage.getItem("bareUrl")) {
|
||||||
|
bareUrlInput.value = localStorage.getItem("bareUrl");
|
||||||
} else {
|
} else {
|
||||||
bareUrlInput.value = '/bare/'
|
bareUrlInput.value = "/bare/";
|
||||||
}
|
}
|
||||||
checkSearxng();
|
checkSearxng();
|
||||||
} else if (event.detail == "setting-tab-customization") {
|
} else if (event.detail == "setting-tab-customization") {
|
||||||
|
|
@ -313,27 +411,35 @@ const t = useTranslations(lang);
|
||||||
function checkSearxng() {
|
function checkSearxng() {
|
||||||
// This function checks if the "searxng" option was clicked, display an additional option if so.
|
// This function checks if the "searxng" option was clicked, display an additional option if so.
|
||||||
if (localStorage.getItem("alu__search_engine")) {
|
if (localStorage.getItem("alu__search_engine")) {
|
||||||
if (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase() == "searx") {
|
if (
|
||||||
document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '1'
|
JSON.parse(
|
||||||
|
localStorage.getItem("alu__search_engine")
|
||||||
|
).value.toLowerCase() == "searx"
|
||||||
|
) {
|
||||||
|
document.getElementsByClassName(
|
||||||
|
"setting__searxng-url"
|
||||||
|
)[0].style.opacity = "1";
|
||||||
} else {
|
} else {
|
||||||
document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '0'
|
document.getElementsByClassName(
|
||||||
|
"setting__searxng-url"
|
||||||
|
)[0].style.opacity = "0";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('setting-tabLoad', setupSettings)
|
document.addEventListener("setting-tabLoad", setupSettings);
|
||||||
|
|
||||||
function navigateToNewLangaugePage() {
|
function navigateToNewLangaugePage() {
|
||||||
let value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value
|
let value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value;
|
||||||
let currentLanguage = window.location.pathname.split("/")[1]
|
let currentLanguage = window.location.pathname.split("/")[1];
|
||||||
// Do nothing.. because we're already on the page.
|
// Do nothing.. because we're already on the page.
|
||||||
if (value == currentLanguage) return;
|
if (value == currentLanguage) return;
|
||||||
switch (value) {
|
switch (value) {
|
||||||
case "en":
|
case "en":
|
||||||
window.location.href = "/en/settings/"
|
window.location.href = "/en/settings/";
|
||||||
break;
|
break;
|
||||||
case "jp":
|
case "jp":
|
||||||
window.location.href = "/jp/settings/"
|
window.location.href = "/jp/settings/";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -367,7 +473,7 @@ const t = useTranslations(lang);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
/* annoying stuff with label elements. */
|
/* annoying stuff with label elements. */
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 1.0;
|
opacity: 1;
|
||||||
margin-block: 1em;
|
margin-block: 1em;
|
||||||
margin-inline: 0;
|
margin-inline: 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
@ -385,8 +491,8 @@ label {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #d8d8d8;
|
color: #d8d8d8;
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
transition: opacity .4s ease-in-out;
|
transition: opacity 0.4s ease-in-out;
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(100% - 48px);
|
width: calc(100% - 48px);
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
@ -399,7 +505,8 @@ input[type="radio"]{
|
||||||
display: none;
|
display: none;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
label:hover, input[type="radio"]:checked+label {
|
label:hover,
|
||||||
|
input[type="radio"]:checked + label {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.popup {
|
.popup {
|
||||||
|
|
@ -423,7 +530,7 @@ label:hover, input[type="radio"]:checked+label {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
position: relative;
|
position: relative;
|
||||||
gap: 25px
|
gap: 25px;
|
||||||
}
|
}
|
||||||
.marker {
|
.marker {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -433,10 +540,11 @@ label:hover, input[type="radio"]:checked+label {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
top: calc(-100%);
|
top: calc(-100%);
|
||||||
left: 0;
|
left: 0;
|
||||||
transition: transform .2s ease-in-out;
|
transition: transform 0.2s ease-in-out;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
}
|
}
|
||||||
.marker #bottom, .marker #top{
|
.marker #bottom,
|
||||||
|
.marker #top {
|
||||||
background-color: var(--background-highlight);
|
background-color: var(--background-highlight);
|
||||||
}
|
}
|
||||||
.marker #top {
|
.marker #top {
|
||||||
|
|
@ -448,8 +556,16 @@ label:hover, input[type="radio"]:checked+label {
|
||||||
height: calc(50% - 72px);
|
height: calc(50% - 72px);
|
||||||
border-radius: 0 32px 0 0;
|
border-radius: 0 32px 0 0;
|
||||||
}
|
}
|
||||||
#setting-tab-proxy:checked ~ .marker{transform: translateY(0%)}
|
#setting-tab-proxy:checked ~ .marker {
|
||||||
#setting-tab-customization:checked ~ .marker{transform: translateY(13.5%)}
|
transform: translateY(0%);
|
||||||
#setting-tab-cloaking:checked ~ .marker{transform: translateY(27%)}
|
}
|
||||||
#setting-tab-credits:checked ~ .marker{transform: translateY(41%)}
|
#setting-tab-customization:checked ~ .marker {
|
||||||
|
transform: translateY(13.5%);
|
||||||
|
}
|
||||||
|
#setting-tab-cloaking:checked ~ .marker {
|
||||||
|
transform: translateY(27%);
|
||||||
|
}
|
||||||
|
#setting-tab-credits:checked ~ .marker {
|
||||||
|
transform: translateY(41%);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -3,17 +3,48 @@ const { inputID } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<label class="switch">
|
<label class="switch">
|
||||||
<input id={inputID} checked="" type="checkbox">
|
<input id={inputID} checked="" type="checkbox" />
|
||||||
<div class="slider">
|
<div class="slider">
|
||||||
<div class="circle">
|
<div class="circle">
|
||||||
<svg class="cross" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 365.696 365.696" y="0" x="0" height="6" width="6" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
|
class="cross"
|
||||||
|
xml:space="preserve"
|
||||||
|
style="enable-background:new 0 0 512 512"
|
||||||
|
viewBox="0 0 365.696 365.696"
|
||||||
|
y="0"
|
||||||
|
x="0"
|
||||||
|
height="6"
|
||||||
|
width="6"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
<g>
|
<g>
|
||||||
<path data-original="#000000" fill="currentColor" d="M243.188 182.86 356.32 69.726c12.5-12.5 12.5-32.766 0-45.247L341.238 9.398c-12.504-12.503-32.77-12.503-45.25 0L182.86 122.528 69.727 9.374c-12.5-12.5-32.766-12.5-45.247 0L9.375 24.457c-12.5 12.504-12.5 32.77 0 45.25l113.152 113.152L9.398 295.99c-12.503 12.503-12.503 32.769 0 45.25L24.48 356.32c12.5 12.5 32.766 12.5 45.247 0l113.132-113.132L295.99 356.32c12.503 12.5 32.769 12.5 45.25 0l15.081-15.082c12.5-12.504 12.5-32.77 0-45.25zm0 0"></path>
|
<path
|
||||||
|
data-original="#000000"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M243.188 182.86 356.32 69.726c12.5-12.5 12.5-32.766 0-45.247L341.238 9.398c-12.504-12.503-32.77-12.503-45.25 0L182.86 122.528 69.727 9.374c-12.5-12.5-32.766-12.5-45.247 0L9.375 24.457c-12.5 12.504-12.5 32.77 0 45.25l113.152 113.152L9.398 295.99c-12.503 12.503-12.503 32.769 0 45.25L24.48 356.32c12.5 12.5 32.766 12.5 45.247 0l113.132-113.132L295.99 356.32c12.503 12.5 32.769 12.5 45.25 0l15.081-15.082c12.5-12.504 12.5-32.77 0-45.25zm0 0"
|
||||||
|
></path>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg class="checkmark" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 24 24" y="0" x="0" height="10" width="10" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
|
class="checkmark"
|
||||||
|
xml:space="preserve"
|
||||||
|
style="enable-background:new 0 0 512 512"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
y="0"
|
||||||
|
x="0"
|
||||||
|
height="10"
|
||||||
|
width="10"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
<g>
|
<g>
|
||||||
<path class="" data-original="#000000" fill="currentColor" d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"></path>
|
<path
|
||||||
|
class=""
|
||||||
|
data-original="#000000"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
|
||||||
|
></path>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -27,13 +58,13 @@ const { inputID } = Astro.props;
|
||||||
--switch-bg: rgb(131, 131, 131);
|
--switch-bg: rgb(131, 131, 131);
|
||||||
--switch-checked-bg: rgb(0, 218, 80);
|
--switch-checked-bg: rgb(0, 218, 80);
|
||||||
--switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
|
--switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
|
||||||
--switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
|
--switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
|
||||||
--circle-diameter: 18px;
|
--circle-diameter: 18px;
|
||||||
--circle-bg: #fff;
|
--circle-bg: #fff;
|
||||||
--circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
|
--circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
|
||||||
--circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
|
--circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
|
||||||
--circle-transition: var(--switch-transition);
|
--circle-transition: var(--switch-transition);
|
||||||
--icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
|
--icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
|
||||||
--icon-cross-color: var(--switch-bg);
|
--icon-cross-color: var(--switch-bg);
|
||||||
--icon-cross-size: 6px;
|
--icon-cross-size: 6px;
|
||||||
--icon-checkmark-color: var(--switch-checked-bg);
|
--icon-checkmark-color: var(--switch-checked-bg);
|
||||||
|
|
@ -42,7 +73,7 @@ const { inputID } = Astro.props;
|
||||||
--effect-height: calc(var(--effect-width) / 2 - 1px);
|
--effect-height: calc(var(--effect-width) / 2 - 1px);
|
||||||
--effect-bg: var(--circle-bg);
|
--effect-bg: var(--circle-bg);
|
||||||
--effect-border-radius: 1px;
|
--effect-border-radius: 1px;
|
||||||
--effect-transition: all .2s ease-in-out;
|
--effect-transition: all 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch input {
|
.switch input {
|
||||||
|
|
@ -150,7 +181,10 @@ const { inputID } = Astro.props;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch input:checked + .slider::before {
|
.switch input:checked + .slider::before {
|
||||||
left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
|
left: calc(
|
||||||
|
100% - var(--effect-width) - (var(--effect-width) / 2) -
|
||||||
|
var(--switch-offset)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch input:checked + .slider .circle {
|
.switch input:checked + .slider .circle {
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,19 @@
|
||||||
<script>
|
<script>
|
||||||
function switchTheme() {
|
function switchTheme() {
|
||||||
let currentTheme = localStorage.getItem("alu__selectedTheme")
|
let currentTheme = localStorage.getItem("alu__selectedTheme");
|
||||||
|
|
||||||
if (currentTheme) {
|
if (currentTheme) {
|
||||||
document.documentElement.setAttribute("data-theme", JSON.parse(currentTheme).value.toLowerCase());
|
document.documentElement.setAttribute(
|
||||||
let footer = document.getElementById('footer');
|
"data-theme",
|
||||||
|
JSON.parse(currentTheme).value.toLowerCase()
|
||||||
|
);
|
||||||
|
let footer = document.getElementById("footer");
|
||||||
if (footer) {
|
if (footer) {
|
||||||
footer.dataset.theme = JSON.parse(currentTheme).value.toLowerCase();
|
footer.dataset.theme = JSON.parse(currentTheme).value.toLowerCase();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
switchTheme()
|
switchTheme();
|
||||||
|
|
||||||
|
document.addEventListener("astro:after-swap", switchTheme);
|
||||||
|
|
||||||
document.addEventListener('astro:after-swap', switchTheme)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -3,58 +3,71 @@
|
||||||
<script transition:persist defer>
|
<script transition:persist defer>
|
||||||
// This is a hack to make sure window.__uv$config is defined, because this means everything has been.
|
// This is a hack to make sure window.__uv$config is defined, because this means everything has been.
|
||||||
if (window.__uv$config == undefined) window.location.reload();
|
if (window.__uv$config == undefined) window.location.reload();
|
||||||
var form = document.querySelector('form');
|
var form = document.querySelector("form");
|
||||||
var input = document.querySelector('input');
|
var input = document.querySelector("input");
|
||||||
window.navigator.serviceWorker.register('/sw.js', {
|
window.navigator.serviceWorker.register("/sw.js", {
|
||||||
scope: window.__uv$config.prefix
|
scope: window.__uv$config.prefix,
|
||||||
})
|
});
|
||||||
|
|
||||||
form.addEventListener('submit', (event) => {
|
form.addEventListener("submit", (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
let loadingContent = document.getElementById('loading-content');
|
let loadingContent = document.getElementById("loading-content");
|
||||||
loadingContent.style.opacity = 1;
|
loadingContent.style.opacity = 1;
|
||||||
let url = input.value.trim();
|
let url = input.value.trim();
|
||||||
if (!isUrl(url)) url = getSearchEngine() + url;
|
if (!isUrl(url)) url = getSearchEngine() + url;
|
||||||
else if (!(url.startsWith('https://') || url.startsWith('http://'))) url = 'http://' + url;
|
else if (!(url.startsWith("https://") || url.startsWith("http://")))
|
||||||
|
url = "http://" + url;
|
||||||
|
|
||||||
let iframe = document.getElementById('proxy-frame');
|
let iframe = document.getElementById("proxy-frame");
|
||||||
iframe.src = window.__uv$config.prefix + window.__uv$config.encodeUrl(url);
|
iframe.src = window.__uv$config.prefix + window.__uv$config.encodeUrl(url);
|
||||||
iframe.style.pointerEvents = "auto";
|
iframe.style.pointerEvents = "auto";
|
||||||
iframe.classList.add("proxy-frame");
|
iframe.classList.add("proxy-frame");
|
||||||
document.body.appendChild(iframe);
|
document.body.appendChild(iframe);
|
||||||
iframe.addEventListener('load', () => {
|
iframe.addEventListener("load", () => {
|
||||||
let topBar = document.getElementById('top-bar');
|
let topBar = document.getElementById("top-bar");
|
||||||
loadingContent.style.opacity = 0;
|
loadingContent.style.opacity = 0;
|
||||||
topBar.innerHTML = "";
|
topBar.innerHTML = "";
|
||||||
topBar.classList.add("top-bar");
|
topBar.classList.add("top-bar");
|
||||||
let closeButton = document.createElement('button');
|
let closeButton = document.createElement("button");
|
||||||
closeButton.classList.add("close-button")
|
closeButton.classList.add("close-button");
|
||||||
closeButton.innerText = "Close";
|
closeButton.innerText = "Close";
|
||||||
closeButton.addEventListener('click', () => {
|
closeButton.addEventListener("click", () => {
|
||||||
iframe.style.opacity = 0;
|
iframe.style.opacity = 0;
|
||||||
topBar.style.opacity = 0;
|
topBar.style.opacity = 0;
|
||||||
iframe.style.pointerEvents = "none";
|
iframe.style.pointerEvents = "none";
|
||||||
topBar.style.pointerEvents = "none";
|
topBar.style.pointerEvents = "none";
|
||||||
});
|
});
|
||||||
let urlText = document.createElement('p');
|
let urlText = document.createElement("p");
|
||||||
urlText.classList.add("url-text");
|
urlText.classList.add("url-text");
|
||||||
urlText.innerText = window.__uv$config.decodeUrl(iframe.src.split(__uv$config.prefix)[1]);
|
urlText.innerText = window.__uv$config.decodeUrl(
|
||||||
|
iframe.src.split(__uv$config.prefix)[1]
|
||||||
|
);
|
||||||
iframe.style.opacity = 1;
|
iframe.style.opacity = 1;
|
||||||
topBar.style.opacity = 1;
|
topBar.style.opacity = 1;
|
||||||
topBar.style.pointerEvents = "auto";
|
topBar.style.pointerEvents = "auto";
|
||||||
topBar.appendChild(closeButton);
|
topBar.appendChild(closeButton);
|
||||||
topBar.appendChild(urlText);
|
topBar.appendChild(urlText);
|
||||||
document.body.appendChild(topBar);
|
document.body.appendChild(topBar);
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function isUrl(val = ''){
|
function isUrl(val = "") {
|
||||||
if (/^http(s?):\/\//.test(val) || val.includes('.') && val.substr(0, 1) !== ' ') return true;
|
if (
|
||||||
|
/^http(s?):\/\//.test(val) ||
|
||||||
|
(val.includes(".") && val.substr(0, 1) !== " ")
|
||||||
|
)
|
||||||
|
return true;
|
||||||
return false;
|
return false;
|
||||||
};
|
}
|
||||||
|
|
||||||
function getSearchEngine() {
|
function getSearchEngine() {
|
||||||
switch (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase()) {
|
let localStorageSearchEngine = localStorage.getItem("alu__search_engine");
|
||||||
|
if (!localStorageSearchEngine) {
|
||||||
|
return "https://google.com/search?q=";
|
||||||
|
}
|
||||||
|
switch (
|
||||||
|
JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase()
|
||||||
|
) {
|
||||||
case "google": {
|
case "google": {
|
||||||
return "https://google.com/search?q=";
|
return "https://google.com/search?q=";
|
||||||
}
|
}
|
||||||
|
|
@ -69,13 +82,13 @@
|
||||||
if (localStorageURL) {
|
if (localStorageURL) {
|
||||||
if (localStorageURL == "") return "https://searxng.site/search?q=";
|
if (localStorageURL == "") return "https://searxng.site/search?q=";
|
||||||
// Ugly hack to remove the trailing slash :)
|
// Ugly hack to remove the trailing slash :)
|
||||||
if (localStorageURL.endsWith("/")) localStorageURL = localStorageURL.slice(0, -1);
|
if (localStorageURL.endsWith("/"))
|
||||||
|
localStorageURL = localStorageURL.slice(0, -1);
|
||||||
return localStorageURL + "/search?q=";
|
return localStorageURL + "/search?q=";
|
||||||
}
|
} else return "https://searxng.site/search?q=";
|
||||||
else return "https://searxng.site/search?q=";
|
|
||||||
}
|
}
|
||||||
default: {
|
default: {
|
||||||
return "https://google.com/search?q="
|
return "https://google.com/search?q=";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,11 @@
|
||||||
<svg width="100%" height="100%" preserveAspectRatio="none" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
id="svg"
|
||||||
|
viewBox="0 0 1440 390"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="transition duration-300 ease-in-out delay-150">
|
||||||
<style>
|
<style>
|
||||||
.path-0 {
|
.path-0 {
|
||||||
animation: pathAnim-0 15s;
|
animation: pathAnim-0 15s;
|
||||||
|
|
@ -7,21 +14,32 @@
|
||||||
}
|
}
|
||||||
@keyframes pathAnim-0 {
|
@keyframes pathAnim-0 {
|
||||||
0% {
|
0% {
|
||||||
d: path("M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
d: path("M 0,400 L 0,100 C 171.19999999999993,71.6 342.39999999999986,43.2 497,54 C 651.6000000000001,64.8 789.6000000000001,114.80000000000001 944,129 C 1098.3999999999999,143.2 1269.1999999999998,121.6 1440,100 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,100 C 171.19999999999993,71.6 342.39999999999986,43.2 497,54 C 651.6000000000001,64.8 789.6000000000001,114.80000000000001 944,129 C 1098.3999999999999,143.2 1269.1999999999998,121.6 1440,100 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
d: path("M 0,400 L 0,100 C 186.66666666666669,82.13333333333333 373.33333333333337,64.26666666666667 540,54 C 706.6666666666666,43.733333333333334 853.3333333333333,41.06666666666666 1000,50 C 1146.6666666666667,58.93333333333334 1293.3333333333335,79.46666666666667 1440,100 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,100 C 186.66666666666669,82.13333333333333 373.33333333333337,64.26666666666667 540,54 C 706.6666666666666,43.733333333333334 853.3333333333333,41.06666666666666 1000,50 C 1146.6666666666667,58.93333333333334 1293.3333333333335,79.46666666666667 1440,100 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
d: path("M 0,400 L 0,100 C 110.13333333333333,74.53333333333333 220.26666666666665,49.06666666666666 393,58 C 565.7333333333333,66.93333333333334 801.0666666666666,110.26666666666668 986,123 C 1170.9333333333334,135.73333333333332 1305.4666666666667,117.86666666666666 1440,100 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,100 C 110.13333333333333,74.53333333333333 220.26666666666665,49.06666666666666 393,58 C 565.7333333333333,66.93333333333334 801.0666666666666,110.26666666666668 986,123 C 1170.9333333333334,135.73333333333332 1305.4666666666667,117.86666666666666 1440,100 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
d: path("M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}</style>
|
}
|
||||||
|
</style>
|
||||||
<style media="screen"></style>
|
<style media="screen"></style>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
|
<linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
|
||||||
|
|
@ -29,7 +47,13 @@
|
||||||
<stop offset="95%" stop-color="var(--accent-color-brighter)"></stop>
|
<stop offset="95%" stop-color="var(--accent-color-brighter)"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<path d="M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
|
<path
|
||||||
|
d="M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z"
|
||||||
|
stroke="none"
|
||||||
|
stroke-width="0"
|
||||||
|
fill="url(#gradient)"
|
||||||
|
fill-opacity="0.53"
|
||||||
|
class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
|
||||||
<style>
|
<style>
|
||||||
.path-1 {
|
.path-1 {
|
||||||
animation: pathAnim-1 15s;
|
animation: pathAnim-1 15s;
|
||||||
|
|
@ -38,21 +62,32 @@
|
||||||
}
|
}
|
||||||
@keyframes pathAnim-1 {
|
@keyframes pathAnim-1 {
|
||||||
0% {
|
0% {
|
||||||
d: path("M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
d: path("M 0,400 L 0,233 C 202,220.46666666666667 404,207.93333333333334 539,220 C 674,232.06666666666666 742.0000000000001,268.7333333333333 881,275 C 1019.9999999999999,281.2666666666667 1230,257.1333333333333 1440,233 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,233 C 202,220.46666666666667 404,207.93333333333334 539,220 C 674,232.06666666666666 742.0000000000001,268.7333333333333 881,275 C 1019.9999999999999,281.2666666666667 1230,257.1333333333333 1440,233 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
d: path("M 0,400 L 0,233 C 181.33333333333337,210.86666666666667 362.66666666666674,188.73333333333332 512,188 C 661.3333333333333,187.26666666666668 778.6666666666665,207.93333333333334 928,219 C 1077.3333333333335,230.06666666666666 1258.6666666666667,231.53333333333333 1440,233 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,233 C 181.33333333333337,210.86666666666667 362.66666666666674,188.73333333333332 512,188 C 661.3333333333333,187.26666666666668 778.6666666666665,207.93333333333334 928,219 C 1077.3333333333335,230.06666666666666 1258.6666666666667,231.53333333333333 1440,233 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
d: path("M 0,400 L 0,233 C 195.06666666666666,222.86666666666667 390.1333333333333,212.73333333333332 559,216 C 727.8666666666667,219.26666666666668 870.5333333333333,235.93333333333334 1013,241 C 1155.4666666666667,246.06666666666666 1297.7333333333333,239.53333333333333 1440,233 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,233 C 195.06666666666666,222.86666666666667 390.1333333333333,212.73333333333332 559,216 C 727.8666666666667,219.26666666666668 870.5333333333333,235.93333333333334 1013,241 C 1155.4666666666667,246.06666666666666 1297.7333333333333,239.53333333333333 1440,233 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
d: path("M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z");
|
d: path(
|
||||||
|
"M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}</style>
|
}
|
||||||
|
</style>
|
||||||
<style media="screen"></style>
|
<style media="screen"></style>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
|
<linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
|
||||||
|
|
@ -60,5 +95,11 @@
|
||||||
<stop offset="95%" stop-color="#3d097d"></stop>
|
<stop offset="95%" stop-color="#3d097d"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<path d="M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
|
<path
|
||||||
|
d="M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z"
|
||||||
|
stroke="none"
|
||||||
|
stroke-width="0"
|
||||||
|
fill="url(#gradient)"
|
||||||
|
fill-opacity="1"
|
||||||
|
class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
|
@ -1,11 +1,36 @@
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
console.log("%cWelcome to Alu", "color: #0251d9; font-size: 2rem; font-weight: bold; text-shadow: 2px 2px 0 #033c9e;");
|
console.log(
|
||||||
|
"%cWelcome to Alu",
|
||||||
|
"color: #0251d9; font-size: 2rem; font-weight: bold; text-shadow: 2px 2px 0 #033c9e;"
|
||||||
|
);
|
||||||
|
|
||||||
console.log("%cSystem Information: ", "color: #025bf5; font-size: 1rem; font-weight: bold;");
|
console.log(
|
||||||
console.log("%cOS: %c" + navigator.platform, "color: #025bf5; font-size: 0.75rem; font-weight: bold;", "color: #025bf5; font-size: 0.75rem;");
|
"%cSystem Information: ",
|
||||||
console.log("%cBrowser: %c" + navigator.userAgent, "color: #025bf5; font-size: 0.75rem; font-weight: bold;", "color: #025bf5; font-size: 0.75rem;");
|
"color: #025bf5; font-size: 1rem; font-weight: bold;"
|
||||||
console.log("%cCPU Cores: %c" + navigator.hardwareConcurrency, "color: #025bf5; font-size: 0.75rem; font-weight: bold;", "color: #025bf5; font-size: 0.75rem;");
|
);
|
||||||
|
console.log(
|
||||||
|
"%cOS: %c" + navigator.platform,
|
||||||
|
"color: #025bf5; font-size: 0.75rem; font-weight: bold;",
|
||||||
|
"color: #025bf5; font-size: 0.75rem;"
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
"%cBrowser: %c" + navigator.userAgent,
|
||||||
|
"color: #025bf5; font-size: 0.75rem; font-weight: bold;",
|
||||||
|
"color: #025bf5; font-size: 0.75rem;"
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
"%cCPU Cores: %c" + navigator.hardwareConcurrency,
|
||||||
|
"color: #025bf5; font-size: 0.75rem; font-weight: bold;",
|
||||||
|
"color: #025bf5; font-size: 0.75rem;"
|
||||||
|
);
|
||||||
// Cmon firefox, do we really not support this?? Basic stuff here from the "indie browser".
|
// Cmon firefox, do we really not support this?? Basic stuff here from the "indie browser".
|
||||||
console.log("%cMemory: %c" + navigator.deviceMemory + "GB", "color: #025bf5; font-size: 0.75rem; font-weight: bold;", "color: #025bf5; font-size: 0.75rem;");
|
console.log(
|
||||||
console.log("%cPlease include this information in a bug report!", "color: #025bf5; font-size: 0.75rem; font-weight: bold;");
|
"%cMemory: %c" + navigator.deviceMemory + "GB",
|
||||||
|
"color: #025bf5; font-size: 0.75rem; font-weight: bold;",
|
||||||
|
"color: #025bf5; font-size: 0.75rem;"
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
"%cPlease include this information in a bug report!",
|
||||||
|
"color: #025bf5; font-size: 0.75rem; font-weight: bold;"
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
---
|
---
|
||||||
import { ViewTransitions } from 'astro:transitions';
|
import { ViewTransitions } from "astro:transitions";
|
||||||
import Header from '../components/Header.astro';
|
import Header from "../components/Header.astro";
|
||||||
import Footer from '../components/Footer.astro';
|
import Footer from "../components/Footer.astro";
|
||||||
import ThemeLoader from '../components/ThemeLoader.astro';
|
import ThemeLoader from "../components/ThemeLoader.astro";
|
||||||
import CloakLoader from '../components/CloakLoader.astro';
|
import CloakLoader from "../components/CloakLoader.astro";
|
||||||
import WelcomeLogging from '../components/WelcomeLogging.astro';
|
import WelcomeLogging from "../components/WelcomeLogging.astro";
|
||||||
|
|
||||||
type Preload = {
|
type Preload = {
|
||||||
"href": string
|
href: string;
|
||||||
"as": string
|
as: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -19,7 +19,6 @@ interface Props {
|
||||||
const { title, optionalPreloads } = Astro.props;
|
const { title, optionalPreloads } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -28,23 +27,27 @@ const { title, optionalPreloads } = Astro.props;
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="description" content="Astro description" />
|
<meta name="description" content="Astro description" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet" as="style">
|
<link
|
||||||
{optionalPreloads?.map((item) => {
|
href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"
|
||||||
return <link rel="preload" href={item.href} as={item.as} />
|
rel="stylesheet"
|
||||||
})}
|
as="style"
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
optionalPreloads?.map((item) => {
|
||||||
|
return <link rel="preload" href={item.href} as={item.as} />;
|
||||||
|
})
|
||||||
|
}
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<ViewTransitions />
|
<ViewTransitions />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Header></Header>
|
<Header />
|
||||||
<slot transition:animate={"fade"} />
|
<slot transition:animate={"fade"} />
|
||||||
<WelcomeLogging />
|
<WelcomeLogging />
|
||||||
<Footer></Footer>
|
<Footer />
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<style is:global>
|
<style is:global>
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -106,11 +109,12 @@ body {
|
||||||
--dropdown-background-color: #1f1d2e;
|
--dropdown-background-color: #1f1d2e;
|
||||||
}
|
}
|
||||||
|
|
||||||
body, html {
|
body,
|
||||||
|
html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: 'Varela Round', sans-serif;
|
font-family: "Varela Round", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -181,3 +185,5 @@ body > * {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,6 @@ import Layout from "../layouts/Layout.astro";
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.error-page {
|
.error-page {
|
||||||
color: white
|
color: white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -2,78 +2,238 @@
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import GameItem from "../../components/GameItem.astro";
|
import GameItem from "../../components/GameItem.astro";
|
||||||
|
|
||||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
export function getStaticPaths() {
|
export function getStaticPaths() {
|
||||||
return [
|
return [{ params: { lang: "en" } }, { params: { lang: "jp" } }];
|
||||||
{params: {lang: 'en'}},
|
|
||||||
{params: {lang: 'jp'}},
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={t("pages.games")}>
|
<Layout title={t("pages.games")}>
|
||||||
<h1 class="title-text">{t("games.title")}</h1>
|
<h1 class="title-text">{t("games.title")}</h1>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<GameItem name="1v1.lol" image="/games/1v1.lol/logo.png"></GameItem>
|
<GameItem name="1v1.lol" image="/games/1v1.lol/logo.png" />
|
||||||
<GameItem name="2048" image="/games/2048/logo.png"></GameItem>
|
<GameItem name="2048" image="/games/2048/logo.png" />
|
||||||
<GameItem name="The Backrooms" image="/games/backrooms/logo.png" slugName="backrooms"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Baldi's Basics" image="/games/baldi/logo.png" slugName="baldi"></GameItem>
|
name="The Backrooms"
|
||||||
<GameItem name="Cannon Basketball 4" image="/games/cannon-basketball-4/logo.png" slugName="cannon-basketball-4"></GameItem>
|
image="/games/backrooms/logo.png"
|
||||||
<GameItem name="Cell Machine" image="/games/cell-machine/logo.png" slugName="cell-machine"></GameItem>
|
slugName="backrooms"
|
||||||
<GameItem name="Chrome Dino" image="/games/chrome-dino/logo.png" slugName="chrome-dino"></GameItem>
|
/>
|
||||||
<GameItem name="Cookie Clicker" image="/games/cookie-clicker/logo.png" slugName="cookie-clicker"></GameItem>
|
<GameItem
|
||||||
<GameItem name="CSGO Clicker" image="/games/csgo-clicker/logo.png" slugName="csgo-clicker"></GameItem>
|
name="Baldi's Basics"
|
||||||
<GameItem name="Cut The Rope" image="/games/ctr/logo.png" slugName="ctr"></GameItem>
|
image="/games/baldi/logo.png"
|
||||||
<GameItem name="Cut The Rope - Holiday" image="/games/ctr-holiday/logo.png" slugName="ctr-holiday"></GameItem>
|
slugName="baldi"
|
||||||
<GameItem name="Cut The Rope - Time Travel" image="/games/ctr-tr/logo.png" slugName="ctr-tr"></GameItem>
|
/>
|
||||||
<GameItem name="Death Run 3D" image="/games/death-run-3d/logo.png" slugName="death-run-3d"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Doge Miner" image="/games/doge-miner/logo.png" slugName="doge-miner"></GameItem>
|
name="Cannon Basketball 4"
|
||||||
<GameItem name="Doodle Jump" image="/games/doodle-jump/logo.png" slugName="doodle-jump"></GameItem>
|
image="/games/cannon-basketball-4/logo.png"
|
||||||
<GameItem name="Doom" image="/games/doom/logo.png" slugName="doom"></GameItem>
|
slugName="cannon-basketball-4"
|
||||||
<GameItem name="Draw The Hill" image="/games/draw-the-hill/logo.png" slugName="draw-the-hill"></GameItem>
|
/>
|
||||||
<GameItem name="Evil Glitch" image="/games/evil-glitch/logo.png" slugName="evil-glitch"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Fall Boys" image="/games/fall-boys/logo.png" slugName="fall-boys"></GameItem>
|
name="Cell Machine"
|
||||||
<GameItem name="Fireboy and Watergirl" image="/games/firewater/logo.png" slugName="firewater"></GameItem>
|
image="/games/cell-machine/logo.png"
|
||||||
<GameItem name="Fireboy and Watergirl 2" image="/games/firewater2/logo.png" slugName="firewater2"></GameItem>
|
slugName="cell-machine"
|
||||||
<GameItem name="Five Nights at Freddy's" image="/games/fnaf/logo.png" slugName="fnaf"></GameItem>
|
/>
|
||||||
<GameItem name="Five Nights at Freddy's 2" image="/games/fnaf2/logo.png" slugName="fnaf2"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Five Nights at Freddy's 3" image="/games/fnaf3/logo.png" slugName="fnaf3"></GameItem>
|
name="Chrome Dino"
|
||||||
<GameItem name="Five Nights at Freddy's 4" image="/games/fnaf4/logo.png" slugName="fnaf4"></GameItem>
|
image="/games/chrome-dino/logo.png"
|
||||||
<GameItem name="Game Inside" image="/games/game-inside/logo.png" slugName="game-inside"></GameItem>
|
slugName="chrome-dino"
|
||||||
<GameItem name="Google Snake" image="/games/google-snake/logo.png" slugName="google-snake"></GameItem>
|
/>
|
||||||
<GameItem name="Grindcraft" image="/games/grindcraft/logo.png" slugName="grindcraft"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Idle Breakout" image="/games/idle-breakout/logo.png" slugName="idle-breakout"></GameItem>
|
name="Cookie Clicker"
|
||||||
<GameItem name="Just One Boss" image="/games/just-one-boss/logo.png" slugName="just-one-boss"></GameItem>
|
image="/games/cookie-clicker/logo.png"
|
||||||
<GameItem name="Line Rider" image="/games/line-rider/logo.png" slugName="line-rider"></GameItem>
|
slugName="cookie-clicker"
|
||||||
<GameItem name="Minecraft Classic" image="/games/minecraft-classic/logo.png" slugName="minecraft-classic"></GameItem>
|
/>
|
||||||
<GameItem name="Minesweeper" image="/games/minesweeper/logo.png" slugName="minesweeper"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Moto X3M" image="/games/moto-x3m/logo.png" slugName="moto-x3m"></GameItem>
|
name="CSGO Clicker"
|
||||||
<GameItem name="Moto X3M Pool Party" image="/games/moto-x3m-pool/logo.png" slugName="moto-x3m-pool"></GameItem>
|
image="/games/csgo-clicker/logo.png"
|
||||||
<GameItem name="Moto X3M Spooky Land" image="/games/moto-x3m-spooky/logo.png" slugName="moto-x3m-spooky"></GameItem>
|
slugName="csgo-clicker"
|
||||||
<GameItem name="Moto X3M Winter" image="/games/moto-x3m-winter/logo.png" slugName="moto-x3m-winter"></GameItem>
|
/>
|
||||||
<GameItem name="osu!" image="/games/osu/logo.png" slugName="osu"></GameItem>
|
<GameItem name="Cut The Rope" image="/games/ctr/logo.png" slugName="ctr" />
|
||||||
<GameItem name="Retro Bowl" image="/games/retro-bowl/logo.png" slugName="retro-bowl"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Slope" image="/games/slope/logo.png" slugName="slope"></GameItem>
|
name="Cut The Rope - Holiday"
|
||||||
<GameItem name="Super Mario 64" image="/games/sm64/logo.png" slugName="sm64"></GameItem>
|
image="/games/ctr-holiday/logo.png"
|
||||||
<GameItem name="Solitaire" image="/games/solitaire/logo.png" slugName="solitaire"></GameItem>
|
slugName="ctr-holiday"
|
||||||
<GameItem name="Superhot" image="/games/superhot/logo.png" slugName="superhot"></GameItem>
|
/>
|
||||||
<GameItem name="There is No Game" image="/games/there-is-no-game/logo.png" slugName="there-is-no-game"></GameItem>
|
<GameItem
|
||||||
<GameItem name="Ultima 6" image="/games/ul6/logo.png" slugName="ul6"></GameItem>
|
name="Cut The Rope - Time Travel"
|
||||||
<GameItem name="Vex 3" image="/games/vex3/logo.png" slugName="vex3"></GameItem>
|
image="/games/ctr-tr/logo.png"
|
||||||
<GameItem name="Vex 4" image="/games/vex4/logo.png" slugName="vex4"></GameItem>
|
slugName="ctr-tr"
|
||||||
<GameItem name="Vex 5" image="/games/vex5/logo.png" slugName="vex5"></GameItem>
|
/>
|
||||||
<GameItem name="Vex 6" image="/games/vex6/logo.png" slugName="vex6"></GameItem>
|
<GameItem
|
||||||
<GameItem name="World's Hardest Game" image="/games/worlds-hardest-game/logo.png" slugName="worlds-hardest-game"></GameItem>
|
name="Death Run 3D"
|
||||||
<GameItem name="World's Hardest Game 2" image="/games/worlds-hardest-game-2/logo.png" slugName="worlds-hardest-game-2"></GameItem>
|
image="/games/death-run-3d/logo.png"
|
||||||
<GameItem name="You are Bezos" image="/games/you-are-bezos/logo.png" slugName="you-are-bezos"></GameItem>
|
slugName="death-run-3d"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Doge Miner"
|
||||||
|
image="/games/doge-miner/logo.png"
|
||||||
|
slugName="doge-miner"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Doodle Jump"
|
||||||
|
image="/games/doodle-jump/logo.png"
|
||||||
|
slugName="doodle-jump"
|
||||||
|
/>
|
||||||
|
<GameItem name="Doom" image="/games/doom/logo.png" slugName="doom" />
|
||||||
|
<GameItem
|
||||||
|
name="Draw The Hill"
|
||||||
|
image="/games/draw-the-hill/logo.png"
|
||||||
|
slugName="draw-the-hill"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Evil Glitch"
|
||||||
|
image="/games/evil-glitch/logo.png"
|
||||||
|
slugName="evil-glitch"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Fall Boys"
|
||||||
|
image="/games/fall-boys/logo.png"
|
||||||
|
slugName="fall-boys"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Fireboy and Watergirl"
|
||||||
|
image="/games/firewater/logo.png"
|
||||||
|
slugName="firewater"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Fireboy and Watergirl 2"
|
||||||
|
image="/games/firewater2/logo.png"
|
||||||
|
slugName="firewater2"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Five Nights at Freddy's"
|
||||||
|
image="/games/fnaf/logo.png"
|
||||||
|
slugName="fnaf"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Five Nights at Freddy's 2"
|
||||||
|
image="/games/fnaf2/logo.png"
|
||||||
|
slugName="fnaf2"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Five Nights at Freddy's 3"
|
||||||
|
image="/games/fnaf3/logo.png"
|
||||||
|
slugName="fnaf3"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Five Nights at Freddy's 4"
|
||||||
|
image="/games/fnaf4/logo.png"
|
||||||
|
slugName="fnaf4"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Game Inside"
|
||||||
|
image="/games/game-inside/logo.png"
|
||||||
|
slugName="game-inside"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Google Snake"
|
||||||
|
image="/games/google-snake/logo.png"
|
||||||
|
slugName="google-snake"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Grindcraft"
|
||||||
|
image="/games/grindcraft/logo.png"
|
||||||
|
slugName="grindcraft"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Idle Breakout"
|
||||||
|
image="/games/idle-breakout/logo.png"
|
||||||
|
slugName="idle-breakout"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Just One Boss"
|
||||||
|
image="/games/just-one-boss/logo.png"
|
||||||
|
slugName="just-one-boss"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Line Rider"
|
||||||
|
image="/games/line-rider/logo.png"
|
||||||
|
slugName="line-rider"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Minecraft Classic"
|
||||||
|
image="/games/minecraft-classic/logo.png"
|
||||||
|
slugName="minecraft-classic"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Minesweeper"
|
||||||
|
image="/games/minesweeper/logo.png"
|
||||||
|
slugName="minesweeper"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Moto X3M"
|
||||||
|
image="/games/moto-x3m/logo.png"
|
||||||
|
slugName="moto-x3m"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Moto X3M Pool Party"
|
||||||
|
image="/games/moto-x3m-pool/logo.png"
|
||||||
|
slugName="moto-x3m-pool"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Moto X3M Spooky Land"
|
||||||
|
image="/games/moto-x3m-spooky/logo.png"
|
||||||
|
slugName="moto-x3m-spooky"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Moto X3M Winter"
|
||||||
|
image="/games/moto-x3m-winter/logo.png"
|
||||||
|
slugName="moto-x3m-winter"
|
||||||
|
/>
|
||||||
|
<GameItem name="osu!" image="/games/osu/logo.png" slugName="osu" />
|
||||||
|
<GameItem
|
||||||
|
name="Retro Bowl"
|
||||||
|
image="/games/retro-bowl/logo.png"
|
||||||
|
slugName="retro-bowl"
|
||||||
|
/>
|
||||||
|
<GameItem name="Slope" image="/games/slope/logo.png" slugName="slope" />
|
||||||
|
<GameItem
|
||||||
|
name="Super Mario 64"
|
||||||
|
image="/games/sm64/logo.png"
|
||||||
|
slugName="sm64"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Solitaire"
|
||||||
|
image="/games/solitaire/logo.png"
|
||||||
|
slugName="solitaire"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="Superhot"
|
||||||
|
image="/games/superhot/logo.png"
|
||||||
|
slugName="superhot"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="There is No Game"
|
||||||
|
image="/games/there-is-no-game/logo.png"
|
||||||
|
slugName="there-is-no-game"
|
||||||
|
/>
|
||||||
|
<GameItem name="Ultima 6" image="/games/ul6/logo.png" slugName="ul6" />
|
||||||
|
<GameItem name="Vex 3" image="/games/vex3/logo.png" slugName="vex3" />
|
||||||
|
<GameItem name="Vex 4" image="/games/vex4/logo.png" slugName="vex4" />
|
||||||
|
<GameItem name="Vex 5" image="/games/vex5/logo.png" slugName="vex5" />
|
||||||
|
<GameItem name="Vex 6" image="/games/vex6/logo.png" slugName="vex6" />
|
||||||
|
<GameItem
|
||||||
|
name="World's Hardest Game"
|
||||||
|
image="/games/worlds-hardest-game/logo.png"
|
||||||
|
slugName="worlds-hardest-game"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="World's Hardest Game 2"
|
||||||
|
image="/games/worlds-hardest-game-2/logo.png"
|
||||||
|
slugName="worlds-hardest-game-2"
|
||||||
|
/>
|
||||||
|
<GameItem
|
||||||
|
name="You are Bezos"
|
||||||
|
image="/games/you-are-bezos/logo.png"
|
||||||
|
slugName="you-are-bezos"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
|
|
|
||||||
|
|
@ -2,15 +2,12 @@
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import UVRegistrar from "../../components/UVRegistrar.astro";
|
import UVRegistrar from "../../components/UVRegistrar.astro";
|
||||||
|
|
||||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
export function getStaticPaths() {
|
export function getStaticPaths() {
|
||||||
return [
|
return [{ params: { lang: "en" } }, { params: { lang: "jp" } }];
|
||||||
{params: {lang: 'en'}},
|
|
||||||
{params: {lang: 'jp'}},
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -18,13 +15,13 @@ export function getStaticPaths () {
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<h1 class="title-text">{t("menu.welcome")}</h1>
|
<h1 class="title-text">{t("menu.welcome")}</h1>
|
||||||
<form class="url-input-form" id="url-input-form">
|
<form class="url-input-form" id="url-input-form">
|
||||||
<input class="url-input" type="text" placeholder={t("menu.search")}>
|
<input class="url-input" type="text" placeholder={t("menu.search")} />
|
||||||
<div id="loading-content">Loading...</div>
|
<div id="loading-content">Loading...</div>
|
||||||
<div id="top-bar"></div>
|
<div id="top-bar"></div>
|
||||||
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
|
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<UVRegistrar></UVRegistrar>
|
<UVRegistrar />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -47,25 +44,25 @@ form {
|
||||||
}
|
}
|
||||||
|
|
||||||
.url-input {
|
.url-input {
|
||||||
background-color: #080808;
|
background-color: var(--dropdown-background-color);
|
||||||
color: #D8DEE9;
|
color: var(--text-color);
|
||||||
border: 3px solid white;
|
border: 3px solid var(--text-color);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: 400ms ease-out;
|
transition: 400ms ease-out;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-family: 'Varela Round', sans-serif;
|
font-family: "Varela Round", sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.url-input::placeholder {
|
.url-input::placeholder {
|
||||||
color: #D8DEE9;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading-content {
|
#loading-content {
|
||||||
color: white;
|
color: var(--text-color);
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
||||||
|
|
@ -2,15 +2,12 @@
|
||||||
import SettingsTablist from "../../components/SettingsTablist.astro";
|
import SettingsTablist from "../../components/SettingsTablist.astro";
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
|
||||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
export function getStaticPaths() {
|
export function getStaticPaths() {
|
||||||
return [
|
return [{ params: { lang: "en" } }, { params: { lang: "jp" } }];
|
||||||
{params: {lang: 'en'}},
|
|
||||||
{params: {lang: 'jp'}},
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
import { ViewTransitions } from "astro:transitions";
|
import { ViewTransitions } from "astro:transitions";
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
|
@ -9,11 +8,12 @@ import { ViewTransitions } from "astro:transitions";
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<ViewTransitions />
|
<ViewTransitions />
|
||||||
<script>
|
<script>
|
||||||
if (localStorage.getItem("alu__selectedLanguage") === null) window.location.href = "/en/";
|
if (localStorage.getItem("alu__selectedLanguage") === null)
|
||||||
|
window.location.href = "/en/";
|
||||||
let currentLang = localStorage.getItem("alu__selectedLanguage");
|
let currentLang = localStorage.getItem("alu__selectedLanguage");
|
||||||
if (currentLang) {
|
if (currentLang) {
|
||||||
try {
|
try {
|
||||||
let parsed = JSON.parse(currentLang).value
|
let parsed = JSON.parse(currentLang).value;
|
||||||
switch (parsed) {
|
switch (parsed) {
|
||||||
case "en":
|
case "en":
|
||||||
window.location.href = "/en/";
|
window.location.href = "/en/";
|
||||||
|
|
@ -30,7 +30,6 @@ import { ViewTransitions } from "astro:transitions";
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body></body>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue