diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index 74909d5..0668c6b 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -1,7 +1,7 @@ -
+

# Discover

diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index 2ea9630..70a5512 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -1,9 +1,49 @@ - - - live - - - +
+

+ Matches +

+ +

+ Live / Next Match +

+
+ + +
+ T20 Qualifiers +

Kings XI Punjab v/s Mumbai Indians

+

Sehwag, KL Rahul

+

Pollard

+ +
+
+
Kings XI Punjab
+
179/9 (19.3)
+
+ +
+
Mumbai Indians
+
10/2 (5.5)
+
+
+
+ +
    +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • +
diff --git a/src/app/live/live.page.scss b/src/app/live/live.page.scss index e69de29..79547ae 100644 --- a/src/app/live/live.page.scss +++ b/src/app/live/live.page.scss @@ -0,0 +1,181 @@ +$dark-blue-shade1: #24367c; +$dark-blue-shade2: #263982; +$green: #01b868; +$pink: #d73e53; + +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: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2); + } + + @keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } +} + +.heading-holder { + margin-bottom: 2.7rem; + padding: 0px 7%; + + .main-header { + font-size: 2.3rem; + font-weight: 700; + letter-spacing: 1px; + margin: 5% 0%; + color: white; + } + + p { + color: white; + font-size: 1.2rem; + font-weight: 500; + } +} + +.match-card { + width: 86%; + margin: 0 auto; + border-radius: 10px; + padding: 15px 5%; + overflow: visible; + position: relative; + background: linear-gradient(45deg, $pink 50%, $dark-blue-shade1); + + .format { + background-color: $green; + border-radius: 5px; + padding: 7px; + color: white; + font-size: 0.9rem; + font-weight: 500; + letter-spacing: 0.5px; + position: absolute; + left: 10%; + top: -12px; + } + + header h4 { + color: white; + font-size: 1.3rem; + font-weight: 700; + margin: 15px 0 10px; + line-height: 1.5; + } + + p { + color: white; + line-height: 1.5; + margin: 10px 0; + font-size: 1rem; + font-weight: 500; + display: flex; + align-items: center; + justify-content: flex-start; + + ion-icon { + margin-right: 10px; + font-size: 1.2rem; + } + } + + .score-card { + display: flex; + width: 100%; + align-items: flex-start; + + .team { + width: 50%; + color: white; + padding: 7px; + } + + header { + display: flex; + width: 100%; + justify-content: flex-start; + align-items: center; + + img { + width: 40px; + height: 40px; + margin-right: 5px; + } + + h5 { + color: white; + font-size: 0.8rem; + line-height: 1.5; + font-weight: 500; + margin: 0; + } + } + + .score { + display: flex; + justify-content: center; + width: 100%; + font-size: 1.8rem; + align-items: center; + font-weight: 700; + margin-top: 5px; + + span { + font-size: 0.8rem; + margin-left: 10px; + margin-top: 5px; + } + } + } +} + +.statistical-pages { + list-style: none; + padding: 0; + width: 86%; + margin: 0 auto; + + li { + display: flex; + width: 100%; + background: linear-gradient(90deg, darken($dark-blue-shade2, 10%) 50%, $dark-blue-shade2); + margin: 30px auto; + border-radius: 10px; + padding: 0px 15px; + justify-content: space-between; + height: 50px; + align-items: center; + + label { + font-size: 1rem; + color: white; + font-weight: 500; + letter-spacing: 0.5px; + opacity: 0.9; + } + + button { + border-radius: 50%; + background-color: $green; + height: 30px; + width: 30px; + font-size: 24px; + color: white; + } + } +} \ No newline at end of file diff --git a/src/app/live/live.page.ts b/src/app/live/live.page.ts index d0065ca..618cff2 100644 --- a/src/app/live/live.page.ts +++ b/src/app/live/live.page.ts @@ -1,15 +1,15 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-live', - templateUrl: './live.page.html', - styleUrls: ['./live.page.scss'], + selector: 'app-live', + templateUrl: './live.page.html', + styleUrls: ['./live.page.scss'], }) export class LivePage implements OnInit { - constructor() { } + constructor() { } - ngOnInit() { - } + ngOnInit() { + } } diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html index 8d48d98..8ead8cc 100644 --- a/src/app/tabs/tabs.page.html +++ b/src/app/tabs/tabs.page.html @@ -1,5 +1,5 @@ - - + + diff --git a/src/app/tabs/tabs.page.scss b/src/app/tabs/tabs.page.scss index db573a1..babbbbb 100644 --- a/src/app/tabs/tabs.page.scss +++ b/src/app/tabs/tabs.page.scss @@ -3,10 +3,18 @@ ion-tab-bar { --border: none; margin-top: -1px; box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.5); + transition: var(--background) 0.3s; + --color: var(--light-grey); + --color-selected: var(--brand-black); + + &.live { + --background: #24367c; + --color: white; + --color-selected: #01b868; + } ion-tab-button { ion-icon { - color: var(--light-grey); font-size: 20px; &:nth-child(1) { @@ -20,8 +28,6 @@ ion-tab-bar { &.tab-selected { ion-icon { - color: var(--brand-black); - &:nth-child(2) { display: block; } @@ -37,30 +43,7 @@ ion-tab-bar { font-size: 30px; border-radius: 50%; overflow: hidden; - // animation: rippleButton 3s infinite; } } } - - @keyframes rippleButton { - 0% { - box-shadow: none - } - - 25% { - box-shadow: 0px 0px 10px 5px #00ee85; - } - - 50% { - box-shadow: none - } - - 75% { - box-shadow: 0px 0px 10px 5px #00ee85; - } - - 100% { - box-shadow: none - } - } } \ No newline at end of file diff --git a/src/app/tabs/tabs.page.ts b/src/app/tabs/tabs.page.ts index 7d64f97..2d4e10c 100644 --- a/src/app/tabs/tabs.page.ts +++ b/src/app/tabs/tabs.page.ts @@ -1,12 +1,19 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { IonTabs } from '@ionic/angular'; @Component({ - selector: 'app-tabs', - templateUrl: 'tabs.page.html', - styleUrls: ['tabs.page.scss'] + selector: 'app-tabs', + templateUrl: 'tabs.page.html', + styleUrls: ['tabs.page.scss'] }) export class TabsPage { + @ViewChild('tabs', { static: false }) tabs: IonTabs; + selectedTab: string; + + constructor() {} - constructor() {} + setCurrentTab() { + this.selectedTab = this.tabs.getSelected(); + } } diff --git a/src/assets/icons/helmet.svg b/src/assets/icons/helmet.svg new file mode 100644 index 0000000..da2235d --- /dev/null +++ b/src/assets/icons/helmet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logos/mi.svg b/src/assets/logos/mi.svg new file mode 100644 index 0000000..3e798ee --- /dev/null +++ b/src/assets/logos/mi.svg @@ -0,0 +1,334 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +