Home page UI

src/app/app-routing.module.ts

@@ -6,8 +6,7 @@ import { TabsComponent } from './tabs/tabs.component';
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
     { component: WelcomeComponent, path: 'welcome' },
-    { component: TabsComponent, path: 'tabs' },
-    { component: TabsComponent, path: 'tabs/:subpage' }
+    { component: TabsComponent, path: 'tabs' }
 ];
 
 @NgModule({

src/app/tabs/home/home.component.html

@@ -1 +1,85 @@
-<p>home works!</p>
+<header class="header-bar">
+    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+
+    <button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/calendar.svg"></svg-icon> </button>
+    <button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bell.svg"></svg-icon> </button>
+</header>
+
+<section class="video-section">
+    <div>
+        <h2> English Class </h2>
+        <p> Starts in </p>
+        <div class="counter"> 00:00:59 </div>
+    </div>
+
+    <span class="tutor">
+        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+        <span> Dwayne the Rock </span>
+    </span>
+</section>
+
+<ul class="subject-list">
+    <header> <h5> Latest Classes: </h5> </header>
+
+    <li>
+        <div class="schedule">
+            <label> 3:30 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> Mathematics </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> View </button>
+    </li>
+
+    <li>
+        <div class="schedule">
+            <label> 4:20 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> English </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> View </button>
+    </li>
+
+    <header> <h5> Today: </h5> </header>
+
+    <li>
+        <div class="schedule">
+            <label> 5:30 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> Mathematics </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> View </button>
+    </li>
+
+    <li>
+        <div class="schedule">
+            <label> 6:20 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> English </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> View </button>
+    </li>
+</ul>

src/app/tabs/home/home.component.scss

@@ -0,0 +1,167 @@
+.header-bar {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    position: relative;
+    padding: 0 5%;
+
+    img {
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: auto;
+    }
+
+    .icon {
+        width: 20px;
+        height: 20px;
+        fill: white;
+    }
+
+    button {
+        margin-left: 25px;
+        border: 0px;
+        background-color: transparent;
+    }
+}
+
+.video-section {
+    position: relative;
+    text-align: center;
+    background-color: var(--dark-grey);
+    height: 30vh;
+    width: 90%;
+    margin: 10px auto;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+
+    .tutor {
+        position: absolute;
+        left: 10px;
+        bottom: 10px;
+        color: white;
+
+        img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            margin-right: 5px;
+            vertical-align: middle;
+            overflow: hidden;
+        }
+
+        span {
+            font-size: 12px;
+        }
+    }
+
+    h2 {
+        font-size: 20px;
+        margin-bottom: 5px;
+    }
+
+    p {
+        font-size: 16px;
+    }
+
+    .counter {
+        font-size: 28px;
+        font-weight: 500;
+        letter-spacing: 1px;
+    }
+}
+
+
+.subject-list {
+    position: relative;
+    width: 90%;
+    margin: 0 auto;
+    list-style: none;
+
+    header {
+        color: var(--black);
+
+        h5 {
+            font-size: 14px;
+            margin-top: 30px;
+            font-weight: 500;
+        }
+
+        &:first-child h5 {
+            margin-top: 20px;
+        }
+    }
+
+    li {
+        background-color: white;
+        border-radius: 15px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        padding: 15px 10px;
+        margin-top: 15px;
+        box-shadow: 0px 0px 5px -2px var(--black);
+        justify-content: space-between;
+        position: relative;
+    }
+
+    .schedule {
+        width: 80px;
+        padding: 0 5px;
+        text-align: center;
+    }
+
+    .subject {
+        width: calc(100% - 180px);
+        border-left: 1px solid #cecece;
+        padding-left: 15px;
+
+        p {
+            margin-top: 10px;
+        }
+    }
+
+    .view-button {
+        height: 33px;
+        border-radius: 5px;
+        border: 0px;
+        background-color: var(--teal-green);
+        color: white;
+        font-size: 14px;
+        width: 80px;
+    }
+
+    label {
+        font-size: 16px;
+        color: var(--black);
+        font-weight: 500;
+    }
+
+    p {
+        font-size: 13px;
+        color: var(--dark-grey);
+        margin-top: 2px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            overflow: hidden;
+            object-fit: cover;
+            object-position: top;
+            vertical-align: middle;
+        }
+
+        span {
+            vertical-align: middle;
+            margin-left: 3px;
+        }
+    }
+}

src/app/tabs/tabs.component.html

@@ -1,20 +1,24 @@
+<div class="page">
+    <app-home *ngIf="selectedTab === 'home'"></app-home>
+</div>
+
 <section class="tabs">
-    <button>
+    <button (click)="selectedTab='home'" [ngClass]="{'active' : selectedTab === 'home'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/home.svg"></svg-icon>
         <span> Home </span>
     </button>
-    <button>
+    <button (click)="selectedTab='courses'" [ngClass]="{'active' : selectedTab === 'courses'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/mortarboard.svg"></svg-icon>
         <span> Courses </span>
     </button>
     <button class="mid-button">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/book.svg"></svg-icon>
     </button>
-    <button>
+    <button (click)="selectedTab='reports'" [ngClass]="{'active' : selectedTab === 'reports'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/newspaper.svg"></svg-icon>
         <span> Reports </span>
     </button>
-    <button>
+    <button (click)="selectedTab='more'" [ngClass]="{'active' : selectedTab === 'more'}">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
         <span> More </span>
     </button>

src/app/tabs/tabs.component.scss

@@ -1,3 +1,22 @@
+.page {
+    height: 100vh;
+    overflow: auto;
+    padding-bottom: 100px;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 30vh;
+        width: 100%;
+        background-color: var(--black);
+        border-bottom-left-radius: 30px;
+        border-bottom-right-radius: 30px;
+        pointer-events: none;
+    }
+}
+
 .tabs {
     display: flex;
     width: 100%;
@@ -20,6 +39,15 @@
         display: block;
         text-align: center;
 
+        &.active {
+            .icon {
+                fill: var(--teal-green);
+            }
+            span {
+                color: var(--teal-green);
+            }
+        }
+
         &.mid-button {
             height: calc(90vw / 5);
             background-color: white;
@@ -29,7 +57,7 @@
             box-shadow: 0px 0px 5px var(--black);
 
             .icon {
-                fill: var(--teal);
+                fill: var(--teal-green);
                 width: 25px;
                 height: 25px;
             }

src/app/tabs/tabs.component.ts

@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss']
+	selector: 'app-tabs',
+	templateUrl: './tabs.component.html',
+	styleUrls: ['./tabs.component.scss']
 })
 export class TabsComponent implements OnInit {
+    selectedTab: string = 'home';
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
 
 }

src/app/welcome/welcome.component.scss

@@ -114,6 +114,9 @@
         font-size: 13px;
         color: var(--dark-grey);
         margin-top: 2px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
 
         img {
             width: 20px;