feat: add homepage

This commit is contained in:
SauceyRed 2025-05-01 04:30:43 +02:00
parent 6aa680af5a
commit 737d870be2
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 147 additions and 0 deletions

57
app.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<nav id="navbar">
<div id="navbar-left">
<a href="/">Home</a>
</div>
<div id="navbar-right">
<NuxtLink href="/"><s>Register</s></NuxtLink>
<NuxtLink href="/"><s>Login</s></NuxtLink>
</div>
</nav>
<NuxtPage />
</template>
<script lang="ts" setup>
const gorbBase = ref<string>(useAppConfig().gorbClientBaseURL);
</script>
<style>
html,
body {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
color: whitesmoke;
background-color: rgb(30, 30, 30);
height: 100%;
margin: 0;
}
#main {
text-align: center;
}
#navbar {
display: flex;
justify-content: space-between;
margin-left: 3dvw;
margin-right: 3dvw;
margin-top: 2dvh;
}
#navbar a {
text-decoration: none;
color: inherit;
}
#navbar-left,
#navbar-right {
display: flex;
gap: 2dvw;
}
.link {
color: inherit;
}
</style>

90
pages/index.vue Normal file
View file

@ -0,0 +1,90 @@
<template>
<div id="main">
<h1>Welcome to <span id="gorb">
<span>G</span><span>O</span><span>R</span><span>B</span>
</span>, the Open-Source and Federated Chat App!</h1>
<NuxtLink class="link" href="/"><s>Go to web client</s></NuxtLink>
IT DOESN'T EXIST YET
<p>
BUT! Check out our <NuxtLink id="git-link" href="https://git.gorb.app/gorb">Git</NuxtLink> to check on our
progress!
</p>
</div>
</template>
<script lang="ts" setup>
</script>
<style>
#gorb {
margin-top: 0.6em;
text-align: center;
}
#gorb span {
display: inline-block;
-webkit-animation: wave-text 1s ease-in-out infinite;
animation: wave-text 1s ease-in-out infinite;
}
#gorb span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#gorb span:nth-of-type(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#gorb span:nth-of-type(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#gorb span:nth-of-type(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#gorb span:nth-of-type(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes wave-text {
00% {
transform: translateY(0em);
}
60% {
transform: translateY(-0.4em);
}
100% {
transform: translateY(0em);
}
}
@keyframes wave-text {
00% {
color: lightblue;
transform: translateY(0em);
}
60% {
color: lightgreen;
transform: translateY(-0.4em);
}
100% {
color: violet;
transform: translateY(0em);
}
}
#git-link {
color: inherit;
}
</style>