initial push

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="hi@ionicframework.com" 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>
+        <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/icon@2x.png" width="114" />
+        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
+        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
+        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
+        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
+        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
+        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
+        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
+        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
+        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
+        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
+        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
+        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
+        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
+        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
+        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
+        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
+        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
+        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
+        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
+        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
+        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
+        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
+        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
+        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
+        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
+        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
+        <icon height="196" src="resources/ios/icon/icon-98@2x.png" 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" />
+</widget>

ionic.config.json

 {
   "name": "first-app",
-  "integrations": {},
+  "integrations": {
+    "cordova": {}
+  },
   "type": "angular"
 }

package-lock.json

@@ -1275,6 +1275,14 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/header-color": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/header-color/-/header-color-5.17.1.tgz",
+      "integrity": "sha512-0uSCC0pkGZoeimUc/aqMOJb2Vb6LgNQj9HDWAxO62yEwvtlAh9lQiv5worJoamDxDYhXtvfSYMWgKMj5kGGyOw==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
     "@ionic-native/splash-screen": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.17.1.tgz",
@@ -3084,6 +3092,11 @@
         "webpack-log": "^2.0.0"
       }
     },
+    "cordova-plugin-headercolor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-headercolor/-/cordova-plugin-headercolor-1.0.0.tgz",
+      "integrity": "sha1-AgrNlDeH7gOdZ/Z56NnqbTiSAxY="
+    },
     "core-js": {
       "version": "2.6.10",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz",

package.json

@@ -20,9 +20,11 @@
     "@angular/platform-browser-dynamic": "~8.1.2",
     "@angular/router": "~8.1.2",
     "@ionic-native/core": "^5.0.0",
+    "@ionic-native/header-color": "^5.17.1",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
+    "cordova-plugin-headercolor": "^1.0.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",
@@ -54,5 +56,10 @@
     "tslint": "~5.15.0",
     "typescript": "~3.4.3"
   },
-  "description": "An Ionic project"
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-headercolor": {}
+    }
+  }
 }

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/app/app-routing.module.ts

@@ -4,6 +4,22 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
+  {
+    path: 'policies',
+    loadChildren: () => import('./policies/policies.module').then( m => m.PoliciesPageModule)
+  },
+  {
+    path: 'modal',
+    loadChildren: () => import('./modal/modal.module').then( m => m.ModalPageModule)
+  },
+  {
+    path: 'travellerinfo',
+    loadChildren: () => import('./travellerinfo/travellerinfo.module').then( m => m.TravellerinfoPageModule)
+  },
+  {
+    path: 'passengerdetails',
+    loadChildren: () => import('./passengerdetails/passengerdetails.module').then( m => m.PassengerdetailsPageModule)
+  },
 ];
 
 @NgModule({
@@ -12,4 +28,8 @@ const routes: Routes = [
   ],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+  
+ }
+
+ 

src/app/app.component.ts

@@ -4,6 +4,9 @@ import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 
+
+
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -13,7 +16,7 @@ export class AppComponent {
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
-    private statusBar: StatusBar
+    private statusBar: StatusBar,
   ) {
     this.initializeApp();
   }
@@ -24,4 +27,9 @@ export class AppComponent {
       this.splashScreen.hide();
     });
   }
+
+  
+
+ 
 }
+

src/app/app.module.ts

@@ -9,10 +9,13 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
+import {ModalPageModule} from './modal/modal.module';
+
+
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,ModalPageModule],
   providers: [
     StatusBar,
     SplashScreen,

src/app/home/home.page.html

 <ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Ionic Blank
-    </ion-title>
-  </ion-toolbar>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="1">
+        <img src="assets/arrow-left.png">
+      </ion-col>
+      <ion-col size="9">
+        <h1>Daewoo Express</h1>
+        <h2>KHI - LHR Sep 9</h2>
+      </ion-col>
+      <ion-col size="2">
+        <button>Reset</button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-header>
 
 <ion-content>
+  
+
   <div class="ion-padding">
-    The world is your oyster.
-    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
+    <img src="assets/steering.png" class="steering-c" alt="Steering">
+  </div>
+
+  <ion-grid class="seat-grid">
+    <ion-row>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-1" />
+          <label class="label-for-check" for="seat-1">01</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-2" />
+          <label class="label-for-check" for="seat-2">02</label>
+        </div>
+      </ion-col>
+      <ion-col size="4"></ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-3" />
+          <label class="label-for-check" for="seat-3">03</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-4" />
+          <label class="label-for-check" for="seat-4">04</label>
+        </div>
+      </ion-col>
+    </ion-row>
+    <ion-row> <!--second row -->
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-5" />
+          <label class="label-for-check" for="seat-5">05</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-6" />
+          <label class="label-for-check" for="seat-6">06</label>
+        </div>
+      </ion-col>
+      <ion-col size="4"></ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-7" />
+          <label class="label-for-check" for="seat-7">07</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-8" />
+          <label class="label-for-check" for="seat-8">08</label>
+        </div>
+      </ion-col>
+    </ion-row>
+    <ion-row> <!--third row -->
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-9" />
+          <label class="label-for-check" for="seat-9">09</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-10" />
+          <label class="label-for-check" for="seat-10">10</label>
+        </div>
+      </ion-col>
+      <ion-col size="4"></ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-11" />
+          <label class="label-for-check" for="seat-11">11</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-12" />
+          <label class="label-for-check" for="seat-12">12</label>
+        </div>
+      </ion-col>
+    </ion-row>
+    <ion-row> <!--fourth row -->
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-13" />
+          <label class="label-for-check" for="seat-13">13</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-14" />
+          <label class="label-for-check" for="seat-14">14</label>
+        </div>
+      </ion-col>
+      <ion-col size="4"></ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-15" />
+          <label class="label-for-check" for="seat-15">15</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-16" />
+          <label class="label-for-check" for="seat-16">16</label>
         </div>
+      </ion-col>
+    </ion-row>
+    <ion-row> <!--fourth row -->
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-17" />
+          <label class="label-for-check" for="seat-17">17</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label ifbooked" id="seat-18" />
+          <label class="label-for-check" for="seat-18">18</label>
+        </div>
+      </ion-col>
+      <ion-col size="4"></ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-19" />
+          <label class="label-for-check" for="seat-19">19</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-20" />
+          <label class="label-for-check" for="seat-20">20</label>
+        </div>
+      </ion-col>
+    </ion-row>
+    <ion-row> <!--fourth row -->
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-21" />
+          <label class="label-for-check" for="seat-21">21</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-22" />
+          <label class="label-for-check" for="seat-22">22</label>
+        </div>
+      </ion-col>
+      <ion-col size="4"></ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-23" />
+          <label class="label-for-check" for="seat-23">23</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-24" />
+          <label class="label-for-check" for="seat-24">24</label>
+        </div>
+      </ion-col>
+    </ion-row>
+    <ion-row> <!--last row -->
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-25" />
+          <label class="label-for-check" for="seat-25">25</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-26" />
+          <label class="label-for-check" for="seat-26">26</label>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-27" />
+          <label class="label-for-check" for="seat-27">27</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-28" />
+          <label class="label-for-check" for="seat-28">28</label>
+        </div>
+      </ion-col>
+      <ion-col size="2">
+        <div>
+          <input type="checkbox" class="check-with-label" id="seat-29" />
+          <label class="label-for-check" for="seat-29">29</label>
+        </div>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <ion-grid class="seat-info ion-padding">
+    <ion-row>
+      <ion-col size="4">
+        <img src="assets/seat.png" alt="Seat">
+        <p>Available Seat</p>
+      </ion-col>
+      <ion-col size="4">
+        <img src="assets/seat-checked.png" alt="Seat">
+        <p>Selected Seat</p>
+      </ion-col>
+      <ion-col size="4">
+        <img src="assets/seat-booked.png" alt="Seat">
+        <p>Booked Seat</p>
+      </ion-col>
+    </ion-row> 
+    <span>Your session will expire within 15 minutes </span>
+  </ion-grid> 
+
+
 </ion-content>
+
+<ion-footer>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="4">
+        <h1>Rs.00.00</h1>
+      </ion-col>
+      <ion-col size="4">
+        <span (click)="openModal()">Policies <img src="assets/arrow-up.png" alt="Arrow Up"></span>
+      </ion-col>
+      <ion-col size="4">
+        <button (click)="navLink('policies')">Next</button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-footer>
+

src/app/home/home.page.scss

+ion-header {
+  padding: 0 16px;
+
+  &:after {
+    content: none;
+  }
+  
+  h1 {
+    padding-left: 25px;
+    font-size: 18px;
+    margin-top: 0;
+    margin-bottom: 2px;
+    padding-left: 3px;
+    font-weight: 700;
+  }
+  h2 {
+    padding-left: 25px;
+    font-size: 16px;
+    margin-top: 0;
+    padding-left: 3px;
+    color: #666666;
+  }
+  button {
+    background-color: transparent;
+    margin-top: 10px;
+    font-size: 14px;
+  }
+}
+
+ion-content {
+  padding-top: 30px;
+
+  .steering-c {
+    float: right;
+  }
+
+  .seat-grid {
+    margin-top: 35px;
+    text-align: center;
+
+    .check-with-label {
+      -webkit-appearance: none;
+      background-image: url("../../assets/seat.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      width: 28px;
+      height: 100%;
+      padding: 17px;
+      border-radius: 5px;
+      outline: none;
+    }
+    .check-with-label:checked {
+      background-image: url("../../assets/seat-checked.png");
+      
+    }
+    .label-for-check {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      right: 0;
+      font-size: 12px;
+    }
+    
+    .check-with-label:checked + .label-for-check {
+      color: #f26a21;
+    }
+
+    // ifbooked
+
+      .check-with-label.ifbooked {
+        background-image: url("../../assets/seat-booked.png") !important;
+      }
+      .check-with-label.ifbooked + .label-for-check {
+        color: #d3d6d9;
+      }
+
+  }
+
+  .seat-info {
+    padding: 20px 0;
+    text-align: center;
+
+    p {
+      font-size: 12px;
+    }
+    span {
+      font-size: 12px;
+    }
+  }
+  
+}
+
+
+ion-footer {
+  box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.15);
+  text-align: center;
+
+  h1 {
+    font-size: 18px;
+    font-weight: 700;
+    margin: 8px 0;
+  }
+  span {
+    background-color: transparent;
+    font-size: 16px;
+    font-weight: 700;
+    margin: 8px 0;
+    display: inline-block;
+    color: #666666;
+  }
+  button {
+    background-color: #f26a21;
+    color: #fff;
+    padding: 10px 25px;
+  }
+}
 

src/app/home/home.page.ts

 import { Component } from '@angular/core';
 
+import { ModalController } from '@ionic/angular';
+import { ModalPage} from '../modal/modal.page';
+
+import { Router } from '@angular/router';
+
+
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
@@ -7,6 +13,34 @@ import { Component } from '@angular/core';
 })
 export class HomePage {
 
-  constructor() {}
+  dataReturned:any;
+
+  constructor(
+    private modalController: ModalController, 
+    private router: Router
+  ) {
+  }
+
+  async openModal() {
+    const modal = await this.modalController.create({
+      component: ModalPage
+    });
+ 
+    modal.onDidDismiss().then((dataReturned) => {
+      if (dataReturned !== null) {
+        this.dataReturned = dataReturned.data;
+        //alert('Modal Sent Data :'+ dataReturned);
+      }
+    });
+ 
+    return await modal.present();
+  }
+
+  navLink(path:any,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+  }
+
+  
 
 }
+

src/app/modal/modal-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ModalPage } from './modal.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ModalPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ModalPageRoutingModule {}

src/app/modal/modal.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ModalPageRoutingModule } from './modal-routing.module';
+
+import { ModalPage } from './modal.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ModalPageRoutingModule
+  ],
+  declarations: [ModalPage]
+})
+export class ModalPageModule {}

src/app/modal/modal.page.html

+
+
+
+  <div class="pop-box">
+    <button class="close-btn" (click)="closeModal()"><img src="assets/close.png" alt="Close"></button>
+    <p>Please select a <br>
+    seat to proceed 
+    </p>
+    <button class="m-button" (click)="closeModal()">GOT IT</button>
+  </div>
+
+

src/app/modal/modal.page.scss

+.pop-box {
+  text-align: center;
+  background-color: #fff;
+
+  .close-btn {
+    position: absolute;
+    right: -6px;
+    background-color: transparent;
+    outline: none;
+  }
+  .m-button {
+    background-color: #F37836;
+    color: #fff;
+    width: 100%;
+    padding: 15px;
+  }
+}

src/app/modal/modal.page.spec.ts

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

src/app/modal/modal.page.ts

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

src/app/passengerdetails/passengerdetails-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PassengerdetailsPage } from './passengerdetails.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PassengerdetailsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PassengerdetailsPageRoutingModule {}

src/app/passengerdetails/passengerdetails.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PassengerdetailsPageRoutingModule } from './passengerdetails-routing.module';
+
+import { PassengerdetailsPage } from './passengerdetails.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PassengerdetailsPageRoutingModule
+  ],
+  declarations: [PassengerdetailsPage]
+})
+export class PassengerdetailsPageModule {}

src/app/passengerdetails/passengerdetails.page.html

+<ion-header>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="1">
+        <img src="assets/arrow-left.png">
+      </ion-col>
+      <ion-col size="11">
+        <h1>Checkout</h1>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-header>
+
+<ion-content padding>
+
+  <h1>Passenger Details</h1>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col size="5">
+        <h2>Name</h2>
+        <p>John Dawson</p>
+      </ion-col>
+      <ion-col size="2">
+        <h2>Age</h2>
+        <p>24</p>
+      </ion-col>
+      <ion-col size="5">
+        <h2>Phone Number</h2>
+        <p>03360333421</p>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <img src="assets/line.png" alt="Line">
+
+  <div class="brd-details">
+    <h1>Boarding Details</h1>
+
+    <table>
+      <tr>
+        <td>Bus Route</td>
+        <td>:</td>
+        <td>Karachi - Lahore</td>
+      </tr> 
+      <tr>
+        <td>Service provider</td>
+        <td>:</td>
+        <td>Daewoo</td>
+      </tr> 
+      <tr>
+        <td>Departure Date</td>
+        <td>:</td>
+        <td>Sep 6, Thu</td>
+      </tr> 
+      <tr>
+        <td>Departure time</td>
+        <td>:</td>
+        <td>8:35</td>
+      </tr> 
+      <tr>
+        <td>Arrival Date</td>
+        <td>:</td>
+        <td>Sep 12, Wed</td>
+      </tr> 
+      <tr>
+        <td>Arrival Time</td>
+        <td>:</td>
+        <td>15:35</td>
+      </tr> 
+      <tr>
+        <td>Seat No</td>
+        <td>:</td>
+        <td>21, 22, 23</td>
+      </tr> 
+      <tr>
+        <td>Boarding Point</td>
+        <td>:</td>
+        <td>Daewoo Station Karachi</td>
+      </tr>
+      <tr>
+        <td>Bus Type</td>
+        <td>:</td>
+        <td>AC Sleeper 421</td>
+      </tr> 
+    </table>
+  </div>
+
+  <div class="item-box">
+    <p>1 Item(s), Total: <span>Rs. 2,370</span></p>
+  </div>
+  
+
+</ion-content>

src/app/passengerdetails/passengerdetails.page.scss

+ion-header {
+  padding: 0 16px;
+
+  &:after {
+    content: none;
+  }
+  
+  h1 {
+    padding-left: 25px;
+    font-size: 18px;
+    margin-top: 0;
+    padding-left: 3px;
+    font-weight: 700;
+  }
+}
+
+ion-content {
+
+  h1 {
+    font-size: 18px;
+    margin-top: 0;
+    font-weight: 700;
+    color: #4C4C4C;
+  }
+  h2 {
+    font-size: 14px;
+    margin-top: 0;
+    font-weight: 700;
+  }
+  p {
+    font-size: 14px;
+    margin-top: 0;
+    color: #4C4C4C;
+  }
+  .brd-details {
+    margin-top: 20px;
+
+    tr {
+      margin-top: 15px;
+      display: block;
+
+      td {
+        padding-right: 15px;
+      }
+      td:nth-child(1){
+        width: 140px;
+      }
+    }
+  }
+  
+  .item-box {
+    margin-top: 25px;
+    padding: 15px 0;
+    text-align: right;
+    border-top: 1px solid #dadada;
+
+    p{
+
+      span {
+        font-size: 18px;
+        font-weight: 700;
+        color: #E73511;
+      }
+    }
+  }
+}
\ No newline at end of file

src/app/passengerdetails/passengerdetails.page.spec.ts

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

src/app/passengerdetails/passengerdetails.page.ts

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

src/app/policies/policies-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PoliciesPage } from './policies.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PoliciesPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PoliciesPageRoutingModule {}

src/app/policies/policies.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PoliciesPageRoutingModule } from './policies-routing.module';
+
+import { PoliciesPage } from './policies.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PoliciesPageRoutingModule
+  ],
+  declarations: [PoliciesPage]
+})
+export class PoliciesPageModule {}

src/app/policies/policies.page.html

+<ion-header>
+      <button (click)="navLink('home')"><img src="assets/arrow-left.png" alt=""></button>
+      <h1><ion-icon name="arrow-down"></ion-icon> Bus Policies</h1>
+</ion-header>
+
+<ion-content padding>
+
+  <h1>Cancellation Policy</h1>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col size="9">
+        <h2>Event</h2>
+        <h3>Cancelled 3 hrs + before travel</h3>
+      </ion-col>
+      <ion-col size="3">
+        <h2>Charges</h2>
+        <h3>25%</h3>
+      </ion-col>
+      <ion-col size="12">
+        <p>Bus cannot be cancelled 0-3 hrs before travel. Cancelled
+          charges are applicable on the total ticket value. The bus 
+          operator is not responsible for loss of personal items
+        </p>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+</ion-content>

src/app/policies/policies.page.scss

+ion-header {
+  padding: 16px 16px;
+  
+  &:after {
+    content: none;
+  }
+
+  img {
+    float: left;
+  }
+  h1 {
+    text-align: center;
+    color: #333333;
+    font-weight: 400;
+    font-size: 18px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+}
+
+ion-content {
+
+  h1 {
+    font-size: 18px;
+    font-weight: 700;
+    margin-left: 5px;
+  }
+  h2 {
+    font-size: 14px;
+    font-weight: 700;
+  }
+  h3 {
+    font-size: 12px;
+    color: #666666;
+    margin-top: 10px;
+  }
+  p {
+    font-size: 12px;
+    color: #666666;
+    margin-top: 10px;
+    line-height: 1.5;
+  }
+}
\ No newline at end of file

src/app/policies/policies.page.spec.ts

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

src/app/policies/policies.page.ts

+import { Component, OnInit } from '@angular/core';
+
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-policies',
+  templateUrl: './policies.page.html',
+  styleUrls: ['./policies.page.scss'],
+})
+export class PoliciesPage implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  navLink(path:any,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+  }
+
+}

src/app/travellerinfo/travellerinfo-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TravellerinfoPage } from './travellerinfo.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TravellerinfoPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TravellerinfoPageRoutingModule {}

src/app/travellerinfo/travellerinfo.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TravellerinfoPageRoutingModule } from './travellerinfo-routing.module';
+
+import { TravellerinfoPage } from './travellerinfo.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TravellerinfoPageRoutingModule
+  ],
+  declarations: [TravellerinfoPage]
+})
+export class TravellerinfoPageModule {}

src/app/travellerinfo/travellerinfo.page.html

+<ion-header>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="1">
+        <img src="assets/arrow-left.png">
+      </ion-col>
+      <ion-col size="11">
+        <h1>Daewoo Express</h1>
+        <h2>KHI - LHR Sep 9</h2>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-header>
+
+<ion-content padding>
+
+    <h1>Traveller Information</h1>
+
+    <form>
+      <div class="input-box">
+        <label position="stacked">Name </label>
+        <input required type="text">
+      </div>
+      <div class="input-box">
+        <label position="stacked">Year of birth </label>
+        <select>
+          <option value="">1996</option>
+          <option value="">1997</option>
+          <option value="">1998</option>
+          <option value="">1999</option>
+          <option value="">2000</option>
+          <option value="">2001</option>
+          <option value="">2002</option>
+        </select>
+      </div>
+      <div class="input-box">
+        <label position="stacked">Phone </label>
+        <input required type="tel">
+      </div>
+      <div class="input-box">
+        <label position="stacked">Email (For email delivery) </label>
+        <input required type="tel">
+      </div>
+      <div class="input-box">
+        <label position="stacked">CNIC</label>
+        <input required type="tel">
+      </div>
+    </form>
+
+</ion-content>

src/app/travellerinfo/travellerinfo.page.scss

+ion-header {
+  padding: 0 16px;
+
+  &:after {
+    content: none;
+  }
+  
+  h1 {
+    padding-left: 25px;
+    font-size: 18px;
+    margin-top: 0;
+    padding-left: 3px;
+    font-weight: 700;
+  }
+  h2 {
+    padding-left: 25px;
+    font-size: 14px;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 3px;
+  }
+}
+
+ion-content {
+
+  h1 {
+    font-size: 16px;
+    font-weight: 700;
+    color: #333333;
+  }
+  form {
+    margin-top: 20px;
+
+    .input-box {
+      margin-top: 20px;
+      
+      label {
+        font-size: 14px;
+        color: #666666;
+      }
+      input, select {
+        border-bottom: 1px solid #e8e8e8;
+        background-color: transparent;
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+        display: block;
+        width: 100%;
+        outline: 0;
+        font-size: 16px;
+        padding-top: 3px;
+        color: #4c4c4c;
+        font-weight: 500;
+      }
+    }
+  }
+}
\ No newline at end of file

src/app/travellerinfo/travellerinfo.page.spec.ts

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

src/app/travellerinfo/travellerinfo.page.ts

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

src/global.scss

@@ -24,3 +24,24 @@
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap');
+
+
+body {
+  font-family: 'Lato', sans-serif;
+}
+
+.modal-wrapper {
+  width: 75% !important;
+  height: 20% !important;
+  background-color: transparent !important;
+  box-shadow: transparent;
+}
+.ion-page {
+  overflow: show !important;
+}
+
+.modal-wrapper.sc-ion-modal-md {
+  overflow: show !important;
+}
\ No newline at end of file

src/index.html

@@ -12,6 +12,7 @@
   <meta name="msapplication-tap-highlight" content="no" />
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+  <script src="cordova.js"></script>
   
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />