Quellcode durchsuchen

Onboarding flow completed

master
kj1352 vor 6 Jahren
Ursprung
Commit
675d19494e
16 geänderte Dateien mit 2081 neuen und 2 gelöschten Zeilen
  1. +2
    -2
      src/app/app-routing.module.ts
  2. +26
    -0
      src/app/onboarding/onboarding.module.ts
  3. +196
    -0
      src/app/onboarding/onboarding.page.html
  4. +296
    -0
      src/app/onboarding/onboarding.page.scss
  5. +27
    -0
      src/app/onboarding/onboarding.page.spec.ts
  6. +67
    -0
      src/app/onboarding/onboarding.page.ts
  7. +17
    -0
      src/assets/custom/background.svg
  8. +130
    -0
      src/assets/custom/fingerprint.svg
  9. +39
    -0
      src/assets/custom/india.svg
  10. +38
    -0
      src/assets/custom/left-arrow.svg
  11. +27
    -0
      src/assets/custom/logo.svg
  12. +114
    -0
      src/assets/custom/onboarding-2.svg
  13. +1038
    -0
      src/assets/custom/onboarding.svg
  14. +42
    -0
      src/assets/custom/tick.svg
  15. +17
    -0
      src/global.scss
  16. +5
    -0
      src/theme/variables.scss

+ 2
- 2
src/app/app-routing.module.ts Datei anzeigen

@@ -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({


+ 26
- 0
src/app/onboarding/onboarding.module.ts Datei anzeigen

@@ -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 {}

+ 196
- 0
src/app/onboarding/onboarding.page.html Datei anzeigen

@@ -0,0 +1,196 @@
<ion-content>
<ion-slides pager="false" [options]="slideOpts">
<!-- Slide 1 -->
<ion-slide class="page1">
<figure class="logo">
<img src="assets/custom/logo.svg">
</figure>
<header>
Welcome to <br> the Mall Application
</header>
<p class="description">
The best place to find the Malls, Food Centers, Shops and Parking Places!
</p>
<figure class="onboard-image">
<img src="assets/custom/onboarding.svg">
</figure>
<ion-button class="next-button" shape="round" (click)="nextPage()">
Get Started
</ion-button>
<p class="signin-description">
Already have account? <a> Sign in </a>
</p>
</ion-slide>

<!-- Slide 2 -->
<ion-slide class="page2">
<ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
<ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
</ion-button>
<figure class="logo">
<img src="assets/custom/logo.svg">
</figure>
<header>
Do you want to turn <br> on notification?
</header>
<figure class="onboard-image">
<img src="assets/custom/onboarding-2.svg">
</figure>
<ion-list lines="none">
<ion-item>
<ion-icon slot="start" src="assets/custom/tick.svg"></ion-icon>
Malls around
</ion-item>

<ion-item>
<ion-icon slot="start" src="assets/custom/tick.svg"></ion-icon>
Attractive Offers
</ion-item>

<ion-item>
<ion-icon slot="start" src="assets/custom/tick.svg"></ion-icon>
Personalized Reminders
</ion-item>
</ion-list>
<ion-button class="next-button" shape="round" (click)="nextPage()">
Continue
</ion-button>
<p class="signin-description">
<a> Not Now </a>
</p>
</ion-slide>

<!-- Slide 3 -->
<ion-slide class="page3">
<ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
<ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
</ion-button>
<figure class="logo">
<img src="assets/custom/logo.svg">
</figure>
<header>
Enter your phone number <br> to verify your account
</header>

<div class="input-holder">
<img src="assets/custom/india.svg">
<input type="tel" placeholder="Mobile number" [(ngModel)]="credentials.phone">
</div>

<ion-button class="next-button" shape="round" (click)="nextPage()">
Continue
</ion-button>
</ion-slide>

<ion-slide class="page4">
<ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
<ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
</ion-button>
<figure class="logo">
<img src="assets/custom/logo.svg">
</figure>
<header>
We sent you a code to <br> verify your number
</header>

<div class="input-holder">
<input type="tel" maxlength="1" (input)="jumpPointer(1)">
<input type="tel" maxlength="1" (input)="jumpPointer(2)">
<input type="tel" maxlength="1" (input)="jumpPointer(3)">
<input type="tel" maxlength="1">
</div>

<p class="signin-description">
Didn't received OTP <a> Resend in 00:{{ padBefore(timer) }} </a>
</p>

<ion-button class="next-button" shape="round" (click)="nextPage()">
Continue
</ion-button>
</ion-slide>

<!-- Slide 5 -->
<ion-slide class="page5">
<ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
<ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
</ion-button>
<figure class="logo">
<img src="assets/custom/logo.svg">
</figure>
<header>
Now let's set you <br> password
</header>

<div class="input-holder">
<input *ngIf="!show_password" type="password" placeholder="Password"
[(ngModel)]="credentials.password" (input)="checkPassword()">
<input *ngIf="show_password" type="text" placeholder="Password"
[(ngModel)]="credentials.password" (input)="checkPassword()">
<ion-icon name="eye" (click)="show_password = !show_password"></ion-icon>
</div>

<ion-list lines="none">
<ion-item [ngClass]="{'active' : credentials.password.length > 8 }">
<div class="check-ball"></div>
8 + Characters
</ion-item>

<ion-item [ngClass]="{'active' : has_upper }">
<div class="check-ball"></div>
Atleast 1 Uppercase
</ion-item>

<ion-item [ngClass]="{'active' : has_special }">
<div class="check-ball"></div>
Atleast 1 Symbol
</ion-item>
</ion-list>

<ion-button class="next-button" shape="round" (click)="nextPage()">
Continue
</ion-button>
</ion-slide>

<!-- Slide 6 -->
<ion-slide class="page6">
<ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
<ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
</ion-button>
<figure class="logo">
<img src="assets/custom/logo.svg">
</figure>
<div class="icon-holder">
<ion-icon src="assets/custom/fingerprint.svg"></ion-icon>
</div>
<header>
Enable Fingerprint
</header>
<p class="description">
If you enable touch ID, you don't need to enter your password when you login.
</p>
<ion-button class="next-button" shape="round" (click)="nextPage()">
Continue
</ion-button>
<p class="signin-description">
<a> Not Now </a>
</p>
</ion-slide>

<!-- Slide 7 -->
<ion-slide class="page7">
<figure class="logo">
<img src="assets/custom/logo.svg">
</figure>
<header>
You are ready to go!
</header>
<p class="description">
Thanks for taking your time to create account with us.
Now this is the fun part, let's explore the app.
</p>
<ion-button class="next-button" shape="round">
Get Started
</ion-button>
</ion-slide>
</ion-slides>
</ion-content>

+ 296
- 0
src/app/onboarding/onboarding.page.scss Datei anzeigen

@@ -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;
}
}

+ 27
- 0
src/app/onboarding/onboarding.page.spec.ts Datei anzeigen

@@ -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<OnboardingPage>;

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();
});
});

+ 67
- 0
src/app/onboarding/onboarding.page.ts Datei anzeigen

@@ -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);
}

}

+ 17
- 0
src/assets/custom/background.svg Datei anzeigen

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 750 1334" style="enable-background:new 0 0 750 1334;" xml:space="preserve">
<style type="text/css">
.st0{fill:#7250C9;}
.st1{fill:#7D58DC;}
.st2{fill:#684BB9;}
</style>
<rect class="st0" width="750" height="1334"/>
<path class="st1" d="M750,599.22C702.84,571.98,647.8,549.1,585,537C286.16,479.4,39,709.67,0,747.11c0-115.06,0-230.12,0-345.19
c26.88,4.25,73.6,8.48,126.47-5.98c166.64-45.59,192.38-221.61,356.31-314.5C533.11,52.92,617.25,20.47,750,30.33
C750,219.96,750,409.59,750,599.22z"/>
<path class="st2" d="M750,1102.44c-31.64,6.07-81.2,16.7-140.56,34.56c-173.12,52.07-237.59,107.8-384.44,153.33
c-50.79,15.75-126.97,35.09-225,43.67c0-98.26,0-196.52,0-294.78c29.84-24.71,80.12-60.86,149.44-84.44
c174.62-59.4,290.56,22.04,451.11-42.22c37.59-15.05,92.28-43.94,149.44-104.89C750,905.93,750,1004.19,750,1102.44z"/>
</svg>

+ 130
- 0
src/assets/custom/fingerprint.svg Datei anzeigen

@@ -0,0 +1,130 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,4.74c-141.16,0-256,114.84-256,256c0,31.421,5.632,62.116,16.736,91.229c1.442,3.78,5.042,6.104,8.861,6.104
c1.123,0,2.266-0.201,3.377-0.625c4.891-1.866,7.345-7.345,5.479-12.238c-10.278-26.947-15.491-55.366-15.491-84.47
C18.963,130.036,125.296,23.703,256,23.703S493.037,130.036,493.037,260.74c0,5.236,4.245,9.481,9.481,9.481
c5.236,0,9.482-4.245,9.482-9.481C512,119.58,397.16,4.74,256,4.74z"/>
</g>
</g>
<g>
<g>
<path d="M256.132,52.147c-56.908,0-115.863,27.535-157.602,73.655c-36.968,40.847-55.595,90.375-51.044,135.882l1.053,10.648
c7.407,73.761,7.398,73.761-6.509,101.278c-0.968,1.917-2.002,3.958-3.099,6.148c-2.34,4.685-0.444,10.38,4.238,12.722
c1.361,0.681,2.806,1.002,4.232,1.002c3.477,0,6.826-1.921,8.488-5.243c1.081-2.164,2.1-4.181,3.058-6.076
c16.405-32.456,16.257-33.942,8.444-111.725l-1.067-10.643c-4.018-40.185,12.819-84.387,46.199-121.269
c38.201-42.215,91.97-67.417,143.609-67.417c104.565,0,189.764,85.067,189.764,189.63v47.407c0,5.236,4.245,9.481,9.482,9.481
s9.482-4.245,9.482-9.481V260.74C464.859,145.721,371.15,52.147,256.132,52.147z"/>
</g>
</g>
<g>
<g>
<path d="M315.345,110.832c-18.886-7.484-38.854-11.278-59.345-11.278c-43.215,0-83.683,16.551-113.951,46.604
c-30.459,30.245-47.234,70.937-47.234,114.581c0,24.213,2.231,45.329,4.201,63.958c5.083,48.111,7.884,74.614-28.424,98.82
c-4.356,2.905-5.535,8.792-2.629,13.148c1.826,2.741,4.833,4.222,7.898,4.222c1.806,0,3.634-0.514,5.25-1.592
c45.852-30.567,41.84-68.53,36.762-116.588c-1.919-18.167-4.095-38.755-4.095-61.968c0-79.75,62.472-142.222,142.222-142.222
c18.09,0,35.706,3.345,52.359,9.944c4.863,1.926,10.377-0.454,12.308-5.322C322.595,118.272,320.213,112.76,315.345,110.832z"/>
</g>
</g>
<g>
<g>
<path d="M417.185,260.374c-0.118-51.748-25.315-100.613-67.456-130.782c-4.257-3.046-10.18-2.069-13.229,2.192
c-3.046,4.257-2.067,10.181,2.192,13.229c37.275,26.685,59.53,69.947,59.53,115.727c0,0.243,0.009,0.486,0.028,0.727
c0.093,1.217,9.139,122.623-9.227,196.086c-1.268,5.079,1.819,10.227,6.901,11.498c0.771,0.192,1.544,0.285,2.305,0.285
c4.248,0,8.114-2.875,9.192-7.185C426.211,386.992,417.847,269.216,417.185,260.374z"/>
</g>
</g>
<g>
<g>
<path d="M362.91,221.716c-16.324-44.713-59.289-74.755-106.91-74.755c-62.736,0-113.778,51.039-113.778,113.778
c0,0.393,0.025,0.787,0.074,1.176c0.093,0.745,9.218,75.336,0.021,139.706c-0.741,5.183,2.861,9.986,8.047,10.727
c0.454,0.065,0.905,0.097,1.352,0.097c4.641,0,8.699-3.414,9.375-8.143c9.208-64.458,1.046-136.236,0.097-144.128
c0.303-52.021,42.72-94.25,94.812-94.25c39.688,0,75.493,25.035,89.095,62.296c1.796,4.919,7.246,7.444,12.16,5.655
C362.174,232.08,364.704,226.635,362.91,221.716z"/>
</g>
</g>
<g>
<g>
<path d="M256.132,194.369c-36.597,0-66.435,29.773-66.435,66.37c0,0.37-0.014,0.741,0.03,1.106
c0.185,1.577,17.963,158.327-26.759,220.938c-3.044,4.262-2.065,10.183,2.197,13.227c1.671,1.194,3.592,1.766,5.5,1.766
c2.956,0,5.87-1.38,7.72-3.97c47.991-67.187,31.632-221.102,30.211-233.588c0.28-25.903,21.572-46.887,47.539-46.887
c26.141,0,47.539,21.266,47.539,47.407v66.37c0,5.236,4.245,9.482,9.482,9.482s9.482-4.245,9.482-9.482v-66.37
C322.637,224.142,292.729,194.369,256.132,194.369z"/>
</g>
</g>
<g>
<g>
<path d="M455.995,331.138c-5.16-0.456-9.817,3.401-10.271,8.618l-5.785,66.118c-0.458,5.218,3.401,9.815,8.618,10.271
c0.28,0.025,0.56,0.037,0.838,0.037c4.861,0,9.002-3.72,9.433-8.655l5.785-66.118
C465.072,336.191,461.213,331.594,455.995,331.138z"/>
</g>
</g>
<g>
<g>
<path d="M147.481,432.999c-4.354-2.905-10.243-1.727-13.148,2.63l-18.963,28.444c-2.905,4.357-1.727,10.243,2.629,13.148
c1.616,1.078,3.442,1.592,5.25,1.592c3.065,0,6.072-1.482,7.898-4.222l18.963-28.444
C153.016,441.791,151.838,435.904,147.481,432.999z"/>
</g>
</g>
<g>
<g>
<path d="M369.567,258.753c-1.095-5.12-6.139-8.382-11.257-7.285c-5.12,1.097-8.382,6.137-7.285,11.257
c0.278,1.296,27.222,130.539-18.174,221.329c-2.34,4.685-0.442,10.38,4.241,12.722c1.361,0.68,2.808,1.002,4.234,1.002
c3.477,0,6.826-1.921,8.488-5.243C398.153,395.858,370.757,264.307,369.567,258.753z"/>
</g>
</g>
<g>
<g>
<path d="M265.199,248.96c-1.273-5.083-6.431-8.164-11.498-6.9c-5.081,1.271-8.169,6.419-6.901,11.498
c0.183,0.734,17.979,74.12-9.278,155.889c-1.655,4.968,1.03,10.336,5.997,11.993c0.993,0.331,2.005,0.489,3,0.489
c3.968,0,7.669-2.512,8.993-6.486C284.498,328.49,266,252.165,265.199,248.96z"/>
</g>
</g>
<g>
<g>
<path d="M240.558,441.566c-4.856-1.945-10.377,0.416-12.324,5.282l-18.963,47.407c-1.944,4.861,0.419,10.38,5.282,12.324
c1.155,0.463,2.345,0.681,3.519,0.681c3.762,0,7.322-2.255,8.806-5.963l18.963-47.407
C247.785,449.029,245.421,443.511,240.558,441.566z"/>
</g>
</g>
<g>
<g>
<path d="M312.898,364.663c-0.005,0-0.007,0-0.009,0c-5.229,0-9.472,4.426-9.482,9.655c0,0.553-0.412,56.009-27.678,119.63
c-2.062,4.813,0.167,10.435,4.982,12.498c1.218,0.521,2.484,0.791,3.729,0.791c3.678,0,7.178-2.141,8.72-5.738
c28.879-67.384,29.211-124.773,29.211-127.176C322.37,369.089,318.13,364.663,312.898,364.663z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 39
- 0
src/assets/custom/india.svg Datei anzeigen

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FAB446;}
.st1{fill:#73AF00;}
.st2{fill:#F5F5F5;}
.st3{fill:#41479B;}
</style>
<g>
<path class="st0" d="M473.7,88.3H38.3C17.2,88.3,0,105.4,0,126.6v73.5h512v-73.5C512,105.4,494.8,88.3,473.7,88.3z"/>
<path class="st1" d="M0,385.4c0,21.2,17.2,38.3,38.3,38.3h435.3c21.2,0,38.3-17.2,38.3-38.3v-73.5H0V385.4z"/>
<rect y="200.1" class="st2" width="512" height="111.8"/>
<g>
<path class="st3" d="M256,303.4c-26.2,0-47.4-21.3-47.4-47.4s21.3-47.4,47.4-47.4s47.4,21.3,47.4,47.4S282.2,303.4,256,303.4z
M256,217.4c-21.3,0-38.6,17.3-38.6,38.6s17.3,38.6,38.6,38.6s38.6-17.3,38.6-38.6S277.3,217.4,256,217.4z"/>
<circle class="st3" cx="256" cy="256" r="5.4"/>
<polygon class="st3" points="256,256.8 242.3,258.2 213,256.8 213,255.2 242.3,253.8 256,255.2 "/>
<polygon class="st3" points="256,256.8 269.7,258.2 299,256.8 299,255.2 269.7,253.8 256,255.2 "/>
<polygon class="st3" points="255.2,256 253.8,242.3 255.2,213 256.8,213 258.2,242.3 256.8,256 "/>
<polygon class="st3" points="255.2,256 253.8,269.7 255.2,299 256.8,299 258.2,269.7 256.8,256 "/>
<polygon class="st3" points="255.4,256.6 244.8,247.9 225,226.1 226.1,225 247.9,244.8 256.6,255.4 "/>
<polygon class="st3" points="255.4,256.6 264.1,267.2 285.9,287 287,285.9 267.2,264.1 256.6,255.4 "/>
<polygon class="st3" points="255.4,255.4 264.1,244.8 285.9,225 287,226.1 267.2,247.9 256.6,256.6 "/>
<polygon class="st3" points="255.4,255.4 244.8,264.1 225,285.9 226.1,287 247.9,267.2 256.6,256.6 "/>
<polygon class="st3" points="256.3,256.7 244.2,263.3 216.6,273.2 215.9,271.7 242.5,259.2 255.7,255.3 "/>
<polygon class="st3" points="256.3,256.7 269.5,252.8 296.1,240.3 295.4,238.8 267.8,248.7 255.7,255.3 "/>
<polygon class="st3" points="255.3,256.3 248.7,244.2 238.8,216.6 240.3,215.9 252.8,242.5 256.7,255.7 "/>
<polygon class="st3" points="255.3,256.3 259.2,269.5 271.7,296.1 273.2,295.4 263.3,267.8 256.7,255.7 "/>
<polygon class="st3" points="255.7,256.7 242.5,252.8 215.9,240.3 216.6,238.8 244.2,248.7 256.3,255.3 "/>
<polygon class="st3" points="255.7,256.7 267.8,263.3 295.4,273.2 296.1,271.7 269.5,259.2 256.3,255.3 "/>
<polygon class="st3" points="255.3,255.7 259.2,242.5 271.7,215.9 273.2,216.6 263.3,244.2 256.7,256.3 "/>
<polygon class="st3" points="255.3,255.7 248.7,267.8 238.8,295.4 240.3,296.1 252.8,269.5 256.7,256.3 "/>
</g>
<circle class="st2" cx="256" cy="256" r="7.3"/>
<circle class="st3" cx="256" cy="256" r="4.4"/>
</g>
</svg>

+ 38
- 0
src/assets/custom/left-arrow.svg Datei anzeigen

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 31.494 31.494" style="enable-background:new 0 0 31.494 31.494;" xml:space="preserve">
<path style="fill:#1E201D;" d="M10.273,5.009c0.444-0.444,1.143-0.444,1.587,0c0.429,0.429,0.429,1.143,0,1.571l-8.047,8.047h26.554
c0.619,0,1.127,0.492,1.127,1.111c0,0.619-0.508,1.127-1.127,1.127H3.813l8.047,8.032c0.429,0.444,0.429,1.159,0,1.587
c-0.444,0.444-1.143,0.444-1.587,0l-9.952-9.952c-0.429-0.429-0.429-1.143,0-1.571L10.273,5.009z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 27
- 0
src/assets/custom/logo.svg Datei anzeigen

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 121 55" style="enable-background:new 0 0 121 55;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E5811F;}
.st1{fill:#F7931E;}
.st2{fill:#7064E2;}
.st3{fill:#272973;}
.st4{fill:#322FA0;}
</style>
<g>
<path class="st0" d="M80.59,37.41l11.79,11.73c6.5,6.5,17.03,6.5,23.52,0l0,0c6.5-6.5,6.5-17.03,0-23.52l-12.24-12.24l-7.46-7.46
l-0.14-0.14C94,3.72,91.53,2.31,88.91,1.56c-5.92-1.77-12.59-0.31-17.26,4.36L60.39,17.17L80.59,37.41z"/>
<path class="st1" d="M80.59,37.41l11.79,11.73c6.5,6.5,17.03,6.5,23.52,0l0,0c6.5-6.5,6.5-17.03,0-23.52l-12.24-12.24l-7.46-7.46
l-0.14-0.14C95,4.71,93.81,3.81,92.55,3.09c-1.01-0.58-2.68-1.39-3.64-1.53c-3.95-0.6-10.01,7.79-11.74,16.01
C75.26,26.63,78.86,34.28,80.59,37.41z"/>
<path class="st2" d="M6.6,50.1L4.7,48.19c-5.97-5.97-5.97-15.65,0-21.62L26.44,4.83c5.97-5.97,15.65-5.97,21.62,0l1.91,1.91
c5.97,5.97,5.97,15.65,0,21.62L28.22,50.1C22.25,56.07,12.57,56.07,6.6,50.1z"/>
<path class="st2" d="M80.61,37.38L67.9,50.1c-5.97,5.97-15.65,5.97-21.62,0L24.53,28.36c-5.97-5.97-5.97-15.65,0-21.62l1.91-1.91
c5.97-5.97,15.65-5.97,21.62,0L80.61,37.38z"/>
<path class="st3" d="M80.61,37.38L67.77,50.22c-5.9,5.9-15.47,5.9-21.38,0l-9.15-9.15l5.29-5.29c10.07-10.07,26.39-10.07,36.46,0
L80.61,37.38z"/>
<path class="st4" d="M80.61,37.38L67.77,50.22c-5.9,5.9-15.47,5.9-21.38,0l-6.04-6.04l8.15-8.15c8.49-8.49,22.25-8.49,30.74,0
L80.61,37.38z"/>
</g>
</svg>

+ 114
- 0
src/assets/custom/onboarding-2.svg Datei anzeigen

@@ -0,0 +1,114 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 541 372" style="enable-background:new 0 0 541 372;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:#FFFFFF;}
.st3{fill:#7065DB;}
.st4{fill:#E5811F;}
.st5{fill:#F7931E;}
.st6{fill:#7064E2;}
.st7{fill:#272973;}
.st8{fill:#322FA0;}
.st9{fill:#393A4C;}
.st10{font-family:'Roboto-Medium';}
.st11{font-size:29.2349px;}
.st12{fill:#74748E;}
.st13{font-family:'Roboto-Regular';}
.st14{font-size:24.7372px;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="270.4568" y1="371.7764" x2="270.4568" y2="-0.0649">
<stop offset="0" style="stop-color:#232065;stop-opacity:0"/>
<stop offset="0.3196" style="stop-color:#232065"/>
</linearGradient>
<path class="st0" d="M483.06,371.78H57.85V55.53c0-30.71,24.89-55.6,55.6-55.6h314.02c30.71,0,55.6,24.89,55.6,55.6V371.78z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="270.4568" y1="371.7764" x2="270.4568" y2="86.2236">
<stop offset="0" style="stop-color:#F5F6FA"/>
<stop offset="0.3196" style="stop-color:#FFFFFF"/>
</linearGradient>
<path class="st1" d="M459.94,371.78H80.98V99.09c0-7.1,5.76-12.86,12.86-12.86h353.23c7.1,0,12.86,5.76,12.86,12.86V371.78z"/>
<path class="st2" d="M298.48,53.31h-56.04c-2.2,0-4-1.8-4-4v0c0-2.2,1.8-4,4-4h56.04c2.2,0,4,1.8,4,4v0
C302.48,51.51,300.68,53.31,298.48,53.31z"/>
<circle class="st2" cx="270.01" cy="35.96" r="5.78"/>
<g>
<image style="overflow:visible;opacity:0.4;" width="541" height="160" xlink:href="data:image/png;base64,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" transform="matrix(1 0 0 1 0.1929 124.1929)">
</image>
<g>
<path class="st2" d="M516.02,269.58H25.11c-5.82,0-10.53-4.71-10.53-10.53V149.42c0-5.82,4.71-10.53,10.53-10.53h490.91
c5.82,0,10.53,4.71,10.53,10.53v109.63C526.56,264.87,521.84,269.58,516.02,269.58z"/>
</g>
</g>
<circle class="st3" cx="524.29" cy="145.64" r="13.77"/>
<g>
<path class="st4" d="M105.07,211.3l9.23,9.18c5.08,5.08,13.32,5.08,18.4,0l0,0c5.08-5.08,5.08-13.32,0-18.4l-9.57-9.57l-5.84-5.84
l-0.11-0.11c-1.62-1.62-3.55-2.72-5.6-3.3c-4.63-1.38-9.85-0.24-13.5,3.41l-8.8,8.8L105.07,211.3z"/>
<path class="st5" d="M105.07,211.3l9.23,9.18c5.08,5.08,13.32,5.08,18.4,0l0,0c5.08-5.08,5.08-13.32,0-18.4l-9.57-9.57l-5.84-5.84
l-0.11-0.11c-0.84-0.84-1.77-1.54-2.75-2.1c-0.79-0.45-2.09-1.09-2.85-1.2c-3.09-0.47-7.83,6.09-9.18,12.52
C100.9,202.87,103.72,208.85,105.07,211.3z"/>
<path class="st6" d="M46.45,220.48L46.45,220.48c-5.08-5.08-5.08-13.32,0-18.4l15.52-15.52c5.08-5.08,13.32-5.08,18.4,0l0,0
c5.08,5.08,5.08,13.32,0,18.4l-15.52,15.52C59.77,225.56,51.53,225.56,46.45,220.48z"/>
<path class="st6" d="M105.09,211.28l-9.2,9.2c-5.08,5.08-13.32,5.08-18.4,0l-15.52-15.52c-5.08-5.08-5.08-13.32,0-18.4l0,0
c5.08-5.08,13.32-5.08,18.4,0L105.09,211.28z"/>
<path class="st7" d="M105.09,211.28l-9.3,9.3c-5.02,5.02-13.17,5.02-18.2,0l-6.42-6.42l2.88-2.88
C82.62,202.71,96.52,202.71,105.09,211.28L105.09,211.28z"/>
<path class="st8" d="M105.09,211.28l-9.3,9.3c-5.02,5.02-13.17,5.02-18.2,0l-3.99-3.99l5.32-5.32
C86.15,204.05,97.86,204.05,105.09,211.28L105.09,211.28z"/>
</g>
<g>
<text transform="matrix(1 0 0 1 164.5098 193.9751)" class="st9 st10 st11">Notification</text>
</g>
<g>
<text transform="matrix(1 0 0 1 163.8398 230.1592)" class="st12 st13 st14">You have a notification</text>
</g>
</svg>

+ 1038
- 0
src/assets/custom/onboarding.svg
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 42
- 0
src/assets/custom/tick.svg Datei anzeigen

@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0
c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7
C514.5,101.703,514.499,85.494,504.502,75.496z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 17
- 0
src/global.scss Datei anzeigen

@@ -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;
}

+ 5
- 0
src/theme/variables.scss Datei anzeigen

@@ -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;
}

Laden…
Abbrechen
Speichern