small ui upgrades

Author: xrayian

components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSpinner: typeof import('element-plus/es')['ElSpinner']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-6e90ec2f'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.bh272g909ug"
+    "revision": "0.p74ji6d37co"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

public/bg.svg

@@ -43,4 +43,11 @@ import FooterMenu from './components/FooterMenu.vue';
 *::-webkit-scrollbar-thumb:hover {
   background: var(--el-color-primary);
 }
+
+html {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  background-image: url('bg.svg');
+}
 </style>

public/home.svg

@@ -1,7 +1,7 @@
 <template>
-    <footer class="footer items-center p-4 bg-neutral text-neutral-content">
+    <footer class="footer items-center p-4 bg-black text-neutral-content dark:bg-neutral">
         <div class="items-center grid-flow-col">
-            <p>Amar Progress | Copyright © 2023 - All right reserved</p>
+            <p>Amar Progress | Copyright © 2024 - All right reserved</p>
         </div>
         <div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
             <a href="https://www.twitter.com/xrayian" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24"

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import LoginView from './auth/LoginView.vue';
 const store = useStore();
 const authReady = computed(() => {
   return store.state.isAuthReady;
@@ -11,25 +12,42 @@ const authReady = computed(() => {
 <template>
   <div class="container mx-auto mb-24 mt-6 lg:my-14">
     <el-main>
-      <h1 class="text-4xl mb-8">Welcome to Amar Progress!</h1>
-
-      <p class="text-xl">
-        This is a progress tracking app for students. Simply select the chapters you want to complete and this will show
-        you how much you completed in each subject. Made for HSC 2022-23 Science Students.
-      </p>
-
-
-      <template v-if=authReady>
-        <p class="text-xl mt-4" v-if="store.state.user == null">
-          You will need to sign up in order to use this site.
-        </p>
-        <router-link v-if="store.state.user != null" :to="{ name: 'dashboard' }" class="btn btn-primary mt-8">
-          Visit Dashboard
-        </router-link>
-        <router-link v-else :to="{ name: 'login' }" class="btn btn-primary mt-8">
-          Get Started
-        </router-link>
-      </template>
+      <div class="flex flex-col md:grid md:grid-cols-5 gap-2 grid-flow-col items-center">
+        <div class="md:col-span-2 col-span-1">
+          <h1 class="text-4xl mb-8">Welcome to Amar Progress!</h1>
+
+          <p class="text-xl">
+            This is a progress tracking app for students. Simply select the chapters you want to complete and this will
+            show
+            you how much you completed in each subject. Made for HSC 2022-23 Science Students.
+          </p>
+
+
+          <template v-if=authReady>
+            <p class="text-xl mt-4" v-if="store.state.user == null">
+              You will need to sign up in order to use this site.
+            </p>
+            <router-link v-if="store.state.user != null" :to="{ name: 'dashboard' }" class="btn btn-primary mt-8 btn-block md:btn-wide">
+              Visit Dashboard
+            </router-link>
+            <router-link v-else :to="{ name: 'login' }" class="btn btn-primary mt-8 btn-block md:btn-wide">
+              Get Started
+            </router-link>
+          </template>
+        </div>
+        <div class="md:col-span-3 col-span-1 mt-3 md:mt-1">
+          <template v-if="authReady && store.state.user == null">
+            <login-view />
+          </template>
+          <template v-else>
+            <div class="flex justify-center items-center">
+              <img src="/home.svg" class="md:w-[28vw] w-96" alt="">
+            </div>
+          </template>
+
+        </div>
+      </div>
+
 
     </el-main>