Merge pull request #16 from zjf19002/experimental

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/base.css

@@ -62,6 +62,7 @@ body {
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
+  background-color: white;
   transition:
     color 0.5s,
     background-color 0.5s;

class_registration_app/src/assets/main.css

@@ -1,8 +1,32 @@
 @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;
-
   padding: 0rem;
 
   font-weight: normal;
@@ -19,7 +43,6 @@ a,
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(226, 93%, 53%, 0.299);
     cursor:pointer;
   }
 }
@@ -93,21 +116,15 @@ 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;
   transform: translateY(-5px);
 }
 
-.homehead{
-  background-color: #000e2f;
-  color: white;
-  font-size: 30px;
-  width: 100vw;
-  text-align: center;
-  padding: 12px;
-}
+
 
 
 .course-list-item {

class_registration_app/src/components/CourseSearch.vue

@@ -114,6 +114,9 @@ document.addEventListener("click", function() {
 
 
 <template>
+    <RouterLink to="./dashboard">
+      <button>Back</button>
+    </RouterLink>
     <div class="container" id="container">
         <h1 class="title">UConn Course Search</h1>
         <div class="search">

class_registration_app/src/components/DashBoard.vue

@@ -2,13 +2,17 @@
 </script>
 
 <template>
-    <div class="homehead">
-        UConn&ensp;|&ensp;University of Connecticut
+    <div class="top">
+        <img class="logos" src="../assets/currentLogo.png">
+        <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
+        <h2 class="uconn">UCONN</h2>
+        <img class="logos" src="https://1000logos.net/wp-content/uploads/2017/08/UConn-Huskies-Logo-1959.png">
+        <img class="logos" src="../assets/2000HuskyLogo.jpeg">
      </div>
     <div class="dashboard">
         <div class="head2">
             Class Registration Dashboard
-            <RouterLink to="./login">
+            <RouterLink to="./">
                 <div class="signout">Sign Out</div>
             </RouterLink>
         </div>
@@ -52,7 +56,7 @@
 <style scoped>
 
 .dashboard {
-    
+    background-color: white;
     text-align: center;
     align-items: center;
 }
@@ -130,4 +134,37 @@ a{
     right: 10%;
     bottom:30%;
 }
+
+.top {
+    color:navy;
+    font-weight: 100;
+    height: 125px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    /*border:1px solid #000;*/
+    top: 0;
+    left: 50%;
+    transform: translate(-50%);
+    width: 100vw;
+    text-align: center;
+    background-color: white;
+    color: black;
+    border-bottom: solid 3px black;
+  
+    .uconn{
+        font-size: 100px;
+        float: center;
+        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: 0;
+    }
+  }
 </style>

class_registration_app/src/components/LoginPage.vue

@@ -1,19 +1,18 @@
 <template>
-  <body>
   <section class="form animated flipInX">
-    <h2>Login To Your Account</h2>
     <p class="valid">Valid. Please wait a moment.</p>
     <p class="error">Error. Please enter correct Username &amp; password.</p>
     <form class="loginbox" autocomplete="off">
-      <input placeholder="Username" type="text" id="username" v-model="data.username" />
-      <input placeholder="Password" type="password" id="password" v-model="data.password"/>
+      <input class="inputBox" placeholder="Username" type="text" id="username" v-model="data.username" />
+      <br/><br/>
+      <input class="inputBox" placeholder="Password" type="password" id="password" v-model="data.password"/>
+      <br/>
+      <br/>
       <!--<RouterLink to="./dashboard" @click.prevent="tryLogin"> use v-if here @click.prevent="tryLogin" -->
       <button @click.prevent="tryLogin" id="submit">Login</button>
     </form>
-    <RouterLink to="/">Back</RouterLink>
     <div id="test"></div>
   </section>
-</body>
 </template>
 
 <script setup lang="ts">
@@ -56,7 +55,7 @@ const tryLogin = async () => {
 
 </script>
 
-    <style scoped>
+  <style scoped>
     section {
         background-color: navy ;
         font-family: "Roboto";
@@ -77,13 +76,15 @@ const tryLogin = async () => {
       }
       .form {
         position: absolute;
-        top: 50%;
+        top: 70%;
         left: 50%;
-        background: #fff;
-        width: 285px;
-        margin: -140px 0 0 -182px;
-        padding: 40px;
-        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%);
+        background: transparent;
+        width: 80%;
+        height: 70%;
+        
+        
+        
         h2 {
           margin: 0 0 20px;
           line-height: 1;
@@ -92,16 +93,12 @@ const tryLogin = async () => {
           font-weight: 400;
         }
         input {
-          outline: none;
-          display: block;
-          width: 100%;
-          margin: 0 0 20px;
-          padding: 10px 15px;
+          
+          
           border: 1px solid #ccc;
           color: #ccc;
           font-family: "Roboto";
-          box-sizing: border-box;
-          font-size: 14px;
+          font-size: 19px;
           font-weight: 400;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
@@ -125,17 +122,24 @@ const tryLogin = async () => {
         font-weight: 400;
       }
       
-      .error, .valid{display:none;}
+      .inputBox{
+        width:100%;
+        height:15%;
+        border: 1px solid #ccc;
+        color: black;
+        font-family: "Roboto";
+        font-size: 25px;
+        font-weight: 400;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        transition: 0.2s linear;
+        &input:focus {
+          color: #333;
+          border: 1px solid #44c4e7;
+        }
+      }
 
+      .error, .valid{display:none;}
 
-    </style>
 
-<style scoped>
-    body{
-      background-color: #000066;
-    }
-    #test{
-      font-size: 20px;
-      color: red
-    }
-</style>
+  </style>