Files
DiceCloud/app/imports/ui/pages/Home.vue
2021-09-07 15:48:51 +02:00

149 lines
3.4 KiB
Vue

<template>
<div
class="content layout column justify-space-between"
style="min-height: 100%;"
>
<section>
<v-parallax
src="/images/paper-dice-crown.png"
height="300"
>
<v-layout
column
align-center
justify-center
class="white--text"
>
<h1 class="white--text mb-2 text-h4 text-center">
DiceCloud - Free, Auditable, real-time character tracking for 5th edition
</h1>
<div class="subheading mb-3 text-center">
Spend less time shuffling paper, and more time playing the game
</div>
</v-layout>
</v-parallax>
</section>
<section class="text-center">
<v-layout
wrap
justify-space-around
class="selling-points"
>
<v-layout
column
align-center
>
<v-icon
x-large
class="ma-2"
>
mdi-currency-usd-off
</v-icon>
<h3 class="mb-2">
Free, open source, community funded
</h3>
<p>
DiceCloud is free to use. Its hosting is funded via Patreon,
and the source code is available on Github under a GPL license.
</p>
</v-layout>
<v-layout
column
align-center
>
<v-icon
x-large
class="ma-2"
>
mdi-ballot-outline
</v-icon>
<h3 class="mb-2">
Character sheets optimised for one ruleset
</h3>
<p>
By having a narrrow scope, DiceCloud can be the best at what it
does: being a fully automated character tracker
</p>
</v-layout>
<v-layout
column
align-center
>
<v-icon
x-large
class="ma-2"
>
mdi-file-tree-outline
</v-icon>
<h3 class="mb-2">
Inventory manager
</h3>
<p>
Equiping items changes your characters stats automatically.
</p>
</v-layout>
</v-layout>
</section>
<section
v-if="!signedIn"
class="ma-5"
>
<v-layout
align-center
justify-space-around
>
<v-btn
color="accent"
rounded
large
to="/sign-in"
>
Sign In
</v-btn>
</v-layout>
</section>
<section class="text-center grey darken-3 white--text pa-5">
<h1>
Get involved in the DiceCloud community
</h1>
<v-layout
wrap
align-center
justify-space-around
class="pa-4"
>
<v-btn
v-for="btn in [
{link: 'https://discord.gg/qEvdfeB', name: 'Discord'},
{link: 'https://www.patreon.com/dicecloud', name: 'Patreon'},
{link: 'https://github.com/ThaumRystra/DiceCloud', name: 'Github'},
]"
:key="btn.name"
:href="btn.link"
text
large
color="primary"
>
{{ btn.name }}
</v-btn>
</v-layout>
</section>
</div>
</template>
<script lang="js">
export default {
meteor: {
signedIn(){
return Meteor.userId();
},
}
};
</script>
<style scoped>
.selling-points > * {
max-width: 400px;
}
</style>