adding latest

src/App.vue

@@ -3,9 +3,10 @@
     <v-app :style="{ background: $vuetify.theme.themes.light.background }">
       <v-content>
         <Appbar></Appbar>
-        <transition name="slide">
+        <!-- <vue-page-transition name="fade-in-right"> -->
+        <vue-page-transition name="fade">
           <router-view></router-view>
-        </transition>
+        </vue-page-transition>
         <v-row> </v-row>
       </v-content>
     </v-app>
@@ -16,12 +17,7 @@
 import Appbar from "@/components/Appbar";
 export default {
   name: "App",
-
   components: { Appbar }
-
-  // data: () => {
-  //   video: require("./assets/videos/optical.mp4")
-  // }
 };
 </script>
 

src/components/LoginFull.vue

@@ -4,7 +4,6 @@
     style=" height: 100vh;"
     overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
   >
-  <!-- <LoginForm class="hidden-xs-only"></LoginForm> -->
   <LoginForm class=""></LoginForm>
   </video-background>
 </template>

src/main.js

@@ -4,11 +4,19 @@ import router from "./router";
 import store from "./store";
 import vuetify from "./plugins/vuetify";
 import VideoBackground from "vue-responsive-video-background-player";
+import VuePageTransition from "vue-page-transition";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 Vue.config.productionTip = false;
 Vue.component("video-background", VideoBackground);
 
+Vue.use(VuePageTransition);
+
 new Vue({
+  created() {
+    AOS.init();
+  },
   router,
   store,
   vuetify,

src/views/Triangle.vue

@@ -10,7 +10,7 @@
             Welcome to Savvy Firebox Tutorial
           </h1>
           <v-btn
-            xlarge
+            x-large
             color="primary"
             style="position: relative; z-index: 10;"
             class="lighten-1"
@@ -20,23 +20,26 @@
       </v-col>
     </v-row>
     <v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
-    <v-row class="d-flex justify-space-around" style="position: relative;">
-      <v-col class="d-flex justify-center" cols="4">
+    <v-row class="d-flex justify-space-around">
+      <v-col class="d-flex justify-center" md="6" xs="12">
         <v-card
           flat
           color="rgb(0, 0, 0, 0)"
           class="d-flex align-center justify-center flex-column pa-6"
+          data-aos="zoom-in"
         >
           <v-card-title>
             <span class="display-2 font-weight-bold">Learn more</span>
           </v-card-title>
           <v-card-text class="d-flex justify-center flex-column align-center">
-            <v-img
-              src="@/assets/images/11-Casino chip.png"
-              max-height="150px"
-              max-width="150px"
-              class="mb-5"
-            ></v-img>
+            <transition name="bounce">
+              <v-img
+                src="@/assets/images/11-Casino chip.png"
+                max-height="150px"
+                max-width="150px"
+                class="mb-5"
+              ></v-img>
+            </transition>
             <span
               class="d-flex justify-center display body-1"
               style="color: black;"
@@ -49,11 +52,12 @@
           </v-card-actions>
         </v-card>
       </v-col>
-      <v-col class="d-flex justify-center" cols="4">
+      <v-col class="d-flex justify-center" md="6" xs="12">
         <v-card
           flat
           color="rgb(0, 0, 0, 0)"
           class="d-flex align-center justify-center flex-column pa-6"
+          data-aos="zoom-in"
         >
           <v-card-title>
             <span class="display-2 font-weight-bold">See more</span>
@@ -77,12 +81,19 @@
           </v-card-actions>
         </v-card>
       </v-col>
+      <!-- <v-col md="1" xs="0"></v-col> -->
     </v-row>
   </v-container>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      animate: false
+    };
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/views/forms/LoginForm.vue

@@ -1,41 +1,47 @@
 <template>
-  <v-container fill-height fluid>
+  <v-container fluid class="d-flex align-center" style="height: 100vh;">
     <v-row>
-      <v-spacer></v-spacer>
       <v-col
-        cols="4"
+        sm="6"
+        cols="12"
         align-self="stretch"
-        class="d-flex flex-column justify-space-around align-end"
+        class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"
       >
-        <v-card
-          color="rgb(0, 0, 0, 0)"
-          flat
-          class="d-flex align-end flex-column"
-        >
-          <div class="text-align-right">
-            <h1 class="whiteText title ">
-              Savvy Firebase Tutorial
-            </h1>
-            <p class="whiteText mb-0 mt-2">Log in or create an account.</p>
-          </div>
-        </v-card>
-        <v-card color="rgb(0, 0, 0, 0)" flat>
-          <div class="text-align-right">
-            <p class="whiteText mb-0">Don't have an account? Create one.</p>
-          </div>
-        </v-card>
+        <div class="d-flex flex-column align-end justify-space-around">
+          <v-card
+            color="rgb(0, 0, 0, 0)"
+            flat
+            class="d-flex align-center justify-center flex-column"
+            width="100%"
+          >
+            <div
+              class="d-flex flex-column align-sm-end align-center justify-center"
+              :class="alignOnViewport"
+            >
+              <h1 class="whiteText title">
+                Savvy Firebase Tutorial
+              </h1>
+              <p class="whiteText mb-0 mt-2">Log in or create an account.</p>
+            </div>
+          </v-card>
+          <v-card color="rgb(0, 0, 0, 0)" flat width="100%">
+            <div
+              class="text-align-right d-flex flex-column align-sm-end align-center justify-center"
+            >
+              <p class="whiteText mb-0">Don't have an account? Create one.</p>
+            </div>
+          </v-card>
+        </div>
       </v-col>
-      <v-col cols="1"></v-col>
       <v-col
-        xs="5"
-        md="3"
-        align-self="center"
-        class="d-flex justify-start flex-column align-start"
+        cols="12"
+        sm="6"
+        class="d-flex justify-sm-start justify-center pl-sm-10"
       >
         <v-card
           color="rgb(0, 0, 0, 0)"
           flat
-          class="d-flex align-center flex-column full-width"
+          class="d-flex align-center flex-column"
         >
           <v-icon color="white" size="3em" class="pb-4"
             >mdi-account-circle</v-icon
@@ -43,7 +49,7 @@
           <v-form
             v-model="valid"
             ref="form"
-            class="pt-4 d-flex flex-column align-center full-width"
+            class="pt-4 d-flex flex-column align-center justify-start"
           >
             <v-text-field
               v-for="field in formFields"
@@ -57,7 +63,7 @@
               class="white-placeholder full-width"
               v-model="field.value"
               :rules="field.rules"
-              :placeholder="field.placeholder"
+              :label="field.placeholder"
               :success="!!field.value"
               @click:append="field.showIconData = !field.showIconData"
             >
@@ -104,7 +110,6 @@
           <p class="whiteText mb-0 pt-5">Forgot password?</p>
         </v-card>
       </v-col>
-      <v-col cols="0" md="3"></v-col>
     </v-row>
   </v-container>
 </template>
@@ -151,15 +156,20 @@ export default {
       this.load = !this.load;
       console.log("loading");
       if (this.$refs.form.validate()) {
-        console.log("Success");
+        console.log(`Email: ${this.formFields[0].value}`);
+        console.log(`Password: ${this.formFields[1].value}`);
       } else {
         console.log("Not valid");
         this.load = !this.load;
       }
     }
   },
-  showPassword() {
-    //
+  computed: {
+    alignOnViewport() {
+      return this.$vuetify.breakpoint.xsOnly
+        ? "text-align-center"
+        : "text-align-right";
+    }
   }
 };
 </script>
@@ -171,6 +181,10 @@ export default {
   color: white;
 }
 
+.red-text {
+  color: red;
+}
+
 .full-width {
   width: 100%;
 }
@@ -179,6 +193,10 @@ export default {
   text-align: right;
 }
 
+.text-align-center {
+  text-align: center;
+}
+
 .title {
   font-size: 2rem !important;
 }