Front end work

zjf19002 · Nov 1, 2023 · 2bb2673 · 2bb2673
1 parent 7c47ee9
commit 2bb2673
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 16 deletions.
diff --git a/class_registration_app/src/assets/bookimage.png b/class_registration_app/src/assets/bookimage.png
diff --git a/class_registration_app/src/assets/calenderimage.png b/class_registration_app/src/assets/calenderimage.png
diff --git a/class_registration_app/src/assets/magimage.png b/class_registration_app/src/assets/magimage.png
diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css
@@ -3,7 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0rem;
 
   font-weight: normal;
 }
@@ -94,4 +94,11 @@ a,
   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;
+}
diff --git a/class_registration_app/src/components/DashBoard.vue b/class_registration_app/src/components/DashBoard.vue
@@ -2,19 +2,41 @@
 </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</button>
+            <button class="uconn-button">
+                Course Search
+                <img src="../assets/magimage.png" class="icon">
+            </button>
+            </RouterLink>
+            <RouterLink to="./courses">
+                <button class="uconn-button">
+                    Current Classes
+                    <img src="../assets/bookimage.png" class="icon">
+                </button>
+            </RouterLink>
+            <RouterLink to="./courses">
+                <button class="uconn-button">Profile</button>
+            </RouterLink>
+            <RouterLink to="./courses">
+                <button class="uconn-button">Placeholder</button>
             </RouterLink>
-            <button class="uconn-button">Current Classes</button>
         </div>
     </div>
 </template>
@@ -23,6 +45,7 @@
 
 .dashboard {
     text-align: center;
+    align-items: center;
 }
 
 h1 {
@@ -40,6 +63,9 @@ h1 {
     margin: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    width: 80%;
+    height: 80%;
+    position: relative;
 }
 
 .uconn-button:hover {
@@ -48,9 +74,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>
diff --git a/class_registration_app/src/components/ScheduleView.vue b/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",

diff --git a/class_registration_app/src/components/StartUp.vue b/class_registration_app/src/components/StartUp.vue
@@ -6,6 +6,7 @@ import AppVue from '@/App.vue';
 </script>
 
 <template>
+<!--
 <div class="backdrop">
     
     <div class="top">
@@ -28,14 +29,120 @@ import AppVue from '@/App.vue';
         <a style="position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">Forget your login?</a>
     </div>
 </div>
+-->
 
+<div class="homehead">
+   UConn&ensp;|&ensp;University of Connecticut
+</div>
+<div class="head2">
+    Course Registration System
+</div>
+
+<div class="backdrop2">
+    <div class="login2">
+        <a href="./login">
+            <div class="signin">Login to Course Registration</div>
+        </a>
+        <div class="forgot">Forgot Login?</div>
+    </div>
+</div>
+
+<div class="support">
+    Support
+    <div class="supp">
+        Student
+    </div>
+    <div class="supp">
+        Professors
+    </div>
+</div>
 </template>
 
 <style scoped>
 @font-face {
     font-family: 'Gotham';
     src: url('../assets/Gotham/Gotham\ Ultra/Gotham\ Ultra.otf') format('opentype');
   }
+
+a{
+    text-decoration: none;
+    text-shadow: none;
+}
+
+.head2{
+    background-color: #227bc9;
+    text-align: center;
+    font-size: 25px;
+    width: 100vw;
+    padding: 5px;
+    color: white;
+}
+
+.support{
+    background-color: #ddd;
+    text-align: center;
+    font-size: 25px;
+    color: black;
+}
+.supp{
+    font-size: 18px;
+    background-color: #888;
+    width: 10%;
+    margin: 10px auto;
+    border: 2px black;
+    transition: .5s;
+}
+
+.supp:hover{
+    background-color: #999;
+}
+.login2{
+    position: relative;
+    height: 25%;
+    width: 30%;
+    background-color: rgba(200,200,200,.85);
+    left: 55%;
+    top: 40%;
+    padding: 5px;
+    border-radius: 20px;
+}
+
+.signin{
+    background-color: #ffae2b;
+    width: 75%;
+    margin: 5px auto;
+    font-size: 20px;
+    color: black;
+    text-align: center;
+    padding: 2px;
+    border-radius: 30px;
+    transition: .3s;
+}
+.signin:hover{
+    background-color: #ef9e0b; 
+    width: 85%;
+}
+
+.backdrop2{
+    background-image: url("../assets/Aerial131009a125.jpeg");
+    background-size:cover;
+    width: 100%;
+    height: 500px;
+}
+
+.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);
+}
+.forgot:hover{
+    width: 55%;
+}
+
 .top {
     color:navy;
     font-weight: 100;