first commit
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
/*
|
||||
Authors : initappz (Rahul Jograna)
|
||||
Website : https://initappz.com/
|
||||
App Name : E-Learning App Template
|
||||
This App Template Source code is licensed as per the
|
||||
terms found in the Website https://initappz.com/license
|
||||
Copyright and Good Faith Purchasers © 2021-present initappz.
|
||||
*/
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { PaymentPage } from './payment.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: PaymentPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class PaymentPageRoutingModule { }
|
||||
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
Authors : initappz (Rahul Jograna)
|
||||
Website : https://initappz.com/
|
||||
App Name : E-Learning App Template
|
||||
This App Template Source code is licensed as per the
|
||||
terms found in the Website https://initappz.com/license
|
||||
Copyright and Good Faith Purchasers © 2021-present initappz.
|
||||
*/
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { PaymentPageRoutingModule } from './payment-routing.module';
|
||||
|
||||
import { PaymentPage } from './payment.page';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
PaymentPageRoutingModule
|
||||
],
|
||||
declarations: [PaymentPage]
|
||||
})
|
||||
export class PaymentPageModule { }
|
||||
@@ -0,0 +1,80 @@
|
||||
<!--
|
||||
Authors : initappz (Rahul Jograna)
|
||||
Website : https://initappz.com/
|
||||
App Name : E-Learning App Template
|
||||
This App Template Source code is licensed as per the
|
||||
terms found in the Website https://initappz.com/license
|
||||
Copyright and Good Faith Purchasers © 2021-present initappz.
|
||||
-->
|
||||
<ion-header mode="ios" class="ion-no-border">
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" (click)="onBack()">
|
||||
<ion-button>
|
||||
<ion-icon name="arrow-back-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Payment</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
|
||||
<ion-label class="head_text">Choose payment methods</ion-label>
|
||||
|
||||
<div class="flex">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/paypal.png)'"></div>
|
||||
<div class="text">
|
||||
<ion-label class="bold_text">Paypal</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label class="connect">Connected</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/google.png)'"></div>
|
||||
<div class="text">
|
||||
<ion-label class="bold_text">Google Pay</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label class="connect">Connected</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/apple.png)'"></div>
|
||||
<div class="text">
|
||||
<ion-label class="bold_text">Apple Pay</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label class="connect">Connected</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/visa.png)'"></div>
|
||||
<div class="text">
|
||||
<ion-label class="bold_text">**** **** **** 8998</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label class="connect">Connected</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<div class="button" (click)="onAddCard()">
|
||||
<ion-label class="text"> Add New Card</ion-label>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
Authors : initappz (Rahul Jograna)
|
||||
Website : https://initappz.com/
|
||||
App Name : E-Learning App Template
|
||||
This App Template Source code is licensed as per the
|
||||
terms found in the Website https://initappz.com/license
|
||||
Copyright and Good Faith Purchasers © 2021-present initappz.
|
||||
*/
|
||||
ion-header {
|
||||
ion-toolbar {
|
||||
--background: var(--ion-color-primary);
|
||||
|
||||
ion-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-content {
|
||||
|
||||
.head_text {
|
||||
font-size: 18px;
|
||||
font-family: 'semi-bold';
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.back_image {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bold_text {
|
||||
font-size: 16px;
|
||||
font-family: 'semi-bold';
|
||||
}
|
||||
|
||||
.grey_text {
|
||||
font-size: 14px;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.add_button {
|
||||
--background: #d9daeb;
|
||||
color: var(--ion-color-primary);
|
||||
font-family: 'semi-bold';
|
||||
}
|
||||
|
||||
.connect {
|
||||
font-size: 13px;
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
ion-footer {
|
||||
--background: white;
|
||||
|
||||
ion-toolbar {
|
||||
--border-width: 0px;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
|
||||
ion-icon {
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: var(--ion-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-radius: 30px;
|
||||
padding: 12px 0;
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
Authors : initappz (Rahul Jograna)
|
||||
Website : https://initappz.com/
|
||||
App Name : E-Learning App Template
|
||||
This App Template Source code is licensed as per the
|
||||
terms found in the Website https://initappz.com/license
|
||||
Copyright and Good Faith Purchasers © 2021-present initappz.
|
||||
*/
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { PaymentPage } from './payment.page';
|
||||
|
||||
describe('PaymentPage', () => {
|
||||
let component: PaymentPage;
|
||||
let fixture: ComponentFixture<PaymentPage>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [PaymentPage],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PaymentPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
Authors : initappz (Rahul Jograna)
|
||||
Website : https://initappz.com/
|
||||
App Name : E-Learning App Template
|
||||
This App Template Source code is licensed as per the
|
||||
terms found in the Website https://initappz.com/license
|
||||
Copyright and Good Faith Purchasers © 2021-present initappz.
|
||||
*/
|
||||
import { NavController } from '@ionic/angular';
|
||||
import { Router } from '@angular/router';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment',
|
||||
templateUrl: './payment.page.html',
|
||||
styleUrls: ['./payment.page.scss'],
|
||||
})
|
||||
export class PaymentPage implements OnInit {
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private navctr: NavController
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
onAddCard() {
|
||||
this.router.navigate(['new-card']);
|
||||
}
|
||||
|
||||
onBack() {
|
||||
this.navctr.back();
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user