Partial commit --- Player details

src/app/app-routing.module.ts

@@ -21,6 +21,10 @@ const routes: Routes = [
   {
     path: 'home-details',
     loadChildren: () => import('./home-details/home-details.module').then( m => m.HomeDetailsPageModule)
+  },
+  {
+    path: 'player-stats',
+    loadChildren: () => import('./player-stats/player-stats.module').then( m => m.PlayerStatsPageModule)
   }
 ];
 @NgModule({

src/app/player-stats/player-stats-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PlayerStatsPage } from './player-stats.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PlayerStatsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PlayerStatsPageRoutingModule {}

src/app/player-stats/player-stats.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PlayerStatsPageRoutingModule } from './player-stats-routing.module';
+
+import { PlayerStatsPage } from './player-stats.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PlayerStatsPageRoutingModule
+  ],
+  declarations: [PlayerStatsPage]
+})
+export class PlayerStatsPageModule {}

src/app/player-stats/player-stats.page.html

@@ -0,0 +1,95 @@
+<ion-content>
+    
+    <section class="action-buttons">
+        <div class="nav">
+            <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+        </div>
+        <div class="action">
+            <button> <ion-icon name="share-social-outline"></ion-icon> </button>
+            <button> <ion-icon name="bookmark-outline"></ion-icon> </button>
+        </div>
+    </section>
+
+    <section class="player-primary-data">
+
+        <section class="details">
+            <div class="teams-holder">
+                <img src="assets/home-team/KXIP.svg" alt="">
+                <img src="assets/home-team/india.png" alt="">
+            </div>
+    
+            <h2 class="name"> KL Rahul </h2>
+            
+            <div class="role"> <ion-icon name="shirt-outline"></ion-icon> Batsman / Wicket Keeper </div>
+        </section>
+
+        <figure>
+            <img src="assets/home-team/player.png" alt="">
+        </figure>
+
+    </section>
+
+    <ul class="statistics">
+        <li>
+            <label> Age </label>
+            <h5> 26 </h5>
+        </li>
+
+        <li>
+            <label> Games </label>
+            <h5> 64 </h5>
+        </li>
+
+        <li>
+            <label> Centuries </label>
+            <h5> 18 </h5>
+        </li>
+    </ul>
+    
+    <section class="news">
+        <header>
+            Now discussing
+        </header>
+
+        <ul>
+            <li>
+                <label> 30 <span> Jan </span> </label>
+                <p>
+                    KL Rahul wins the player of the season 2018 confirms BCCI
+                </p>
+                <button> <ion-icon name="share-social-outline"></ion-icon> </button>
+            </li>
+
+            <li>
+                <label> 22 <span> Oct </span> </label>
+                <p>
+                    KL Rahul planning to head back to RCB
+                </p>
+                <button> <ion-icon name="share-social-outline"></ion-icon> </button>
+            </li>
+        </ul>        
+    </section>
+
+    <section class="about">
+        <header> ABOUT </header>
+        <ul>
+            <li>
+                <label> Full name </label>
+                <p> KL Rahul </p>
+            </li>
+            <li>
+                <label> Age </label>
+                <p> 26 </p>
+            </li>
+            <li>
+                <label> Native </label>
+                <p> Mangaluru </p>
+            </li>
+            <li>
+                <label> Avg. Run rate </label>
+                <p> 43.64 </p>
+            </li>
+        </ul>
+    </section>
+
+</ion-content>

src/app/player-stats/player-stats.page.scss

@@ -0,0 +1,123 @@
+$dark-blue: #161e2d;
+$blue-grey: #949599;
+
+ion-content {
+    --background: transparent;
+    background-color: white;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        animation: fadeIn 0.5s forwards;
+        background-color: $dark-blue;
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 80px;
+    padding-right: 5%;
+    padding-left: 3%;
+    
+    button {
+        background-color: transparent;
+        border: none;
+    }
+    
+    .nav button {
+        color: $blue-grey;
+        display: flex;
+        align-items: center;
+
+        ion-icon {
+            font-size: 24px;
+        }
+        
+        span {
+            margin-left: 5px;
+            font-size: 0.9rem;
+            font-size: 14px;
+        }
+    }
+
+    .action {
+        display: flex;
+    }
+
+    .action button {
+        width: 40px;
+        height: 40px;
+        border: 1px solid $blue-grey;
+        background-color: rgba($blue-grey, 0.1);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+
+        ion-icon {
+            color: $blue-grey;
+            font-size: 20px;
+        }
+    }
+
+}
+
+
+.player-primary-data {
+    display: flex;
+
+    .details {
+        width: 50%;
+    }
+    
+    .teams-holder {
+        display: flex;
+        position: relative;
+        z-index: 0;
+
+        img {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            position: relative;
+            z-index: 1;
+            display: block;
+
+            &:nth-child(2) {
+                margin-left: -10px;
+                z-index: 0;
+                object-fit: cover;
+            }
+        }
+    }
+
+    figure {
+        width: 50%;
+        display: block;
+
+        img {
+            display: block;
+            object-fit: contain;
+            width: 100%;
+            height: 100%;
+            object-position: bottom;
+        }
+    }
+}

src/app/player-stats/player-stats.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PlayerStatsPage } from './player-stats.page';
+
+describe('PlayerStatsPage', () => {
+  let component: PlayerStatsPage;
+  let fixture: ComponentFixture<PlayerStatsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayerStatsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlayerStatsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/player-stats/player-stats.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-player-stats',
+    templateUrl: './player-stats.page.html',
+    styleUrls: ['./player-stats.page.scss'],
+})
+export class PlayerStatsPage implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

src/app/tabs/tabs-routing.module.ts

@@ -18,6 +18,10 @@ const routes: Routes = [
             {
                 path: 'more',
                 loadChildren: () => import('../more/more.module').then(m => m.MorePageModule)
+            },
+            {
+                path: 'player-stats',
+                loadChildren: () => import('../player-stats/player-stats.module').then( m => m.PlayerStatsPageModule)
             }
         ]
     },

src/app/tabs/tabs.page.html

@@ -1,5 +1,6 @@
 <ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()">
-    <ion-tab-bar slot="bottom" [ngClass]="{'live' : selectedTab === 'live'}">
+    <ion-tab-bar slot="bottom" [ngClass]="{'live' : selectedTab === 'live', 
+    'dark' : selectedTab === 'player-stats'}">
         <ion-tab-button tab="home">
             <ion-icon name="home-outline"></ion-icon>
             <ion-icon name="home"></ion-icon>
@@ -10,6 +11,11 @@
             <ion-icon name="play-circle"></ion-icon>
         </ion-tab-button>
 
+        <ion-tab-button tab="player-stats">
+            <ion-icon name="person-outline"></ion-icon>
+            <ion-icon name="person"></ion-icon>
+        </ion-tab-button>
+
         <ion-tab-button tab="more">
             <ion-icon name="ellipsis-vertical-outline"></ion-icon>
             <ion-icon name="ellipsis-vertical"></ion-icon>

src/app/tabs/tabs.page.scss

@@ -13,6 +13,12 @@ ion-tab-bar {
         --color-selected: #01b868;
     }
 
+    &.dark {
+        --background: #161e2d;
+        --color: white;
+        --color-selected: #01b868;
+    }
+
     ion-tab-button {
         ion-icon {
             font-size: 20px;