Skip to content

G
getme
Commit eb6e197f by amalk
Options

24-10-2019

parent 85176b0a
Showing with 441 additions and 45 deletions
src/app/addaddresss/addaddresss.page.html
...@@ -10,6 +10,29 @@ ...@@ -10,6 +10,29 @@
<ion-content> <ion-content>
<div class="login_wrapper"> <div class="login_wrapper">
<div class="form_div"> <div class="form_div">
<ion-grid>
<ion-row>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="value1">
<label for="styled-checkbox-1"><span>Work</span></label></h6>
</ion-col>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="value2">
<label for="styled-checkbox-2"><span>Office</span></label></h6>
</ion-col>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="value3">
<label for="styled-checkbox-3"><span>Others</span></label></h6>
</ion-col>
</ion-row>
</ion-grid>
<div class="row">
</div>
<div class="row"> <div class="row">
<input class="" type="text" placeholder="Full name"> <input class="" type="text" placeholder="Full name">
</div> </div>
...@@ -35,7 +58,7 @@ ...@@ -35,7 +58,7 @@
<input class="" type="text" placeholder="Landmark"> <input class="" type="text" placeholder="Landmark">
</div> </div>
<div class="row"> <div class="row">
<button class="login_btn">ADD</button> <button class="login_btn" (click)="goToPage('addcard')">ADD</button>
</div> </div>
</div> </div>
</div> </div>
......
src/app/addaddresss/addaddresss.page.scss
...@@ -11,6 +11,67 @@ ...@@ -11,6 +11,67 @@
width: 180px; width: 180px;
} }
} }
h6 {
color: rgba(41, 40, 91, 1);
margin: 0px;
span {
position: relative;
top: 2px;
}
a {
color: rgba(41, 40, 91, 1);
text-decoration: none;
font-weight: 900;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
.form_div { .form_div {
.row { .row {
margin-bottom: 20px; margin-bottom: 20px;
...@@ -60,6 +121,7 @@ ...@@ -60,6 +121,7 @@
} }
h6 { h6 {
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
margin: 0px;
span { span {
position: relative; position: relative;
top: 5px; top: 5px;
...@@ -83,8 +145,8 @@ ...@@ -83,8 +145,8 @@
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 30px; width: 20px;
height: 30px; height: 20px;
border-radius: 10px; border-radius: 10px;
background: white; background: white;
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
......
src/app/addcard/addcard.module.ts 0 → 100644
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 { AddcardPage } from './addcard.page';
const routes: Routes = [
{
path: '',
component: AddcardPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [AddcardPage]
})
export class AddcardPageModule {}
src/app/addcard/addcard.page.html 0 → 100644
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png">
</button>
<div class="nav_title floatLeft">
<h4>ADD YOUR CARD</h4>
</div>
<div class="clear"></div>
</div>
<ion-content>
<div class="login_wrapper">
<div class="form_div">
<div class="row">
<p>Credit/Debit Card</p>
<input class="" type="text" placeholder="0000 0000 0000 0000">
</div>
<div class="row">
<p>Expiry Date</p>
<ion-row>
<ion-col size="4" class="p0">
<input class="" type="text" placeholder="00/0000">
</ion-col>
<ion-col class="p0"></ion-col>
</ion-row>
</div>
<div class="row">
<p>CVV</p>
<ion-row>
<ion-col size="4" class="p0">
<input class="" type="text" placeholder="_ _ _">
</ion-col>
<ion-col class="p0"></ion-col>
</ion-row>
</div>
<div class="row">
<button class="login_btn">ADD</button>
</div>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/addcard/addcard.page.scss 0 → 100644
.login_wrapper {
width: 80%;
margin: 0 auto;
padding-top: 30px;
.logo_wrapper {
width: 100%;
text-align: center;
padding-top: 50px;
padding-bottom: 30px;
img {
width: 180px;
}
}
h6 {
color: rgba(41, 40, 91, 1);
margin: 0px;
span {
position: relative;
top: 2px;
}
a {
color: rgba(41, 40, 91, 1);
text-decoration: none;
font-weight: 900;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
.form_div {
.row {
margin-bottom: 20px;
input {
border: 1px solid rgba(215, 213, 228, 1);
background: transparent;
color: rgba(215, 213, 228, 1);
width: 100%;
height: 45px;
text-align: left;
border-radius: 8px;
font-size: 16px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
}
hr {
border: 1px solid rgba(215, 213, 228, 1);
border-bottom: none;
margin-top: 30px;
margin-bottom: 10px;
}
P {
text-align: left;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: 500;
padding-bottom: 10px;
span {
background-color: #fff;
padding: 10px;
font-size: 18px;
}
}
h4 {
color: rgba(59, 57, 77, 1);
text-align: center;
margin: 0px;
padding-top: 15px;
}
h6 {
color: rgba(41, 40, 91, 1);
margin: 0px;
span {
position: relative;
top: 5px;
}
a {
color: rgba(41, 40, 91, 1);
text-decoration: none;
font-weight: 900;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 10px;
top: 15px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
.social_div {
border: 1px solid rgba(215, 213, 228, 1);
height: 45px;
border-radius: 20px;
.social_btn {
display: inline-block;
width: 50%;
text-align: center;
height: 100%;
font-size: 18px;
padding: 9px;
}
}
}
}
}
\ No newline at end of file
src/app/addcard/addcard.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddcardPage } from './addcard.page';
describe('AddcardPage', () => {
let component: AddcardPage;
let fixture: ComponentFixture<AddcardPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddcardPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddcardPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/addcard/addcard.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-addcard',
templateUrl: './addcard.page.html',
styleUrls: ['./addcard.page.scss'],
})
export class AddcardPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/app-routing.module.ts
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '', loadChildren: './landing/landing.module#LandingPageModule'
},
{ path: 'tabs',loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
{ path: 'verification', loadChildren: './verification/verification.module#VerificationPageModule' },
{ path: 'forgot', loadChildren: './forgot/forgot.module#ForgotPageModule' },
{ path: 'changepass', loadChildren: './changepass/changepass.module#ChangepassPageModule' },
{ path: 'orderdelivered', loadChildren: './orderdelivered/orderdelivered.module#OrderdeliveredPageModule' },
{ path: 'orderplaced', loadChildren: './orderplaced/orderplaced.module#OrderplacedPageModule' },
{ path: 'ordercancelled', loadChildren: './ordercancelled/ordercancelled.module#OrdercancelledPageModule' },
{ path: 'myorder', loadChildren: './myorder/myorder.module#MyorderPageModule' },
{ path: 'cart', loadChildren: './cart/cart.module#CartPageModule' },
{ path: 'changedetails', loadChildren: './changedetails/changedetails.module#ChangedetailsPageModule' },
{ path: 'wishlist', loadChildren: './wishlist/wishlist.module#WishlistPageModule' },
{ path: 'addaddresss', loadChildren: './addaddresss/addaddresss.module#AddaddresssPageModule' },
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'productlist', loadChildren: './productlist/productlist.module#ProductlistPageModule' },
{ path: 'productdetail', loadChildren: './productdetail/productdetail.module#ProductdetailPageModule' },
{ path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' },
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
{ path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' },
{ path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' },
{ path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' },
{ path: 'review', loadChildren: './review/review.module#ReviewPageModule' },
{ path: 'delivery', loadChildren: './delivery/delivery.module#DeliveryPageModule' }, { path: 'addcard', loadChildren: './addcard/addcard.module#AddcardPageModule' }
const routes: Routes = [
{
path: '', loadChildren: './landing/landing.module#LandingPageModule' ];
}, @NgModule({
{ path: 'tabs',loadChildren: './tabs/tabs.module#TabsPageModule' }, imports: [
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' }, RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' }, ],
{ path: 'verification', loadChildren: './verification/verification.module#VerificationPageModule' }, exports: [RouterModule]
{ path: 'forgot', loadChildren: './forgot/forgot.module#ForgotPageModule' }, })
{ path: 'changepass', loadChildren: './changepass/changepass.module#ChangepassPageModule' }, export class AppRoutingModule {}
{ path: 'orderdelivered', loadChildren: './orderdelivered/orderdelivered.module#OrderdeliveredPageModule' },
{ path: 'orderplaced', loadChildren: './orderplaced/orderplaced.module#OrderplacedPageModule' },
{ path: 'ordercancelled', loadChildren: './ordercancelled/ordercancelled.module#OrdercancelledPageModule' },
{ path: 'myorder', loadChildren: './myorder/myorder.module#MyorderPageModule' },
{ path: 'cart', loadChildren: './cart/cart.module#CartPageModule' },
{ path: 'changedetails', loadChildren: './changedetails/changedetails.module#ChangedetailsPageModule' },
{ path: 'wishlist', loadChildren: './wishlist/wishlist.module#WishlistPageModule' },
{ path: 'addaddresss', loadChildren: './addaddresss/addaddresss.module#AddaddresssPageModule' },
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'productlist', loadChildren: './productlist/productlist.module#ProductlistPageModule' },
{ path: 'productdetail', loadChildren: './productdetail/productdetail.module#ProductdetailPageModule' },
{ path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' },
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
{ path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' },
{ path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' },
{ path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' },
{ path: 'review', loadChildren: './review/review.module#ReviewPageModule' },
{ path: 'delivery', loadChildren: './delivery/delivery.module#DeliveryPageModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
......
src/app/verification/verification.page.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<input class="" type="text" placeholder="Type OTP"> <input class="" type="text" placeholder="Type OTP">
</div> </div>
<div class="row"> <div class="row">
<button class="login_btn" (click)="goToPage('login')">SUBMIT</button> <button class="login_btn" (click)="goToPage('addaddresss')">SUBMIT</button>
</div> </div>
<div class="row"> <div class="row">
<button class="resend_btn">RESEND</button> <button class="resend_btn">RESEND</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment