diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 81988d8..d3f2471 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/player-stats/player-stats-routing.module.ts b/src/app/player-stats/player-stats-routing.module.ts new file mode 100644 index 0000000..462b23c --- /dev/null +++ b/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 {} diff --git a/src/app/player-stats/player-stats.module.ts b/src/app/player-stats/player-stats.module.ts new file mode 100644 index 0000000..84daa75 --- /dev/null +++ b/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 {} diff --git a/src/app/player-stats/player-stats.page.html b/src/app/player-stats/player-stats.page.html new file mode 100644 index 0000000..78cd8c0 --- /dev/null +++ b/src/app/player-stats/player-stats.page.html @@ -0,0 +1,95 @@ + + +
+
+ +
+
+ + +
+
+ +
+ +
+
+ + +
+ +

KL Rahul

+ +
Batsman / Wicket Keeper
+
+ +
+ +
+ +
+ + + +
+
+ Now discussing +
+ + +
+ +
+
ABOUT
+ +
+ + diff --git a/src/app/player-stats/player-stats.page.scss b/src/app/player-stats/player-stats.page.scss new file mode 100644 index 0000000..78eecdd --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/app/player-stats/player-stats.page.spec.ts b/src/app/player-stats/player-stats.page.spec.ts new file mode 100644 index 0000000..ec6adf1 --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/player-stats/player-stats.page.ts b/src/app/player-stats/player-stats.page.ts new file mode 100644 index 0000000..1bf3687 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/tabs/tabs-routing.module.ts b/src/app/tabs/tabs-routing.module.ts index 15d747f..10260a4 100644 --- a/src/app/tabs/tabs-routing.module.ts +++ b/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) } ] }, diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html index 8ead8cc..4de8f21 100644 --- a/src/app/tabs/tabs.page.html +++ b/src/app/tabs/tabs.page.html @@ -1,5 +1,6 @@ - + @@ -10,6 +11,11 @@ + + + + + diff --git a/src/app/tabs/tabs.page.scss b/src/app/tabs/tabs.page.scss index babbbbb..f9c00f1 100644 --- a/src/app/tabs/tabs.page.scss +++ b/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; diff --git a/src/assets/home-team/india.png b/src/assets/home-team/india.png new file mode 100644 index 0000000..0286b51 Binary files /dev/null and b/src/assets/home-team/india.png differ diff --git a/src/assets/home-team/player.png b/src/assets/home-team/player.png new file mode 100644 index 0000000..09018cb Binary files /dev/null and b/src/assets/home-team/player.png differ