updated startup page

class_registration_app/package.json

@@ -17,6 +17,7 @@
     "ngrok": "^5.0.0-beta.2",
     "npm-run-all": "^4.1.5",
     "pinia": "^2.1.6",
+    "v-smooth-scroll": "^2.0.0-beta.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

class_registration_app/src/assets/main.css

@@ -1,5 +1,30 @@
 @import './base.css';
 
+@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,800|Roboto:400,700);*,:after,:before {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+@font-face {
+  font-family: UConn;
+  font-style: normal;
+  font-weight: 400;
+  src: url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.eot);
+  src: url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.eot?#iefix) format("embedded-opentype"),url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.svg#uconnregular) format("svg"),url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.woff) format("woff"),url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.ttf) format("truetype")
+}
+
 #app {
   min-width: 100vw;
 
@@ -19,7 +44,6 @@ a,
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(226, 93%, 53%, 0.299);
     cursor:pointer;
   }
 }
@@ -93,7 +117,8 @@ a,
   padding: 1.2rem 3rem;
   position: relative;
   text-transform: uppercase;
-  transition: 0.2s;
+  transition: 0.4s;
+  font-size: 1vw;
 }
 .btn-97:hover {
   box-shadow: 0 6px 0 -4px #fff, 0 9px 0 -4px #aaa, 0 12px 0 -4px #000;

class_registration_app/src/components/StartUp.vue

@@ -6,31 +6,44 @@ import AppVue from '@/App.vue';
 </script>
 
 <template>
-<!--
+
 <div class="backdrop">
 
     <div class="top">
         <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
         <div>
-            <h1 class="uconn">UCONN Class Registration</h1>
-            <h3>Welcome!</h3>
+            <h1 class="uconn">UCONN</h1>
+            <h3 class="class-reg">Class Registration</h3>
         </div>
         <img class="logos" src="https://1000logos.net/wp-content/uploads/2017/08/UConn-Huskies-Logo-1959.png">
 
     </div>
 
     <div class="login">
         <a href="./login">
-            <button class="btn-97" style="position: absolute;top:42%;left:50%;transform:translate(-50%,-50%)">
-                Login with your netID here
+            <button class="btn-97" style="position: absolute;top:40%;left:50%;transform:translate(-50%,-50%)">
+                Login as student
+            </button>
+            <button class="btn-97" style="background-color:black;position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">
+                Login as faculty
             </button>
+
+
         </a>
 
-        <a style="position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">Forget your login?</a>
+
+        <a class="forgot" style="">Forget your login?</a>
     </div>
+
+    <footer>
+        <a>Home Site</a>
+        <a>About Us</a>
+        <a>Privacy Policy</a>
+        <a>Contact</a>
+    </footer>
 </div>
--->
 
+<!--
 <div class="homehead">
    UConn&ensp;|&ensp;University of Connecticut
 </div>
@@ -56,6 +69,7 @@ import AppVue from '@/App.vue';
         Professors
     </div>
 </div>
+-->
 </template>
 
 <style scoped>
@@ -131,39 +145,73 @@ a{
 }
 
 .forgot{
-    width: 40%;
-    margin: 5px auto;
-    background-color: #888;
-    color: black;
-    text-align: center;
-    border-radius: 10px;
-    transition: .3s cubic-bezier(0,1.5,1,1.5);
+    position: absolute;
+    top:120%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    background-color: rgb(247, 253, 54);
+    color:black;
+    padding:4px;
+    border-radius: 999px;
+    transition: all .2s;
 }
+
 .forgot:hover{
-    width: 55%;
+    padding:6px;
 }
-
 .top {
     color:navy;
     font-weight: 100;
-    height: 20vh;
+    height: 125px;
     position: fixed;
     display: flex;
     justify-content: center;
     /*border:1px solid #000;*/
-    top: 5%;
+    top: 0;
     left: 50%;
     transform: translate(-50%);
-    width: 50vw;
+    width: 100vw;
     text-align: center;
     background-color: white;
     color: black;
-    border-radius: 9999px;
-    border: solid 3px navy;
+    border-bottom: solid 3px black;
 
     .uconn{
-        font-weight: 600;
+        font-size: 100px;
+        float: left;
+        position:relative;
+        line-height: 120%;
+        color: #000e2f;
+        font-family: UConn,Roboto,sans-serif;
+        letter-spacing: 3px;
+        overflow: hidden;
+        text-transform: uppercase;
+        text-rendering: geometricPrecision;
+        -webkit-font-smoothing: antialiased;
+        padding-right: 40vw;
+    }
+
+    .class-reg{
+        position: absolute;
+        padding-top: 30px;
+        right: 18%;
+        color: #000e2f;
+        font-family: Raleway,sans-serif;
+        font-weight: 800;
+        margin: 0;
+        font-size: 40px;
+    }
+
+    @media (max-width: 950px) {
+        .class-reg {
+          color:transparent;
+        }
+      }
+    
+    .logos {
+        
     }
+
 }
 
 .login {
@@ -177,8 +225,6 @@ a{
     background-size: contain;
 
     border-radius: 9999px;
-
-   
 }
 
 .backdrop {
@@ -187,13 +233,65 @@ a{
     top: 0%;
     height: 100vh;
     width: 100vw;
-    background-image: url("../assets/Aerial131009a125.jpeg");
     background-size:cover;
     background-repeat: no-repeat;
+    animation: change 30s infinite ease-in-out;
+    transition:all 1s;
 }
 
-.logos {
-    height: 20vh;
 
+
+/* Apply styles to the footer element */
+footer {
+    background-color: #333; /* Background color */
+    color: #fff; /* Text color */
+    padding: 20px; /* Add space around content */
+    position:absolute;
+    bottom: 0;
+    width:100%;
+    display: flex;
+    justify-content: center;
+  }
+  
+  /* Style the links inside the footer */
+  footer a {
+    color: #fff; /* Link text color */
+    text-decoration: none; /* Remove underlines from links */
+    margin: 0 2.5vw; /* Add space between links */
+    font-size: 1.3vw;
+    transition: all .2
+  }
+
+  footer a:hover{
+    font-size: 1.5vw;
+  }
+  
+
+  @keyframes change{
+    0%
+    {
+        background-image: url("../assets/Aerial131009a125.jpeg");
+    }
+    20%
+    {
+        background-image: url("../assets/winter2.jpeg");
+    }
+    40%
+    {
+        background-image: url("../assets/union.jpeg");
+    }
+    60%
+    {
+        background-image: url("../assets/case.jpeg");
+    }
+    80%
+    {
+        background-image: url("../assets/fall.jpeg");
+    }
+    100%
+    {
+        background-image: url("../assets/Aerial131009a125.jpeg");
+    }
 }
+
 </style>

class_registration_app/src/main.ts

@@ -1,4 +1,5 @@
 import './assets/main.css'
+import VueSmoothScroll from 'v-smooth-scroll'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -11,7 +12,10 @@ import { Amplify, Auth } from "aws-amplify";
 //Amplify.configure(awsconfig);
 
 const app = createApp(App)
-
+app.use(VueSmoothScroll, {
+    duration: 400,
+    updateHistory: false,
+  })
 app.use(createPinia())
 app.use(router)