titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-16 21:10:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

run npm run format

Browse source
This commit is contained in:
cohenerickson 2023-12-14 08:45:54 -06:00
parent 99b08aff08
commit 2fe742f3f0
17 changed files with 259 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

6
postcss.config.js
View file

@ -1,6 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
autoprefixer: {}
}
};

8
public/sw.js
View file

@ -1,8 +1,8 @@
// @ts-nocheck
importScripts('/ultra/ultra.bundle.js');
importScripts('/ultra/ultra.config.js');
importScripts(__uv$config.sw || '/ultra/ultra.sw.js');
importScripts("/ultra/ultra.bundle.js");
importScripts("/ultra/ultra.config.js");
importScripts(__uv$config.sw || "/ultra/ultra.sw.js");
const sw = new UVServiceWorker();
self.addEventListener('fetch', (event) => event.respondWith(sw.fetch(event)));
self.addEventListener("fetch", (event) => event.respondWith(sw.fetch(event)));

36
src/components/Header.tsx
View file

@ -1,5 +1,5 @@
import { HeaderButton } from "./HeaderButton";
import { useTranslation } from 'react-i18next';
import { useTranslation } from "react-i18next";
// Header icons
import { HiOutlineCube } from "react-icons/hi";
@ -10,18 +10,38 @@ export function Header() {
const { t } = useTranslation();
return (
<div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between">
<div
id="navbar"
className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
>
<a href="/" class="w-1/2">
<div className="flex flex-row items-center">
<img src="/logo.png" className="h-16 w-16 hover:rotate-[360deg] transition-all duration-1000"></img>
<h1 className="font-roboto text-navbar-text-color text-4xl font-bold">{t('header.title')}</h1>
<img
src="/logo.png"
className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
></img>
<h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
{t("header.title")}
</h1>
</div>
</a>
<div className="w-1/2">
<div className="flex flex-row justify-end items-center">
<HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" />
<HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" />
<HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
<div className="flex flex-row items-center justify-end">
<HeaderButton
href="/games"
Icon={HiOutlineCube}
translationKey="header.games"
/>
<HeaderButton
href="/settings"
Icon={RxMixerVertical}
translationKey="header.settings"
/>
<HeaderButton
href="/discord"
Icon={RiLinksFill}
translationKey="header.discord"
/>
</div>
</div>
</div>

6
src/components/HeaderButton.tsx
View file

@ -13,9 +13,9 @@ export function HeaderButton(props: HeaderButtonProps) {
return (
<Link href={href}>
<div className="group p-4 flex flex-row items-center">
<Icon className="group-hover:text-text-hover-color transition duration-500 w-6 h-6" />
<span className="group-hover:text-text-hover-color transition duration-500 text-text-color text-lg pl-1 font-roboto font-bold">
<div className="group flex flex-row items-center p-4">
<Icon className="h-6 w-6 transition duration-500 group-hover:text-text-hover-color" />
<span className="font-roboto pl-1 text-lg font-bold text-text-color transition duration-500 group-hover:text-text-hover-color">
{t(translationKey)}
</span>
</div>

22
src/i18n.ts
View file

@ -1,17 +1,17 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import translationEN from './locales/en.json';
import translationJA from './locales/ja.json';
import translationEN from "./locales/en.json";
import translationJA from "./locales/ja.json";
const resources = {
en: {
translation: translationEN,
translation: translationEN
},
ja: {
translation: translationJA,
},
translation: translationJA
}
};
i18n
@ -19,10 +19,10 @@ i18n
.use(LanguageDetector)
.init({
resources,
fallbackLng: 'en',
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
escapeValue: false
}
});
export default i18n;

22
src/index.tsx
View file

@ -1,18 +1,18 @@
import { render } from 'preact';
import { LocationProvider, Router, Route } from 'preact-iso';
import { render } from "preact";
import { LocationProvider, Router, Route } from "preact-iso";
import { Header } from './components/Header.jsx';
import { Home } from './pages/Home';
import { NotFound } from './pages/_404.jsx';
import './style.css';
import './themes/main.css';
import './i18n';
import { discordPag } from './pages/discord.js';
import { Header } from "./components/Header.jsx";
import { Home } from "./pages/Home";
import { NotFound } from "./pages/_404.jsx";
import "./style.css";
import "./themes/main.css";
import "./i18n";
import { discordPag } from "./pages/discord.js";
export function App() {
return (
<LocationProvider>
<div class="flex flex-col h-screen">
<div class="flex h-screen flex-col">
<Header />
<div class="flex-1 bg-primary">
<main class="h-full">
@ -28,4 +28,4 @@ export function App() {
);
}
render(<App />, document.getElementById('app'));
render(<App />, document.getElementById("app"));

13
src/pages/Home.tsx
View file

@ -1,12 +1,12 @@
import { useState } from "preact/hooks";
import { useTranslation } from 'react-i18next';
import { useTranslation } from "react-i18next";
export function Home() {
const [isFocused, setIsFocused] = useState(false);
const { t } = useTranslation()
const { t } = useTranslation();
return (
<div class="flex justify-center items-center h-full">
<div class="flex h-full items-center justify-center">
<input
onFocus={(e) => {
setIsFocused(true);
@ -15,10 +15,9 @@ export function Home() {
setIsFocused(false);
}}
type="text"
class="p-2 border border-input-border-color rounded-2xl h-14 w-80 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto"
placeholder={isFocused ? '' : t('home.placeholder')}
>
</input>
class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
placeholder={isFocused ? "" : t("home.placeholder")}
></input>
</div>
);
}

18
src/pages/_404.tsx
View file

@ -1,18 +1,20 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'preact-router';
import { useTranslation } from "react-i18next";
import { Link } from "preact-router";
export function NotFound() {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<section class="h-full">
<div class="flex justify-center items-center h-full flex-col">
<div class="flex h-full flex-col items-center justify-center">
<img src="/404.png" class="h-72"></img>
<div class="p-6 flex flex-col items-center">
<p class="text-4xl font-roboto font-bold">{t('404.text')}</p>
<span class="text-3xl font-roboto">404</span>
<div class="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
<span class="font-roboto text-3xl">404</span>
</div>
<Link href="/">
<button class="p-2 border border-input-border-color rounded-2xl h-14 w-44 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('404.return')}</button>
<button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("404.return")}
</button>
</Link>
</div>
</section>

20
src/pages/discord.tsx
View file

@ -1,19 +1,23 @@
import { useTranslation } from 'react-i18next';
import { useTranslation } from "react-i18next";
export function discordPag() {
const { t } = useTranslation()
const { t } = useTranslation();
return (
<section class="h-full">
<div class="flex justify-center items-center h-full flex-col">
<div class="p-6 flex flex-col items-center">
<p class="text-4xl font-roboto font-bold">{t('discord.title')}</p>
<span class="text-3xl font-roboto">{t('discord.sub')}</span>
<div class="flex h-full flex-col items-center justify-center">
<div class="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
<span class="font-roboto text-3xl">{t("discord.sub")}</span>
</div>
<a href="https://discord.gg/unblocker" class="p-6">
<button class="p-2 border border-input-border-color rounded-2xl h-14 w-56 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('discord.button1')}</button>
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button1")}
</button>
</a>
<a href="/" class="p-6">
<button class="p-2 border border-input-border-color rounded-2xl h-14 w-56 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('discord.button2')}</button>
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button2")}
</button>
</a>
</div>
</section>

2
src/style.css
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap");
@tailwind base;
@tailwind components;

6
src/themes/main.css
View file

@ -14,13 +14,13 @@
--input-border-color: #eb6f92;
--input-border-size: 1.3px;
--navbar-logo-filter: none;
}
}
.font-inter {
font-family: 'Inter', sans-serif;
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: 'Roboto';
font-family: "Roboto";
}

16
tailwind.config.js
View file

@ -1,22 +1,18 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
colors: {
"primary": "var(--background-primary)",
primary: "var(--background-primary)",
"navbar-text-color": "var(--navbar-text-color)",
"navbar-color": "var(--navbar-color)",
"text-color": "var(--navbar-link-color)",
"text-hover-color": "var(--navbar-link-hover-color)",
"input": "var(--input-background-color)",
input: "var(--input-background-color)",
"input-text": "var(--input-text-color)",
"input-border-color": "var(--input-border-color)"
},
extend: {},
extend: {}
},
plugins: [],
}
plugins: []
};

8
vite.config.ts
View file

@ -1,8 +1,8 @@
import million from 'million/compiler';
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import million from "million/compiler";
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [million.vite({ auto: true }), preact()],
plugins: [million.vite({ auto: true }), preact()]
});