diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 48fc28d..1e14829 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -5,6 +5,18 @@ const routes: Routes = [ { path: '', loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) + }, + { + path: 'home', + loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) + }, + { + path: 'live', + loadChildren: () => import('./live/live.module').then( m => m.LivePageModule) + }, + { + path: 'more', + loadChildren: () => import('./more/more.module').then( m => m.MorePageModule) } ]; @NgModule({ diff --git a/src/app/explore-container/explore-container.component.html b/src/app/explore-container/explore-container.component.html deleted file mode 100644 index bbadb7d..0000000 --- a/src/app/explore-container/explore-container.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- {{ name }} -

Explore UI Components

-
\ No newline at end of file diff --git a/src/app/explore-container/explore-container.component.scss b/src/app/explore-container/explore-container.component.scss deleted file mode 100644 index 8993e7c..0000000 --- a/src/app/explore-container/explore-container.component.scss +++ /dev/null @@ -1,27 +0,0 @@ -#container { - text-align: center; - - position: absolute; - left: 0; - right: 0; - top: 50%; - transform: translateY(-50%); -} - -#container strong { - font-size: 20px; - line-height: 26px; -} - -#container p { - font-size: 16px; - line-height: 22px; - - color: #8c8c8c; - - margin: 0; -} - -#container a { - text-decoration: none; -} \ No newline at end of file diff --git a/src/app/explore-container/explore-container.component.ts b/src/app/explore-container/explore-container.component.ts deleted file mode 100644 index 60554cb..0000000 --- a/src/app/explore-container/explore-container.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; - -@Component({ - selector: 'app-explore-container', - templateUrl: './explore-container.component.html', - styleUrls: ['./explore-container.component.scss'], -}) -export class ExploreContainerComponent implements OnInit { - @Input() name: string; - - constructor() { } - - ngOnInit() {} - -} diff --git a/src/app/explore-container/explore-container.module.ts b/src/app/explore-container/explore-container.module.ts deleted file mode 100644 index 4376296..0000000 --- a/src/app/explore-container/explore-container.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { IonicModule } from '@ionic/angular'; - -import { ExploreContainerComponent } from './explore-container.component'; - -@NgModule({ - imports: [ CommonModule, FormsModule, IonicModule], - declarations: [ExploreContainerComponent], - exports: [ExploreContainerComponent] -}) -export class ExploreContainerComponentModule {} diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts new file mode 100644 index 0000000..720fb1c --- /dev/null +++ b/src/app/home/home-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { HomePage } from './home.page'; + +const routes: Routes = [ + { + path: '', + component: HomePage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class HomePageRoutingModule {} diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts new file mode 100644 index 0000000..aca3da5 --- /dev/null +++ b/src/app/home/home.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 { HomePageRoutingModule } from './home-routing.module'; + +import { HomePage } from './home.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + HomePageRoutingModule + ], + declarations: [HomePage] +}) +export class HomePageModule {} diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html new file mode 100644 index 0000000..504ec4c --- /dev/null +++ b/src/app/home/home.page.html @@ -0,0 +1,23 @@ + +

Home

+ +
+ + +
+ + + +

Slide 1

+ + +

Slide 2

+ + +

Slide 3

+ + + + diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss new file mode 100644 index 0000000..ca96378 --- /dev/null +++ b/src/app/home/home.page.scss @@ -0,0 +1,47 @@ +ion-content { + --background: var(--brand-black); +} + +.main-header { + background: -webkit-linear-gradient(180deg, rgba(var(--brand-red-rgb), 0.6) 50%, rgba(var(--brand-red-rgb), 1)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 40px; + font-weight: 700; + letter-spacing: 1px; + padding: 0px 30px; + margin: 30px 0px; +} + +.segments { + display: flex; + align-items: stretch; + width: 100%; + padding: 0px 30px; + + button { + background-color: transparent; + color: white; + font-size: 18px; + font-weight: 400; + margin-right: 15px; + position: relative; + opacity: 0.5; + + &.active { + font-weight: 500; + opacity: 1; + + &::before { + content: ''; + width: 8px; + height: 8px; + border-radius: 50%; + position: absolute; + bottom: -18px; + left: calc(50% - 4px); + background-color: var(--brand-red); + } + } + } +} \ No newline at end of file diff --git a/src/app/explore-container/explore-container.component.spec.ts b/src/app/home/home.page.spec.ts similarity index 54% rename from src/app/explore-container/explore-container.component.spec.ts rename to src/app/home/home.page.spec.ts index 9f56ba6..68caa9a 100644 --- a/src/app/explore-container/explore-container.component.spec.ts +++ b/src/app/home/home.page.spec.ts @@ -1,19 +1,19 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { IonicModule } from '@ionic/angular'; -import { ExploreContainerComponent } from './explore-container.component'; +import { HomePage } from './home.page'; -describe('ExploreContainerComponent', () => { - let component: ExploreContainerComponent; - let fixture: ComponentFixture; +describe('HomePage', () => { + let component: HomePage; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ExploreContainerComponent ], + declarations: [ HomePage ], imports: [IonicModule.forRoot()] }).compileComponents(); - fixture = TestBed.createComponent(ExploreContainerComponent); + fixture = TestBed.createComponent(HomePage); component = fixture.componentInstance; fixture.detectChanges(); })); diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts new file mode 100644 index 0000000..afaa3bb --- /dev/null +++ b/src/app/home/home.page.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.page.html', + styleUrls: ['./home.page.scss'], +}) +export class HomePage implements OnInit { + selectedTab: string = 'news'; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/live/live-routing.module.ts b/src/app/live/live-routing.module.ts new file mode 100644 index 0000000..a208ca9 --- /dev/null +++ b/src/app/live/live-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { LivePage } from './live.page'; + +const routes: Routes = [ + { + path: '', + component: LivePage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class LivePageRoutingModule {} diff --git a/src/app/live/live.module.ts b/src/app/live/live.module.ts new file mode 100644 index 0000000..b6eb6a2 --- /dev/null +++ b/src/app/live/live.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 { LivePageRoutingModule } from './live-routing.module'; + +import { LivePage } from './live.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + LivePageRoutingModule + ], + declarations: [LivePage] +}) +export class LivePageModule {} diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html new file mode 100644 index 0000000..2ea9630 --- /dev/null +++ b/src/app/live/live.page.html @@ -0,0 +1,9 @@ + + + live + + + + + + diff --git a/src/app/tab1/tab1.page.scss b/src/app/live/live.page.scss similarity index 100% rename from src/app/tab1/tab1.page.scss rename to src/app/live/live.page.scss diff --git a/src/app/live/live.page.spec.ts b/src/app/live/live.page.spec.ts new file mode 100644 index 0000000..aa92dad --- /dev/null +++ b/src/app/live/live.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { LivePage } from './live.page'; + +describe('LivePage', () => { + let component: LivePage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LivePage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(LivePage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/live/live.page.ts b/src/app/live/live.page.ts new file mode 100644 index 0000000..d0065ca --- /dev/null +++ b/src/app/live/live.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-live', + templateUrl: './live.page.html', + styleUrls: ['./live.page.scss'], +}) +export class LivePage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/more/more-routing.module.ts b/src/app/more/more-routing.module.ts new file mode 100644 index 0000000..61d5434 --- /dev/null +++ b/src/app/more/more-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { MorePage } from './more.page'; + +const routes: Routes = [ + { + path: '', + component: MorePage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class MorePageRoutingModule {} diff --git a/src/app/more/more.module.ts b/src/app/more/more.module.ts new file mode 100644 index 0000000..380cbfa --- /dev/null +++ b/src/app/more/more.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 { MorePageRoutingModule } from './more-routing.module'; + +import { MorePage } from './more.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + MorePageRoutingModule + ], + declarations: [MorePage] +}) +export class MorePageModule {} diff --git a/src/app/more/more.page.html b/src/app/more/more.page.html new file mode 100644 index 0000000..e525c86 --- /dev/null +++ b/src/app/more/more.page.html @@ -0,0 +1,9 @@ + + + more + + + + + + diff --git a/src/app/tab2/tab2.page.scss b/src/app/more/more.page.scss similarity index 100% rename from src/app/tab2/tab2.page.scss rename to src/app/more/more.page.scss diff --git a/src/app/more/more.page.spec.ts b/src/app/more/more.page.spec.ts new file mode 100644 index 0000000..71bcf5d --- /dev/null +++ b/src/app/more/more.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { MorePage } from './more.page'; + +describe('MorePage', () => { + let component: MorePage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MorePage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(MorePage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/more/more.page.ts b/src/app/more/more.page.ts new file mode 100644 index 0000000..719bff8 --- /dev/null +++ b/src/app/more/more.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-more', + templateUrl: './more.page.html', + styleUrls: ['./more.page.scss'], +}) +export class MorePage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/tab1/tab1-routing.module.ts b/src/app/tab1/tab1-routing.module.ts deleted file mode 100644 index 8c1cf5b..0000000 --- a/src/app/tab1/tab1-routing.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { Tab1Page } from './tab1.page'; - -const routes: Routes = [ - { - path: '', - component: Tab1Page, - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class Tab1PageRoutingModule {} diff --git a/src/app/tab1/tab1.module.ts b/src/app/tab1/tab1.module.ts deleted file mode 100644 index 135eeae..0000000 --- a/src/app/tab1/tab1.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { IonicModule } from '@ionic/angular'; -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { Tab1Page } from './tab1.page'; -import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; - -import { Tab1PageRoutingModule } from './tab1-routing.module'; - -@NgModule({ - imports: [ - IonicModule, - CommonModule, - FormsModule, - ExploreContainerComponentModule, - Tab1PageRoutingModule - ], - declarations: [Tab1Page] -}) -export class Tab1PageModule {} diff --git a/src/app/tab1/tab1.page.html b/src/app/tab1/tab1.page.html deleted file mode 100644 index 22e11e4..0000000 --- a/src/app/tab1/tab1.page.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - Tab 1 - - - - - - - - Tab 1 - - - - - diff --git a/src/app/tab1/tab1.page.spec.ts b/src/app/tab1/tab1.page.spec.ts deleted file mode 100644 index 0e8988d..0000000 --- a/src/app/tab1/tab1.page.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { IonicModule } from '@ionic/angular'; -import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; - -import { Tab1Page } from './tab1.page'; - -describe('Tab1Page', () => { - let component: Tab1Page; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [Tab1Page], - imports: [IonicModule.forRoot(), ExploreContainerComponentModule] - }).compileComponents(); - - fixture = TestBed.createComponent(Tab1Page); - component = fixture.componentInstance; - fixture.detectChanges(); - })); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/tab1/tab1.page.ts b/src/app/tab1/tab1.page.ts deleted file mode 100644 index 3deefc3..0000000 --- a/src/app/tab1/tab1.page.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-tab1', - templateUrl: 'tab1.page.html', - styleUrls: ['tab1.page.scss'] -}) -export class Tab1Page { - - constructor() {} - -} diff --git a/src/app/tab2/tab2-routing.module.ts b/src/app/tab2/tab2-routing.module.ts deleted file mode 100644 index e96ec09..0000000 --- a/src/app/tab2/tab2-routing.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { Tab2Page } from './tab2.page'; - -const routes: Routes = [ - { - path: '', - component: Tab2Page, - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class Tab2PageRoutingModule {} diff --git a/src/app/tab2/tab2.module.ts b/src/app/tab2/tab2.module.ts deleted file mode 100644 index 153d07f..0000000 --- a/src/app/tab2/tab2.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { IonicModule } from '@ionic/angular'; -import { RouterModule } from '@angular/router'; -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { Tab2Page } from './tab2.page'; -import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; - -import { Tab2PageRoutingModule } from './tab2-routing.module'; - -@NgModule({ - imports: [ - IonicModule, - CommonModule, - FormsModule, - ExploreContainerComponentModule, - Tab2PageRoutingModule - ], - declarations: [Tab2Page] -}) -export class Tab2PageModule {} diff --git a/src/app/tab2/tab2.page.html b/src/app/tab2/tab2.page.html deleted file mode 100644 index 38b153e..0000000 --- a/src/app/tab2/tab2.page.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - Tab 2 - - - - - - - - Tab 2 - - - - - diff --git a/src/app/tab2/tab2.page.spec.ts b/src/app/tab2/tab2.page.spec.ts deleted file mode 100644 index 9895166..0000000 --- a/src/app/tab2/tab2.page.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { IonicModule } from '@ionic/angular'; -import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; - -import { Tab2Page } from './tab2.page'; - -describe('Tab2Page', () => { - let component: Tab2Page; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [Tab2Page], - imports: [IonicModule.forRoot(), ExploreContainerComponentModule] - }).compileComponents(); - - fixture = TestBed.createComponent(Tab2Page); - component = fixture.componentInstance; - fixture.detectChanges(); - })); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/tab2/tab2.page.ts b/src/app/tab2/tab2.page.ts deleted file mode 100644 index e14cad4..0000000 --- a/src/app/tab2/tab2.page.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-tab2', - templateUrl: 'tab2.page.html', - styleUrls: ['tab2.page.scss'] -}) -export class Tab2Page { - - constructor() {} - -} diff --git a/src/app/tab3/tab3-routing.module.ts b/src/app/tab3/tab3-routing.module.ts deleted file mode 100644 index 5d6abde..0000000 --- a/src/app/tab3/tab3-routing.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { Tab3Page } from './tab3.page'; - -const routes: Routes = [ - { - path: '', - component: Tab3Page, - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class Tab3PageRoutingModule {} diff --git a/src/app/tab3/tab3.module.ts b/src/app/tab3/tab3.module.ts deleted file mode 100644 index c45283d..0000000 --- a/src/app/tab3/tab3.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { IonicModule } from '@ionic/angular'; -import { RouterModule } from '@angular/router'; -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { Tab3Page } from './tab3.page'; -import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; - -import { Tab3PageRoutingModule } from './tab3-routing.module'; - -@NgModule({ - imports: [ - IonicModule, - CommonModule, - FormsModule, - ExploreContainerComponentModule, - RouterModule.forChild([{ path: '', component: Tab3Page }]), - Tab3PageRoutingModule, - ], - declarations: [Tab3Page] -}) -export class Tab3PageModule {} diff --git a/src/app/tab3/tab3.page.html b/src/app/tab3/tab3.page.html deleted file mode 100644 index 222333d..0000000 --- a/src/app/tab3/tab3.page.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - Tab 3 - - - - - - - - Tab 3 - - - - - diff --git a/src/app/tab3/tab3.page.scss b/src/app/tab3/tab3.page.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/tab3/tab3.page.spec.ts b/src/app/tab3/tab3.page.spec.ts deleted file mode 100644 index 1ff768f..0000000 --- a/src/app/tab3/tab3.page.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { IonicModule } from '@ionic/angular'; -import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; - -import { Tab3Page } from './tab3.page'; - -describe('Tab3Page', () => { - let component: Tab3Page; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [Tab3Page], - imports: [IonicModule.forRoot(), ExploreContainerComponentModule] - }).compileComponents(); - - fixture = TestBed.createComponent(Tab3Page); - component = fixture.componentInstance; - fixture.detectChanges(); - })); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/tab3/tab3.page.ts b/src/app/tab3/tab3.page.ts deleted file mode 100644 index 9ed0dae..0000000 --- a/src/app/tab3/tab3.page.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-tab3', - templateUrl: 'tab3.page.html', - styleUrls: ['tab3.page.scss'] -}) -export class Tab3Page { - - constructor() {} - -} diff --git a/src/app/tabs/tabs-routing.module.ts b/src/app/tabs/tabs-routing.module.ts index 468f849..15d747f 100644 --- a/src/app/tabs/tabs-routing.module.ts +++ b/src/app/tabs/tabs-routing.module.ts @@ -3,34 +3,29 @@ import { RouterModule, Routes } from '@angular/router'; import { TabsPage } from './tabs.page'; const routes: Routes = [ - { - path: 'tabs', - component: TabsPage, - children: [ - { - path: 'tab1', - loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule) - }, - { - path: 'tab2', - loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule) - }, - { - path: 'tab3', - loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule) - }, - { + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'home', + loadChildren: () => import('../home/home.module').then(m => m.HomePageModule) + }, + { + path: 'live', + loadChildren: () => import('../live/live.module').then(m => m.LivePageModule) + }, + { + path: 'more', + loadChildren: () => import('../more/more.module').then(m => m.MorePageModule) + } + ] + }, + { path: '', - redirectTo: '/tabs/tab1', + redirectTo: '/tabs/home', pathMatch: 'full' - } - ] - }, - { - path: '', - redirectTo: '/tabs/tab1', - pathMatch: 'full' - } + } ]; @NgModule({ diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html index 0995c40..8d48d98 100644 --- a/src/app/tabs/tabs.page.html +++ b/src/app/tabs/tabs.page.html @@ -1,20 +1,18 @@ + + + + + - - - - Tab 1 - - - - - Tab 2 - - - - - Tab 3 - - + + + + + + + + + diff --git a/src/app/tabs/tabs.page.scss b/src/app/tabs/tabs.page.scss index 8b13789..a66a502 100644 --- a/src/app/tabs/tabs.page.scss +++ b/src/app/tabs/tabs.page.scss @@ -1 +1,63 @@ +ion-tab-bar { + --background: var(--brand-black); + --border: none; + ion-tab-button { + ion-icon { + color: white; + + &:nth-child(1) { + display: block; + } + + &:nth-child(2) { + display: none; + } + } + + &.tab-selected { + ion-icon { + color: white; + + &:nth-child(2) { + display: block; + } + + &:nth-child(1) { + display: none; + } + } + } + + &:nth-child(2) { + ion-icon { + font-size: 35px; + 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/assets/home-team/KXIP-lion-white.svg b/src/assets/home-team/KXIP-lion-white.svg new file mode 100644 index 0000000..2a9a077 --- /dev/null +++ b/src/assets/home-team/KXIP-lion-white.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + diff --git a/src/assets/home-team/KXIP-lion.svg b/src/assets/home-team/KXIP-lion.svg new file mode 100644 index 0000000..4bd8a91 --- /dev/null +++ b/src/assets/home-team/KXIP-lion.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + diff --git a/src/assets/home-team/KXIP.svg b/src/assets/home-team/KXIP.svg new file mode 100644 index 0000000..f0e5e8f --- /dev/null +++ b/src/assets/home-team/KXIP.svg @@ -0,0 +1,762 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/global.scss b/src/global.scss index d854de8..60942b5 100644 --- a/src/global.scss +++ b/src/global.scss @@ -24,3 +24,12 @@ @import "~@ionic/angular/css/text-alignment.css"; @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; + +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); + +* { + font-family: 'Roboto', sans-serif; + outline: none; + text-decoration: none; + letter-spacing: 0.5px; +} \ No newline at end of file diff --git a/src/theme/variables.scss b/src/theme/variables.scss index b910e58..e0ea889 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -74,15 +74,17 @@ --ion-color-light-contrast-rgb: 0, 0, 0; --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; + + // Custom colors + + --brand-black: #272727; + --brand-red: #ED1C24; + --brand-red-rgb: 237, 28, 36; + } -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - body { +body { --ion-color-primary: #428cff; --ion-color-primary-rgb: 66,140,255; --ion-color-primary-contrast: #ffffff; @@ -145,88 +147,4 @@ --ion-color-light-contrast-rgb: 255,255,255; --ion-color-light-shade: #1e2023; --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-toolbar-background: #0d0d0d; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } } \ No newline at end of file