Init

2022-04-29 22:52:00 +08:00 · 2022-04-29 22:52:00 +08:00 · cc1c894d9b
commit cc1c894d9b
14 changed files with 1153 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/favicon.svg
+++ b/favicon.svg
@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
--- a/index.html
+++ b/index.html
@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
+    <meta name="renderer" content="webkit">
+    <meta name="force-rendering" content="webkit">
+    <meta name="backend-renderer" content="LitePage">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://i.186526.xyz">
+    <link rel="preconnect" href="https://storage.186526.xyz">
+    <link rel="icon" href="https://i.186526.xyz/avatar">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@500&amp;family=Fira+Mono&amp;family=Ubuntu&amp;family=Roboto&amp;display=swap"
+      rel="stylesheet">
+    <title>It's me, 186526!</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&amp;display=swap" rel="stylesheet">
+    <script type="module" src="/src/main.ts"></script>
+
+    <meta name="description" content="It's me, 186526! | 186526 的自留地">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="It's me, 186526! | 186526.xyz">
+    <meta name="og:description" content="It's me, 186526! | 186526 的自留地">
+  </head>
+
+<body>
+  <app>
+
+    <background></background>
+
+    <header>
+      <img src="https://i.186526.xyz/avatar" alt="Avatar" width="100px" />
+      <div>
+        <h1><a href="https://186526.xyz" title="186526.xyz - It's me, 186526!">It's me, 186526!</a></h1>
+        <description>一个啥都不会的屑</description>
+      </div>
+    </header>
+
+    <contents>
+      <group id="channel">
+        <card id="blog">
+          <a href="https://blog.186526.xyz" alt="186526's Blog"><img
+              src='https://storage.186526.xyz/home-app/assets/hexo.svg' /></a>
+        </card>
+        <card id="status">
+          <a href="https://status.186526.eu.org/" alt="186526's Status"><img
+              src="https://status.186526.eu.org/favicon.ico" /></a>
+        </card>
+        <card id="dn42">
+          <a href="https://net.186526.xyz" alt="186526 Network @ DN42"><img
+              src="https://storage.186526.xyz/home-app/assets/dn42.png" /></a>
+        </card>
+        <card id="github">
+          <a href="https://github.com/186526" alt="Github"><img
+              src="https://storage.186526.xyz/home-app/assets/github.svg" /></a>
+        </card>
+        <card id="telegram">
+          <a href="https://t.me/real186526" alt="Telegram"><img
+              src="https://storage.186526.xyz/home-app/assets/telegram.svg" /></a>
+        </card>
+        <card id="telegram">
+          <a href="mailto:admin@186526.xyz" alt="Telegram">
+            <icon>mail</icon>
+          </a>
+        </card>
+      </group>
+      <group id="friend">
+        <card>
+          <a href="https://zikin.org/" alt="Zikin的独立博客 - 青春大概如你所说"><img
+              src="https://cdn.jsdelivr.net/gh/ZikinCDN/img@latest/2021/logo.jpg" /></a>
+        </card>
+        <card>
+          <a href="https://blog.skrshadow.cn/" alt="Skrshadow - 是红雨, 斯哈斯哈"><img
+              src="https://sdn.geekzu.org/avatar/e2027c37ef15b736cf3ee8b7803216c4" /></a>
+        </card>
+        <card>
+          <a href="https://radium-bit.github.io/" alt="Radium-bit"><img
+              src="https://cdn.jsdelivr.net/gh/radium-bit/res@latest/avatar.webp" /></a>
+        </card>
+        <card>
+          <a href="https://jimmyqin.com/" alt="JimmyQin's Blog"><img src="https://jimmyqin.com/images/avatar.png" /></a>
+        </card>
+        <card>
+          <a href="https://laple.me" alt="Lapis Apple - 一个回收站，里面住着Lapis Apple。"><img
+              src="http://storage.186526.xyz/home-app/assets/lsp.avatar.png" /></a>
+        </card>
+      </group>
+      <group id="footer">
+        <p>
+          萌ICP备<a href="https://icp.gov.moe/?keyword=20218600">20218600</a>号
+        </p>
+
+        <p>Running on <a href="https://net.186526.xyz">186526 Network</a>.</p>
+        <p>Copyright © 2021
+          186526.xyz All rights Reserved.</p>
+      </group>
+    </contents>
+
+  </app>
+</body>
+
+<none id="description-list">
+  <p>一个啥都不会的屑</p>
+  <p>LSP, Verified by <img src="http://storage.186526.xyz/home-app/assets/lama.avatar.png" alt="lama3l9r's avatar" />
+    and <img src="http://storage.186526.xyz/home-app/assets/lsp.avatar.png" alt="lsp's avatar" /></p>
+  <p>Less code, more bug.</p>
+  <p>Arknights Player</p>
+  <p>btw, I use arch</p>
+  <p><code>console.log('Arch is the best!');</code></p>
+  <p>24岁, 是学生</p>
+  <p>一天25小时绝赞配网中...</p>
+  <p>DN42 贴(pi)贴(er)请求中...</p>
+  <p>大陆北方网友</p>
+  <p>Linux user ✗ KVM user ✓</p>
+  <p>世界一级<br>拖延症证书持有者</p>
+  <p>想拥有强大的自制力</p>
+  <p>wowaka, 晚安.</p>
+</none>
+</head>
+
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,17 @@
+{
+  "name": "home-app",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^4.5.4",
+    "vite": "^2.9.5"
+  },
+  "dependencies": {
+    "typed.js": "^2.0.12"
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,23 @@
+import "./styles/base.css";
+import "./styles/header.css";
+import "./styles/contents.css";
+
+import Typed from "typed.js";
+
+window.addEventListener("load", (event) => {
+	new Typed(document.querySelector("description") ?? "description", {
+		stringsElement: "#description-list",
+		shuffle: true,
+		typeSpeed: 60,
+		backDelay: 2000,
+		fadeOut: false,
+		loop: true,
+		showCursor: false,
+	});
+
+	document.querySelectorAll("[alt]").forEach((Elem) => {
+		const tooltip = document.createElement("tooltiptext");
+		tooltip.innerText = Elem.getAttribute("alt") ?? "";
+		Elem.appendChild(tooltip);
+	});
+});
--- a/src/public/78361641.png
+++ b/src/public/78361641.png
--- a/src/style.css
+++ b/src/style.css
@ -0,0 +1,417 @@
+:root {
+	--background-color: #fff;
+	--font-color: #000;
+	--font-color-lighter: rgb(87, 89, 88);
+	--font-size-main: 3.045rem;
+	--font-size-description: 1.245rem;
+	--lineheight-description: 1.845rem;
+	--box-color: #f2f2f2;
+	--working-color: #137333;
+	--working-color-background: #e6f4ea;
+	--error-color-background: #fce8e6;
+	--error-color: #c5221f;
+	--working-with-error-color: #b05a00;
+	--working-with-error-color-background: #fef7e0;
+	--linear-start-color: #f37335;
+	--linear-end-color: #ff4200fc;
+	--icon-size: 48px;
+}
+
+h2,
+h1 {
+	background: linear-gradient(
+		90deg,
+		var(--linear-start-color),
+		var(--linear-end-color)
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+div,
+p {
+	font-family: Roboto, Noto Sans SC, sans-serif;
+	line-height: 140%;
+}
+
+body {
+	margin: 2rem 2rem;
+	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
+	color: var(--font-color);
+	background-color: var(--background-color);
+}
+
+a {
+	text-decoration: none;
+	color: #1967d2;
+}
+
+header {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	justify-content: flex-start;
+	align-content: stretch;
+}
+
+app h1 {
+	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
+    margin-block-start: 0em;
+    margin-block-end: 0em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: normal;
+}
+
+header description {
+	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
+	font-size: var(--font-size-description);
+	line-height: var(--lineheight-description);
+	color: var(--font-color-lighter);
+	margin-left: 5px;
+}
+
+header div {
+	line-height: var(--lineheight-description);
+	margin-top: 1rem;
+	flex-basis: 100%;
+}
+
+header h1 {
+	font-size: var(--font-size-main);
+	line-height: var(--font-size-main);
+}
+
+header > div {
+	display: inline-flex;
+	align-items: flex-start;
+	flex-direction: column;
+	justify-content: center;
+}
+
+app > header > img {
+	margin-right: 1rem;
+	margin-bottom: 1rem;
+}
+
+code {
+	font-family: Fira Mono, monospace;
+}
+
+none {
+	display: none;
+}
+
+icon {
+	font-size: var(--icon-size) !important;
+}
+
+footer {
+	color: var(--font-color-lighter);
+	font-size: calc(var(--font-size-description) - 0.2rem);
+}
+
+footer > text {
+	margin-top: 1rem;
+	font-size: calc(var(--font-size-description) - 0.4rem);
+}
+
+footer > * {
+	display: block;
+}
+
+contents {
+	display: flex;
+	flex-direction: row-reverse;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+contents group {
+	margin: 1rem 0;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: flex-start;
+	min-width: 0;
+}
+
+contents content {
+	display: block;
+	min-width: 0;
+}
+
+contents content h2 {
+	font-weight: 500;
+	margin-block-start: 0.5rem !important;
+	margin-block-end: 0.5rem !important;
+}
+
+contents content h2.zh-cn {
+	font-weight: 900 !important;
+}
+
+contents content#map img {
+	height: 100%;
+	width: 100%;
+	max-height: 350px;
+	max-width: 700px;
+	min-height: 150px;
+	min-width: 300px;
+	border-radius: 10px;
+	display: block;
+	margin: 1.5rem 0;
+}
+
+contents content#path img {
+	width: 100%;
+	min-width: 300px;
+	max-height: 600px;
+	border-radius: 10px;
+	margin: 1.5rem 0;
+}
+
+code {
+	padding: 0.15em 0.3em;
+	margin: 0;
+	font-size: 85%;
+	background-color: var(--box-color);
+	border-radius: 3px;
+	line-height: 200%;
+}
+
+group#pops {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: stretch;
+}
+
+group#pops content#status {
+	flex-basis: 100%;
+}
+
+group#pops img {
+	height: 48px;
+	vertical-align: middle;
+}
+
+group#pops pop[status="working"] {
+	background-color: var(--working-color-background);
+}
+
+group#pops pop[status="working-with-error"] {
+	background-color: var(--working-with-error-color-background);
+}
+
+group#pops pop[status="error"] {
+	background-color: var(--error-color-background);
+}
+
+.error-text {
+	color: var(--error-color);
+}
+
+.working-with-error-text {
+	color: var(--working-with-error-color);
+}
+
+.working-text {
+	color: var(--working-color);
+}
+
+group#pops pop {
+	background-color: var(--box-color);
+	padding: 2rem;
+	min-height: 3rem;
+	min-width: 24%;
+	border-radius: 9px;
+	flex-grow: 1;
+	margin-top: 1rem;
+	margin-right: 1rem;
+	flex-basis: 2rem;
+}
+
+pop > system {
+	margin-top: 1rem;
+}
+
+pop > span,
+pop > system {
+	margin-bottom: 1rem;
+}
+
+pop name {
+	font-size: calc(var(--font-size-description) + 0.1rem);
+	vertical-align: middle;
+	margin-left: 0.5rem;
+}
+
+pop location {
+	font-size: calc(var(--font-size-description) - 0.2rem);
+	color: var(--font-color-lighter);
+	vertical-align: middle;
+	display: inherit;
+	margin-left: calc(0.5rem + 53px);
+}
+
+pop > status > i {
+	vertical-align: middle;
+}
+
+pop ipv4,
+pop ipv6,
+pop system {
+	font-size: calc(var(--font-size-description) - 0.25rem);
+	font-family: Roboto, Noto Sans SC, sans-serif;
+}
+
+@media screen and (max-width: 480px) {
+	body {
+		margin: 6rem 2rem;
+	}
+
+	:root {
+		--font-size-main: 3rem;
+		--font-size-description: 1.045rem;
+	}
+
+	footer {
+		font-size: calc(var(--font-size-description) - 0.2rem);
+	}
+
+	footer > text {
+		font-size: calc(var(--font-size-description) - 0.4rem);
+	}
+
+	header description {
+		order: -1;
+	}
+}
+
+@media screen and (max-width: 1126px) {
+	contents group {
+		justify-content: flex-start;
+		flex-direction: column;
+	}
+
+	group#pops {
+		width: 50%;
+	}
+
+	group#picture {
+		width: 40%;
+	}
+
+	group#pops pop {
+		flex-basis: 100%;
+	}
+}
+
+@media screen and (max-width: 768px) {
+	contents group {
+		justify-content: flex-start;
+		flex-direction: column;
+	}
+
+	contents {
+		justify-content: flex-start;
+		flex-direction: column;
+	}
+
+	group#pops {
+		width: 100%;
+	}
+
+	group#picture {
+		width: 100% !important;
+	}
+
+	pop > * {
+		overflow-x: auto;
+		overflow-y: hidden;
+		white-space: nowrap;
+	}
+
+	group#pops pop {
+		margin-right: unset !important;
+	}
+}
+
+@media screen and (min-width: 1126px) {
+	group#picture {
+		width: 100%;
+	}
+
+	contents group#text {
+		flex-direction: column;
+	}
+
+	contents {
+		justify-content: flex-start;
+		flex-direction: column;
+	}
+}
+
+@media screen and (min-width: 768px) {
+	body {
+		margin: 8% 10%;
+	}
+
+	header > * {
+		display: inline-block;
+	}
+
+	header > div {
+		flex-direction: row;
+		align-items: center;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--font-color: #e8eaed;
+		--font-color-lighter: #9aa0a6;
+		--background-color: #121212;
+		--box-color: rgb(40 40 40 / 73%);
+		--working-color-background: rgba(129, 201, 149, 0.24);
+		--error-color-background: rgba(242, 139, 130, 0.24);
+		--working-with-error-color-background: rgba(253, 214, 99, 0.24);
+		--working-color: #81c995;
+		--error-color: #f28b82;
+		--working-with-error-color: #fdd663;
+		--linear-start-color: #0c8cca;
+		--linear-end-color: #00bdff;
+	}
+
+	contents content#path img {
+		filter: invert(93%);
+	}
+}
+
+content#prefix ul {
+	padding: unset;
+}
+
+content#prefix ul > li {
+	list-style-type: "";
+}
+
+pop > * {
+	display: block;
+}
+
+pop > system[type="wireguard"] {
+	overflow-x: auto;
+	overflow-y: hidden;
+	white-space: nowrap;
+}
+
+::-webkit-scrollbar {
+	width: 0;
+}
--- a/src/styles/base.css
+++ b/src/styles/base.css
@ -0,0 +1,143 @@
+:root {
+	--background-color: #fff;
+	--font-color: #000;
+	--font-color-lighter: rgb(87, 89, 88);
+	--font-size-main: 3.045rem;
+	--font-size-description: 1.245rem;
+	--lineheight-description: 1.845rem;
+	--box-color: #f2f2f2;
+	--working-color: #137333;
+	--working-color-background: #e6f4ea;
+	--error-color-background: #fce8e6;
+	--error-color: #c5221f;
+	--working-with-error-color: #b05a00;
+	--working-with-error-color-background: #fef7e0;
+	--linear-start-color: #f37335;
+	--linear-end-color: #ff4200fc;
+	--icon-size: 48px;
+}
+
+h2,
+h1 {
+	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
+	background: linear-gradient(
+		90deg,
+		var(--linear-start-color),
+		var(--linear-end-color)
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+div,
+p {
+	font-family: Roboto, Noto Sans SC, sans-serif;
+	line-height: 140%;
+}
+
+body {
+	margin: 6rem 5vw;
+	font-family: Roboto, Noto Sans SC, sans-serif;
+	color: var(--font-color);
+	background-color: var(--background-color);
+}
+
+a {
+	text-decoration: none;
+	color: #1967d2;
+}
+
+@media screen and (max-width: 480px) {
+	body {
+		margin: 6rem 2vw;
+	}
+
+	:root {
+		--font-size-main: 2.5rem;
+		--font-size-description: 1.045rem;
+	}
+}
+
+code {
+	font-family: Fira Mono, monospace;
+}
+
+none {
+	display: none;
+}
+
+icon {
+	vertical-align: middle;
+	font-size: 48px;
+	font-family: "Material Icons Outlined";
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: "liga";
+	-webkit-font-smoothing: antialiased;
+}
+
+background {
+	top: 0px;
+	right: 0px;
+	float: right;
+	position: absolute;
+	min-width: 100%;
+	min-height: 75vh;
+	background-size: cover;
+	background-image: url(https://storage.186526.xyz/home-app/assets/background.png);
+	z-index: -1;
+	border-radius: 0 0 15px 15px;
+	filter: blur(0.2px);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--font-color: #e8eaed;
+		--font-color-lighter: #9aa0a6;
+		--background-color: #121212;
+		--box-color: rgb(40 40 40 / 73%);
+		--working-color-background: rgba(129, 201, 149, 0.24);
+		--error-color-background: rgba(242, 139, 130, 0.24);
+		--working-with-error-color-background: rgba(253, 214, 99, 0.24);
+		--working-color: #81c995;
+		--error-color: #f28b82;
+		--working-with-error-color: #fdd663;
+		--linear-start-color: #0c8cca;
+		--linear-end-color: #00bdff;
+	}
+
+	background {
+		filter: brightness(50%);
+	}
+}
+
+tooltiptext {
+	display: none;
+	visibility: hidden;
+	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
+	width: 120px;
+	background-color: #555;
+	color: #fff;
+	text-align: center;
+	padding: 5px 0;
+	border-radius: 6px;
+	opacity: 0;
+	transition: opacity 0.6s;
+
+	position: absolute;
+	z-index: 1;
+}
+
+:hover > tooltiptext {
+	display: block;
+	visibility: visible;
+	opacity: 1;
+}
--- a/src/styles/contents.css
+++ b/src/styles/contents.css
@ -0,0 +1,65 @@
+contents {
+	display: flex;
+    position: absolute;
+    top: 75vh;
+
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+}
+
+contents > group {
+	display: flex;
+	margin: 2.5vh 0;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+card {
+    display: flex;
+	background-color: var(--box-color);
+	padding: 2rem;
+	min-height: 3rem;
+	border-radius: 10px;
+	flex-grow: 1;
+	margin-top: 1rem;
+	margin-right: 0.5rem;
+    margin-left: 0.5rem;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+}
+
+card > a > img {
+	max-height: 48px;
+    max-width: 48px;
+	vertical-align: middle;
+}
+
+group#friend > card > a > img {
+	max-height: 48px;
+    max-width: 48px;
+	border-radius: 100px;
+}
+
+group#footer {
+    display: block;
+    margin: 0vh 2.5vw;
+	align-self: flex-start;
+	color: var(--font-color-lighter);
+	font-size: calc(var(--font-size-description) - 0.4rem);
+}
+
+group#footer > * {
+	display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+    card#github > a > img {
+        filter: invert(100%);
+    }
+}
--- a/src/styles/header.css
+++ b/src/styles/header.css
@ -0,0 +1,66 @@
+header > div {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: flex-start;
+	align-content: stretch;
+}
+
+header > div h1 {
+	margin-block-start: 0em;
+	margin-block-end: 0em;
+	font-weight: normal;
+	font-size: var(--font-size-main);
+	line-height: var(--font-size-main);
+}
+
+header > div description {
+	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
+	font-size: var(--font-size-description);
+	line-height: var(--lineheight-description);
+	color: var(--font-color-lighter);
+}
+
+header > div description > * {
+	max-width: 32px;
+	max-width: 32px;
+}
+
+header {
+	display: inline-flex;
+	align-items: flex-start;
+	flex-direction: column;
+	justify-content: center;
+	backdrop-filter: blur(15px);
+	background-color: rgba(255, 255, 255, 0.5);
+	border-radius: 15px;
+	border: 10px;
+	padding: 20px 40px;
+}
+
+header > img {
+	margin-right: 1rem;
+	margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 768px) {
+	header > * {
+		display: inline-block;
+	}
+
+	header {
+		flex-direction: row;
+		align-items: center;
+	}
+}
+/* @media screen and (max-width: 480px) {
+
+	
+} */
+
+@media (prefers-color-scheme: dark) {
+	header {
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,10 @@
+import child_process from "child_process"
+/**
+ * @type {import('vite').UserConfig}
+ */
+const config = {
+    define: {
+        '__APP_VERSION': child_process.execSync('git rev-parse --short HEAD'),
+    }
+}
+export default config
--- a/yarn.lock
+++ b/yarn.lock
@ -0,0 +1,225 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+esbuild-android-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.14.38.tgz#5b94a1306df31d55055f64a62ff6b763a47b7f64"
+  integrity sha512-aRFxR3scRKkbmNuGAK+Gee3+yFxkTJO/cx83Dkyzo4CnQl/2zVSurtG6+G86EQIZ+w+VYngVyK7P3HyTBKu3nw==
+
+esbuild-android-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.38.tgz#78acc80773d16007de5219ccce544c036abd50b8"
+  integrity sha512-L2NgQRWuHFI89IIZIlpAcINy9FvBk6xFVZ7xGdOwIm8VyhX1vNCEqUJO3DPSSy945Gzdg98cxtNt8Grv1CsyhA==
+
+esbuild-darwin-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.38.tgz#e02b1291f629ebdc2aa46fabfacc9aa28ff6aa46"
+  integrity sha512-5JJvgXkX87Pd1Og0u/NJuO7TSqAikAcQQ74gyJ87bqWRVeouky84ICoV4sN6VV53aTW+NE87qLdGY4QA2S7KNA==
+
+esbuild-darwin-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.38.tgz#01eb6650ec010b18c990e443a6abcca1d71290a9"
+  integrity sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ==
+
+esbuild-freebsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.38.tgz#790b8786729d4aac7be17648f9ea8e0e16475b5e"
+  integrity sha512-epnPbhZUt93xV5cgeY36ZxPXDsQeO55DppzsIgWM8vgiG/Rz+qYDLmh5ts3e+Ln1wA9dQ+nZmVHw+RjaW3I5Ig==
+
+esbuild-freebsd-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.38.tgz#b66340ab28c09c1098e6d9d8ff656db47d7211e6"
+  integrity sha512-/9icXUYJWherhk+y5fjPI5yNUdFPtXHQlwP7/K/zg8t8lQdHVj20SqU9/udQmeUo5pDFHMYzcEFfJqgOVeKNNQ==
+
+esbuild-linux-32@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.14.38.tgz#7927f950986fd39f0ff319e92839455912b67f70"
+  integrity sha512-QfgfeNHRFvr2XeHFzP8kOZVnal3QvST3A0cgq32ZrHjSMFTdgXhMhmWdKzRXP/PKcfv3e2OW9tT9PpcjNvaq6g==
+
+esbuild-linux-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.38.tgz#4893d07b229d9cfe34a2b3ce586399e73c3ac519"
+  integrity sha512-uuZHNmqcs+Bj1qiW9k/HZU3FtIHmYiuxZ/6Aa+/KHb/pFKr7R3aVqvxlAudYI9Fw3St0VCPfv7QBpUITSmBR1Q==
+
+esbuild-linux-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.38.tgz#8442402e37d0b8ae946ac616784d9c1a2041056a"
+  integrity sha512-HlMGZTEsBrXrivr64eZ/EO0NQM8H8DuSENRok9d+Jtvq8hOLzrxfsAT9U94K3KOGk2XgCmkaI2KD8hX7F97lvA==
+
+esbuild-linux-arm@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.38.tgz#d5dbf32d38b7f79be0ec6b5fb2f9251fd9066986"
+  integrity sha512-FiFvQe8J3VKTDXG01JbvoVRXQ0x6UZwyrU4IaLBZeq39Bsbatd94Fuc3F1RGqPF5RbIWW7RvkVQjn79ejzysnA==
+
+esbuild-linux-mips64le@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.38.tgz#95081e42f698bbe35d8ccee0e3a237594b337eb5"
+  integrity sha512-qd1dLf2v7QBiI5wwfil9j0HG/5YMFBAmMVmdeokbNAMbcg49p25t6IlJFXAeLzogv1AvgaXRXvgFNhScYEUXGQ==
+
+esbuild-linux-ppc64le@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.38.tgz#dceb0a1b186f5df679618882a7990bd422089b47"
+  integrity sha512-mnbEm7o69gTl60jSuK+nn+pRsRHGtDPfzhrqEUXyCl7CTOCLtWN2bhK8bgsdp6J/2NyS/wHBjs1x8aBWwP2X9Q==
+
+esbuild-linux-riscv64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.38.tgz#61fb8edb75f475f9208c4a93ab2bfab63821afd2"
+  integrity sha512-+p6YKYbuV72uikChRk14FSyNJZ4WfYkffj6Af0/Tw63/6TJX6TnIKE+6D3xtEc7DeDth1fjUOEqm+ApKFXbbVQ==
+
+esbuild-linux-s390x@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.38.tgz#34c7126a4937406bf6a5e69100185fd702d12fe0"
+  integrity sha512-0zUsiDkGJiMHxBQ7JDU8jbaanUY975CdOW1YDrurjrM0vWHfjv9tLQsW9GSyEb/heSK1L5gaweRjzfUVBFoybQ==
+
+esbuild-netbsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.38.tgz#322ea9937d9e529183ee281c7996b93eb38a5d95"
+  integrity sha512-cljBAApVwkpnJZfnRVThpRBGzCi+a+V9Ofb1fVkKhtrPLDYlHLrSYGtmnoTVWDQdU516qYI8+wOgcGZ4XIZh0Q==
+
+esbuild-openbsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.38.tgz#1ca29bb7a2bf09592dcc26afdb45108f08a2cdbd"
+  integrity sha512-CDswYr2PWPGEPpLDUO50mL3WO/07EMjnZDNKpmaxUPsrW+kVM3LoAqr/CE8UbzugpEiflYqJsGPLirThRB18IQ==
+
+esbuild-sunos-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.38.tgz#c9446f7d8ebf45093e7bb0e7045506a88540019b"
+  integrity sha512-2mfIoYW58gKcC3bck0j7lD3RZkqYA7MmujFYmSn9l6TiIcAMpuEvqksO+ntBgbLep/eyjpgdplF7b+4T9VJGOA==
+
+esbuild-windows-32@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.14.38.tgz#f8e9b4602fd0ccbd48e5c8d117ec0ba4040f2ad1"
+  integrity sha512-L2BmEeFZATAvU+FJzJiRLFUP+d9RHN+QXpgaOrs2klshoAm1AE6Us4X6fS9k33Uy5SzScn2TpcgecbqJza1Hjw==
+
+esbuild-windows-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.38.tgz#280f58e69f78535f470905ce3e43db1746518107"
+  integrity sha512-Khy4wVmebnzue8aeSXLC+6clo/hRYeNIm0DyikoEqX+3w3rcvrhzpoix0S+MF9vzh6JFskkIGD7Zx47ODJNyCw==
+
+esbuild-windows-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.38.tgz#d97e9ac0f95a4c236d9173fa9f86c983d6a53f54"
+  integrity sha512-k3FGCNmHBkqdJXuJszdWciAH77PukEyDsdIryEHn9cKLQFxzhT39dSumeTuggaQcXY57UlmLGIkklWZo2qzHpw==
+
+esbuild@^0.14.27:
+  version "0.14.38"
+  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.38.tgz#99526b778cd9f35532955e26e1709a16cca2fb30"
+  integrity sha512-12fzJ0fsm7gVZX1YQ1InkOE5f9Tl7cgf6JPYXRJtPIoE0zkWAbHdPHVPPaLi9tYAcEBqheGzqLn/3RdTOyBfcA==
+  optionalDependencies:
+    esbuild-android-64 "0.14.38"
+    esbuild-android-arm64 "0.14.38"
+    esbuild-darwin-64 "0.14.38"
+    esbuild-darwin-arm64 "0.14.38"
+    esbuild-freebsd-64 "0.14.38"
+    esbuild-freebsd-arm64 "0.14.38"
+    esbuild-linux-32 "0.14.38"
+    esbuild-linux-64 "0.14.38"
+    esbuild-linux-arm "0.14.38"
+    esbuild-linux-arm64 "0.14.38"
+    esbuild-linux-mips64le "0.14.38"
+    esbuild-linux-ppc64le "0.14.38"
+    esbuild-linux-riscv64 "0.14.38"
+    esbuild-linux-s390x "0.14.38"
+    esbuild-netbsd-64 "0.14.38"
+    esbuild-openbsd-64 "0.14.38"
+    esbuild-sunos-64 "0.14.38"
+    esbuild-windows-32 "0.14.38"
+    esbuild-windows-64 "0.14.38"
+    esbuild-windows-arm64 "0.14.38"
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+is-core-module@^2.8.1:
+  version "2.9.0"
+  resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
+  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
+  dependencies:
+    has "^1.0.3"
+
+nanoid@^3.3.1:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
+  integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+postcss@^8.4.12:
+  version "8.4.12"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
+  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
+  dependencies:
+    nanoid "^3.3.1"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+resolve@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+rollup@^2.59.0:
+  version "2.70.2"
+  resolved "https://registry.npmmirror.com/rollup/-/rollup-2.70.2.tgz#808d206a8851628a065097b7ba2053bd83ba0c0d"
+  integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+typed.js@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.npmmirror.com/typed.js/-/typed.js-2.0.12.tgz#246aff074c8e18d32ec27acb7be15094ac0bc0e1"
+  integrity sha512-lyACZh1cu+vpfYY3DG/bvsGLXXbdoDDpWxmqta10IQUdMXisMXOEyl+jos+YT9uBbzK4QaKYBjT3R0kTJO0Slw==
+
+typescript@^4.5.4:
+  version "4.6.4"
+  resolved "https://registry.npmmirror.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
+  integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
+
+vite@^2.9.5:
+  version "2.9.6"
+  resolved "https://registry.npmmirror.com/vite/-/vite-2.9.6.tgz#29f1b33193b0de9e155d67ba0dd097501c3c3281"
+  integrity sha512-3IffdrByHW95Yjv0a13TQOQfJs7L5dVlSPuTt432XLbRMriWbThqJN2k/IS6kXn5WY4xBLhK9XoaWay1B8VzUw==
+  dependencies:
+    esbuild "^0.14.27"
+    postcss "^8.4.12"
+    resolve "^1.22.0"
+    rollup "^2.59.0"
+  optionalDependencies:
+    fsevents "~2.3.2"