Live match details page UI - partial commit

src/app/app-routing.module.ts

@@ -33,6 +33,10 @@ const routes: Routes = [
   {
     path: 'booking-details',
     loadChildren: () => import('./booking-details/booking-details.module').then( m => m.BookingDetailsPageModule)
+  },
+  {
+    path: 'match-details',
+    loadChildren: () => import('./match-details/match-details.module').then( m => m.MatchDetailsPageModule)
   }
 ];
 @NgModule({

src/app/live/live.page.html

@@ -13,7 +13,7 @@
         </div>
 
 
-        <section class="match-card">
+        <section class="match-card" [routerLink]="['/match-details']">
             <span class="format"> T20 Qualifiers </span>
             <header> <h4> Kings XI Punjab v/s Mumbai Indians </h4> </header>
             <p> <ion-icon src="assets/icons/helmet.svg"></ion-icon> Sehwag, KL Rahul </p>

src/app/live/live.page.ts

@@ -6,7 +6,6 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./live.page.scss'],
 })
 export class LivePage implements OnInit {
-
     constructor() { }
 
     ngOnInit() {

src/app/match-details/match-details-routing.module.ts

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

src/app/match-details/match-details.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 { MatchDetailsPageRoutingModule } from './match-details-routing.module';
+
+import { MatchDetailsPage } from './match-details.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MatchDetailsPageRoutingModule
+  ],
+  declarations: [MatchDetailsPage]
+})
+export class MatchDetailsPageModule {}

src/app/match-details/match-details.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>match-details</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/match-details/match-details.page.spec.ts

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

src/app/match-details/match-details.page.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+
+
+type IPlayer = {
+    name: string,
+    image: string,
+};
+
+type ITeam = {
+    name: string,
+    image: string,
+    players: Array<IPlayer>
+};
+
+type IStadium = {
+    name: string,
+    topView: string,
+    sideView: string,
+};
+
+@Component({
+    selector: 'app-match-details',
+    templateUrl: './match-details.page.html',
+    styleUrls: ['./match-details.page.scss'],
+})
+export class MatchDetailsPage implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

src/app/tabs/tabs.page.html

@@ -11,11 +11,6 @@
             <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="booking">
             <ion-icon name="ticket-outline"></ion-icon>
             <ion-icon name="ticket"></ion-icon>

src/assets/home-team/ground.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 530 530" style="enable-background:new 0 0 530 530;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+	.st1{fill:#39B54A;}
+	.st2{fill:#4FC95B;}
+	.st3{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;stroke-dasharray:12.0895,12.0895;}
+	.st4{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;stroke-dasharray:11.8547,11.8547;}
+	.st5{fill:#C69C6D;}
+	.st6{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
+</style>
+<g>
+	<g>
+		<defs>
+			<rect id="SVGID_1_" width="529.41" height="530"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st0">
+			<polygon class="st1" points="-36.93,530 -68.4,530 -70.35,-0.92 -38.7,-0.92 			"/>
+			<polygon class="st2" points="-5.47,530 -36.93,530 -38.7,-0.92 -7.05,-0.92 			"/>
+			<polygon class="st1" points="25.99,530 -5.47,530 -7.05,-0.92 24.6,-0.92 			"/>
+			<polygon class="st2" points="57.46,530 25.99,530 24.6,-0.92 56.25,-0.92 			"/>
+			<polygon class="st1" points="88.92,530 57.46,530 56.25,-0.92 87.9,-0.92 			"/>
+			<polygon class="st2" points="120.38,530 88.92,530 87.9,-0.92 119.55,-0.92 			"/>
+			<polygon class="st1" points="151.85,530 120.38,530 119.55,-0.92 151.2,-0.92 			"/>
+			<polygon class="st2" points="183.31,530 151.85,530 151.2,-0.92 182.85,-0.92 			"/>
+			<polygon class="st1" points="214.78,530 183.31,530 182.85,-0.92 214.5,-0.92 			"/>
+			<polygon class="st2" points="246.24,530 214.78,530 214.5,-0.92 246.15,-0.92 			"/>
+			<polygon class="st1" points="277.7,530 246.24,530 246.15,-0.92 277.8,-0.92 			"/>
+			<polygon class="st2" points="309.17,530 277.7,530 277.8,-0.92 309.45,-0.92 			"/>
+			<polygon class="st1" points="340.63,530 309.17,530 309.45,-0.92 341.09,-0.92 			"/>
+			<polygon class="st2" points="372.09,530 340.63,530 341.09,-0.92 372.74,-0.92 			"/>
+			<polygon class="st1" points="403.56,530 372.09,530 372.74,-0.92 404.39,-0.92 			"/>
+			<polygon class="st2" points="435.02,530 403.56,530 404.39,-0.92 436.04,-0.92 			"/>
+			<polygon class="st1" points="466.48,530 435.02,530 436.04,-0.92 467.69,-0.92 			"/>
+			<polygon class="st2" points="497.95,530 466.48,530 467.69,-0.92 499.34,-0.92 			"/>
+			<polygon class="st1" points="529.41,530 497.95,530 499.34,-0.92 530.99,-0.92 			"/>
+			<polygon class="st2" points="560.87,530 529.41,530 530.99,-0.92 562.64,-0.92 			"/>
+			<polygon class="st1" points="592.34,530 560.87,530 562.64,-0.92 594.29,-0.92 			"/>
+			<polygon class="st2" points="623.8,530 592.34,530 594.29,-0.92 625.94,-0.92 			"/>
+			
+				<image style="overflow:visible;" width="34" height="531" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAITCAYAAABi/s7jAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
+GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWdJREFUeNrs3EENwCAQBECoKWQg
+AH0IQAaqaNoEBX1Aw+yHe0723kfMvYywMC3V+LxX2CQgICAgICAgICAgICAgICAgICAgICAgICAg
+ICAgICAgICAgICAgICAgICAgICAgICAgJ0DmWY1GQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA
+QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEC+Qlqq
+USMgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
+ICAgICAgv4C8F/K5l6EREBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ
+EBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQkOMhcQ6rf2WxGhAQEBAQEBAQEBAQEBAQEJBNcgswAHpd
+EQgkyJo2AAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 -102 -1)">
+			</image>
+		</g>
+	</g>
+	<g>
+		<ellipse class="st3" cx="265" cy="265" rx="203.11" ry="249.76"/>
+	</g>
+	<g>
+		<ellipse class="st4" cx="265" cy="265" rx="131.65" ry="161.89"/>
+	</g>
+	<g>
+		<polygon class="st5" points="302.05,337.65 228.56,337.65 227.61,192.35 302.39,192.35 		"/>
+		<line class="st6" x1="302.39" y1="337.65" x2="228.44" y2="337.65"/>
+		<line class="st6" x1="238.5" y1="322.72" x2="292.33" y2="322.72"/>
+		<line class="st6" x1="292.33" y1="337.65" x2="292.33" y2="315.15"/>
+		<line class="st6" x1="238.5" y1="337.65" x2="238.5" y2="315.15"/>
+		<line class="st6" x1="302.39" y1="214.85" x2="228.44" y2="214.85"/>
+		<line class="st6" x1="238.5" y1="199.93" x2="292.33" y2="199.93"/>
+		<line class="st6" x1="292.33" y1="214.85" x2="292.33" y2="192.35"/>
+		<line class="st6" x1="238.5" y1="214.85" x2="238.5" y2="192.35"/>
+	</g>
+</g>
+</svg>