Nic21003 experimental

class_registration_app/src/assets/main.css

@@ -26,17 +26,17 @@ a,
 
 
 @media (min-width: 100vw) {
-
+ /*
   body {
     display: flex;
-    place-items: center;
+    place-items: center; 
   }
 
   #app {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 auto;
-  }
+    grid-template-columns: 1fr 1fr; 
+    padding: 0 auto
+  } */
 }
 
 
@@ -100,6 +100,16 @@ a,
   transform: translateY(-5px);
 }
 
+.homehead{
+  background-color: #000e2f;
+  color: white;
+  font-size: 30px;
+  width: 100vw;
+  text-align: center;
+  padding: 12px;
+}
+
+
 .course-list-item {
   padding: 20px;
   display: flex;
@@ -119,4 +129,5 @@ a,
 .course-location {
   margin-left: 1vh;
 
-}
+}
+

class_registration_app/src/components/DashBoard.vue

@@ -2,33 +2,59 @@
 </script>
 
 <template>
+    <div class="homehead">
+        UConn&ensp;|&ensp;University of Connecticut
+     </div>
     <div class="dashboard">
-        <h1>Class Registration Dashboard</h1>
-        <div class="button-container">
+        <div class="head2">
+            Class Registration Dashboard
             <RouterLink to="./login">
-            <button class="uconn-button">Sign Out</button>
+                <div class="signout">Sign Out</div>
             </RouterLink>
+        </div>
+        <div class="button-container">
             <RouterLink to="./schedule_viewer">
-            <button class="uconn-button">Schedule Viewer</button>
+            <button class="uconn-button">
+                Schedule Viewer
+                <img src="../assets/calenderimage.png" class="icon">
+            </button>
+            </RouterLink>
+            <RouterLink to="./courses">
+            <button class="uconn-button">
+                Course Search
+                <img src="../assets/magimage.png" class="icon">
+            </button>
+            </RouterLink>
+            <RouterLink to="./my_courses">
+                <button class="uconn-button">
+                    Current Classes
+                    <img src="../assets/bookimage.png" class="icon">
+                </button>
+            </RouterLink>
+            <RouterLink to="./courses">
+                <button class="uconn-button">Profile
+                    <img src="../assets/personimage.png" class="icon">
+                </button>
+
             </RouterLink>
             <RouterLink to="./courses">
-            <button class="uconn-button">Course Search</button>
+                <button class="uconn-button">Placeholder</button>
             </RouterLink>
+
             <RouterLink to="./my_courses">
-            <button class="uconn-button">Current Classes</button>
+              <button class="uconn-button">Current Classes</button>
             </RouterLink>
+
         </div>
     </div>
 </template>
 
 <style scoped>
 
 .dashboard {
+
     text-align: center;
-    position:absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    align-items: center;
 }
 
 h1 {
@@ -46,6 +72,9 @@ h1 {
     margin: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    width: 80%;
+    height: 80%;
+    position: relative;
 }
 
 .uconn-button:hover {
@@ -54,9 +83,51 @@ h1 {
 }
 
 .button-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: [c1] 33% [c2] 33% [c3] 34%;
+    grid-template-rows: [r1] 100px [r2] 100px;
+    margin: 0 auto;
+}
+
+.head2{
+    background-color: #227bc9;
+    text-align: center;
+    font-size: 25px;
+    width: 100vw;
+    padding: 5px;
+    color: white;
+    position: relative;
+}
+
+a{
+    text-decoration: none;
+    text-shadow: none;
+}
+
+.signout{
+    background-color: #000066; 
+    width: 15%;
+    position: absolute;
+    right: 10px;
+    top: 10%;
+    bottom: 20%;
+    font-size: 18px;
+    border-radius: 15px;
+    transition: .6s;
 }
 
+.signout:hover{
+    background-color: white;
+    color: #000066; 
+}
+
+.icon{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    size: cover;
+    right: 10%;
+    bottom:30%;
+}
 </style>

class_registration_app/src/components/LoginPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <body>
   <section class="form animated flipInX">
     <h2>Login To Your Account</h2>
     <p class="valid">Valid. Please wait a moment.</p>
@@ -10,7 +11,9 @@
       <button @click.prevent="tryLogin" id="submit">Login</button>
     </form>
     <RouterLink to="/">Back</RouterLink>
+    <div id="test"></div>
   </section>
+</body>
 </template>
 
 <script setup lang="ts">
@@ -39,6 +42,11 @@ const tryLogin = async () => {
     if (authenticationValid === true) {
       router.push({path: './dashboard'});
     }
+    else{
+      let err = document.getElementById('test');
+      if(err){
+        err.innerText = "Login info is incorrect"}
+    }
 
   } catch (error) {
     console.error(error);
@@ -120,4 +128,14 @@ const tryLogin = async () => {
       .error, .valid{display:none;}
 
 
-    </style>
+    </style>
+
+<style scoped>
+    body{
+      background-color: #000066;
+    }
+    #test{
+      font-size: 20px;
+      color: red
+    }
+</style>

class_registration_app/src/components/ScheduleView.vue

@@ -44,7 +44,8 @@
   background-color: #888;
   text-align: center;
   vertical-align: middle;
-  border: 1px solid;
+  border: 2px solid;
+  color: black;
 }
 
 .time{
@@ -53,6 +54,7 @@
   text-align: center;
   vertical-align: middle;
   border: 1px solid;
+  color: black;
 }
 
 #time-column{
@@ -119,21 +121,29 @@ const class_slots = [
 
 const colors = ['rgb(120,255,150)', 'rgb(120,150,255)','rgb(255,120,150)','rgb(255,255,120)']
 
+if(grid.childElementCount==6){
 for (var i = 0; i <18;i++){
 
     let time = document.createElement('div');
-    time.classList.add('time');
+
+    time.style.backgroundColor = "#888";
+    time.style.fontSize = "15px";
+    time.style.textAlign = "center";
+    time.style.verticalAlign = "middle";
+    time.style.border = "1px solid";
+    time.style.color = "black";
+
     time.innerHTML = time_times[i];
     grid.appendChild(time);
 
     for (var j=0; j<5; j++){
-        let child = document.createElement('div');
-        child.classList.add('class')
+        let child = document.createElement('div')
+        child.style.backgroundColor = "#dfd"
         child.id = 'slot' + (5*i+j)
         grid.appendChild(child);
     }
 }
-
+}
 const classes1 = [
     {
         "period": "2",