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

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>