SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

lil home page

Browse Source
This commit is contained in:
Chaoscaot
2023-09-24 16:33:14 +02:00
parent 4dca085cec
commit 53443cf383
34 changed files with 439 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/images/2022-03-28_13.18.25.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
src/images/bau.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
src/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

21
src/layouts/Basic.astro Normal file
View File

@ -0,0 +1,21 @@
---
import {astroI18n} from "astro-i18n";
const { title, description } = Astro.props.frontmatter || Astro.props;
---
<html lang={astroI18n.langCode}>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content={description}/>
<title>{title}</title>
<slot name="head" />
</head>
<body>
<slot />
</body>
</html>

72
src/layouts/NavbarLayout.astro Normal file
View File

@ -0,0 +1,72 @@
---
import Basic from "./Basic.astro";
import { Image } from 'astro:assets';
import '../styles/button.css';
import localLogo from "../images/logo.png"
import {l, t} from "astro-i18n";
const { title } = Astro.props;
---
<Basic title={title}>
<slot name="head" slot="head" />
<Fragment>
<div>
<nav-bar class="h-24 sm:h-12 fixed top-0 left-0 right-0 flex flex-col sm:flex-row items-center justify-evenly sm:justify-between px-4 transition-colors z-10 \
before:bg-transparent before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:bg-black before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
<a class="flex items-center" href={l("/")}>
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" />
<h1 class="text-2xl uppercase font-bold inline-block">
{t("navbar.title")}
</h1>
</a>
<div class="flex items-center">
<a class="btn btn-gray" href={l("/")}>
<span class="btn__text">Start</span>
</a>
<a class="btn btn-gray" rel="prefetch" href={l("/blog")}>
<span class="btn__text">Blog</span>
</a>
<a class="btn">
<span class="btn__text">Login</span>
</a>
</div>
</nav-bar>
<script>
class Navbar extends HTMLElement {
constructor() {
super();
if (window.scrollY != 0) {
this.classList.add("scrolled");
} else {
this.classList.remove("scrolled");
}
window.onscroll = e => {
if (window.scrollY != 0) {
this.classList.add("scrolled");
} else {
this.classList.remove("scrolled");
}
}
}
}
customElements.define('nav-bar', Navbar);
</script>
<main>
<slot />
</main>
</div>
</Fragment>
</Basic>
<style>
.scrolled {
@apply text-white;
&::before {
@apply scale-y-100;
}
}
</style>

16
src/locales/en.json
View File

@ -1,3 +1,17 @@
{
"hello": "Hello, World!"
"home": {
"title": "SteamWar.de",
"subtitle": {
"1": "Players Online: ",
"2": "WarGears, AirShips, WarShips",
"3": "Version: 1.12 - 1.20"
},
"join": "Join Now"
},
"navbar": {
"title": "SteamWar.de",
"logo": {
"alt": "SteamWar.de Logo"
}
}
}

7
src/pages/blog.astro Normal file
View File

@ -0,0 +1,7 @@
---
import NavBarLayout from '../layouts/NavbarLayout.astro'
---
<NavBarLayout title="Blog">
<h1>Blog!</h1>
</NavBarLayout>

116
src/pages/index.astro
View File

@ -1,17 +1,105 @@
---
import { t } from "astro-i18n";
import * as Icon from '@astropub/icons';
import NavbarLayout from "../layouts/NavbarLayout.astro";
import { Image } from "astro:assets";
import localBau from "../images/2022-03-28_13.18.25.png";
import {l, t} from "astro-i18n";
import {CaretRight} from "@astropub/icons"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>{t("hello")}</h1>
</body>
</html>
<NavbarLayout title="SteamWar.de - Home">
<div class="w-screen h-screen relative mb-4">
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl" style="height: calc(100vh + 1rem)" draggable="false" />
<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<h1 class="text-2xl sm:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black">{t("home.title")}</h1>
<text-carousel class="h-20 w-full relative select-none">
<h2 class="-translate-y-16">{t("home.subtitle.1")}<player-count /></h2>
<h2>{t("home.subtitle.2")}</h2>
<h2>{t("home.subtitle.3")}</h2>
</text-carousel>
<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16" style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")} <CaretRight width="24" heigth="24" /></a>
<script>
class TextCarousel extends HTMLElement {
current = 0;
constructor() {
super();
}
connectedCallback() {
this.children[this.current].classList.add("!opacity-100")
for (let i = 0; i < this.children.length; i++) {
if (i !== this.current) {
this.children[i].classList.add("translate-y-8")
}
}
setInterval(() => {
this.next()
}, 5000)
}
next() {
this.children[this.current].classList.remove("!opacity-100")
this.children[this.current].classList.add("translate-y-8")
this.children[this.current].classList.remove("!delay-500")
this.current = (this.current + 1) % this.children.length
this.children[this.current].classList.add("!opacity-100")
this.children[this.current].classList.remove("translate-y-8")
this.children[this.current].classList.add("!delay-500")
}
}
class PlayerCount extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerText = String(Math.floor(Math.random() * 100))
}
}
class DropIn extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
for (let child of this.children) {
if(child.classList.contains("opacity-0")) {
child.classList.remove("opacity-0")
child.classList.remove("-translate-y-16")
} else {
child.children[0].classList.remove("opacity-0")
child.children[0].classList.remove("-translate-y-16")
}
}
}
}
customElements.define("player-count", PlayerCount);
customElements.define("text-carousel", TextCarousel);
customElements.define("drop-in", DropIn);
</script>
</drop-in>
</div>
<h2>HELLO!</h2>
</NavbarLayout>
<style>
@import url("/fonts/barlow-condensed/barlow-condensed.css");
text-carousel{
>* {
@apply absolute top-0 left-0 w-full text-xl sm:text-4xl underline text-white text-center opacity-0;
transition: transform .5s ease-out, opacity .5s linear;
text-shadow: 2px 2px 5px black;
}
}
.barlow {
font-family: Barlow Condensed;
}
</style>

7
src/pages/join.astro Normal file
View File

@ -0,0 +1,7 @@
---
import NavbarLayout from "../layouts/NavbarLayout.astro";---
<NavbarLayout title="Join">
</NavbarLayout>

26
src/styles/button.css Normal file
View File

@ -0,0 +1,26 @@
.btn {
@apply bg-blue-800 text-white font-bold py-2 px-4 rounded cursor-pointer select-none mx-2;
@apply hover:bg-blue-700;
transition: all 0.5s cubic-bezier(.2,3,.67,.6),
background-color .1s ease-in-out,
outline-width .1s ease-in-out,
outline-color .1s ease-in-out;
@apply active:scale-90;
.btn__text {
@apply inline-block;
}
}
.btn-gray {
@apply bg-gray-800 text-white font-bold py-2 px-4 rounded cursor-pointer select-none mx-2;
}
.btn-text {
@apply bg-transparent underline;
@apply hover:bg-transparent hover:outline hover:outline-1;
.btn__text {
@apply underline;
}
}

14
src/util/util.ts Normal file
View File

@ -0,0 +1,14 @@
import { randomBytes } from 'crypto'
const usedIds = new Set<string>()
export const getRandomId = () => {
while (true) {
const id = randomBytes(4).toString('hex')
if (!usedIds.has(id)) {
usedIds.add(id)
return id
}
}
}