Updated static pages, home, about, sign-in

app/imports/client/ui/layouts/Sidebar.vue

@@ -94,7 +94,7 @@ export default {
       let isLoggedIn = !!Meteor.userId();
       let links = [
         { title: 'Home', icon: 'mdi-home', to: '/' },
-        { title: 'Characters', icon: 'mdi-account-group', to: '/characterList', requireLogin: true },
+        { title: 'Characters', icon: 'mdi-account-group', to: '/character-list', requireLogin: true },
         { title: 'Library', icon: 'mdi-library-shelves', to: '/library', requireLogin: true },
         //{title: 'Tabletops', icon: 'api', to: '/tabletops', requireLogin: true},
         //{title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},

app/imports/client/ui/pages/About.vue

@@ -2,8 +2,8 @@
   <div>
     <section>
       <v-parallax
-        src="/images/paper-dice-crown-with-candy.png"
-        height="400"
+        src="/images/paper-dice-crown.webp"
+        height="300"
       >
         <v-layout
           column
@@ -12,7 +12,7 @@
           class="white--text"
         >
           <p
-            class="white--text ma-2 text-h5 text-center"
+            class="white--text ma-2 text-center"
             style="max-width: 1200px;"
           >
             DiceCloud is a single-developer project started in 2014 with the aim of

app/imports/client/ui/pages/Home.vue

@@ -1,29 +1,75 @@
 <template>
   <div
-    class="content layout column justify-space-between"
+    class="home content layout column justify-space-between"
     style="min-height: 100%;"
   >
+    <section
+      class="py-12 px-4"
+    >
+      <v-row
+        align="end"
+        justify="center"
+        class="mb-8"
+      >
+        <v-col
+          class="text-center"
+          cols="12"
+        >
+          <h1 class="text-h4 mb-4">
+            Free, Auditable, real-time character tracking for 5th edition
+          </h1>
+          <h4 class="subheading">
+            Spend less time shuffling paper, and more time playing the game
+          </h4>
+        </v-col>
+      </v-row>
+      <v-layout
+        v-if="!signedIn"
+        align-center
+        justify-center
+      >
+        <v-btn
+          color="accent"
+          rounded
+          large
+          to="/register"
+          class="mr-4"
+        >
+          Register
+        </v-btn>
+        <v-btn
+          color="accent"
+          rounded
+          outlined
+          large
+          to="/sign-in"
+        >
+          Sign In
+        </v-btn>
+      </v-layout>
+      <v-layout
+        v-else
+        align-center
+        justify-center
+      >
+        <v-btn
+          color="accent"
+          rounded
+          large
+          to="/character-list"
+          class="mr-4"
+        >
+          My Characters
+        </v-btn>
+      </v-layout>
+    </section>
     <section>
       <v-parallax
-        src="/images/paper-dice-crown.png"
+        src="/images/crown-dice-on-ipad.webp"
         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">
+    <section class="text-center py-8 px-4">
       <v-layout
         wrap
         justify-space-around
@@ -43,7 +89,7 @@
             Free, open source, community funded
           </h3>
           <p>
-            DiceCloud is free to use. Its hosting is funded via Patreon,
+            DiceCloud is free to use, funded via Patreon,
             and the source code is available on Github under a GPL license.
           </p>
         </v-layout>
@@ -58,11 +104,11 @@
             mdi-ballot-outline
           </v-icon>
           <h3 class="mb-2">
-            Character sheets optimised for one ruleset
+            Custom everything
           </h3>
           <p>
-            By having a narrrow scope, DiceCloud can be the best at what it
-            does: being a fully automated character tracker
+            Add new ability scores, skills, health-bars, and stats to your character.
+            The entire sheet is under your control.
           </p>
         </v-layout>
         <v-layout
@@ -76,31 +122,37 @@
             mdi-file-tree-outline
           </v-icon>
           <h3 class="mb-2">
-            Inventory manager
+            Advanced Character Engine
           </h3>
           <p>
-            Equiping items changes your characters stats automatically.
+            Characters are computed in real-time based on their equipment,
+            features, and buffs.
           </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"
+    <section class="pa-8">
+      <v-row>
+        <v-col
+          v-for="(card, index) in highlightCards"
+          :key="index"
+          v-bind="cols"
         >
-          Sign In
-        </v-btn>
-      </v-layout>
+          <v-card
+            tile
+            :elevation="0"
+          >
+            <v-img
+              class="white--text align-end"
+              :src="'/images/screenshots/' + card.img"
+              gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)"
+              height="360px"
+            >
+              <v-card-title v-text="card.text" />  
+            </v-img>
+          </v-card>
+        </v-col>
+      </v-row>
     </section>
     <section class="text-center grey darken-3 white--text pa-5">
       <h1>
@@ -120,11 +172,16 @@
           ]"
           :key="btn.name"
           :href="btn.link"
-          text
+          outlined
           large
-          color="primary"
+          dark
         >
           {{ btn.name }}
+          <v-icon
+            right
+          >
+            mdi-open-in-new
+          </v-icon>
         </v-btn>
       </v-layout>
     </section>
@@ -133,6 +190,25 @@
 
 <script lang="js">
 export default {
+  data() {return {
+    cols: {
+      cols: 12,
+      sm: 6,
+      md: 4,
+      lg: 3,
+      xl: 2,
+    },
+    highlightCards: [
+      { text: 'Automated actions', img: 'actions.webp' },
+      { text: 'Auditable stats', img: 'auditable.webp' },
+      { text: 'Dice rolling', img: 'automated-dice-rolls.webp' },
+      { text: 'Hackable character builder', img: 'build-system.webp' },
+      { text: 'Drag and drop inventory manager', img: 'inventory.webp' },
+      { text: 'Custom libraries of content', img: 'libraries-of-content.webp' },
+      { text: 'Discord webhooks', img: 'send-to-discord.webp' },
+      { text: 'Printed character sheets', img: 'printing.webp' },
+    ],
+  }},
   meteor: {
     signedIn() {
       return Meteor.userId();
@@ -145,4 +221,7 @@ export default {
 .selling-points>* {
   max-width: 400px;
 }
+.dark-gradient {
+  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+}
 </style>

app/imports/client/ui/pages/SignIn.vue

@@ -39,7 +39,10 @@
         >
           Reset Password
         </v-btn>
-        <div class="error--text">
+        <div
+          v-if="error"
+          class="error--text"
+        >
           {{ error }}
         </div>
         <v-layout>
@@ -59,6 +62,13 @@
             Register
           </v-btn>
         </v-layout>
+        <div class="text-caption mt-4 px-4">
+          <p>
+            DiceCloud Version 2 requires a new account to use.
+          </p><p>
+            Version 1 is still available at <a href="https://v1.dicecloud.com">v1.dicecloud.com</a>
+          </p>
+        </div>
       </v-layout>
     </v-form>
     <v-divider class="ma-4" />