Initial commit

.gitignore

+# Specifies intentionally untracked files to ignore when using Git
+# http://git-scm.com/docs/gitignore
+
+*~
+*.sw[mnpcod]
+*.log
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+.vscode/
+npm-debug.log*
+
+.idea/
+.ionic/
+.sourcemaps/
+.sass-cache/
+.tmp/
+.versions/
+coverage/
+www/
+node_modules/
+tmp/
+temp/
+platforms/
+plugins/
+plugins/android.json
+plugins/ios.json
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate

angular.json

+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "defaultProject": "app",
+  "newProjectRoot": "projects",
+  "projects": {
+    "app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "www",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/theme/variables.scss"
+              },
+              {
+                "input": "src/global.scss"
+              },
+              {
+                "input": "src/app/app.scss"
+              },
+              {
+                "input": "node_modules/angular-calendar/css/angular-calendar.css"
+              }
+            ],
+            "scripts": [],
+            "es5BrowserSupport": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            },
+            "ci": {
+              "progress": false
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app:build:production"
+            },
+            "ci": {
+              "progress": false
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [],
+            "scripts": [],
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ]
+          },
+          "configurations": {
+            "ci": {
+              "progress": false,
+              "watch": false
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "app:ionic-cordova-build",
+            "devServerTarget": "app:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "app:ionic-cordova-build:production",
+              "devServerTarget": "app:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "app-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "app:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "app:serve:production"
+            },
+            "ci": {
+              "devServerTarget": "app:serve:ci"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "defaultCollection": "@ionic/angular-toolkit"
+  },
+  "schematics": {
+    "@ionic/angular-toolkit:component": {
+      "styleext": "scss"
+    },
+    "@ionic/angular-toolkit:page": {
+      "styleext": "scss"
+    }
+  }
+}

config.xml

+<?xml version='1.0' encoding='utf-8'?>
+<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>MyApp</name>
+    <description>An awesome Ionic/Cordova app.</description>
+    <author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
+    <content src="index.html" />
+    <access origin="*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <preference name="ScrollEnabled" value="false" />
+    <preference name="android-minSdkVersion" value="19" />
+    <preference name="BackupWebStorage" value="none" />
+    <preference name="SplashMaintainAspectRatio" value="true" />
+    <preference name="FadeSplashScreenDuration" value="300" />
+    <preference name="SplashShowOnlyFirstTime" value="false" />
+    <preference name="SplashScreen" value="screen" />
+    <preference name="SplashScreenDelay" value="3000" />
+    <platform name="android">
+        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
+            <application android:networkSecurityConfig="@xml/network_security_config" />
+        </edit-config>
+        <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
+            <string>We use your location for full functionality of certain app features.</string>
+        </edit-config>
+        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
+        <allow-intent href="market:*" />
+        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
+        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
+        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
+        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
+        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
+        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
+        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
+        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
+        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
+        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
+        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
+        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
+        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
+        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
+        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
+        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
+        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
+        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
+        <icon height="114" src="resources/ios/icon/[email protected]" width="114" />
+        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
+        <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
+        <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
+        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
+        <icon height="40" src="resources/ios/icon/[email protected]" width="40" />
+        <icon height="60" src="resources/ios/icon/[email protected]" width="60" />
+        <icon height="48" src="resources/ios/icon/[email protected]" width="48" />
+        <icon height="55" src="resources/ios/icon/[email protected]" width="55" />
+        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
+        <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
+        <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
+        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
+        <icon height="80" src="resources/ios/icon/[email protected]" width="80" />
+        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
+        <icon height="88" src="resources/ios/icon/[email protected]" width="88" />
+        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
+        <icon height="100" src="resources/ios/icon/[email protected]" width="100" />
+        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
+        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
+        <icon height="180" src="resources/ios/icon/[email protected]" width="180" />
+        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
+        <icon height="144" src="resources/ios/icon/[email protected]" width="144" />
+        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
+        <icon height="152" src="resources/ios/icon/[email protected]" width="152" />
+        <icon height="167" src="resources/ios/icon/[email protected]" width="167" />
+        <icon height="172" src="resources/ios/icon/[email protected]" width="172" />
+        <icon height="196" src="resources/ios/icon/[email protected]" width="196" />
+        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
+        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
+        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
+        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
+        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
+        <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
+        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
+        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
+        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
+        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
+        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
+        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
+        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
+        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
+        <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
+        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
+    </platform>
+    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
+    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
+    <plugin name="cordova-plugin-device" spec="2.0.2" />
+    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
+    <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
+    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
+    <engine name="android" spec="7.1.4" />
+</widget>

e2e/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.e2e.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

e2e/src/app.e2e-spec.ts

+import { AppPage } from './app.po';
+
+describe('new App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+  describe('default screen', () => {
+    beforeEach(() => {
+      page.navigateTo('/home');
+    });
+    it('should have a title saying Home', () => {
+      page.getPageOneTitleText().then(title => {
+        expect(title).toEqual('Home');
+      });
+    });
+  });
+});

e2e/src/app.po.ts

+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo(destination) {
+    return browser.get(destination);
+  }
+
+  getTitle() {
+    return browser.getTitle();
+  }
+
+  getPageOneTitleText() {
+    return element(by.tagName('app-home')).element(by.deepCss('ion-title')).getText();
+  }
+}

e2e/tsconfig.e2e.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

ionic.config.json

+{
+  "name": "allorepar",
+  "integrations": {
+    "cordova": {}
+  },
+  "type": "angular"
+}

package.json

+{
+  "name": "allorepar",
+  "version": "0.0.1",
+  "author": "Ionic Framework",
+  "homepage": "https://ionicframework.com/",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^8.0.3",
+    "@angular/common": "^7.2.2",
+    "@angular/core": "^7.2.2",
+    "@angular/forms": "^7.2.2",
+    "@angular/http": "^7.2.2",
+    "@angular/platform-browser": "^7.2.2",
+    "@angular/platform-browser-dynamic": "^7.2.2",
+    "@angular/router": "^7.2.2",
+    "@ionic-native/core": "^5.0.0",
+    "@ionic-native/geolocation": "^5.15.0",
+    "@ionic-native/splash-screen": "^5.0.0",
+    "@ionic-native/status-bar": "^5.0.0",
+    "@ionic-native/toast": "^5.15.0",
+    "@ionic/angular": "^4.1.0",
+    "@types/jquery": "^3.3.31",
+    "angular-calendar": "^0.27.14",
+    "cordova-android": "7.1.4",
+    "cordova-plugin-device": "^2.0.2",
+    "cordova-plugin-geolocation": "^4.0.2",
+    "cordova-plugin-ionic-keyboard": "^2.1.3",
+    "cordova-plugin-ionic-webview": "^4.1.1",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-whitelist": "^1.3.3",
+    "cordova-plugin-x-toast": "^2.7.2",
+    "core-js": "^2.5.4",
+    "date-fns": "^1.30.1",
+    "ionic2-calendar": "^0.5.2",
+    "jquery": "^3.4.1",
+    "rxjs": "~6.5.1",
+    "tslib": "^1.9.0",
+    "webrtc-adapter": "^7.2.9",
+    "zone.js": "~0.8.29"
+  },
+  "devDependencies": {
+    "@angular-devkit/architect": "~0.13.8",
+    "@angular-devkit/build-angular": "~0.13.8",
+    "@angular-devkit/core": "~7.3.8",
+    "@angular-devkit/schematics": "~7.3.8",
+    "@angular/cli": "~7.3.8",
+    "@angular/compiler": "~7.2.2",
+    "@angular/compiler-cli": "~7.2.2",
+    "@angular/language-service": "~7.2.2",
+    "@ionic/angular-toolkit": "~1.5.1",
+    "@types/node": "~12.0.0",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~5.17.0",
+    "typescript": "~3.1.6"
+  },
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-ionic-webview": {
+        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
+      },
+      "cordova-plugin-ionic-keyboard": {},
+      "cordova-plugin-geolocation": {},
+      "cordova-plugin-x-toast": {}
+    },
+    "platforms": [
+      "android"
+    ]
+  }
+}

resources/README.md

+These are Cordova resources. You can replace icon.png and splash.png and run
+`ionic cordova resources` to generate custom icons and splash screens for your
+app. See `ionic cordova resources --help` for details.
+
+Cordova reference documentation:
+
+- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
+- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

resources/android/xml/network_security_config.xml

+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+    <domain-config cleartextTrafficPermitted="true">
+        <domain includeSubdomains="true">localhost</domain>
+    </domain-config>
+</network-security-config>

src/Config/model/user.ts

+export interface User {
+    user_name: any;
+    user_email: any;
+    user_phonecode: any;
+    user_phonenumber: any;
+    user_country: any;
+    user_area: any;
+    user_address: any;
+    user_lat: any;
+    user_lng: any;
+    user_type: any;
+}

src/Config/services/auth.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { devURL} from '../../environments/server.config';
+import { map, catchError } from 'rxjs/operators';
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthenticationService {
+
+  constructor(
+    private http: HttpClient
+  ) { }
+  post_data(url: string, data) {
+    return this.http.post(`${devURL + url}`, data).pipe(map((response: any) => response));
+  }
+  get_data(url) {
+    return this.http.get(`${devURL + url}`).pipe(map((response: any) => response));
+  }
+  public uploadFormData(url, formData) {
+    return this.http.post<any>(`${devURL + url}`, formData).pipe(map((response: any) => response));
+  }
+}

src/Config/services/storage.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StorageService {
+
+  constructor() { }
+  setLocalStorageItem(id: string, data: string) {
+    localStorage.setItem(id, data);
+  }
+  getLocalStorageItem(data: string): string {
+      return localStorage.getItem(data);
+  }
+  removeLocalStorageItem(data) {
+    localStorage.removeItem(data);
+  }
+  ObjArray(data: any) {
+    if (data instanceof Array !== true) {
+      if (data !== undefined) {
+        return new Array(data);
+      } else {
+        return undefined;
+      }
+    } else {
+      return data;
+    }
+  }
+  getToken() {
+    return localStorage.getItem('userData');
+  }
+  isLoggednIn() {
+    return this.getToken() !== null;
+  }
+}

src/Config/services/validation.service.ts

+import { Injectable } from '@angular/core';
+import { Toast } from '@ionic-native/toast/ngx';
+import { LoadingController , ToastController } from '@ionic/angular';
+@Injectable({
+  providedIn: 'root',
+})
+export class ValidationService {
+    loading: any;
+    currentLoading: any;
+  constructor(
+    private toast: Toast,
+    public loadingController: LoadingController,
+  ) { }
+  presentToast(message) {
+    this.toast.show(message, '4000', 'center').subscribe(
+        toast => {
+          console.log(toast);
+        }
+      );
+  }
+  async presentLoader() {
+    if (this.currentLoading != null) {
+        this.currentLoading.dismiss();
+    }
+
+    this.currentLoading = await this.loadingController.create({
+
+        message: 'Loading...'
+    });
+
+    return await this.currentLoading.present();
+}
+
+async dismissLoader() {
+       await this.loadingController.dismiss();
+       this.currentLoading = null;
+       console.log('Dismis loader');
+   // return;
+  }
+
+}

src/app/accepted/accepted.module.ts

+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 { AcceptedPage } from './accepted.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AcceptedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [AcceptedPage]
+})
+export class AcceptedPageModule {}

src/app/accepted/accepted.page.html

+<ion-content>
+    <div class="waiting_wrapper">
+      <div class="logo_one">
+        <img src="../../assets/img/aaset_verified.png">
+      </div>
+      <h4>Mechanic Accepted</h4>
+      <p>OThe Allo Repar is ready to help you.<br>
+          Please wait for the Mechanic.</p>
+          <div class="logo">
+              <img src="../../assets/img/asset_shop1.png">
+            </div>
+      <h4>Presto Towing Services</h4>
+      <div class="distance">
+        4 km
+      </div><br><br>
+          <button class="back_btn1">Call allo repar</button><br>
+          <button class="home">Details</button>
+    </div>
+  </ion-content>

src/app/accepted/accepted.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:20%;
+    .logo_one{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+        }
+    }
+    .logo{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        background-color: #fff;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+            border:1px solid #fbd339;
+        }
+    }
+    h4{
+        color: #fff;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom:40px;
+
+    }
+
+    .back_btn1{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        display: inline-block;
+        background-color: #28be57;
+        color: #fff;
+        background-image: url("../../assets/img/asset_call.png");
+        background-position: left 5px top 0px;
+        background-repeat: no-repeat;
+        background-size: 35px;
+        padding-left: 40px;
+        padding-right: 40px;
+
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .home{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .back_btn1{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/accepted/accepted.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AcceptedPage } from './accepted.page';
+
+describe('AcceptedPage', () => {
+  let component: AcceptedPage;
+  let fixture: ComponentFixture<AcceptedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcceptedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcceptedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accepted/accepted.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-accepted',
+  templateUrl: './accepted.page.html',
+  styleUrls: ['./accepted.page.scss'],
+})
+export class AcceptedPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/addaddress/addaddress.module.ts

+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 { AddaddressPage } from './addaddress.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AddaddressPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [AddaddressPage]
+})
+export class AddaddressPageModule {}

src/app/addaddress/addaddress.page.html

+
+   <ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>ADD ADDRESS</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+ <ion-content>
+    <div class="signup_wrapper">
+        <div class="signup_form">
+            <div class="row">
+              <p>Name</p>
+              <ion-input value="John Doe" type="text"></ion-input>
+            </div>
+            <div class="row">
+                <p>Phone Number</p>
+                <ion-row class="p0">
+                  <ion-col size="4">
+                    <ion-select placeholder="">
+                      <ion-select-option value="">+91</ion-select-option>
+                    </ion-select>
+                  </ion-col>
+                  <ion-col size="8">
+                    <ion-input value="" type="number"></ion-input>
+                  </ion-col>
+                </ion-row>
+            </div>
+            <div class="row">
+                <p>Country</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">Country Name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>District</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">District Name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>City</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">City Name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>Area</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">Area name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>House name/Building</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">Choose address</ion-select-option>
+                </ion-select>
+            </div>
+              <div class="row">
+                  <button class="signup_btn">Save</button>
+                </div>
+
+        </div>
+    </div>
+  </ion-content>

src/app/addaddress/addaddress.page.scss

+.signup_form{
+    padding: 15px;
+    .row{
+        margin-bottom: 15px;
+        p{
+            color: #4e4961;
+            padding: 10px;
+            margin: 0px;
+            padding-left: 20px;
+            font-weight: 500;
+            a{
+                color: #39267f;
+            }
+        }
+        h6{
+            color: #4e4961;
+            padding-left: 20px;
+            font-weight: 400;
+            font-size: 14px;
+
+        }
+        ion-input{
+            background: #dcdae9;
+            border-radius: 20px;
+            color:#39267f;
+            height: 40px;
+            font-weight: 600;
+            padding-left: 15px !important;
+        }
+
+        ion-select {
+            background: #dcdae9;
+            border-radius: 20px;
+            color:#39267f;
+            height: 40px;
+            font-weight: 600;
+            padding-left: 15px !important; 
+            padding-right: 20px;
+        }
+        .signup_btn{
+            height: 40px;
+            width: 100%;
+            color: #fff;
+            background-color: #39267f;
+            border-radius: 20px;
+            font-weight: 500;
+            font-size: 16px; 
+        }
+    }
+}
\ No newline at end of file

src/app/addaddress/addaddress.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddaddressPage } from './addaddress.page';
+
+describe('AddaddressPage', () => {
+  let component: AddaddressPage;
+  let fixture: ComponentFixture<AddaddressPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddaddressPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddaddressPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/addaddress/addaddress.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-addaddress',
+  templateUrl: './addaddress.page.html',
+  styleUrls: ['./addaddress.page.scss'],
+})
+export class AddaddressPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/addcar/addcar.module.ts

+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 { AddcarPage } from './addcar.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AddcarPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [AddcarPage]
+})
+export class AddcarPageModule {}

src/app/addcar/addcar.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>ADD YOUR CAR</h4></div>
+                <button class="nav_btn nav_btn_text floatRight" (click)="goToPage('login')">
+                  Skip
+                </button>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                <div class="showcar">
+                  <img src="../../assets/img/asset_show_car.png">
+                </div>
+                <div class="row">
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>Company Name</ion-select-option>
+                    </ion-select>
+                </div>
+                <div class="row">
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>Modal Name</ion-select-option>
+                    </ion-select>
+                </div>
+                <div class="row">
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>Modal Year</ion-select-option>
+                    </ion-select>
+                </div>
+                <div class="row">
+                    <p>Mileage</p>
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>0 - 10km</ion-select-option>
+                    </ion-select>
+                </div>
+
+                
+               
+              
+                <div class="row textCenter">
+                    <button class="signup_btn" (click)="goToPage('login')">Add My car</button>
+                </div>
+              </div>
+        </div>
+      </ion-content>

src/app/addcar/addcar.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .showcar{
+            text-align: center;
+            img{
+                width: 75%;  
+            }
+        }
+        .row{
+            margin-bottom:15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+
+            h5{
+                color: #4e4961;
+                text-align: center;
+                font-size: 16px;
+            }
+
+            h2{
+                text-align: center;
+                color: #282438;
+                font-size: 32px;
+                padding-bottom: 15%;
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius:35px;
+                color:#39267f;
+                height: 45px;
+                font-weight: 600;
+                text-align: center;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+
+        .otp_input_box{
+            width: 80%;
+            margin: 0 auto;
+        }
+    }
+        
+}
+
+h3{
+    color: #39267f;
+    text-align:center;
+    font-size: 15px;
+    font-weight: 500;
+}
\ No newline at end of file

src/app/addcar/addcar.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddcarPage } from './addcar.page';
+
+describe('AddcarPage', () => {
+  let component: AddcarPage;
+  let fixture: ComponentFixture<AddcarPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddcarPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddcarPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/addcar/addcar.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-addcar',
+  templateUrl: './addcar.page.html',
+  styleUrls: ['./addcar.page.scss'],
+})
+export class AddcarPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { 
+    
+  }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'start',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadChildren: './home/home.module#HomePageModule'
+  },
+  {
+    path: 'list',
+    loadChildren: './list/list.module#ListPageModule'
+  },
+  {
+    path: 'start',
+    loadChildren: './start/start.module#StartPageModule'
+  },
+  {
+    path: 'login',
+    loadChildren: './login/login.module#LoginPageModule'
+  },
+  {
+    path: 'forgot',
+    loadChildren: './forgot/forgot.module#ForgotPageModule'
+  },
+  {
+    path: 'otp/:id',
+    loadChildren: './otp/otp.module#OtpPageModule'
+  },
+  {
+    path: 'password/:id',
+    loadChildren: './password/password.module#PasswordPageModule'
+  },
+  {
+    path: 'addcar',
+    loadChildren: './addcar/addcar.module#AddcarPageModule'
+  },
+  {
+    path: 'roadassistance',
+    loadChildren: './roadassistance/roadassistance.module#RoadassistancePageModule'
+  },
+  {
+    path: 'booking/:id',
+    loadChildren: './booking/booking.module#BookingPageModule'
+  },
+  {
+    path: 'servicecompleted',
+    loadChildren: './servicecompleted/servicecompleted.module#ServicecompletedPageModule'
+   },
+  {
+    path: 'accepted',
+    loadChildren: './accepted/accepted.module#AcceptedPageModule'
+  },
+  {
+    path: 'review',
+    loadChildren: './review/review.module#ReviewPageModule'
+  },
+  { path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' },
+  { path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' },
+  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
+  { path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' },
+  { path: 'profilephoto', loadChildren: './profilephoto/profilephoto.module#ProfilephotoPageModule' },
+  { path: 'carlist', loadChildren: './carlist/carlist.module#CarlistPageModule' },
+  { path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
+  { path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' },
+  { path: 'general', loadChildren: './general/general.module#GeneralPageModule' },
+  { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
+  { path: 'selectservices/:id', loadChildren: './selectservices/selectservices.module#SelectservicesPageModule' },
+  { path: 'date/:id', loadChildren: './date/date.module#DatePageModule' },
+  { path: 'summary', loadChildren: './summary/summary.module#SummaryPageModule' },
+  { path: 'waiting1', loadChildren: './waiting1/waiting1.module#Waiting1PageModule' },
+  { path: 'available', loadChildren: './available/available.module#AvailablePageModule' },
+  { path: 'bookservice', loadChildren: './bookservice/bookservice.module#BookservicePageModule' },
+  { path: 'cancel', loadChildren: './cancel/cancel.module#CancelPageModule' },
+  { path: 'purchaseparts', loadChildren: './purchaseparts/purchaseparts.module#PurchasepartsPageModule' },
+  { path: 'productbooking', loadChildren: './productbooking/productbooking.module#ProductbookingPageModule' },
+  { path: 'addaddress', loadChildren: './addaddress/addaddress.module#AddaddressPageModule' },
+  { path: 'deliveryaddress', loadChildren: './deliveryaddress/deliveryaddress.module#DeliveryaddressPageModule' },
+  { path: 'partproduct', loadChildren: './partproduct/partproduct.module#PartproductPageModule' },
+  { path: 'orderdetails', loadChildren: './orderdetails/orderdetails.module#OrderdetailsPageModule' },
+  { path: 'listingservice', loadChildren: './listingservice/listingservice.module#ListingservicePageModule' }
+
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.html

+<ion-app>
+  <ion-split-pane>
+    <ion-menu type="overlay">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
+            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
+              <ion-icon slot="start" [name]="p.icon"></ion-icon>
+              <ion-label>
+                {{p.title}}
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+    <ion-router-outlet main></ion-router-outlet>
+  </ion-split-pane>
+</ion-app>

src/app/app.component.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed, async } from '@angular/core/testing';
+
+import { Platform } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+
+  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
+
+  beforeEach(async(() => {
+    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
+    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
+    platformReadySpy = Promise.resolve();
+    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
+
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        { provide: StatusBar, useValue: statusBarSpy },
+        { provide: SplashScreen, useValue: splashScreenSpy },
+        { provide: Platform, useValue: platformSpy },
+      ],
+      imports: [ RouterTestingModule.withRoutes([])],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should initialize the app', async () => {
+    TestBed.createComponent(AppComponent);
+    expect(platformSpy.ready).toHaveBeenCalled();
+    await platformReadySpy;
+    expect(statusBarSpy.styleDefault).toHaveBeenCalled();
+    expect(splashScreenSpy.hide).toHaveBeenCalled();
+  });
+
+  it('should have menu labels', async () => {
+    const fixture = await TestBed.createComponent(AppComponent);
+    await fixture.detectChanges();
+    const app = fixture.nativeElement;
+    const menuItems = app.querySelectorAll('ion-label');
+    expect(menuItems.length).toEqual(2);
+    expect(menuItems[0].textContent).toContain('Home');
+    expect(menuItems[1].textContent).toContain('List');
+  });
+
+  it('should have urls', async () => {
+    const fixture = await TestBed.createComponent(AppComponent);
+    await fixture.detectChanges();
+    const app = fixture.nativeElement;
+    const menuItems = app.querySelectorAll('ion-item');
+    expect(menuItems.length).toEqual(2);
+    expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/home');
+    expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/list');
+  });
+
+});

src/app/app.component.ts

+import { Component } from '@angular/core';
+
+import { Platform } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { StorageService } from '../Config/services/storage.service';
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+  public appPages = [
+    {
+      title: 'Home',
+      url: '/home',
+      icon: 'home'
+    },
+    {
+      title: 'List',
+      url: '/list',
+      icon: 'list'
+    }
+  ];
+
+  constructor(
+    private platform: Platform,
+    private splashScreen: SplashScreen,
+    private statusBar: StatusBar,
+    private geolocation: Geolocation,
+    private storageservice: StorageService
+  ) {
+    this.initializeApp();
+  }
+
+  initializeApp() {
+    this.platform.ready().then(() => {
+      this.statusBar.styleDefault();
+      this.splashScreen.hide();
+      this.geolocationData();
+    });
+  }
+  geolocationData() {
+    this.geolocation.getCurrentPosition().then((resp) => {
+      console.log(resp);
+      const coords = {lat: resp.coords.latitude, lng: resp.coords.longitude};
+      this.storageservice.setLocalStorageItem('location', JSON.stringify(coords));
+     }).catch((error) => {
+       console.log('Error getting location', error);
+     });
+  }
+}

src/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ReviewPage} from './review/review.page';
+
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
+
+import { HttpClientModule } from '@angular/common/http';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { Toast } from '@ionic-native/toast/ngx';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    ReviewPage
+  ],
+  entryComponents: [
+    ReviewPage
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    })
+
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    Geolocation,
+    Toast,
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}

src/app/app.scss

+
+
+
+/*
+  Site Name: ALLOREPAR
+  URI: http:
+  Description: This is the theme scss for ALLOREPAR
+  Version: 2.0
+  Author: 
+  Author URI:
+  Tags:
+
+	---------------------------
+	THEME STYLES
+	---------------------------
+
+	TABLE OF CONTENTS
+	---------------------------
+	 01. FONTS-N-SIZES
+	 02. FONTS-COLOR
+	 03. THEMES-N-BACKGROUNDS
+	 04. SPACING-N-POSITIONS
+	 05. ALIGMENTS
+	 06. ALERTS-N-MESSAGES
+
+
+*/
+
+
+/*-------------------------------
+
+01. FONTS-N-SIZES
+
+--------------------------------*/
+
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&display=swap');
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
+* {
+    font-family: 'Work Sans', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scroll .scroll-content {
+    overflow: hidden;
+}
+
+a {
+    text-decoration: none !important;
+}
+
+button{
+    outline: none;  
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none !important; 
+  margin: 0; 
+}
+
+html,
+body {
+    font-family: 'Lato', sans-serif !important;
+    margin:0px;
+}
+
+button{
+    cursor: pointer;
+}
+
+.start_wizard_wrapper{
+    ion-slides{
+        .swiper-pagination{
+            .swiper-pagination-bullet{
+                background: #282438 !important;
+            }
+        }
+    }
+}
+
+
+
+
+/*-------------------------------
+
+02. FONTS-SETTINGS
+
+--------------------------------*/
+
+.text_color_white {
+    color: #fff !important;
+}
+
+
+.font_size_xs {
+    font-size: 12px !important;
+}
+
+.font_size_sm {
+    font-size: 14px !important;
+}
+
+.font_size_md {
+    font-size: 16px !important;
+}
+
+.font_size_lg {
+    font-size: 18px !important;
+}
+
+.font_size_xl {
+    font-size: 20px !important;
+}
+
+.font_size_vl {
+    font-size: 35px !important;
+}
+
+.font_weight300 {
+    font-weight: 300 !important;
+}
+
+.font_weight400 {
+    font-weight: 400 !important;
+}
+
+.font_weight500 {
+    font-weight: 500 !important;
+}
+
+.font_weight600 {
+    font-weight: 600 !important;
+}
+
+
+/*-------------------------------
+
+03. THEMES-N-BACKGROUNDS
+
+--------------------------------*/
+
+.theme_background {
+    background-size: cover !important;
+    background-position: center !important;
+}
+
+.theme_transparent {
+    background: transparent !important;
+}
+
+.theme_white {
+    background-color: #f7f8fd !important;
+}
+
+.theme_off_white {
+    background-color: #f4f4f4 !important;
+}
+
+.theme_dark_transparent {
+    background-color: rgba(0, 0, 0, 0.6) !important;
+}
+
+.theme_white_transparent {
+    background-color: rgba(243, 243, 243, 0.6) !important;
+}
+
+
+
+
+/*-------------------------------
+
+04. SPACING-N-POSITIONS
+
+--------------------------------*/
+
+.width25 {
+    width: 25% !important;
+}
+
+.width50 {
+    width: 50% !important;
+}
+
+.width75 {
+    width: 75% !important;
+}
+
+.widthFull {
+    width: 100% !important;
+}
+
+.widthAuto {
+    width: auto !important;
+}
+
+.height25 {
+    height: 25% !important;
+}
+
+.height50 {
+    height: 50% !important;
+}
+
+.height75 {
+    width: 75% !important;
+}
+
+.heightFull {
+    height: 100% !important;
+}
+
+.heightAuto {
+    height: auto !important;
+}
+
+.p0 {
+    padding: 0px !important;
+}
+
+.pl0 {
+    padding-left: 0px !important;
+}
+
+.pr0 {
+    padding-right: 0px !important;
+}
+
+.pt0 {
+    padding-top: 0px !important;
+}
+
+.pb0 {
+    padding-bottom: 0px !important;
+}
+
+.p10 {
+    padding: 10px !important;
+}
+
+.pt10 {
+    padding-top: 10px !important;
+}
+
+.m0 {
+    margin: 0px !important;
+}
+
+.ml0 {
+    margin-left: 0px !important;
+}
+
+.mr0 {
+    margin-right: 0px !important;
+}
+
+.mt0 {
+    margin-top: 0px !important;
+}
+
+.mb0 {
+    margin-bottom: 0px !important;
+}
+
+.mAuto {
+    margin: 0 auto !important;
+}
+
+.clear {
+    clear: both !important;
+}
+
+.absolute {
+    position: absolute !important;
+}
+
+.relative {
+    position: relative !important;
+}
+
+.fixed {
+    position: fixed !important;
+}
+
+.borderNone {
+    border: none !important;
+}
+
+
+/*-------------------------------
+
+05. ALIGMENTS
+
+--------------------------------*/
+
+.floatLeft {
+    float: left !important;
+}
+
+.floatRight {
+    float: right !important;
+}
+
+.textLeft {
+    text-align: left !important;
+}
+
+.textRight {
+    text-align: right !important;
+}
+
+.textCenter {
+    text-align: center !important;
+}
+
+.app_header{
+    height:70px;
+    -webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+-moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+}
+
+
+
+
+.nav_btn{
+    width:50px;
+    height:50px;
+    background-color: transparent;
+    color: #282438;
+    font-size: 25px;
+}
+
+.nav_title{
+    width: calc(100% - 100px);
+    color: #282438;
+    padding: 15px;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: 400;
+    text-align:center;
+    img{
+        height: 30px;
+    }
+    h4{
+        margin: 0px;
+        font-weight:500;
+        padding:0px;
+        font-size: 20px;
+        text-align: center;
+        text-transform: uppercase;
+        span{
+            color: #39267f;
+        }
+    }
+}
+
+.nav_btn{
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background-size: 25px !important;
+}
+
+
+.nav_btn_text{
+    color: #39267f;
+    font-size: 18px;
+}
+
+.back_btn{
+    background-image: url("../assets/img/asset_back.png");
+}
+
+
+.menu_btn{
+    background-image: url("../assets/img/asset_menu.png");
+}
+
+.cart_btn{
+    background-image: url("../assets/img/asset_cart.png");
+}
+
+.nav_filter{
+    background-image: url("../assets/img/asset_filter.png");
+}
+
+.account_pic{
+    img{
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        object-fit:cover;
+        object-position:center;
+    }
+    
+}
+
+
+
+.item-native{
+    padding-left: 0px !important;
+}
+
+
+.header-md:after{
+    background-image: none !important;
+}
+
+.header-ios:after{
+    background-image: none !important;
+}
+
+.button-native{
+    border-radius: 0px !important;
+   }
+
+
+   app-review{
+    background: transparent;
+}
+
+ion-modal{
+    --background: var(--ion-background-color,transparent);
+}
+
+
+.select_footer{
+    height: 115px;
+    background: url("../assets/img/asset_cm_footer.png");
+    background-repeat: no-repeat;
+    background-size:cover;
+    position: fixed;
+    bottom: 0px;
+    left:0px;
+    right:0px;
+    padding: 15px;
+    padding-top: 30px;
+    h6{
+        color:#fff;
+        font-weight: 400;
+        margin:0px;
+        padding-bottom: 5px;
+    }
+
+    .next_btn{
+        background-color: #ffffff;
+        color: #39267f;
+        border-radius: 20px;
+        height:35px;
+        font-size: 18px;
+        padding-left:30px;
+        padding-right:30px;
+        position: relative;
+        top: 30%;
+    }
+}
+
+.premium_badge{
+    background-image: linear-gradient(to right, #473294 , #8164ec);
+    color: #fff !important;
+    font-size: 12px;
+    padding: 3px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    font-weight: 300;
+    position: relative;
+    bottom: 2px;
+}
+
+
+
+
+
+

src/app/available/available.module.ts

+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 { AvailablePage } from './available.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AvailablePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [AvailablePage]
+})
+export class AvailablePageModule {}

src/app/available/available.page.html

+<ion-header>
+  <div class="app_header">
+      <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+      </button>
+    <div class="nav_title floatLeft"><h4>AVAILABLE WORKSHOPS <span>6</span></h4></div>
+    <button class="nav_btn nav_filter floatRight" (click)="filterToggle()">
+
+      </button>
+    <div class="clear"></div>
+</div>
+</ion-header>
+<ion-content>
+  <div class="home_wrapper">
+    <ul>
+        <h3>2 Services</h3>
+      <li (click)="goToPage('bookservice')">
+        <div class="circle">
+          <img src="../../assets/img/asset_shop1.png">
+        </div>
+        <div class="details">
+            <div class="list_btn book">Book</div>
+          <h5>Presto Towing Services</h5>
+          <fieldset class="rating">
+              <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+              <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+              <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+              <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+              <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+              <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+              <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+              <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+              <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+              <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+          </fieldset>
+          <p>34 Reviews</p>
+          <h6 class="floatLeft"><span class="">Total Amount : <strong>$180</strong></span></h6>
+          <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
+            <div class="clear"></div>
+        </div>
+        <div class="clear"></div>
+      </li>
+      <li (click)="goToPage('bookservice')">
+          <div class="circle">
+            <img src="../../assets/img/asset_shop2.png">
+          </div>
+          <div class="details">
+              <div class="list_btn book">Book</div>
+            <h5>Presto Towing Services</h5>
+            <fieldset class="rating">
+                <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+            </fieldset>
+            <p>34 Reviews</p>
+            <h6 class="floatLeft"><span class="">Total Amount : <strong>$180</strong></span></h6>
+            <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
+            <div class="clear"></div>
+          </div>
+          <div class="clear"></div>
+        </li>
+    </ul>
+  </div>
+
+  <div class="filter_menu" *ngIf="filterShow" [@slideInOut]>
+      <div class="menu_outter" (click)="filterToggle()">
+      </div>
+      <div class="menu_inner">
+        <h4>Sort by</h4>
+        <ul>
+          <li (click)="filterToggle()">Amount</li>
+          <li (click)="filterToggle()">Location</li>
+          <li (click)="filterToggle()">Rating</li>
+          <li (click)="filterToggle()">Only Premium</li>
+        </ul>
+      </div>
+    </div>
+</ion-content>

src/app/available/available.page.scss

+.home_wrapper{
+    padding-top:10px;
+    .location_box{
+      position: fixed;
+      left:0px;
+      top: 60px;
+      right:0px;
+      z-index: 999;
+    }
+    .location_bar{
+      max-width:200px;
+      background: #fbd339;
+      padding:5px;
+    border-radius: 20px;
+    margin:0 auto;
+    text-align: center;
+    -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    background-image: url("../../assets/img/aaset_loc.png");
+    background-position: left 15px top 6px;
+    background-repeat: no-repeat;
+    padding-left:35px;
+    padding-right:30px;
+    background-size: 15px;
+    font-size: 14px;
+    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+    }
+    
+    ul{
+        h3{
+            color: #39267f;
+            margin: 0px;
+            padding-bottom: 15px;
+            font-size: 20px;
+        }
+        padding:10px;
+        margin:0px;
+        li{
+            background: #f6f5fa;
+            border-radius:10px;
+            margin-bottom: 10px;
+            position: relative;
+            padding:20px;
+            .circle{
+                width:60px;
+                height:60px;
+                float: left;
+                img{
+                    width: 100%;
+                    height:100%;
+                }
+            }
+            .details{
+                float: right;
+                width:calc(100% - 60px);
+                padding-left: 20px;
+                h5{
+                    margin:0px;
+                    padding:0px;
+                    padding-bottom: 5px;
+                }
+                .list_btn{
+                    position: absolute;
+                    right: 2px;
+                    top: 17px;
+                    font-size: 14px;
+                }
+                .remind{
+                    color: #282438;
+                    background: url("../../assets/img/asset_remind.png");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100%;
+                    padding: 10px;
+                    padding-left: 15px;
+                    padding-right: 15px;
+                }
+                .book{
+                    color: #fff;
+                    background: url("../../assets/img/asset_book.png");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100%;
+                    padding: 10px;
+                    padding-left: 15px;
+                    padding-right: 15px;
+                }
+                p{
+                    margin:0px;
+                    padding:0px;
+                    color: #282438;
+                    font-size: 12px;
+                    padding-top: 5px;
+                }
+                h6{
+                    margin:0px;
+                    padding: 0px;
+                    padding-top:8px;
+                    strong{
+                        color: #39267f;
+                    }
+                }
+                .distance_banner{
+                    background-color: #fff;
+                    padding: 3px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    background-image: url("../../assets/img/aaset_loc.png");
+                    background-position: left 5px top 4px;
+                    background-repeat: no-repeat;
+                    padding-left: 20px;
+                    background-size: 12px;
+                    border-radius: 10px;
+                    margin-right: 10px;
+                    font-size: 12px;
+                }
+                .other_banner{
+                    background: #fbd339;
+                    color: #282438;
+                    padding: 3px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    font-size: 12px;
+                }
+
+                .playit{
+                    padding-top: 8px;
+                    img{
+                        width: 15px;
+                    }
+                }
+                .rating { 
+                    border: none;
+                    width:85px;
+                    margin: 0px;
+                    padding: 0px;
+                  }
+                  
+                  .rating > input { display: none; } 
+                  .rating > label:before { 
+                    margin:2px;
+                    font-size:14px;
+                    font-family: FontAwesome;
+                    display: inline-block;
+                    content: "\f005";
+                  }
+                  
+                  .rating > .half:before { 
+                    content: "\f089";
+                    position: absolute;
+                  }
+                  
+                  .rating > label { 
+                    color: #dcdae9; 
+                   float: right; 
+                  }
+                  
+                  /***** CSS Magic to Highlight Stars on Hover *****/
+                  
+                  .rating > input:checked ~ label, /* show gold star when clicked */
+                  .rating:not(:checked) > label:hover, /* hover current star */
+                  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                  
+                  .rating > input:checked + label:hover, /* hover current star when changing rating */
+                  .rating > input:checked ~ label:hover,
+                  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+            }
+        }
+    }
+}
+
+
+.filter_menu{
+    position: fixed;
+    top: 0px;
+    left:0px;
+    right:0px;
+    bottom: 0px;
+    background-color:rgba(0,0,0,0.5);
+    z-index: 99;
+    .menu_outter{
+      width: 100%;
+      height:calc(100% - 220px);
+    }
+    .menu_inner{
+      height: 220px;
+      padding: 15px;
+      transition: all 0.5s ease;
+      padding-top:40px;
+      background-image: url("../../assets/img/asset_menu_wrapper.png");
+      background-position: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+        h4{
+            text-align: center;
+            color: #9c97b7;
+            margin:0px;
+            padding: 0px;
+            font-size: 16px;
+            padding-bottom: 10px;
+        }
+
+        ul{
+            margin:0px;
+            padding:0px;
+            li{
+                list-style: none;
+                text-align: center;
+                color: #282438;
+                font-size: 18px;
+                padding: 7px;
+                font-weight:500;
+                &:focus{
+                    background: #fff;
+                    border-radius: 20px;
+                }
+                &:hover{
+                    background: #fff;
+                    border-radius: 20px;
+                }
+            }
+        }
+
+  
+    }
+  }
\ No newline at end of file

src/app/available/available.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvailablePage } from './available.page';
+
+describe('AvailablePage', () => {
+  let component: AvailablePage;
+  let fixture: ComponentFixture<AvailablePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AvailablePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AvailablePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/available/available.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+
+@Component({
+  selector: 'app-available',
+  templateUrl: './available.page.html',
+  styleUrls: ['./available.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('300ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class AvailablePage implements OnInit {
+  filterShow = false;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+
+  filterToggle(){
+    this.filterShow = !this.filterShow;
+  }
+
+}

src/app/booking/booking.module.ts

+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 { BookingPage } from './booking.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookingPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [BookingPage]
+})
+export class BookingPageModule {}

src/app/booking/booking.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>Presto towing Service</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+  </ion-header>
+<ion-content>
+    <div class="home_wrapper">
+        <div class="location_box">
+            <div class="location_bar">
+                4KM
+              </div>
+        </div>
+        <div class="banner">
+          <img src="../../assets/img/asset_banner.png">
+        </div>
+        <div class="btn_bay">
+          <button class="btn call_btn">Call Allo Repar</button>
+          <button class="btn book_btn" (click)="goToPage('waiting')">Book Service</button>
+        </div>
+        <div class="pay_description">
+          <h6>
+            <span>
+              <img src="../../assets/img/asset_c1.png">
+            </span>
+            <span>
+              <img src="../../assets/img/asset_c2.png">
+            </span>
+            <span>
+              <img src="../../assets/img/asset_c3.png">
+            </span>
+            <span>
+              <img src="../../assets/img/asset_c4.png">
+            </span>
+          </h6>
+          <h6>
+            <span>
+              <img src="../../assets/img/asset_web.png">
+              <a>www.presto.com</a></span>
+          </h6>
+        </div>
+        <div class="bottom_tab_bay">
+          <ul>
+            <li [class.active]="tab == 'about'" (click)="tab_swap('about')">About</li>
+            <li [class.active]="tab == 'review'" (click)="tab_swap('review')">Reviews</li>
+          </ul>
+        </div>
+        <div class="tab_content">
+          <div class="tab_content_inner" [hidden]="tab !='about'">
+            <div class="top_div">
+              <div class="pic_circle"></div>
+              <div class="pic_details">
+                <h5>Sam Johns</h5>
+                <p>Workshop owner</p>
+              </div>
+              <div class="clear"></div>
+            </div>
+            <div class="shopper_details">
+              <p>We promise to help you find the best car tyres Dubai has to offer.<br><br>
+              There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all customers from motorists to high performance and off road enthusiasts.<br><br>
+              Our mission at Presto Tyres declares our purpose as one of the best tire companies in Dubai.
+              </p>
+            </div>
+          </div>
+          <div class="tab_content_inner" [hidden]="tab !='review'">
+            <div class="rating_div">
+              <ion-row>
+                <ion-col col-8 class="p0">
+                    <fieldset class="rating">
+                        <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                        <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                        <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                        <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                        <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                        <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                        <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                        <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                        <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                        <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                    </fieldset>
+                    <span>4 Star | 34 Reviews</span>
+                </ion-col>
+                <ion-col col-4 class="p0 textRight">
+                  <button class="add_review" (click)="istoggle()">+</button>
+                </ion-col>
+              </ion-row>
+            </div>
+            <div class="review_list">
+              <ul>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                            <img src="../../assets/img/asset_star.png">4
+                          </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                            <img src="../../assets/img/asset_star.png">4
+                          </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                          <img src="../../assets/img/asset_star.png">4
+                        </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                            <img src="../../assets/img/asset_star.png">4
+                          </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+    </div>
+</ion-content>
+<div class="review_wrapper" *ngIf="isShow" [@slideInOut]>
+  <div class="rate_card">
+    <div class="inner_shop_name">
+      <ion-row>
+        <ion-col class="p0">
+            <h5>Smart Mortors</h5>
+            <p><img src="../../assets/img/asset_avatar_sml.png">Peter mcWay</p>
+        </ion-col>
+        <ion-col class="p0">
+          <h6>Service - 2 days ago</h6>
+        </ion-col>
+      </ion-row>
+    </div>
+    <ion-row>
+        <ion-col class="p0">
+          <h4>Write a review</h4>
+          <div class="row">
+            <ion-input value="Caption" type="text"></ion-input>
+          </div>
+          <div class="row">
+            <ion-input value="Your comments" type="text"></ion-input>
+          </div>
+          <div class="row">
+            <button class="signup_btn" (click)="istoggle()">Next</button>
+          </div>
+        </ion-col>
+    </ion-row>
+  </div>
+</div>
+

src/app/booking/booking.page.scss

+.home_wrapper{
+    .location_box{
+      position: fixed;
+      left:0px;
+      top: 60px;
+      right:0px;
+      z-index: 999;
+    }
+    .location_bar{
+      max-width:100px;
+      background: #fff;
+      padding:5px;
+      border-radius: 20px;
+      margin:0 auto;
+      text-align: center;
+      -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      background-image: url("../../assets/img/aaset_loc.png");
+      background-position: left 15px top 6px;
+      background-repeat: no-repeat;
+      padding-left:30px;
+      padding-right:30px;
+      background-size: 15px;
+      font-size: 14px;
+      white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    }
+
+    .banner{
+        width:100%;
+        height: 150px;
+        img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .btn_bay{
+      text-align: center;
+      padding:15px;
+      .btn{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        width: 48%;
+      }
+      .call_btn{
+        display: inline-block;
+        background-color: #28be57;
+        color: #fff;
+        background-image: url("../../assets/img/asset_call.png");
+        background-position: left 5px top 0px;
+        background-repeat: no-repeat;
+        background-size: 35px;
+      }
+      .book_btn{
+        display: inline-block;
+        background-color: #39267f;
+        color: #fff;
+      }
+      .remind_btn{
+        display: inline-block;
+        background-color: #fbd339;
+        color: #282438;
+      }
+    }
+    .pay_description{
+      background-color: #f6f5fa;
+      padding:15px;
+      h6{
+        margin:0px;
+        padding:0px;
+        padding-bottom: 10px;
+        span{
+          img{
+            height:20px;
+            margin-right:15px;
+          }
+          a{
+            text-decoration: none;
+            color: #39267f;
+            font-size: 13px;
+            position: relative;
+            bottom: 5px;
+          }
+        }
+      }
+    }
+    .bottom_tab_bay{
+      border:1px solid #dcdae9;
+      border-bottom-left-radius: 25px; 
+      border-bottom-right-radius: 25px; 
+      ul{
+        padding:0px;
+        margin:0px;
+        li{
+          width: 50%;
+          display: inline-block;
+          list-style: none;
+          text-align: center;
+          padding: 10px;
+          font-weight: 500;
+          &:nth-child(odd){
+            border-bottom-left-radius: 25px; 
+          }
+          &:nth-child(even){
+            border-bottom-right-radius: 25px; 
+          }
+
+        }
+        .active{
+          background: #dcdae9;
+          color: #39267f;
+        }
+      }
+    }
+    .tab_content{
+      .tab_content_inner{
+        .top_div{
+          padding: 10px;
+          .pic_circle{
+            width:40px;
+            height:40px;
+            border-radius: 50%;
+            object-fit: cover;
+            object-position: center;
+            border:1px solid #dcdae9;
+            float: left;
+            img{
+              width: 100%;
+              height: 100%;
+              border-radius: 50%;
+              object-fit: cover;
+              object-position: center;
+            }
+          }
+          .pic_details{
+            width: calc(100% - 40px);
+            padding:2px;
+            padding-left: 10px;
+            float: left;
+            h5{
+              margin:0px;
+              padding:0px;
+              font-size: 16px;
+              padding-bottom: 3px;
+            }
+            p{
+              margin:0px;
+              padding: 0px;
+              color: #9c97b7;
+              font-size: 13px;
+            }
+          }
+        }
+        .shopper_details{
+          padding: 15px;
+          p{
+            margin:0px;
+            padding:0px;
+            color: #4e4961;
+            text-align: justify;
+          }
+        }
+        .rating_div{
+          width:100%;
+          padding: 15px;
+          span{
+            color: #4e4961;
+            font-size: 16px;
+            font-weight: 500;
+          }
+
+          .add_review{
+            width: 40px;
+            height:40px;
+            background-color: #fbd339;
+            color: #403838;
+            border-radius: 50%;
+            font-size: 30px;
+          }
+          .rating { 
+            border: none;
+            width:135px;
+            margin: 0px;
+            padding: 0px;
+            padding-bottom: 5px;
+          }
+          
+          .rating > input { display: none; } 
+          .rating > label:before { 
+            margin:2px;
+            font-size:24px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+          }
+          
+          .rating > .half:before { 
+            content: "\f089";
+            position: absolute;
+          }
+          
+          .rating > label { 
+            color: #dcdae9; 
+           float: right; 
+          }
+          
+          /***** CSS Magic to Highlight Stars on Hover *****/
+          
+          .rating > input:checked ~ label, /* show gold star when clicked */
+          .rating:not(:checked) > label:hover, /* hover current star */
+          .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+          
+          .rating > input:checked + label:hover, /* hover current star when changing rating */
+          .rating > input:checked ~ label:hover,
+          .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+          .rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
+        }
+
+        .review_list{
+          ul{
+            margin:0px;
+            padding:10px;
+            li{
+              list-style: none;
+              background-color: #f6f5fa;
+              border-radius:15px;
+              margin-bottom: 10px;
+              .top_div{
+                .pic_circle{
+                  width:40px;
+                  height:40px;
+                  border-radius: 50%;
+                  object-fit: cover;
+                  object-position: center;
+                  border:1px solid #dcdae9;
+                  float: left;
+                  img{
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    object-position: center;
+                  }
+                }
+                .pic_details{
+                  width: calc(100% - 70px);
+                  padding:2px;
+                  padding-left: 10px;
+                  float: left;
+                  h5{
+                    margin:0px;
+                    padding:0px;
+                    font-size: 16px;
+                    padding-bottom: 3px;
+                    color: #282438;
+                  }
+                  p{
+                    margin:0px;
+                    padding: 0px;
+                    color: #9c97b7;
+                    font-size: 13px;
+                    color: #282438;
+                  }
+                  h6{
+                    margin:0px;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #282438;
+                  }
+                  h4{
+                    margin:0px;
+                    font-size: 17px;
+                    padding-top: 8px;
+                    padding-bottom: 5px;
+                    color: #282438;
+                  }
+                }
+                .rating{
+                  width: 30px;
+                  float: right;
+                  color: #282438;
+                  img{
+                    width: 15px;
+                    margin-right: 4px;
+                    
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+}
+
+.review_wrapper{
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  left:0px;
+  right:0px;
+  bottom: 0px;
+  z-index: 9;
+  .rate_card{
+    background-color: #f6f5fa;
+    border-radius:15px;
+    padding: 20px;
+    .inner_shop_name{
+      border-left:3px solid #fbd339;
+      padding-left: 10px;
+      margin-bottom: 25px;
+      h5{
+        margin:0px;
+        padding:0px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 2px;
+
+      }
+      p{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        img{
+          width: 15px;
+          height:15px;
+          border-radius: 50%;
+          object-fit:cover;
+          object-position:center;
+          margin-right:5px;
+          position: relative;
+          top: 3px;
+
+        }
+      }
+      h6{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        text-align: right;
+      }
+    }
+    h4{
+      margin:0px;
+      padding:0px;
+      font-size: 16px;
+      text-align:left;
+      padding-bottom:10px;
+    }
+
+    .rating { 
+      border: none;
+      width:260px;
+      margin: 0 auto;
+    }
+    
+    .rating > input { display: none; } 
+    .rating > label:before { 
+      margin: 5px;
+      font-size:40px;
+      font-family: FontAwesome;
+      display: inline-block;
+      content: "\f005";
+    }
+    
+    .rating > .half:before { 
+      content: "\f089";
+      position: absolute;
+    }
+    
+    .rating > label { 
+      color: #dcdae9; 
+     float: right; 
+    }
+    
+  
+    
+    .rating > input:checked ~ label, 
+    .rating:not(:checked) > label:hover, 
+    .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } 
+    
+    .rating > input:checked + label:hover,
+    .rating > input:checked ~ label:hover,
+    .rating > label:hover ~ input:checked ~ label, 
+    .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+  }
+
+  .signup_btn{
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    background-color: #39267f;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 16px; 
+}
+
+.row{
+  padding-bottom: 10px;
+  ion-input{
+    background: #dcdae9;
+    border-radius: 20px;
+    color:#a29ebf;
+    height: 40px;
+    font-weight:400;
+    padding-left: 15px !important;
+}
+}
+}
\ No newline at end of file

src/app/booking/booking.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookingPage } from './booking.page';
+
+describe('BookingPage', () => {
+  let component: BookingPage;
+  let fixture: ComponentFixture<BookingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookingPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/booking/booking.page.ts

+import { Component } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { ReviewPage} from '../review/review.page';
+
+@Component({
+  selector: 'app-booking',
+  templateUrl: './booking.page.html',
+  styleUrls: ['./booking.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('300ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class BookingPage{
+
+  tab:any;
+  isShow = false;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { 
+
+    this.tab = "about";
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+
+  tab_swap(type) {
+    this.tab = type;
+   }
+
+   
+
+
+   istoggle(){
+    this.isShow = !this.isShow;
+  }
+
+
+
+
+
+}

src/app/bookservice/bookservice.module.ts

+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 { BookservicePage } from './bookservice.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookservicePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [BookservicePage]
+})
+export class BookservicePageModule {}

src/app/bookservice/bookservice.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>N Torque Repair <span class="premium_badge">PREMIUM</span></h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+  </ion-header>
+<ion-content>
+    <div class="home_wrapper">
+        <div class="location_box">
+            <div class="location_bar">
+                Location revailed after booked
+              </div>
+        </div>
+        <div class="banner">
+          <img src="../../assets/img/asset_banner.png">
+        </div>
+        <div class="service_amount">
+          <ion-row>
+            <ion-col><p>Service</p></ion-col>
+            <ion-col class="textRight"><p>$290</p></ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col><p>Labour Charge</p></ion-col>
+              <ion-col class="textRight"><p>$50</p></ion-col>
+          </ion-row>
+          <hr>
+          <ion-row>
+              <ion-col><p>Total Amount</p></ion-col>
+              <ion-col class="textRight"><p><strong>$340</strong></p></ion-col>
+          </ion-row>
+          <button class="signup_btn">Book Service</button>
+          <div class="service_details">
+            <img src="../../assets/img/asset_no_booking.png">
+            <p>Workshop Details will be revealed <br>
+                after booking</p>
+          </div>
+        </div>
+    </div>
+</ion-content>
+
+

src/app/bookservice/bookservice.page.scss

+.nav_title{
+    width: calc(100% - 50px);
+}
+.home_wrapper{
+    .location_box{
+      position: fixed;
+      left:0px;
+      top: 60px;
+      right:0px;
+      z-index: 999;
+    }
+    .location_bar{
+      max-width:70%;
+      background: #fff;
+      padding:5px;
+      border-radius: 20px;
+      margin:0 auto;
+      text-align: center;
+      -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      background-image: url("../../assets/img/aaset_loc.png");
+      background-position: left 15px top 6px;
+      background-repeat: no-repeat;
+      padding-left:30px;
+      padding-right:30px;
+      background-size: 15px;
+      font-size: 14px;
+      white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #39267f;
+    }
+
+    .banner{
+        width:100%;
+        height: 150px;
+        img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .btn_bay{
+      text-align: center;
+      padding:15px;
+      .btn{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        width: 48%;
+      }
+      .call_btn{
+        display: inline-block;
+        background-color: #28be57;
+        color: #fff;
+        background-image: url("../../assets/img/asset_call.png");
+        background-position: left 5px top 0px;
+        background-repeat: no-repeat;
+        background-size: 35px;
+      }
+      .book_btn{
+        display: inline-block;
+        background-color: #39267f;
+        color: #fff;
+      }
+      .remind_btn{
+        display: inline-block;
+        background-color: #fbd339;
+        color: #282438;
+      }
+    }
+    .pay_description{
+      background-color: #f6f5fa;
+      padding:15px;
+      h6{
+        margin:0px;
+        padding:0px;
+        padding-bottom: 10px;
+        span{
+          img{
+            height:20px;
+            margin-right:15px;
+          }
+          a{
+            text-decoration: none;
+            color: #39267f;
+            font-size: 13px;
+            position: relative;
+            bottom: 5px;
+          }
+        }
+      }
+    }
+    .bottom_tab_bay{
+      border:1px solid #dcdae9;
+      border-bottom-left-radius: 25px; 
+      border-bottom-right-radius: 25px; 
+      ul{
+        padding:0px;
+        margin:0px;
+        li{
+          width: 50%;
+          display: inline-block;
+          list-style: none;
+          text-align: center;
+          padding: 10px;
+          font-weight: 500;
+          &:nth-child(odd){
+            border-bottom-left-radius: 25px; 
+          }
+          &:nth-child(even){
+            border-bottom-right-radius: 25px; 
+          }
+
+        }
+        .active{
+          background: #dcdae9;
+          color: #39267f;
+        }
+      }
+    }
+    .tab_content{
+      .tab_content_inner{
+        .top_div{
+          padding: 10px;
+          .pic_circle{
+            width:40px;
+            height:40px;
+            border-radius: 50%;
+            object-fit: cover;
+            object-position: center;
+            border:1px solid #dcdae9;
+            float: left;
+            img{
+              width: 100%;
+              height: 100%;
+              border-radius: 50%;
+              object-fit: cover;
+              object-position: center;
+            }
+          }
+          .pic_details{
+            width: calc(100% - 40px);
+            padding:2px;
+            padding-left: 10px;
+            float: left;
+            h5{
+              margin:0px;
+              padding:0px;
+              font-size: 16px;
+              padding-bottom: 3px;
+            }
+            p{
+              margin:0px;
+              padding: 0px;
+              color: #9c97b7;
+              font-size: 13px;
+            }
+          }
+        }
+        .shopper_details{
+          padding: 15px;
+          p{
+            margin:0px;
+            padding:0px;
+            color: #4e4961;
+            text-align: justify;
+          }
+        }
+        .rating_div{
+          width:100%;
+          padding: 15px;
+          span{
+            color: #4e4961;
+            font-size: 16px;
+            font-weight: 500;
+          }
+
+          .add_review{
+            width: 40px;
+            height:40px;
+            background-color: #fbd339;
+            color: #403838;
+            border-radius: 50%;
+            font-size: 30px;
+          }
+          .rating { 
+            border: none;
+            width:135px;
+            margin: 0px;
+            padding: 0px;
+            padding-bottom: 5px;
+          }
+          
+          .rating > input { display: none; } 
+          .rating > label:before { 
+            margin:2px;
+            font-size:24px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+          }
+          
+          .rating > .half:before { 
+            content: "\f089";
+            position: absolute;
+          }
+          
+          .rating > label { 
+            color: #dcdae9; 
+           float: right; 
+          }
+          
+          /***** CSS Magic to Highlight Stars on Hover *****/
+          
+          .rating > input:checked ~ label, /* show gold star when clicked */
+          .rating:not(:checked) > label:hover, /* hover current star */
+          .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+          
+          .rating > input:checked + label:hover, /* hover current star when changing rating */
+          .rating > input:checked ~ label:hover,
+          .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+          .rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
+        }
+
+        .review_list{
+          ul{
+            margin:0px;
+            padding:10px;
+            li{
+              list-style: none;
+              background-color: #f6f5fa;
+              border-radius:15px;
+              margin-bottom: 10px;
+              .top_div{
+                .pic_circle{
+                  width:40px;
+                  height:40px;
+                  border-radius: 50%;
+                  object-fit: cover;
+                  object-position: center;
+                  border:1px solid #dcdae9;
+                  float: left;
+                  img{
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    object-position: center;
+                  }
+                }
+                .pic_details{
+                  width: calc(100% - 70px);
+                  padding:2px;
+                  padding-left: 10px;
+                  float: left;
+                  h5{
+                    margin:0px;
+                    padding:0px;
+                    font-size: 16px;
+                    padding-bottom: 3px;
+                    color: #282438;
+                  }
+                  p{
+                    margin:0px;
+                    padding: 0px;
+                    color: #9c97b7;
+                    font-size: 13px;
+                    color: #282438;
+                  }
+                  h6{
+                    margin:0px;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #282438;
+                  }
+                  h4{
+                    margin:0px;
+                    font-size: 17px;
+                    padding-top: 8px;
+                    padding-bottom: 5px;
+                    color: #282438;
+                  }
+                }
+                .rating{
+                  width: 30px;
+                  float: right;
+                  color: #282438;
+                  img{
+                    width: 15px;
+                    margin-right: 4px;
+                    
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+}
+
+.review_wrapper{
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  left:0px;
+  right:0px;
+  bottom: 0px;
+  z-index: 9;
+  .rate_card{
+    background-color: #f6f5fa;
+    border-radius:15px;
+    padding: 20px;
+    .inner_shop_name{
+      border-left:3px solid #fbd339;
+      padding-left: 10px;
+      margin-bottom: 25px;
+      h5{
+        margin:0px;
+        padding:0px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 2px;
+
+      }
+      p{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        img{
+          width: 15px;
+          height:15px;
+          border-radius: 50%;
+          object-fit:cover;
+          object-position:center;
+          margin-right:5px;
+          position: relative;
+          top: 3px;
+
+        }
+      }
+      h6{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        text-align: right;
+      }
+    }
+    h4{
+      margin:0px;
+      padding:0px;
+      font-size: 16px;
+      text-align:left;
+      padding-bottom:10px;
+    }
+
+    .rating { 
+      border: none;
+      width:260px;
+      margin: 0 auto;
+    }
+    
+    .rating > input { display: none; } 
+    .rating > label:before { 
+      margin: 5px;
+      font-size:40px;
+      font-family: FontAwesome;
+      display: inline-block;
+      content: "\f005";
+    }
+    
+    .rating > .half:before { 
+      content: "\f089";
+      position: absolute;
+    }
+    
+    .rating > label { 
+      color: #dcdae9; 
+     float: right; 
+    }
+    
+  
+    
+    .rating > input:checked ~ label, 
+    .rating:not(:checked) > label:hover, 
+    .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } 
+    
+    .rating > input:checked + label:hover,
+    .rating > input:checked ~ label:hover,
+    .rating > label:hover ~ input:checked ~ label, 
+    .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+  }
+
+  .signup_btn{
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    background-color: #39267f;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 16px; 
+}
+
+.row{
+  padding-bottom: 10px;
+  ion-input{
+    background: #dcdae9;
+    border-radius: 20px;
+    color:#a29ebf;
+    height: 40px;
+    font-weight:400;
+    padding-left: 15px !important;
+}
+}
+}
+
+.service_amount{
+    padding:15px;
+    p{
+        margin:0px;
+        padding:0px;
+        font-size: 16px;
+        strong{
+
+        }
+    }
+    hr{
+        border:2px dashed #4e4961;
+
+        border-top:0px;
+    }
+}
+
+.signup_btn{
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    background-color: #39267f;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 16px; 
+    margin-top:10px;
+}
+
+.service_details{
+    text-align: center;
+    padding-top: 30px;
+    img{
+        width: 26%;
+    }
+    p{
+        color: #9c97b7;
+        padding-top: 15px;
+    }
+}
\ No newline at end of file

src/app/bookservice/bookservice.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookservicePage } from './bookservice.page';
+
+describe('BookservicePage', () => {
+  let component: BookservicePage;
+  let fixture: ComponentFixture<BookservicePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookservicePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookservicePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/bookservice/bookservice.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+
+@Component({
+  selector: 'app-bookservice',
+  templateUrl: './bookservice.page.html',
+  styleUrls: ['./bookservice.page.scss'],
+})
+export class BookservicePage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/cancel/cancel.module.ts

+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 { CancelPage } from './cancel.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CancelPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [CancelPage]
+})
+export class CancelPageModule {}

src/app/cancel/cancel.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>cancel</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/cancel/cancel.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CancelPage } from './cancel.page';
+
+describe('CancelPage', () => {
+  let component: CancelPage;
+  let fixture: ComponentFixture<CancelPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CancelPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CancelPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cancel/cancel.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cancel',
+  templateUrl: './cancel.page.html',
+  styleUrls: ['./cancel.page.scss'],
+})
+export class CancelPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/carlist/carlist.module.ts

+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 { CarlistPage } from './carlist.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CarlistPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [CarlistPage]
+})
+export class CarlistPageModule {}

src/app/carlist/carlist.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>MY CARS</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        <div class="add_car" (click)="goToPage('addcar')">
+          +
+        </div>
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="carlist">
+    <ul>
+      <li>
+        <div class="auto_pic"></div>
+        <div class="auto_detail">
+          <h4><strong>Rolls Royce</strong> Ghost</h4>
+          <div class="auto_detail_inner">
+            <p>Mileage: 08 - 12</p>
+            <p>Model: 2019</p>
+          </div>
+        </div>
+        <div class="clear"></div>
+      </li>
+      <li>
+          <div class="auto_pic"></div>
+          <div class="auto_detail">
+            <h4><strong>Rolls Royce</strong> Ghost</h4>
+            <div class="auto_detail_inner">
+              <p>Mileage: 08 - 12</p>
+              <p>Model: 2019</p>
+            </div>
+          </div>
+          <div class="clear"></div>
+        </li>
+        <li>
+            <div class="auto_pic"></div>
+            <div class="auto_detail">
+              <h4><strong>Rolls Royce</strong> Ghost</h4>
+              <div class="auto_detail_inner">
+                <p>Mileage: 08 - 12</p>
+                <p>Model: 2019</p>
+              </div>
+            </div>
+            <div class="clear"></div>
+          </li>
+          <li>
+              <div class="auto_pic"></div>
+              <div class="auto_detail">
+                <h4><strong>Rolls Royce</strong> Ghost</h4>
+                <div class="auto_detail_inner">
+                  <p>Mileage: 08 - 12</p>
+                  <p>Model: 2019</p>
+                </div>
+              </div>
+              <div class="clear"></div>
+            </li>
+    </ul>
+  </div>
+</ion-content>

src/app/carlist/carlist.page.scss

+.add_car{
+    background-color: #39267f;
+    color: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    font-size: 30px;
+    padding: 4px;
+}
+
+
+
+.carlist{
+    padding:10px;
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            padding: 20px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+-moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+            .auto_pic{
+                width:60px;
+                height:60px;
+                -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                -moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                border-radius:15px;
+                float: left;
+                img{
+                    width: 100%;
+                    height:100%;
+                    border-radius: 15px;
+                    object-fit: cover;
+                    object-position: center;
+                }
+            }
+            .auto_detail{
+                float: left;
+                width: calc(100% - 60px);
+                padding-left:15px;
+                h4{
+                    margin:0px;
+                    padding: 0px;
+                    color: #282438;
+                    font-weight: 400;
+                    padding-bottom:5px;
+                    font-size: 16px;
+                    strong{
+                        font-weight: 500;
+                    }
+                }
+                .auto_detail_inner{
+                    border-left:1px dashed #4e4961;
+                    margin-left:10px;
+                    padding-left: 15px;
+                    p{
+                        margin:0px;
+                        padding: 0px;
+                        color: #a29ebf;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/carlist/carlist.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarlistPage } from './carlist.page';
+
+describe('CarlistPage', () => {
+  let component: CarlistPage;
+  let fixture: ComponentFixture<CarlistPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CarlistPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CarlistPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/carlist/carlist.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-carlist',
+  templateUrl: './carlist.page.html',
+  styleUrls: ['./carlist.page.scss'],
+})
+export class CarlistPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/complete/complete.module.ts

+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 { CompletePage } from './complete.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CompletePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [CompletePage]
+})
+export class CompletePageModule {}

src/app/complete/complete.page.html

+<ion-content>
+    <div class="waiting_wrapper">
+      <div class="logo_one">
+        <img src="../../assets/img/aaset_verified.png">
+      </div>
+      <h4>Service Completed</h4>
+      <p>Hope you are happy with the mechanic.</p>
+      <br>
+          <button class="review_btn">Write a review</button><br>
+          <button class="home">Home</button><br>
+          <button class="service_btn">Service History</button>
+    </div>
+  </ion-content>
+

src/app/complete/complete.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:30%;
+    .logo_one{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+        }
+    }
+    .logo{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        background-color: #fff;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+            border:1px solid #fbd339;
+        }
+    }
+    h4{
+        color: #fff;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom:40px;
+
+    }
+
+    .review_btn{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        display: inline-block;
+        background-color: #fbd339;
+        color: #282438;
+        padding-left: 20px;
+        padding-right: 20px;
+        margin-bottom: 20%;
+
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .service_btn{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+
+
+    .home{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .service_btn{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/complete/complete.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompletePage } from './complete.page';
+
+describe('CompletePage', () => {
+  let component: CompletePage;
+  let fixture: ComponentFixture<CompletePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CompletePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CompletePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/complete/complete.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-complete',
+  templateUrl: './complete.page.html',
+  styleUrls: ['./complete.page.scss'],
+})
+export class CompletePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/date/date.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule , ReactiveFormsModule} from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { DatePage } from './date.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DatePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [DatePage]
+})
+export class DatePageModule {}

src/app/date/date.page.html

+<ion-header>
+    <div class="app_header relative">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>DATE & TIME</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        </button>
+      <div class="clear"></div>
+  </div>
+  </ion-header>
+
+<ion-content>
+  <div class="select_services_wrapper">
+   
+      <ion-item>
+        <ion-label>Pick Date</ion-label>
+        <ion-datetime displayFormat="DD MM YY" [(ngModel)]="myDate" placeholder="Select Date" [min]="today"></ion-datetime>
+      </ion-item>
+      <h4>Instruction</h4>
+      <textarea rows="6" placeholder="Type here..."  [(ngModel)]="message" ></textarea>
+  
+  </div>
+    <div class="select_footer">
+        <ion-row>
+          <ion-col size="9">
+              <h6>2 Services</h6>
+              <h6>Rolls Royce Ghost</h6>
+              <h6>June 26th 2019<strong> 13:20 PM to 14:20 PM</strong> </h6>
+          </ion-col>
+          <ion-col size="3">
+            <button class="next_btn floatRight" (click)="movetoSelectCar()">Next</button>
+            <div class="clear"></div>
+          </ion-col>
+        </ion-row>
+      </div>
+</ion-content>

src/app/date/date.page.scss

+.select_services_wrapper{
+   padding: 10px;
+   ion-label{
+       color: #463293;
+       font-weight: 600 !important;
+   }
+
+   h4{
+       color: #282438;
+       padding: 10px;
+       
+   }
+   textarea{
+       width: 100%;
+       padding:20px;
+       background-color: #f6f5fa;
+       border-radius: 15px;
+       border:none;
+   }
+}
+
+
+.select_footer{
+    strong{
+        font-weight: 300;
+        font-size: 12px;
+    }
+}   
+

src/app/date/date.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatePage } from './date.page';
+
+describe('DatePage', () => {
+  let component: DatePage;
+  let fixture: ComponentFixture<DatePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/date/date.page.ts

+import { Component, OnInit } from '@angular/core';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Location } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-date',
+  templateUrl: './date.page.html',
+  styleUrls: ['./date.page.scss'],
+})
+export class DatePage implements OnInit {
+  myDate = new Date();
+  message: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+    private fb: FormBuilder
+  ) {
+    console.log(this.myDate);
+  }
+
+  ngOnInit() {
+  }
+
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+  movetoSelectCar() {
+  // const passData = {}
+  }
+}

src/app/deliveryaddress/deliveryaddress.module.ts

+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 { DeliveryaddressPage } from './deliveryaddress.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DeliveryaddressPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [DeliveryaddressPage]
+})
+export class DeliveryaddressPageModule {}

src/app/deliveryaddress/deliveryaddress.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>DELIVERY ADDRESS</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        <div class="add_car">
+          +
+        </div>
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="delivery_wrapper">
+    <ul>
+      <li>adadd</li>
+      <li>adadd</li>
+      <li>adadd</li>
+    </ul>
+  </div>
+</ion-content>

src/app/deliveryaddress/deliveryaddress.page.scss

+.add_car{
+    background-color: #39267f;
+    color: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    font-size: 30px;
+    padding: 4px;
+}
+.delivery_wrapper{
+    padding:15px;
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            list-style: none;
+            padding: 20px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+            -moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+            box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+        }
+    }
+}
\ No newline at end of file

src/app/deliveryaddress/deliveryaddress.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeliveryaddressPage } from './deliveryaddress.page';
+
+describe('DeliveryaddressPage', () => {
+  let component: DeliveryaddressPage;
+  let fixture: ComponentFixture<DeliveryaddressPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeliveryaddressPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeliveryaddressPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deliveryaddress/deliveryaddress.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-deliveryaddress',
+  templateUrl: './deliveryaddress.page.html',
+  styleUrls: ['./deliveryaddress.page.scss'],
+})
+export class DeliveryaddressPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/forgot/forgot.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule , ReactiveFormsModule} from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ForgotPage } from './forgot.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ForgotPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ForgotPage]
+})
+export class ForgotPageModule {}

src/app/forgot/forgot.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>Forgot Password</h4></div>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                  <div class="row">
+                    <form [formGroup]="forgotPswForm">
+                      <p>Type your Phone Number</p>
+                      <ion-row class="p0">
+                        <ion-col size="4">
+                          <ion-select placeholder="Phone Code" formControlName="user_countrycode" >
+                            <ion-select-option>+33</ion-select-option>
+                          </ion-select>
+                        </ion-col>
+                        <ion-col size="8">
+                          <ion-input placeholder="Phone Number" type="number" formControlName="user_phonenumber" ></ion-input>
+                        </ion-col>
+                      </ion-row>
+                    </form>
+                  </div>
+                  <div class="row">
+                      <button class="signup_btn" (click)="getPassword()">GET OTP</button>
+                    </div>
+              </div>
+        </div>
+      </ion-content>
+
+

src/app/forgot/forgot.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom: 15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+    }
+        
+}
\ No newline at end of file

src/app/forgot/forgot.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPage } from './forgot.page';
+
+describe('ForgotPage', () => {
+  let component: ForgotPage;
+  let fixture: ComponentFixture<ForgotPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ForgotPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForgotPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/forgot/forgot.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { FormBuilder, Validators } from '@angular/forms';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import {StorageService } from '../../Config/services/storage.service';
+import { ValidationService } from '../../Config/services/validation.service';
+@Component({
+  selector: 'app-forgot',
+  templateUrl: './forgot.page.html',
+  styleUrls: ['./forgot.page.scss'],
+})
+export class ForgotPage implements OnInit {
+  forgotPswForm = this.fb.group({
+    user_phonenumber: ['', Validators.required],
+    user_countrycode: ['', Validators.required]
+  });
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+    private fb: FormBuilder,
+    private storageService: StorageService,
+    private authenticationservice: AuthenticationService,
+    private validationservice: ValidationService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+getPassword() {
+  if ( this.forgotPswForm.valid) {
+    this.validationservice.presentLoader();
+    this.authenticationservice.post_data('user_forgetpsw', this.forgotPswForm.value).subscribe((data) => {
+      console.log(data);
+      this.validationservice.dismissLoader();
+      if (data.status === 'success') {
+        this.goToPage('/otp/' + JSON.stringify(data));
+      } else {
+        this.validationservice.presentToast(data.message);
+      }
+    });
+  }
+}
+}

src/app/general/general.module.ts

+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 { GeneralPage } from './general.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GeneralPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [GeneralPage]
+})
+export class GeneralPageModule {}

src/app/general/general.page.html

+
+   <ion-header>
+      <div class="app_header">
+          <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+          </button>
+        <div class="nav_title floatLeft"><h4>GENERAL DETAILS</h4></div>
+        <button class="nav_btn nav_btn_text floatRight">
+          </button>
+        <div class="clear"></div>
+    </div>
+  </ion-header>
+   <ion-content>
+      <div class="signup_wrapper">
+          <div class="signup_form">
+              <div class="row">
+                <p>Your Full Name</p>
+                <ion-input value="John Doe" type="text"></ion-input>
+              </div>
+              <div class="row">
+                  <p>Email Address</p>
+                  <ion-input value="[email protected]" type="text"></ion-input>
+              </div>
+              <div class="row">
+                  <p>Phone Number</p>
+                  <ion-row class="p0">
+                    <ion-col size="4">
+                      <ion-select placeholder="">
+                        <ion-select-option value="">+91</ion-select-option>
+                      </ion-select>
+                    </ion-col>
+                    <ion-col size="8">
+                      <ion-input value="" type="number"></ion-input>
+                    </ion-col>
+                  </ion-row>
+              </div>
+              <div class="row">
+                  <p>Country</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">Country Name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>District</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">District Name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>City</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">City Name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>Area</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">Area name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>House name/Building</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">Choose address</ion-select-option>
+                  </ion-select>
+              </div>
+                <div class="row">
+                    <button class="signup_btn">Save</button>
+                  </div>
+
+          </div>
+      </div>
+    </ion-content>

src/app/general/general.page.scss

+.signup_form{
+    padding: 15px;
+    .row{
+        margin-bottom: 15px;
+        p{
+            color: #4e4961;
+            padding: 10px;
+            margin: 0px;
+            padding-left: 20px;
+            font-weight: 500;
+            a{
+                color: #39267f;
+            }
+        }
+        h6{
+            color: #4e4961;
+            padding-left: 20px;
+            font-weight: 400;
+            font-size: 14px;
+
+        }
+        ion-input{
+            background: #dcdae9;
+            border-radius: 20px;
+            color:#39267f;
+            height: 40px;
+            font-weight: 600;
+            padding-left: 15px !important;
+        }
+
+        ion-select {
+            background: #dcdae9;
+            border-radius: 20px;
+            color:#39267f;
+            height: 40px;
+            font-weight: 600;
+            padding-left: 15px !important; 
+            padding-right: 20px;
+        }
+        .signup_btn{
+            height: 40px;
+            width: 100%;
+            color: #fff;
+            background-color: #39267f;
+            border-radius: 20px;
+            font-weight: 500;
+            font-size: 16px; 
+        }
+    }
+}
\ No newline at end of file

src/app/general/general.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralPage } from './general.page';
+
+describe('GeneralPage', () => {
+  let component: GeneralPage;
+  let fixture: ComponentFixture<GeneralPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeneralPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeneralPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/general/general.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-general',
+  templateUrl: './general.page.html',
+  styleUrls: ['./general.page.scss'],
+})
+export class GeneralPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/home/home.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+
+import { HomePage } from './home.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: HomePage
+      }
+    ])
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}

src/app/home/home.page.html

+<ion-header>
+  <div class="app_header">
+    <button class="nav_btn menu_btn floatLeft" (click)="menuToggle()">
+
+    </button>
+    <div class="nav_title floatLeft"><img src="../../assets/img/asset_logo.png"></div>
+    <button class="nav_btn floatLeft">
+      <div class="account_pic">
+          <img src="../../assets/img/asset_avatar.png">
+      </div>
+    </button>
+    <div class="clear"></div>
+</div>
+</ion-header>
+<ion-content>
+  <div class="home_wrapper">
+    <div class="location_box">
+        <div class="location_bar">
+            Infopark,Kakkanad
+          </div>
+    </div>
+    
+    <div class="home_main_stack_menu">
+        <ion-row>
+            <ion-col class="textCenter" (click)="goToPage('roadassistance')">
+              <img src="../../assets/img/asset_menu1.png">
+              <p>Road <br>Assistance</p>
+            </ion-col>
+            <ion-col class="textCenter" (click)="goToPage('listingservice')">
+                <img src="../../assets/img/asset_menu2.png">
+                <p>Car<br>Services</p>
+            </ion-col>
+            <ion-col class="textCenter" (click)="goToPage('purchaseparts')">
+                <img src="../../assets/img/asset_menu3.png">
+                <p>Parts<br>Purchase</p>
+            </ion-col>
+        </ion-row>
+    </div>
+    <div class="header_submenu">
+      <h4>People most purchased</h4>
+      <button class="more_btn" (click)="goToPage('purchaseparts')">More</button>
+      <div class="clear"></div>
+    </div>
+    <div class="product_section" *ngIf="peopleMostpurchasedList">
+      <ion-row>
+        <ion-col col-4 *ngFor="let product of peopleMostpurchasedList; let  i = index">
+          <div class="product_div">
+            <div class="rating">{{product.count}}</div>
+            <div class="product_img">
+              <img src="../../assets/img/asset_dummy_item1.png">
+            </div>
+          </div>
+          <h4>{{product.unique_name}}</h4>
+          <hr>
+        </ion-col>
+      </ion-row>
+    </div>
+    <div class="appointment_slider">
+        <ion-slides pager="false">
+            <ion-slide>
+                <div class="appointment_card">
+                    <ion-row>
+                      <ion-col col-8 class="p0">
+                        <h4>You have a service</h4>
+                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
+                      </ion-col>
+                      <ion-col col-4 class="p0">
+                        <p>2 Services</p>
+                      </ion-col>
+                    </ion-row>
+                    <ion-row>
+                        <ion-col class="p0">
+                            <h3>Jaguar</h3>
+                            <div class="clear"></div>
+                        </ion-col>
+                      </ion-row>
+                  </div>
+            </ion-slide>
+            <ion-slide>
+                <div class="appointment_card">
+                    <ion-row>
+                      <ion-col col-8 class="p0">
+                        <h4>You have a service</h4>
+                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
+                      </ion-col>
+                      <ion-col col-4 class="p0">
+                        <p>2 Services</p>
+                      </ion-col>
+                    </ion-row>
+                    <ion-row>
+                        <ion-col class="p0">
+                            <h3>Jaguar</h3>
+                            <div class="clear"></div>
+                        </ion-col>
+                      </ion-row>
+                  </div>
+            </ion-slide>
+            <ion-slide>
+                <div class="appointment_card">
+                    <ion-row>
+                      <ion-col col-8 class="p0">
+                        <h4>You have a service</h4>
+                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
+                      </ion-col>
+                      <ion-col col-4 class="p0">
+                        <p>2 Services</p>
+                      </ion-col>
+                    </ion-row>
+                    <ion-row>
+                        <ion-col class="p0">
+                            <h3>Jaguar</h3>
+                            <div class="clear"></div>
+                        </ion-col>
+                      </ion-row>
+                  </div>
+            </ion-slide>
+          </ion-slides>
+    </div>
+    <div class="header_submenu">
+        <h4>Products for you</h4>
+        <button class="more_btn" (click)="goToPage('purchaseparts')">More</button>
+        <div class="clear"></div>
+      </div>
+      <div class="product_section" *ngIf="productsForUserList">
+        <ion-row>
+          <ion-col col-4 *ngFor="let product of productsForUserList; let i = index">
+            <div class="product_div">
+              <div class="rating">{{product.count}}</div>
+              <div class="product_img">
+                <img src="../../assets/img/asset_dummy_item1.png">
+              </div>
+            </div>
+            <h4>{{product.unique_name}}</h4>
+            <hr>
+          </ion-col>
+        </ion-row>
+      </div>
+      <!-- <div class="rate_card">
+        <div class="inner_shop_name">
+          <ion-row>
+            <ion-col class="p0">
+                <h5>Smart Mortors</h5>
+                <p><img src="../../assets/img/asset_avatar_sml.png">Peter mcWay</p>
+            </ion-col>
+            <ion-col class="p0">
+              <h6>Service - 2 days ago</h6>
+            </ion-col>
+          </ion-row>
+        </div>
+        <ion-row>
+            <ion-col class="p0">
+              <h4>Rate this workshop</h4>
+              <fieldset class="rating">
+                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+              </fieldset>
+            </ion-col>
+        </ion-row>
+      </div> -->
+      <div class="header_submenu">
+          <h4>Services</h4>
+          <div class="clear"></div>
+      </div>
+      <div class="home_main_stack_menu" *ngIf="mainServicesList">
+          <ion-row   *ngFor="let service of mainServicesList; let i = index ">
+              <ion-col class="textCenter">
+                <img [src] ="getImage(service.image)">
+                <p>{{service.service_name}}</p>
+              </ion-col>
+            
+          </ion-row>
+          <br>
+      </div>
+      <!-- <div class="header_submenu">
+          <h4>Parts for you</h4>
+          <button class="more_btn">More</button>
+          <div class="clear"></div>
+        </div> -->
+        <!-- <div class="product_section">
+          <ion-row>
+            <ion-col col-4>
+              <div class="product_div">
+                <div class="rating">3.1</div>
+                <div class="product_img">
+                  <img src="../../assets/img/asset_dummy_item1.png">
+                </div>
+              </div>
+              <h4>PM 237</h4>
+              <hr>
+            </ion-col>
+            <ion-col col-4>
+                <div class="product_div">
+                    <div class="rating">3.1</div>
+                    <div class="product_img">
+                      <img src="../../assets/img/asset_dummy_item2.png">
+                    </div>
+                </div>
+                <h4>Mega 3inch Band</h4>
+                <hr>
+            </ion-col>
+            <ion-col col-4>
+                <div class="product_div">
+                    <div class="rating">3.1</div>
+                    <div class="product_img">
+                      <img src="../../assets/img/asset_dummy_item3.png">
+                    </div>
+                </div>
+                <h4>PM 237</h4>
+                <hr>
+            </ion-col>
+          </ion-row>
+        </div> -->
+  </div>
+
+  <div class="home_menu" *ngIf="menuShow" [@slideInOut]>
+    <div class="menu_outter" (click)="menuToggle()">
+    </div>
+    <div class="menu_inner" *ngIf="login">
+      <ion-row>
+        <ion-col (click)="goToPage('settings')">
+          <img src="../../assets/img/asset_setting.png">
+          <p>Settings</p>
+        </ion-col>
+        <ion-col (click)="goToPage('profile')">
+          <img src="../../assets/img/asset_profile.png">
+          <p>Profile</p>
+        </ion-col>
+        <ion-col (click)="logout()">
+          <img src="../../assets/img/asset_logout.png">
+          <p>Logout</p>
+        </ion-col>
+      </ion-row>
+    </div>
+    <div class="menu_inner" *ngIf="!login">
+      <ion-row>
+        <ion-col>
+          <h6>Are you sure to logout ?</h6>
+          <button class="logout_btn floatLeft" (click)="toLogin()">Logout</button>
+          <button class="cancel_btn floatRight" (click)="menuToggle()">Cancel</button>
+        </ion-col>
+      </ion-row>
+    </div>
+  </div>
+</ion-content>

src/app/home/home.page.scss

+.home_wrapper{
+  background: #f0eef6;
+  padding-top: 30px;
+  .location_box{
+    position: fixed;
+    left:0px;
+    top: 60px;
+    right:0px;
+    z-index: 999;
+  }
+  .location_bar{
+    max-width:190px;
+    background: #fff;
+    padding:5px;
+    border-radius: 20px;
+    margin:0 auto;
+    text-align: center;
+    -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    background-image: url("../../assets/img/aaset_loc.png");
+    background-position: left 15px top 6px;
+    background-repeat: no-repeat;
+    padding-left:35px;
+    padding-right:30px;
+    background-size: 15px;
+    font-size: 14px;
+    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  }
+  .home_main_stack_menu{
+    padding: 15px;
+    img{
+      width: 80px;
+    }
+    p{
+      text-align: center;
+      color: #4e4961;
+      margin:0px;
+      padding-top: 10px;
+
+    }
+  }
+  .header_submenu{
+    padding:10px;
+    h4{
+      margin:0px;
+      padding:0px;
+      float: left;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    }
+    .more_btn{
+      background: #39267f;
+      color: #fff;
+      height:35px;
+      float: right;
+      padding-left: 15px;
+      padding-right: 15px;
+      border-radius: 20px;
+    }
+  }
+  .product_section{
+    padding: 10px;
+    .product_div{
+      background: #f6f5fa;
+      text-align: center;
+      border-radius:15px;
+      padding: 10px;
+      position: relative;
+      .rating{
+        background-color: rgba(255, 255, 255, 0.9);
+        background-image: url("../../assets/img/asset_star.png");
+        position: absolute;
+        bottom: 10px;
+        left: 5px;
+        padding-left: 25px;
+        background-size: 12px;
+        background-repeat: no-repeat;
+        background-position: center left 6px;
+        padding-right: 10px;
+        border-radius: 15px;
+      }
+      img{
+        height:90px;
+        width: auto;
+      }
+    }
+    h4{
+      color: #282438;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 14px;
+    }
+    hr{
+      border:2px solid #fbd339;
+      width:30px;
+      border-radius: 20px;
+      height:0px;
+      margin-left:0px;
+    }
+  }
+  .appointment_slider{
+    .swiper-pagination{
+      position: relative;
+      bottom: 0px;
+    }
+  }
+  .appointment_card{
+    background-image:url("../../assets/img/asset_appointment_card.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    border-radius:15px;
+    margin: 10px;
+    padding: 20px;
+    width: 100%;
+
+    h4{
+      color: #fff;
+      margin:0px;
+      padding:0px;
+      font-size:16px;
+      padding-bottom: 4px;
+      text-align: left;
+    }
+    h6{
+      color: #fff;
+      margin:0px;
+      padding:0px;
+      font-size:12px;
+      font-weight: 300;
+      text-align: left;  
+      strong{
+        font-weight: 400;
+      }
+      
+    }
+    p{
+      padding:0px;
+      margin:0px;
+      color: #fff;
+      font-weight: 300;
+      text-align: right;
+    }
+    h3{
+      color: #fff;
+      font-weight: 400;
+      text-align: left;
+      background: url("../../assets/img/asset_play.png");
+      float: left;
+      background-position: right;
+      background-repeat: no-repeat;
+      padding-right: 30px;
+      background-size: 15px;
+    }
+  }
+  .rate_card{
+    background-color: #f6f5fa;
+    border-radius:15px;
+    margin: 10px;
+    padding: 20px;
+    .inner_shop_name{
+      border-left:3px solid #fbd339;
+      padding-left: 10px;
+      margin-bottom: 15px;
+      h5{
+        margin:0px;
+        padding:0px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 2px;
+
+      }
+      p{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        img{
+          width: 15px;
+          height:15px;
+          border-radius: 50%;
+          object-fit:cover;
+          object-position:center;
+          margin-right:5px;
+          position: relative;
+          top: 3px;
+
+        }
+      }
+      h6{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        text-align: right;
+      }
+    }
+    h4{
+      margin:0px;
+      padding:0px;
+      font-size: 16px;
+      text-align:left;
+    }
+
+    .rating { 
+      border: none;
+      width:260px;
+      margin: 0 auto;
+    }
+    
+    .rating > input { display: none; } 
+    .rating > label:before { 
+      margin: 5px;
+      font-size:40px;
+      font-family: FontAwesome;
+      display: inline-block;
+      content: "\f005";
+    }
+    
+    .rating > .half:before { 
+      content: "\f089";
+      position: absolute;
+    }
+    
+    .rating > label { 
+      color: #dcdae9; 
+     float: right; 
+    }
+    
+    /***** CSS Magic to Highlight Stars on Hover *****/
+    
+    .rating > input:checked ~ label, /* show gold star when clicked */
+    .rating:not(:checked) > label:hover, /* hover current star */
+    .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+    
+    .rating > input:checked + label:hover, /* hover current star when changing rating */
+    .rating > input:checked ~ label:hover,
+    .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+    .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+  }
+  
+}
+.home_menu{
+  position: fixed;
+  top: 0px;
+  left:0px;
+  right:0px;
+  bottom: 0px;
+  background-color:rgba(0,0,0,0.5);
+  z-index: 99;
+  .menu_outter{
+    width: 100%;
+    height:calc(100% - 180px);
+  }
+  .menu_inner{
+    height: 180px;
+    padding: 15px;
+    transition: all 0.5s ease;
+    padding-top:50px;
+    background-image: url("../../assets/img/asset_menu_wrapper.png");
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    ion-row{
+      ion-col{
+        text-align:center;
+        img{
+          width: 75px;
+        }
+        p{
+          text-align: center;
+          color: #4e4961;
+          font-weight: 400;
+          padding:0px;
+          margin:0px;
+          font-size: 16px;
+        }
+        h6{
+          color: #282438;
+          font-weight:600;
+          text-align: left;
+          padding:0px;
+          margin:0px;
+          font-size: 18px;
+          padding-top:10px;
+          padding-bottom: 20px;
+        }
+      }
+    }
+    .logout_btn{
+      width: 49%;
+      height:40px;
+      background-color: #fff;
+      color: #39267f;
+      border:2px solid #39267f;
+      border-radius: 20px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+    .cancel_btn{
+      width: 49%;
+      height:40px;
+      background-color: #39267f;
+      border:2px solid #39267f;
+      color: #fff;
+      border-radius: 20px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+}

src/app/home/home.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.page.ts

+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import {StorageService } from '../../Config/services/storage.service';
+import { ValidationService } from '../../Config/services/validation.service';
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('300ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class HomePage {
+  menuShow = false;
+  login = true;
+  userData: any;
+  mainServicesList = [];
+  peopleMostpurchasedList = [];
+  productsForUserList = [];
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+    private authenticationservice: AuthenticationService,
+    private storageservice: StorageService,
+    private validationservice: ValidationService
+  ) {
+  this.userData = JSON.parse(this.storageservice.getLocalStorageItem('userData'));
+  console.log(this.userData);
+  this.getMainServiceList();
+  this.getpeopleMostpurchasedList();
+  this.getProductsforYouList();
+  }
+
+
+  goToPage(path, data = null) {
+
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    // this.logout();
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+  toLogin() {
+    this.menuShow = !this.menuShow;
+    this.storageservice.removeLocalStorageItem('userData');
+    this.goToPage('login');
+  }
+ menuToggle() {
+    this.menuShow = !this.menuShow;
+  }
+
+  logout() {
+    this.login = !this.login;
+
+  }
+getMainServiceList() {
+  this.authenticationservice.get_data('get_mainservicelist').subscribe((data) => {
+    console.log(data);
+    this.mainServicesList = data.data;
+  });
+}
+getpeopleMostpurchasedList() {
+  this.authenticationservice.get_data('get_mostpurchased').subscribe((data) => {
+    console.log(data);
+    if ( data.status === 'success') {
+      for (let i = 0; i < 3; i++) {
+        this.peopleMostpurchasedList[i] = data.data[i];
+       }
+      console.log (this.peopleMostpurchasedList);
+    }
+  });
+}
+getProductsforYouList() {
+  this.authenticationservice.get_data('products_for_user?user_id=' + this.userData.id).subscribe((data) => {
+    console.log(data);
+    if ( data.status === 'success') {
+      for (let i = 0; i < 3; i++) {
+        this.productsForUserList[i] = data.data[i];
+       }
+      console.log(this.productsForUserList);
+    }
+  });
+}
+getImage(imageurl) {
+  return imageurl;
+}
+}

src/app/list/list.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+
+import { ListPage } from './list.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ListPage
+      }
+    ])
+  ],
+  declarations: [ListPage]
+})
+export class ListPageModule {}

src/app/list/list.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>
+      List
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let item of items">
+      <ion-icon [name]="item.icon" slot="start"></ion-icon>
+      {{item.title}}
+      <div class="item-note" slot="end">
+        {{item.note}}
+      </div>
+    </ion-item>
+  </ion-list>
+  <!--
+    <div *ngIf="selectedItem" padding>
+      You navigated here from <b>{{selectedItem.title }}</b>
+    </div>
+  -->
+</ion-content>

src/app/list/list.page.scss

+

src/app/list/list.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+
+import { ListPage } from './list.page';
+
+describe('ListPage', () => {
+  let component: ListPage;
+  let fixture: ComponentFixture<ListPage>;
+  let listPage: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(async () => {
+    fixture = await TestBed.createComponent(ListPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have a list of 10 elements', () => {
+    listPage = fixture.nativeElement;
+    const items = listPage.querySelectorAll('ion-item');
+    expect(items.length).toEqual(10);
+  });
+
+});

src/app/list/list.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: 'list.page.html',
+  styleUrls: ['list.page.scss']
+})
+export class ListPage implements OnInit {
+  private selectedItem: any;
+  private icons = [
+    'flask',
+    'wifi',
+    'beer',
+    'football',
+    'basketball',
+    'paper-plane',
+    'american-football',
+    'boat',
+    'bluetooth',
+    'build'
+  ];
+  public items: Array<{ title: string; note: string; icon: string }> = [];
+  constructor() {
+    for (let i = 1; i < 11; i++) {
+      this.items.push({
+        title: 'Item ' + i,
+        note: 'This is item #' + i,
+        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
+      });
+    }
+  }
+
+  ngOnInit() {
+  }
+  // add back when alpha.4 is out
+  // navigate(item) {
+  //   this.router.navigate(['/list', JSON.stringify(item)]);
+  // }
+}

src/app/listingservice/listingservice.module.ts

+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 { ListingservicePage } from './listingservice.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ListingservicePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ListingservicePage]
+})
+export class ListingservicePageModule {}

src/app/listingservice/listingservice.page.html

+<ion-header>
+    <div class="app_header relative">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+    </button>
+        <div class="nav_title floatLeft">
+            <h4>Select Category</h4>
+        </div>
+        <button class="nav_btn nav_btn_text floatRight">
+
+    </button>
+        <div class="clear"></div>
+        <div class="seach_bar_outer">
+            <div class="search_bar">
+                <input class="" placeholder="Services or Problems...">
+            </div>
+        </div>
+    </div>
+</ion-header>
+<ion-content>
+    <div class="select_services_wrapper">
+        <div class="home_main_stack_menu" *ngIf="ServiceList" scrollY="true">
+            <ul>
+                <li *ngFor="let service of ServiceList; let i = index" (click)="bookService(service)">
+                    <img [src] ="getImage(service.image)">
+                    <p>{{service.service_name}}</p>
+                    <div class="clear"></div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div style="text-align: center" *ngIf="errorMsg">{{errorMsg}}</div>
+    <div class="select_footer" *ngIf="displayFooter">
+        <ion-row *ngIf="serviceDetails">
+            <ion-col >
+                <h6></h6> <br>
+                <h6>{{serviceDetails}}</h6> 
+            </ion-col>
+            <ion-col>
+                <button class="next_btn floatRight" (click)="getsubserviceList()">Next</button>
+                <div class="clear"></div>
+            </ion-col>
+        </ion-row>
+    </div>
+</ion-content>
\ No newline at end of file

src/app/listingservice/listingservice.page.scss

+.seach_bar_outer {
+    position: absolute;
+    width: 100%;
+    .search_bar {
+        width: 90%;
+        margin: 0 auto;
+        background-color: #fff;
+        border-radius: 100px;
+        -webkit-box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+        -moz-box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+        box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+        input {
+            width: 100%;
+            border: none;
+            height: 45px;
+            border-radius: 100px;
+            background-image: url("../../assets/img/asset_search.png");
+            background-position: right 15px top 10px;
+            background-repeat: no-repeat;
+            background-size: 20px;
+            padding-left: 20px;
+            padding-right: 20px;
+            font-weight: 300;
+            &::placeholder {
+                font-weight: 300;
+                color: #9e97ba;
+            }
+        }
+    }
+}
+
+.select_services_wrapper {
+    background-image: linear-gradient(to bottom, #e7e5f1, #edebf5, #f3f2f8, #f9f8fc, #ffffff);
+    .home_main_stack_menu {
+        padding: 15px;
+        padding-top: 50px;
+        ul {
+            margin: 0px;
+            padding: 0px;
+            .active {
+                border: 2px solid #8769f4;
+                border-radius: 30px;
+                -webkit-box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+                -moz-box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+                box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+            }
+            li {
+                list-style: none;
+                padding-top: 3px;
+                padding-bottom: 3px;
+                border: 2px solid transparent;
+                padding-left: 15px;
+                padding-right: 15px;
+                &:hover {
+                    border: 2px solid #8769f4;
+                    border-radius: 30px;
+                    -webkit-box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+                    -moz-box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+                    box-shadow: 0px 5px 20px 1px rgba(158, 151, 186, 0.5);
+                }
+                img {
+                    float: left;
+                    width: 35px;
+                    border: 2px solid transparent;
+                    border-radius: 20px;
+                }
+                p {
+                    text-align: left;
+                    color: #4e4961;
+                    width: calc(100% - 35px);
+                    float: left;
+                    margin: 0px;
+                    padding: 8px;
+                    padding-left: 15px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/listingservice/listingservice.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListingservicePage } from './listingservice.page';
+
+describe('ListingservicePage', () => {
+  let component: ListingservicePage;
+  let fixture: ComponentFixture<ListingservicePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListingservicePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListingservicePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/listingservice/listingservice.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
+import {StorageService } from '../../Config/services/storage.service';
+@Component({
+  selector: 'app-listingservice',
+  templateUrl: './listingservice.page.html',
+  styleUrls: ['./listingservice.page.scss'],
+})
+export class ListingservicePage implements OnInit {
+  ServiceList = [];
+  errorMsg: any;
+  displayFooter: boolean;
+  serviceDetails: any;
+  id: any;
+  constructor(
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+    private storageservice: StorageService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+  ) {
+    this.errorMsg = '';
+    this.displayFooter = false;
+    this.serviceDetails = '';
+    this.id = '';
+  }
+
+  ngOnInit() {
+    this.getServiceList();
+  }
+getServiceList() {
+  this.validationService.presentLoader();
+  this.authenticationService.get_data('get_mainservicelist').subscribe((data) => {
+    console.log(data);
+    this.validationService.dismissLoader();
+    if (data.status === 'success') {
+      this.ServiceList = data.data;
+    } else {
+      this.ServiceList = null;
+      this.errorMsg = 'Sorry, no services avilable right now. Please try again after sometime.';
+    }
+  });
+}
+bookService(value) {
+  this.displayFooter = true;
+  this.serviceDetails = value.service_name;
+  this.id = value.id;
+}
+getImage(imageurl) {
+  return imageurl;
+}
+getsubserviceList() {
+  const PassData = {service_name: this.serviceDetails, service_id: this.id};
+  this.goToPage('/selectservices/' + JSON.stringify(PassData));
+}
+goToPage(path, data= null) {
+  this.router.navigateByUrl(path, {queryParams: data});
+  document.body.scrollTop = document.documentElement.scrollTop = 0;
+}
+goBack() {
+  this.location.back();
+}
+}

src/app/login/login.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LoginPage } from './login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [LoginPage]
+})
+export class LoginPageModule {}

src/app/login/login.page.html

+<ion-content>
+  <div class="login_wrapper">
+    <h1>Hi!</h1>
+    <h3>Login to Continue</h3>
+    <div class="login_form">
+      <form [formGroup]="loginForm">
+      <div class="row">
+          <ion-input formControlName="user_email" placeholder="Email" type="text"></ion-input>
+      </div>
+      <div class="row">
+          <ion-input formControlName="user_password" placeholder="Password" type="password"></ion-input>
+      </div>
+      <div class="row">
+        <button class="login_btn" (click)="login()">Sign In</button>
+      </div>
+      <div class="row">
+        <p (click)="goToPage('forgot')">Forgot Password ?</p>
+      </div>
+    </form>
+    </div>
+    <div class="sigup_footer" (click)="istoggle()">
+      <img src="../../assets/img/asset_signup_arrow.png"><br>
+      Sign Up
+    </div>
+  </div>
+</ion-content>
+<div class="signup_div" *ngIf="isShow" [@slideInOut]>
+    <ion-content>
+      <div class="signup_wrapper">
+          <div class="sigin_header" (click)="istoggle()">
+              Sign In<br>
+              <img src="../../assets/img/asset_signin_arrow.png">
+          </div>
+          <h1>Sign Up</h1>
+          <div class="signup_form"> 
+            <form [formGroup]="signupForm">
+              <div class="row">
+                <p>Your Full Name</p>
+                <ion-input formControlName="user_name" type="text"></ion-input>
+              </div>
+              <div class="row">
+                  <p>Email Address</p>
+                  <ion-input  formControlName="user_email" type="text"></ion-input>
+              </div>
+              <div class="row">
+                  <p>Phone Number</p>
+                  <ion-row class="p0">
+                    <ion-col size="4">
+                      <ion-select placeholder="" formControlName="user_phonecode">
+                        <ion-select-option value="">+33</ion-select-option>
+                      </ion-select>
+                    </ion-col>
+                    <ion-col size="8">
+                      <ion-input value="" formControlName="user_phonenumber" type="number"></ion-input>
+                    </ion-col>
+                  </ion-row>
+              </div>
+              <div class="row">
+                  <p>Country</p>
+                  <ion-input  type="text" formControlName="user_country"></ion-input>
+              </div>
+              <!-- <div class="row">
+                  <p>District</p>
+                  <ion-input  type="text"></ion-input>
+              </div>
+              <div class="row">
+                  <p>City</p>
+                  <ion-input  type="text"></ion-input>
+              </div> -->
+              <div class="row">
+                  <p>Area</p>
+                  <ion-input  type="text"formControlName="user_area" ></ion-input>
+              </div>
+              <div class="row">
+                  <p>House name/Building</p>
+                   <ion-input  type="text"formControlName="user_address" ></ion-input>
+              </div>
+              <div class="row">
+                <h6>This address will be saved as your permanent address. You can change it at any time.</h6>
+                </div>
+                <div class="row">
+                    <button class="signup_btn" (click)="signIn()">Next</button>
+                  </div>
+                  <div class="row textCenter">
+                    <p>By Creating Account, I agree to allo repar's<br>
+                    <a>Terms & Conditions</a></p>
+                    </div>
+                  </form>
+          </div>
+      </div>
+    </ion-content>
+</div>
+
+

src/app/login/login.page.scss

+.login_wrapper{
+    background-image: url("../../assets/img/asset_login_wrapper1.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100vh;
+    padding:20px;
+    padding-top: 12%;
+    h1{
+        text-align: center;
+        color: #fff;
+        font-size: 54px;
+        font-weight: 400;
+        padding-top: 20px;
+    }
+    h3{
+        text-align: center;
+        color: #fff;
+        font-weight:300;
+        margin-top: 0px;
+        font-size: 18px;
+    }
+    .login_form{
+        padding-top: 10%;
+        .row{
+            margin-bottom: 20px;
+            ion-input{
+                text-align: center;
+                background-image: linear-gradient(to right, #5742a5 , #7a60da);
+                border-radius: 20px;
+                color:#fff;
+                height: 40px;
+            }
+            .login_btn{
+                height: 40px;
+                width: 100%;
+                color: #282438;
+                background-color: #ffffff;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px;            
+            }
+            p{
+                color: #fff;
+                text-align: center;
+                padding-top: 20px;
+            }
+        }
+    }
+    .sigup_footer{
+        text-align: center;
+        color: #fff;
+        position: fixed;
+        width: 100%;
+        left: 0px;
+        right: 0px;
+        bottom: 35px;
+        font-size: 20px;
+        img{
+            width:35px;
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.sigin_header{
+    text-align: center;
+    color: #282438;
+    width: 100%;
+    padding:15px;
+    font-weight: 500;
+    font-size: 20px;
+    img{
+        margin-top: 10px;
+        width:35px;
+    }
+}
+
+.signup_wrapper{
+    height:100vh;  
+    background: url("../../assets/img/asset_header_wrapper.png");
+    background-position: center top;
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
+
+
+.signup_div{
+    height:100vh;
+    position: fixed;
+    top:0px;
+    left:0px;
+    right:0px;
+    z-index: 9;
+    h1{
+        text-align: center;
+        color: #282438;
+        font-size: 40px;
+        font-weight: 400;
+    }
+
+    .signup_form{
+        padding: 15px;
+        .row{
+            margin-bottom: 15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+    }
+}

src/app/login/login.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginPage } from './login.page';
+
+describe('LoginPage', () => {
+  let component: LoginPage;
+  let fixture: ComponentFixture<LoginPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.page.ts

+import { Component, OnInit } from '@angular/core';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormBuilder, Validators } from '@angular/forms';
+import { StorageService } from '../../Config/services/storage.service';
+import { ValidationService } from '../../Config/services/validation.service';
+import { AuthenticationService } from '../../Config/services/auth.service';
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('500ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('500ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class LoginPage implements OnInit {
+  isShow = false;
+  locationData: any;
+  userData: any;
+  signupForm = this.fb.group({
+    user_name: ['', Validators.required],
+    user_password: [''],
+    user_email: ['', Validators.required],
+    user_phonecode: ['', Validators.required],
+    user_phonenumber: ['', Validators.required],
+    user_country: ['', Validators.required],
+    user_area: ['', Validators.required],
+    user_address: ['', Validators.required],
+    device_id: ['', Validators.required],
+    user_lat: ['', Validators.required],
+    user_lng: ['', Validators.required]
+  });
+  loginForm = this.fb.group({
+    user_email: ['', Validators.compose([Validators.required])],
+    user_password: [''],
+    device_id: [''],
+    user_lat: [''],
+    user_lng: [''],
+    user_type: ['']
+  });
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private fb: FormBuilder,
+    private storageService: StorageService,
+    private authenticationservice: AuthenticationService,
+    private validationservice: ValidationService
+  ) {
+    this.getStorageData();
+  }
+
+  ngOnInit() {
+    if (this.storageService.isLoggednIn()) {
+      this.goToPage('home');
+    }
+  }
+
+  istoggle() {
+    this.isShow = !this.isShow;
+  }
+
+
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data , replaceUrl: true});
+
+  }
+  signIn() { // goToPage('addcar')
+  this.signupForm.patchValue({
+    user_lat: this.locationData.lat,
+    user_lng: this.locationData.lng,
+    device_id : 123456,
+    user_phonecode: +33,
+  });
+  console.log(this.signupForm.value);
+  this.goToPage('/password/' + JSON.stringify(this.signupForm.value));
+
+  }
+  getStorageData() {
+   this.locationData = JSON.parse(this.storageService.getLocalStorageItem('location'));
+   console.log(this.locationData);
+
+  }
+  login() {
+    this.storageService.removeLocalStorageItem('userData');
+    console.log('test');
+    if (!this.storageService.isLoggednIn()) {
+      this.loginForm.patchValue({
+        device_id: 123456,
+        user_lat: this.locationData.lat,
+        user_lng: this.locationData.lng,
+        user_type: '1'
+      });
+      if ( this.loginForm.valid) {
+        this.validationservice.presentLoader();
+        this.authenticationservice.post_data('user_login', this.loginForm.value).subscribe((data) => {
+          console.log(data);
+          this.validationservice.dismissLoader();
+          if ( data.status  === 'success') {
+            this.goToPage('home');
+            this.storageService.setLocalStorageItem('userData', JSON.stringify(data.data));
+          } else {
+            this.validationservice.presentToast(data.message);
+          }
+        });
+      } else {
+        this.validationservice.presentToast('Please fill all fields');
+      }
+    }
+  }
+
+}

src/app/myorders/myorders.module.ts

+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 { MyordersPage } from './myorders.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MyordersPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [MyordersPage]
+})
+export class MyordersPageModule {}

src/app/myorders/myorders.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+        <div class="nav_title floatLeft">
+            <h4>MY ORDERS</h4>
+        </div>
+        <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+        <div class="clear"></div>
+    </div>
+</ion-header>
+<ion-content>
+    <div class="services_wrapper">
+        <h4>Pending Orders</h4>
+        <ul>
+            <li class="up_comingborder" (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <h4>February</h4>
+            <li (click)="goToPage('servicedetails')">
+                <div class="clear"></div>
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+
+                    <h5>Presto towing service</h5>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <li (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <li (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <li (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+        </ul>
+    </div>
+</ion-content>
\ No newline at end of file

src/app/myorders/myorders.page.scss

+.services_wrapper{
+    background-color: #faf9fc;
+    padding:15px;
+    width:100%;
+    h4{
+        margin:0px;
+        padding:0px;
+        margin-bottom: 15px;
+    }
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            background-color: #f6f5fa;
+            padding:25px;
+            padding-right: 20px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            .road_assitance{
+                background-color: #fbd339;
+                color: #403d4d;
+                display: inline-block;
+                font-weight: 500;
+                padding: 3px;
+                padding-left: 10px;
+                padding-right: 10px;
+                margin-bottom: 14px;            
+            }
+            h5{
+                margin:0px;
+                padding: 0px;
+                color: #403d4d;
+                font-size: 16px;
+                padding-bottom: 5px;
+                font-weight: 600;
+            }
+            p{
+                margin:0px;
+                padding: 0px;
+                color: #a29ebf;
+                font-size: 13px;
+                padding-bottom: 20px;
+
+            }
+            .pic{
+                width:45px;
+                height:45px;
+                border-radius: 50%;
+                img{
+                    width:100%;
+                    height:100%;
+                    object-fit: cover;
+                    object-position: center;
+                    border-radius: 50%;
+                }
+            }
+            .pic_detail{
+                width:calc(100% - 45px);
+                margin: 0px;
+                padding-bottom: 5px;
+                padding-left: 15px;
+                h6{
+                    margin:0px;
+                    color: #a29ebf;
+                    font-weight: 400;
+                    font-size: 16px;
+                    padding-bottom: 5px;
+                    strong{
+                        font-weight: 500;
+                    }
+                }
+
+                .arrow{
+                    background: url("../../assets/img/asset_playit.png");
+                    background-position: right;
+                    background-repeat: no-repeat;
+                    background-size: 12px;
+                }
+            }
+        }
+
+        h4{
+            margin:0px;
+            color: #a29ebf;
+            margin-top: 15px;
+            margin-bottom: 15px;   
+            font-size: 14px;     
+        }
+
+        .up_comingborder{
+            border:2px solid #fbd339;
+        }
+    }
+}
\ No newline at end of file

src/app/myorders/myorders.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyordersPage } from './myorders.page';
+
+describe('MyordersPage', () => {
+  let component: MyordersPage;
+  let fixture: ComponentFixture<MyordersPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyordersPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyordersPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/myorders/myorders.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-myorders',
+  templateUrl: './myorders.page.html',
+  styleUrls: ['./myorders.page.scss'],
+})
+export class MyordersPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/myservices/myservices.module.ts

+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 { MyservicesPage } from './myservices.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MyservicesPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [MyservicesPage]
+})
+export class MyservicesPageModule {}

src/app/myservices/myservices.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>MY SERVICES</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="services_wrapper">
+    <h4>Upcoming Services</h4>
+    <ul>
+      <li class="up_comingborder" (click)="goToPage('servicedetails')">
+        <h5>2 Services</h5>
+        <p>Heating & Air Conditioning, Break System</p>
+        <div class="pic floatLeft">
+          <img src="../../assets/img/asset_shop1.png">
+        </div>
+        <div class="pic_detail floatLeft">
+          <h5>Presto towing service</h5>
+          <h6><strong>Rolls Royce</strong> Ghost</h6>
+          <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+        </div>
+        <div class="clear"></div>
+      </li>
+      <h4>February</h4>
+      <li (click)="goToPage('servicedetails')">
+          <div class="road_assitance">
+              Road Assistance
+          </div>
+          <div class="clear"></div>
+          <div class="pic floatLeft">
+              <img src="../../assets/img/asset_shop1.png">
+          </div>
+          <div class="pic_detail floatLeft">
+            
+              <h5>Presto towing service</h5>
+              <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+          </div>
+          <div class="clear"></div>
+      </li>
+      <li (click)="goToPage('servicedetails')">
+          <h5>2 Services</h5>
+          <p>Heating & Air Conditioning, Break System</p>
+          <div class="pic floatLeft">
+            <img src="../../assets/img/asset_shop1.png">
+          </div>
+          <div class="pic_detail floatLeft">
+            <h5>Presto towing service</h5>
+            <h6><strong>Rolls Royce</strong> Ghost</h6>
+            <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+          </div>
+          <div class="clear"></div>
+        </li>
+        <li (click)="goToPage('servicedetails')">
+            <h5>2 Services</h5>
+            <p>Heating & Air Conditioning, Break System</p>
+            <div class="pic floatLeft">
+              <img src="../../assets/img/asset_shop1.png">
+            </div>
+            <div class="pic_detail floatLeft">
+              <h5>Presto towing service</h5>
+              <h6><strong>Rolls Royce</strong> Ghost</h6>
+              <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+            </div>
+            <div class="clear"></div>
+          </li>
+          <li (click)="goToPage('servicedetails')">
+              <h5>2 Services</h5>
+              <p>Heating & Air Conditioning, Break System</p>
+              <div class="pic floatLeft">
+                <img src="../../assets/img/asset_shop1.png">
+              </div>
+              <div class="pic_detail floatLeft">
+                <h5>Presto towing service</h5>
+                <h6><strong>Rolls Royce</strong> Ghost</h6>
+                <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+              </div>
+              <div class="clear"></div>
+            </li>
+    </ul>
+  </div>
+</ion-content>

src/app/myservices/myservices.page.scss

+.services_wrapper{
+    background-color: #faf9fc;
+    padding:15px;
+    width:100%;
+    h4{
+        margin:0px;
+        padding:0px;
+        margin-bottom: 15px;
+    }
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            background-color: #f6f5fa;
+            padding:25px;
+            padding-right: 20px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            .road_assitance{
+                background-color: #fbd339;
+                color: #403d4d;
+                display: inline-block;
+                font-weight: 500;
+                padding: 3px;
+                padding-left: 10px;
+                padding-right: 10px;
+                margin-bottom: 14px;            
+            }
+            h5{
+                margin:0px;
+                padding: 0px;
+                color: #403d4d;
+                font-size: 16px;
+                padding-bottom: 5px;
+                font-weight: 600;
+            }
+            p{
+                margin:0px;
+                padding: 0px;
+                color: #a29ebf;
+                font-size: 13px;
+                padding-bottom: 20px;
+
+            }
+            .pic{
+                width:45px;
+                height:45px;
+                border-radius: 50%;
+                img{
+                    width:100%;
+                    height:100%;
+                    object-fit: cover;
+                    object-position: center;
+                    border-radius: 50%;
+                }
+            }
+            .pic_detail{
+                width:calc(100% - 45px);
+                margin: 0px;
+                padding-bottom: 5px;
+                padding-left: 15px;
+                h6{
+                    margin:0px;
+                    color: #a29ebf;
+                    font-weight: 400;
+                    font-size: 16px;
+                    padding-bottom: 5px;
+                    strong{
+                        font-weight: 500;
+                    }
+                }
+
+                .arrow{
+                    background: url("../../assets/img/asset_playit.png");
+                    background-position: right;
+                    background-repeat: no-repeat;
+                    background-size: 12px;
+                }
+            }
+        }
+
+        h4{
+            margin:0px;
+            color: #a29ebf;
+            margin-top: 15px;
+            margin-bottom: 15px;   
+            font-size: 14px;     
+        }
+
+        .up_comingborder{
+            border:2px solid #fbd339;
+        }
+    }
+}
\ No newline at end of file

src/app/myservices/myservices.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyservicesPage } from './myservices.page';
+
+describe('MyservicesPage', () => {
+  let component: MyservicesPage;
+  let fixture: ComponentFixture<MyservicesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyservicesPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyservicesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/myservices/myservices.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-myservices',
+  templateUrl: './myservices.page.html',
+  styleUrls: ['./myservices.page.scss'],
+})
+export class MyservicesPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+  
+
+}

src/app/orderdetails/orderdetails.module.ts

+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 { OrderdetailsPage } from './orderdetails.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OrderdetailsPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [OrderdetailsPage]
+})
+export class OrderdetailsPageModule {}

src/app/orderdetails/orderdetails.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+    </button>
+        <div class="nav_title floatLeft">
+            <h4>MEGA 3 Inch Band P200</h4>
+        </div>
+        <button class="nav_btn nav_btn_text floatRight">
+    </button>
+        <div class="clear"></div>
+    </div>
+</ion-header>
+<ion-content>
+    <div class="order_detail_wrapper">
+        <div class="order_detail_banner">
+            <img src="../../assets/img/aaset_verified.png">
+            <h6>Order Delivered</h6>
+        </div>
+        <div class="order_detail_content">
+            <div class="progress_line">
+                <div class="status_progress"></div>
+            </div>
+            <ul>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">
+                        <h4>Order Confirmed</h4>
+                        <p>June 8th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(0)">
+                        <ul>
+                            <li>
+                                <h5>Approved by allo repar</h5>
+                                <h6>June 8th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
+                        <h4>Product Packed</h4>
+                        <p>June 10th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(1)">
+                        <ul>
+                            <li>
+                                <h5>Collected by courier partner</h5>
+                                <h6>June 11th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(2)" [ngClass]="{active:isGroupShown(2)}">
+                        <h4>Shipped</h4>
+                        <p>June 14th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(2)">
+                        <ul>
+                            <li>
+                                <h5>Product has been shipped</h5>
+                                <h6>June 14th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(3)" [ngClass]="{active:isGroupShown(3)}">
+                        <h4>Out for Delivery</h4>
+                        <p>June 15th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(3)">
+                        <ul>
+                            <li>
+                                <h5>Product is out for delivery</h5>
+                                <h6>June 15th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(4)" [ngClass]="{active:isGroupShown(4)}">
+                        <h4>Delivered</h4>
+                        <p>June 15th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(4)">
+                        <ul>
+                            <li>
+                                <h5>Product has been delivered</h5>
+                                <h6>June 15th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="product_inner">
+            <h5>Mega 3 Inch Band P200</h5>
+            <fieldset class="rating">
+                <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
+                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
+                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
+                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
+                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
+                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+            </fieldset>
+            <p>34 Reviews</p>
+            <div class="carlist">
+                <ul>
+                    <li>
+                        <div class="auto_pic"></div>
+                        <div class="auto_detail">
+                            <h4><strong>Rolls Royce</strong> Ghost</h4>
+                            <div class="auto_detail_inner">
+                                <p>Mileage: 08 - 12</p>
+                                <p>Model: 2019</p>
+                            </div>
+                        </div>
+                        <div class="clear"></div>
+                    </li>
+                </ul>
+            </div>
+            <h5>Details</h5>
+            <h6>We promise to help you find the best car tyres Dubai has to offer.</h6>
+            <h6>There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all
+                customers from motorists.</h6>
+
+        </div>
+    </div>
+    <div class="total_footer">
+        <div class="detail_tab">
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Product Amount</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$230</p>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Labour Charge</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$50</p>
+                </ion-col>
+            </ion-row>
+        </div>
+        <div class="total_amount">
+            <div class="total_inner">
+                <ion-row>
+                    <ion-col>
+                        <p class="textLeft">Total Amount</p>
+                    </ion-col>
+                    <ion-col>
+                        <p class="textRight">$<strong>280</strong></p>
+                    </ion-col>
+                </ion-row>
+            </div>
+        </div>
+        <div class="widthFull textCenter">
+            <button class="signup_btn">Purchase</button>
+        </div>
+    </div>
+</ion-content>
\ No newline at end of file

src/app/orderdetails/orderdetails.page.scss

+.order_detail_wrapper {
+    .order_detail_banner {
+        width: 100%;
+        height: 130px;
+        padding-top: 15px;
+        background-image: url("../../assets/img/assets_orderdetails.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        text-align: center;
+        img {
+            width: 45px;
+        }
+        h6 {
+            color: #fff;
+            text-align: center;
+            font-size: 16px;
+            font-weight: 400;
+            padding-top: 8px;
+            margin: 0px;
+        }
+    }
+    .order_detail_content {
+        padding: 20px;
+        position: relative;
+        margin-left: 25px;
+        .progress_line {
+            position: absolute;
+            top: 50px;
+            left: 0px;
+            bottom: 15%;
+            width: 3px;
+            background: #9c97b7;
+            border-radius: 20px;
+            .status_progress {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                height: 25%;
+                right: 0px;
+                width: 100%;
+                border-radius: 20px;
+                background-color: #28be57;
+            }
+        }
+        ul {
+            margin: 0px;
+            padding: 0px;
+            li {
+                list-style: none;
+                .status_head {
+                    padding-top: 20px;
+                    padding-bottom: 20px;
+                    h4 {
+                        margin: 0px;
+                        color: #282438;
+                        width: 80%;
+                        background-image: url("../../assets/img/asset_down_arrow.png");
+                        background-position: right;
+                        background-repeat: no-repeat;
+                        background-size: 15px;
+                        padding-bottom: 2px;
+                        font-size: 16px;
+                    }
+                    p {
+                        margin: 0px;
+                        color: #282438;
+                        font-size: 12px;
+                    }
+                }
+                .status_details {
+                    margin-left: 30px;
+                    ul {
+                        border-left: 2px dashed #4e4961;
+                        padding-top: 5px;
+                        padding-bottom: 5px;
+                        li {
+                            padding: 5px;
+                            padding-left: 20px;
+                            h5 {
+                                margin: 0px;
+                                color: #282438;
+                                font-size: 16px;
+                                padding-bottom: 4px;
+                            }
+                            h6 {
+                                margin: 0px;
+                                color: #9c97b7;
+                                font-size: 13px;
+                                font-weight: 400;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .product_inner {
+        padding: 15px;
+        h5 {
+            margin: 0px;
+            padding-bottom: 5px;
+        }
+        .rating {
+            border: none;
+            width: 100px;
+            margin: 0px;
+            padding: 0px;
+        }
+        .rating>input {
+            display: none;
+        }
+        .rating>label:before {
+            margin: 2px;
+            font-size: 17px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+        }
+        .rating>.half:before {
+            content: "\f089";
+            position: absolute;
+        }
+        .rating>label {
+            color: #dcdae9;
+            float: right;
+        }
+        /***** CSS Magic to Highlight Stars on Hover *****/
+        .rating>input:checked~label,
+        /* show gold star when clicked */
+        .rating:not(:checked)>label:hover,
+        /* hover current star */
+        .rating:not(:checked)>label:hover~label {
+            color: #FFD700;
+        }
+        /* hover previous stars in list */
+        .rating>input:checked+label:hover,
+        /* hover current star when changing rating */
+        .rating>input:checked~label:hover,
+        .rating>label:hover~input:checked~label,
+        /* lighten current selection */
+        .rating>input:checked~label:hover~label {
+            color: #FFED85;
+        }
+        p {
+            margin: 0px;
+            padding-top: 5px;
+            font-size: 12px;
+        }
+        h6 {
+            text-align: justify;
+            color: #4e4961;
+        }
+        .carlist {
+            padding: 10px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            ul {
+                margin: 0px;
+                padding: 0px;
+                li {
+                    list-style: none;
+                    border-radius: 15px;
+                    margin-bottom: 10px;
+                    .auto_pic {
+                        width: 60px;
+                        height: 60px;
+                        -webkit-box-shadow: 0px 0px 19px 0px rgba(135, 105, 244, 0.49);
+                        -moz-box-shadow: 0px 0px 19px 0px rgba(135, 105, 244, 0.49);
+                        box-shadow: 0px 0px 19px 0px rgba(135, 105, 244, 0.49);
+                        border-radius: 15px;
+                        float: left;
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 15px;
+                            object-fit: cover;
+                            object-position: center;
+                        }
+                    }
+                    .auto_detail {
+                        float: left;
+                        width: calc(100% - 60px);
+                        padding-left: 15px;
+                        h4 {
+                            margin: 0px;
+                            padding: 0px;
+                            color: #282438;
+                            font-weight: 400;
+                            padding-bottom: 5px;
+                            font-size: 17px;
+                            strong {
+                                font-weight: 600;
+                            }
+                        }
+                        .auto_detail_inner {
+                            border-left: 1px dashed #4e4961;
+                            margin-left: 10px;
+                            padding-left: 15px;
+                            p {
+                                margin: 0px;
+                                padding: 0px;
+                                color: #a29ebf;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.total_footer {
+    padding: 15px;
+    .detail_tab {
+        width: 100%;
+        margin-bottom: 15px;
+        p {
+            margin: 0px;
+            padding: 0px;
+            color: #282438;
+            font-weight: 500;
+            font-size: 16px;
+        }
+    }
+    .total_amount {
+        width: 100%;
+        padding: 0px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        .total_inner {
+            border: 2px dashed #4e4961;
+            padding: 5px;
+            padding-left: 0px;
+            padding-right: 0px;
+        }
+        p {
+            margin: 0px;
+            padding: 0px;
+            color: #282438;
+            font-weight: 500;
+            font-size: 16px;
+        }
+    }
+    .signup_btn {
+        height: 40px;
+        width: 85%;
+        color: #fff;
+        background-color: #39267f;
+        border-radius: 20px;
+        font-weight: 500;
+        font-size: 16px;
+        margin-top: 20px;
+    }
+}
\ No newline at end of file

src/app/orderdetails/orderdetails.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderdetailsPage } from './orderdetails.page';
+
+describe('OrderdetailsPage', () => {
+  let component: OrderdetailsPage;
+  let fixture: ComponentFixture<OrderdetailsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderdetailsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderdetailsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/orderdetails/orderdetails.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-orderdetails',
+  templateUrl: './orderdetails.page.html',
+  styleUrls: ['./orderdetails.page.scss'],
+})
+export class OrderdetailsPage implements OnInit {
+
+  shownGroup = null;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { 
+
+    this.shownGroup = 0;
+    console.log(this.shownGroup);
+   
+
+  }
+
+  ngOnInit() {
+  }
+
+
+
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+
+  isGroupShown(group) {
+    return this.shownGroup === group;
+  }
+
+  toggleGroup(group) {
+    if (this.isGroupShown(group)) {
+      this.shownGroup = null;
+    } else {
+      this.shownGroup = group;
+    }
+  }
+   
+
+
+}

src/app/otp/otp.module.ts

+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 { OtpPage } from './otp.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OtpPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [OtpPage]
+})
+export class OtpPageModule {}

src/app/otp/otp.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>OTP</h4></div>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                  <div class="row">
+                      <h5>We have sent an OTP to</h5>
+                      <h2>8888 000 000</h2>
+                      <p class="textCenter">Type the OTP below</p>
+                      <div class="otp_input_box">
+                        <ion-row>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                        </ion-row>
+                      </div>
+                  </div>
+                  <div class="row textCenter">
+                      <button class="signup_btn" (click)="goToPage('password')">Submit</button>
+                    </div>
+              </div>
+        </div>
+      </ion-content>
+      <ion-footer>
+        <h3>Resend OTP</h3>
+      </ion-footer>

src/app/otp/otp.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom:25px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+
+            h5{
+                color: #4e4961;
+                text-align: center;
+                font-size: 16px;
+            }
+
+            h2{
+                text-align: center;
+                color: #282438;
+                font-size: 32px;
+                padding-bottom: 15%;
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius:35px;
+                color:#39267f;
+                height: 45px;
+                font-weight: 600;
+                text-align: center;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 120px;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+
+        .otp_input_box{
+            width: 80%;
+            margin: 0 auto;
+        }
+    }
+        
+}
+
+h3{
+    color: #39267f;
+    text-align:center;
+    font-size: 15px;
+    font-weight: 500;
+}
\ No newline at end of file

src/app/otp/otp.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OtpPage } from './otp.page';
+
+describe('OtpPage', () => {
+  let component: OtpPage;
+  let fixture: ComponentFixture<OtpPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OtpPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OtpPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/otp/otp.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-otp',
+  templateUrl: './otp.page.html',
+  styleUrls: ['./otp.page.scss'],
+})
+export class OtpPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/partproduct/partproduct.module.ts

+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 { PartproductPage } from './partproduct.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PartproductPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [PartproductPage]
+})
+export class PartproductPageModule {}

src/app/partproduct/partproduct.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+      </button>
+        <div class="nav_title floatLeft">
+            <h4><span class="">Alreem Parts</span>
+                <div class="clear"></div>
+            </h4>
+            <div class="clear"></div>
+        </div>
+        <button class="nav_btn nav_btn_text floatRight">
+
+      </button>
+        <div class="clear"></div>
+    </div>
+</ion-header>
+<ion-content>
+    <div class="product_booking_wrapper">
+        <div class="product_slider">
+            <ion-slides pager="false" [options]="slidesOpts" (ionSlideDidChange)="slideChanged()">
+                <ion-slide>
+                    <img src="../../assets/img/asset_slider1.png">
+                </ion-slide>
+                <ion-slide>
+                    <img src="../../assets/img/asset_slider1.png">
+                </ion-slide>
+                <ion-slide>
+                    <img src="../../assets/img/asset_slider1.png">
+                </ion-slide>
+            </ion-slides>
+            <div class="product_slider_nav">
+                <div class="product_nav_btn prev_btn" (click)="prev()"></div>
+                <div class="product_nav_btn next_btn" (click)="next()"></div>
+            </div>
+        </div>
+        <div class="product_inner">
+            <h5>Mega 3 Inch Band P200</h5>
+            <fieldset class="rating">
+                <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
+                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
+                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
+                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
+                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
+                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+            </fieldset>
+            <p>34 Reviews</p>
+            <div class="carlist">
+                <ul>
+                    <li>
+                        <div class="auto_pic"></div>
+                        <div class="auto_detail">
+                            <h4><strong>Rolls Royce</strong> Ghost</h4>
+                            <div class="auto_detail_inner">
+                                <p>Mileage: 08 - 12</p>
+                                <p>Model: 2019</p>
+                            </div>
+                        </div>
+                        <div class="clear"></div>
+                    </li>
+                </ul>
+            </div>
+            <h5>Details</h5>
+            <h6>We promise to help you find the best car tyres Dubai has to offer.</h6>
+            <h6>There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all
+                customers from motorists.</h6>
+
+        </div>
+    </div>
+    <div class="total_footer">
+        <div class="detail_tab">
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Product Amount</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$230</p>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Labour Charge</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$50</p>
+                </ion-col>
+            </ion-row>
+        </div>
+        <div class="total_amount">
+            <div class="total_inner">
+                <ion-row>
+                    <ion-col>
+                        <p class="textLeft">Total Amount</p>
+                    </ion-col>
+                    <ion-col>
+                        <p class="textRight">$<strong>280</strong></p>
+                    </ion-col>
+                </ion-row>
+            </div>
+        </div>
+        <button class="signup_btn">Purchase</button>
+    </div>
+</ion-content>
\ No newline at end of file

src/app/partproduct/partproduct.page.scss

+.product_booking_wrapper{
+    .product_slider{
+        width: 100%;
+        height:350px;
+        padding-top: 40px;
+        position: relative;
+        .product_slider_nav{
+            position: absolute;
+            top:40%;
+            left:0px;
+            right:0px;
+            bottom: 0px;
+            .product_nav_btn{
+                width: 50px;
+                height: 50px;
+                position: absolute;
+                background-position: center;
+                background-size:38px;
+                background-repeat: no-repeat;
+                z-index: 99;
+            }
+            .prev_btn{
+                left: 0px;
+                background-image: url("../../assets/img/asset_prev.png");
+            }
+            .next_btn{
+                right:0px;
+                background-image: url("../../assets/img/asset_next.png");
+            }
+        }
+        ion-slides{
+            height: 100%;
+            ion-slide{
+
+            }
+        }
+    }
+    .product_inner{
+        padding:15px;
+        h5{
+            margin: 0px;
+            padding-bottom: 5px;
+        }
+        .rating { 
+            border: none;
+            width:100px;
+            margin: 0px;
+            padding: 0px;
+          }
+          
+          .rating > input { display: none; } 
+          .rating > label:before { 
+            margin:2px;
+            font-size:17px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+          }
+          
+          .rating > .half:before { 
+            content: "\f089";
+            position: absolute;
+          }
+          
+          .rating > label { 
+            color: #dcdae9; 
+           float: right; 
+          }
+          
+          /***** CSS Magic to Highlight Stars on Hover *****/
+          
+          .rating > input:checked ~ label, /* show gold star when clicked */
+          .rating:not(:checked) > label:hover, /* hover current star */
+          .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+          
+          .rating > input:checked + label:hover, /* hover current star when changing rating */
+          .rating > input:checked ~ label:hover,
+          .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+          .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+        p{
+            margin: 0px;
+            padding-top:5px;
+            font-size: 12px;
+        }
+
+        h6{
+            text-align: justify;
+            color: #4e4961;
+        }
+
+        .carlist{
+            padding:10px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            ul{
+                margin:0px;
+                padding:0px;
+                li{
+                    list-style: none;
+                    border-radius: 15px;
+                    margin-bottom: 10px;
+                    .auto_pic{
+                        width:60px;
+                        height:60px;
+                        -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                        -moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                        box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                        border-radius:15px;
+                        float: left;
+                        img{
+                            width: 100%;
+                            height:100%;
+                            border-radius: 15px;
+                            object-fit: cover;
+                            object-position: center;
+                        }
+                    }
+                    .auto_detail{
+                        float: left;
+                        width: calc(100% - 60px);
+                        padding-left:15px;
+                        h4{
+                            margin:0px;
+                            padding: 0px;
+                            color: #282438;
+                            font-weight: 400;
+                            padding-bottom:5px;
+                            font-size: 17px;
+                            strong{
+                                font-weight: 600;
+                            }
+                        }
+                        .auto_detail_inner{
+                            border-left:1px dashed #4e4961;
+                            margin-left:10px;
+                            padding-left: 15px;
+                            p{
+                                margin:0px;
+                                padding: 0px;
+                                color: #a29ebf;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+      
+    }
+}
+
+.total_footer{
+    background-color: #e4e1ee;
+    padding:15px;
+    .detail_tab{
+        width: 100%;
+        margin-bottom: 15px;
+        p{
+            margin:0px;
+            padding:0px;
+            color: #282438;
+            font-weight:500;
+            font-size: 16px;
+        }
+    }
+    .total_amount{
+      width: 100%;
+        padding:0px;
+        padding-top:0px;
+        padding-bottom: 0px;
+        .total_inner{
+            border-top:2px dashed #4e4961;
+            padding: 5px;
+            padding-left: 0px;
+            padding-right: 0px;
+        }
+        p{
+            margin:0px;
+            padding:0px;
+            color: #282438;
+            font-weight:500;
+            font-size: 16px;
+        }     
+  }
+  .signup_btn{
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    background-color: #39267f;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 16px; 
+}
+}
\ No newline at end of file

src/app/partproduct/partproduct.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PartproductPage } from './partproduct.page';
+
+describe('PartproductPage', () => {
+  let component: PartproductPage;
+  let fixture: ComponentFixture<PartproductPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PartproductPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PartproductPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/partproduct/partproduct.page.ts

+
+import { Component, OnInit, ViewChild, } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-partproduct',
+  templateUrl: './partproduct.page.html',
+  styleUrls: ['./partproduct.page.scss'],
+})
+export class PartproductPage implements OnInit {
+  @ViewChild(IonSlides) slides: IonSlides;
+  currentIndex: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+  slidesOpts = {
+    slidesPerView: 1
+  }
+
+  next() {
+    this.slides.slideNext();
+  }
+
+  prev() {
+    this.slides.slidePrev();
+  }
+
+}

src/app/password/password.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PasswordPage } from './password.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PasswordPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ReactiveFormsModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [PasswordPage]
+})
+export class PasswordPageModule {}

src/app/password/password.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>Password</h4></div>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                <form [formGroup]="passwordForm">
+                <div class="row">
+                  <p>Password</p>
+                  <ion-input formControlName="password" type="password"></ion-input>
+                </div>
+                <div style="text-align: center" *ngIf="passwordForm.controls.password.invalid && (passwordForm.get('password').dirty || passwordForm.get('password').touched)">
+                 Minimum 6 characters required
+                  </div>
+                <div class="row">
+                  <p>Confirm Password</p>
+                  <ion-input formControlName="newpassword" type="password"></ion-input>
+                </div>
+                <div style="text-align: center" *ngIf="passwordForm.controls.newpassword.invalid && (passwordForm.get('newpassword').dirty || passwordForm.get('newpassword').touched)">
+                    Minimum 6 characters required
+                     </div>
+                <br>
+                <div class="row textCenter">
+                    <button class="signup_btn" (click)="userSignup()">Sign Up</button>
+                </div>
+              </form>
+              </div>
+        </div>
+      </ion-content>
\ No newline at end of file

src/app/password/password.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom:15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+
+            h5{
+                color: #4e4961;
+                text-align: center;
+                font-size: 16px;
+            }
+
+            h2{
+                text-align: center;
+                color: #282438;
+                font-size: 32px;
+                padding-bottom: 15%;
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius:35px;
+                color:#39267f;
+                height: 45px;
+                font-weight: 600;
+                text-align: center;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+
+        .otp_input_box{
+            width: 80%;
+            margin: 0 auto;
+        }
+    }
+        
+}
+
+h3{
+    color: #39267f;
+    text-align:center;
+    font-size: 15px;
+    font-weight: 500;
+}
\ No newline at end of file

src/app/password/password.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordPage } from './password.page';
+
+describe('PasswordPage', () => {
+  let component: PasswordPage;
+  let fixture: ComponentFixture<PasswordPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PasswordPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/password/password.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { FormBuilder, Validators } from '@angular/forms';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
+import {StorageService } from '../../Config/services/storage.service';
+@Component({
+  selector: 'app-password',
+  templateUrl: './password.page.html',
+  styleUrls: ['./password.page.scss'],
+})
+export class PasswordPage implements OnInit {
+  userSignupForm: any;
+  passwordForm = this.fb.group({
+    password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
+    newpassword: ['', Validators.compose([Validators.required, Validators.minLength(6)])]
+  });
+  constructor(
+    private router: Router,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+    private route: ActivatedRoute,
+    private location: Location,
+    private fb: FormBuilder,
+    private storageservice: StorageService
+  ) {
+    this.userSignupForm = JSON.parse(this.route.snapshot.paramMap.get('id'));
+    console.log(this.userSignupForm);
+    this.userSignupForm.user_password = '';
+   }
+
+  ngOnInit() {
+  }
+
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+  userSignup() {
+    if (this.passwordForm.valid) {
+      if (this.passwordForm.value.password === this.passwordForm.value.newpassword) {
+        this.userSignupForm.user_password = this.passwordForm.value.newpassword;
+        this.authenticationService.post_data('user_signup', this.userSignupForm).subscribe((data) => {
+          console.log(data);
+          if (data.status === 'success') {
+            this.validationService.presentToast('Your account created successfully');
+            this.storageservice.setLocalStorageItem('userData', data.data);
+            this.goToPage('home');
+          } else {
+            this.validationService.presentToast(data.message);
+            this.passwordForm.reset();
+            this.userSignupForm.user_password = '';
+          }
+        });
+      } else {
+        this.validationService.presentToast('Password mismatch!');
+      }
+    } else {
+      this.validationService.presentToast('Please fill all fields, Password length should be minimum 6');
+    }
+  }
+
+}

src/app/productbooking/productbooking.module.ts

+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 { ProductbookingPage } from './productbooking.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProductbookingPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ProductbookingPage]
+})
+export class ProductbookingPageModule {}

src/app/productbooking/productbooking.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>Product booking</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="product_booking_wrapper">
+    <div class="product_slider">
+      <ion-slides pager="false" [options]="slidesOpts" (ionSlideDidChange)="slideChanged()">
+        <ion-slide>
+          <img src="../../assets/img/asset_slider1.png">
+        </ion-slide>
+        <ion-slide>
+          <img src="../../assets/img/asset_slider1.png">
+        </ion-slide>
+        <ion-slide>
+          <img src="../../assets/img/asset_slider1.png">
+        </ion-slide>
+      </ion-slides>
+      <div class="product_slider_nav">
+        <div class="product_nav_btn prev_btn" (click)="prev()"></div>
+        <div class="product_nav_btn next_btn" (click)="next()"></div>
+      </div>
+    </div>
+    <div class="product_detail">
+      <div class="product_top"></div>
+      <div class="product_inner">
+        <div class="product_header">
+          <div class="product_name">
+              <h4>Mega 3 Inch Band P200</h4>
+              <hr>
+          </div>
+          <div class="product_btn">
+            Purchase
+          </div>
+          <div class="clear"></div>
+        </div>
+        <h5>Details</h5>
+        <p>We promise to help you find the best car tyres Dubai has to offer.
+          </p>
+          <p>There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all customers from motorists.</p>
+      </div>
+    </div>
+  </div>
+</ion-content>

src/app/productbooking/productbooking.page.scss

+.product_booking_wrapper{
+    .product_slider{
+        width: 100%;
+        height:350px;
+        padding-top: 40px;
+        position: relative;
+        .product_slider_nav{
+            position: absolute;
+            top:40%;
+            left:0px;
+            right:0px;
+            bottom: 0px;
+            .product_nav_btn{
+                width: 50px;
+                height: 50px;
+                position: absolute;
+                background-position: center;
+                background-size:38px;
+                background-repeat: no-repeat;
+                z-index: 99;
+            }
+            .prev_btn{
+                left: 0px;
+                background-image: url("../../assets/img/asset_prev.png");
+            }
+            .next_btn{
+                right:0px;
+                background-image: url("../../assets/img/asset_next.png");
+            }
+        }
+        ion-slides{
+            height: 100%;
+            ion-slide{
+
+            }
+        }
+    }
+
+    .product_detail{
+        position: fixed;
+        bottom: 0px;
+        left:0px;
+        right:0px;
+        z-index: 9;
+        .product_top{
+            width: 100%;
+            height:50px;
+            background: url("../../assets/img/asset_top_bg.png");
+        }
+        .product_inner{
+            padding:20px;
+            background-color: rgba(230, 228, 239,.9);
+            .product_header{
+                .product_name{
+                    width:calc(100% - 120px);
+                    float: left;
+                    h4{
+                        margin:0px;
+                        padding:0px;
+                        padding-bottom: 5px;
+                    }
+                    hr{
+                        border:2px solid #fbd339;
+                        height:0px;
+                        border-radius: 20px;
+                        width: 40px;
+                        margin-left: 0px;
+                    }
+                }
+                .product_btn{
+                    width:120px;
+                    float: left;
+                    text-align: center;
+                    background-color: #39267f;
+                    color: #fff;
+                    height:35px;
+                    padding: 7px;
+                    border-radius: 20px;
+                
+                }
+            }
+            h5{
+                color: #282438;
+            }
+            p{
+                color: #4e4961;
+                text-align: justify;
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/productbooking/productbooking.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductbookingPage } from './productbooking.page';
+
+describe('ProductbookingPage', () => {
+  let component: ProductbookingPage;
+  let fixture: ComponentFixture<ProductbookingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductbookingPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductbookingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/productbooking/productbooking.page.ts

+
+import { Component, OnInit, ViewChild, } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-productbooking',
+  templateUrl: './productbooking.page.html',
+  styleUrls: ['./productbooking.page.scss'],
+})
+export class ProductbookingPage implements OnInit {
+  @ViewChild(IonSlides) slides: IonSlides;
+  currentIndex: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+  slidesOpts = {
+    slidesPerView: 1
+  }
+
+  next() {
+    this.slides.slideNext();
+  }
+
+  prev() {
+    this.slides.slidePrev();
+  }
+
+}

src/app/profile/profile.module.ts

+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 { ProfilePage } from './profile.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProfilePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ProfilePage]
+})
+export class ProfilePageModule {}

src/app/profile/profile.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+                </button>
+                <div class="nav_title floatLeft"><h4>JOHN DOE</h4></div>
+                <button class="nav_btn floatLeft">
+                  <div class="account_pic">
+                      <img src="../../assets/img/asset_triangle.png">
+                  </div>
+                </button>
+                <div class="clear"></div>
+                <div class="clear"></div>
+            </div>
+            <div class="profile_pic" (click)="goToPage('profilephoto')">
+              <div class="overlay"></div>
+              <img src="../../assets/img/asset_profile_pic.png">
+            </div>
+            <div class="" style="height: 300px;">
+                <div class="profile_wrapper">
+                    <ul>
+                        <li (click)="goToPage('myservices')">
+                            <div class="li_image">
+                              <img src="../../assets/img/asset_m1.png">
+                            </div>
+                            <div class="li_detail">
+                              <h5>My Services</h5>
+                              <p>Total services: 08</p>
+                            </div>
+                            <div class="clear"></div>
+                        </li>
+                        <li (click)="goToPage('myorders')">
+                            <div class="li_image">
+                                <img src="../../assets/img/asset_m2.png">
+                            </div>
+                            <div class="li_detail">
+                              <h5>My Orders</h5>
+                              <p>Total purchases: 18</p>
+                            </div>
+                            <div class="clear"></div>
+                        </li>
+                        <li (click)="goToPage('carlist')">
+                            <div class="li_image">
+                                <img src="../../assets/img/asset_m3.png">
+                            </div>
+                            <div class="li_detail">
+                              <h5>My Cars</h5>
+                              <p></p>
+                            </div>
+                            <div class="clear"></div>
+                        </li>
+                        <li (click)="goToPage('general')">
+                            <div class="li_image">
+                                <img src="../../assets/img/asset_m4.png">
+                            </div>
+                            <div class="li_detail">
+                              <h5>General Details</h5>
+                              <p></p>
+                            </div>
+                            <div class="clear"></div>
+                        </li>
+                        <li (click)="goToPage('login')">
+                            <div class="li_image">
+                                <img src="../../assets/img/asset_m5.png">
+                            </div>
+                            <div class="li_detail borderNone">
+                              <h5>Logout</h5>
+                              <p></p>
+                            </div>
+                            <div class="clear"></div>
+                        </li>
+                    </ul>
+                  </div>
+            </div>
+            
+        </div>
+      </ion-content>

src/app/profile/profile.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .profile_pic{
+        width:100%;
+        height:290px;
+        position: relative;
+        .overlay{
+            position: absolute;
+            top:0px;
+            left:0px;
+            right:0px;
+            bottom: 0px;
+            -webkit-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+-moz-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+
+        }
+        img{
+            width:100%;
+            height:100%;
+            object-fit:cover;
+            object-position:center;
+        }
+    }
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom: 15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+    }
+    .profile_wrapper{
+        width: 90%;
+        margin:0 auto;
+        padding:20px;
+        background: rgba(238,237,244,0.8);
+        position: relative;
+        bottom:80px;
+        border-radius: 15px;
+        ul{
+            margin:0px;
+            padding:0px;
+            li{
+                list-style: none;
+            
+                .li_image{  
+                    width: 50px;
+                    float: left;
+                    padding-top: 15px;
+                    img{
+                        height: 25px;
+                    }
+                }
+                .li_detail{
+                    width: calc(100% - 50px);
+                    float: left;
+                    padding-bottom: 15px;
+                    padding-top: 15px;
+                    border-bottom: 1px solid #e1deea;
+                    h5{
+                        margin:0px;
+                        padding: 0px;
+                        color: #282438;
+                        padding-bottom: 5px;
+                    }
+                    p{
+                        margin:0px;
+                        padding:0px;
+                        color: #a29ebf;
+                        font-size: 10px;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/profile/profile.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfilePage } from './profile.page';
+
+describe('ProfilePage', () => {
+  let component: ProfilePage;
+  let fixture: ComponentFixture<ProfilePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProfilePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfilePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile/profile.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.page.html',
+  styleUrls: ['./profile.page.scss'],
+})
+export class ProfilePage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/profilephoto/profilephoto.module.ts

+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 { ProfilephotoPage } from './profilephoto.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProfilephotoPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ProfilephotoPage]
+})
+export class ProfilephotoPageModule {}

src/app/profilephoto/profilephoto.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+                </button>
+                <div class="nav_title floatLeft"><h4>PROFILE PHOTO</h4></div>
+                <button class="nav_btn floatLeft">
+                  <div class="account_pic">
+                      <img src="../../assets/img/asset_triangle.png">
+                  </div>
+                </button>
+                <div class="clear"></div>
+                <div class="clear"></div>
+            </div>
+            <div class="profile_pic">
+                <div class="overlay"></div>
+              <img src="../../assets/img/asset_profile_pic.png">
+            </div>
+            <div padding>
+              <button class="update_btn">Update</button>
+            </div>
+            
+        </div>
+      </ion-content>

src/app/profilephoto/profilephoto.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .profile_pic{
+        width:100%;
+        height:290px;
+        position: relative;
+        .overlay{
+            position: absolute;
+            top:0px;
+            left:0px;
+            right:0px;
+            bottom: 0px;
+            -webkit-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+-moz-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+
+        }
+        img{
+            width:100%;
+            height:100%;
+            object-fit:cover;
+            object-position:center;
+        }
+    }
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom: 15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+    }
+    .update_btn{
+        height: 40px;
+        width: 100%;
+        color: #fff;
+        background-color: #39267f;
+        border-radius: 20px;
+        font-weight: 500;
+        font-size: 16px; 
+    }
+}
\ No newline at end of file

src/app/profilephoto/profilephoto.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfilephotoPage } from './profilephoto.page';
+
+describe('ProfilephotoPage', () => {
+  let component: ProfilephotoPage;
+  let fixture: ComponentFixture<ProfilephotoPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProfilephotoPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfilephotoPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profilephoto/profilephoto.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-profilephoto',
+  templateUrl: './profilephoto.page.html',
+  styleUrls: ['./profilephoto.page.scss'],
+})
+export class ProfilephotoPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/purchaseparts/purchaseparts.module.ts

+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 { PurchasepartsPage } from './purchaseparts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PurchasepartsPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [PurchasepartsPage]
+})
+export class PurchasepartsPageModule {}

src/app/purchaseparts/purchaseparts.page.html

+<ion-header>
+    <div class="app_header relative">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>Purchase Parts</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+      </button>
+      <div class="clear"></div>
+      <div class="seach_bar_outer">
+          <div class="search_bar">
+              <input class="" placeholder="Search Parts...">
+          </div>
+      </div>
+  </div>
+  </ion-header>
+  <ion-content>
+    <div class="purchase_wrapper">
+        <div class="header_submenu">
+            <h4>People most purchased</h4>
+            <button class="more_btn">More</button>
+            <div class="clear"></div>
+        </div>
+        <div class="product_section">
+            <ion-slides pager="false" [options]="slideOpts">
+                <ion-slide>
+                  <div class="product_outter">
+                      <div class="product_div">
+                          <div class="rating">3.1</div>
+                          <div class="product_img">
+                            <img src="../../assets/img/asset_dummy_item1.png">
+                          </div>
+                        </div>
+                        <h4>PM 237</h4>
+                        <hr>
+                  </div>
+                </ion-slide>
+                <ion-slide>
+                    <div class="product_outter">
+                    <div class="product_div">
+                        <div class="rating">3.1</div>
+                        <div class="product_img">
+                          <img src="../../assets/img/asset_dummy_item2.png">
+                        </div>
+                    </div>
+                    <h4>Mega 3inch Band</h4>
+                    <hr>
+                    </div>
+                </ion-slide>
+                <ion-slide>
+                    <div class="product_outter">
+                    <div class="product_div">
+                        <div class="rating">3.1</div>
+                        <div class="product_img">
+                          <img src="../../assets/img/asset_dummy_item3.png">
+                        </div>
+                    </div>
+                    <h4>PM 237</h4>
+                    <hr>
+                    </div>
+                </ion-slide>
+                <ion-slide>
+                    <div class="product_outter">
+                        <div class="product_div">
+                            <div class="rating">3.1</div>
+                            <div class="product_img">
+                              <img src="../../assets/img/asset_dummy_item1.png">
+                            </div>
+                          </div>
+                          <h4>PM 237</h4>
+                          <hr>
+                    </div>
+                  </ion-slide>
+                  <ion-slide>
+                      <div class="product_outter">
+                      <div class="product_div">
+                          <div class="rating">3.1</div>
+                          <div class="product_img">
+                            <img src="../../assets/img/asset_dummy_item2.png">
+                          </div>
+                      </div>
+                      <h4>Mega 3inch Band</h4>
+                      <hr>
+                      </div>
+                  </ion-slide>
+                  <ion-slide>
+                      <div class="product_outter">
+                      <div class="product_div">
+                          <div class="rating">3.1</div>
+                          <div class="product_img">
+                            <img src="../../assets/img/asset_dummy_item3.png">
+                          </div>
+                      </div>
+                      <h4>PM 237</h4>
+                      <hr>
+                      </div>
+                  </ion-slide>
+              </ion-slides>
+        </div>
+        <div class="header_submenu">
+            <h4>People most purchased</h4>
+            <button class="more_btn">More</button>
+            <div class="clear"></div>
+        </div>
+        <div class="product_list_bay">
+          <ul>
+            <li (click)="goToPage('productbooking')">
+              <div class="badge premium_badge">Premium</div>
+                <img src="../../assets/img/asset_dummy_item1.png">
+                <h4>PM 237</h4>
+                <p>Lorem ipsum</p>
+                <div class="rating">3.1</div>
+                <hr>
+            </li>
+            <li (click)="goToPage('productbooking')">
+                <div class="badge bestseller_badge">Best Seller</div>
+                <img src="../../assets/img/asset_dummy_item2.png">
+                <h4>PM 237</h4>
+                <p>Lorem ipsum</p>
+                <div class="rating">3.0</div>
+                <hr>
+            </li>
+            <li (click)="goToPage('productbooking')">
+                <div class="badge on_offer">On Offer</div>
+                <img src="../../assets/img/asset_dummy_item3.png">
+                <h4>PM 237</h4>
+                <p>Lorem ipsum</p>
+                <div class="rating">3.7</div>
+                <hr>
+            </li>
+            <li (click)="goToPage('productbooking')">
+                <img src="../../assets/img/asset_dummy_item1.png">
+                <h4>PM 237</h4>
+                <p>Lorem ipsum</p>
+                <div class="rating">2.8</div>
+                <hr>
+            </li>
+            <li (click)="goToPage('productbooking')">
+                <img src="../../assets/img/asset_dummy_item2.png">
+                <h4>PM 237</h4>
+                <p>Lorem ipsum</p>
+                <div class="rating">3.5</div>
+                <hr>
+            </li>
+          </ul>
+        </div>
+    </div>
+
+    
+  </ion-content>
+  
\ No newline at end of file

src/app/purchaseparts/purchaseparts.page.scss

+.seach_bar_outer{
+    position: absolute;
+    width:100%;
+    .search_bar{
+        width: 90%;
+        margin:0 auto;
+        background-color: #fff;
+        border-radius:100px;
+        -webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+    -moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+    box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+        input{
+            width:100%;
+            border:none;
+            height:45px;
+            border-radius: 100px;
+            background-image: url("../../assets/img/asset_search.png");
+            background-position: right 15px top 10px;
+            background-repeat: no-repeat;
+            background-size: 20px;
+            padding-left: 20px;
+            padding-right: 20px;
+            font-weight: 300;
+            &::placeholder{
+                font-weight: 300;
+                color: #9e97ba;
+            }
+        }
+    }
+}
+.purchase_wrapper{
+    padding-top:35px;
+    background: #f0eef6;
+    .header_submenu{
+        padding:10px;
+        h4{
+          margin:0px;
+          padding:0px;
+          float: left;
+          padding-top: 5px;
+          padding-bottom: 5px;
+          white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        }
+        .more_btn{
+          background: #39267f;
+          color: #fff;
+          height:35px;
+          float: right;
+          padding-left: 15px;
+          padding-right: 15px;
+          border-radius: 20px;
+        }
+      }
+      .product_section{
+        padding: 10px;
+        ion-slides{
+          .product_outter{
+            min-width: 100%;
+            padding: 5px;
+          }
+        }
+        .product_div{
+          background: #f6f5fa;
+          text-align: center;
+          border-radius:15px;
+          padding: 10px;
+          position: relative;
+          .rating{
+            background-color: rgba(255, 255, 255, 0.9);
+            background-image: url("../../assets/img/asset_star.png");
+            position: absolute;
+            bottom: 10px;
+            left: 5px;
+            padding-left: 25px;
+            background-size: 12px;
+            background-repeat: no-repeat;
+            background-position: center left 6px;
+            padding-right: 10px;
+            border-radius: 15px;
+          }
+          img{
+            height:90px;
+            width: auto;
+          }
+        }
+        h4{
+          color: #282438;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          text-align: left;
+        }
+        hr{
+          border:2px solid #fbd339;
+          width:30px;
+          border-radius: 20px;
+          height:0px;
+          margin-left:0px;
+        }
+      }
+    .select_services_wrapper{
+        background-image: linear-gradient(to bottom, #e7e5f1, #edebf5, #f3f2f8, #f9f8fc, #ffffff);
+    .home_main_stack_menu{
+    
+        padding: 15px;
+        padding-top: 50px;
+        img{
+          width: 80px;
+          border:2px solid transparent;
+          border-radius: 20px;
+          &:hover{
+            border:2px solid #8769f4;
+            border-radius: 20px;
+            -webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+        -moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+        box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+          }
+        }
+        p{
+          text-align: center;
+          color: #4e4961;
+          margin:0px;
+          padding-top: 10px;
+    
+        }
+      }
+    }
+    .product_list_bay{
+      ul{
+        margin:0px;
+        padding:10px;
+        li{
+          list-style: none;
+          width:47.5%;
+          position: relative;
+          padding-top:20px;
+          padding-left: 8px;
+          padding-right: 8px;
+          text-align: center;
+          margin:4px;
+          max-height: 220px;
+          background: #ffffff;
+          display: inline-block;
+          border-radius: 10px;
+          -webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
+        -moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
+        box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
+        img{
+          height: 130px;
+          width: auto;
+        }
+        h4{
+          color: #282438;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 16px;
+          text-align: left;
+          margin-top: 0px;
+          margin-bottom: 1px;
+        }
+        p{
+          margin: 0px;
+          color: #9e97ba;
+          text-align: left;
+          font-size:10px;
+        }
+        hr{
+          border:2px solid #fbd339;
+          width:30px;
+          border-radius: 20px;
+          height:0px;
+          margin-left:0px;
+        }
+
+        .rating{
+          background-color: rgba(255, 255, 255, 0.9);
+          background-image: url("../../assets/img/asset_star.png");
+          position: absolute;
+          bottom: 25px;
+          right: 10px;
+          padding-left: 25px;
+          background-size: 12px;
+          background-repeat: no-repeat;
+          background-position: center left 6px;
+          padding-right: 10px;
+          border-radius: 15px;
+        }
+
+        .badge{
+          position: absolute;
+          top:0px;
+          right:0px;
+          height: 23px;
+          border-radius: 0px;
+          font-size: 14px;
+          padding: 3px;
+          padding-left: 10px;
+          padding-right: 10px;
+          border-top-right-radius: 10px;
+        }
+        .premium_badge{
+        }
+        .bestseller_badge{
+          background-color: #fbd339;
+        }
+        .on_offer{
+          background-color: #7baf38;
+          color: #fff;
+        }
+        }
+      }
+    }
+}

src/app/purchaseparts/purchaseparts.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PurchasepartsPage } from './purchaseparts.page';
+
+describe('PurchasepartsPage', () => {
+  let component: PurchasepartsPage;
+  let fixture: ComponentFixture<PurchasepartsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PurchasepartsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PurchasepartsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/purchaseparts/purchaseparts.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-purchaseparts',
+  templateUrl: './purchaseparts.page.html',
+  styleUrls: ['./purchaseparts.page.scss'],
+})
+export class PurchasepartsPage implements OnInit {
+
+  slideOpts = {
+    initialSlide: 1,
+    speed: 400,
+    slidesPerView:3
+  };
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/review/review.module.ts

+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 { ReviewPage } from './review.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ReviewPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ReviewPage]
+})
+export class ReviewPageModule {}

src/app/review/review.page.html

+<ion-content class="review_wrapper">
+<button class="" (click)="myDismiss()">close</button>
+</ion-content>

src/app/review/review.page.scss

+.review_wrapper{
+
+}
+

src/app/review/review.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReviewPage } from './review.page';
+
+describe('ReviewPage', () => {
+  let component: ReviewPage;
+  let fixture: ComponentFixture<ReviewPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReviewPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReviewPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/review/review.page.ts

+import { Component, OnInit } from '@angular/core';
+import {ModalController, NavParams} from '@ionic/angular';
+
+@Component({
+  selector: 'app-review',
+  templateUrl: './review.page.html',
+  styleUrls: ['./review.page.scss'],
+})
+export class ReviewPage implements OnInit {
+
+  constructor(
+    private modalController: ModalController,
+    private navParams: NavParams
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  async myDismiss() {
+    await this.modalController.dismiss();
+  }
+
+}

src/app/roadassistance/roadassistance.module.ts

+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 { RoadassistancePage } from './roadassistance.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RoadassistancePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [RoadassistancePage]
+})
+export class RoadassistancePageModule {}

src/app/roadassistance/roadassistance.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>ROAD ASSISTANCE</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+  </ion-header>
+<ion-content>
+    <div class="home_wrapper">
+      <div class="location_box">
+        <div class="location_bar">
+            Infopark,Kakkanad
+        </div>
+      </div>
+      <ul *ngIf="getRoadassistanceList">
+        <li *ngFor="let roadassistant of getRoadassistanceList; let i = index">
+          <div class="circle">
+            <img src="../../assets/img/asset_shop1.png">
+          </div>
+          <div class="details">
+              <div class="list_btn remind" (click)="bookGarage(roadassistant.road_assist_id)">Book</div>
+            <h5>{{roadassistant.name}}</h5>
+            <p>34 Reviews</p>
+            <h6 class="floatLeft"><span class="distance_banner">{{roadassistant.distance}}Km</span><span class="other_banner" >{{distance(roadassistant.distance)}}</span></h6>
+            <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
+              <div class="clear"></div>
+          </div>
+          <div class="clear"></div>
+        </li>
+        
+      </ul>
+    </div>
+</ion-content>

src/app/roadassistance/roadassistance.page.scss

+.home_wrapper{
+    padding-top: 30px;
+    .location_box{
+      position: fixed;
+      left:0px;
+      top: 60px;
+      right:0px;
+      z-index: 999;
+    }
+    .location_bar{
+      max-width:200px;
+      background: #fbd339;
+      padding:5px;
+    border-radius: 20px;
+    margin:0 auto;
+    text-align: center;
+    -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    background-image: url("../../assets/img/aaset_loc.png");
+    background-position: left 15px top 6px;
+    background-repeat: no-repeat;
+    padding-left:35px;
+    padding-right:30px;
+    background-size: 15px;
+    font-size: 14px;
+    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+    }
+    ul{
+        padding:10px;
+        margin:0px;
+        li{
+            background: #f6f5fa;
+            border-radius:10px;
+            margin-bottom: 10px;
+            position: relative;
+            padding:20px;
+            .circle{
+                width:60px;
+                height:60px;
+                float: left;
+                img{
+                    width: 100%;
+                    height:100%;
+                }
+            }
+            .details{
+                float: right;
+                width:calc(100% - 60px);
+                padding-left: 20px;
+                h5{
+                    margin:0px;
+                    padding:0px;
+                    padding-bottom: 5px;
+                }
+                .list_btn{
+                    position: absolute;
+                    right: 2px;
+                    top: 17px;
+                    font-size: 14px;
+                }
+                .remind{
+                    color: #282438;
+                    background: url("../../assets/img/asset_remind.png");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100%;
+                    padding: 36px;
+                    padding-left: 17px;
+                    padding-right: 15px;
+                }
+                .book{
+                    color: #fff;
+                    background: url("../../assets/img/asset_book.png");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100%;
+                    padding: 10px;
+                    padding-left: 15px;
+                    padding-right: 15px;
+                    
+                }
+                p{
+                    margin:0px;
+                    padding:0px;
+                    color: #282438;
+                    font-size: 12px;
+                    padding-top: 5px;
+                }
+                h6{
+                    margin:0px;
+                    padding: 0px;
+                    padding-top:8px;
+                }
+                .distance_banner{
+                    background-color: #fff;
+                    padding: 3px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    background-image: url("../../assets/img/aaset_loc.png");
+                    background-position: left 5px top 4px;
+                    background-repeat: no-repeat;
+                    padding-left: 20px;
+                    background-size: 12px;
+                    border-radius: 10px;
+                    margin-right: 10px;
+                    font-size: 12px;
+                }
+                .other_banner{
+                    background: #fbd339;
+                    color: #282438;
+                    padding: 3px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    font-size: 12px;
+                }
+
+                .playit{
+                    padding-top: 8px;
+                    img{
+                        width: 15px;
+                    }
+                }
+                .rating { 
+                    border: none;
+                    width:85px;
+                    margin: 0px;
+                    padding: 0px;
+                  }
+                  
+                  .rating > input { display: none; } 
+                  .rating > label:before { 
+                    margin:2px;
+                    font-size:14px;
+                    font-family: FontAwesome;
+                    display: inline-block;
+                    content: "\f005";
+                  }
+                  
+                  .rating > .half:before { 
+                    content: "\f089";
+                    position: absolute;
+                  }
+                  
+                  .rating > label { 
+                    color: #dcdae9; 
+                   float: right; 
+                  }
+                  
+                  /***** CSS Magic to Highlight Stars on Hover *****/
+                  
+                  .rating > input:checked ~ label, /* show gold star when clicked */
+                  .rating:not(:checked) > label:hover, /* hover current star */
+                  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                  
+                  .rating > input:checked + label:hover, /* hover current star when changing rating */
+                  .rating > input:checked ~ label:hover,
+                  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/roadassistance/roadassistance.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoadassistancePage } from './roadassistance.page';
+
+describe('RoadassistancePage', () => {
+  let component: RoadassistancePage;
+  let fixture: ComponentFixture<RoadassistancePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoadassistancePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoadassistancePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/roadassistance/roadassistance.page.ts

+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
+import {StorageService } from '../../Config/services/storage.service';
+@Component({
+  selector: 'app-roadassistance',
+  templateUrl: './roadassistance.page.html',
+  styleUrls: ['./roadassistance.page.scss'],
+})
+export class RoadassistancePage {
+  userLocationData: any;
+  getRoadassistanceList = [];
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+    private storageservice: StorageService
+  ) {
+    this.getfromstorage();
+  }
+
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+getfromstorage() {
+  this.userLocationData = JSON.parse(this.storageservice.getLocalStorageItem('location'));
+  this.RoadassistanceList();
+}
+  goBack() {
+    this.location.back();
+  }
+RoadassistanceList() { // (click)="goToPage('booking')"
+  this.validationService.presentLoader();
+  const passData = {user_lat: this.userLocationData.lat, user_lng: this.userLocationData.lng}
+  if (this.userLocationData) {
+    this.authenticationService.post_data('road_assistanceList', passData).subscribe((data) => {
+      console.log(data);
+      this.validationService.dismissLoader();
+      if (data.status === 'success' ) {
+        this.getRoadassistanceList = data.data;
+      } else {
+        this.getRoadassistanceList = null;
+        this.validationService.presentToast('Sorry, no road assistant in your locality');
+      }
+    });
+  }
+}
+bookGarage(id) {
+  this.goToPage('/booking/' + id);
+}
+distance(value) {
+if ( value < 5) {
+  return 'Near';
+}
+if (value > 5 && value < 20)  {
+  return 'Far';
+}
+if (value > 20) {
+  return 'Too Far Away';
+}
+}
+}

src/app/selectservices/selectservices.module.ts

+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 { SelectservicesPage } from './selectservices.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SelectservicesPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [SelectservicesPage]
+})
+export class SelectservicesPageModule {}

src/app/selectservices/selectservices.page.html

+<ion-header>
+  <div class="app_header relative">
+      <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+      </button>
+    <div class="nav_title floatLeft"><h4>Select your services</h4></div>
+    <button class="nav_btn nav_btn_text floatRight">
+
+      </button>
+    <div class="clear"></div>
+    <div class="seach_bar_outer" >
+        <div class="search_bar" *ngIf="subserviceList">
+            <input class="" placeholder="Services or Problems..." >
+          </div>
+    </div>
+</div>
+</ion-header>
+<ion-content>
+  <div class="select_services_wrapper" *ngIf="subserviceList">
+      <div class="home_main_stack_menu" *ngFor= "let services of subserviceList; let i= index" (click)="bookService(services)">
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu4.png">
+                <p>{{services.sub_services}}</p>
+              </ion-col>
+          </ion-row>
+      </div>
+  </div>
+  <div class="select_footer" *ngIf="displayFooter">
+    <ion-row *ngIf="serviceDetails && getData">
+        <ion-col >
+            <h6>{{getData.service_name}}</h6> <br>
+            <h6>{{serviceDetails}}</h6> 
+        </ion-col>
+        <ion-col>
+            <button class="next_btn floatRight" (click)="movetoDate()">Next</button>
+            <div class="clear"></div>
+        </ion-col>
+    </ion-row>
+</div>
+</ion-content>

src/app/selectservices/selectservices.page.scss

+.seach_bar_outer{
+    position: absolute;
+    width:100%;
+    .search_bar{
+        width: 90%;
+        margin:0 auto;
+        background-color: #fff;
+        border-radius:100px;
+        -webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+    -moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+    box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+        input{
+            width:100%;
+            border:none;
+            height:45px;
+            border-radius: 100px;
+            background-image: url("../../assets/img/asset_search.png");
+            background-position: right 15px top 10px;
+            background-repeat: no-repeat;
+            background-size: 20px;
+            padding-left: 20px;
+            padding-right: 20px;
+            font-weight: 300;
+            &::placeholder{
+                font-weight: 300;
+                color: #9e97ba;
+            }
+        }
+    }
+}
+.select_services_wrapper{
+    background-image: linear-gradient(to bottom, #e7e5f1, #edebf5, #f3f2f8, #f9f8fc, #ffffff);
+.home_main_stack_menu{
+
+    padding: 15px;
+    padding-top: 50px;
+    img{
+      width: 80px;
+      border:2px solid transparent;
+      border-radius: 20px;
+      &:hover{
+        border:2px solid #8769f4;
+        border-radius: 20px;
+        -webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+    -moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+    box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
+      }
+    }
+    p{
+      text-align: center;
+      color: #4e4961;
+      margin:0px;
+      padding-top: 10px;
+
+    }
+  }
+}
\ No newline at end of file

src/app/selectservices/selectservices.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectservicesPage } from './selectservices.page';
+
+describe('SelectservicesPage', () => {
+  let component: SelectservicesPage;
+  let fixture: ComponentFixture<SelectservicesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectservicesPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectservicesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/selectservices/selectservices.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AuthenticationService } from '../../Config/services/auth.service';
+import { ValidationService} from '../../Config/services/validation.service';
+import {StorageService } from '../../Config/services/storage.service';
+@Component({
+  selector: 'app-selectservices',
+  templateUrl: './selectservices.page.html',
+  styleUrls: ['./selectservices.page.scss'],
+})
+export class SelectservicesPage implements OnInit {
+  getData: any;
+  selectedService: any;
+  subserviceList = [];
+  serviceDetails: any;
+  displayFooter: boolean;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+    private validationService: ValidationService,
+    private authenticationService: AuthenticationService,
+    private storageservice: StorageService,
+  ) {
+    this.subserviceList = null;
+    this.selectedService = null;
+  }
+
+  ngOnInit() {
+    this.getData =  JSON.parse(this.route.snapshot.paramMap.get('id'));
+    console.log(this.getData);
+    this.getSubserviceList();
+  }
+
+
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+ getSubserviceList() {
+  this.validationService.presentLoader();
+  this.authenticationService.get_data('get_subservicelist?service_id=' + this.getData.service_id).subscribe ((data) => {
+     console.log(data);
+     this.validationService.dismissLoader();
+     if (data.status === 'success') {
+        this.subserviceList = data.data;
+        console.log(this.subserviceList);
+     } else {
+       this.subserviceList = null;
+       this.validationService.presentToast('Sorry, no matching services found');
+     }
+   });
+   }
+   bookService(value) {
+    this.selectedService = value;
+    this.displayFooter = true;
+    this.serviceDetails = value.sub_services;
+    console.log(this.serviceDetails);
+  }
+  movetoDate() {
+    const passData = {sub_id: this.serviceDetails.id , sub_name: this.selectedService.sub_services, main_name: this.getData.service_name};
+    this.goToPage('/date/' + JSON.stringify(passData));
+  }
+}

src/app/servicecompleted/servicecompleted.module.ts

+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 { ServicecompletedPage } from './servicecompleted.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ServicecompletedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ServicecompletedPage]
+})
+export class ServicecompletedPageModule {}

src/app/servicecompleted/servicecompleted.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>servicecompleted</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/servicecompleted/servicecompleted.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicecompletedPage } from './servicecompleted.page';
+
+describe('ServicecompletedPage', () => {
+  let component: ServicecompletedPage;
+  let fixture: ComponentFixture<ServicecompletedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServicecompletedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicecompletedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/servicecompleted/servicecompleted.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-servicecompleted',
+  templateUrl: './servicecompleted.page.html',
+  styleUrls: ['./servicecompleted.page.scss'],
+})
+export class ServicecompletedPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/servicedetails/servicedetails.module.ts

+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 { ServicedetailsPage } from './servicedetails.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ServicedetailsPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ServicedetailsPage]
+})
+export class ServicedetailsPageModule {}

src/app/servicedetails/servicedetails.page.html

+<ion-header>
+  <div class="app_header">
+      <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+      </button>
+    <div class="nav_title floatLeft"><h4>Presto towing Service</h4></div>
+    <button class="nav_btn nav_btn_text floatRight">
+
+      </button>
+    <div class="clear"></div>
+</div>
+</ion-header>
+<ion-content>
+  <div class="home_wrapper">
+      <div class="location_box">
+          <div class="location_bar">
+              4KM
+            </div>
+      </div>
+      <div class="banner">
+        <img src="../../assets/img/asset_banner.png">
+      </div>
+      <div class="btn_bay">
+        <button class="btn book_btn" (click)="goToPage('waiting')">Request a Service</button>
+      </div>
+      <div class="pay_description">
+        <h6>
+          <span>
+            <img src="../../assets/img/asset_c1.png">
+          </span>
+          <span>
+            <img src="../../assets/img/asset_c2.png">
+          </span>
+          <span>
+            <img src="../../assets/img/asset_c3.png">
+          </span>
+          <span>
+            <img src="../../assets/img/asset_c4.png">
+          </span>
+        </h6>
+        <h6>
+          <span>
+            <img src="../../assets/img/asset_web.png">
+            <a>www.presto.com</a></span>
+        </h6>
+      </div>
+      <div class="bottom_tab_bay">
+        <ul>
+          <li [class.active]="tab == 'detail'" (click)="tab_swap('detail')">Details</li>
+          <li [class.active]="tab == 'about'" (click)="tab_swap('about')">About</li>
+          <li [class.active]="tab == 'review'" (click)="tab_swap('review')">Reviews</li>
+        </ul>
+      </div>
+      <div class="tab_content">
+        <div class="tab_content_inner" [hidden]="tab !='detail'">
+          <div class="detail_tab">
+              <ion-row>
+                  <ion-col>
+                    <p class="textLeft">Service</p>
+                  </ion-col>
+                  <ion-col>
+                      <p class="textRight">$230</p>
+                  </ion-col>
+                </ion-row>
+                <ion-row>
+                    <ion-col>
+                      <p class="textLeft">Labour Charge</p>
+                    </ion-col>
+                    <ion-col>
+                      <p class="textRight">$50</p>
+                    </ion-col>
+              </ion-row>
+          </div>
+          <div class="total_amount">
+            <div class="total_inner">
+                <ion-row>
+                    <ion-col>
+                      <p class="textLeft">Total Amount</p>
+                    </ion-col>
+                    <ion-col>
+                      <p class="textRight">$<strong>280</strong></p>
+                    </ion-col>
+                </ion-row>
+            </div>
+          </div>
+          <div class="content_detail">
+              <h4>Service Details</h4>
+              <div class="content_inner">
+                <ul>
+                  <li>
+                    <img src="../../assets/img/asset_menu6.png">
+                    <span>Clutch & Transmissions</span>
+                    <div class="clear"></div>
+                  </li>
+                  <li>
+                    <img src="../../assets/img/asset_menu10.png">
+                    <span>Exterior and Interior</span>
+                    <div class="clear"></div>
+                  </li>
+                </ul>
+              </div>
+              <h4>Car Details</h4>
+              <div class="content_inner">
+                <ul>
+                  <li>
+                    <ion-row>
+                      <ion-col><p>Brand :</p></ion-col>
+                      <ion-col>Rolls royce</ion-col>
+                    </ion-row>
+                  </li>
+                  <li>
+                      <ion-row>
+                          <ion-col><p>Name :</p></ion-col>
+                          <ion-col>Ghost</ion-col>
+                      </ion-row>
+                  </li>
+                  <li>
+                      <ion-row>
+                          <ion-col><p>Model :</p></ion-col>
+                          <ion-col>2019</ion-col>
+                      </ion-row>
+                  </li>
+                  <li>
+                      <ion-row>
+                          <ion-col><p>Mileage :</p></ion-col>
+                          <ion-col>20</ion-col>
+                      </ion-row>
+                  </li>
+                </ul>
+              </div>
+              <h4>Date & Time</h4>
+              <div class="content_inner">
+                <ul>
+                  <li>
+                    <ion-row>
+                      <ion-col><p>Date :</p></ion-col>
+                      <ion-col>June 25 th 2019</ion-col>
+                    </ion-row>
+                  </li>
+                  <li>
+                      <ion-row>
+                          <ion-col><p>Time:</p></ion-col>
+                          <ion-col>10:30 pm to 11:00pm</ion-col>
+                      </ion-row>
+                  </li>
+                </ul>
+              </div>
+              <h4>Your Message</h4>
+              <div class="content_inner">
+                <ul>
+                  <li>
+                    <ion-row>
+                      <ion-col>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+                          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                           deserunt mollit anim id est laborum</ion-col>
+                    </ion-row>
+                  </li>
+                </ul>
+              </div>
+          </div>
+        </div>
+        <div class="tab_content_inner" [hidden]="tab !='about'">
+          <div class="top_div">
+            <div class="pic_circle"></div>
+            <div class="pic_details">
+              <h5>Sam Johns</h5>
+              <p>Workshop owner</p>
+            </div>
+            <div class="clear"></div>
+          </div>
+          <div class="shopper_details">
+            <p>We promise to help you find the best car tyres Dubai has to offer.<br><br>
+            There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all customers from motorists to high performance and off road enthusiasts.<br><br>
+            Our mission at Presto Tyres declares our purpose as one of the best tire companies in Dubai.
+            </p>
+          </div>
+        </div>
+        <div class="tab_content_inner" [hidden]="tab !='review'">
+          <div class="rating_div">
+            <ion-row>
+              <ion-col col-8 class="p0">
+                  <fieldset class="rating">
+                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                  </fieldset>
+                  <span>4 Star | 34 Reviews</span>
+              </ion-col>
+              <ion-col col-4 class="p0 textRight">
+                  <button class="add_review" (click)="istoggle()">+</button>
+              </ion-col>
+            </ion-row>
+          </div>
+          <div class="review_list">
+            <ul>
+              <li>
+                  <div class="top_div">
+                      <div class="pic_circle"></div>
+                      <div class="pic_details">
+                        <h5>Sam Johns</h5>
+                        <p>June 28th 2019</p>
+                        <h4>Good services</h4>
+                        <h6>
+                            It was a good service and very lovely
+                            behaviour !!
+                        </h6>
+                      </div>
+                      <div class="rating">
+                          <img src="../../assets/img/asset_star.png">4
+                        </div>
+                      <div class="clear"></div>
+                    </div>
+              </li>
+              <li>
+                  <div class="top_div">
+                      <div class="pic_circle"></div>
+                      <div class="pic_details">
+                        <h5>Sam Johns</h5>
+                        <p>June 28th 2019</p>
+                        <h4>Good services</h4>
+                        <h6>
+                            It was a good service and very lovely
+                            behaviour !!
+                        </h6>
+                      </div>
+                      <div class="rating">
+                          <img src="../../assets/img/asset_star.png">4
+                        </div>
+                      <div class="clear"></div>
+                    </div>
+              </li>
+              <li>
+                  <div class="top_div">
+                      <div class="pic_circle"></div>
+                      <div class="pic_details">
+                        <h5>Sam Johns</h5>
+                        <p>June 28th 2019</p>
+                        <h4>Good services</h4>
+                        <h6>
+                            It was a good service and very lovely
+                            behaviour !!
+                        </h6>
+                      </div>
+                      <div class="rating">
+                        <img src="../../assets/img/asset_star.png">4
+                      </div>
+                      <div class="clear"></div>
+                    </div>
+              </li>
+              <li>
+                  <div class="top_div">
+                      <div class="pic_circle"></div>
+                      <div class="pic_details">
+                        <h5>Sam Johns</h5>
+                        <p>June 28th 2019</p>
+                        <h4>Good services</h4>
+                        <h6>
+                            It was a good service and very lovely
+                            behaviour !!
+                        </h6>
+                      </div>
+                      <div class="rating">
+                          <img src="../../assets/img/asset_star.png">4
+                        </div>
+                      <div class="clear"></div>
+                    </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+  </div>
+</ion-content>
+
+<div class="review_wrapper" *ngIf="isShow" [@slideInOut]>
+    <div class="rate_card">
+      <div class="inner_shop_name">
+        <ion-row>
+          <ion-col class="p0">
+              <h5>Smart Mortors</h5>
+              <p><img src="../../assets/img/asset_avatar_sml.png">Peter mcWay</p>
+          </ion-col>
+          <ion-col class="p0">
+            <h6>Service - 2 days ago</h6>
+          </ion-col>
+        </ion-row>
+      </div>
+      <ion-row>
+          <ion-col class="p0">
+            <h4>Write a review</h4>
+            <div class="row">
+              <ion-input value="Caption" type="text"></ion-input>
+            </div>
+            <div class="row">
+              <ion-input value="Your comments" type="text"></ion-input>
+            </div>
+            <div class="row">
+              <button class="signup_btn" (click)="istoggle()">Next</button>
+            </div>
+          </ion-col>
+      </ion-row>
+    </div>
+  </div>
+
+

src/app/servicedetails/servicedetails.page.scss

+.home_wrapper{
+    .location_box{
+      position: fixed;
+      left:0px;
+      top: 60px;
+      right:0px;
+      z-index: 999;
+    }
+    .location_bar{
+      max-width:100px;
+      background: #fff;
+      padding:5px;
+      border-radius: 20px;
+      margin:0 auto;
+      text-align: center;
+      -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      background-image: url("../../assets/img/aaset_loc.png");
+      background-position: left 15px top 6px;
+      background-repeat: no-repeat;
+      padding-left:30px;
+      padding-right:30px;
+      background-size: 15px;
+      font-size: 14px;
+      white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    }
+
+    .banner{
+        width:100%;
+        height: 150px;
+        img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .btn_bay{
+      text-align: center;
+      padding:15px;
+      .btn{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        width:100%;
+      }
+      .call_btn{
+        display: inline-block;
+        background-color: #28be57;
+        color: #fff;
+        background-image: url("../../assets/img/asset_call.png");
+        background-position: left 5px top 0px;
+        background-repeat: no-repeat;
+        background-size: 35px;
+      }
+      .book_btn{
+        display: inline-block;
+        background-color: #39267f;
+        color: #fff;
+      }
+      .remind_btn{
+        display: inline-block;
+        background-color: #fbd339;
+        color: #282438;
+      }
+    }
+    .pay_description{
+      background-color: #f6f5fa;
+      padding:15px;
+      h6{
+        margin:0px;
+        padding:0px;
+        padding-bottom: 10px;
+        span{
+          img{
+            height:20px;
+            margin-right:15px;
+          }
+          a{
+            text-decoration: none;
+            color: #39267f;
+            font-size: 13px;
+            position: relative;
+            bottom: 5px;
+          }
+        }
+      }
+    }
+    .bottom_tab_bay{
+      border:1px solid #dcdae9;
+      border-bottom-left-radius: 25px; 
+      border-bottom-right-radius: 25px; 
+      ul{
+        padding:0px;
+        margin:0px;
+        li{
+          width:33.3%;
+          display: inline-block;
+          list-style: none;
+          text-align: center;
+          padding: 10px;
+          font-weight: 500;
+          &:nth-child(1){
+            border-bottom-left-radius: 25px; 
+          }
+          &:last-child{
+            border-bottom-right-radius: 25px; 
+          }
+
+        }
+        .active{
+          background: #dcdae9;
+          color: #39267f;
+        }
+      }
+    }
+    .tab_content{
+      .tab_content_inner{
+          .detail_tab{
+              width: 100%;
+              padding:15px;
+              p{
+                  margin:0px;
+                  padding:0px;
+                  color: #282438;
+                  font-weight:500;
+              }
+          }
+          .total_amount{
+            width: 100%;
+            background: #f6f5fa;
+              padding:15px;
+              padding-top:0px;
+              padding-bottom: 0px;
+              .total_inner{
+                  border:2px dashed #4e4961;
+                  padding: 5px;
+              }
+              p{
+                  margin:0px;
+                  padding:0px;
+                  color: #282438;
+                  font-weight:500;
+              }     
+        }
+        .content_detail{
+            padding:15px;
+            h4{
+                margin:0px;
+                padding:0px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+            .content_inner{
+                border-left:1px dashed #4e4961;
+                margin-left: 40px;
+                margin-top: 20px;
+                margin-bottom: 20px;
+                padding-top: 20px;
+                padding-bottom: 20px;
+                ul{
+                    margin:0px;
+                    padding:0px;
+                    padding-left: 20px;
+                    li{
+                        list-style: none;
+                        padding-bottom: 10px;
+                        width: 100%;
+                        img{
+                            width: 35px;
+                            float: left;
+                        }
+                        span{
+                            float: left;
+                            width:calc(100% - 35px);
+                            padding: 8px;
+                            font-size: 16px;
+                        }
+                        p{
+                            margin:0px;
+                            color: #9c97b7
+                        }
+                    }
+                }
+            }
+        }
+        .top_div{
+          padding: 10px;
+          .pic_circle{
+            width:40px;
+            height:40px;
+            border-radius: 50%;
+            object-fit: cover;
+            object-position: center;
+            border:1px solid #dcdae9;
+            float: left;
+            img{
+              width: 100%;
+              height: 100%;
+              border-radius: 50%;
+              object-fit: cover;
+              object-position: center;
+            }
+          }
+          .pic_details{
+            width: calc(100% - 40px);
+            padding:2px;
+            padding-left: 10px;
+            float: left;
+            h5{
+              margin:0px;
+              padding:0px;
+              font-size: 16px;
+              padding-bottom: 3px;
+            }
+            p{
+              margin:0px;
+              padding: 0px;
+              color: #9c97b7;
+              font-size: 13px;
+            }
+          }
+        }
+        .shopper_details{
+          padding: 15px;
+          p{
+            margin:0px;
+            padding:0px;
+            color: #4e4961;
+            text-align: justify;
+          }
+        }
+        .rating_div{
+          width:100%;
+          padding: 15px;
+          span{
+            color: #4e4961;
+            font-size: 16px;
+            font-weight: 500;
+          }
+
+          .add_review{
+            width: 40px;
+            height:40px;
+            background-color: #fbd339;
+            color: #403838;
+            border-radius: 50%;
+            font-size: 30px;
+          }
+          .rating { 
+            border: none;
+            width:135px;
+            margin: 0px;
+            padding: 0px;
+            padding-bottom: 5px;
+          }
+          
+          .rating > input { display: none; } 
+          .rating > label:before { 
+            margin:2px;
+            font-size:24px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+          }
+          
+          .rating > .half:before { 
+            content: "\f089";
+            position: absolute;
+          }
+          
+          .rating > label { 
+            color: #dcdae9; 
+           float: right; 
+          }
+          
+          /***** CSS Magic to Highlight Stars on Hover *****/
+          
+          .rating > input:checked ~ label, /* show gold star when clicked */
+          .rating:not(:checked) > label:hover, /* hover current star */
+          .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+          
+          .rating > input:checked + label:hover, /* hover current star when changing rating */
+          .rating > input:checked ~ label:hover,
+          .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+          .rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
+        }
+
+        .review_list{
+          ul{
+            margin:0px;
+            padding:10px;
+            li{
+              list-style: none;
+              background-color: #f6f5fa;
+              border-radius:15px;
+              margin-bottom: 10px;
+              .top_div{
+                .pic_circle{
+                  width:40px;
+                  height:40px;
+                  border-radius: 50%;
+                  object-fit: cover;
+                  object-position: center;
+                  border:1px solid #dcdae9;
+                  float: left;
+                  img{
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    object-position: center;
+                  }
+                }
+                .pic_details{
+                  width: calc(100% - 70px);
+                  padding:2px;
+                  padding-left: 10px;
+                  float: left;
+                  h5{
+                    margin:0px;
+                    padding:0px;
+                    font-size: 16px;
+                    padding-bottom: 3px;
+                    color: #282438;
+                  }
+                  p{
+                    margin:0px;
+                    padding: 0px;
+                    color: #9c97b7;
+                    font-size: 13px;
+                    color: #282438;
+                  }
+                  h6{
+                    margin:0px;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #282438;
+                  }
+                  h4{
+                    margin:0px;
+                    font-size: 17px;
+                    padding-top: 8px;
+                    padding-bottom: 5px;
+                    color: #282438;
+                  }
+                }
+                .rating{
+                  width: 30px;
+                  float: right;
+                  color: #282438;
+                  img{
+                    width: 15px;
+                    margin-right: 4px;
+                    
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+}
+
+.review_wrapper{
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  left:0px;
+  right:0px;
+  bottom: 0px;
+  z-index: 9;
+  .rate_card{
+    background-color: #f6f5fa;
+    border-radius:15px;
+    padding: 20px;
+    .inner_shop_name{
+      border-left:3px solid #fbd339;
+      padding-left: 10px;
+      margin-bottom: 25px;
+      h5{
+        margin:0px;
+        padding:0px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 2px;
+
+      }
+      p{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        img{
+          width: 15px;
+          height:15px;
+          border-radius: 50%;
+          object-fit:cover;
+          object-position:center;
+          margin-right:5px;
+          position: relative;
+          top: 3px;
+
+        }
+      }
+      h6{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        text-align: right;
+      }
+    }
+    h4{
+      margin:0px;
+      padding:0px;
+      font-size: 16px;
+      text-align:left;
+      padding-bottom:10px;
+    }
+
+    .rating { 
+      border: none;
+      width:260px;
+      margin: 0 auto;
+    }
+    
+    .rating > input { display: none; } 
+    .rating > label:before { 
+      margin: 5px;
+      font-size:40px;
+      font-family: FontAwesome;
+      display: inline-block;
+      content: "\f005";
+    }
+    
+    .rating > .half:before { 
+      content: "\f089";
+      position: absolute;
+    }
+    
+    .rating > label { 
+      color: #dcdae9; 
+     float: right; 
+    }
+    
+  
+    
+    .rating > input:checked ~ label, 
+    .rating:not(:checked) > label:hover, 
+    .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } 
+    
+    .rating > input:checked + label:hover,
+    .rating > input:checked ~ label:hover,
+    .rating > label:hover ~ input:checked ~ label, 
+    .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+  }
+
+  .signup_btn{
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    background-color: #39267f;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 16px; 
+}
+
+.row{
+  padding-bottom: 10px;
+  ion-input{
+    background: #dcdae9;
+    border-radius: 20px;
+    color:#a29ebf;
+    height: 40px;
+    font-weight:400;
+    padding-left: 15px !important;
+}
+}
+}
\ No newline at end of file

src/app/servicedetails/servicedetails.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicedetailsPage } from './servicedetails.page';
+
+describe('ServicedetailsPage', () => {
+  let component: ServicedetailsPage;
+  let fixture: ComponentFixture<ServicedetailsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServicedetailsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicedetailsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/servicedetails/servicedetails.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-servicedetails',
+  templateUrl: './servicedetails.page.html',
+  styleUrls: ['./servicedetails.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('300ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class ServicedetailsPage implements OnInit {
+
+  tab:any;
+  isShow = false;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { 
+    this.tab = "detail";
+  }
+
+  ngOnInit() {
+  }
+
+  tab_swap(type) {
+    this.tab = type;
+   }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+  istoggle(){
+    this.isShow = !this.isShow;
+  }
+
+}

src/app/settings/settings.module.ts

+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 { SettingsPage } from './settings.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SettingsPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [SettingsPage]
+})
+export class SettingsPageModule {}

src/app/settings/settings.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>Settings</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+  
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="settings_wrapper">
+    <h4>Notifications</h4>
+    <div class="row">
+      <p class="floatLeft">Service Reminder</p>
+      <ion-toggle class="floatRight"></ion-toggle>
+      <div class="clear"></div>
+    </div>
+    <div class="row">
+        <p class="floatLeft">Order Updates</p>
+        <ion-toggle class="floatRight"></ion-toggle>
+        <div class="clear"></div>
+    </div>
+    <br>
+    <hr>
+    <br>
+    <h4>App Sounds</h4>
+    <div class="row">
+        <p class="floatLeft">Notification Sounds</p>
+        <ion-toggle class="floatRight"></ion-toggle>
+        <div class="clear"></div>
+    </div>
+  </div>
+    
+</ion-content>

src/app/settings/settings.page.scss

+.settings_wrapper{
+    padding:15px;
+    h4{
+        margin: 0px;
+        padding:0px;
+        color: #a29ebf;
+        padding-bottom: 10px;
+    }
+    .row{
+        
+        p{
+            color: #4e4961;
+            font-weight: 500;
+            margin:0px;
+            padding:0px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+        }
+    }
+  
+    hr{
+        border:1px solid #d8d4e2;
+        height:0px;
+        border-top:0px;
+    }
+}
\ No newline at end of file

src/app/settings/settings.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsPage } from './settings.page';
+
+describe('SettingsPage', () => {
+  let component: SettingsPage;
+  let fixture: ComponentFixture<SettingsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/settings/settings.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.page.html',
+  styleUrls: ['./settings.page.scss'],
+})
+export class SettingsPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/start/start.module.ts

+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 { StartPage } from './start.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: StartPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [StartPage]
+})
+export class StartPageModule {}

src/app/start/start.page.html

+<ion-content>
+  <div class="start_wizard_wrapper">
+      <ion-slides pager="true" [options]="slideOpts" (ionSlideDidChange)="slideChanged()">
+          <ion-slide>
+            <div class="wizard_inner_wrapper">
+                <img src="../../assets/img/asset_wiz_stepone.png">
+                <div class="wizard_textarea">
+                    <h3>Book Car Services</h3>
+                    <p>
+                        Find a better service centre and know the 
+                        actual amount of service
+                    </p>
+                </div>
+            </div>
+          </ion-slide>
+          <ion-slide>
+              <div class="wizard_inner_wrapper">
+            <img src="../../assets/img/asset_wiz_steptwo.png">
+            <div class="wizard_textarea">
+                <h3>Purchase Car Parts</h3>
+                <p>
+                    Purchase your car parts and securely
+                    pay the amount online
+                </p>
+            </div>
+            </div>
+          </ion-slide>
+          <ion-slide>
+              <div class="wizard_inner_wrapper">
+            <img src="../../assets/img/asset_wiz_stepthree.png">
+            <div class="wizard_textarea">
+                <h3>Road Assistance</h3>
+                <p>
+                    For road assistance find the nearest mechanic and request to him if available
+                </p>
+            </div>
+            </div>
+          </ion-slide>
+      </ion-slides>
+      <div class="btn_row">
+          <div class="btn_bay" [hidden] = "currentIndex == 2">
+            <div class="btn_skip" (click)="prev()">
+              Skip  
+            </div>
+            <div class="btn_next" (click)="next()">
+              Next 
+            </div>
+          </div>
+
+          <div class="btn_bay" [hidden] = "currentIndex != 2">
+              <div class="btn_getstarted" (click)="goToPage('login')">
+                Get Started
+              </div>
+            </div>
+        </div>
+  </div>
+</ion-content>

src/app/start/start.page.scss

+.start_wizard_wrapper{
+    ion-slides{
+        .wizard_inner_wrapper{
+            width:100%;
+            .wizard_textarea{
+                width:100%;
+                padding:15px;
+                padding-top:0px;
+                padding-bottom:30px;
+                h3{
+                    color: #282438;
+                    font-size: 25px;
+                    margin:0px;
+                    padding: 0px;
+                    font-weight: 700;
+                    padding-bottom: 10px;
+                }
+                p{
+                    color: #4e4961;
+                    margin:0px;
+                    padding: 0px;
+                    font-size: 16px;
+                    padding-bottom: 10px;
+                }
+            }
+           
+        }
+        .swiper-pagination{
+            .swiper-pagination-bullet{
+                background: #282438 !important;
+            }
+        }
+    }
+    .btn_row{
+        text-align: center;
+        padding: 10px;
+        .btn_bay{
+           
+            display: inline-block;
+            border-radius: 20px;
+            .btn_skip{
+                border:2px solid #39267f;
+                display: inline-block;
+                padding: 8px;
+                padding-left: 20px;
+                padding-right: 20px;
+                cursor: pointer;
+                border-top-left-radius: 20px;
+                border-bottom-left-radius: 20px;
+            }
+            .btn_next{
+                border:2px solid #39267f;
+                display: inline-block;
+                padding: 8px;
+                padding-left: 20px;
+                padding-right: 20px;
+                cursor: pointer;
+                background: #39267f;
+                border-top-right-radius: 20px;
+                border-bottom-right-radius: 20px;
+                color: #fff;
+            }
+
+            .btn_getstarted{
+                border:2px solid #39267f;
+                display: inline-block;
+                padding: 8px;
+                padding-left: 25px;
+                padding-right: 25px;
+                cursor: pointer;
+                background: #39267f;
+                border-radius: 20px;
+                color: #fff;
+            }
+        }
+    }
+}
+    
\ No newline at end of file

src/app/start/start.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StartPage } from './start.page';
+
+describe('StartPage', () => {
+  let component: StartPage;
+  let fixture: ComponentFixture<StartPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StartPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/start/start.page.ts

+import { Component, OnInit, ViewChild, } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+import { Router, ActivatedRoute } from '@angular/router';
+import { StorageService } from '../../Config/services/storage.service';
+import { ValidationService } from '../../Config/services/validation.service';
+import { AuthenticationService } from '../../Config/services/auth.service';
+
+@Component({
+  selector: 'app-start',
+  templateUrl: './start.page.html',
+  styleUrls: ['./start.page.scss'],
+})
+export class StartPage implements OnInit {
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private storageService: StorageService,
+    private authenticationservice: AuthenticationService,
+    private validationservice: ValidationService) { }
+  @ViewChild(IonSlides) slides: IonSlides;
+  currentIndex: any;
+
+  slideOpts = {
+    initialSlide: 0,
+    speed: 1000
+  };
+
+  ngOnInit() {
+    if (this.storageService.isLoggednIn()) {
+      this.goToPage('home');
+    }
+  }
+
+  goToPage(path, data= null) {
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  next() {
+    this.slides.slideNext();
+  }
+
+  prev() {
+    this.slides.slidePrev();
+  }
+
+   slideChanged() {
+    this.slides.getActiveIndex().then(index => {
+      this.currentIndex = index;
+      console.log(this.currentIndex);
+
+   });
+  }
+
+
+}

src/app/summary/summary.module.ts

+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 { SummaryPage } from './summary.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SummaryPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [SummaryPage]
+})
+export class SummaryPageModule {}

src/app/summary/summary.page.html

+<ion-header>
+    <div class="app_header relative">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>SUMMARY</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="summary_wrapper">
+      <div class="content_detail">
+          <h4>Service Details</h4>
+          <div class="content_inner">
+            <ul>
+              <li>
+                <img src="../../assets/img/asset_menu6.png">
+                <span>Clutch & Transmissions</span>
+                <div class="clear"></div>
+              </li>
+              <li>
+                <img src="../../assets/img/asset_menu10.png">
+                <span>Exterior and Interior</span>
+                <div class="clear"></div>
+              </li>
+            </ul>
+          </div>
+          <h4>Car Details</h4>
+          <div class="content_inner">
+            <ul>
+              <li>
+                <ion-row>
+                  <ion-col><p>Brand :</p></ion-col>
+                  <ion-col>Rolls royce</ion-col>
+                </ion-row>
+              </li>
+              <li>
+                  <ion-row>
+                      <ion-col><p>Name :</p></ion-col>
+                      <ion-col>Ghost</ion-col>
+                  </ion-row>
+              </li>
+              <li>
+                  <ion-row>
+                      <ion-col><p>Model :</p></ion-col>
+                      <ion-col>2019</ion-col>
+                  </ion-row>
+              </li>
+              <li>
+                  <ion-row>
+                      <ion-col><p>Mileage :</p></ion-col>
+                      <ion-col>20</ion-col>
+                  </ion-row>
+              </li>
+            </ul>
+          </div>
+          <h4>Date & Time</h4>
+          <div class="content_inner">
+            <ul>
+              <li>
+                <ion-row>
+                  <ion-col><p>Date :</p></ion-col>
+                  <ion-col>June 25 th 2019</ion-col>
+                </ion-row>
+              </li>
+              <li>
+                  <ion-row>
+                      <ion-col><p>Time:</p></ion-col>
+                      <ion-col>10:30 pm to 11:00pm</ion-col>
+                  </ion-row>
+              </li>
+            </ul>
+          </div>
+          <h4>Your Message</h4>
+          <div class="content_inner">
+            <ul>
+              <li>
+                <ion-row>
+                  <ion-col>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+                      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                       deserunt mollit anim id est laborum</ion-col>
+                </ion-row>
+              </li>
+            </ul>
+          </div>
+      </div>
+  </div>
+  <div class="select_footer">
+      <ion-row>
+        <ion-col class="textCenter">
+          <button class="request_btn" (click)="goToPage('date')">Send Request<img src="../../assets/img/asset_send_request.png"></button>
+          <div class="clear"></div>
+        </ion-col>
+      </ion-row>
+    </div>
+</ion-content>

src/app/summary/summary.page.scss

+.summary_wrapper{
+    .content_detail{
+        padding:15px;
+        padding-bottom: 100px;
+        h4{
+            margin:0px;
+            padding:0px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+        }
+        .content_inner{
+            border-left:1px dashed #4e4961;
+            margin-left: 40px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            ul{
+                margin:0px;
+                padding:0px;
+                padding-left: 20px;
+                li{
+                    list-style: none;
+                    padding-bottom: 10px;
+                    width: 100%;
+                    img{
+                        width: 35px;
+                        float: left;
+                    }
+                    span{
+                        float: left;
+                        width:calc(100% - 35px);
+                        padding: 8px;
+                        font-size: 16px;
+                    }
+                    p{
+                        margin:0px;
+                        color: #9c97b7
+                    }
+                }
+            }
+        }
+    }
+}
+
+.request_btn{
+    background-color: #ffffff;
+    color: #39267f;
+    border-radius: 20px;
+    height:35px;
+    font-size: 18px;
+    padding-left:30px;
+    padding-right:30px;
+    position: relative;
+    width: 80%;
+    font-weight: 500;
+    margin: 0 auto;
+    top: 20px;
+    img{
+        width: 12px;
+        margin-left: 10px;
+    }
+
+}
\ No newline at end of file

src/app/summary/summary.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryPage } from './summary.page';
+
+describe('SummaryPage', () => {
+  let component: SummaryPage;
+  let fixture: ComponentFixture<SummaryPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SummaryPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SummaryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/summary/summary.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-summary',
+  templateUrl: './summary.page.html',
+  styleUrls: ['./summary.page.scss'],
+})
+export class SummaryPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/waiting/waiting.module.ts

+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 { WaitingPage } from './waiting.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: WaitingPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [WaitingPage]
+})
+export class WaitingPageModule {}

src/app/waiting/waiting.page.html

+<ion-content>
+  <div class="waiting_wrapper">
+    <div class="logo">
+      <img src="../../assets/img/asset_shop1.png">
+    </div>
+    <h4>Presto Towing Services</h4>
+    <div class="distance">
+      4 km
+    </div>
+    <h3>Request has been Sent</h3>
+    <p>Our customer service representative <br>
+        will update you within 10 to 20 minutes.</p>
+        <button class="back_btn1">Back</button><br>
+        <button class="home">Home</button>
+  </div>
+</ion-content>

src/app/waiting/waiting.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:30%;
+    .logo{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        background-color: #fff;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+            border:1px solid #fbd339;
+        }
+    }
+    h4{
+        color: #fff;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom: 10px;
+    }
+
+    .back_btn1{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .home{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/waiting/waiting.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WaitingPage } from './waiting.page';
+
+describe('WaitingPage', () => {
+  let component: WaitingPage;
+  let fixture: ComponentFixture<WaitingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WaitingPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WaitingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/waiting/waiting.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-waiting',
+  templateUrl: './waiting.page.html',
+  styleUrls: ['./waiting.page.scss'],
+})
+export class WaitingPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/waiting1/waiting1.module.ts

+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 { Waiting1Page } from './waiting1.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Waiting1Page
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [Waiting1Page]
+})
+export class Waiting1PageModule {}

src/app/waiting1/waiting1.page.html

+<ion-content>
+    <div class="waiting_wrapper">
+      <div class="logo">
+        <img src="../../assets/img/asset_waiting1.png">
+      </div>
+      <h4>Relax</h4>
+      <h3>We got your request</h3>
+      <p>We will update you within 10 to 20 minutes.</p>
+          <button class="back_btn1">Home</button><br>
+          <button class="home">Service History</button>
+    </div>
+  </ion-content>

src/app/waiting1/waiting1.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:30%;
+    .logo{
+
+
+        margin:0 auto;
+    }
+    h4{
+        color: #fbd339;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom: 10px;
+    }
+
+    .back_btn1{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .home{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/waiting1/waiting1.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Waiting1Page } from './waiting1.page';
+
+describe('Waiting1Page', () => {
+  let component: Waiting1Page;
+  let fixture: ComponentFixture<Waiting1Page>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Waiting1Page ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Waiting1Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/waiting1/waiting1.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-waiting1',
+  templateUrl: './waiting1.page.html',
+  styleUrls: ['./waiting1.page.scss'],
+})
+export class Waiting1Page implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/shapes.svg

+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/environments/server.config.ts

+export const devURL = 'https://techlabz.in/allorepair/Webservice/';

src/global.scss

+// http://ionicframework.com/docs/theming/
+@import '~@ionic/angular/css/core.css';
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
+@import '~@ionic/angular/css/display.css';
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';

src/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
+
+    <base href="/" />
+
+    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+    <app-root></app-root>
+</body>
+
+</html>
\ No newline at end of file

src/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+import './zone-flags.ts';
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

src/theme/variables.scss

+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/theming/
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #282438;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #282438;
+  --ion-color-primary-tint: #282438;
+
+  /** secondary **/
+  --ion-color-secondary: #0cd1e8;
+  --ion-color-secondary-rgb: 12, 209, 232;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #0bb8cc;
+  --ion-color-secondary-tint: #24d6ea;
+
+  /** tertiary **/
+  --ion-color-tertiary: #7044ff;
+  --ion-color-tertiary-rgb: 112, 68, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #633ce0;
+  --ion-color-tertiary-tint: #7e57ff;
+
+  /** success **/
+  --ion-color-success: #10dc60;
+  --ion-color-success-rgb: 16, 220, 96;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #0ec254;
+  --ion-color-success-tint: #28e070;
+
+  /** warning **/
+  --ion-color-warning: #ffce00;
+  --ion-color-warning-rgb: 255, 206, 0;
+  --ion-color-warning-contrast: #ffffff;
+  --ion-color-warning-contrast-rgb: 255, 255, 255;
+  --ion-color-warning-shade: #e0b500;
+  --ion-color-warning-tint: #ffd31a;
+
+  /** danger **/
+  --ion-color-danger: #f04141;
+  --ion-color-danger-rgb: 245, 61, 61;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #d33939;
+  --ion-color-danger-tint: #f25454;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 34, 34;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 244, 244;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}

src/tsconfig.app.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

src/tsconfig.spec.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "zone-flags.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

src/tslint.json

+{
+  "extends": "../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "page",
+      "kebab-case"
+    ]
+  }
+}

src/zone-flags.ts

+/**
+ * Prevents Angular change detection from
+ * running with certain Web Component callbacks
+ */
+(window as any).__Zone_disable_customElements = true;

tsconfig.json

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  }
+}

tslint.json

+{
+  "extends": "tslint:recommended",
+  "rulesDirectory": [
+    "codelyzer"
+  ],
+  "rules": {
+    "array-type": false,
+    "arrow-parens": false,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "interface-name": false,
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-consecutive-blank-lines": false,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-use-before-declare": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "object-literal-sort-keys": false,
+    "ordered-imports": false,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "trailing-comma": false,
+    "no-output-on-prefix": true,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "one-variable-per-declaration": false,
+    "component-class-suffix": [true, "Page", "Component"],
+    "directive-class-suffix": true
+  }
+}