progress on loginview router and view layout

rayala30 · rayala30 · commit 31e89660e2c9 · 2023-12-06T22:58:41.000-05:00
diff --git a/index.html b/index.html
@@ -26,36 +26,7 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
 
-      <!-- <main id="main-grid">
-        <div id="logo">
-          <img src="src/img/logo-gold.svg" alt="Nomatic Logo">
-        </div>
-
-        <div id="nomatic">NOMATIC</div>
-
-        <div id="create-acct-button">  
-          <button id="yellow-button" type="button">
-            <div class="button-label">
-              <div id="create-acct-label">Create an account</div>
-            </div>
-          </button>  
-        </div>
-
-        <div id="log-in-button">  
-          <button id="white-button" type="button">
-            <div class="button-label">
-              <div id="log-in-label">Log in</div>
-            </div>
-          </button>
-        </div>
-
-        <div id="phonetic">[ no • mat • ic ]</div>
-
-        <div id="greeting-1">Find an open mat near you.</div>
-        
-        <div id="greeting-2">Get rolling!</div>
-
-      </main> -->
+      
       
   </body>
 
diff --git a/src/router/index.js b/src/router/index.js
@@ -4,6 +4,8 @@ import { useStore } from 'vuex'
 
 // Import components
 import HomePageView from '../views/HomePageView.vue';
+import LoginView from '../views/LoginView.vue';
+
 
 
 /**
@@ -20,6 +22,35 @@ const routes = [
     name: 'homePage',
     component: HomePageView,
   },
+
+  {
+    path: '/login',
+    name: "login",
+    component: LoginView,
+    meta: {
+      requiresAuth: false
+    }
+  },
+
+  // {
+  //   path: '/logout',
+  //   name: "logout",
+  //   component: LogoutView,
+  //   meta: {
+  //     requiresAuth: false
+  //   }
+  // },
+
+  // {
+  //   path: "/register",
+  //   name: "register",
+  //   component: RegisterView,
+  //   meta: {
+  //     requiresAuth: false
+  //   }
+  // },
+
+
 ];
 
 // Create the router
diff --git a/src/views/HomePageView.vue b/src/views/HomePageView.vue
@@ -1,5 +1,6 @@
 <template>
-    <main id="home-grid">
+    <body class="home-body">
+      <main id="home-grid">
       <div id="logo">
         <img src="../img/logo-gold.svg" alt="Nomatic Logo">
       </div>
@@ -28,6 +29,7 @@
         
       <div id="greeting-2">Get rolling!</div>
     </main>
+    </body>
 </template>
 
 <script>
@@ -37,21 +39,21 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 
-body#index::before {
+body.home-body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display:flex;
-  align-items: center; /* Center vertically */
-  justify-content: center; /* Center horizontally */
-  background-image: url('@/css/img-css/rolling-image.png'); /* Use the same image as the background */
+  align-items: center; 
+  justify-content: center; 
+  background-image: url('@/css/img-css/rolling-image.png'); 
   filter: grayscale(100%);
-  background-blend-mode: luminosity; /* Adjust blend mode as needed */
+  background-blend-mode: luminosity; 
   background-size: cover;
   background-repeat: no-repeat;
   max-width: 100%;
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="login">
+        TEST LOGIN VIEW
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style>
+
+/* body#index::before {
+    background-image: none;
+} */
+
+div#login {
+    height: 100vh;
+    width: 100vw;
+}
+
+    
+</style>
diff --git a/src/views/LogoutView.vue b/src/views/LogoutView.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style>
+    
+</style>
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style>
+    
+</style>
