Commit 45361de6 by amal

firstpull

parent 54e25060
{
"name": "cmc_v2",
"app_id": "",
"type": "ionic-angular"
"app_id": "b8b89996",
"type": "ionic-angular",
"integrations": {}
}
File added
......@@ -3,42 +3,26 @@ import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{title: string, component: any}>;
rootPage: any = 'LandingPage';
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
open_page(page){
this.nav.setRoot(page);
}
}
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
<ion-content class="cab_sidemenu_bg">
<div class="cab_sidemenu_wrapper">
<div menuClose class="cab_profile_banner" (click)="open_page('ProfilePage')">
<div class="cab_profile_picture">
</div>
<h6>Catharine Morgan</h6>
<p>+0966-26539</p>
</div>
<div class="cab_sidemenu_list">
<ul>
<li menuClose class="book" (click)="open_page('HomePage')">Book Ride</li>
<li menuClose class="trip" (click)="open_page('MytripsPage')">My Trips</li>
<li menuClose class="settings" (click)="open_page('SettingsPage')">Settings</li>
<li menuClose class="logout" (click)="open_page('LoginPage')">Logout</li>
</ul>
</div>
</div>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
\ No newline at end of file
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage
MyApp
],
imports: [
BrowserModule,
......@@ -21,9 +15,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
MyApp
],
providers: [
StatusBar,
......
// http://ionicframework.com/docs/theming/
//Global SCSS//
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
//Themening SCSS//
@import "../assets/css/theme.scss";
//Essentail SCSS//
@import "../assets/css/essential.scss";
/* LANDING */
.cab_landing_wrapper{width:80%;height:100%;margin:0 auto;padding-top: 10%;}
.cab_logo{width:100%;text-align: center;}
.cab_logo img{width:200px;}
.cab_footer{width:100%;text-align: center;}
.cab_footer p{color: #3d3a3b;font-weight: 500;font-size: 18px;}
.cab_footer li{list-style: none;display: inline-block;}
.cab_sign_btn{height:45px;width:100%;background:#ff9c00;color: #fff;text-transform: capitalize !important;font-size: 16px;font-weight: 400;}
.cab_sign_btn1{height:45px;width:100%;border:1px solid #ff9c00;color: #ff9c00;background:transparent;text-transform: capitalize !important;font-size: 16px;font-weight: 400;}
.cab_form p{color: #3d3a3b;font-weight: 500;font-size: 18px;}
/* LOGIN */
.cab_login_wrapper{width:100%;height:100%;padding-top: 10%;}
.cab_login_wrapper h4{color: #404041;font-size: 25px;font-weight: 400;}
.cab_login_wrapper hr{border:2px solid #f7941e;height:0px;border-radius:20px;width:35px;margin-left:0px;}
.cab_phone_number{width:100%;height:50px;border-bottom:2px solid #ff9c00;}
.cab_phone_code{width:50px;height:100%;-webkit-appearance: none;-moz-appearance: none;background: transparent !important;text-align: center;border:none;padding-left: 10px;color: #3d3a3b;font-size: 18px;}
.cab_phone_code option{text-align: center;}
.cab_phone_input{width:calc(100% - 50px);height:100%;border:none;color:#3d3a3b;font-size: 18px;padding-left: 10px;padding-right: 20px;}
.cab_phone_input::-webkit-input-placeholder {color:#3d3a3b;}
.cab_phone_input::-moz-placeholder {color:#3d3a3b;}
.cab_phone_input:-ms-input-placeholder {color:#3d3a3b;}
.cab_phone_input:-moz-placeholder {color:#3d3a3b;}
.cab_login_wrapper{width:100%;}
.cab_call{background: url("../assets/img/number.png");background-position: right;background-repeat: no-repeat;}
.cab_pass{background: url("../assets/img/password.png");background-position: right;background-repeat: no-repeat;}
.cab_user{background: url("../assets/img/user.png");background-position: right;background-repeat: no-repeat;}
.cab_mail{background: url("../assets/img/email.png");background-position: right;background-repeat: no-repeat;}
.cab_search{background: url("../assets/img/search.png") !important;background-position: right;background-repeat: no-repeat;}
.cab_currentlocation{background: url("../assets/img/currentlocation.png");background-position: right;background-repeat: no-repeat;}
.cab_location{background: url("../assets/img/location.png");background-position: right;background-repeat: no-repeat;}
.cab_confirmpass{background: url("../assets/img/confirmpass.png");background-position: right;background-repeat: no-repeat;}
.cab_form_row .item-block{background: transparent;padding-left:0px;border:none !important;margin:0 auto !important;width:200px !important;}
.cab_form_row .item-inner{border:none !important;}
.cab_form_row .checkbox-checked{background:#ff9c00 !important;border:1px solid #ff9c00 !important;}
.item .item-ios .checkbox-ios{margin-left:0px !important;margin-right:10px !important;}
.item .item-md .checkbox-md{margin-left:0px !important;margin-right:10px !important;}
/* HOME */
.cab_map{width:100%;height:100%;position: relative;}
.cab_map #map{width:100%;height:100%; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray; -webkit-filter: grayscale(99%); -webkit-backface-visibility: hidden;}
.cab_home_custom_header{position: fixed;left:0px;right:0px;top:0px;width:100%;z-index: 99;}
.gmnoprint{display:none !important;}
.cab_footer_location{width: 100%;padding:10px;}
.cab_location_input{width:100%;height:45px;font-weight:300;border:none;color:#fff;font-size: 18px;background: transparent;background-position: right !important;background-repeat: no-repeat !important;background-size: 23px !important;}
.cab_current{background: url("../assets/img/currentlocation.png");}
.cab_destination{background: url("../assets/img/location.png");}
.cab_location_input::-webkit-input-placeholder {color:#fff;}
.cab_location_input::-moz-placeholder {color:#fff;}
.cab_location_input:-ms-input-placeholder {color:#fff;}
.cab_location_input:-moz-placeholder {color:#fff;}
.cab_footer_btn_bay{width:100%;}
.cab_footer_btn{width:50%;height:50px;font-weight: 300;letter-spacing: 2px;border-radius:0px !important;background: #4d4d4d;color:#FFF;text-align: center;font-size: 16px;margin:0px;text-transform: capitalize !important;}
.cab_button_search{width:60px;height:60px;border-radius:50%;color:#fff;position: fixed;top:75px;right:0px;font-size: 20px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
/* SIDEMENU */
.cab_sidemenu_bg{background:#4d4d4d;background-size: cover !important;background-position: center !important;}
.cab_sidemenu_wrapper{width:100%;height:100%;}
.cab_profile_banner{width:100%;padding-top:80px;}
.cab_profile_picture{width:100px;height:100px;margin:0 auto;border:2px solid #f7941e;background-size: 25px !important;border-radius:50%;background: url("../assets/img/avatar.png");background-position: center;background-repeat: no-repeat;}
.cab_profile_banner h6{color:#fff;margin:0px;font-size:16px;font-weight: 400;padding-bottom: 7px;padding-top: 15px;padding-left:10px;padding-right:10px;text-align: center;}
.cab_profile_banner p{color:#fff;margin:0px;font-size:20px;font-weight:300;padding-left:10px;padding-right:10px;text-align: center;}
.cab_profile_picture img{width:100%;height:100%;border-radius:50%;}
.cab_sidemenu_list{width:100%;padding-left: 30px;padding-top: 30px;}
.cab_sidemenu_list ul{width:100%;padding:0px;margin:0px;}
.cab_sidemenu_list ul li{list-style: none;color: #fff;font-size:16px;font-weight:300;padding-top:15px;padding-bottom:15px;background-position: left !important;background-repeat: no-repeat !important;padding-left: 35px;background-size:23px !important;}
.cab_sidemenu_list ul .book{background: url("../assets/img/book.png");}
.cab_sidemenu_list ul .trip{background: url("../assets/img/trip.png");}
.cab_sidemenu_list ul .rate{background: url("../assets/img/rate.png");}
.cab_sidemenu_list ul .payment{background: url("../assets/img/payment.png");}
.cab_sidemenu_list ul .offer{background: url("../assets/img/offer.png");}
.cab_sidemenu_list ul .settings{background: url("../assets/img/settings.png");}
.cab_sidemenu_list ul .logout{background: url("../assets/img/logout.png");}
/* MY-TRIPS */
.cab_mytrips_wrapper{width:100%;height: 100%;}
.cab_trip_tabs_bay{}
.cab_trip_tabs_bay ul{width:100%;margin:0px;padding:0px;border-bottom:2px solid #f7941e;}
.cab_trip_tabs_bay ul li{padding: 0px;margin:0px;text-transform: capitalize !important;list-style: none;width:33.3%;float: left;text-align: center;color:#f7941e;padding: 12px;font-weight: 300;font-size: 16px;}
.cab_trip_tabs_bay ul .active{background:#f7941e;color: #fff;box-shadow: 0px 0px 10px 0px #888888 !important;border-radius: 5px !important;}
.cab_trip_content{width:100%;height:calc(100% - 45px);}
.cab_trip_content ul{width:100%;padding:0px;margin:0px;padding-top: 20px;}
.cab_trip_content ul li{width:100%;height:100%;background: url("../assets/img/trip_yellow.png");position: relative;background-position: top 10px left 15px !important;background-repeat: no-repeat !important;background-size: 20px;padding-left: 50px;padding-right: 50px;padding-top:10px;padding-bottom:10px;text-align: left;border-bottom: 1px solid #e4e4e4;}
.cab_trip_content ul li h6{margin:0px;padding:0px;color: #f7941e;font-size: 14px;font-weight: 300;}
.cab_trip_content ul li p{margin:0px;font-style: italic;color: #404041;font-weight: 300;font-size: 12px;padding-top: 5px;}
.cab_trip_content ul li ion-icon{ float: right;color: #f7941e;position: absolute;right:20px;top: 35%;}
/* TRIP-DETAIL */
.cab_trip_detail_wrapper{width:100%;padding: 10px;}
.cab_trip_detail_wrapper h4{margin:0px;color:#404041;font-weight: 400;font-size: 16px;}
.cab_trip_detail_wrapper p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 10px;font-size: 14px !important;color: #a8a8a8;font-weight:300;padding-bottom: 0px;margin-bottom: 0px;bottom: 0px !important;letter-spacing: 1px !important;}
.cab_trip_detail_wrapper hr{border:1px solid #f7941e;height:0px;border-radius:5px;position: relative;bottom: 22px; z-index: -9;}
.cab_trip_detail_wrapper .to{width:50px;height:30px;border-radius:50%;background:#fff;color: #f7941e;text-align: center;margin:0 auto; padding: 3px;font-size:23px; z-index: 9;letter-spacing: 3px;padding-top: 5px;padding-left: 6px;margin-top: 20px;margin-bottom: 20px;}
.cab_trip_detail_wrapper p strong{background:#f7941e;color: #fff;padding-left: 10px;padding-right: 10px;border-radius: 4px;font-weight: 400;}
.cab_ratting{padding-top: 25px;padding-bottom:25px;text-align: center; width:205px;margin: 0 auto;}
.cab_ratting:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);}
.cab_ratting:not(:checked) > label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size: 40px;line-height:1.2;color:#ddd;}
.cab_ratting:not(:checked) > label:before {content: '★ ';}
.cab_ratting > input:checked ~ label {color: #f70;}
.cab_ratting:not(:checked) > label:hover,
.cab_ratting:not(:checked) > label:hover ~ label {color: gold;}
.cab_ratting > input:checked + label:hover,
.cab_ratting > input:checked + label:hover ~ label,
.cab_ratting > input:checked ~ label:hover,
.cab_ratting > input:checked ~ label:hover ~ label,
.cab_ratting > label:hover ~ input:checked ~ label {color: #ea0;}
.cab_ratting > label:active {position:relative;top:2px;left:2px;}
/* RIDEPOP */
.cab_ride_pop{width:100%;height:100%;position: relative;background: rgba(0,0,0,0.7);}
.cab_ride_inner{width:100%;min-height:130px;position: absolute;bottom:0px;}
.cab_ride_down_arrow{margin:0 auto;color: #fff;text-align: center;font-size:20px;width:50px;height:50px;border-radius:25px;padding: 10px;position: relative;bottom: 25px;}
.cab_ride_inner p{text-align: center;color: #fff;margin:0px;padding: 0px;font-size: 18px;font-weight: 300;letter-spacing: 4px;position: relative;bottom:30px;}
.cab_ride_inner h6{text-align: center;color:#fff;margin:0px !important;font-weight: 200;padding-top: 10px;font-size: 16px;position: relative;bottom:32px;}
.cab_ride_fare_break{background:#fff;color:#f7941e;text-align: center;position: relative;bottom: 20px;}
.cab_ride_inner strong{color:#fff;}
.cab_ride_inner h5{color: #fff;margin: 0px;font-weight: 300;margin-top: 7px;font-size: 14px;}
.cab_ride_bottom_section{width:100%;border-top:1px solid #fff;margin-top:20px;}
.cab_ride_bottom_section li{width:20%;float: left;height:80px;background-size:50px;padding-top: 10px;text-align: center;list-style: none;background-position: center !important;background-repeat: no-repeat !important;}
.cab_ride_bottom_section p{font-size: 10px !important;margin:0px !important;padding:0px !important;bottom: 0px !important;letter-spacing: 1px !important;}
.c1{background: url("../assets/img/c1.png");}
.c2{background: url("../assets/img/c2.png");}
.c3{background: url("../assets/img/c4.png");}
.c4{background: url("../assets/img/c3.png");}
.c5{background: url("../assets/img/c5.png");}
.c6{background: url("../assets/img/c6.png");}
.cab_ride_offer{width:100%;text-align: center;border-top: 1px solid #fff;}
.cab_ride_offer li{float: left;color: #fff;list-style: none;width:50%;border-radius:0px;height:55px;padding-top: 15px;padding-bottom: 15px;font-size: 16px;font-weight: 300;}
/* CONFIRM-MODAL */
.cab_pop_modal{width:300px;margin:0 auto;position: relative;top: 20%;background:#fff;}
.cab_pop_modal_head{width: 100%;color: #fff;text-align: center;padding: 10px;font-size: 18px;}
.cab_pop_modal p{text-align: center;color: #a8a8a8;font-size: 13px;padding-top: 20px;padding-bottom: 20px;}
.cab_pop_button{width:100%;color:#f7941e;height:40px;font-size: 15px;border:none;margin:0px;}
.cab_confirm_p{font-size: 20px;font-weight: 300;line-height: 30px;}
/* COUPON-MODAL */
.cab_coupon_wrapper{padding-top:20%;}
.cab_pop_detail_left{width:65px;height:50px;background-position:left;background-size: 65px;background-repeat: no-repeat;}
.cab_pop_details{padding: 3px;width:calc(100% - 65px);}
.cab_coupon_box{width:80%;margin:0 auto;height:50px;text-align:center;border:2px solid #353639;border-radius:0px;background:#28292c;}
.cab_coupon_input{width:100%;height:100%;background:transparent !important;border:none;text-align:center;color:#ff9000; font-size: 20px;font-weight: 300;}
.cab_coupon_input::-webkit-input-placeholder {color:#ff9000;}
.cab_coupon_input::-moz-placeholder {color:#ff9000;}
.cab_coupon_input:-ms-input-placeholder {color:#ff9000;}
.cab_coupon_input:-moz-placeholder {color:#ff9000;}
.cab_coupon_bg{background:#2e2f32 !important;}
.cab_coupon_wrapper p{color:#fff;text-align:center;margin:0px;line-height: 18px;font-weight: 300;letter-spacing: 1px;padding-top: 40px;padding-bottom: 40px;}
.cab_coupon_apply{width:100%;height:50px;border-radius:0px;text-align:center;background:#ff9000;font-size:18px;font-weight: 400;color:#fff;letter-spacing: 4px;}
.cab_coupon_content{width:100%; padding: 20px;}
.cab_coupon_content li{width:100%;list-style:none !important;padding-top: 10px;padding-bottom: 10px;border-bottom:1px solid #353639;}
.cab_coupon_content li .child{width:50%;float:left;color:#8d8c8c;font-size: 15px;}
.cab_coupon_content p{color:#ff9000;text-align:left;padding-bottom:20px;padding-top:20px;font-size: 18px;}
/* SEARCH-RESULT-PAGE */
.cab_search_result_page{width:100%;}
.cab_search_result_page ul{width:100%;margin:0px;padding:10px;}
.cab_search_result_page ul li{width:100%;border-bottom:1px solid #4a4a4a;padding-top:15px;padding-bottom:15px;padding-left:10px;}
.cab_search_result_page p{color:#fff;margin:0px;font-size: 18px;font-weight:300;padding: 10px;letter-spacing: 4px;}
.cab_search_result_page ul li h5{color:#ff9000;margin:0px;padding:0px;padding-bottom: 5px;font-size: 14px;letter-spacing: 1px;font-weight: 400;}
.cab_search_result_page ul li h6{color:#929292;margin:0px;padding:0px;font-weight: 400;}
/*EDIT-PROFILE*/
.cab_edit_profile_wrapper{width:100%;padding-top: 40px;}
.cab_edit_profilepic_edit{width:100px;height:100px;margin:0 auto;border-radius:50%;border: 2px solid #f7941e;background-color:#f7941e !important;background-size: 25px !important;background: url(../assets/img/avatar.png);background-position: center;background-repeat: no-repeat;}
.cab_edit_profilepic_edit img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;}
.cab_edit_profile_edit_form{width:100%;padding-top: 20px;}
.cab_edit_profile_edit_row{width:100%;}
.cab_edit_profile_input{width:100%;}
\ No newline at end of file
/*!
* Font Awesome 3.2.1
* the iconic font designed for Bootstrap
* ------------------------------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation can be
* found at http://fontawesome.io. Stay up to date on Twitter at
* http://twitter.com/fontawesome.
*
* License
* ------------------------------------------------------------------------------
* - The Font Awesome font is licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html
* - Font Awesome documentation licensed under CC BY 3.0 -
* http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fontawesome.io"
*
* Author - Dave Gandy
* ------------------------------------------------------------------------------
* Email: [email protected]
* Twitter: http://twitter.com/byscuits
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
*/
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
display: inline;
}
/* increased font size for icon-large */
[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
display: inline-block;
width: 1.1428571428571428em;
text-align: right;
padding-right: 0.2857142857142857em;
}
[class^="icon-"].icon-fixed-width.icon-large,
[class*=" icon-"].icon-fixed-width.icon-large {
width: 1.4285714285714286em;
}
.icons-ul {
margin-left: 2.142857142857143em;
list-style-type: none;
}
.icons-ul > li {
position: relative;
}
.icons-ul .icon-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
text-align: center;
line-height: inherit;
}
[class^="icon-"].hide,
[class*=" icon-"].hide {
display: none;
}
.icon-muted {
color: #eeeeee;
}
.icon-light {
color: #ffffff;
}
.icon-dark {
color: #333333;
}
.icon-border {
border: solid 1px #eeeeee;
padding: .2em .25em .15em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-2x {
font-size: 2em;
}
.icon-2x.icon-border {
border-width: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.icon-3x {
font-size: 3em;
}
.icon-3x.icon-border {
border-width: 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.icon-4x {
font-size: 4em;
}
.icon-4x.icon-border {
border-width: 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.icon-5x {
font-size: 5em;
}
.icon-5x.icon-border {
border-width: 5px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
margin-right: .3em;
}
[class^="icon-"].pull-right,
[class*=" icon-"].pull-right {
margin-left: .3em;
}
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */
.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
line-height: .9em;
}
.btn [class^="icon-"].icon-spin,
.nav [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
display: inline-block;
}
.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large,
.nav-pills [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"].icon-large,
.nav-pills [class*=" icon-"].icon-large {
line-height: .9em;
}
.btn [class^="icon-"].pull-left.icon-2x,
.btn [class*=" icon-"].pull-left.icon-2x,
.btn [class^="icon-"].pull-right.icon-2x,
.btn [class*=" icon-"].pull-right.icon-2x {
margin-top: .18em;
}
.btn [class^="icon-"].icon-spin.icon-large,
.btn [class*=" icon-"].icon-spin.icon-large {
line-height: .8em;
}
.btn.btn-small [class^="icon-"].pull-left.icon-2x,
.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
.btn.btn-small [class^="icon-"].pull-right.icon-2x,
.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
margin-top: .25em;
}
.btn.btn-large [class^="icon-"],
.btn.btn-large [class*=" icon-"] {
margin-top: 0;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x,
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
margin-top: .05em;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x {
margin-right: .2em;
}
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
margin-left: .2em;
}
/* Fixes alignment in nav lists */
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
line-height: inherit;
}
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.icon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: -35%;
}
.icon-stack [class^="icon-"],
.icon-stack [class*=" icon-"] {
display: block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
font-size: 1em;
line-height: inherit;
*line-height: 2em;
}
.icon-stack .icon-stack-base {
font-size: 2em;
*line-height: 1em;
}
/* Animated rotating icon */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
/* Prevent stack and spinners from being taken inline when inside a link */
a .icon-stack,
a .icon-spin {
display: inline-block;
text-decoration: none;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
/* Icon rotations and mirroring */
.icon-rotate-90:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270:before {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.icon-flip-horizontal:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-vertical:before {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/* ensure rotation occurs inside anchor tags */
a .icon-rotate-90:before,
a .icon-rotate-180:before,
a .icon-rotate-270:before,
a .icon-flip-horizontal:before,
a .icon-flip-vertical:before {
display: inline-block;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before {
content: "\f000";
}
.icon-music:before {
content: "\f001";
}
.icon-search:before {
content: "\f002";
}
.icon-envelope-alt:before {
content: "\f003";
}
.icon-heart:before {
content: "\f004";
}
.icon-star:before {
content: "\f005";
}
.icon-star-empty:before {
content: "\f006";
}
.icon-user:before {
content: "\f007";
}
.icon-film:before {
content: "\f008";
}
.icon-th-large:before {
content: "\f009";
}
.icon-th:before {
content: "\f00a";
}
.icon-th-list:before {
content: "\f00b";
}
.icon-ok:before {
content: "\f00c";
}
.icon-remove:before {
content: "\f00d";
}
.icon-zoom-in:before {
content: "\f00e";
}
.icon-zoom-out:before {
content: "\f010";
}
.icon-power-off:before,
.icon-off:before {
content: "\f011";
}
.icon-signal:before {
content: "\f012";
}
.icon-gear:before,
.icon-cog:before {
content: "\f013";
}
.icon-trash:before {
content: "\f014";
}
.icon-home:before {
content: "\f015";
}
.icon-file-alt:before {
content: "\f016";
}
.icon-time:before {
content: "\f017";
}
.icon-road:before {
content: "\f018";
}
.icon-download-alt:before {
content: "\f019";
}
.icon-download:before {
content: "\f01a";
}
.icon-upload:before {
content: "\f01b";
}
.icon-inbox:before {
content: "\f01c";
}
.icon-play-circle:before {
content: "\f01d";
}
.icon-rotate-right:before,
.icon-repeat:before {
content: "\f01e";
}
.icon-refresh:before {
content: "\f021";
}
.icon-list-alt:before {
content: "\f022";
}
.icon-lock:before {
content: "\f023";
}
.icon-flag:before {
content: "\f024";
}
.icon-headphones:before {
content: "\f025";
}
.icon-volume-off:before {
content: "\f026";
}
.icon-volume-down:before {
content: "\f027";
}
.icon-volume-up:before {
content: "\f028";
}
.icon-qrcode:before {
content: "\f029";
}
.icon-barcode:before {
content: "\f02a";
}
.icon-tag:before {
content: "\f02b";
}
.icon-tags:before {
content: "\f02c";
}
.icon-book:before {
content: "\f02d";
}
.icon-bookmark:before {
content: "\f02e";
}
.icon-print:before {
content: "\f02f";
}
.icon-camera:before {
content: "\f030";
}
.icon-font:before {
content: "\f031";
}
.icon-bold:before {
content: "\f032";
}
.icon-italic:before {
content: "\f033";
}
.icon-text-height:before {
content: "\f034";
}
.icon-text-width:before {
content: "\f035";
}
.icon-align-left:before {
content: "\f036";
}
.icon-align-center:before {
content: "\f037";
}
.icon-align-right:before {
content: "\f038";
}
.icon-align-justify:before {
content: "\f039";
}
.icon-list:before {
content: "\f03a";
}
.icon-indent-left:before {
content: "\f03b";
}
.icon-indent-right:before {
content: "\f03c";
}
.icon-facetime-video:before {
content: "\f03d";
}
.icon-picture:before {
content: "\f03e";
}
.icon-pencil:before {
content: "\f040";
}
.icon-map-marker:before {
content: "\f041";
}
.icon-adjust:before {
content: "\f042";
}
.icon-tint:before {
content: "\f043";
}
.icon-edit:before {
content: "\f044";
}
.icon-share:before {
content: "\f045";
}
.icon-check:before {
content: "\f046";
}
.icon-move:before {
content: "\f047";
}
.icon-step-backward:before {
content: "\f048";
}
.icon-fast-backward:before {
content: "\f049";
}
.icon-backward:before {
content: "\f04a";
}
.icon-play:before {
content: "\f04b";
}
.icon-pause:before {
content: "\f04c";
}
.icon-stop:before {
content: "\f04d";
}
.icon-forward:before {
content: "\f04e";
}
.icon-fast-forward:before {
content: "\f050";
}
.icon-step-forward:before {
content: "\f051";
}
.icon-eject:before {
content: "\f052";
}
.icon-chevron-left:before {
content: "\f053";
}
.icon-chevron-right:before {
content: "\f054";
}
.icon-plus-sign:before {
content: "\f055";
}
.icon-minus-sign:before {
content: "\f056";
}
.icon-remove-sign:before {
content: "\f057";
}
.icon-ok-sign:before {
content: "\f058";
}
.icon-question-sign:before {
content: "\f059";
}
.icon-info-sign:before {
content: "\f05a";
}
.icon-screenshot:before {
content: "\f05b";
}
.icon-remove-circle:before {
content: "\f05c";
}
.icon-ok-circle:before {
content: "\f05d";
}
.icon-ban-circle:before {
content: "\f05e";
}
.icon-arrow-left:before {
content: "\f060";
}
.icon-arrow-right:before {
content: "\f061";
}
.icon-arrow-up:before {
content: "\f062";
}
.icon-arrow-down:before {
content: "\f063";
}
.icon-mail-forward:before,
.icon-share-alt:before {
content: "\f064";
}
.icon-resize-full:before {
content: "\f065";
}
.icon-resize-small:before {
content: "\f066";
}
.icon-plus:before {
content: "\f067";
}
.icon-minus:before {
content: "\f068";
}
.icon-asterisk:before {
content: "\f069";
}
.icon-exclamation-sign:before {
content: "\f06a";
}
.icon-gift:before {
content: "\f06b";
}
.icon-leaf:before {
content: "\f06c";
}
.icon-fire:before {
content: "\f06d";
}
.icon-eye-open:before {
content: "\f06e";
}
.icon-eye-close:before {
content: "\f070";
}
.icon-warning-sign:before {
content: "\f071";
}
.icon-plane:before {
content: "\f072";
}
.icon-calendar:before {
content: "\f073";
}
.icon-random:before {
content: "\f074";
}
.icon-comment:before {
content: "\f075";
}
.icon-magnet:before {
content: "\f076";
}
.icon-chevron-up:before {
content: "\f077";
}
.icon-chevron-down:before {
content: "\f078";
}
.icon-retweet:before {
content: "\f079";
}
.icon-shopping-cart:before {
content: "\f07a";
}
.icon-folder-close:before {
content: "\f07b";
}
.icon-folder-open:before {
content: "\f07c";
}
.icon-resize-vertical:before {
content: "\f07d";
}
.icon-resize-horizontal:before {
content: "\f07e";
}
.icon-bar-chart:before {
content: "\f080";
}
.icon-twitter-sign:before {
content: "\f081";
}
.icon-facebook-sign:before {
content: "\f082";
}
.icon-camera-retro:before {
content: "\f083";
}
.icon-key:before {
content: "\f084";
}
.icon-gears:before,
.icon-cogs:before {
content: "\f085";
}
.icon-comments:before {
content: "\f086";
}
.icon-thumbs-up-alt:before {
content: "\f087";
}
.icon-thumbs-down-alt:before {
content: "\f088";
}
.icon-star-half:before {
content: "\f089";
}
.icon-heart-empty:before {
content: "\f08a";
}
.icon-signout:before {
content: "\f08b";
}
.icon-linkedin-sign:before {
content: "\f08c";
}
.icon-pushpin:before {
content: "\f08d";
}
.icon-external-link:before {
content: "\f08e";
}
.icon-signin:before {
content: "\f090";
}
.icon-trophy:before {
content: "\f091";
}
.icon-github-sign:before {
content: "\f092";
}
.icon-upload-alt:before {
content: "\f093";
}
.icon-lemon:before {
content: "\f094";
}
.icon-phone:before {
content: "\f095";
}
.icon-unchecked:before,
.icon-check-empty:before {
content: "\f096";
}
.icon-bookmark-empty:before {
content: "\f097";
}
.icon-phone-sign:before {
content: "\f098";
}
.icon-twitter:before {
content: "\f099";
}
.icon-facebook:before {
content: "\f09a";
}
.icon-github:before {
content: "\f09b";
}
.icon-unlock:before {
content: "\f09c";
}
.icon-credit-card:before {
content: "\f09d";
}
.icon-rss:before {
content: "\f09e";
}
.icon-hdd:before {
content: "\f0a0";
}
.icon-bullhorn:before {
content: "\f0a1";
}
.icon-bell:before {
content: "\f0a2";
}
.icon-certificate:before {
content: "\f0a3";
}
.icon-hand-right:before {
content: "\f0a4";
}
.icon-hand-left:before {
content: "\f0a5";
}
.icon-hand-up:before {
content: "\f0a6";
}
.icon-hand-down:before {
content: "\f0a7";
}
.icon-circle-arrow-left:before {
content: "\f0a8";
}
.icon-circle-arrow-right:before {
content: "\f0a9";
}
.icon-circle-arrow-up:before {
content: "\f0aa";
}
.icon-circle-arrow-down:before {
content: "\f0ab";
}
.icon-globe:before {
content: "\f0ac";
}
.icon-wrench:before {
content: "\f0ad";
}
.icon-tasks:before {
content: "\f0ae";
}
.icon-filter:before {
content: "\f0b0";
}
.icon-briefcase:before {
content: "\f0b1";
}
.icon-fullscreen:before {
content: "\f0b2";
}
.icon-group:before {
content: "\f0c0";
}
.icon-link:before {
content: "\f0c1";
}
.icon-cloud:before {
content: "\f0c2";
}
.icon-beaker:before {
content: "\f0c3";
}
.icon-cut:before {
content: "\f0c4";
}
.icon-copy:before {
content: "\f0c5";
}
.icon-paperclip:before,
.icon-paper-clip:before {
content: "\f0c6";
}
.icon-save:before {
content: "\f0c7";
}
.icon-sign-blank:before {
content: "\f0c8";
}
.icon-reorder:before {
content: "\f0c9";
}
.icon-list-ul:before {
content: "\f0ca";
}
.icon-list-ol:before {
content: "\f0cb";
}
.icon-strikethrough:before {
content: "\f0cc";
}
.icon-underline:before {
content: "\f0cd";
}
.icon-table:before {
content: "\f0ce";
}
.icon-magic:before {
content: "\f0d0";
}
.icon-truck:before {
content: "\f0d1";
}
.icon-pinterest:before {
content: "\f0d2";
}
.icon-pinterest-sign:before {
content: "\f0d3";
}
.icon-google-plus-sign:before {
content: "\f0d4";
}
.icon-google-plus:before {
content: "\f0d5";
}
.icon-money:before {
content: "\f0d6";
}
.icon-caret-down:before {
content: "\f0d7";
}
.icon-caret-up:before {
content: "\f0d8";
}
.icon-caret-left:before {
content: "\f0d9";
}
.icon-caret-right:before {
content: "\f0da";
}
.icon-columns:before {
content: "\f0db";
}
.icon-sort:before {
content: "\f0dc";
}
.icon-sort-down:before {
content: "\f0dd";
}
.icon-sort-up:before {
content: "\f0de";
}
.icon-envelope:before {
content: "\f0e0";
}
.icon-linkedin:before {
content: "\f0e1";
}
.icon-rotate-left:before,
.icon-undo:before {
content: "\f0e2";
}
.icon-legal:before {
content: "\f0e3";
}
.icon-dashboard:before {
content: "\f0e4";
}
.icon-comment-alt:before {
content: "\f0e5";
}
.icon-comments-alt:before {
content: "\f0e6";
}
.icon-bolt:before {
content: "\f0e7";
}
.icon-sitemap:before {
content: "\f0e8";
}
.icon-umbrella:before {
content: "\f0e9";
}
.icon-paste:before {
content: "\f0ea";
}
.icon-lightbulb:before {
content: "\f0eb";
}
.icon-exchange:before {
content: "\f0ec";
}
.icon-cloud-download:before {
content: "\f0ed";
}
.icon-cloud-upload:before {
content: "\f0ee";
}
.icon-user-md:before {
content: "\f0f0";
}
.icon-stethoscope:before {
content: "\f0f1";
}
.icon-suitcase:before {
content: "\f0f2";
}
.icon-bell-alt:before {
content: "\f0f3";
}
.icon-coffee:before {
content: "\f0f4";
}
.icon-food:before {
content: "\f0f5";
}
.icon-file-text-alt:before {
content: "\f0f6";
}
.icon-building:before {
content: "\f0f7";
}
.icon-hospital:before {
content: "\f0f8";
}
.icon-ambulance:before {
content: "\f0f9";
}
.icon-medkit:before {
content: "\f0fa";
}
.icon-fighter-jet:before {
content: "\f0fb";
}
.icon-beer:before {
content: "\f0fc";
}
.icon-h-sign:before {
content: "\f0fd";
}
.icon-plus-sign-alt:before {
content: "\f0fe";
}
.icon-double-angle-left:before {
content: "\f100";
}
.icon-double-angle-right:before {
content: "\f101";
}
.icon-double-angle-up:before {
content: "\f102";
}
.icon-double-angle-down:before {
content: "\f103";
}
.icon-angle-left:before {
content: "\f104";
}
.icon-angle-right:before {
content: "\f105";
}
.icon-angle-up:before {
content: "\f106";
}
.icon-angle-down:before {
content: "\f107";
}
.icon-desktop:before {
content: "\f108";
}
.icon-laptop:before {
content: "\f109";
}
.icon-tablet:before {
content: "\f10a";
}
.icon-mobile-phone:before {
content: "\f10b";
}
.icon-circle-blank:before {
content: "\f10c";
}
.icon-quote-left:before {
content: "\f10d";
}
.icon-quote-right:before {
content: "\f10e";
}
.icon-spinner:before {
content: "\f110";
}
.icon-circle:before {
content: "\f111";
}
.icon-mail-reply:before,
.icon-reply:before {
content: "\f112";
}
.icon-github-alt:before {
content: "\f113";
}
.icon-folder-close-alt:before {
content: "\f114";
}
.icon-folder-open-alt:before {
content: "\f115";
}
.icon-expand-alt:before {
content: "\f116";
}
.icon-collapse-alt:before {
content: "\f117";
}
.icon-smile:before {
content: "\f118";
}
.icon-frown:before {
content: "\f119";
}
.icon-meh:before {
content: "\f11a";
}
.icon-gamepad:before {
content: "\f11b";
}
.icon-keyboard:before {
content: "\f11c";
}
.icon-flag-alt:before {
content: "\f11d";
}
.icon-flag-checkered:before {
content: "\f11e";
}
.icon-terminal:before {
content: "\f120";
}
.icon-code:before {
content: "\f121";
}
.icon-reply-all:before {
content: "\f122";
}
.icon-mail-reply-all:before {
content: "\f122";
}
.icon-star-half-full:before,
.icon-star-half-empty:before {
content: "\f123";
}
.icon-location-arrow:before {
content: "\f124";
}
.icon-crop:before {
content: "\f125";
}
.icon-code-fork:before {
content: "\f126";
}
.icon-unlink:before {
content: "\f127";
}
.icon-question:before {
content: "\f128";
}
.icon-info:before {
content: "\f129";
}
.icon-exclamation:before {
content: "\f12a";
}
.icon-superscript:before {
content: "\f12b";
}
.icon-subscript:before {
content: "\f12c";
}
.icon-eraser:before {
content: "\f12d";
}
.icon-puzzle-piece:before {
content: "\f12e";
}
.icon-microphone:before {
content: "\f130";
}
.icon-microphone-off:before {
content: "\f131";
}
.icon-shield:before {
content: "\f132";
}
.icon-calendar-empty:before {
content: "\f133";
}
.icon-fire-extinguisher:before {
content: "\f134";
}
.icon-rocket:before {
content: "\f135";
}
.icon-maxcdn:before {
content: "\f136";
}
.icon-chevron-sign-left:before {
content: "\f137";
}
.icon-chevron-sign-right:before {
content: "\f138";
}
.icon-chevron-sign-up:before {
content: "\f139";
}
.icon-chevron-sign-down:before {
content: "\f13a";
}
.icon-html5:before {
content: "\f13b";
}
.icon-css3:before {
content: "\f13c";
}
.icon-anchor:before {
content: "\f13d";
}
.icon-unlock-alt:before {
content: "\f13e";
}
.icon-bullseye:before {
content: "\f140";
}
.icon-ellipsis-horizontal:before {
content: "\f141";
}
.icon-ellipsis-vertical:before {
content: "\f142";
}
.icon-rss-sign:before {
content: "\f143";
}
.icon-play-sign:before {
content: "\f144";
}
.icon-ticket:before {
content: "\f145";
}
.icon-minus-sign-alt:before {
content: "\f146";
}
.icon-check-minus:before {
content: "\f147";
}
.icon-level-up:before {
content: "\f148";
}
.icon-level-down:before {
content: "\f149";
}
.icon-check-sign:before {
content: "\f14a";
}
.icon-edit-sign:before {
content: "\f14b";
}
.icon-external-link-sign:before {
content: "\f14c";
}
.icon-share-sign:before {
content: "\f14d";
}
.icon-compass:before {
content: "\f14e";
}
.icon-collapse:before {
content: "\f150";
}
.icon-collapse-top:before {
content: "\f151";
}
.icon-expand:before {
content: "\f152";
}
.icon-euro:before,
.icon-eur:before {
content: "\f153";
}
.icon-gbp:before {
content: "\f154";
}
.icon-dollar:before,
.icon-usd:before {
content: "\f155";
}
.icon-rupee:before,
.icon-inr:before {
content: "\f156";
}
.icon-yen:before,
.icon-jpy:before {
content: "\f157";
}
.icon-renminbi:before,
.icon-cny:before {
content: "\f158";
}
.icon-won:before,
.icon-krw:before {
content: "\f159";
}
.icon-bitcoin:before,
.icon-btc:before {
content: "\f15a";
}
.icon-file:before {
content: "\f15b";
}
.icon-file-text:before {
content: "\f15c";
}
.icon-sort-by-alphabet:before {
content: "\f15d";
}
.icon-sort-by-alphabet-alt:before {
content: "\f15e";
}
.icon-sort-by-attributes:before {
content: "\f160";
}
.icon-sort-by-attributes-alt:before {
content: "\f161";
}
.icon-sort-by-order:before {
content: "\f162";
}
.icon-sort-by-order-alt:before {
content: "\f163";
}
.icon-thumbs-up:before {
content: "\f164";
}
.icon-thumbs-down:before {
content: "\f165";
}
.icon-youtube-sign:before {
content: "\f166";
}
.icon-youtube:before {
content: "\f167";
}
.icon-xing:before {
content: "\f168";
}
.icon-xing-sign:before {
content: "\f169";
}
.icon-youtube-play:before {
content: "\f16a";
}
.icon-dropbox:before {
content: "\f16b";
}
.icon-stackexchange:before {
content: "\f16c";
}
.icon-instagram:before {
content: "\f16d";
}
.icon-flickr:before {
content: "\f16e";
}
.icon-adn:before {
content: "\f170";
}
.icon-bitbucket:before {
content: "\f171";
}
.icon-bitbucket-sign:before {
content: "\f172";
}
.icon-tumblr:before {
content: "\f173";
}
.icon-tumblr-sign:before {
content: "\f174";
}
.icon-long-arrow-down:before {
content: "\f175";
}
.icon-long-arrow-up:before {
content: "\f176";
}
.icon-long-arrow-left:before {
content: "\f177";
}
.icon-long-arrow-right:before {
content: "\f178";
}
.icon-apple:before {
content: "\f179";
}
.icon-windows:before {
content: "\f17a";
}
.icon-android:before {
content: "\f17b";
}
.icon-linux:before {
content: "\f17c";
}
.icon-dribbble:before {
content: "\f17d";
}
.icon-skype:before {
content: "\f17e";
}
.icon-foursquare:before {
content: "\f180";
}
.icon-trello:before {
content: "\f181";
}
.icon-female:before {
content: "\f182";
}
.icon-male:before {
content: "\f183";
}
.icon-gittip:before {
content: "\f184";
}
.icon-sun:before {
content: "\f185";
}
.icon-moon:before {
content: "\f186";
}
.icon-archive:before {
content: "\f187";
}
.icon-bug:before {
content: "\f188";
}
.icon-vk:before {
content: "\f189";
}
.icon-weibo:before {
content: "\f18a";
}
.icon-renren:before {
content: "\f18b";
}
/*FONT*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
*{font-family: 'Roboto', sans-serif;}
.fontweight400{font-weight: 400 !important;}
.width75{width:75% !important;}
.width50{width:50% !important;}
/*COLORS*/
/*THEMES & BACKGROUND*/
.themelogin_background{background: url("../assets/img/cab_login_bg.png");background-position:bottom;background-repeat: no-repeat;}
.themedark_theme{background: url("../assets/img/theme_dark_bg.png");background-position:bottom;background-repeat: no-repeat;}
.bg_none{background: none !important;}
.theme_bgcolor{background:#ff9000 !important;}
.theme_dark_bg{background:#404041 !important;}
.bg_transparent{background: transparent !important;}
/*BODY-STRUCTURE*/
.nav_header{width:100%;height: 45px;}
.nav_btn{width:45px;height:45px;background: transparent;margin: 0px;font-size: 25px;}
.nav_header_title{height:100%;font-size: 17px;color: #fff;font-weight:400;padding: 12px;width:calc(100% - 110px);font-weight: 300;letter-spacing: 3px;}
.clear{clear:both !important;}
.theme_color{color: #f7941e;}
.text_white{color:#fff !important;}
.text_size_18{font-size:18px !important;}
/*OVERWRITTEN*/
.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before {background-image:none !important}
.picker-wrapper{background:#165b93 !important;color: #fff !important;}
.picker-toolbar{background:#165b93 !important;color: #fff !important;border:none !important;}
.picker-button{color: #fff !important;}
.picker-opt{color: #fff !important;}
.picker-below-highlight{background:#165b93 !important;border:none !important;}
.picker-above-highlight{background:#165b93 !important;border:none !important;}
.popover-content{border-radius: 10px !important;width: 150px !important;min-width: 0;min-height: 0;max-height: 90%;color: #000;background:transparent !important;}
.popover-content ion-content, .popover-content .scroll-content {background: #fafafa !important;}
ion-popover{background: rgba(0,0,0,0.6) !important;}
.popover-md .popover-content{top:50px !important;}
.swiper-slide{overflow: scroll !important;}
.slide-zoom{height:100% !important;}
.menu-inner{width:220px;}
.button-md{box-shadow: none !important;}
.activated{background: transparent !important;}
.button-default{background: transparent;}
/*SPACING & POSITION*/
.width100{width:100% !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;}
.m0{margin:0px !important;}
.ml0{margin-left: 0px !important;}
.mr0{margin-right: 0px !important;}
.mt0{margin-top: 0px !important;}
.mb0{margin-bottom: 0px !important;}
.top10{top:6px;}
.bottom10{bottom:10px;}
.left10{left:10px;}
.right10{right:10px;}
.bottom0{bottom:0px !important;padding:0px !important;font-size: 13px !important;}
.absolute{position: absolute !important;}
.relative{position: relative !important;}
.fixed{position: fixed !important;}
/*ALIGNMENT*/
.floatLeft{float:left !important;}
.floatRight{float:right !important;}
.textLeft{text-align: left !important;}
.textRight{text-align: right !important;}
.textCenter{text-align: center !important;}
/*ALERT*/
.alert{padding: 15px;margin-bottom: 20px;border: 1px solid transparent;font-weight: 600;transition: all 0.5s ease;position: fixed;border-bottom:0px;left:0px;right: 0px;}
.warning{color: #fff;background-color: #8a6d3b;}
.success{color: #fff;background-color: #3c763d;}
.error{color: #fff;background-color: #a94442;}
......@@ -10,23 +10,15 @@
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCIs0lfeIa7zWX0SU4oE6irYsXkUEWe1aU"></script>
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
......
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" (click)="goBack()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Add Coupons</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="cab_coupon_bg">
<div class="cab_coupon_wrapper">
<div class="cab_coupon_box">
<input class="cab_coupon_input" placeholder="Enter Coupon Code">
</div>
<p>You don’t seem to have any valid coupons.<br>
Invite your friends. Unlock free ride coupons</p>
<div class="cab_coupon_box">
<button ion-button class="cab_coupon_apply">Apply</button>
</div>
<div class="cab_coupon_content">
<p>Payment Details</p>
<li>
<div class="child textLeft">Total</div>
<div class="child textRight">$ 150</div>
<div class="clear"></div>
</li>
<li>
<div class="child textLeft">Discount</div>
<div class="child textRight">$ 25</div>
<div class="clear"></div>
</li>
<li>
<div class="child textLeft">Due after service</div>
<div class="child textRight">$ 125</div>
<div class="clear"></div>
</li>
</div>
</div>
</ion-content>
<ion-footer>
<div class="cab_footer_btn_bay">
<button ion-button class="cab_footer_btn floatRight"(click)="pay()">PAY</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="goBack()">CANCEL</button>
<div class="clear"></div>
</div>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddcouponPage } from './addcoupon';
@NgModule({
declarations: [
AddcouponPage,
],
imports: [
IonicPageModule.forChild(AddcouponPage),
],
})
export class AddcouponPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-addcoupon',
templateUrl: 'addcoupon.html',
})
export class AddcouponPage {
constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddcouponPage');
}
goBack(){
this.navCtrl.pop();
}
pay() {
let modal = this.modalCtrl.create('ConfirmridePage');
modal.present();
}
}
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft"(click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Success</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="theme_dark_bg">
<div class="cab_logo" style="padding-bottom: 20%;">
<img src="assets/img/booking.png">
</div>
<p class="text_white textCenter cab_confirm_p">Your booking has been confirmed.<br>
Driver will pick you in 5 minute(s)</p>
</ion-content>
<ion-footer>
<button ion-button class="cab_footer_btn width100 theme_bgcolor text_white" (click)="payment()">OKAY</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ConfirmridePage } from './confirmride';
@NgModule({
declarations: [
ConfirmridePage,
],
imports: [
IonicPageModule.forChild(ConfirmridePage),
],
})
export class ConfirmridePageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController,ModalController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-confirmride',
templateUrl: 'confirmride.html',
})
export class ConfirmridePage {
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController,public modalCtrl: ModalController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ConfirmridePage');
}
dismiss()
{
this.viewCtrl.dismiss();
}
payment() {
let modal = this.modalCtrl.create('PaymentPage');
modal.present();
this.viewCtrl.dismiss()
}
}
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
<ion-content>
<div class="theme_transparent_bg cab_home_custom_header">
<button ion-button class="nav_btn theme_color floatLeft" menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3>Ionic Menu Starter</h3>
<p>
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
</p>
<button ion-button secondary menuToggle>Toggle Menu</button>
<div class="clear"></div>
</div>
<div class="cab_map">
<div #map id="map">
</div>
</div>
<button ion-button class="cab_button_search theme_bgcolor" (click)="searchride()"><ion-icon name="search"></ion-icon></button>
</ion-content>
<ion-footer>
<div class="cab_footer_location theme_bgcolor">
<input class="cab_location_input cab_current" placeholder="Pickup Location">
<input class="cab_location_input cab_destination" placeholder="Drop Location">
</div>
<div class="cab_footer_btn_bay">
<button ion-button class="cab_footer_btn floatRight" (click)="ridenow()">RIDE NOW</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="ridemore()">RIDE LATER</button>
<div class="clear"></div>
</div>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
declarations: [
HomePage,
],
imports: [
IonicPageModule.forChild(HomePage),
],
})
export class HomePageModule {}
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Component,ViewChild, ElementRef} from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController } from 'ionic-angular';
declare var google;
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController) {
@ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController) {
}
ionViewDidLoad() {
this.loadMap();
}
loadMap(){
let latLng = new google.maps.LatLng(-34.9290, 138.6010);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
ridemore() {
let modal = this.modalCtrl.create('RidepopPage');
modal.present();
}
ridenow() {
let modal = this.modalCtrl.create('RidenowPage');
modal.present();
}
searchride(){
let modal = this.modalCtrl.create('SearchridePage');
modal.present();
}
}
<ion-content class="themelogin_background">
<div class="cab_landing_wrapper">
<div class="cab_logo">
<img src="assets/img/logo.png">
</div>
<div class="cab_form">
<div class="cab_form_row">
<button ion-button class="cab_sign_btn" (click)="open_page('SignupPage')">New User? Sign Up now!</button>
</div>
<div class="cab_form_row">
<button ion-button class="cab_sign_btn1" (click)="open_page('LoginPage')">Sign In</button>
</div>
<div class="cab_form_row textCenter">
<p>Forgot Password</p>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<div class="cab_footer">
<p>Or Sign in with</p>
<li><img src="assets/img/fb.png"></li>
<li><img src="assets/img/linked.png"></li>
<div class="clear"></div>
</div>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LandingPage } from './landing';
@NgModule({
declarations: [
LandingPage,
],
imports: [
IonicPageModule.forChild(LandingPage),
],
})
export class LandingPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LandingPage');
}
open_page(page){
this.navCtrl.push(page);
}
}
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</button>
</ion-list>
<div *ngIf="selectedItem" padding>
You navigated here from <b>{{selectedItem.title}}</b>
</div>
</ion-content>
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'page-list',
templateUrl: 'list.html'
})
export class ListPage {
selectedItem: any;
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
// Let's populate this page with some filler content for funzies
this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];
this.items = [];
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)]
});
}
}
itemTapped(event, item) {
// That's right, we're pushing to ourselves!
this.navCtrl.push(ListPage, {
item: item
});
}
}
<ion-content padding class="themelogin_background">
<div class="cab_login_wrapper">
<div class="cab_logo">
<img src="assets/img/cab_logo.png" style="width: 120px;">
</div>
<h4>Login</h4>
<hr>
<br>
<div class="cab_form">
<div class="cab_form_row">
<div class="cab_phone_number">
<select class="cab_phone_code floatLeft">
<option>+91</option>
</select>
<input class="cab_phone_input floatRight cab_call" placeholder="Mobile Number">
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_pass width100" placeholder="Password">
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row textCenter">
<ion-item>
<ion-label><p>Remember me</p></ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
</div>
<br>
<div class="cab_form_row">
<button ion-button class="cab_sign_btn" (click)="open_page('HomePage')">Sign In</button>
</div>
<br>
<div class="cab_form_row textCenter">
<p>Forgot Password</p>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
})
export class LoginPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
open_page(page){
this.navCtrl.push(page);
}
goBack(){
this.navCtrl.pop();
}
}
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">My Trips</div>
<button class="nav_btn floatRight"></button>
<div class="clear"></div>
</ion-header>
<ion-content class="themelogin_background">
<div class="cab_mytrips_wrapper">
<div class="cab_trip_tabs_bay">
<ul>
<li ion-button [ngClass]="{'active' : slidertab == 0}" (click)="goToSlide(0)">All Rides</li>
<li ion-button [ngClass]="{'active' : slidertab == 1}" (click)="goToSlide(1)">Upcoming</li>
<li ion-button [ngClass]="{'active' : slidertab == 2}" (click)="goToSlide(2)">Completed</li>
<div class="clear"></div>
</ul>
</div>
<div class="cab_trip_content">
<ion-slides pager="false" #mySlider class="hm_service_slide" (ionSlideDidChange)="slideChanged()">
<ion-slide>
<ul>
<li (click)="open_page('TripdetailsPage')">
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today<span>11:30pm</span></p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
</ul>
</ion-slide>
<ion-slide>
<ul>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
</ul>
</ion-slide>
<ion-slide>
<ul>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
<li>
<h6>11 AM from taana to Mumbai Airport Domestic Terminal</h6>
<p>Today</p>
<ion-icon name="ios-arrow-forward-outline"></ion-icon>
<div class="clear"></div>
</li>
</ul>
</ion-slide>
</ion-slides>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MytripsPage } from './mytrips';
@NgModule({
declarations: [
MytripsPage,
],
imports: [
IonicPageModule.forChild(MytripsPage),
],
})
export class MytripsPageModule {}
import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,Content,Slides } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-mytrips',
templateUrl: 'mytrips.html',
})
export class MytripsPage {
showPrev:any;
showNext:any;
currentIndex:any;
slidertab:any;
@ViewChild(Content) content: Content;
@ViewChild('mySlider') slider: Slides;
constructor(public navCtrl: NavController, public navParams: NavParams) {
let id = this.navParams.get("id");
this.slidertab = id;
console.log("id", id);
setTimeout(() => {
this.goToSlide(id);
}, 500)
this.slidertab = 0;
}
ionViewDidLoad() {
console.log('ionViewDidLoad MytripsPage');
}
goToSlide(id) {
this.slider.slideTo(id, 500);
}
slideChanged() {
let currentIndex = this.slider.getActiveIndex();
this.slidertab = currentIndex;
console.log("Current index is", currentIndex);
}
open_page(page){
this.navCtrl.push(page);
}
}
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft"(click)="dismiss()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Payment Details</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="cab_coupon_bg">
<div class="cab_trip_detail_wrapper">
<h4 class="text_white">Pickup Point</h4>
<p class="floatLeft textLeft width50">North Sarovar Road,E City</p>
<p class="floatRight textRight width50">11 :23 am, 02-08-2017</p>
<div class="clear"></div>
<br>
<h4 class="text_white">Drop Point</h4>
<p class="floatLeft textLeft width50">Majestic Junction 3rd Street</p>
<p class="floatRight textRight width50">12 :00 am, 02-08-2017</p>
<div class="clear"></div>
<br>
<br>
</div>
<div class="cab_coupon_content">
<p style="padding-top: 0px;margin-top: 0px;margin-bottom: 0px;">Payment Details</p>
<li>
<div class="child textLeft">Total</div>
<div class="child textRight">$ 150</div>
<div class="clear"></div>
</li>
<li>
<div class="child textLeft">Discount</div>
<div class="child textRight">$ 25</div>
<div class="clear"></div>
</li>
<li>
<div class="child textLeft">Due after service</div>
<div class="child textRight">$ 125</div>
<div class="clear"></div>
</li>
</div>
</ion-content>
<ion-footer>
<div class="theme_bgcolor p10 text_white">
<p class="floatLeft text_size_18">Total</p>
<p class="floatRight text_size_18">$ 125</p>
<div class="clear"></div>
</div>
<button ion-button class="cab_footer_btn width100 text_white" (click)="open_page('HomePage')">OKAY</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PaymentPage } from './payment';
@NgModule({
declarations: [
PaymentPage,
],
imports: [
IonicPageModule.forChild(PaymentPage),
],
})
export class PaymentPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-payment',
templateUrl: 'payment.html',
})
export class PaymentPage {
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PaymentPage');
}
dismiss()
{
this.viewCtrl.dismiss();
}
open_page(page){
this.navCtrl.push(page);
this.viewCtrl.dismiss();
}
}
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Edit Profile</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="themelogin_background">
<div class="cab_edit_profile_wrapper">
<div class="cab_edit_profilepic_edit">
</div>
<div class="cab_edit_profile_edit_form">
<div class="cab_form">
<div class="cab_form_row cab_edit_profile_edit_row">
<div class="cab_phone_number">
<select class="cab_phone_code floatLeft">
<option>+91</option>
</select>
<input class="cab_phone_input floatRight cab_call" placeholder="Mobile Number">
<div class="clear"></div>
</div>
</div>
<div class="cab_form_row cab_edit_profile_edit_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_user width100" placeholder="Username">
<div class="clear"></div>
</div>
</div>
<div class="cab_form_row cab_edit_profile_edit_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_pass width100" placeholder="Password" type="password">
<div class="clear"></div>
</div>
</div>
<div class="cab_form_row cab_edit_profile_edit_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_pass width100" placeholder="Confirm Password" type="password">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<button ion-button class="cab_footer_btn width100 text_white">UPDATE</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfilePage } from './profile';
@NgModule({
declarations: [
ProfilePage,
],
imports: [
IonicPageModule.forChild(ProfilePage),
],
})
export class ProfilePageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the ProfilePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProfilePage');
}
}
<ion-content class="bg_transparent">
<div class="cab_ride_pop">
<div class="cab_ride_inner theme_bgcolor">
<div class="cab_ride_down_arrow theme_bgcolor">
<ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
</div>
<p>Sedan</p>
<h6>Toyota Etios, Ford Fiesta</h6>
<div class="cab_ride_fare_break">Fare Breakup</div>
<ion-grid>
<ion-row class="textCenter">
<ion-col col-4>
<strong>₹ 100</strong>
<h5>First 4km</h5>
</ion-col>
<ion-col col-4>
<strong>₹ 12/km</strong>
<h5>After 4km</h5>
</ion-col>
<ion-col col-4>
<strong>₹ 1/min</strong>
<h5>Ride time Rate</h5>
</ion-col>
</ion-row>
</ion-grid>
<h6 class="bottom0">Peak time charges may apply.</h6>
<div class="cab_trip_detail_wrapper">
<h4 class="text_white">Pickup Point</h4>
<p class="floatLeft textLeft width50">North Sarovar Road,E City</p>
<p class="floatRight textRight width50">11 :23 am, 02-08-2017</p>
<div class="clear"></div>
<br>
<h4 class="text_white">Drop Point</h4>
<p class="floatLeft textLeft width50">Majestic Junction 3rd Street</p>
<p class="floatRight textRight width50">12 :00 am, 02-08-2017</p>
<div class="clear"></div>
<br>
<br>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<button ion-button class="cab_footer_btn width100" (click)="dismiss()">OKAY</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RatecardPage } from './ratecard';
@NgModule({
declarations: [
RatecardPage,
],
imports: [
IonicPageModule.forChild(RatecardPage),
],
})
export class RatecardPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-ratecard',
templateUrl: 'ratecard.html',
})
export class RatecardPage {
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad RatecardPage');
}
dismiss()
{
this.viewCtrl.dismiss();
}
}
<ion-content class="bg_transparent">
<div class="cab_ride_pop">
<div class="cab_ride_inner theme_bgcolor" style="padding-top: 15px;">
<div class="cab_ride_down_arrow theme_bgcolor">
<ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
</div>
<ion-grid>
<ion-row>
<ion-col col-6 style="border-right: 1px solid #fff;">
<div class="cab_pop_detail_left floatLeft c1"></div>
<div class="cab_pop_details floatLeft textLeft">
<strong>Cab Type</strong>
<h5>Sedan</h5>
</div>
<div class="clear"></div>
</ion-col>
<ion-col col-6>
<div class="cab_pop_detail_left floatLeft c6"></div>
<div class="cab_pop_details floatLeft textLeft">
<strong>Pickup Time</strong>
<h5>02 Min from now</h5>
</div>
<div class="clear"></div>
</ion-col>
</ion-row>
</ion-grid>
<div class="cab_ride_offer">
<li (click)="ratecard()">Rate Card</li>
<li>Rate Estimate</li>
<div class="clear"></div>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<div class="cab_footer_btn_bay">
<button ion-button class="cab_footer_btn floatRight" (click)="addcoupon()">CONFIRM RIDE</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="dismiss()">CANCEL RIDE</button>
<div class="clear"></div>
</div>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RidenowPage } from './ridenow';
@NgModule({
declarations: [
RidenowPage,
],
imports: [
IonicPageModule.forChild(RidenowPage),
],
})
export class RidenowPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController,ModalController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-ridenow',
templateUrl: 'ridenow.html',
})
export class RidenowPage {
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController,public modalCtrl: ModalController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad RidenowPage');
}
confirm() {
let modal = this.modalCtrl.create('ConfirmridePage');
modal.present();
}
dismiss()
{
this.viewCtrl.dismiss();
}
addcoupon() {
let modal = this.modalCtrl.create('AddcouponPage');
modal.present();
}
ratecard() {
let modal = this.modalCtrl.create('RatecardPage');
modal.present();
}
}
<ion-content class="bg_transparent">
<div class="cab_ride_pop">
<div class="cab_ride_inner theme_bgcolor">
<div class="cab_ride_down_arrow theme_bgcolor">
<ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
</div>
<p>Sedan</p>
<h6>Toyota Etios, Ford Fiesta</h6>
<div class="cab_ride_fare_break">Fare Breakup</div>
<ion-grid>
<ion-row class="textCenter">
<ion-col col-4>
<strong>₹ 100</strong>
<h5>First 4km</h5>
</ion-col>
<ion-col col-4>
<strong>₹ 12/km</strong>
<h5>After 4km</h5>
</ion-col>
<ion-col col-4>
<strong>₹ 1/min</strong>
<h5>Ride time Rate</h5>
</ion-col>
</ion-row>
</ion-grid>
<h6 class="bottom0">Peak time charges may apply.</h6>
<div class="cab_ride_bottom_section">
<li class="c1">
<p>1 min</p>
</li>
<li class="c2">
<p>5 min</p>
</li>
<li class="c3">
<p>3 min</p>
</li>
<li class="c4">
<p>Arriving</p>
</li>
<li class="c5">
<p>Out</p>
</li>
<div class="clear"></div>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<div class="cab_footer_btn_bay">
<button ion-button class="cab_footer_btn floatRight" (click)="dismiss()">RIDE NOW</button>
<button ion-button class="cab_footer_btn floatLeft" (click)="dismiss()">RIDE LATER</button>
<div class="clear"></div>
</div>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RidepopPage } from './ridepop';
@NgModule({
declarations: [
RidepopPage,
],
imports: [
IonicPageModule.forChild(RidepopPage),
],
})
export class RidepopPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController} from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-ridepop',
templateUrl: 'ridepop.html',
})
export class RidepopPage {
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad RidepopPage');
}
dismiss()
{
this.viewCtrl.dismiss();
}
}
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" (click)="dismiss()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Search Results</div>
<button class="nav_btn floatRight"></button>
<div class="clear"></div>
<div class="cab_footer_location theme_dark_bg">
<input class="cab_location_input cab_search" placeholder="Search for rides">
</div>
</ion-header>
<ion-content class="themedark_theme">
<div class="cab_search_result_page">
<p>Popular Search</p>
<ul>
<li>
<h5>Mumbai International Airport Terminal</h5>
<h6>Santacruz Bay,Mumbai,India</h6>
</li>
<li>
<h5>Mumbai International Airport Terminal</h5>
<h6>Santacruz Bay,Mumbai,India</h6>
</li>
<li>
<h5>Mumbai International Airport Terminal</h5>
<h6>Santacruz Bay,Mumbai,India</h6>
</li>
<li>
<h5>Mumbai International Airport Terminal</h5>
<h6>Santacruz Bay,Mumbai,India</h6>
</li>
<li>
<h5>Mumbai International Airport Terminal</h5>
<h6>Santacruz Bay,Mumbai,India</h6>
</li>
<li>
<h5>Mumbai International Airport Terminal</h5>
<h6>Santacruz Bay,Mumbai,India</h6>
</li>
<li>
<h5>Mumbai International Airport Terminal</h5>
<h6>Santacruz Bay,Mumbai,India</h6>
</li>
</ul>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SearchridePage } from './searchride';
@NgModule({
declarations: [
SearchridePage,
],
imports: [
IonicPageModule.forChild(SearchridePage),
],
})
export class SearchridePageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-searchride',
templateUrl: 'searchride.html',
})
export class SearchridePage {
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SearchridePage');
}
dismiss()
{
this.viewCtrl.dismiss();
}
}
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="themelogin_background">
</ion-content>
<ion-footer>
<button ion-button class="cab_footer_btn width100 text_white">SAVE</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingsPage } from './settings';
@NgModule({
declarations: [
SettingsPage,
],
imports: [
IonicPageModule.forChild(SettingsPage),
],
})
export class SettingsPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the SettingsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-settings',
templateUrl: 'settings.html',
})
export class SettingsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SettingsPage');
}
}
<ion-content padding class="themelogin_background">
<div class="cab_login_wrapper">
<div class="cab_logo">
<img src="assets/img/cab_logo.png" style="width: 120px;">
</div>
<h4>Sign Up</h4>
<hr>
<br>
<div class="cab_form">
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_user width100" placeholder="Username">
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row">
<div class="cab_phone_number">
<select class="cab_phone_code floatLeft">
<option>+91</option>
</select>
<input class="cab_phone_input floatRight cab_call" placeholder="Mobile Number">
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_mail width100" placeholder="Email">
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_pass width100" placeholder="Password">
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row">
<div class="cab_phone_number">
<input class="cab_phone_input cab_confirmpass width100" placeholder="Confirm Password">
<div class="clear"></div>
</div>
</div>
<br>
<div class="cab_form_row textCenter">
<ion-item style="width:100%;">
<ion-label><p>I accept terms & condition</p></ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
</div>
<br>
<div class="cab_form_row">
<button ion-button class="cab_sign_btn" (click)="open_page('HomePage')">Sign Up</button>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SignupPage } from './signup';
@NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage),
],
})
export class SignupPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SignupPage');
}
open_page(page){
this.navCtrl.push(page);
}
goBack(){
this.navCtrl.pop();
}
}
<ion-header class="theme_dark_bg">
<button ion-button class="nav_btn theme_color floatLeft" (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Trips Details</div>
<button class="nav_btn floatRight"></button>
<div class="clear"></div>
</ion-header>
<ion-content class="themelogin_background">
<div class="cab_trip_detail_wrapper">
<h4>Pickup Point</h4>
<p class="floatLeft textLeft width50">North Sarovar Road,E City</p>
<p class="floatRight textRight width50">11 :23 am, 02-08-2017</p>
<div class="clear"></div>
<br>
<h4>Drop Point</h4>
<p class="floatLeft textLeft width50">Majestic Junction 3rd Street</p>
<p class="floatRight textRight width50">12 :00 am, 02-08-2017</p>
<div class="clear"></div>
<br>
<br>
<hr>
<ion-grid class="p0">
<ion-row>
<ion-col col-6 class="p0">
<h4>CAB DETAILS</h4>
<p>Sedan</p>
<p>Ford Fiesta</p>
<p>KA 01 CJ 6844 </p>
</ion-col>
<ion-col col-6 class="p0">
<h4>DRIVER DETAILS</h4>
<p>Balakrishnan</p>
<p>+91 9961531199</p>
<p><strong>Call Now</strong></p>
</ion-col>
</ion-row>
</ion-grid>
<br>
<br>
<hr>
<h4>PAYMENT DETAILS</h4>
<p class="floatLeft textLeft">Amount Charged</p>
<p class="floatRight textRight">Rs 107</p>
<div class="clear"></div>
<p class="floatLeft textLeft">Discount Amount</p>
<p class="floatRight textRight">Rs 07</p>
<div class="clear"></div>
<p class="floatLeft textLeft">Amount Payable</p>
<p class="floatRight textRight"><strong>Rs 100</strong></p>
<div class="clear"></div>
<br>
<br>
<h4 class="textCenter">Kindly Rate us for our service.</h4>
<p class="textCenter">Your ratting is important for our better service.</p>
<div class="cab_ratting">
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
<div class="clear"></div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TripdetailsPage } from './tripdetails';
@NgModule({
declarations: [
TripdetailsPage,
],
imports: [
IonicPageModule.forChild(TripdetailsPage),
],
})
export class TripdetailsPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-tripdetails',
templateUrl: 'tripdetails.html',
})
export class TripdetailsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TripdetailsPage');
}
back(){
this.navCtrl.pop();
}
}
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