initial push|1-07-2019

.gitignore

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

angular.json

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

config.xml

+<?xml version='1.0' encoding='utf-8'?>
+<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>Technobeat Technician</name>
+    <description>Ionic4 app</description>
+    <author email="" href="http://ionicframework.com/">Techware Solutions Private Limited</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/[email protected]" width="114" />
+        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
+        <icon height="80" src="resources/ios/icon/[email protected]" width="80" />
+        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
+        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
+        <icon height="100" src="resources/ios/icon/[email protected]" width="100" />
+        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
+        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
+        <icon height="180" src="resources/ios/icon/[email protected]" width="180" />
+        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
+        <icon height="144" src="resources/ios/icon/[email protected]" width="144" />
+        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
+        <icon height="152" src="resources/ios/icon/[email protected]" width="152" />
+        <icon height="167" src="resources/ios/icon/[email protected]" width="167" />
+        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
+        <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
+        <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
+        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
+        <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="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
+        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
+        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
+        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
+        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
+        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
+        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
+        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
+        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
+        <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" />
+    <plugin name="cordova-plugin-geolocation" spec="4.0.1">
+        <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
+    </plugin>
+    <plugin name="cordova-plugin-googlemaps" spec="2.6.2">
+        <variable name="API_KEY_FOR_ANDROID" value="AIzaSyA25LMQmwAEoJO-rpSDjXXPSCKsN7zpcEk" />
+    </plugin>
+    <engine name="browser" spec="5.0.4" />
+    <engine name="android" spec="7.1.4" />
+</widget>

e2e/protractor.conf.js

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

e2e/src/app.e2e-spec.ts

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

e2e/src/app.po.ts

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

e2e/tsconfig.e2e.json

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

ionic.config.json

+{
+  "name": "Technobeat_Technician",
+  "integrations": {
+    "cordova": {}
+  },
+  "type": "angular",
+  "id": "5656434"
+}

package.json

+{
+  "name": "Technobeat_Technician",
+  "version": "0.0.1",
+  "author": "Ionic Framework",
+  "homepage": "https://ionicframework.com/",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^8.0.0",
+    "@angular/common": "^7.2.2",
+    "@angular/core": "^7.2.2",
+    "@angular/forms": "^7.2.2",
+    "@angular/http": "^7.2.2",
+    "@angular/platform-browser": "^7.2.2",
+    "@angular/platform-browser-dynamic": "^7.2.2",
+    "@angular/router": "^7.2.2",
+    "@ionic-native/core": "^5.0.0",
+    "@ionic-native/geolocation": "^5.0.0",
+    "@ionic-native/google-maps": "^5.0.0-beta.27",
+    "@ionic-native/splash-screen": "^5.0.0",
+    "@ionic-native/status-bar": "^5.0.0",
+    "@ionic/angular": "^4.1.0",
+    "@ionic/pro": "2.0.4",
+    "cordova-android": "7.1.4",
+    "cordova-browser": "5.0.4",
+    "cordova-plugin-device": "^2.0.2",
+    "cordova-plugin-geolocation": "4.0.1",
+    "cordova-plugin-googlemaps": "2.6.2",
+    "cordova-plugin-ionic-keyboard": "^2.1.3",
+    "cordova-plugin-ionic-webview": "^4.1.0",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-whitelist": "^1.3.3",
+    "core-js": "^2.5.4",
+    "ionic4-rating": "^1.0.9",
+    "ng-starrating": "^1.0.6",
+    "rxjs": "~6.5.1",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.8.29"
+  },
+  "devDependencies": {
+    "@angular-devkit/architect": "~0.13.8",
+    "@angular-devkit/build-angular": "~0.13.8",
+    "@angular-devkit/core": "~7.3.8",
+    "@angular-devkit/schematics": "~7.3.8",
+    "@angular/cli": "~7.3.8",
+    "@angular/compiler": "~7.2.2",
+    "@angular/compiler-cli": "~7.2.2",
+    "@angular/language-service": "~7.2.2",
+    "@ionic/angular-toolkit": "~1.5.1",
+    "@types/node": "~12.0.0",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~8.1.0",
+    "tslint": "~5.17.0",
+    "typescript": "~3.1.6"
+  },
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-googlemaps": {
+        "API_KEY_FOR_ANDROID": "AIzaSyA25LMQmwAEoJO-rpSDjXXPSCKsN7zpcEk"
+      },
+      "cordova-plugin-geolocation": {
+        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
+      },
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-ionic-webview": {},
+      "cordova-plugin-ionic-keyboard": {}
+    },
+    "platforms": [
+      "browser",
+      "android"
+    ]
+  }
+}
\ No newline at end of file

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>localhost</domain>
+    </domain-config>
+</network-security-config>

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

src/app/accounts/accounts.page.html

+<ion-header class="app_header">
+    <ion-menu-toggle>
+  <button class="nav_btn floatLeft">
+      <ion-icon name="menu"></ion-icon>
+  </button>
+  </ion-menu-toggle>
+  <div class="nav_title floatLeft">
+    <h4>Accounts</h4>
+  </div>
+  <button class="nav_btn floatRight">
+      <ion-icon name="logo-buffer"></ion-icon>
+  </button>
+  <div class="clear"></div>
+</ion-header>
+<ion-content>
+  <div class="accounts_wrapper">
+    <div class="account_pic">
+      <div class="edit">
+          <ion-icon name="create"></ion-icon>
+      </div>
+    </div>
+    <br>
+    <br>
+    <div class="row">
+      <ion-label position="stacked">User name</ion-label>
+        <ion-input value="Johnk"></ion-input>
+    </div>
+    <div class="row">
+        <ion-label position="stacked">Full name</ion-label>
+        <ion-input value="John Kory"></ion-input>
+    </div>
+    <div class="row">
+        <ion-label position="stacked">Address</ion-label>
+        <ion-input value="Wilsons Estate East Gate California"></ion-input>
+    </div>
+    <div class="row">
+        <ion-label position="stacked">Phone</ion-label>
+        <ion-input value="+8965 24589"></ion-input>
+    </div>
+    <div class="row">
+        <ion-label position="stacked">Mail</ion-label>
+        <ion-input value="[email protected]"></ion-input>
+    </div>
+    <div class="row">
+        <ion-button class="signup_btn" expand="block">save</ion-button>
+    </div>
+  </div>
+</ion-content>

src/app/accounts/accounts.page.scss

+.accounts_wrapper{
+    padding: 20px;
+
+    .account_pic{
+        margin:0 auto;
+        width:120px;
+        height:120px;
+        border:2px solid #004989;
+        position: relative;
+        color: #fff;
+        cursor:pointer;
+        img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        .edit{
+            width:40px;
+            height:40px;
+            background: #004989;
+            position: absolute;
+            border-radius: 50%;
+            top: -10px;
+            right: -15px;
+            padding: 10px;
+            font-size: 20px;
+            cursor:pointer;
+        }
+    }
+    h3{
+        text-align: center;
+        color: #004989;
+        margin: 0px;
+        font-size: 20px;
+        font-weight: 600;
+    }
+    
+    hr{
+        border:1px solid #004989;
+        height:0px;
+        border-radius: 20px;
+        width: 130px;
+        margin-top: 5px;
+        padding-top: 0px;
+        margin-bottom: 20px;
+    }
+
+    .row{
+        margin-bottom: 20px;
+        ion-label{
+            color: #004989;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        ion-input{
+            border-bottom: 1px solid #a8a8a8;
+            color: #a8a8a8;
+            font-weight: 300;
+            font-size: 18px;
+            .native-input{
+                padding: 0px !important;
+            }
+        }
+    }
+}

src/app/accounts/accounts.page.spec.ts

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

src/app/accounts/accounts.page.ts

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

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'signin',
+    pathMatch: 'full'
+  },
+  
+  {
+    path: 'home',
+    loadChildren: './home/home.module#HomePageModule'
+  },
+
+  {
+    path: 'list',
+    loadChildren: './list/list.module#ListPageModule'
+  },
+  
+  { path: 'contact',
+    loadChildren: './contact/contact.module#ContactPageModule' 
+  },
+
+  { path: 'signin',
+   loadChildren: './signin/signin.module#SigninPageModule'
+  },
+
+  { path: 'signup',
+   loadChildren: './signup/signup.module#SignupPageModule'
+  },
+
+  { 
+    path: 'landing',
+    loadChildren: './landing/landing.module#LandingPageModule'
+  },
+
+  { 
+    path: 'forgot',
+    loadChildren: './forgot/forgot.module#ForgotPageModule'
+  },
+  { path: 'accounts', loadChildren: './accounts/accounts.module#AccountsPageModule' },
+  { path: 'support', loadChildren: './support/support.module#SupportPageModule' },
+  { path: 'listdetail', loadChildren: './listdetail/listdetail.module#ListdetailPageModule' }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.html

+<ion-app>
+  <ion-split-pane>
+    <ion-menu>
+      <ion-content>
+        <div class="sidemenu_wrapper">
+            <div class="sidemenu_head">
+              <span>
+                  <img src="../assets/imgs/techno-icon.png">
+              </span>
+              <span><h4>Antony Marcov</h4></span>
+            </div>
+            <ul>
+                <li (click)="goToPage('accounts')"><ion-icon name="person"></ion-icon>My Account</li>
+              <li (click)="goToPage('accounts')"><ion-icon name="clipboard"></ion-icon>My Reviews</li>
+              <li (click)="goToPage('support')"><ion-icon name="headset"></ion-icon>Support</li>
+              <li><ion-icon name="information-circle"></ion-icon>Info</li>
+              <li (click)="goToPage('signin')"><ion-icon name="log-out"></ion-icon>Log Out</li>
+            </ul>
+        </div>
+      </ion-content>
+    </ion-menu>
+    <ion-router-outlet main></ion-router-outlet>
+  </ion-split-pane>
+</ion-app>

src/app/app.component.spec.ts

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

src/app/app.component.ts

+import { Component } from '@angular/core';
+import { MenuController } from '@ionic/angular';
+
+import { Platform } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+import { Router,ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+
+  toggleOpen = false;
+
+  public appPages = [
+    {
+      title: 'Home',
+      url: '/home',
+      icon: 'home'
+    },
+    {
+      title: 'List',
+      url: '/list',
+      icon: 'list'
+    },
+    {
+      title: 'Contact',
+      url: '/contact',
+      icon: 'contact'
+    }
+
+  ];
+
+  constructor(
+    private platform: Platform,
+    private splashScreen: SplashScreen,
+    private statusBar: StatusBar,
+    public menuCtrl: MenuController,
+    private router: Router,private route: ActivatedRoute
+  ) {
+    this.initializeApp();
+  }
+
+
+
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    this.menuCtrl.toggle();
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  isToggle(){
+    this.toggleOpen = !this.toggleOpen;
+  }
+
+
+  initializeApp() {
+    this.platform.ready().then(() => {
+      this.statusBar.styleDefault();
+      this.splashScreen.hide();
+    });
+  }
+}

src/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {Geolocation} from '@ionic-native/geolocation/ngx';
+import { GoogleMaps } from '@ionic-native/google-maps';
+
+
+@NgModule({
+  declarations: [AppComponent],
+  entryComponents: [],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    BrowserAnimationsModule
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    Geolocation,
+    GoogleMaps,
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}

src/app/app.scss

+/*
+  Site Name: TECHNOBEAT
+  URI: http:
+  Description: This is the theme scss for TECHNOBEAT
+  Version: 2.0
+  Author: 
+  Author URI:
+  Tags:
+
+	---------------------------
+	THEME STYLES
+	---------------------------
+
+	TABLE OF CONTENTS
+	---------------------------
+	 01. FONTS-N-SIZES
+	 02. FONTS-COLOR
+	 03. THEMES-N-BACKGROUNDS
+	 04. SPACING-N-POSITIONS
+	 05. ALIGMENTS
+	 06. ALERTS-N-MESSAGES
+
+
+*/
+
+
+/*-------------------------------
+
+01. FONTS-N-SIZES
+
+--------------------------------*/
+
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
+* {
+    font-family: 'Roboto', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scroll .scroll-content {
+    overflow: hidden;
+}
+
+a {
+    text-decoration: none !important;
+}
+
+button{
+    outline: none;  
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none !important; 
+  margin: 0; 
+}
+
+html,
+body {
+    font-family: 'Lato', sans-serif !important;
+    margin:0px;
+}
+
+button{
+    cursor: pointer;
+}
+
+/*-------------------------------
+
+02. FONTS-SETTINGS
+
+--------------------------------*/
+
+.text_color_white {
+    color: #fff !important;
+}
+
+
+.font_size_xs {
+    font-size: 12px !important;
+}
+
+.font_size_sm {
+    font-size: 14px !important;
+}
+
+.font_size_md {
+    font-size: 16px !important;
+}
+
+.font_size_lg {
+    font-size: 18px !important;
+}
+
+.font_size_xl {
+    font-size: 20px !important;
+}
+
+.font_size_vl {
+    font-size: 35px !important;
+}
+
+.font_weight300 {
+    font-weight: 300 !important;
+}
+
+.font_weight400 {
+    font-weight: 400 !important;
+}
+
+.font_weight500 {
+    font-weight: 500 !important;
+}
+
+.font_weight600 {
+    font-weight: 600 !important;
+}
+
+
+/*-------------------------------
+
+03. THEMES-N-BACKGROUNDS
+
+--------------------------------*/
+
+.theme_background {
+    background-size: cover !important;
+    background-position: center !important;
+}
+
+.theme_transparent {
+    background: transparent !important;
+}
+
+.theme_white {
+    background-color: #f7f8fd !important;
+}
+
+.theme_off_white {
+    background-color: #f4f4f4 !important;
+}
+
+.theme_dark_transparent {
+    background-color: rgba(0, 0, 0, 0.6) !important;
+}
+
+.theme_white_transparent {
+    background-color: rgba(243, 243, 243, 0.6) !important;
+}
+
+
+
+
+/*-------------------------------
+
+04. SPACING-N-POSITIONS
+
+--------------------------------*/
+
+.width25 {
+    width: 25% !important;
+}
+
+.width50 {
+    width: 50% !important;
+}
+
+.width75 {
+    width: 75% !important;
+}
+
+.widthFull {
+    width: 100% !important;
+}
+
+.widthAuto {
+    width: auto !important;
+}
+
+.height25 {
+    height: 25% !important;
+}
+
+.height50 {
+    height: 50% !important;
+}
+
+.height75 {
+    width: 75% !important;
+}
+
+.heightFull {
+    height: 100% !important;
+}
+
+.heightAuto {
+    height: auto !important;
+}
+
+.p0 {
+    padding: 0px !important;
+}
+
+.pl0 {
+    padding-left: 0px !important;
+}
+
+.pr0 {
+    padding-right: 0px !important;
+}
+
+.pt0 {
+    padding-top: 0px !important;
+}
+
+.pb0 {
+    padding-bottom: 0px !important;
+}
+
+.p10 {
+    padding: 10px !important;
+}
+
+.pt10 {
+    padding-top: 10px !important;
+}
+
+.m0 {
+    margin: 0px !important;
+}
+
+.ml0 {
+    margin-left: 0px !important;
+}
+
+.mr0 {
+    margin-right: 0px !important;
+}
+
+.mt0 {
+    margin-top: 0px !important;
+}
+
+.mb0 {
+    margin-bottom: 0px !important;
+}
+
+.mAuto {
+    margin: 0 auto !important;
+}
+
+.clear {
+    clear: both !important;
+}
+
+.absolute {
+    position: absolute !important;
+}
+
+.relative {
+    position: relative !important;
+}
+
+.fixed {
+    position: fixed !important;
+}
+
+.borderNone {
+    border: none !important;
+}
+
+
+/*-------------------------------
+
+05. ALIGMENTS
+
+--------------------------------*/
+
+.floatLeft {
+    float: left !important;
+}
+
+.floatRight {
+    float: right !important;
+}
+
+.textLeft {
+    text-align: left !important;
+}
+
+.textRight {
+    text-align: right !important;
+}
+
+.textCenter {
+    text-align: center !important;
+}
+
+.app_header{
+    background:#004989;
+}
+
+.sidemenu_wrapper{
+    width: 100%;
+    height:100vh;
+    h4{
+        color: #004989;
+        font-weight: 400;
+    }
+    .sidemenu_head{
+        text-align: center;
+        padding:20px;
+        border-bottom: 1px solid #f0f2f0;
+       img{
+           width:145px;
+       }
+    }
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            border-bottom: 1px solid #f0f2f0;
+            list-style: none;
+            color: #004989;
+            padding: 15px;
+            background-image: url("../assets/imgs/tech-side-arw.png");
+            background-position: right 20px top 13px;
+            background-repeat: no-repeat;
+            background-size: 10px;
+            ion-icon{
+                font-size: 20px;
+                margin-right:10px;
+                position: relative;
+                top: 3px;
+            }
+        }
+
+        ul{
+            padding-left:20px;
+            li{
+                background-image: none;
+            }
+        }
+    }
+}
+
+.nav_btn{
+    width:50px;
+    height:50px;
+    background-color: transparent;
+    color: #fff;
+    font-size: 25px;
+}
+
+.nav_title{
+    width:calc(100% - 100px);
+    color: #fff;
+    text-align: center;
+    padding: 5px;
+    img{
+        width: 135px;
+    }
+    h4{
+        margin: 0px;
+        font-weight: 400;
+        padding: 7px;
+    }
+}
+
+
+
+.item-native{
+    padding-left: 0px !important;
+}
+
+
+
+
+
+
+

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

src/app/contact/contact.page.html

+<ion-header>
+
+    <ion-menu-toggle>
+        <ion-button>Toggle Menu</ion-button>
+      </ion-menu-toggle>
+
+  <ion-title>
+  Contact
+  </ion-title>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/contact/contact.page.spec.ts

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

src/app/contact/contact.page.ts

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

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

src/app/forgot/forgot.page.html

+<ion-content>
+    <div class="login_wrapper">
+      <div class="login_wrapper_inner">
+          <div class="login_logo_wrapper">
+              <img src="../../assets/imgs/tech-logo-user.png">
+          </div>
+          <h3>FORGOT PASSWORD</h3>
+          <hr>
+          <ion-row>
+            <ion-col>
+                <ion-input placeholder="Email ID" class="username"></ion-input>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col>
+                <ion-button class="signup_btn" expand="block" (click)="goToPage('signin')">SEND LINK</ion-button>
+              </ion-col>
+          </ion-row>
+      </div>
+    </div>
+  </ion-content>
\ No newline at end of file

src/app/forgot/forgot.page.scss

+.login_wrapper{
+    width:100%;
+    .login_wrapper_inner{
+        .login_logo_wrapper{
+            padding-top: 15%;
+            text-align: center;
+            padding-bottom: 10%;
+            img{
+                width:70%;
+            }
+        }
+        width:80%;
+        margin:0 auto;
+        padding-top: 10%;
+        h3{
+            text-align: center;
+            color: #004989;
+            margin: 0px;
+            font-size: 20px;
+            font-weight: 600;
+        }
+        p{
+            text-align:center;
+            color:#797b79;
+        }
+        .button{
+            font-size: 12px;
+            font-weight:500;
+            height: 40px;
+        }
+
+        hr{
+            border:1px solid #004989;
+            height:0px;
+            border-radius: 20px;
+            width: 70px;
+            margin-top: 5px;
+            padding-top: 0px;
+            margin-bottom: 20px;
+        }
+
+        ion-input{
+            border:1px solid #004989; 
+            border-radius:5px;
+            padding-left: 10px !important;
+            color: #babbba;
+
+        }
+
+        .username{
+            background: url("../../assets/imgs/tech-customer.png");
+            background-position: right 10px top 10px;
+            background-size: 17px;
+            background-repeat: no-repeat;
+        }
+        .password{
+            background: url("../../assets/imgs/tech-pass.png");
+            background-position: right 10px top 10px;
+            background-size: 17px;
+            background-repeat: no-repeat;
+        }   
+    }
+}
\ No newline at end of file

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

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

src/app/forgot/forgot.page.ts

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

src/app/home/home.module.ts

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

src/app/home/home.page.html

+<ion-header class="app_header">
+    <ion-menu-toggle>
+  <button class="nav_btn floatLeft">
+      <ion-icon name="menu"></ion-icon>
+  </button>
+  </ion-menu-toggle>
+  <div class="nav_title floatLeft">
+    <img src="../../assets/imgs/tech-logo.png">
+  </div>
+  <button class="nav_btn floatRight">
+      <ion-icon name="list"></ion-icon>
+  </button>
+  <button class="nav_btn floatRight">
+      <ion-icon name="logo-buffer"></ion-icon>
+  </button>
+  <div class="clear"></div>
+</ion-header>
+<ion-content class="">
+  <div class="home_wrapper">
+
+      <div id="map" style="height:100%;"></div>
+    <div *ngIf="visible" [@slideInOut] class="filterContainer">
+      <div (click)="filterToggle()">
+          <button class="float_btn1 float_leftbtn1" ></button>
+          <div class="filter_div1">
+            APPLY
+          </div>
+      </div>
+        
+        <div class="filterContainer_inner">
+          <ul>
+            <li>
+              <img src="../../assets/imgs/carpentry.png">
+              <p>Carpentry</p>
+            </li>
+            <li>
+              <img src="../../assets/imgs/carpentry.png">
+              <p>Carpentry</p>
+            </li>
+            <li>
+              <img src="../../assets/imgs/carpentry.png">
+              <p>Carpentry</p>
+            </li>
+            <li>
+              <img src="../../assets/imgs/carpentry.png">
+              <p>Carpentry</p>
+            </li>
+            <li>
+              <img src="../../assets/imgs/carpentry.png">
+              <p>Carpentry</p>
+            </li>
+            <li>
+                <img src="../../assets/imgs/carpentry.png">
+                <p>Carpentry</p>
+              </li>
+              <li>
+                <img src="../../assets/imgs/carpentry.png">
+                <p>Carpentry</p>
+              </li>
+              <li>
+                <img src="../../assets/imgs/carpentry.png">
+                <p>Carpentry</p>
+              </li>
+              <li>
+                <img src="../../assets/imgs/carpentry.png">
+                <p>Carpentry</p>
+              </li>
+              <li>
+                <img src="../../assets/imgs/carpentry.png">
+                <p>Carpentry</p>
+              </li>
+          </ul>
+        </div>
+    </div>
+  </div>
+<div (click)="filterToggle()">
+    <button class="float_btn float_leftbtn">
+      </button>
+      <div class="filter_div">
+         FILTER
+       </div>
+</div>
+   <button class="float_btn float_rightbtn" (click)="searchToggle()"></button>
+   <div class="home_search_box" *ngIf="searchbarvisible" [@slideSearch]>
+       <input class="" type="text" placeholder="Search">
+       <div class="close_search" (click)="searchToggle()">
+         &times;
+       </div>
+    </div>
+</ion-content>
+

src/app/home/home.page.scss

+.nav_title{
+  width:calc(100% - 150px) !important;
+}
+
+.map{
+  height: 100%;
+}
+.home_wrapper{
+  background: #fff;
+  height:calc(100vh - 50px);
+}
+
+.float_btn{
+  width:50px;
+  height:50px;
+  background-color: #004989;
+  border-radius: 50%;
+  position: fixed;
+  bottom:20px;
+  z-index:2;
+  &:focus{
+    outline: none;
+  }
+}
+
+.float_leftbtn{
+  left:10px;
+  background-image:url("../../assets/imgs/map-filter-icon.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size:27px;
+
+}
+
+.filter_div{
+  color: #004989;
+  position: fixed; 
+  background-color: #fff;
+  font-size: 14px;
+  padding: 5px;
+  z-index: 1;
+  bottom: 32px;
+  left:15px;
+  padding-left: 50px;
+  padding-right: 15px;
+  border-radius: 20px;
+  font-weight: 500;
+}
+
+.filterContainer{
+  
+  position: absolute;
+  bottom: 0px;
+  left:0px;
+  right:0px;
+  z-index: 99;
+  .filterContainer_inner{
+    background: #e7e8e7;
+    ul{
+      margin: 0px;
+      padding:0px;
+      li{
+        list-style: none;
+        display: inline-block;
+        width: calc(100% - 67%);
+        text-align: center;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        border: 1px solid #fff;
+        img{
+          max-width: 100%;
+          height:40px;
+        }
+        p{
+          margin: 0px;
+          font-size: 12px;
+          padding-top: 6px;
+          color: #004989;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  .float_btn1{
+    width:50px;
+    height:50px;
+    background-color: #004989;
+    border-radius: 50%;
+    z-index:2;
+    position: relative;
+    left:10px;
+    &:focus{
+      outline: none;
+    }
+  }
+  
+  .float_leftbtn1{
+    background-image:url("../../assets/imgs/map-filter-icon.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size:27px;
+  
+  }
+
+  .filter_div1{
+    color: #004989;
+    background-color: #fff;
+    font-size: 14px;
+    padding: 5px;
+    z-index: 1;
+    bottom: 20px;
+    left: -30px;
+    position: relative;
+    display: inline-block;
+    padding-left: 50px;
+    padding-right: 15px;
+    border-radius: 20px;
+    font-weight: 500;
+  }
+}
+
+
+
+.float_rightbtn{
+  right:10px;
+  background-image:url("../../assets/imgs/map-search-icon.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size:25px;
+}
+
+
+
+
+.home_search_box{
+  background: #fff;
+  position: fixed;
+  width: calc(100% - 20px);
+  bottom: 20px;
+  height: 50px;
+  border-radius: 30px;
+  margin: 0 auto;
+  right: 10px;
+  z-index: 4;
+  input{
+    width: 100%;
+    height: 100%;
+    border-radius: 30px;
+    border:none;
+    padding-left: 25px;
+    font-size: 18px;
+    padding-right: 60px;
+    &:focus{
+      outline: none;
+    }
+  }
+  .close_search{
+    width:50px;
+    height:50px;
+    background-color: #004989;
+    border-radius: 50%;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    text-align: center;
+    color: #fff;
+    font-size: 32px;
+    line-height: 48px;
+  }
+}
\ No newline at end of file

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

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

src/app/home/home.page.ts

+
+import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
+import {Geolocation} from '@ionic-native/geolocation/ngx';
+import {
+  GoogleMaps,
+  GoogleMap,
+  GoogleMapsEvent,
+  LatLng,
+  MarkerOptions,
+  Marker
+} from "@ionic-native/google-maps";
+declare var google: any;
+import { trigger, transition, animate, style } from '@angular/animations'
+import { Platform } from '@ionic/angular';
+
+
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('200ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ]),
+    trigger('slideSearch', [
+      transition(':enter', [
+        style({transform: 'translateX(100%)'}),
+        animate('200ms ease-in', style({transform: 'translateX(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('200ms ease-out', style({transform: 'translateX(100%)'}))
+      ])
+    ])
+  ]
+})
+export class HomePage {
+
+
+  visible = false;
+  searchbarvisible = false;
+
+  @ViewChild('Map') mapElement: ElementRef;
+  map: any;
+  mapOptions: any;
+  location = {lat: null, lng: null};
+  markerOptions: any = {position: null, map: null, title: null};
+  marker: any;
+  apiKey: any = 'AIzaSyA25LMQmwAEoJO-rpSDjXXPSCKsN7zpcEk'; /*Your API Key*/
+
+  constructor(public zone: NgZone, public geolocation: Geolocation,public platform: Platform) {
+
+    /*load google map script dynamically */
+    const script = document.createElement('script');
+    script.id = 'googleMap';
+    if (this.apiKey) {
+        script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey;
+    } else {
+        script.src = 'https://maps.googleapis.com/maps/api/js?key=';
+    }
+    document.head.appendChild(script);
+    /*Get Current location*/
+    this.geolocation.getCurrentPosition().then((position) =>  {
+        this.location.lat = position.coords.latitude;
+        this.location.lng = position.coords.longitude;
+    });
+    /*Map options*/
+    this.mapOptions = {
+        center: this.location,
+        zoom: 21,
+        mapTypeControl: false
+    };
+    setTimeout(() => {
+        this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
+        /*Marker Options*/
+        this.markerOptions.position = this.location;
+        this.markerOptions.map = this.map;
+        this.markerOptions.title = 'My Location';
+        this.marker = new google.maps.Marker(this.markerOptions);
+    }, 3000);
+
+  }
+
+
+  ngAfterViewInit() {
+
+		this.platform.ready().then( () => {
+
+			this.loadMap();
+		});
+  }
+  
+
+  loadMap() {
+
+    let map = GoogleMaps.create( 'map' );
+  
+    map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
+  
+      let coordinates: LatLng = new LatLng( 36.7783, 119.4179 );
+  
+      let position = {
+        target: coordinates,
+        zoom: 14
+      };
+  
+      map.animateCamera( position );
+  
+      let markerOptions: MarkerOptions = {
+        position: coordinates,
+        icon: "assets/images/marker.png",
+        title: 'Hello California'
+      };
+  
+      const marker = map.addMarker( markerOptions )
+      .then( ( marker: Marker ) => {
+        marker.showInfoWindow();
+      });
+    })
+  }
+
+  filterToggle(){
+    this.visible = !this.visible;
+  }
+
+  searchToggle(){
+    this.searchbarvisible = !this.searchbarvisible;
+  }
+
+
+}

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

src/app/landing/landing.page.html

+<ion-content>
+  <div class="landing_wrapper">
+    <div class="landing_logo_wrapper">
+        <img src="../../assets/imgs/tech-logo-user.png">
+    </div>
+    <div class="landing_content">
+        <ion-grid>
+            <ion-row>
+              <ion-col>
+                <ion-button expand="block" fill="outline"  (click)="goToPage('signup')">NEW USER ? SIGN UP NOW!</ion-button>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                  <ion-button class="signup_btn" expand="block" (click)="goToPage('signin')">SIGNIN</ion-button>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                    <p (click)="goToPage('forgot')">Forgot Password ?</p>
+                </ion-col>
+            </ion-row>
+            <br>
+            <ion-row>
+                <ion-col class="textCenter">
+                    <hr>
+                    <h4>OR SIGN  IN WITH</h4>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col class="textCenter">
+                    <button class="facebook_btn social_btn"><ion-icon name="logo-facebook"></ion-icon><p>Login with Facebook</p></button>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col class="textCenter">
+                    <button class="google_btn social_btn"> <ion-icon name="logo-google"></ion-icon><p>Login with Google</p></button>
+                </ion-col>
+            </ion-row>
+        </ion-grid> 
+    </div>
+  </div>
+  
+</ion-content>

src/app/landing/landing.page.scss

+.landing_wrapper{
+    width:100%;
+    padding:10px;
+    .landing_logo_wrapper{
+        padding-top: 15%;
+        text-align: center;
+        padding-bottom: 10%;
+        img{
+            width:70%;
+        }
+    }
+    .landing_content{
+        .button{
+            font-size: 12px;
+            font-weight:500;
+            height: 40px;
+        }
+        p{
+            text-align:center;
+            color:#797b79;
+        }
+
+        hr{
+            border:1px solid #004989;
+            height:0px;
+            border-radius: 20px;
+        }
+        h4{
+            color: #004989;
+            display: inline-block;
+            position: relative;
+            bottom: 30px;
+            background: #fff;
+            margin: 0px;
+            padding:10px;
+            font-size: 16px;
+            padding-left:15px;
+            padding-right: 15px;
+        }
+
+        .social_btn{
+            height:40px;
+            border-radius: 5px;
+            color: #fff;
+            font-weight: 300;
+            width:70%;
+            ion-icon{
+                font-size: 18px;
+                margin-right: 4px;
+                display: inline-block;
+                position: relative;
+                top: 4px;
+
+            }
+            p{
+                margin: 0px;
+                padding:0px;
+                display: inline-block;
+                color: #fff;
+                line-height: 30px;
+            }
+        }
+        .facebook_btn{
+            background-color: #355999;
+        }
+        .google_btn{
+            background-color: #e15633;
+        }
+    }
+}
\ No newline at end of file

src/app/landing/landing.page.spec.ts

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

src/app/landing/landing.page.ts

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

src/app/list/list.module.ts

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

src/app/list/list.page.html

+<ion-header class="app_header">
+  <ion-menu-toggle>
+<button class="nav_btn floatLeft">
+    <ion-icon name="menu"></ion-icon>
+</button>
+</ion-menu-toggle>
+<div class="nav_title floatLeft">
+  <img src="../../assets/imgs/tech-logo.png">
+</div>
+<button class="nav_btn floatRight">
+    <ion-icon name="logo-buffer"></ion-icon>
+</button>
+<div class="clear"></div>
+</ion-header>
+<ion-content>
+  <div class="list_wrapper">
+    <ul>
+      <li (click)="goToPage('listdetail')">
+        <div class="image"></div>
+        <div class="details">
+          <h4>Demitry Magnokov</h4>
+          <div class="star_ratting">
+              <fieldset class="rating">
+                      <input type="radio" value="5" /><label class = "full" for="secondStar5"></label>
+                      <input type="radio" value="4.5" /><label class="half" for="secondStar4half"></label>
+                      <input type="radio" value="4" /><label class = "full" for="secondStar4"></label>
+                      <input type="radio" value="3.5" /><label class="half" for="secondStar3half"></label>
+                      <input type="radio" value="3" /><label class = "full" for="secondStar3"></label>
+                      <input type="radio" value="2.5" /><label class="half" for="secondStar2half"></label>
+                      <input type="radio" value="2" /><label class = "full" for="secondStar2"></label>
+                      <input type="radio" value="1.5" /><label class="half" for="secondStar1half"></label>
+                      <input type="radio" value="1" /><label class = "full" for="secondStar1"></label>
+                      <input type="radio" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                  </fieldset>
+                  <div class="clear"></div>
+          </div>
+         
+          <h5>unknown Specialist</h5>
+          <p>Year of exp<span>|</span>Distance</p>
+
+        </div>
+        <div class="connect">
+            <ion-icon name="call"></ion-icon><br>
+            <ion-icon name="mail-open"></ion-icon>
+        </div>
+        <div class="clear"></div>
+      </li>
+      <li (click)="goToPage('listdetail')">
+          <div class="image"></div>
+          <div class="details">
+            <h4>Demitry Magnokov</h4>
+            <div class="star_ratting">
+                <fieldset class="rating">
+                        <input type="radio" value="5" /><label class = "full" for="secondStar5"></label>
+                        <input type="radio" value="4.5" /><label class="half" for="secondStar4half"></label>
+                        <input type="radio" value="4" /><label class = "full" for="secondStar4"></label>
+                        <input type="radio" value="3.5" /><label class="half" for="secondStar3half"></label>
+                        <input type="radio" value="3" /><label class = "full" for="secondStar3"></label>
+                        <input type="radio" value="2.5" /><label class="half" for="secondStar2half"></label>
+                        <input type="radio" value="2" /><label class = "full" for="secondStar2"></label>
+                        <input type="radio" value="1.5" /><label class="half" for="secondStar1half"></label>
+                        <input type="radio" value="1" /><label class = "full" for="secondStar1"></label>
+                        <input type="radio" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                    </fieldset>
+                    <div class="clear"></div>
+            </div>
+           
+            <h5>unknown Specialist</h5>
+            <p>Year of exp<span>|</span>Distance</p>
+  
+          </div>
+          <div class="connect">
+              <ion-icon name="call"></ion-icon><br>
+              <ion-icon name="mail-open"></ion-icon>
+          </div>
+          <div class="clear"></div>
+        </li>
+        <li (click)="goToPage('listdetail')">
+            <div class="image"></div>
+            <div class="details">
+              <h4>Demitry Magnokov</h4>
+              <div class="star_ratting">
+                  <fieldset class="rating">
+                          <input type="radio" value="5" /><label class = "full" for="secondStar5"></label>
+                          <input type="radio" value="4.5" /><label class="half" for="secondStar4half"></label>
+                          <input type="radio" value="4" /><label class = "full" for="secondStar4"></label>
+                          <input type="radio" value="3.5" /><label class="half" for="secondStar3half"></label>
+                          <input type="radio" value="3" /><label class = "full" for="secondStar3"></label>
+                          <input type="radio" value="2.5" /><label class="half" for="secondStar2half"></label>
+                          <input type="radio" value="2" /><label class = "full" for="secondStar2"></label>
+                          <input type="radio" value="1.5" /><label class="half" for="secondStar1half"></label>
+                          <input type="radio" value="1" /><label class = "full" for="secondStar1"></label>
+                          <input type="radio" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                      </fieldset>
+                      <div class="clear"></div>
+              </div>
+             
+              <h5>unknown Specialist</h5>
+              <p>Year of exp<span>|</span>Distance</p>
+    
+            </div>
+            <div class="connect">
+                <ion-icon name="call"></ion-icon><br>
+                <ion-icon name="mail-open"></ion-icon>
+            </div>
+            <div class="clear"></div>
+          </li>
+          <li (click)="goToPage('listdetail')">
+              <div class="image"></div>
+              <div class="details">
+                <h4>Demitry Magnokov</h4>
+                <div class="star_ratting">
+                    <fieldset class="rating">
+                            <input type="radio" value="5" /><label class = "full" for="secondStar5"></label>
+                            <input type="radio" value="4.5" /><label class="half" for="secondStar4half"></label>
+                            <input type="radio" value="4" /><label class = "full" for="secondStar4"></label>
+                            <input type="radio" value="3.5" /><label class="half" for="secondStar3half"></label>
+                            <input type="radio" value="3" /><label class = "full" for="secondStar3"></label>
+                            <input type="radio" value="2.5" /><label class="half" for="secondStar2half"></label>
+                            <input type="radio" value="2" /><label class = "full" for="secondStar2"></label>
+                            <input type="radio" value="1.5" /><label class="half" for="secondStar1half"></label>
+                            <input type="radio" value="1" /><label class = "full" for="secondStar1"></label>
+                            <input type="radio" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                        </fieldset>
+                        <div class="clear"></div>
+                </div>
+               
+                <h5>unknown Specialist</h5>
+                <p>Year of exp<span>|</span>Distance</p>
+      
+              </div>
+              <div class="connect">
+                  <ion-icon name="call"></ion-icon><br>
+                  <ion-icon name="mail-open"></ion-icon>
+              </div>
+              <div class="clear"></div>
+            </li>
+            <li (click)="goToPage('listdetail')">
+                <div class="image"></div>
+                <div class="details">
+                  <h4>Demitry Magnokov</h4>
+                  <div class="star_ratting">
+                      <fieldset class="rating">
+                              <input type="radio" value="5" /><label class = "full" for="secondStar5"></label>
+                              <input type="radio" value="4.5" /><label class="half" for="secondStar4half"></label>
+                              <input type="radio" value="4" /><label class = "full" for="secondStar4"></label>
+                              <input type="radio" value="3.5" /><label class="half" for="secondStar3half"></label>
+                              <input type="radio" value="3" /><label class = "full" for="secondStar3"></label>
+                              <input type="radio" value="2.5" /><label class="half" for="secondStar2half"></label>
+                              <input type="radio" value="2" /><label class = "full" for="secondStar2"></label>
+                              <input type="radio" value="1.5" /><label class="half" for="secondStar1half"></label>
+                              <input type="radio" value="1" /><label class = "full" for="secondStar1"></label>
+                              <input type="radio" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                          </fieldset>
+                          <div class="clear"></div>
+                  </div>
+                 
+                  <h5>unknown Specialist</h5>
+                  <p>Year of exp<span>|</span>Distance</p>
+        
+                </div>
+                <div class="connect">
+                    <ion-icon name="call"></ion-icon><br>
+                    <ion-icon name="mail-open"></ion-icon>
+                </div>
+                <div class="clear"></div>
+              </li>
+              <li (click)="goToPage('listdetail')">
+                  <div class="image"></div>
+                  <div class="details">
+                    <h4>Demitry Magnokov</h4>
+                    <div class="star_ratting">
+                        <fieldset class="rating">
+                                <input type="radio" value="5" /><label class = "full" for="secondStar5"></label>
+                                <input type="radio" value="4.5" /><label class="half" for="secondStar4half"></label>
+                                <input type="radio" value="4" /><label class = "full" for="secondStar4"></label>
+                                <input type="radio" value="3.5" /><label class="half" for="secondStar3half"></label>
+                                <input type="radio" value="3" /><label class = "full" for="secondStar3"></label>
+                                <input type="radio" value="2.5" /><label class="half" for="secondStar2half"></label>
+                                <input type="radio" value="2" /><label class = "full" for="secondStar2"></label>
+                                <input type="radio" value="1.5" /><label class="half" for="secondStar1half"></label>
+                                <input type="radio" value="1" /><label class = "full" for="secondStar1"></label>
+                                <input type="radio" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                            </fieldset>
+                            <div class="clear"></div>
+                    </div>
+                   
+                    <h5>unknown Specialist</h5>
+                    <p>Year of exp<span>|</span>Distance</p>
+          
+                  </div>
+                  <div class="connect">
+                      <ion-icon name="call"></ion-icon><br>
+                      <ion-icon name="mail-open"></ion-icon>
+                  </div>
+                  <div class="clear"></div>
+                </li>
+
+    </ul>
+  </div>
+
+</ion-content>

src/app/list/list.page.scss

+
+.list_wrapper{
+    padding:5px;
+    ul{
+        padding:5px;
+        margin:0px;
+        li{
+            list-style: none;
+            background: #f6f6f6;
+            width:100%;
+            padding:10px;
+            margin-bottom: 5px;
+            .image{
+                width:80px;
+                height:80px;
+                background: #a8a8a8;
+                float: left;
+                img{
+                    width:100%;
+                    height:100%;
+                    object-fit: cover;
+                    object-position: center;
+                }
+            }
+            .details{
+                float: left;
+                width: calc(100% - 130px);
+                padding-left:10px;
+                h4{
+                    margin:0px;
+                    padding:0px;
+                    font-size:15px;
+                    color: #004989;
+                    padding-bottom:1px;
+                }
+                h5{
+                    padding:0px;
+                    margin:0px;
+                    color: #000;
+                    font-size: 12px;
+                    padding-top: 2px;
+                }
+                p{
+                    padding:0px;
+                    margin:0px;
+                    color: #a8a8a8;
+                    font-size: 12px;
+                    padding-top: 4px;
+                    span{
+                        margin-left: 5px;
+                        margin-right: 5px;
+                    }
+                }
+                .star_ratting{
+                    padding-bottom: 1px;
+                    span{
+                        float: right;
+                        color: #000000;
+                    }
+                    .rating { 
+                        border: none;
+                        float: left;
+                        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: #ddd; 
+                       float: right; 
+                       margin:0px;
+                      }
+                      
+                      /***** 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;  } 
+                }
+            }
+
+            .connect{
+                width:50px;
+                float:right;
+                ion-icon{
+                    color: #004989;
+                    font-size: 24px;
+                    padding: 5px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

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

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

src/app/list/list.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-list',
+  templateUrl: 'list.page.html',
+  styleUrls: ['list.page.scss']
+})
+export class ListPage implements OnInit {
+  private selectedItem: any;
+
+  public items: Array<{ title: string; note: string; icon: string }> = [];
+  constructor(private router: Router,private route: ActivatedRoute) {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  ngOnInit() {
+  }
+  // add back when alpha.4 is out
+  // navigate(item) {
+  //   this.router.navigate(['/list', JSON.stringify(item)]);
+  // }
+
+
+}

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

src/app/listdetail/listdetail.page.html

+<ion-header class="app_header">
+    <ion-menu-toggle>
+  <button class="nav_btn floatLeft">
+      <ion-icon name="menu"></ion-icon>
+  </button>
+  </ion-menu-toggle>
+  <div class="nav_title floatLeft">
+    <img src="../../assets/imgs/tech-logo.png">
+  </div>
+  <button class="nav_btn floatRight">
+      <ion-icon name="logo-buffer"></ion-icon>
+  </button>
+  <div class="clear"></div>
+</ion-header>
+<ion-content>
+  <div class="list_detail">
+    <div class="order_online floatRight">
+        <div class="floatLeft">Online</div>
+        <ion-toggle class="floatLeft"></ion-toggle>
+        <div class="clear"></div>
+    </div>
+    <div class="clear"></div>
+    <div class="list_main_image">
+    </div>
+    <h4>John Kory</h4>
+    <div class="star_ratting">
+        <fieldset class="rating">
+          <input type="radio" value="5" /><label class = "full" for="secondStar5"></label>
+          <input type="radio" value="4.5" /><label class="half" for="secondStar4half"></label>
+          <input type="radio" value="4" /><label class = "full" for="secondStar4"></label>
+          <input type="radio" value="3.5" /><label class="half" for="secondStar3half"></label>
+          <input type="radio" value="3" /><label class = "full" for="secondStar3"></label>
+          <input type="radio" value="2.5" /><label class="half" for="secondStar2half"></label>
+          <input type="radio" value="2" /><label class = "full" for="secondStar2"></label>
+          <input type="radio" value="1.5" /><label class="half" for="secondStar1half"></label>
+          <input type="radio" value="1" /><label class = "full" for="secondStar1"></label>
+          <input type="radio" value="0.5" /><label class="half" for="secondStarhalf"></label>
+        </fieldset>
+        <div class="clear"></div>
+    </div>
+    <ion-row>
+      <ion-col col><p><strong>Type</strong></p></ion-col>
+      <ion-col col class="textRight"><p>65GTYJ</p></ion-col>
+    </ion-row>
+    <ion-row>
+        <ion-col col><p><strong>Address</strong></p></ion-col>
+        <ion-col col class="textRight"><p>moscot Villa<br>la verite, Washington DC</p></ion-col>
+      </ion-row>
+      <ion-row>
+          <ion-col col><p><strong>Experience</strong></p></ion-col>
+          <ion-col col class="textRight"><p>3 Years</p></ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col col><p><strong>Distance</strong></p></ion-col>
+            <ion-col col class="textRight"><p>9.5 miles</p></ion-col>
+          </ion-row>
+          <hr>
+          <ion-row>
+              <ion-col col><p><strong>Status</strong></p></ion-col>
+              <ion-col col class="textRight"><p>I am available.</p></ion-col>
+            </ion-row>
+            <hr>
+          <ion-row>
+              <ion-col col><h3><strong>SUBSCRIPTION DETAILS</strong></h3></ion-col>
+            </ion-row>
+            <hr>
+            <ion-row>
+                <ion-col col><p><strong>Subscription Status</strong></p></ion-col>
+                <ion-col col class="textRight"><p>Active</p></ion-col>
+              </ion-row>
+              <ion-row>
+                  <ion-col col><p><strong>Start Date</strong></p></ion-col>
+                  <ion-col col class="textRight"><p>22-06-2019</p></ion-col>
+                </ion-row>
+                <ion-row>
+                    <ion-col col><p><strong>End Date</strong></p></ion-col>
+                    <ion-col col class="textRight"><p>24-06-2019</p></ion-col>
+                  </ion-row>
+                  <ion-row>
+                      <ion-col col><p><strong>Day Remain</strong></p></ion-col>
+                      <ion-col col class="textRight"><p>63</p></ion-col>
+                    </ion-row>
+                    <ion-row>
+                        <ion-col col><p><strong>Amount Paid</strong></p></ion-col>
+                        <ion-col col class="textRight"><p>1800</p></ion-col>
+                      </ion-row>
+                    
+            <hr>
+            <ion-row>
+                <ion-col>
+                  <ion-button class="signup_btn" color="dark" expand="block">UPDATE ACCOUNT</ion-button>
+                </ion-col>
+            </ion-row>
+            <hr>
+            <ion-row>
+                <ion-col>
+                  <ion-button class="signup_btn" expand="block">SUPPORT</ion-button>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                  <ion-button class="signup_btn" expand="block">REVIEWS</ion-button>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                  <ion-button class="signup_btn" expand="block">TECHNOBEAT NEWS</ion-button>
+                </ion-col>
+            </ion-row>
+
+  </div>
+
+
+</ion-content>

src/app/listdetail/listdetail.page.scss

+.list_detail{
+    width:100%;
+    padding:20px;
+    hr{
+        border:1px solid #a8a8a8;
+        height: 0px;
+        border-top:none;
+    }
+
+    .order_online{
+        div{
+            padding: 10px;
+            padding-right: 0px;
+        }
+    }
+    .list_main_image{
+        width:100px;
+        height:100px;
+        border-radius: 0%;
+        object-fit: cover;
+        object-position: center;
+        background: #a8a8a8;
+        margin: 0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 0%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+
+    .star_ratting{
+        padding-bottom: 20px;
+        text-align: center;
+        span{
+            float: right;
+            color: #000000;
+        }
+        .rating { 
+            border: none;
+            width: 90px;
+            margin: 0 auto;
+            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: #ddd; 
+           float: right; 
+           margin:0px;
+          }
+          
+          /***** 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;  } 
+    }
+    h4{
+        text-align: center;
+        font-weight: 400;
+        font-size: 25px;
+        color: #004989;
+    }
+    p{
+        padding:0px;
+        margin:0px;
+        font-size: 14px;
+        strong{
+            font-weight: 500;
+            color: #004989;
+        }
+    }
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            padding-bottom: 10px;
+            p{
+                color: rgba(0,0,0,0.54);
+                padding-left:10px;
+                font-weight: 500;
+            }
+        }
+    }
+    h3{
+        text-align: center;
+        color: #004989;
+        margin: 0px;
+        font-size: 20px;
+        font-weight: 600;
+    }
+    
+    hr{
+        border:1px solid #004989;
+        height:0px;
+        border-radius: 20px;
+        width: 100%;
+        margin-top:20px;
+        padding-top: 0px;
+        margin-bottom: 20px;
+    }
+
+    .review_wrapper{
+        ul{
+            margin:0px;
+            padding:0px;
+            li{
+                list-style: none;
+                border-bottom: 1px solid #f6f6f6;
+                margin-bottom: 15px;
+                padding-bottom: 15px;
+                .review_circle{
+                    width: 40px;
+                    height:40px;
+                    border-radius: 50%;
+                    background: #a8a8a8;
+                    float: left;
+                    img{
+                        width:100%;
+                        height:100%;
+                        object-position: center;
+                        object-fit: cover;
+                    }
+                }
+                .review_name{
+                    float: left;
+                    width: calc(100% - 40px);
+                    padding-left: 10px;
+                    h5{
+                        margin:0px;
+                        padding:0px;
+                        color: #004989;
+                        font-size: 16px;
+                    }
+                    .star_ratting{
+                        padding-bottom:0px;
+                        text-align: center;
+                        span{
+                            float: right;
+                            color: #000000;
+                        }
+                        .rating { 
+                            border: none;
+                            padding:0px;
+                            float: left;
+                            width: 85px;
+                          }
+                          
+                          .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: #ddd; 
+                           float: right; 
+                           margin:0px;
+                          }
+                          
+                          /***** CSS Magic to Highlight Stars on Hover *****/
+                          
+                          .rating > input:checked ~ label, /* show gold star when clicked */
+                          .rating:not(:checked) > label:hover, /* hover current star */
+                          .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                          
+                          .rating > input:checked + label:hover, /* hover current star when changing rating */
+                          .rating > input:checked ~ label:hover,
+                          .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                          .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+                    }
+                }
+                p{
+                    padding-left:0px;
+                    padding-top: 10px;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/listdetail/listdetail.page.spec.ts

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

src/app/listdetail/listdetail.page.ts

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

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

src/app/signin/signin.page.html

+<ion-content>
+  <div class="login_wrapper">
+    <div class="login_wrapper_inner">
+        <div class="login_logo_wrapper">
+            <img src="../../assets/imgs/tech-logo-user.png">
+        </div>
+        <h3>LOGIN</h3>
+        <hr>
+        <ion-row>
+          <ion-col>
+              <ion-input placeholder="Username" class="username"></ion-input>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+            <ion-input placeholder="Password" class="password"></ion-input>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col>
+              <ion-button class="signup_btn" expand="block" (click)="goToPage('listdetail')">SIGNIN</ion-button>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col>
+                <p (click)="goToPage('forgot')">Forgot Password ?</p>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+              <p>Not subscribed ?</p>
+          </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-button color="danger" expand="block">Subscribe here</ion-button>
+        </ion-col>
+    </ion-row>
+    </div>
+  </div>
+</ion-content>

src/app/signin/signin.page.scss

+.login_wrapper{
+    width:100%;
+    .login_wrapper_inner{
+        .login_logo_wrapper{
+            padding-top: 15%;
+            text-align: center;
+            padding-bottom: 10%;
+            img{
+                width:70%;
+            }
+        }
+        width:80%;
+        margin:0 auto;
+        padding-top: 10%;
+        h3{
+            text-align: center;
+            color: #004989;
+            margin: 0px;
+            font-size: 20px;
+            font-weight: 600;
+        }
+        p{
+            text-align:center;
+            color:#797b79;
+        }
+        .button{
+            font-size: 12px;
+            font-weight:500;
+            height: 40px;
+        }
+
+        hr{
+            border:1px solid #004989;
+            height:0px;
+            border-radius: 20px;
+            width: 70px;
+            margin-top: 5px;
+            padding-top: 0px;
+            margin-bottom: 20px;
+        }
+
+        ion-input{
+            border:1px solid #004989; 
+            border-radius:5px;
+            padding-left: 10px !important;
+            color: #babbba;
+
+        }
+
+        .username{
+            background: url("../../assets/imgs/tech-customer.png");
+            background-position: right 10px top 10px;
+            background-size: 17px;
+            background-repeat: no-repeat;
+        }
+        .password{
+            background: url("../../assets/imgs/tech-pass.png");
+            background-position: right 10px top 10px;
+            background-size: 17px;
+            background-repeat: no-repeat;
+        }   
+    }
+}
\ No newline at end of file

src/app/signin/signin.page.spec.ts

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

src/app/signin/signin.page.ts

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

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

src/app/signup/signup.page.html

+<ion-content>
+    <div class="signup_wrapper">
+      <div class="signup_wrapper_inner">
+          <div class="signup_logo_wrapper">
+              <img src="../../assets/imgs/tech-logo-user.png">
+          </div>
+          <h3>SIGN UP</h3>
+          <hr>
+          <ion-row>
+            <ion-col>
+                <ion-input placeholder="Name" class="username"></ion-input>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col>
+                  <ion-input placeholder="Email" class="username"></ion-input>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                    <ion-input placeholder="Mobile Number" class="username"></ion-input>
+                </ion-col>
+              </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-input placeholder="Password" class="password"></ion-input>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col>
+                <ion-input placeholder="Confirm Password" class="password"></ion-input>
+              </ion-col>
+            </ion-row>
+          <ion-row>
+              <ion-col>
+                <ion-button class="signup_btn" expand="block" (click)="goToPage('home')">SIGNUP</ion-button>
+              </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col>
+                  <p (click)="goToPage('forgot')">Forgot Password ?</p>
+              </ion-col>
+          </ion-row>
+      </div>
+    </div>
+  </ion-content>
\ No newline at end of file

src/app/signup/signup.page.scss

+.signup_wrapper{
+    width:100%;
+    .signup_wrapper_inner{
+        .signup_logo_wrapper{
+            padding-top: 15%;
+            text-align: center;
+            padding-bottom: 10%;
+            img{
+                width:70%;
+            }
+        }
+        width:80%;
+        margin:0 auto;
+        padding-top: 10%;
+        h3{
+            text-align: center;
+            color: #004989;
+            margin: 0px;
+            font-size: 20px;
+            font-weight: 600;
+        }
+        p{
+            text-align:center;
+            color:#797b79;
+        }
+        .button{
+            font-size: 12px;
+            font-weight:500;
+            height: 40px;
+        }
+
+        hr{
+            border:1px solid #004989;
+            height:0px;
+            border-radius: 20px;
+            width: 70px;
+            margin-top: 5px;
+            padding-top: 0px;
+            margin-bottom: 20px;
+        }
+
+        ion-input{
+            border:1px solid #004989; 
+            border-radius:5px;
+            padding-left: 10px !important;
+            color: #babbba;
+
+        }
+
+        .username{
+            background: url("../../assets/imgs/tech-customer.png");
+            background-position: right 10px top 10px;
+            background-size: 17px;
+            background-repeat: no-repeat;
+        }
+        .password{
+            background: url("../../assets/imgs/tech-pass.png");
+            background-position: right 10px top 10px;
+            background-size: 17px;
+            background-repeat: no-repeat;
+        }   
+    }
+}
\ No newline at end of file

src/app/signup/signup.page.spec.ts

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

src/app/signup/signup.page.ts

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

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

src/app/support/support.page.html

+<ion-header class="app_header">
+  <ion-menu-toggle>
+<button class="nav_btn floatLeft">
+    <ion-icon name="menu"></ion-icon>
+</button>
+</ion-menu-toggle>
+<div class="nav_title floatLeft">
+  <img src="../../assets/imgs/tech-logo.png">
+</div>
+<button class="nav_btn floatRight">
+    <ion-icon name="logo-buffer"></ion-icon>
+</button>
+<div class="clear"></div>
+</ion-header>
+<ion-content>
+  <div class="support_wrapper">
+    <p>
+      Lorem Ipsum is simply dummy text of the printing
+       and typesetting industry. Lorem Ipsum has been the industry's
+        standard dummy text ever since the 1500s, when an unknown printer
+         took a galley of type and scrambled it to make a type specimen book.
+          It has survived not only five centuries, but also the leap into electronic typesetting,
+           remaining essentially unchanged. It was popularised in the 1960s with the release of 
+           Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
+           software like Aldus PageMaker including versions of Lorem Ipsum.
+    </p>
+    <br>
+    <h3>SUPPORT</h3>
+    <hr>
+    <div class="support_form">
+      <div class="row">
+          <ion-input value="+6598236874"></ion-input>
+      </div>
+      <div class="row">
+        <ion-input value="[email protected]"></ion-input>
+      </div>
+      <div class="row">
+        <textarea class="address" rows="4" placeholder="Address">
+
+        </textarea>
+      </div>
+      <div class="row">
+        <textarea class="message" rows="4" placeholder="Message">
+          
+        </textarea>
+      </div>
+      <div class="row">
+        <ion-button class="signup_btn" expand="block">SEND</ion-button>
+      </div>
+      <div class="row">
+        <div class="blank_image">
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</ion-content>

src/app/support/support.page.scss

+.support_wrapper{
+    width:100%;
+    padding:10px;
+    p{
+        margin:0px;
+        color: #a8a8a8;
+        border-bottom:1px solid #a8a8a8;
+        padding:15px;
+        line-height: 20px;
+        text-align: justify;
+        font-weight: 300;
+        font-size: 14px;
+
+    }
+
+    h3{
+        text-align: center;
+        color: #004989;
+        margin: 0px;
+        font-size: 20px;
+        font-weight: 600;
+    }
+    
+    hr{
+        border:1px solid #004989;
+        height:0px;
+        border-radius: 20px;
+        width: 100%;
+        margin-top:8px;
+        padding-top: 0px;
+        margin-bottom: 20px;
+    }
+
+    .row{
+        padding-bottom: 10px;
+        ion-input{
+            border:1px solid #a8a8a8;
+        }
+        textarea{
+            width: 100%;
+            border:1px solid #a8a8a8;
+        }
+
+        .blank_image{
+            background-color: #f6f6f6;
+            background-image: url("../../assets/imgs/img.png");
+            background-position: center;
+            background-repeat: no-repeat;
+            height: 200px;
+            border:1px solid #a8a8a8;
+
+        }
+    }
+    
+
+}
\ No newline at end of file

src/app/support/support.page.spec.ts

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

src/app/support/support.page.ts

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

src/assets/shapes.svg

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

src/environments/environment.prod.ts

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

src/environments/environment.ts

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

src/global.scss

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

src/index.html

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

src/karma.conf.js

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

src/main.ts

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

src/polyfills.ts

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

src/test.ts

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

src/theme/variables.scss

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

src/tsconfig.app.json

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

src/tsconfig.spec.json

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

src/tslint.json

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

src/zone-flags.ts

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

tsconfig.json

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

tslint.json

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