diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index ca2a1d2..9d44276 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -41,6 +41,10 @@ const routes: Routes = [
{
path: 'chat',
loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule)
+ },
+ {
+ path: 'collections',
+ loadChildren: () => import('./collections/collections.module').then( m => m.CollectionsPageModule)
}
];
@NgModule({
diff --git a/src/app/collections/collections-routing.module.ts b/src/app/collections/collections-routing.module.ts
new file mode 100644
index 0000000..010c399
--- /dev/null
+++ b/src/app/collections/collections-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CollectionsPage } from './collections.page';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: CollectionsPage
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class CollectionsPageRoutingModule {}
diff --git a/src/app/collections/collections.module.ts b/src/app/collections/collections.module.ts
new file mode 100644
index 0000000..5057be2
--- /dev/null
+++ b/src/app/collections/collections.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 { CollectionsPageRoutingModule } from './collections-routing.module';
+
+import { CollectionsPage } from './collections.page';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ CollectionsPageRoutingModule
+ ],
+ declarations: [CollectionsPage]
+})
+export class CollectionsPageModule {}
diff --git a/src/app/collections/collections.page.html b/src/app/collections/collections.page.html
new file mode 100644
index 0000000..e1a54eb
--- /dev/null
+++ b/src/app/collections/collections.page.html
@@ -0,0 +1,23 @@
+
+
+
+
+ 
+
+
+
+ ![]()
+
+
+ {{ collection.name }}
+
+ {{ collection.details }}
+
+
+
+
+
+
diff --git a/src/app/collections/collections.page.scss b/src/app/collections/collections.page.scss
new file mode 100644
index 0000000..4b9b299
--- /dev/null
+++ b/src/app/collections/collections.page.scss
@@ -0,0 +1,92 @@
+.collections {
+ height: calc(100vh - 56px);
+ background-image: url('../../assets/collections/museum_background.png');
+ background-position: center;
+ background-size: 100% 100%;
+}
+
+.glass-box {
+ width: 55vw;
+ height: 40vh;
+ position: fixed;
+ left: calc(50vw - (55vw / 2));
+ bottom: 36vh;
+}
+
+ion-slides {
+ width: 100%;
+ height: calc(100vh - 56px);
+
+ ion-slide {
+ height: 100%;
+ display: block;
+ position: relative;
+ width: 100%;
+ opacity: 0;
+
+ &.swiper-slide-active {
+ animation: fadeUp 0.5s forwards;
+ animation-delay: 0.2s;
+ }
+ }
+
+ @keyframes fadeUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0vh);
+ }
+ }
+
+ .box-heading {
+ position: absolute;
+ left: 25vw;
+ width: 50vw;
+ background-color: rgba(white, 0.1);
+ border-radius: 7px;
+ overflow: hidden;
+ padding: 15px;
+ top: 58vh;
+
+ h5 {
+ margin: 0;
+ font-size: 1rem;
+ font-weight: 500;
+ color: rgb(63, 63, 63);
+ }
+
+ p {
+ margin: 0;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ color: rgb(93, 93, 93);
+ }
+ }
+
+ img {
+ position: absolute;
+ left: 40vw;
+ bottom: 49.7vh;
+ object-fit: contain;
+ object-position: bottom;
+
+ &.bat {
+ width: 20.5vw;
+ height: 20.5vh;
+
+ &.inverted {
+ left: 42vw;
+ }
+ }
+
+ &.ball {
+ width: 10vw;
+ height: 10vh;
+ left: 45vw;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/collections/collections.page.spec.ts b/src/app/collections/collections.page.spec.ts
new file mode 100644
index 0000000..e1f3024
--- /dev/null
+++ b/src/app/collections/collections.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CollectionsPage } from './collections.page';
+
+describe('CollectionsPage', () => {
+ let component: CollectionsPage;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CollectionsPage ],
+ imports: [IonicModule.forRoot()]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CollectionsPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ }));
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/collections/collections.page.ts b/src/app/collections/collections.page.ts
new file mode 100644
index 0000000..e58144c
--- /dev/null
+++ b/src/app/collections/collections.page.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-collections',
+ templateUrl: './collections.page.html',
+ styleUrls: ['./collections.page.scss'],
+})
+export class CollectionsPage implements OnInit {
+
+ slideOpts = {
+ slidesPerView: 1,
+ spaceBetween: 0,
+ initialSlide: 0,
+ centeredSlides: true,
+ simulateTouch: false,
+ followFinger: false,
+ loop: true,
+ };
+
+ collections: Array<{
+ name: string,
+ details: string,
+ image: string,
+ type: 'BAT' | 'BALL' | 'INVERTED BAT'
+ }>
+
+ constructor() { }
+
+ ngOnInit() {
+ this.collections = [{
+ name: 'Wooden Bat',
+ details: 'Signed by Sehwag',
+ image: 'assets/collections/bat.png',
+ type: 'BAT'
+ }, {
+ name: 'Leather Ball',
+ details: 'Signed by Sehwag',
+ image: 'assets/collections/ball.png',
+ type: 'BALL'
+ }, {
+ name: 'Golden Bat',
+ details: 'Oracle of IPL award',
+ image: 'assets/collections/golden-bat.png',
+ type: 'INVERTED BAT'
+ }];
+ }
+
+}
diff --git a/src/app/tabs/tabs-routing.module.ts b/src/app/tabs/tabs-routing.module.ts
index 6d586fb..23d7eaa 100644
--- a/src/app/tabs/tabs-routing.module.ts
+++ b/src/app/tabs/tabs-routing.module.ts
@@ -19,13 +19,13 @@ 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)
- },
{
path: 'booking',
loadChildren: () => import('../booking/booking.module').then( m => m.BookingPageModule)
+ },
+ {
+ path: 'collections',
+ loadChildren: () => import('../collections/collections.module').then( m => m.CollectionsPageModule)
}
]
},
diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html
index a045905..cc768e1 100644
--- a/src/app/tabs/tabs.page.html
+++ b/src/app/tabs/tabs.page.html
@@ -15,5 +15,11 @@
+
+
+
+
+
+
diff --git a/src/assets/collections/ball.png b/src/assets/collections/ball.png
new file mode 100644
index 0000000..5d2caa4
Binary files /dev/null and b/src/assets/collections/ball.png differ
diff --git a/src/assets/collections/bat.png b/src/assets/collections/bat.png
new file mode 100644
index 0000000..90711af
Binary files /dev/null and b/src/assets/collections/bat.png differ
diff --git a/src/assets/collections/bg-with-box.png b/src/assets/collections/bg-with-box.png
new file mode 100644
index 0000000..ce67058
Binary files /dev/null and b/src/assets/collections/bg-with-box.png differ
diff --git a/src/assets/collections/glass-box-with-bat.png b/src/assets/collections/glass-box-with-bat.png
new file mode 100644
index 0000000..36371f4
Binary files /dev/null and b/src/assets/collections/glass-box-with-bat.png differ
diff --git a/src/assets/collections/glassbox.png b/src/assets/collections/glassbox.png
new file mode 100644
index 0000000..6d1fb5d
Binary files /dev/null and b/src/assets/collections/glassbox.png differ
diff --git a/src/assets/collections/golden-bat.png b/src/assets/collections/golden-bat.png
new file mode 100644
index 0000000..75ebc7b
Binary files /dev/null and b/src/assets/collections/golden-bat.png differ
diff --git a/src/assets/collections/museum_background.png b/src/assets/collections/museum_background.png
new file mode 100644
index 0000000..23a689d
Binary files /dev/null and b/src/assets/collections/museum_background.png differ