feat: add homepage
This commit is contained in:
parent
6aa680af5a
commit
737d870be2
2 changed files with 147 additions and 0 deletions
57
app.vue
Normal file
57
app.vue
Normal 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
90
pages/index.vue
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue