20-06-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": "app",
+  "newProjectRoot": "projects",
+  "projects": {
+    "app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "www",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/theme/variables.scss"
+              },
+              {
+                "input": "src/global.scss"
+              },
+              {
+                "input": "src/app/app.scss"
+              }
+            ],
+            "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>Eduhealth</name>
+    <description />
+    <author email="[email protected]" href="http://ionicframework.com/">Techware Software Solutions</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" />
+    <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": "eduhealth",
+  "integrations": {
+    "cordova": {}
+  },
+  "type": "angular"
+}

package.json

+{
+  "name": "eduhealth",
+  "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.1",
+    "@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/splash-screen": "^5.0.0",
+    "@ionic-native/status-bar": "^5.0.0",
+    "@ionic/angular": "^4.1.0",
+    "cordova-android": "^7.1.4",
+    "cordova-plugin-device": "^2.0.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",
+    "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.3.0",
+    "tslint": "~5.17.0",
+    "typescript": "~3.1.6"
+  },
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-ionic-webview": {
+        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
+      },
+      "cordova-plugin-ionic-keyboard": {}
+    },
+    "platforms": [
+      "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/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'login',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadChildren: './home/home.module#HomePageModule'
+  },
+  {
+    path: 'list',
+    loadChildren: './list/list.module#ListPageModule'
+  },
+  { 
+    path: 'login',
+    loadChildren: './login/login.module#LoginPageModule'
+  },
+  { 
+    path: 'signup',
+    loadChildren: './signup/signup.module#SignupPageModule' 
+  },
+  { 
+    path: 'details',
+    loadChildren: './details/details.module#DetailsPageModule'
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.html

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

src/app/app.component.spec.ts

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

src/app/app.component.ts

+import { Component } from '@angular/core';
+
+import { Platform } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+  public appPages = [
+    {
+      title: 'Home',
+      url: '/home',
+      icon: 'home'
+    },
+    {
+      title: 'List',
+      url: '/list',
+      icon: 'list'
+    }
+  ];
+
+  constructor(
+    private platform: Platform,
+    private splashScreen: SplashScreen,
+    private statusBar: StatusBar
+  ) {
+    this.initializeApp();
+  }
+
+  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';
+
+@NgModule({
+  declarations: [AppComponent],
+  entryComponents: [],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    BrowserAnimationsModule
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    { 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;
+}
+
+
+
+.nav_btn{
+    width:50px;
+    height:50px;
+    background-color: transparent;
+    color: #fff;
+    font-size: 25px;
+}
+
+.nav_title{
+    width: calc(100% - 50px);
+    color: #292929;
+    padding: 15px;
+    font-weight: 400;
+    img{
+        width: 135px;
+    }
+    h4{
+        margin: 0px;
+        font-weight: 400;
+        padding:0px;
+        font-size: 28px;
+    }
+}
+
+.nav_btn{
+    width: 50px;
+    height: 60px;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background-size: 20px !important;
+}
+
+
+.nav_back{
+    background: url("../assets/imgs/asset_back.png");
+}
+
+.nav_more{
+    background: url("../assets/imgs/asset_more.png");
+}
+
+
+
+.item-native{
+    padding-left: 0px !important;
+}
+
+
+.header-md:after{
+    background-image: none !important;
+}
+
+.header-ios:after{
+    background-image: none !important;
+}
+
+.button-native{
+    border-radius: 0px !important;
+   }
+
+
+
+
+
+
+

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

src/app/details/details.page.html

+<ion-header>
+    <button class="nav_btn nav_back floatLeft">
+        <ion-back-button>
+        </ion-back-button>
+    </button>
+    <div class="nav_title floatLeft">
+      <h4>Student Profile</h4>
+    </div>
+    <button class="nav_btn nav_more floatLeft" (click)="popToggle()">
+    </button>
+    <div class="clear"></div>
+</ion-header>
+<ion-content>
+  <div class="detail_wrapper">
+    <div class="detail_circle_img">
+      <img src="../../assets/imgs/asset_img1.png">
+    </div>
+    <h4>Arnold Schelz</h4>
+    <div class="detail_grid">
+        <ion-row>
+            <ion-col col>
+              <p>Student Number</p>
+              <h3>2455</h3>
+            </ion-col>
+            <ion-col col>
+                <p>Graduation Year</p>
+                <h3>2019</h3>
+            </ion-col>
+            <ion-col col>
+                <p>Grade</p>
+                <h3>1</h3>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col col>
+                <p>DOB</p>
+                <h3>13-05-1996</h3>
+              </ion-col>
+              <ion-col col>
+                  <p>School Name</p>
+                  <h3>EU School</h3>
+              </ion-col>
+              <ion-col col>
+                  <p>Gender</p>
+                  <h3>Male</h3>
+              </ion-col>
+            </ion-row>
+    </div>
+    <div class="detail_listing">
+      <ul>
+        <li>
+          <img src="../../assets/imgs/m1.png">
+          <p>Students<br> Profile</p>
+        </li>
+        <li>
+            <img src="../../assets/imgs/m2.png">
+            <p>Health care<br> form</p>
+          </li>
+          <li>
+              <img src="../../assets/imgs/m3.png">
+              <p>Medication <br>Authorization</p>
+            </li>
+            <li>
+                <img src="../../assets/imgs/m4.png">
+                <p>Treatment<br> Authorization</p>
+              </li>
+              <li>
+                  <img src="../../assets/imgs/m5.png">
+                  <p>Medication<br>Trackings</p>
+                </li>
+                <li>
+                    <img src="../../assets/imgs/m6.png">
+                    <p>Treatment<br>Trackings</p>
+                  </li>
+                  <li>
+                      <img src="../../assets/imgs/m7.png">
+                      <p>Screenings</p>
+                    </li>
+                    <li>
+                        <img src="../../assets/imgs/m1.png">
+                        <p>Chart Visits</p>
+                      </li>
+                      <li>
+                          <img src="../../assets/imgs/m8.png">
+                          <p>Immunizations</p>
+                        </li>
+                        <li>
+                            <img src="../../assets/imgs/m9.png">
+                            <p>Medical History</p>
+                          </li>
+                          <li>
+                              <img src="../../assets/imgs/m10.png">
+                              <p>Health History</p>
+                            </li>
+      </ul>
+    </div>
+    
+  </div>
+
+  <div class="custom_popover" *ngIf="isToggle" [@slideInOut] (click)="popToggle()">
+    <div class="popover_inner">
+      <ul>
+        <li>
+          <img src="../../assets/imgs/asset_parent_request.png">
+          <p>Parent Requests</p>
+          <div class="clear"></div>
+        </li>
+        <li>
+          <img src="../../assets/imgs/asset_change_request.png">
+          <p>Change Requests</p>
+          <div class="clear"></div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</ion-content>

src/app/details/details.page.scss

+.nav_title{
+    width: calc(100% - 100px);
+    padding-left: 0px;
+}
+
+.detail_wrapper{
+    width:100%;
+    padding:10px;
+
+    .detail_circle_img{
+        width:100px;
+        height:100px;
+        margin: 0 auto;
+        border-radius: 50%;
+        border:2px solid #1b4077;
+        img{
+            width:100%;
+            height:100%;
+            object-position: center;
+            object-fit:cover;
+            border-radius: 50%;
+        }
+    }
+    h4{
+        text-align: center;
+        color: #0d0d0d;
+        font-weight: 600;
+    }
+
+    .detail_grid{
+        padding-top: 15px;
+        ion-col{
+            background: #e5edfa;
+            border: 1px solid #fff;
+            padding:10px;
+            p{
+                margin:0px;
+                padding:0px;
+                color: #0d0d0d;
+                font-weight: 300;
+                padding-bottom: 5px;
+                font-size: 13px;
+            }
+
+            h3{
+                margin:0px;
+                padding:0px;
+                color: #0d0d0d;
+                font-size: 14px;
+            }
+        }
+    }
+    .detail_listing{
+        padding-top:25px;
+        ul{
+            margin: 0px;
+            padding:0px;
+            li{
+                display: inline-block;
+                width: calc(100% - 67%);
+                text-align: center;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                img{
+                    width:50px;
+                }
+                p{
+                    margin:0px;
+                    color: #0d0d0d;
+                    text-align: center;
+                    padding-top: 5px;
+                }
+            }
+        }
+    }
+}
+
+.custom_popover{
+    position: fixed;
+    background:rgba(0,0,0,0.6);
+    top:0px;
+    left:0px;
+    right:0px;
+    bottom: 0px;
+    z-index: 999;
+    .popover_inner{
+        background: #fff;
+        position: absolute;
+        right:20px;
+        top: 60px;
+        ul{
+            padding:0px;
+            margin:0px;
+            li{
+                list-style: none;
+                padding: 10px;
+                img{
+                    width: 30px;
+                    float: left;
+                }
+                p{
+                    float: left;
+                    margin: 0px;
+                    padding: 6px;
+                }
+            }
+
+        }
+    }
+}
\ No newline at end of file

src/app/details/details.page.spec.ts

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

src/app/details/details.page.ts

+import {Component,OnInit, ElementRef, NgZone, ViewChild} from '@angular/core';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.page.html',
+  styleUrls: ['./details.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(-100%)'}),
+        animate('100ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('100ms ease-out', style({transform: 'translateY(-100%)'}))
+      ])
+    ])
+  ]
+})
+export class DetailsPage implements OnInit {
+  navCtrl: any;
+  isToggle = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+
+  popToggle(){
+    this.isToggle = !this.isToggle;
+  }
+}

src/app/home/home.module.ts

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

src/app/home/home.page.html

+<ion-header>
+  <div class="nav_title">
+    <h4>Students Details</h4>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="list_wrapper">
+    <ul>
+      <li (click)="goToPage('details')">
+        <div class="image_div">
+            <img src="../../assets/imgs/asset_img1.png">
+        </div>
+        <div class="other_details">
+          <div class="col_div">
+            <p>First Name</p>
+            <h3><strong>Kaustav Saha</strong></h3>
+            <p>Last Name</p>
+            <h3>Saha</h3>
+          </div>
+          <div class="col_div borderNone">
+              <p>Student Number</p>
+              <h3>6984</h3>
+            
+              <p>School Name</p>
+              <h3>indian Public School</h3>
+          </div>
+          <div class="clear"></div>
+        </div>
+        <div class="clear"></div>
+      </li>
+      <li (click)="goToPage('details')">
+          <div class="image_div">
+              <img src="../../assets/imgs/asset_img2.png">
+          </div>
+          <div class="other_details">
+            <div class="col_div">
+              <p>First Name</p>
+              <h3><strong>Kaustav Saha</strong></h3>
+              <p>Last Name</p>
+              <h3>Saha</h3>
+            </div>
+            <div class="col_div borderNone">
+                <p>Student Number</p>
+                <h3>6984</h3>
+              
+                <p>School Name</p>
+                <h3>indian Public School</h3>
+            </div>
+            <div class="clear"></div>
+          </div>
+          <div class="clear"></div>
+        </li>
+        <li (click)="goToPage('details')">
+            <div class="image_div">
+                <img src="../../assets/imgs/asset_img3.png">
+            </div>
+            <div class="other_details">
+              <div class="col_div">
+                <p>First Name</p>
+                <h3><strong>Kaustav Saha</strong></h3>
+                <p>Last Name</p>
+                <h3>Saha</h3>
+              </div>
+              <div class="col_div borderNone">
+                  <p>Student Number</p>
+                  <h3>6984</h3>
+                
+                  <p>School Name</p>
+                  <h3>indian Public School</h3>
+              </div>
+              <div class="clear"></div>
+            </div>
+            <div class="clear"></div>
+          </li>
+    </ul>
+  </div>
+   
+</ion-content>

src/app/home/home.page.scss

+.list_wrapper{
+  padding: 15px;
+  padding-top: 0px;
+  ul
+  {
+    padding: 0px;
+    margin: 0px;
+    li{
+      list-style: none;
+      border-left:2px solid #1b4077;
+      background: #e8effa;
+      margin-bottom: 10px;
+      padding:10px;
+      .image_div{
+        width:70px;
+        height:70px;
+        border:2px solid #1b4077;  
+        border-radius: 50%;
+        float: left;
+        img{
+          width:100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
+          border-radius: 50%;
+        }
+      }
+      .other_details{
+        width:calc(100% - 70px);
+        float: right;
+        
+        .col_div{
+          width:50%;
+          float: left;
+          padding-left: 10px;
+          border-right:1px solid #cacfd8;
+          p{
+            margin:0px;
+            padding:0px;
+            color: #605f5f;
+            font-weight: 300;
+            font-size: 13px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          h3{
+            margin:0px;
+            padding:0px;
+            font-weight: 400;
+            font-size: 15px;
+            color: #0d0d0d;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 5px;
+          }
+        }
+      }
+    }
+  }
+}
\ 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 } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+
+  constructor(private router: Router,private route: ActivatedRoute) {}
+
+
+  
+  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>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>
+      List
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let item of items">
+      <ion-icon [name]="item.icon" slot="start"></ion-icon>
+      {{item.title}}
+      <div class="item-note" slot="end">
+        {{item.note}}
+      </div>
+    </ion-item>
+  </ion-list>
+  <!--
+    <div *ngIf="selectedItem" padding>
+      You navigated here from <b>{{selectedItem.title }}</b>
+    </div>
+  -->
+</ion-content>

src/app/list/list.page.scss

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

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

src/app/login/login.page.html

+<ion-content>
+  <div class="login_wrapper">
+    <div class="login_top_div">
+      <img src="../../assets/imgs/asset_logo_theme.png">
+      <h3>Welcome Back</h3>
+      <p>Sigin in to Continue</p>
+    </div>
+    <div class="login_form">
+      <div class="row">
+          <ion-input placeholder="[email protected]" type="email"></ion-input>
+      </div>
+      <div class="row">
+          <ion-input placeholder="Password" type="password"></ion-input>
+      </div>
+      <br>
+      <div class="row">
+          <ion-button expand="block" (click)="goToPage('home')">Login</ion-button>
+      </div>
+      <div class="row">
+        <p>Forgot Password</p>
+        </div>
+    </div>
+  </div>
+</ion-content>
+<ion-footer class="textCenter">
+  <div class="log_btn_footer" (click)="istoggle()">
+    SIGN UP
+  </div>
+</ion-footer>
+
+
+
+<div class="signup_div" *ngIf="isShow" [@slideInOut]>
+  <ion-content>
+    <div class="login_wrapper">
+      <div class="login_top_div">
+        <h3>Welcome Back</h3>
+        <p>Sigin up to Continue</p>
+      </div>
+      <div class="login_form">
+        <div class="row">
+            <ion-input placeholder="Name" type="text"></ion-input>
+        </div>
+        <div class="row">
+            <ion-input placeholder="Mail ID" type="text"></ion-input>
+        </div>
+        <div class="row">
+          <ion-input placeholder="Mobile Number" type="number"></ion-input>
+      </div>
+      <div class="row">
+          <ion-radio-group>
+            <div class="radio_div textCenter">
+                <ion-radio value="Male"></ion-radio><ion-label>Male</ion-label>
+                <ion-radio value="Female"></ion-radio><ion-label>Female</ion-label>
+            </div>
+          </ion-radio-group>
+      </div>
+      <div class="row">
+        <ion-input placeholder="Password" type="password"></ion-input>
+    </div>
+      <br>
+        <div class="row">
+            <ion-button expand="block" (click)="istoggle()">Signup</ion-button>
+        </div>
+      </div>
+    </div>
+  </ion-content>
+  <ion-footer class="textCenter">
+    <div class="log_btn_footer" (click)="istoggle()">
+      SIGN IN
+    </div>
+  </ion-footer>
+</div>

src/app/login/login.page.scss

+.login_wrapper{
+    width: 100%;
+    .login_top_div{
+        background: url("../../assets/imgs/asset_background.png");
+        background-position: center;
+        background-size: 80%;
+        padding-top: 40px;
+        text-align: center;
+        padding-bottom:40px;
+        
+        img{
+            width: 100px;
+            padding-bottom: 15px;
+        }
+        h3{
+            font-size: 35px;
+            font-weight: 600;
+        }
+        p{
+            color: #1b4077;
+            font-size: 18px;
+            margin-top: 0px;
+            font-weight: 500;
+        }
+    }
+    .login_form{
+        padding: 30px;
+        padding-left: 25px;
+        padding-right: 25px;
+        .row{
+            .radio_div{
+                padding-top: 10px;
+                padding-bottom: 10px;
+               ion-label{
+                font-size: 20px;
+                color: #c5c5c5;
+                margin-left:10px;
+                margin-right: 10px;
+                font-weight:300;
+               }
+            }
+            .button{
+               border-radius: 0px !important;
+               margin: 0px;
+               height: 45px;
+               font-size: 16px;
+               .button-native{
+                border-radius: 0px !important;
+               }
+            }
+            padding-bottom: 10px;
+            p{
+                text-align: center;
+                color: #727272;
+                font-size: 20px;
+            }
+            ion-input{
+                text-align: center;
+                font-size: 23px;
+                color: #c5c5c5;
+                font-weight:300;
+                border-bottom: 1px solid #cbcbcb;
+                
+            }
+
+            .has-focus{
+                background-image: url("../../assets/imgs/asset_focus_border.png");
+                background-position: bottom center;
+                background-size: 100%;
+                background-repeat: no-repeat;
+                border:none !important;
+
+            }
+        }
+    }
+}
+
+ion-footer{
+    background: transparent;
+    border:none;
+    background-image: none !important;
+    .log_btn_footer{
+        background-image: url("../../assets/imgs/asset_halfcircle.png");
+        background-position: center bottom;
+        color: #fff;
+        margin: 0 auto;
+        width: 200px;
+        text-align: center;
+        font-size: 18px;
+        font-weight: 300;
+        padding: 15px;
+        background-size: 90%;
+        background-repeat: no-repeat;
+        padding-top: 25px;
+     }
+}
+
+.footer-md:before {
+    background-image: none !important;
+}
+
+
+.signup_div{
+    height:calc(100vh - 60px);
+}
+
+
+
+

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

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

src/app/login/login.page.ts

+
+import {Component,OnInit, ElementRef, NgZone, ViewChild} from '@angular/core';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('300ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class LoginPage implements OnInit {
+
+  isShow = false;
+
+  constructor(private router: Router,private route: ActivatedRoute) { }
+
+  ngOnInit() {
+  }
+
+  istoggle(){
+    this.isShow = !this.isShow;
+  }
+
+  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-header>
+  <ion-toolbar>
+    <ion-title>signup</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

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