31-07-2019

angular.json

@@ -40,6 +40,9 @@
               },
               {
                 "input": "src/app/app.scss"
+              },
+              {
+                "input": "node_modules/angular-calendar/css/angular-calendar.css"
               }
             ],
             "scripts": [],

package-lock.json

@@ -1163,6 +1163,40 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-calendar": {
+      "version": "0.27.14",
+      "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.27.14.tgz",
+      "integrity": "sha512-Nbv9ZMpqeqBmn8vZM1FCNVB51Jz0t3FkKhC2Iod4qULRNt5etofvUTw1rbmv36k170biJCltl2XToz2eC+ZDrQ==",
+      "requires": {
+        "angular-draggable-droppable": "^4.3.2",
+        "angular-resizable-element": "^3.2.4",
+        "calendar-utils": "^0.3.1",
+        "positioning": "^1.4.0",
+        "tslib": "^1.9.0"
+      }
+    },
+    "angular-draggable-droppable": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.3.2.tgz",
+      "integrity": "sha512-x3Fg+mggoBumO41XNzEztWnl92ymGXoVgrYKX2InnIg8i/PIGv7npi8pBvMzKQSKHWtqww3nBHAVcWmIE/3Z0g==",
+      "requires": {
+        "dom-autoscroller": "^2.3.4",
+        "tslib": "^1.9.0"
+      }
+    },
+    "angular-resizable-element": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.2.4.tgz",
+      "integrity": "sha512-Qd/WRTaJgmDJoeWzmK0F52I3X0nLtFPirmsVC2ceic4EQ/3X2yYFCOWgCtH+PvMZct6Whoky3OQLqCpFXQsKHQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "animation-frame-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/animation-frame-polyfill/-/animation-frame-polyfill-1.0.1.tgz",
+      "integrity": "sha1-X1rZk6eHlL0Xas3lttzmKGdBDJ0="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -1283,6 +1317,11 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "array-from": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz",
+      "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU="
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -2030,6 +2069,11 @@
         "unset-value": "^1.0.0"
       }
     },
+    "calendar-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.3.1.tgz",
+      "integrity": "sha512-0XSJ/dP6QDeO9higbWZmf/ZE9mAUq05HdUONbSNpmwhKfKQ8zf6fMdU6M0ySv0q+TkdwjaGy0DFTRzSUZMsTVw=="
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -2601,6 +2645,14 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-point-cb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-point-cb/-/create-point-cb-1.2.0.tgz",
+      "integrity": "sha1-G85H/E/AGFXuEhONZ2sMsqfLznE=",
+      "requires": {
+        "type-func": "^1.0.1"
+      }
+    },
     "cross-spawn": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
@@ -2694,6 +2746,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+    },
     "date-format": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.0.0.tgz",
@@ -2950,6 +3007,32 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "dom-autoscroller": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/dom-autoscroller/-/dom-autoscroller-2.3.4.tgz",
+      "integrity": "sha512-HcAdt/2Dq9x4CG6LWXc2x9Iq0MJPAu8fuzHncclq7byufqYEYVtx9sZ/dyzR+gdj4qwEC9p27Lw1G2HRRYX6jQ==",
+      "requires": {
+        "animation-frame-polyfill": "^1.0.0",
+        "create-point-cb": "^1.0.0",
+        "dom-mousemove-dispatcher": "^1.0.1",
+        "dom-plane": "^1.0.1",
+        "dom-set": "^1.0.1",
+        "type-func": "^1.0.1"
+      }
+    },
+    "dom-mousemove-dispatcher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dom-mousemove-dispatcher/-/dom-mousemove-dispatcher-1.0.1.tgz",
+      "integrity": "sha1-okpt35Oye7NpT3IIdUalf8fpFA8="
+    },
+    "dom-plane": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/dom-plane/-/dom-plane-1.0.2.tgz",
+      "integrity": "sha1-+MheaXxYfxR+j8L6wd4HjB/kFyw=",
+      "requires": {
+        "create-point-cb": "^1.0.0"
+      }
+    },
     "dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
@@ -2962,6 +3045,16 @@
         "void-elements": "^2.0.0"
       }
     },
+    "dom-set": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/dom-set/-/dom-set-1.1.1.tgz",
+      "integrity": "sha1-XCxhDuSDm1IO1fmN28vjFMD6lUo=",
+      "requires": {
+        "array-from": "^2.1.1",
+        "is-array": "^1.0.1",
+        "iselement": "^1.1.4"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5079,6 +5172,11 @@
       "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
       "dev": true
     },
+    "ionic2-calendar": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/ionic2-calendar/-/ionic2-calendar-0.5.2.tgz",
+      "integrity": "sha512-tVsQpKvj6y+GUid5bvZCpRhSxkyj2IqMJcXYQDVDkfR2iUiV/8EmBQE+JIyQDqvDdVslHrJKkI+2XlnZi6dDuw=="
+    },
     "ionicons": {
       "version": "4.5.8",
       "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.5.8.tgz",
@@ -5122,6 +5220,11 @@
         }
       }
     },
+    "is-array": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-array/-/is-array-1.0.1.tgz",
+      "integrity": "sha1-6YUMwsyGDDvAl36EzPDdRkWEJ5o="
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -5331,6 +5434,11 @@
         "buffer-alloc": "^1.2.0"
       }
     },
+    "iselement": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/iselement/-/iselement-1.1.4.tgz",
+      "integrity": "sha1-flW1Ko68pQp+LoDluNKEDzI1MUY="
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -7457,6 +7565,11 @@
         }
       }
     },
+    "positioning": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/positioning/-/positioning-1.4.0.tgz",
+      "integrity": "sha512-LbN+mgAXtcDdN46xMJ3yZwjndqqYJODaO5qKmU+MVMu5tL3K2dlm1Qha/zh1k2JAFym5HDaZpnPfO4gr91VTRw=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -9796,6 +9909,11 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "type-func": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/type-func/-/type-func-1.0.3.tgz",
+      "integrity": "sha1-qxhCNK6A2NUAV87+/zstl9CK6bA="
+    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

package.json

@@ -25,7 +25,10 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.1.0",
+    "angular-calendar": "^0.27.14",
     "core-js": "^2.5.4",
+    "date-fns": "^1.30.1",
+    "ionic2-calendar": "^0.5.2",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.29"

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>
+  <ion-toolbar>
+    <ion-title>addaddress</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

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';
+
+@Component({
+  selector: 'app-addaddress',
+  templateUrl: './addaddress.page.html',
+  styleUrls: ['./addaddress.page.scss'],
+})
+export class AddaddressPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/app-routing.module.ts

@@ -68,7 +68,17 @@ const routes: Routes = [
   { 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: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
+  { path: 'selectservices', loadChildren: './selectservices/selectservices.module#SelectservicesPageModule' },
+  { path: 'date', 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' }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -11,6 +11,11 @@ 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';
+
+
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -23,6 +28,10 @@ import { ReviewPage} from './review/review.page';
     BrowserModule,
     IonicModule.forRoot(),
     AppRoutingModule,
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     BrowserAnimationsModule
   ],
   providers: [

src/app/app.scss

@@ -317,7 +317,10 @@ button{
 }
 
 .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);
 }
 
 
@@ -348,6 +351,9 @@ button{
         font-size: 20px;
         text-align: center;
         text-transform: uppercase;
+        span{
+            color: #39267f;
+        }
     }
 }
 
@@ -376,6 +382,10 @@ button{
     background-image: url("../assets/img/asset_cart.png");
 }
 
+.nav_filter{
+    background-image: url("../assets/img/asset_filter.png");
+}
+
 .account_pic{
     img{
         width: 35px;
@@ -416,6 +426,50 @@ ion-modal{
 }
 
 
+.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.page.scss

@@ -2,7 +2,7 @@
     .location_box{
       position: fixed;
       left:0px;
-      top: 45px;
+      top: 60px;
       right:0px;
       z-index: 999;
     }

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/date/date.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 { DatePage } from './date.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DatePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    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" placeholder="Select Date"></ion-datetime>
+      </ion-item>
+      <ion-item>
+          <ion-label>Pick time</ion-label>
+          <ion-datetime displayFormat="HH:mm" placeholder="Select Time"></ion-datetime>
+      </ion-item>
+      <h4>Instruction</h4>
+      <textarea rows="6" placeholder="Type here..." ></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)="goToPage('summary')">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';
+
+
+@Component({
+  selector: 'app-date',
+  templateUrl: './date.page.html',
+  styleUrls: ['./date.page.scss'],
+})
+export class DatePage 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.page.html

@@ -26,11 +26,11 @@
               <img src="../../assets/img/asset_menu1.png">
               <p>Road <br>Assistance</p>
             </ion-col>
-            <ion-col class="textCenter">
+            <ion-col class="textCenter" (click)="goToPage('selectservices')">
                 <img src="../../assets/img/asset_menu2.png">
-                <p>Parts<br>Purchase</p>
+                <p>Car<br>Services</p>
             </ion-col>
-            <ion-col class="textCenter">
+            <ion-col class="textCenter" (click)="goToPage('purchaseparts')">
                 <img src="../../assets/img/asset_menu3.png">
                 <p>Parts<br>Purchase</p>
             </ion-col>

src/app/home/home.page.scss

@@ -4,7 +4,7 @@
   .location_box{
     position: fixed;
     left:0px;
-    top: 55px;
+    top: 60px;
     right:0px;
     z-index: 999;
   }

src/app/home/home.page.ts

@@ -31,7 +31,6 @@ export class HomePage {
 
 
   goToPage(path,data=null){
-    this.menuShow = !this.menuShow;
     this.router.navigateByUrl(path,{queryParams:data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
     this.logout();
@@ -45,7 +44,6 @@ export class HomePage {
     this.menuShow = !this.menuShow;
     this.router.navigateByUrl(path,{queryParams:data});
     this.logout();
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
 

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>
+  <ion-toolbar>
+    <ion-title>productbooking</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

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 } from '@angular/core';
+
+@Component({
+  selector: 'app-productbooking',
+  templateUrl: './productbooking.page.html',
+  styleUrls: ['./productbooking.page.scss'],
+})
+export class ProductbookingPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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-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 class="header_submenu">
+            <h4>People most purchased</h4>
+            <button class="more_btn">More</button>
+            <div class="clear"></div>
+        </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;
+        .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;
+        }
+      }
+    .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;
+    
+        }
+      }
+    }
+}

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 {
+
+  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/roadassistance/roadassistance.page.scss

@@ -3,7 +3,7 @@
     .location_box{
       position: fixed;
       left:0px;
-      top: 50px;
+      top: 60px;
       right:0px;
       z-index: 999;
     }
@@ -67,7 +67,9 @@
                     background-position: center;
                     background-repeat: no-repeat;
                     background-size: 100%;
-                    padding: 8px;
+                    padding: 10px;
+                    padding-left: 15px;
+                    padding-right: 15px;
                 }
                 .book{
                     color: #fff;
@@ -75,7 +77,9 @@
                     background-position: center;
                     background-repeat: no-repeat;
                     background-size: 100%;
-                    padding: 8px;
+                    padding: 10px;
+                    padding-left: 15px;
+                    padding-right: 15px;
                 }
                 p{
                     margin:0px;

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">
+            <input class="" placeholder="Services or Problems..." >
+          </div>
+    </div>
+</div>
+</ion-header>
+<ion-content>
+  <div class="select_services_wrapper">
+      <div class="home_main_stack_menu">
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu4.png">
+                <p>Heating & <br>Airconditioning</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu5.png">
+                  <p>Electrical &<br>Lighting</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu6.png">
+                  <p>Clutch &<br>Transmission</p>
+              </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu7.png">
+                <p>Braking<br>System</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu8.png">
+                  <p>Drive train<br>Suspension</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu9.png">
+                  <p>Fuel<br>System</p>
+              </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu10.png">
+                <p>Interior & <br>Exterior</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu11.png">
+                  <p>Engine<br>Components</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu12.png">
+                  <p>Body Parts &<br>Hardware</p>
+              </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu13.png">
+                <p>Electronic<br>Devices  </p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu14.png">
+                  <p>Parts<br>Purchase</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu15.png">
+                  <p>Parts<br>Purchase</p>
+              </ion-col>
+          </ion-row>
+      </div>
+  </div>
+  <div class="select_footer">
+    <ion-row>
+      <ion-col>
+          <h6>2 Services</h6>
+          <h6>Rolls Royce Ghost</h6>
+          <h6>....</h6>
+      </ion-col>
+      <ion-col>
+        <button class="next_btn floatRight" (click)="goToPage('date')">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';
+
+@Component({
+  selector: 'app-selectservices',
+  templateUrl: './selectservices.page.html',
+  styleUrls: ['./selectservices.page.scss'],
+})
+export class SelectservicesPage 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/servicedetails/servicedetails.page.scss

@@ -2,7 +2,7 @@
     .location_box{
       position: fixed;
       left:0px;
-      top: 45px;
+      top: 60px;
       right:0px;
       z-index: 999;
     }

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/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() {
+  }
+
+}