diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3dfab28..8ba9347 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,8 +2,8 @@ import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ - { path: '', redirectTo: 'home', pathMatch: 'full' }, - { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)}, + { path: '', redirectTo: 'onboarding', pathMatch: 'full' }, + { path: 'onboarding', loadChildren: './onboarding/onboarding.module#OnboardingPageModule' }, ]; @NgModule({ diff --git a/src/app/onboarding/onboarding.module.ts b/src/app/onboarding/onboarding.module.ts new file mode 100644 index 0000000..f93a97b --- /dev/null +++ b/src/app/onboarding/onboarding.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { Routes, RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { OnboardingPage } from './onboarding.page'; + +const routes: Routes = [ + { + path: '', + component: OnboardingPage + } +]; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + RouterModule.forChild(routes) + ], + declarations: [OnboardingPage] +}) +export class OnboardingPageModule {} diff --git a/src/app/onboarding/onboarding.page.html b/src/app/onboarding/onboarding.page.html new file mode 100644 index 0000000..5c1466b --- /dev/null +++ b/src/app/onboarding/onboarding.page.html @@ -0,0 +1,196 @@ + + + + + +
+ Welcome to
the Mall Application +
+

+ The best place to find the Malls, Food Centers, Shops and Parking Places! +

+
+ +
+ + Get Started + + + + + + + + + + +
+ Do you want to turn
on notification? +
+
+ +
+ + + + Malls around + + + + + Attractive Offers + + + + + Personalized Reminders + + + + Continue + + + + + + + + + + +
+ Enter your phone number
to verify your account +
+ +
+ + +
+ + + Continue + + + + + + + + +
+ We sent you a code to
verify your number +
+ +
+ + + + +
+ + + + + Continue + + + + + + + + + +
+ Now let's set you
password +
+ +
+ + + +
+ + + +
+ 8 + Characters + + + +
+ Atleast 1 Uppercase + + + +
+ Atleast 1 Symbol + + + + + Continue + + + + + + + + + +
+ +
+
+ Enable Fingerprint +
+

+ If you enable touch ID, you don't need to enter your password when you login. +

+ + Continue + + + + + + + +
+ You are ready to go! +
+

+ Thanks for taking your time to create account with us. + Now this is the fun part, let's explore the app. +

+ + Get Started + + + + diff --git a/src/app/onboarding/onboarding.page.scss b/src/app/onboarding/onboarding.page.scss new file mode 100644 index 0000000..2da66d0 --- /dev/null +++ b/src/app/onboarding/onboarding.page.scss @@ -0,0 +1,296 @@ +ion-slides { + height: 100vh; +} + +ion-slide { + height: 100%; + overflow-y: auto; + display: block; + background-color: var(--background-blue); + position: relative; + + .back-button { + position: absolute; + left: 10px; + top: 25px; + font-size: 13px; + color: black; + margin: 0; + --box-shadow: none; + } + + .logo { + display: block; + margin: 30px auto; + width: 50px; + img { + width: 100%; + height: 100%; + } + } + + header { + font-size: 18px; + margin: 0 auto; + text-align: center; + } + + .next-button { + --background: var(--brand-voilet); + text-transform: none; + width: 85%; + margin: 0 auto 20px; + font-size: 12px; + height: 42px; + letter-spacing: 0; + font-weight: 400; + } + + .signin-description { + font-size: 11px; + color: var(--brand-grey); + line-height: 1.5; + width: 70%; + text-align: center; + margin: 0 auto 20px; + + a { + color: var(--brand-voilet); + font-family: 'M PLUS Rounded 1c'; + font-weight: bold; + } + } +} + +.page1 { + .description { + font-size: 11px; + color: var(--brand-grey); + line-height: 1.5; + width: 70%; + margin: 10px auto 30px; + text-align: center; + } + + .onboard-image { + display: block; + width: 100%; + + img { + width: 100%; + object-fit: contain; + height: 100%; + } + } +} + +.page2 { + .onboard-image { + display: block; + width: 75%; + margin: 20px auto 0; + + img { + width: 100%; + object-fit: contain; + height: 100%; + } + } + + ion-list { + background: transparent; + margin: 0 auto; + + ion-item { + --background: transparent; + font-size: 12px; + color: var(--brand-black); + --padding-start: 15%; + --padding-end: 15%; + border-bottom: 1px solid #efefef; + + &:last-child { + border-bottom: 0; + } + + ion-icon { + color: var(--brand-grey); + font-size: 10px; + margin-right: 15px; + } + } + } +} + +.page3 { + .input-holder { + display: flex; + width: 85%; + margin: 30px auto calc(100vh - 300px); + background-color: #efefef; + justify-content: space-between; + align-items: center; + box-shadow: 0px 0px 5px var(--brand-grey); + border-radius: 5px; + overflow: hidden; + + img { + width: 20px; + margin: 0 15px; + } + + input { + flex-grow: 1; + height: 50px; + font-size: 14px; + border: 0; + padding: 0 20px; + outline: none; + letter-spacing: 1px; + } + } +} + +.page4 { + .input-holder { + display: flex; + width: 85%; + margin: 30px auto; + justify-content: space-between; + align-items: center; + + input { + box-shadow: 0px 0px 5px var(--brand-grey); + height: 50px; + font-size: 14px; + border-radius: 5px; + overflow: hidden; + border: 0; + text-align: center; + outline: none; + width: 20%; + } + } + + .signin-description { + margin-bottom: calc(100vh - 345px); + } +} + +.page5 { + .input-holder { + display: flex; + width: 85%; + margin: 30px auto; + background-color: white; + justify-content: space-between; + align-items: center; + box-shadow: 0px 0px 5px var(--brand-grey); + border-radius: 5px; + overflow: hidden; + + ion-icon { + font-size: 20px; + margin: 0 15px; + color: var(--brand-voilet); + } + + input { + flex-grow: 1; + height: 50px; + font-size: 14px; + border: 0; + padding: 0 20px; + outline: none; + letter-spacing: 1px; + } + } + + ion-list { + background: transparent; + margin: 0 auto calc(100vh - 500px); + + ion-item { + --background: transparent; + font-size: 12px; + color: var(--brand-black); + --padding-start: 15%; + --padding-end: 15%; + border-bottom: 1px solid #efefef; + + &:last-child { + border-bottom: 0; + } + + .check-ball { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: var(--brand-grey); + margin-right: 15px; + } + + &.active { + .check-ball { + background-color: var(--brand-voilet); + } + } + } + } +} + +.page6 { + .description { + font-size: 11px; + color: var(--brand-grey); + line-height: 1.5; + width: 70%; + margin: 10px auto calc(100vh - 400px); + text-align: center; + } + + .icon-holder { + text-align: center; + font-size: 5rem; + color: var(--brand-voilet); + margin: 70px auto 0; + } +} + +.page7 { + background-image: url('../../assets/custom/background.svg'); + background-size: cover; + background-repeat: no-repeat; + + .logo { + background-color: white; + width: 75px; + height: 75px; + border-radius: 50%; + overflow: hidden; + padding: 10px; + margin: 100px auto 30px; + + img { + object-fit: contain; + } + } + + header { + color: white; + } + + .description { + font-size: 11px; + color: white; + line-height: 1.5; + width: 70%; + margin: 10px auto calc(100vh - 350px); + text-align: center; + } + + .next-button { + --color: var(--brand-voilet); + --background: white; + } +} diff --git a/src/app/onboarding/onboarding.page.spec.ts b/src/app/onboarding/onboarding.page.spec.ts new file mode 100644 index 0000000..eea781b --- /dev/null +++ b/src/app/onboarding/onboarding.page.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OnboardingPage } from './onboarding.page'; + +describe('OnboardingPage', () => { + let component: OnboardingPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OnboardingPage ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OnboardingPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/onboarding/onboarding.page.ts b/src/app/onboarding/onboarding.page.ts new file mode 100644 index 0000000..9998b93 --- /dev/null +++ b/src/app/onboarding/onboarding.page.ts @@ -0,0 +1,67 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-onboarding', + templateUrl: './onboarding.page.html', + styleUrls: ['./onboarding.page.scss'], +}) +export class OnboardingPage implements OnInit { + slideOpts = {}; + timer: number = 10; + timer_interval: any; + credentials = { + phone: '', + password: '' + } + show_password = false; + has_upper = false; + has_special = false; + + constructor() { } + + ngOnInit() { + this.slideOpts = { + initialSlide: 0, + allowTouchMove: false + } + + this.timer_interval = setInterval(() => { + this.timer--; + if (this.timer === 0) { + clearInterval(this.timer_interval); + } + }, 1000); + } + + jumpPointer(i) { + // document.querySelectorAll('.page4 .input-holder input')[i].focus(); + } + + padBefore(str) { + return str.toString().padStart(2, '0'); + } + + checkPassword() { + let specials = /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g; + if (this.credentials.password.search(/[A-Z]/) < 0) { + this.has_upper = false; + } else { + this.has_upper = true; + } + + if (this.credentials.password.match(specials)) { + this.has_special = true; + } else { + this.has_special = false; + } + } + + nextPage() { + document.querySelector('ion-slides').slideNext(400); + } + + previousPage() { + document.querySelector('ion-slides').slidePrev(400); + } + +} diff --git a/src/assets/custom/background.svg b/src/assets/custom/background.svg new file mode 100644 index 0000000..d69b05e --- /dev/null +++ b/src/assets/custom/background.svg @@ -0,0 +1,17 @@ + + + + + + + + diff --git a/src/assets/custom/fingerprint.svg b/src/assets/custom/fingerprint.svg new file mode 100644 index 0000000..e5dc090 --- /dev/null +++ b/src/assets/custom/fingerprint.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom/india.svg b/src/assets/custom/india.svg new file mode 100644 index 0000000..30b716f --- /dev/null +++ b/src/assets/custom/india.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom/left-arrow.svg b/src/assets/custom/left-arrow.svg new file mode 100644 index 0000000..5aa5406 --- /dev/null +++ b/src/assets/custom/left-arrow.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom/logo.svg b/src/assets/custom/logo.svg new file mode 100644 index 0000000..8eb210e --- /dev/null +++ b/src/assets/custom/logo.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + diff --git a/src/assets/custom/onboarding-2.svg b/src/assets/custom/onboarding-2.svg new file mode 100644 index 0000000..7f8194b --- /dev/null +++ b/src/assets/custom/onboarding-2.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Notification + + + You have a notification + + diff --git a/src/assets/custom/onboarding.svg b/src/assets/custom/onboarding.svg new file mode 100644 index 0000000..f211f70 --- /dev/null +++ b/src/assets/custom/onboarding.svg @@ -0,0 +1,1038 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom/tick.svg b/src/assets/custom/tick.svg new file mode 100644 index 0000000..4467e4a --- /dev/null +++ b/src/assets/custom/tick.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/global.scss b/src/global.scss index d854de8..373d94e 100644 --- a/src/global.scss +++ b/src/global.scss @@ -24,3 +24,20 @@ @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/css?family=Roboto:300,400,500,700&display=swap'); +@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400&display=swap'); + +ion-button, button, a, p, div, input { + font-family: 'Roboto', sans-serif; + text-transform: none; +} + +figure { + margin: 0; +} + +header, h1, h2, h3, h4, h5 { + font-family: 'M PLUS Rounded 1c', sans-serif; +} diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 4b39b39..2e7903c 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -74,4 +74,9 @@ --ion-color-light-contrast-rgb: 0, 0, 0; --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; + + --brand-voilet: #8173e6; + --background-blue: #f5f7fa; + --brand-grey: #9a9a9a; + --brand-black: #1b1d1e; }