Files
DiceCloud/app/imports/ui/pages/Home.vue
2018-10-03 16:37:12 +02:00

146 lines
4.5 KiB
Vue

<template>
<toolbar-layout>
<div slot="toolbar">
DiceCloud
</div>
<div class="content">
<section>
<v-parallax src="/png/paper-dice-crown.png" height="300">
<v-layout column align-center justify-center class="white--text">
<h1 class="white--text mb-2 display-1 text-xs-center">
DiceCloud - Free, Auditable, real-time character tracking for 5th edition
</h1>
<div class="subheading mb-3 text-xs-center">
Spend less time shuffling paper, and more time playing the game
</div>
</v-layout>
</v-parallax>
</section>
<section class="text-xs-center">
<v-layout row wrap justify-space-around class="selling-points">
<v-layout column align-center>
<v-icon x-large class="ma-2">
money_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">
ballot
</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">
scatter_plot
</v-icon>
<h3 class="mb-2">
Inventory manager
</h3>
<p>
Equiping items changes your characters stats automatically. Drag
items to other characters, or between sheets open on different
tabs.
</p>
</v-layout>
</v-layout>
</section>
<section class="ma-5" v-if="!signedIn">
<v-layout row align-center justify-space-around>
<v-btn color="accent" round large to="/register">
Sign up
</v-btn>
</v-layout>
</section>
<section>
<h1 class="mb-2 text-xs-center">
Check out the example characters
</h1>
<v-layout row align-center justify-space-around class="pa-4">
<a href="/character/yBWwt5XQTTHZiRQxq">
<v-hover>
<v-card
slot-scope="{ hover }"
:class="`elevation-${hover ? 12 : 2}`"
>
<v-card-text>
Starter set archer
</v-card-text>
</v-card>
</v-hover>
</a>
<a href="/character/yBWwt5XQTTHZiRQxq">
<v-hover>
<v-card
slot-scope="{ hover }"
:class="`elevation-${hover ? 12 : 2}`"
>
<v-card-text>
Starter set wizard
</v-card-text>
</v-card>
</v-hover>
</a>
</v-layout>
</section>
<section class="text-xs-center grey darken-3 white--text pa-5">
<h1>
Get involved in the DiceCloud community
</h1>
<v-layout row wrap align-center justify-space-around class="pa-4">
<v-btn href="https://reddit.com/r/dicecloud" flat large color="secondary">
Reddit
</v-btn>
<v-flex>
<v-btn href="https://discord.gg/qEvdfeB" flat large color="secondary">
Discord
</v-btn>
</v-flex>
<v-flex>
<v-btn href="https://www.patreon.com/dicecloud" flat large color="secondary">
Patreon
</v-btn>
</v-flex>
<v-flex>
<v-btn href="https://github.com/ThaumRystra/DiceCloud" flat large color="secondary">
Github
</v-btn>
</v-flex>
</v-layout>
</section>
</div>
</toolbar-layout>
</template>
<script>
import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
export default {
components: {
ToolbarLayout,
},
meteor: {
signedIn(){
return Meteor.userId();
},
}
};
</script>
<style scoped>
.selling-points > * {
max-width: 400px;
}
</style>