Commit db4755ad by amalk

updates

parent 6199fc9c
...@@ -62,7 +62,13 @@ const routes: Routes = [ ...@@ -62,7 +62,13 @@ const routes: Routes = [
{ path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' }, { path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' },
{ path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' }, { path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' },
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' }, { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
{ path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' } { path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' },
{ path: 'profilephoto', loadChildren: './profilephoto/profilephoto.module#ProfilephotoPageModule' },
{ path: 'carlist', loadChildren: './carlist/carlist.module#CarlistPageModule' },
{ path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
{ path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' },
{ path: 'general', loadChildren: './general/general.module#GeneralPageModule' },
{ path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' }
]; ];
@NgModule({ @NgModule({
......
...@@ -50,6 +50,8 @@ export class BookingPage{ ...@@ -50,6 +50,8 @@ export class BookingPage{
this.tab = type; this.tab = type;
} }
istoggle(){ istoggle(){
this.isShow = !this.isShow; this.isShow = !this.isShow;
......
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 { CarlistPage } from './carlist.page';
const routes: Routes = [
{
path: '',
component: CarlistPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [CarlistPage]
})
export class CarlistPageModule {}
<ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>MY CARS</h4></div>
<button class="nav_btn nav_btn_text floatRight">
<div class="add_car" (click)="goToPage('addcar')">
+
</div>
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="carlist">
<ul>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
.add_car{
background-color: #39267f;
color: #fff;
height: 40px;
width: 40px;
border-radius: 50%;
font-size: 30px;
padding: 4px;
}
.carlist{
padding:10px;
ul{
margin:0px;
padding:0px;
li{
list-style: none;
padding: 20px;
border-radius: 15px;
margin-bottom: 10px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
-moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
.auto_pic{
width:60px;
height:60px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
-moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
border-radius:15px;
float: left;
img{
width: 100%;
height:100%;
border-radius: 15px;
object-fit: cover;
object-position: center;
}
}
.auto_detail{
float: left;
width: calc(100% - 60px);
padding-left:15px;
h4{
margin:0px;
padding: 0px;
color: #282438;
font-weight: 400;
padding-bottom:5px;
font-size: 16px;
strong{
font-weight: 500;
}
}
.auto_detail_inner{
border-left:1px dashed #4e4961;
margin-left:10px;
padding-left: 15px;
p{
margin:0px;
padding: 0px;
color: #a29ebf;
font-size: 14px;
}
}
}
}
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CarlistPage } from './carlist.page';
describe('CarlistPage', () => {
let component: CarlistPage;
let fixture: ComponentFixture<CarlistPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CarlistPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CarlistPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-carlist',
templateUrl: './carlist.page.html',
styleUrls: ['./carlist.page.scss'],
})
export class CarlistPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
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 { GeneralPage } from './general.page';
const routes: Routes = [
{
path: '',
component: GeneralPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [GeneralPage]
})
export class GeneralPageModule {}
<ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>GENERAL DETAILS</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="signup_wrapper">
<div class="signup_form">
<div class="row">
<p>Your Full Name</p>
<ion-input value="John Doe" type="text"></ion-input>
</div>
<div class="row">
<p>Email Address</p>
<ion-input value="[email protected]" type="text"></ion-input>
</div>
<div class="row">
<p>Phone Number</p>
<ion-row class="p0">
<ion-col size="4">
<ion-select placeholder="">
<ion-select-option value="">+91</ion-select-option>
</ion-select>
</ion-col>
<ion-col size="8">
<ion-input value="" type="number"></ion-input>
</ion-col>
</ion-row>
</div>
<div class="row">
<p>Country</p>
<ion-select placeholder="">
<ion-select-option value="">Country Name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>District</p>
<ion-select placeholder="">
<ion-select-option value="">District Name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>City</p>
<ion-select placeholder="">
<ion-select-option value="">City Name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>Area</p>
<ion-select placeholder="">
<ion-select-option value="">Area name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>House name/Building</p>
<ion-select placeholder="">
<ion-select-option value="">Choose address</ion-select-option>
</ion-select>
</div>
<div class="row">
<button class="signup_btn">Save</button>
</div>
</div>
</div>
</ion-content>
.signup_form{
padding: 15px;
.row{
margin-bottom: 15px;
p{
color: #4e4961;
padding: 10px;
margin: 0px;
padding-left: 20px;
font-weight: 500;
a{
color: #39267f;
}
}
h6{
color: #4e4961;
padding-left: 20px;
font-weight: 400;
font-size: 14px;
}
ion-input{
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
}
ion-select {
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
padding-right: 20px;
}
.signup_btn{
height: 40px;
width: 100%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
}
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GeneralPage } from './general.page';
describe('GeneralPage', () => {
let component: GeneralPage;
let fixture: ComponentFixture<GeneralPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ GeneralPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GeneralPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-general',
templateUrl: './general.page.html',
styleUrls: ['./general.page.scss'],
})
export class GeneralPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
...@@ -313,7 +313,7 @@ ...@@ -313,7 +313,7 @@
</div> </div>
<div class="menu_inner" *ngIf="login"> <div class="menu_inner" *ngIf="login">
<ion-row> <ion-row>
<ion-col> <ion-col (click)="goToPage('settings')">
<img src="../../assets/img/asset_setting.png"> <img src="../../assets/img/asset_setting.png">
<p>Settings</p> <p>Settings</p>
</ion-col> </ion-col>
......
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 { MyordersPage } from './myorders.page';
const routes: Routes = [
{
path: '',
component: MyordersPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [MyordersPage]
})
export class MyordersPageModule {}
<ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>MY ORDERS</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="services_wrapper">
<h4>Pending Orders</h4>
<ul>
<li class="up_comingborder" (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<h4>February</h4>
<li (click)="goToPage('servicedetails')">
<div class="clear"></div>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
.services_wrapper{
background-color: #faf9fc;
padding:15px;
width:100%;
h4{
margin:0px;
padding:0px;
margin-bottom: 15px;
}
ul{
margin:0px;
padding:0px;
li{
list-style: none;
background-color: #f6f5fa;
padding:25px;
padding-right: 20px;
border-radius: 15px;
margin-bottom: 10px;
.road_assitance{
background-color: #fbd339;
color: #403d4d;
display: inline-block;
font-weight: 500;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 14px;
}
h5{
margin:0px;
padding: 0px;
color: #403d4d;
font-size: 16px;
padding-bottom: 5px;
font-weight: 600;
}
p{
margin:0px;
padding: 0px;
color: #a29ebf;
font-size: 13px;
padding-bottom: 20px;
}
.pic{
width:45px;
height:45px;
border-radius: 50%;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.pic_detail{
width:calc(100% - 45px);
margin: 0px;
padding-bottom: 5px;
padding-left: 15px;
h6{
margin:0px;
color: #a29ebf;
font-weight: 400;
font-size: 16px;
padding-bottom: 5px;
strong{
font-weight: 500;
}
}
.arrow{
background: url("../../assets/img/asset_playit.png");
background-position: right;
background-repeat: no-repeat;
background-size: 12px;
}
}
}
h4{
margin:0px;
color: #a29ebf;
margin-top: 15px;
margin-bottom: 15px;
font-size: 14px;
}
.up_comingborder{
border:2px solid #fbd339;
}
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyordersPage } from './myorders.page';
describe('MyordersPage', () => {
let component: MyordersPage;
let fixture: ComponentFixture<MyordersPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyordersPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyordersPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-myorders',
templateUrl: './myorders.page.html',
styleUrls: ['./myorders.page.scss'],
})
export class MyordersPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
...@@ -13,11 +13,74 @@ ...@@ -13,11 +13,74 @@
<div class="services_wrapper"> <div class="services_wrapper">
<h4>Upcoming Services</h4> <h4>Upcoming Services</h4>
<ul> <ul>
<li> <li class="up_comingborder" (click)="goToPage('servicedetails')">
<h5>2 Services</h5> <h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p> <p>Heating & Air Conditioning, Break System</p>
<p></p> <div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li> </li>
<h4>February</h4>
<li (click)="goToPage('servicedetails')">
<div class="road_assitance">
Road Assistance
</div>
<div class="clear"></div>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
</ul> </ul>
</div> </div>
</ion-content> </ion-content>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
h4{ h4{
margin:0px; margin:0px;
padding:0px; padding:0px;
margin-bottom: 15px;
} }
ul{ ul{
margin:0px; margin:0px;
...@@ -12,16 +13,83 @@ ...@@ -12,16 +13,83 @@
li{ li{
list-style: none; list-style: none;
background-color: #f6f5fa; background-color: #f6f5fa;
padding:25px;
padding-right: 20px;
border-radius: 15px;
margin-bottom: 10px;
.road_assitance{
background-color: #fbd339;
color: #403d4d;
display: inline-block;
font-weight: 500;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 14px;
}
h5{ h5{
margin:0px; margin:0px;
padding: 0px; padding: 0px;
color: #282438; color: #403d4d;
font-size: 16px;
padding-bottom: 5px;
font-weight: 600;
} }
p{ p{
margin:0px; margin:0px;
padding: 0px; padding: 0px;
color: #a29ebf; color: #a29ebf;
font-size: 13px;
padding-bottom: 20px;
}
.pic{
width:45px;
height:45px;
border-radius: 50%;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.pic_detail{
width:calc(100% - 45px);
margin: 0px;
padding-bottom: 5px;
padding-left: 15px;
h6{
margin:0px;
color: #a29ebf;
font-weight: 400;
font-size: 16px;
padding-bottom: 5px;
strong{
font-weight: 500;
}
}
.arrow{
background: url("../../assets/img/asset_playit.png");
background-position: right;
background-repeat: no-repeat;
background-size: 12px;
}
} }
} }
h4{
margin:0px;
color: #a29ebf;
margin-top: 15px;
margin-bottom: 15px;
font-size: 14px;
}
.up_comingborder{
border:2px solid #fbd339;
}
} }
} }
\ No newline at end of file
...@@ -29,4 +29,6 @@ export class MyservicesPage implements OnInit { ...@@ -29,4 +29,6 @@ export class MyservicesPage implements OnInit {
this.location.back(); this.location.back();
} }
} }
...@@ -13,63 +13,66 @@ ...@@ -13,63 +13,66 @@
<div class="clear"></div> <div class="clear"></div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="profile_pic"> <div class="profile_pic" (click)="goToPage('profilephoto')">
<div class="overlay"></div> <div class="overlay"></div>
<img src="../../assets/img/asset_profile_pic.png"> <img src="../../assets/img/asset_profile_pic.png">
</div> </div>
<div class="profile_wrapper"> <div class="" style="height: 300px;">
<ul> <div class="profile_wrapper">
<li (click)="goToPage('myservices')"> <ul>
<div class="li_image"> <li (click)="goToPage('myservices')">
<img src="../../assets/img/asset_m1.png"> <div class="li_image">
</div> <img src="../../assets/img/asset_m1.png">
<div class="li_detail"> </div>
<h5>My Services</h5> <div class="li_detail">
<p>Total services: 08</p> <h5>My Services</h5>
</div> <p>Total services: 08</p>
<div class="clear"></div> </div>
</li> <div class="clear"></div>
<li> </li>
<div class="li_image"> <li (click)="goToPage('myorders')">
<img src="../../assets/img/asset_m2.png"> <div class="li_image">
</div> <img src="../../assets/img/asset_m2.png">
<div class="li_detail"> </div>
<h5>My Orders</h5> <div class="li_detail">
<p>Total purchases: 18</p> <h5>My Orders</h5>
</div> <p>Total purchases: 18</p>
<div class="clear"></div> </div>
</li> <div class="clear"></div>
<li> </li>
<div class="li_image"> <li (click)="goToPage('carlist')">
<img src="../../assets/img/asset_m3.png"> <div class="li_image">
</div> <img src="../../assets/img/asset_m3.png">
<div class="li_detail"> </div>
<h5>My Cars</h5> <div class="li_detail">
<p></p> <h5>My Cars</h5>
</div> <p></p>
<div class="clear"></div> </div>
</li> <div class="clear"></div>
<li> </li>
<div class="li_image"> <li (click)="goToPage('general')">
<img src="../../assets/img/asset_m4.png"> <div class="li_image">
</div> <img src="../../assets/img/asset_m4.png">
<div class="li_detail"> </div>
<h5>General Details</h5> <div class="li_detail">
<p></p> <h5>General Details</h5>
</div> <p></p>
<div class="clear"></div> </div>
</li> <div class="clear"></div>
<li> </li>
<div class="li_image"> <li (click)="goToPage('login')">
<img src="../../assets/img/asset_m5.png"> <div class="li_image">
</div> <img src="../../assets/img/asset_m5.png">
<div class="li_detail borderNone"> </div>
<h5>Logout</h5> <div class="li_detail borderNone">
<p></p> <h5>Logout</h5>
</div> <p></p>
<div class="clear"></div> </div>
</li> <div class="clear"></div>
</ul> </li>
</ul>
</div>
</div> </div>
</div> </div>
</ion-content> </ion-content>
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 { ProfilephotoPage } from './profilephoto.page';
const routes: Routes = [
{
path: '',
component: ProfilephotoPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ProfilephotoPage]
})
export class ProfilephotoPageModule {}
<ion-content>
<div class="forgot_wrapper">
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>PROFILE PHOTO</h4></div>
<button class="nav_btn floatLeft">
<div class="account_pic">
<img src="../../assets/img/asset_triangle.png">
</div>
</button>
<div class="clear"></div>
<div class="clear"></div>
</div>
<div class="profile_pic">
<div class="overlay"></div>
<img src="../../assets/img/asset_profile_pic.png">
</div>
<div padding>
<button class="update_btn">Update</button>
</div>
</div>
</ion-content>
.forgot_wrapper{
background-image: url("../../assets/img/asset_forgot_bg.png");
background-position: center top -30px;
background-size: 100%;
.profile_pic{
width:100%;
height:290px;
position: relative;
.overlay{
position: absolute;
top:0px;
left:0px;
right:0px;
bottom: 0px;
-webkit-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
-moz-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
}
img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
}
.forgot_form{
padding: 15px;
padding-top: 40px;
.row{
margin-bottom: 15px;
p{
color: #4e4961;
padding: 10px;
margin: 0px;
padding-left: 20px;
font-weight: 500;
a{
color: #39267f;
}
}
h6{
color: #4e4961;
padding-left: 20px;
font-weight: 400;
font-size: 14px;
}
ion-input{
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
}
ion-select {
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
padding-right: 20px;
}
.signup_btn{
height: 40px;
width: 100%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
}
}
}
.update_btn{
height: 40px;
width: 100%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfilephotoPage } from './profilephoto.page';
describe('ProfilephotoPage', () => {
let component: ProfilephotoPage;
let fixture: ComponentFixture<ProfilephotoPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfilephotoPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfilephotoPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-profilephoto',
templateUrl: './profilephoto.page.html',
styleUrls: ['./profilephoto.page.scss'],
})
export class ProfilephotoPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
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 { ServicedetailsPage } from './servicedetails.page';
const routes: Routes = [
{
path: '',
component: ServicedetailsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ServicedetailsPage]
})
export class ServicedetailsPageModule {}
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ServicedetailsPage } from './servicedetails.page';
describe('ServicedetailsPage', () => {
let component: ServicedetailsPage;
let fixture: ComponentFixture<ServicedetailsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ServicedetailsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ServicedetailsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-servicedetails',
templateUrl: './servicedetails.page.html',
styleUrls: ['./servicedetails.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 ServicedetailsPage implements OnInit {
tab:any;
isShow = false;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) {
this.tab = "detail";
}
ngOnInit() {
}
tab_swap(type) {
this.tab = type;
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
istoggle(){
this.isShow = !this.isShow;
}
}
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 { SettingsPage } from './settings.page';
const routes: Routes = [
{
path: '',
component: SettingsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SettingsPage]
})
export class SettingsPageModule {}
<ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>Settings</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="settings_wrapper">
<h4>Notifications</h4>
<div class="row">
<p class="floatLeft">Service Reminder</p>
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</div>
<div class="row">
<p class="floatLeft">Order Updates</p>
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</div>
<br>
<hr>
<br>
<h4>App Sounds</h4>
<div class="row">
<p class="floatLeft">Notification Sounds</p>
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</div>
</div>
</ion-content>
.settings_wrapper{
padding:15px;
h4{
margin: 0px;
padding:0px;
color: #a29ebf;
padding-bottom: 10px;
}
.row{
p{
color: #4e4961;
font-weight: 500;
margin:0px;
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
}
}
hr{
border:1px solid #d8d4e2;
height:0px;
border-top:0px;
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SettingsPage } from './settings.page';
describe('SettingsPage', () => {
let component: SettingsPage;
let fixture: ComponentFixture<SettingsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SettingsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SettingsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-settings',
templateUrl: './settings.page.html',
styleUrls: ['./settings.page.scss'],
})
export class SettingsPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
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