Commit 065e3c5b by amal

initial_push

parents
{
"repoId": "2a335717-a682-49f8-8f2d-71dddfbb1eac",
"lastSync": 0
}
\ No newline at end of file
# EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
\ No newline at end of file
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore
*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
npm-debug.log*
.idea/
.sourcemaps/
.sass-cache/
.tmp/
.versions/
coverage/
dist/
node_modules/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/
.DS_Store
Thumbs.db
UserInterfaceState.xcuserstate
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>soulmate</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/[email protected]" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/[email protected]" width="80" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/[email protected]" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="180" src="resources/ios/icon/[email protected]" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/[email protected]" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/[email protected]" width="152" />
<icon height="167" src="resources/ios/icon/[email protected]" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<engine name="android" spec="^6.2.3" />
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.19" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
</widget>
{
"name": "soulmate",
"app_id": "24d4f5d5",
"type": "ionic-angular",
"integrations": {
"cordova": {}
}
}
ionicgit @ e4954c7f
Subproject commit e4954c7f742bcc2da2ef002e4a72540cf400f001
{
"name": "soulmate",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "4.8.0",
"@ionic-native/splash-screen": "4.8.0",
"@ionic-native/status-bar": "4.8.0",
"@ionic/pro": "1.0.20",
"@ionic/storage": "2.1.3",
"cordova-android": "^6.2.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.1.19",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.10",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {}
},
"platforms": [
"android"
]
}
}
\ No newline at end of file
These are Cordova resources. You can replace icon.png and splash.png and run
`ionic cordova resources` to generate custom icons and splash screens for your
app. See `ionic cordova resources --help` for details.
Cordova reference documentation:
- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
3f1bbdf1aefcb5ce7b60770ce907c68f
\ No newline at end of file
2412a8324a656ec5993eb50b3b293c69
\ No newline at end of file
import { Component, ViewChild } from '@angular/core';
import { Nav,Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage:any = "LandingPage";
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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.
statusBar.styleDefault();
splashScreen.hide();
});
}
myprofile(){
this.nav.setRoot("MyprofilePage");
}
settings(){
this.nav.setRoot("SettingsPage");
}
mail(){
this.nav.setRoot("MailboxPage");
}
home(){
this.nav.setRoot("HomePage");
}
package(){
this.nav.setRoot("PackagePage");
}
success(){
this.nav.setRoot("SuccessstoriesPage");
}
daily(){
this.nav.setRoot("DailyrecomendationPage");
}
}
<ion-menu [content]="content">
<ion-content>
<div class="sidemenu_wrapper">
<div class="sidemenu_top">
<div class="sidemenu_circle">
<div class="edit">
<ion-icon name="md-create"></ion-icon>
</div>
</div>
<div class="sidemenu_detail">
<h5>Ann Alexander</h5>
<p>E345Y568</p>
</div>
<div class="clear"></div>
<div class="special_menu">
<li (click)="home()" menuToggle>
<div class="edit">00</div>
<img src="../assets/imgs/matches.png">
<p>My Matches</p>
</li>
<li>
<div class="edit">85</div>
<img src="../assets/imgs/shortlisted.png">
<p>Shortlisted</p>
</li>
<li>
<div class="edit">74</div>
<img src="../assets/imgs/near.png">
<p>Near you</p>
</li>
<li (click)="mail()" menuToggle>
<div class="edit">07</div>
<img src="../assets/imgs/mailbox.png">
<p>Mail Box</p>
</li>
</div>
<hr>
<div class="sidemenu_list">
<li (click)="myprofile()" menuToggle>View my profile
<div class="edit">5</div>
</li>
<li>Shortlisted me
<div class="edit">2</div>
</li>
<li (click)="settings()" menuToggle>Settings</li>
<li (click)="daily()" menuToggle>Daily Recomendations</li>
<li (click)="package()" menuToggle>Upgrade Account</li>
<li (click)="success()" menuToggle>Success Stories</li>
</div>
</div>
</div>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
/*
Site Name: Soulmate
URI: http:
Description: This is the theme css for Soulmate
Version: 0.1
Author: Amal-Techware Solution
Author URI:
Tags:
---------------------------
THEME STYLES
---------------------------
TABLE OF CONTENTS
---------------------------
01. FONTS-N-SIZES
02. FONTS-COLOR
03. THEMES-N-BACKGROUNDS
04. SPACING-N-POSITIONS
05. ALIGMENTS
06. ALERTS-N-MESSAGES
07. BODY-STRUCTURE
08. OVERWRITTEN
*/
/*-------------------------------
01. FONTS-N-SIZES
--------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
*{font-family: 'Roboto', sans-serif;}
*::-webkit-scrollbar {display: none;}
.no-scroll .scroll-content{overflow: hidden;}
a{text-decoration: none !important;}
/*-------------------------------
02. FONTS-SETTINGS
--------------------------------*/
.text_color_white{color:hsl(0, 0%, 100%) !important;}
.text_color_theme{color:#ee3380 !important;}
.font_size_xs{font-size:12px !important;}
.font_size_sm{font-size:14px !important;}
.font_size_md{font-size:16px !important;}
.font_size_lg{font-size:18px !important;}
.font_size_xl{font-size:20px !important;}
.font_size_vl{font-size:35px !important;}
.font_weight300{font-weight: 300 !important;}
.font_weight400{font-weight: 400 !important;}
.font_weight500{font-weight: 500 !important;}
.font_weight600{font-weight: 600 !important;}
/*-------------------------------
03. THEMES-N-BACKGROUNDS
--------------------------------*/
.theme_background{background-color: #ee3380 !important;border: 1px solid #ee3380;}
.theme_transparent{background:transparent !important;}
.theme_white{background-color: #f7f8fd !important;}
.theme_off_white{background-color: #f4f4f4 !important;}
.theme_dark_transparent{background-color: rgba(0,0,0,0.6) !important;}
.theme_white_transparent{background-color: rgba(243,243,243,0.6) !important;}
.setting_bg{background: #fafaf6;}
/*-------------------------------
04. SPACING-N-POSITIONS
--------------------------------*/
.width25{width:25% !important;}
.width50{width:50% !important;}
.width75{width:75% !important;}
.widthFull{width:100% !important;}
.widthAuto{width: auto !important;}
.height25{height:25% !important;}
.height50{height:50% !important;}
.height75{width:75% !important;}
.heightFull{height:100% !important;}
.heightAuto{height: auto !important;}
.p0{padding:0px !important;}
.pl0{padding-left: 0px !important;}
.pr0{padding-right:0px !important;}
.pt0{padding-top:0px !important;}
.pb0{padding-bottom: 0px !important;}
.p10{padding:10px !important;}
.pl10{padding-left: 10px !important;}
.m0{margin:0px !important;}
.ml0{margin-left: 0px !important;}
.mr0{margin-right: 0px !important;}
.mt0{margin-top: 0px !important;}
.mb0{margin-bottom: 0px !important;}
.mAuto{margin:0 auto !important;}
.clear{clear:both !important;}
.absolute{position: absolute !important;}
.relative{position: relative !important;}
.fixed{position: fixed !important;}
/*-------------------------------
05. ALIGMENTS
--------------------------------*/
.floatLeft{float:left !important;}
.floatRight{float:right !important;}
.textLeft{text-align: left !important;}
.textRight{text-align: right !important;}
.textCenter{text-align: center !important;}
/*-------------------------------
06. ALERTS-N-MESSAGES
--------------------------------*/
.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;}
/*-------------------------------
07. BODY-STRUCTURE
--------------------------------*/
.nav_header{width:100%;z-index: 999;background: #fff;}
.nav_btn{width:45px !important;height:45px !important;background: transparent;margin: 0px;font-size: 25px;color: #282828;padding: 0px !important;box-shadow: none !important;}
.nav_header_title{height:100%;font-weight: 400;font-size:20px;color: #282828;padding:10px;font-weight:400;text-align:center;text-transform: capitalize;width:calc(100% - 90px);letter-spacing:1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 8px;padding-right: 8px;text-align:center;}
.nav_header_title .icon{}
.clear{clear:both !important;}
.border{border:1px solid;}
.borderNone{border:none !important;}
.see_btn{font-size: 18px !important;text-transform: capitalize !important;}
.nav_inner_btn{width:45px !important;height:45px !important;background: transparent;margin: 0px;font-size: 25px;color: #fff;padding: 0px !important;box-shadow: none !important;background-repeat: no-repeat !important;background-position: center !important;background-size: 35px !important;}
.nav_header_inner_title{height:100%;font-weight: 400;font-size:20px;color: #fff;padding:10px;font-weight:300;text-align:left;text-transform: capitalize;width:calc(100% - 90px);letter-spacing:1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 8px;padding-right: 8px;}
.nav_header_inner_title .icon{}
/*-------------------------------
08. OVERWRITTEN
--------------------------------*/
.activated{background: transparent !important;}
button{box-shadow: none !important;}
.item {
background: transparent !important;
padding:0px !important;
border:none !important;
.item-inner{
padding:0px !important;
.input {
height: 100%;
.text-input{
padding: 0px !important;
margin:0px !important;
width:100%;
}
}
}
}
.button-md:hover:not(.disable-hover){background: transparent !important;}
.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before{
background: transparent !important;
}
.alert-radio-group{
border:none !important;
}
.nav_menu{
background: url("../assets/imgs/nav_menu.png")
}
.sidemenu_wrapper{
width:100%;
padding: 20px;
padding-top: 30px;
.sidemenu_top{
.sidemenu_circle{
width: 80px;
height:80px;
border-radius:50%;
background: #d12d82;
float: left;
position: relative;
img{
width:100%;
height: 100%;
border-radius:50%;
object-fit: cover;
object-position: center;
}
.edit{
position: absolute;
top:0px;
right:0px;
width:30px;
height:30px;
background: #d12d4c;
border-radius:50%;
text-align: center;
color: #fff;
padding: 7px;
font-size: 12px;
}
}
.sidemenu_detail{
float: left;
padding: 20px;
h5{
margin: 0px;
color: #282828;
}
p{
margin:0px;
color: #626262;
}
}
.special_menu{
width:100%;
padding-top: 40px;
li{
list-style: none;
display: inline-block;
text-align: center;
width: 30%;
margin: 20px;
margin-left: 0px;
padding-bottom:20px;
position: relative;
img{
width:35px;
}
p{
margin: 0px;
color: #686868;
padding-top: 5px;
}
.edit{
position: absolute;
top: -10px;
right: -15px;
width:25px;
height:25px;
background: #d12d4c;
border-radius:50%;
text-align: center;
color: #fff;
padding: 5px;
font-size: 10px;
}
}
}
hr{
margin:0px;
padding:0px;
height:0px;
width:20px;
border:2px solid #282828;
height:0px;
border-radius:20px;
}
}
.sidemenu_list{
padding-top: 25px;
overflow: scroll;
li{
list-style: none;
color: #686868;
padding-top: 10px;
padding-bottom:10px;
font-size: 16px;
position: relative;
.edit{
position: absolute;
top: 6px;
right:0px;
width:25px;
height:25px;
background: #d12d4c;
border-radius:50%;
text-align: center;
color: #fff;
padding: 5px;
font-size: 12px;
}
}
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<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 (remove if not needed) -->
<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>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
{
"name": "Ionic",
"short_name": "Ionic",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#4e8ef7",
"theme_color": "#4e8ef7"
}
\ No newline at end of file
<!--
Generated template for the AboutPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>about</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AboutPage } from './about';
@NgModule({
declarations: [
AboutPage,
],
imports: [
IonicPageModule.forChild(AboutPage),
],
})
export class AboutPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the AboutPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-about',
templateUrl: 'about.html',
})
export class AboutPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AboutPage');
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1" radio-group>
Account Settings
</div>
<p>Your Profile Privacy has been set as "Show my Profile to all including visitors"
</p>
<ion-item>
<ion-label>Show my Profile to all including visitors</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Show my Profile to registered members only</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
<br>
<ion-item>
<ion-checkbox></ion-checkbox>
<ion-label>Let others know that I shortlisted their profile.</ion-label>
</ion-item>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="save">Submit</button>
<button ion-button class="reset">Cancel</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AccountsettingsPage } from './accountsettings';
@NgModule({
declarations: [
AccountsettingsPage,
],
imports: [
IonicPageModule.forChild(AccountsettingsPage),
],
})
export class AccountsettingsPageModule {}
page-accountsettings {
.settings_wrapper {
.setting_head {
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
}
.m1 {
background: url("../assets/imgs/account_settings_icon.png");
}
p {
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 0px;
margin: 0px;
}
.item-inner {
border: none !important;
.label {
color: #858585;
font-weight: 300;
margin: 0px;
font-size: 17px;
}
}
}
.row {
margin-bottom: 20px;
}
.toggle {
padding: 5px;
}
.save {
background: #d12d82;
border: 2px solid #d12d82;
color: #fff;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
.reset {
background: transparent;
border: 2px solid #939393;
color: #939393;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-accountsettings',
templateUrl: 'accountsettings.html',
})
export class AccountsettingsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AccountsettingsPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Add Photo</div>
<button ion-button class="nav_btn floatRight see_btn">Skip</button>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="addphoto_wrapper">
<h5>Add a Photo to<br>
complete your Profile</h5>
<p>Profiles with Photos get 20 times<br>
more responses !</p>
<div class="add_photo_circle">
<div class="edit_btn">
<ion-icon name="md-create"></ion-icon>
</div>
</div>
<div class="add_photo_bay">
<li class="floatLeft">
<img src="../assets/imgs/upload.png">
<p>Upload</p>
</li>
<li class="floatRight borderNone">
<img src="../assets/imgs/camera.png">
<p>Camera</p>
</li>
<div class="clear"></div>
</div>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="main_btn login_btn widthFull" (click)="next()">Next</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddphotoPage } from './addphoto';
@NgModule({
declarations: [
AddphotoPage,
],
imports: [
IonicPageModule.forChild(AddphotoPage),
],
})
export class AddphotoPageModule {}
page-addphoto {
.addphoto_wrapper{
width:100%;
padding-top: 30px;
h5{
color: #282828;
text-align: center;
font-size: 28px;
font-weight: 400;
line-height: 35px;
}
p{
text-align: center;
color: #6c6c6c;
font-size: 16px;
padding-bottom: 30px;
}
.add_photo_circle{
width:150px;
height:150px;
border-radius: 50%;
background-color: #dcd7e1 !important;
background: url("../assets/imgs/avatar.png");
margin:0 auto;
background-position: center;
background-repeat: no-repeat;
background-size: 48px;
position: relative;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
.edit_btn{
width:30px;
height:30px;
border-radius: 50%;
background: #d12d4c;
position: absolute;
top:15px;
right:0px;
color: #fff;
text-align:center;
padding: 6px;
}
}
.add_photo_bay{
width:250px;
margin: 0 auto;
padding-top: 30px;
li{
width:50%;
list-style: none;
text-align: center;
border-right:1px solid #a4a4a4;
img{
width:35px;
}
p{
margin:0px;
padding:0px;
font-weight: 500;
color: #8a8888;
}
}
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-addphoto',
templateUrl: 'addphoto.html',
})
export class AddphotoPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddphotoPage');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("HobbiesPage");
}
}
<ion-header class="nav_header theme_background">
<button ion-button class=" nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1">
Change Password
</div>
<p>Your password must have a minimum of 6 characters. We recommend you choose an alphanumeric password</p>
<ion-input placeholder="Current Password" type="password"></ion-input>
<ion-input placeholder="New Password" type="password"></ion-input>
<ion-input placeholder="Confirm Password" type="password"></ion-input>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="save">Save</button>
<button ion-button class="reset">Reset</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ChangepassPage } from './changepass';
@NgModule({
declarations: [
ChangepassPage,
],
imports: [
IonicPageModule.forChild(ChangepassPage),
],
})
export class ChangepassPageModule {}
page-changepass {
.settings_wrapper{
.setting_head{
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left:60px;
}
.m1{
background: url("../assets/imgs/changepass_icon.png");
}
p{
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 10px;
}
.input {
border-bottom:1px solid #acacac;
.text-input{
margin-left: 0px;
margin-right: 0px;
width: 100%;
font-size: 16px;
font-weight: 300;
}
}
}
.save{
background: #d12d82;
border:2px solid #d12d82;
color: #fff;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
.reset{
background:transparent;
border:2px solid #939393;
color: #939393;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-changepass',
templateUrl: 'changepass.html',
})
export class ChangepassPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ChangepassPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Madona Mary</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="chat_sign_bg home_background">
<div class="chat_chat_wrap">
<ul>
<li class="chat_received">
<div class="chat_message_photo"></div>
<div class="chat_message_content">
<div class="chat_arrow"></div>
<span>Apr 13</span><span>10 : 00 am</span>
<p>Hi, Ann Alexander</p>
</div>
<div class="clear"></div>
</li>
<li class="chat_sented">
<div class="chat_message_photo"></div>
<div class="chat_message_content">
<div class="chat_arrow"></div>
<span>Apr 13</span><span>10 : 00 am</span>
<p>Hi, I needed a Nutrition expert</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
<ion-footer>
<div class="chat_chat_type_wrapper">
<div class="chat_smiley"></div>
<input class="chat_type_text" type="text" placeholder="Type your message here">
<button class="chat_send">SEND</button>
<div class="clear"></div>
</div>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ChatPage } from './chat';
@NgModule({
declarations: [
ChatPage,
],
imports: [
IonicPageModule.forChild(ChatPage),
],
})
export class ChatPageModule {}
page-chat {
.chat_chat_wrap{width:100%;}
.chat_chat_wrap ul{margin:0px;padding:0px;}
.chat_chat_wrap ul li{list-style:none;padding-bottom:20px;}
.chat_message_photo{width:60px;height:60px;border-radius:50%;}
.chat_message_photo img{width:100%;height:100%;border-radius:50%;object-fit: cover;object-position: center;}
.chat_message_content{position: relative;}
.chat_message_content h6{margin:0px;padding-bottom: 10px;font-weight: 400;}
.chat_message_content p{margin:0px;padding:10px;border-radius:20px;padding-left:20px;padding-right:20px;margin-top:5px; font-weight: 300;}
.chat_message_content span{margin:0px;color:#a4a1a1;font-size: 10px;}
.chat_received{}
.chat_sented{}
.chat_received .chat_message_photo{float:left;background:#d12d82;}
.chat_received .chat_message_content{float:left;text-align:left;padding-left:15px;}
.chat_received .chat_message_content p{background:#d12d82;color:#fff;border-top-left-radius: 0px;}
.chat_received .chat_message_content span{margin-right:10px;}
.chat_received .chat_message_content .chat_arrow{width:30px;height:30px;background: url("../assets/imgs/received.png");position: absolute;bottom:25px;left:0px;}
.chat_sented .chat_message_photo{float:right;background:#7f7f7f;}
.chat_sented .chat_message_content{float:right;text-align:right;padding-right:15px;}
.chat_sented .chat_message_content p{background:#7f7f7f;color:#fff;border-top-right-radius: 0px;}
.chat_sented .chat_message_content span{margin-left:10px;}
.chat_sented .chat_message_content .chat_arrow{width:30px;height:30px;background: url("../assets/imgs/sented.png");position: absolute;top:0px;right:0px;}
.chat_chat_type_wrapper{width:100%;position: relative;padding: 10px;}
.chat_chat_type_wrapper input{width:100%;height:45px;font-size: 16px;border:none;padding-left:45px;color: #a2a2a2;font-weight:400;}
.chat_chat_type_wrapper input::placeholder{color: #a2a2a2;}
.chat_send{position: absolute;top:15px;right:10px;color:#fff;background:#d12d4c;padding-left:20px;padding-right:20px;height: 35px;border-radius: 20px;}
.chat_msg_btn{background: transparent;padding: 10px;padding-left:0px;}
.chat_msg_btn img{width: 20px;}
.chat_smiley{width:40px;height:40px;background: url("../assets/imgs/smiley.png");position: absolute;left:5px;top:12px;background-position: center;background-repeat: no-repeat;background-size: 20px;}
.chat_attach{}
.chat_photo{}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-chat',
templateUrl: 'chat.html',
})
export class ChatPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ChatPage');
}
back(){
this.navCtrl.pop();
}
}
<!--
Generated template for the ContactPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>contact</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactPage } from './contact';
@NgModule({
declarations: [
ContactPage,
],
imports: [
IonicPageModule.forChild(ContactPage),
],
})
export class ContactPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the ContactPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-contact',
templateUrl: 'contact.html',
})
export class ContactPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ContactPage');
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1" radio-group>
Contact Filters
</div>
<p>With the help of filters you can choose who can contact you.</p>
<h6>Who can contact me ?</h6>
<ion-item>
<ion-label>Anyone</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Only members who meet my criteria.</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="save">Update</button>
<button ion-button class="reset">Cancel</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactfiltersPage } from './contactfilters';
@NgModule({
declarations: [
ContactfiltersPage,
],
imports: [
IonicPageModule.forChild(ContactfiltersPage),
],
})
export class ContactfiltersPageModule {}
page-contactfilters {
.settings_wrapper{
.setting_head{
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left:60px;
}
.m1{
background: url("../assets/imgs/contactfilter_icon.png");
}
p{
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 10px;
}
h6{
color: #858585;
}
.input {
border-bottom:1px solid #acacac;
.text-input{
margin-left: 0px;
margin-right: 0px;
width: 100%;
font-size: 16px;
font-weight: 300;
}
}
.checkbox {
margin:0px !important;
.checkbox-checked{
border:1px solid #ee3380 !important;
background: #ee3380 !important;
}
.checkbox-icon{
width:20px;
height:20px;
border:1px solid #959595;
background: transparent;
margin-right: 15px;
}
.checkbox-inner{
left: 6px;
top: 3px;
}
}
.item-inner{
border: none !important;
.label{
color: #858585;
font-weight: 300;
margin: 0px;
font-size: 17px;
}
}
}
.save{
background: #d12d82;
border:2px solid #d12d82;
color: #fff;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
.reset{
background:transparent;
border:2px solid #939393;
color: #939393;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-contactfilters',
templateUrl: 'contactfilters.html',
})
export class ContactfiltersPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ContactfiltersPage');
}
back(){
this.navCtrl.pop();
}
}
<!--
Generated template for the DailypopPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>dailypop</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DailypopPage } from './dailypop';
@NgModule({
declarations: [
DailypopPage,
],
imports: [
IonicPageModule.forChild(DailypopPage),
],
})
export class DailypopPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the DailypopPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-dailypop',
templateUrl: 'dailypop.html',
})
export class DailypopPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad DailypopPage');
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft nav_menu" menuToggle></button>
<div class="nav_header_inner_title floatLeft">Daily Recommendations</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="dailyrecom_wrapper">
<div class="daily_banner">
<div class="photo">3 Photos</div>
<div class="bottom_bay">
<ion-row class="p0">
<ion-col col-4 class="p0">
<h4>TIME LEFT</h4>
<h5>TO CONTACT</h5>
</ion-col>
<ion-col col-8 class="p0 textCenter">
<div class="time">
<div class="seperate_div">
<div class="circle">
06
</div>
<p>Hours</p>
</div>
<div class="seperate_div">
<span>:</span>
</div>
<div class="seperate_div">
<div class="circle">
11
</div>
<p>Minutes</p>
</div>
<div class="seperate_div">
<span>:</span>
</div>
<div class="seperate_div">
<div class="circle">
06
</div>
<p>Seconds</p>
</div>
</div>
</ion-col>
</ion-row>
</div>
<img src="../assets/imgs/img.png">
</div>
<div class="daily_details">
<h5 ><strong>Mariya Roselynn</strong>E8456</h5>
<h6>23 Yrs, 5 Ft, Palakkad, Kerala, India</h6>
<h6>Fashion Designer</h6>
<div class="member_flag">Premium member</div>
</div>
</div>
</ion-content>
<ion-footer>
<div class="interest_div">
<ion-row class="p0">
<ion-col col-6 class="p0">
<p>Interested in Her</p>
</ion-col>
<ion-col col-6 class="p0 textCenter">
<button class="skip_btn">Skip</button>
<button class="yes_btn">Yes</button>
<div class="clear"></div>
</ion-col>
</ion-row>
</div>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DailyrecomendationPage } from './dailyrecomendation';
@NgModule({
declarations: [
DailyrecomendationPage,
],
imports: [
IonicPageModule.forChild(DailyrecomendationPage),
],
})
export class DailyrecomendationPageModule {}
page-dailyrecomendation {
.dailyrecom_wrapper{
.daily_banner{
width:100%;
height:400px;
position: relative;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
.photo{
position:absolute;
bottom:110px;
left:10px;
background: #393939;
color: #fff;
border-radius: 20px;
padding: 3px;
padding-left: 15px;
padding-right:15px;
}
.bottom_bay{
position: absolute;
bottom: 0px;
left:0px;
right:0px;
background: rgba(241,236,230,0.8);
padding: 10px;
h4{
margin:0px;
padding:0px;
color: #4f4f4f;
font-size: 22px;
padding-bottom: 2px;
padding-top: 20px;
}
h5{
margin:0px;
padding:0px;
color: #4f4f4f;
font-size: 14px;
}
.time{
border-left:1px solid #bebebe;
}
.seperate_div{
display: inline-block;
padding-left: 5px;
padding-right: 5px;
span{
position: relative;
position: relative;
bottom: 39px;
font-size: 20px;
}
.circle{
width:40px;
height:40px;
border-radius: 50%;
border:2px solid #d12d82;
text-align: center;
color: #4f4f4f;
font-size: 16px;
padding: 7px;
font-weight:500;
margin: 0 auto;
}
p{
margin:0px;
padding:0px;
text-align: center;
color: #4f4f4f;
font-weight:500;
padding-top: 10px;
}
}
}
}
.daily_details{
padding:15px;
h5{
margin: 0px;
color: #888888;
font-weight: 400;
margin-top: 5px;
font-size: 24px;
strong {
color: #282828;
margin-right: 10px;
font-weight: 500;
}
}
p {
color: #6b6a6a;
margin: 0px;
padding: 0px;
padding-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h6 {
margin: 0px;
padding: 0px;
color: #5e5d5d;
font-size: 14px;
font-weight: 400;
padding-top: 5px;
}
.member_flag {
background: #59a400;
color: #fff;
border-radius: 20px;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
width: 150px;
margin-top: 10px;
}
}
}
.interest_div{
padding:15px;
border-top:1px solid #ededed;
p{
color: #4f4f4f;
font-weight:500;
margin:0px;
padding:10px;
font-size: 20px;
}
.skip_btn{
display: inline-block;
height:30px;
border-radius:20px;
background: #7e7e7e;
color: #fff;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
margin:8px;
}
.yes_btn{
display: inline-block;
height:30px;
border-radius:20px;
background: #d12d82;
color: #fff;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
margin:8px;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-dailyrecomendation',
templateUrl: 'dailyrecomendation.html',
})
export class DailyrecomendationPage {
constructor(public navCtrl: NavController, public navParams: NavParams public modalCtrl: ModalController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad DailyrecomendationPage');
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1" radio-group>
Deactivate Profile
</div>
<p>You can temporarily deactivate your profile if you do not want to delete it. On deactivation your profile will be hidden from our members and you will not be able to contact any member until you activate.
</p>
<p>Your profile status is currently active. If you would like to change your status, please select Deactivate Now.
</p>
<br>
<h6>Select the number of days / months you would like to keep your profile deactivated.</h6>
<ion-item>
<ion-select>
<ion-option value="1" selected>Select Days</ion-option>
</ion-select>
</ion-item>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="reset">Deactivate Now</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DeactivateprofilePage } from './deactivateprofile';
@NgModule({
declarations: [
DeactivateprofilePage,
],
imports: [
IonicPageModule.forChild(DeactivateprofilePage),
],
})
export class DeactivateprofilePageModule {}
page-deactivateprofile {
.settings_wrapper {
.setting_head {
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
}
.m1 {
background: url("../assets/imgs/deactive_icon.png");
}
p {
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 10px;
}
h6 {
color: #505050;
}
.input {
border-bottom: 1px solid #acacac;
.text-input {
margin-left: 0px;
margin-right: 0px;
width: 100%;
font-size: 16px;
font-weight: 300;
}
}
.checkbox {
margin: 0px !important;
.checkbox-checked {
border: 1px solid #ee3380 !important;
background: #ee3380 !important;
}
.checkbox-icon {
width: 20px;
height: 20px;
border: 1px solid #959595;
background: transparent;
margin-right: 15px;
}
.checkbox-inner {
left: 6px;
top: 3px;
}
}
.item-inner {
border: none !important;
.label {
color: #858585;
font-weight: 300;
margin: 0px;
font-size: 17px;
}
.select {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
color: #6b6b6b;
border-bottom: 1px solid #dddddd;
background: url("../assets/imgs/drop.png");
background-repeat: no-repeat;
background-position: right;
.select-icon {
display: none;
}
}
}
}
.save {
background: #d12d82;
border: 2px solid #d12d82;
color: #fff;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
.reset {
background: #282828;
border: 2px solid #282828;
color: #fff;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-deactivateprofile',
templateUrl: 'deactivateprofile.html',
})
export class DeactivateprofilePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad DeactivateprofilePage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1" radio-group>
Delete Profile
</div>
<h6>Please choose a reason for Profile Deletion</h6>
<ion-item>
<ion-select>
<ion-option value="1" selected>Select a Reason</ion-option>
</ion-select>
</ion-item>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="reset">Delete Now</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DeleteprofilePage } from './deleteprofile';
@NgModule({
declarations: [
DeleteprofilePage,
],
imports: [
IonicPageModule.forChild(DeleteprofilePage),
],
})
export class DeleteprofilePageModule {}
page-deleteprofile {
.settings_wrapper {
.setting_head {
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
}
.m1 {
background: url("../assets/imgs/delete_icon.png");
}
p {
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 10px;
}
h6 {
color: #505050;
}
.input {
border-bottom: 1px solid #acacac;
.text-input {
margin-left: 0px;
margin-right: 0px;
width: 100%;
font-size: 16px;
font-weight: 300;
}
}
.checkbox {
margin: 0px !important;
.checkbox-checked {
border: 1px solid #ee3380 !important;
background: #ee3380 !important;
}
.checkbox-icon {
width: 20px;
height: 20px;
border: 1px solid #959595;
background: transparent;
margin-right: 15px;
}
.checkbox-inner {
left: 6px;
top: 3px;
}
}
.item-inner {
border: none !important;
.label {
color: #858585;
font-weight: 300;
margin: 0px;
font-size: 17px;
}
.select {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
color: #6b6b6b;
border-bottom: 1px solid #dddddd;
background: url("../assets/imgs/drop.png");
background-repeat: no-repeat;
background-position: right;
.select-icon {
display: none;
}
}
}
}
.save {
background: #d12d82;
border: 2px solid #d12d82;
color: #fff;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
.reset {
background: #ffae00;
border: 2px solid #ffae00;
color: #fff;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-deleteprofile',
templateUrl: 'deleteprofile.html',
})
export class DeleteprofilePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad DeleteprofilePage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button ion-button class=" nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1">
Edit Email Address
</div>
<p>A valid e-mail id will be used to send you partner search mailers, member to member communication mailers and special offers.</p>
<ion-input placeholder="[email protected]"></ion-input>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="save">Save</button>
<button ion-button class="reset">Reset</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EditemailPage } from './editemail';
@NgModule({
declarations: [
EditemailPage,
],
imports: [
IonicPageModule.forChild(EditemailPage),
],
})
export class EditemailPageModule {}
page-editemail {
.settings_wrapper{
.setting_head{
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left:60px;
}
.m1{
background: url("../assets/imgs/m1.png");
}
p{
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 10px;
}
.input {
border-bottom:1px solid #acacac;
.text-input{
margin-left: 0px;
margin-right: 0px;
width: 100%;
font-size: 16px;
font-weight: 300;
}
}
}
.save{
background: #d12d82;
border:2px solid #d12d82;
color: #fff;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
.reset{
background:transparent;
border:2px solid #939393;
color: #939393;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-editemail',
templateUrl: 'editemail.html',
})
export class EditemailPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad EditemailPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Signup</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="signup_wrapper">
<h4><strong>Add a few more details</strong></h4>
<p><strong>Let your prospects get to know better!</strong></p>
<div class="signup_content">
<h4>Career information</h4>
<input class="code_input" placeholder="Enter Specialization">
<input class="code_input" placeholder="Institute">
<input class="code_input" placeholder="Occupation">
<br>
<br>
<br>
<h4>Lifestyle Information</h4>
<ion-item>
<ion-select>
<ion-option value="g" selected>Eating Habits</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="g" selected>Smoking Habits</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="g" selected>Drinking Habits</ion-option>
</ion-select>
</ion-item>
</div>
</div>
<hr>
<div class="signup_wrapper">
<div class="signup_content">
<h4>Religious Information</h4>
<ion-item>
<ion-select>
<ion-option value="g" selected>Star</ion-option>
</ion-select>
</ion-item>
</div>
</div>
</ion-content>
<ion-footer padding>
<button class="main_btn login_btn widthFull" (click)="next()">Complete</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FewmoredetailPage } from './fewmoredetail';
@NgModule({
declarations: [
FewmoredetailPage,
],
imports: [
IonicPageModule.forChild(FewmoredetailPage),
],
})
export class FewmoredetailPageModule {}
page-fewmoredetail {
.signup_wrapper{
width: 100%;
padding:15px;
padding-bottom: 0px;
h5{
color: #ee3380;
margin:0px;
padding:0px;
font-weight: 400;
font-size:30px;
}
p{
color: #6c6c6c;
margin: 0px;
font-size: 20px;
strong{
color: #6c6c6c;
font-weight: 300;
}
}
h4{
color: #939393;
margin-top: 0px;
strong{
color: #464646;
font-weight:500;
font-size: 23px;
}
}
.signup_content{
width: 100%;
padding-top:30px;
.item {
margin-bottom: 10px;
.item-inner{
border:none;
.input-wrapper{
.select {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
color: #afafae;
background: url("../assets/imgs/drop.png");
background-position: right;
background-repeat:no-repeat;
background-size: 16px;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
.select-icon{
display: none;
}
.datetime {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
&::placeholder{
color: #afafae;
}
.datetime-text{
color: #afafae;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
.input {
.text-input{
height: 100%;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
}
.label {
color: #676767;
font-size: 16px;
}
}
.checkbox {
margin: 0px;
margin-right: 20px;
.checkbox-icon{
width:23px;
height:23px;
border-radius: 50%;
.checkbox-inner {
left:7px;
top:3px;
}
}
}
}
h6{
color: #676767;
font-size: 20px;
}
textarea{
width:100%;
border-radius: 10px;
background: #ededec;
border:none;
resize: none;
margin-bottom: 15px;
}
span{
color: #6c6c6c;
font-size: 16px;
}
.help{
color: #d12d4c;
}
.code_input{
height:45px;
border-radius:25px;
background: #ededec;
border:none;
width: 100%;
text-align:left;
font-size: 18px;
font-weight: 300;
letter-spacing: 2px;
padding-left: 25px;
margin-bottom: 5px;
}
}
}
hr{
margin: 0px;
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-fewmoredetail',
templateUrl: 'fewmoredetail.html',
})
export class FewmoredetailPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad FewmoredetailPage');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("PremiumservicePage");
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Reset Password</div>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="forgot_password_wrapper">
<h5>Forgot your</h5>
<h4>Password?</h4>
<p>We will send a password reset instrutions to<br> your email address. Please follow </p>
<br>
<br>
<input class="code_input" placeholder="Enter your email address">
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="main_btn login_btn widthFull">Reset</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ForgotPage } from './forgot';
@NgModule({
declarations: [
ForgotPage,
],
imports: [
IonicPageModule.forChild(ForgotPage),
],
})
export class ForgotPageModule {}
page-forgot {
.forgot_password_wrapper{
width:100%;
padding-top: 30px;
h5{
color: #664150;
margin: 0px;
text-align: center;
font-weight: 300;
font-size: 40px;
}
h4{
color: #664150;
margin:0px;
text-align: center;
font-weight: 400;
font-size: 55px;
line-height: 40px;
}
p{
text-align: center;
color: #888888;
font-size: 18px;
font-weight: 300;
}
.code_input{
height:45px;
border-radius:25px;
background: #ededec;
border:none;
width: 100%;
text-align: center;
font-size: 17px;
font-weight: 300;
&::placeholder{
color: #b6b5b5;
}
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-forgot',
templateUrl: 'forgot.html',
})
export class ForgotPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ForgotPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Hobbies</div>
<button ion-button class="nav_btn floatRight see_btn">Skip</button>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="hobbies_wrapper">
<h5>What are your Hobbies?</h5>
<ul>
<li>
<button id="custom_check_button">
<label>
<input id="1" type="checkbox" name="services" value="A">
<p class="m1">
<img src="../assets/imgs/1.png"><br>
Cooking
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="2" type="checkbox" name="services" value="A">
<p class="m2">
<img src="../assets/imgs/2.png"><br>
Nature
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="3" type="checkbox" name="services" value="A">
<p class="m3">
<img src="../assets/imgs/3.png"><br>
Movies
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="4" type="checkbox" name="services" value="A">
<p class="m4">
<img src="../assets/imgs/4.png"><br>
Dancing
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="5" type="checkbox" name="services" value="A">
<p class="m5">
<img src="../assets/imgs/5.png"><br>
Painting
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="6" type="checkbox" name="services" value="A">
<p class="m6">
<img src="../assets/imgs/6.png"><br>
Pets
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="7" type="checkbox" name="services" value="A">
<p class="m7">
<img src="../assets/imgs/7.png"><br>
Landscapes
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="8" type="checkbox" name="services" value="A">
<p class="m8">
<img src="../assets/imgs/8.png"><br>
Puzzles
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="9" type="checkbox" name="services" value="A">
<p class="m9">
<img src="../assets/imgs/9.png"><br>
Music
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="10" type="checkbox" name="services" value="A">
<p class="m10">
<img src="../assets/imgs/10.png"><br>
Internet
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="11" type="checkbox" name="services" value="A">
<p class="m11">
<img src="../assets/imgs/11.png"><br>
Travel
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="12" type="checkbox" name="services" value="A">
<p class="m12">
<img src="../assets/imgs/12.png"><br>
Photo
</p>
</label>
</button>
</li>
<div class="clear"></div>
<br>
<div class="add_more">
<input class="add_more_input" placeholder="Add more Hobbies">
<div class="addmore_btn">+</div>
<div class="clear"></div>
</div>
<br>
<h6>Favourite music?</h6>
<li>
<button id="custom_check_button">
<label>
<input id="13" type="checkbox" name="services" value="A">
<p class="m13">
<img src="../assets/imgs/13.png"><br>
Film<br> Songs
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="14" type="checkbox" name="services" value="A">
<p class="m14">
<img src="../assets/imgs/14.png"><br>
Western<br> Songs
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="15" type="checkbox" name="services" value="A">
<p class="m15">
<img src="../assets/imgs/15.png"><br>
Classic <br>Music
</p>
</label>
</button>
</li>
<br>
<div class="clear"></div>
<br>
<div class="add_more">
<input class="add_more_input" placeholder="Add more Hobbies">
<div class="addmore_btn">+</div>
<div class="clear"></div>
</div>
<br>
<h6>Sports / Fitness</h6>
<li>
<button id="custom_check_button">
<label>
<input id="16" type="checkbox" name="services" value="A">
<p class="m16">
<img src="../assets/imgs/16.png"><br>
Cricket
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="17" type="checkbox" name="services" value="A">
<p class="m17">
<img src="../assets/imgs/17.png"><br>
Carrom
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="18" type="checkbox" name="services" value="A">
<p class="m18">
<img src="../assets/imgs/18.png"><br>
Jogging
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="19" type="checkbox" name="services" value="A">
<p class="m19">
<img src="../assets/imgs/19.png"><br>
Badminton
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="20" type="checkbox" name="services" value="A">
<p class="m20">
<img src="../assets/imgs/20.png"><br>
Swimming
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="21" type="checkbox" name="services" value="A">
<p class="m21">
<img src="../assets/imgs/21.png"><br>
Football
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="22" type="checkbox" name="services" value="A">
<p class="m22">
<img src="../assets/imgs/22.png"><br>
Tennis
</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input id="23" type="checkbox" name="services" value="A">
<p class="m23">
<img src="../assets/imgs/23.png"><br>
Gym
</p>
</label>
</button>
</li>
<div class="clear"></div>
<br>
<div class="add_more">
<input class="add_more_input" placeholder="Add more Hobbies">
<div class="addmore_btn">+</div>
<div class="clear"></div>
</div>
<br>
<div class="language_check">
<br>
<h6>Spoken Languages</h6>
<ion-row>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>English</ion-label>
</ion-col>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Hindi</ion-label>
</ion-col>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Tamil</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Malayalam</ion-label>
</ion-col>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Telugu</ion-label>
</ion-col>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Kannada</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Gujarati</ion-label>
</ion-col>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Marathi</ion-label>
</ion-col>
<ion-col col-4>
<ion-checkbox></ion-checkbox>
<ion-label>Urdu</ion-label>
</ion-col>
</ion-row>
</div>
<button class="main_btn login_btn widthFull" (click)="next()">Done</button>
</ul>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HobbiesPage } from './hobbies';
@NgModule({
declarations: [
HobbiesPage,
],
imports: [
IonicPageModule.forChild(HobbiesPage),
],
})
export class HobbiesPageModule {}
page-hobbies {
.hobbies_wrapper{
width:100%;
h5{
color: #282828;
font-size: 24px;
font-weight: 400;
}
h6{
color: #282828;
font-size: 18px;
font-weight: 500;
padding-top: 20px;
padding-bottom:20px;
}
ul{
padding: 0px;
margin:0px;
padding-top:20px;
li{
list-style: none;
width:25%;
list-style: none;
float: left;
padding-bottom: 10px;
#custom_check_button {background-color:#fff;overflow:auto;position: relative;width:100%;height:65px;outline:none;margin:0px;padding: 0px;}
#custom_check_button p{margin:0px;position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;padding: 0px;color: #898989;font-size: 14px;}
#custom_check_button p img{width:30px;}
#custom_check_button label {width:100%;}
#custom_check_button label span {text-align:center;display:block;}
#custom_check_button label input {position:absolute;top:-20px;}
#custom_check_button input:checked + p {color:#ee3380;border-radius:25px !important;margin:0px;}
}
.add_more{
width:100%;
border:1px solid #a1a1a1;
border-radius: 25px;
padding:5px;
.add_more_input{
width:calc(100% - 30px);
float: left;
height: 30px;
border:none;
background: transparent;
color: #6c6c6c;
font-size: 16px;
padding-left: 25px;
&::placeholder{
color: #6c6c6c;
}
}
.addmore_btn{
width:30px;
height:30px;
float: right;
padding: 0px;
border:2px solid #ee3380;
border-radius: 50%;
color: #ee3380;
text-align: center;
font-size: 21px;
}
}
.language_check{
padding-bottom: 40px;
.label {
margin: 0px;
float: left;
color: #6c6c6c;
font-weight:400;
padding-left: 15px;
font-size: 16px;
}
.checkbox {
float: left;
.checkbox-icon{
border:1px solid #959595;
width: 20px;
height:20px;
border-radius:4px;
}
.checkbox-checked{
border:1px solid #ee3380;
background: transparent;
}
.checkbox-inner{
left: 7px;
top: 3px;
border-color: #ee3380;
}
}
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-hobbies',
templateUrl: 'hobbies.html',
})
export class HobbiesPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HobbiesPage');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("FewmoredetailPage");
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft nav_menu" menuToggle></button>
<div class="nav_header_inner_title floatLeft">Soulmate</div>
<button ion-button class="nav_inner_btn floatRight" (click)="search_filter()">
<ion-icon name="ios-search"></ion-icon>
</button>
<div class="clear"></div>
<div class="main_tab">
<ul>
<li [class.active]="tab == 'match'" (click)="tab_swap('match')">Matches</li>
<li [class.active]="tab == 'shortlist'" (click)="tab_swap('shortlist')">Shortlisted</li>
<li [class.active]="tab == 'recent'" (click)="tab_swap('recent')">Recent View</li>
<div class="clear"></div>
</ul>
</div>
</ion-header>
<ion-content class="home_background">
<div class="home_wrapper">
<div class="home_content" [hidden]="tab !='match'">
<ul>
<li (click)="see_detail()">
<div class="chat_icon">
<ion-icon name="ios-chatboxes-outline"></ion-icon>
</div>
<div class="fav_icon">
<ion-icon name="ios-star-outline"></ion-icon>
</div>
<div class="home_circle_pic"></div>
<h4>Ann Alexander</h4>
<p>E4354</p>
<h5>23 Yrs, 5Ft, Alappuzha</h5>
<h6>Software Developer</h6>
<button ion-button class="interest"> <ion-icon name="md-heart"></ion-icon>Send Interest</button>
</li>
<li (click)="see_detail()">
<div class="chat_icon">
<ion-icon name="ios-chatboxes-outline"></ion-icon>
</div>
<div class="fav_icon">
<ion-icon name="ios-star-outline"></ion-icon>
</div>
<div class="home_circle_pic"></div>
<h4>Ann Alexander</h4>
<p>E4354</p>
<h5>23 Yrs, 5Ft, Alappuzha</h5>
<h6>Software Developer</h6>
<button ion-button class="interest"> <ion-icon name="md-heart"></ion-icon>Send Interest</button>
</li>
<li (click)="see_detail()">
<div class="chat_icon">
<ion-icon name="ios-chatboxes-outline"></ion-icon>
</div>
<div class="fav_icon">
<ion-icon name="ios-star-outline"></ion-icon>
</div>
<div class="home_circle_pic"></div>
<h4>Ann Alexander</h4>
<p>E4354</p>
<h5>23 Yrs, 5Ft, Alappuzha</h5>
<h6>Software Developer</h6>
<button ion-button class="interest"> <ion-icon name="md-heart"></ion-icon>Send Interest</button>
</li>
<li (click)="see_detail()">
<div class="chat_icon">
<ion-icon name="ios-chatboxes-outline"></ion-icon>
</div>
<div class="fav_icon">
<ion-icon name="ios-star-outline"></ion-icon>
</div>
<div class="home_circle_pic"></div>
<h4>Ann Alexander</h4>
<p>E4354</p>
<h5>23 Yrs, 5Ft, Alappuzha</h5>
<h6>Software Developer</h6>
<button ion-button class="interest"> <ion-icon name="md-heart"></ion-icon>Send Interest</button>
</li>
<li (click)="see_detail()">
<div class="chat_icon">
<ion-icon name="ios-chatboxes-outline"></ion-icon>
</div>
<div class="fav_icon">
<ion-icon name="ios-star-outline"></ion-icon>
</div>
<div class="home_circle_pic"></div>
<h4>Ann Alexander</h4>
<p>E4354</p>
<h5>23 Yrs, 5Ft, Alappuzha</h5>
<h6>Software Developer</h6>
<button ion-button class="interest"> <ion-icon name="md-heart"></ion-icon>Send Interest</button>
</li>
<li (click)="see_detail()">
<div class="chat_icon">
<ion-icon name="ios-chatboxes-outline"></ion-icon>
</div>
<div class="fav_icon">
<ion-icon name="ios-star-outline"></ion-icon>
</div>
<div class="home_circle_pic"></div>
<h4>Ann Alexander</h4>
<p>E4354</p>
<h5>23 Yrs, 5Ft, Alappuzha</h5>
<h6>Software Developer</h6>
<button ion-button class="interest"> <ion-icon name="md-heart"></ion-icon>Send Interest</button>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="home_content" [hidden]="tab !='shortlist'">
Shortlist
</div>
<div class="home_content" [hidden]="tab !='recent'">
recent
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
declarations: [
HomePage,
],
imports: [
IonicPageModule.forChild(HomePage),
],
})
export class HomePageModule {}
page-home {
.main_tab {
width: 100%;
ul {
padding: 0px;
margin: 0px;
padding: 10px;
li {
width: 33.3%;
float: left;
text-align: center;
color: #fce8ed;
list-style: none;
font-size: 16px;
font-weight: 400;
padding: 3px;
border: 2px solid transparent;
}
.active {
border: 2px solid #facbde;
border-radius: 20px;
}
}
}
.home_background {
background: #e1f0f1;
}
.home_wrapper {
padding: 5px;
.home_content {
ul {
padding: 0px;
margin: 0px;
li {
list-style: none;
background: #fff;
width: calc(50% - 8px);
margin: 2px;
padding: 10px;
padding-top: 20px;
float: left;
position: relative;
.home_circle_pic {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e1f0f1;
margin: 0 auto;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
h4 {
text-align: center;
margin: 0px;
padding: 0px;
color: #282828;
font-size: 16px;
padding-top: 10px;
}
p {
text-align: center;
margin: 0px;
padding: 0px;
color: #808080;
font-size: 16px;
padding-bottom: 5px;
}
h5 {
text-align: center;
margin: 0px;
padding: 0px;
color: #6b6a6a;
font-size: 13px;
padding-top: 5px;
padding-bottom: 3px;
}
h6 {
text-align: center;
margin: 0px;
padding: 0px;
color: #282828;
font-size: 13px;
padding-bottom: 10px;
}
.interest {
width: 100%;
height: 35px;
background: #ee3380;
border-radius: 20px;
color: #fff;
letter-spacing: 2px;
text-align: center;
text-transform: capitalize;
.icon {
margin-right: 6px;
}
}
.chat_icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: #d12d82;
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 15px;
padding: 5px;
text-align: center;
}
.fav_icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffb400;
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-size: 18px;
padding: 4px;
text-align: center;
}
}
}
}
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
tab:any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.tab = "match";
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
}
tab_swap(type) {
this.tab = type;
}
see_detail(){
this.navCtrl.push("ProfiledetailPage");
}
search_filter(){
this.navCtrl.push("SearchfilterPage");
}
}
<ion-content padding class="landing_bg">
<div class="landing_wrapper">
<div class="logo_div">
<img src="../assets/imgs/logo.png">
</div>
<div class="landing_bottom">
<h3>The<br>
Perfect<br>
Partner</h3>
<button ion-button class="main_btn login_btn widthFull" (click)="login()">Login</button>
<button ion-button class="main_btn signup_btn widthFull" (click)="signup()">Signup</button>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LandingPage } from './landing';
@NgModule({
declarations: [
LandingPage,
],
imports: [
IonicPageModule.forChild(LandingPage),
],
})
export class LandingPageModule {}
page-landing {
.landing_bg{
background: url("../assets/imgs/landing_bg.png");
background-position: center;
background-size: cover;
}
.landing_wrapper{
width: 100%;
height: 100%;
padding-top: 10%;
padding-bottom: 10%;
position: relative;
.logo_div{
width: 100%;
text-align: center;
img{
width: 150px;
}
}
.landing_bottom{
position: absolute;
bottom:10px;
left:0px;
right:0px;
h3{
color: #fff;
font-size: 85px;
line-height: 65px;
padding-bottom: 30px;
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
.signup_btn{
color: #ee3380;
background: #fff;
}
}
}
}
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');
}
login(){
this.navCtrl.push("LoginPage");
}
signup(){
this.navCtrl.push("SignupPage");
}
}
<ion-content padding class="landing_bg">
<div class="login_wrapper">
<div class="logo_div">
<img src="../assets/imgs/logo.png">
</div>
<div class="login_bottom">
<ion-card>
<ion-card-content>
<h5>Login</h5>
<ion-input type="text" placeholder="Email address" class="user"></ion-input>
<ion-input type="password" placeholder="Password" class="pass"></ion-input>
<button ion-button class="main_btn login_btn widthFull" (click)="home()">Login</button>
<p (click)="forgot()">Forgot Password</p>
</ion-card-content>
</ion-card>
<h6>New user?&nbsp;&nbsp; <strong (click)="signup()">SIGNUP HERE</strong></h6>
</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 {}
page-login {
.landing_bg{
background: url("../assets/imgs/landing_bg.png");
background-position: center;
background-size: cover;
}
.login_wrapper{
padding-top: 10%;
padding-bottom: 10%;
height:100%;
.logo_div{
width: 100%;
text-align: center;
img{
width: 150px;
}
}
.login_bottom{
position: absolute;
bottom:10px;
left:0px;
right:0px;
.card {
border-radius: 15px;
.card-content{
h5{
color: #ee3380;
text-align: center;
font-size:34px;
font-weight: 500;
padding-bottom:20px;
padding-top: 20px;
}
p{
text-align: center;
color: #918f8f;
font-weight:400;
padding-top: 20px;
padding-bottom: 15px;
font-size: 18px;
margin:0px;
}
}
}
h6{
color: #fff;
text-align: center;
font-weight: 400;
padding-top:40px;
font-size: 18px;
strong{
}
}
.input {
background-color:#e9e8e8 !important;
border-radius:25px;
margin-bottom: 10px;
background-repeat: no-repeat !important;
background-position: 15px !important;
background-size: 20px !important;
padding-left: 40px;
font-size: 20px;
font-weight: 300;
height: 50px;
.text-input{
margin: 0px;
padding: 10px;
&::placeholder{
color: #b6b5b5;
}
}
}
.user{
background: url("../assets/imgs/user.png");
}
.pass{
background: url("../assets/imgs/pass.png");
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
}
}
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');
}
signup(){
this.navCtrl.push("SignupPage");
}
forgot(){
this.navCtrl.push("ForgotPage");
}
home(){
this.navCtrl.push("HomePage");
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft nav_menu" menuToggle></button>
<div class="nav_header_inner_title floatLeft">Mailbox</div>
<button ion-button class="nav_inner_btn floatRight">
<ion-icon name="ios-funnel"></ion-icon>
</button>
<div class="clear"></div>
<div class="main_tab">
<ul>
<li [class.active]="tab == 'pending'" (click)="tab_swap('pending')">
<div class="notification">1</div>
Pending
</li>
<li [class.active]="tab == 'accepted'" (click)="tab_swap('accepted')">
<div class="notification">2</div>
Accepted
</li>
<li [class.active]="tab == 'declined'" (click)="tab_swap('declined')">Declined</li>
<div class="clear"></div>
</ul>
</div>
</ion-header>
<ion-content class="">
<div class="home_wrapper">
<div class="home_content" [hidden]="tab !='pending'">
<ul>
<li (click)="messenger()">
<div class="profile_circle"></div>
<div class="profile_detail">
<p class="floatLeft">Message Received</p>
<p class="floatRight">Dec 17 2018</p>
<div class="clear"></div>
<h5 class="floatLeft"><strong>Mariya Roselynn</strong>E8456</h5>
<div class="online floatRight"></div>
<div class="clear"></div>
<h6>She has sent you a message</h6>
<h6>"Hi"<span>Readmore</span></h6>
<div class="profile_btn_bay">
<button class="not_interested">Not Interested</button>
<button class="interested"><ion-icon name="md-heart"></ion-icon>Yes</button>
</div>
</div>
<div class="clear"></div>
</li>
<li (click)="messenger()">
<div class="profile_circle"></div>
<div class="profile_detail">
<p class="floatLeft">Message Received</p>
<p class="floatRight">Dec 17 2018</p>
<div class="clear"></div>
<h5 class="floatLeft"><strong>Mariya Roselynn</strong>E8456</h5>
<div class="online floatRight"></div>
<div class="clear"></div>
<h6>She has sent you a message</h6>
<h6>"Hi"<span>Readmore</span></h6>
<div class="profile_btn_bay">
<button class="not_interested">Not Interested</button>
<button class="interested"><ion-icon name="md-heart"></ion-icon>Yes</button>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="home_content" [hidden]="tab !='accepted'">
<ul>
<li (click)="messenger()">
<div class="profile_circle"></div>
<div class="profile_detail">
<p class="floatLeft">Message Received</p>
<p class="floatRight">Dec 17 2018</p>
<div class="clear"></div>
<h5 class="floatLeft"><strong>Mariya Roselynn</strong>E8456</h5>
<div class="online floatRight"></div>
<div class="clear"></div>
<h6>She has sent you a message</h6>
<h6>"Hi"<span>Readmore</span></h6>
<div class="profile_btn_bay">
<button class="call_now"><ion-icon name="ios-call"></ion-icon>Call now</button>
<button class="send_email">Send mail</button>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="home_content" [hidden]="tab !='declined'">
<ul>
<li (click)="messenger()">
<div class="profile_circle"></div>
<div class="profile_detail">
<p class="floatLeft">Interest Declined</p>
<p class="floatRight">Dec 17 2018</p>
<div class="clear"></div>
<h5 class="floatLeft"><strong>Mariya Roselynn</strong>E8456</h5>
<div class="online floatRight"></div>
<div class="clear"></div>
<h6>Youhave declined hes interest as your location preference do not match. </h6>
<h6><span>See Conversation</span></h6>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MailboxPage } from './mailbox';
@NgModule({
declarations: [
MailboxPage,
],
imports: [
IonicPageModule.forChild(MailboxPage),
],
})
export class MailboxPageModule {}
page-mailbox {
.main_tab {
width: 100%;
ul {
padding: 0px;
margin: 0px;
padding: 10px;
padding-top: 25px;
li {
width: 33.3%;
float: left;
text-align: center;
color: #fce8ed;
list-style: none;
font-size: 16px;
font-weight: 400;
padding: 3px;
border: 2px solid transparent;
position: relative;
.notification {
width: 20px;
height: 20px;
background: #f7f6f0;
color: #646362;
border-radius: 50%;
position: absolute;
text-align: center;
font-size: 14px;
padding: 2px;
left: 40%;
bottom: 35px;
}
}
.active {
border: 2px solid #facbde;
border-radius: 20px;
}
}
}
.home_background {
background: #e1f0f1;
}
.home_wrapper {
ul {
width: 100%;
padding: 0px;
margin: 0px;
li {
padding: 15px;
margin: 0px;
width: 100%;
border-bottom: 1px solid #d1d1d1;
.profile_circle {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background: #646362;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
float: left;
}
.profile_detail {
width: calc(100% - 100px);
float: left;
padding-left: 20px;
p {
margin: 0px;
color: #5e5d5d;
margin: 0px;
padding: 0px;
font-weight: 300;
font-size: 10px;
}
h5 {
margin: 0px;
color: #888888;
font-weight: 400;
margin-top: 5px;
font-size: 17px;
strong {
color: #626262;
margin-right: 10px;
font-weight: 400;
}
}
.online {
width: 8px;
height: 8px;
border-radius: 50%;
background: #479600;
position: relative;
top: 10px;
}
h6 {
margin: 0px;
padding: 0px;
color: #5e5d5d;
font-size: 12px;
font-weight: 300;
padding-top: 5px;
span {
margin-left: 10px;
color: #a2223a;
}
}
.profile_btn_bay {
width: 100%;
.not_interested {
border: 2px solid #7d7d7d;
color: #7d7d7d;
height: 30px;
border-radius: 20px;
background: transparent;
padding-left: 15px;
padding-right: 15px;
margin: 5px;
}
.interested {
border: 2px solid #d12d82;
background: #d12d82;
color: #fff;
height: 30px;
border-radius: 20px;
padding-left: 15px;
padding-right: 15px;
margin: 5px;
.icon {
margin-right: 5px;
font-size: 15px;
}
}
.call_now {
border: 2px solid #00a493;
background: #00a493;
color: #fff;
height: 30px;
border-radius: 20px;
padding-left: 15px;
padding-right: 15px;
margin: 5px;
.icon {
margin-right: 5px;
font-size: 15px;
}
}
.send_email {
border: 2px solid #ffae00;
background: #ffae00;
color: #fff;
height: 30px;
border-radius: 20px;
padding-left: 15px;
padding-right: 15px;
margin: 5px;
.icon {
margin-right: 5px;
}
}
}
}
}
}
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-mailbox',
templateUrl: 'mailbox.html',
})
export class MailboxPage {
tab:any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.tab = "pending";
}
ionViewDidLoad() {
console.log('ionViewDidLoad MailboxPage');
}
tab_swap(type) {
this.tab = type;
}
messenger(){
this.navCtrl.push("MessengerPage");
}
}
<ion-header class="nav_header theme_background">
<button ion-button class=" nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1">
Manage Mail Alerts
</div>
<p>Listed below are the alerts you will receive from us through e-mail. If you wish to unsubscribe to any of the alerts, please de-select the alert.</p>
<ion-item>
<ion-checkbox></ion-checkbox>
<ion-label>Auto Login</ion-label>
</ion-item>
<ion-item>
<ion-checkbox></ion-checkbox>
<ion-label>Products and Feature promotion</ion-label>
</ion-item>
<ion-item>
<ion-checkbox></ion-checkbox>
<ion-label>Daily Match Watch Mailer</ion-label>
</ion-item>
<ion-item>
<ion-checkbox></ion-checkbox>
<ion-label>Weekly Match Watch Photo Mailer</ion-label>
</ion-item>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="save">Submit</button>
<button ion-button class="reset">Cancel</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ManagealertsPage } from './managealerts';
@NgModule({
declarations: [
ManagealertsPage,
],
imports: [
IonicPageModule.forChild(ManagealertsPage),
],
})
export class ManagealertsPageModule {}
page-managealerts {
.settings_wrapper {
.setting_head {
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
}
.m1 {
background: url("../assets/imgs/managealert1.png");
}
p {
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 10px;
}
.input {
border-bottom: 1px solid #acacac;
.text-input {
margin-left: 0px;
margin-right: 0px;
width: 100%;
font-size: 16px;
font-weight: 300;
}
}
.checkbox {
margin: 0px !important;
.checkbox-checked {
border: 1px solid #ee3380 !important;
background: #ee3380 !important;
}
.checkbox-icon {
width: 20px;
height: 20px;
border: 1px solid #959595;
background: transparent;
margin-right: 15px;
}
.checkbox-inner {
left: 6px;
top: 3px;
}
}
.item-inner {
border: none !important;
.label {
color: #858585;
font-weight: 300;
margin: 0px;
font-size: 17px;
}
}
}
.save {
background: #d12d82;
border: 2px solid #d12d82;
color: #fff;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
.reset {
background: transparent;
border: 2px solid #939393;
color: #939393;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-managealerts',
templateUrl: 'managealerts.html',
})
export class ManagealertsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ManagealertsPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Profile Matching</div>
<button ion-button class="nav_btn floatRight see_btn">Skip</button>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="matches_wrapper">
<ul>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
<li>
<div class="match_circle">
<ion-checkbox ></ion-checkbox>
</div>
<h5>E44583</h5>
<p>22 Yrs, 5ft</p>
</li>
</ul>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="main_btn login_btn widthFull"><ion-icon name="md-heart"></ion-icon>Send Interest</button>
<button ion-button class="main_btn btn_trans widthFull" (click)="home()">View more matches</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MatchesPage } from './matches';
@NgModule({
declarations: [
MatchesPage,
],
imports: [
IonicPageModule.forChild(MatchesPage),
],
})
export class MatchesPageModule {}
page-matches {
.matches_wrapper{
width:100%;
ul{
padding:0px;
margin:0px;
li{
list-style: none;
width:50%;
float: left;
.match_circle{
width:120px;
height:120px;
border-radius:50%;
object-fit: cover;
object-position: center;
margin: 0 auto;
background: #e7e7e7;
position: relative;
.checkbox {
width:25px;
height:25px;
border-radius:50%;
position: absolute;
top:5px;
right:5px;
.checkbox-icon{
width:100%;
height:100%;
border-radius:50%;
.checkbox-inner{
left: 7px;
top: 4px;
}
}
}
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
border-radius:50%;
}
}
h5{
text-align: center;
margin:0px;
padding-top: 15px;
color: #525252;
font-weight: 400;
}
p{
text-align: center;
margin:0px;
color: #8d8d8d;
padding-bottom: 30px;
}
}
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.btn_trans{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 2px;
color: #8d8d8d;
background: transparent;
}
.login_btn{
color: #ffffff;
background: #ee3380;
.icon{
padding-right: 10px;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-matches',
templateUrl: 'matches.html',
})
export class MatchesPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad MatchesPage');
}
back(){
this.navCtrl.pop();
}
home(){
this.navCtrl.push("HomePage");
}
}
<ion-header class="nav_header theme_background">
<button ion-button class=" nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Matrimony Messenger</div>
<div class="clear"></div>
<div class="main_tab">
<ul>
<li [class.active]="tab == 'online'" (click)="tab_swap('online')">
Members Online
</li>
<li [class.active]="tab == 'chat'" (click)="tab_swap('chat')">
Chat
</li>
<div class="clear"></div>
</ul>
</div>
</ion-header>
<ion-content>
<div class="messenger_wrapper">
<div class="messenger_content" [hidden]="tab !='online'">
<ion-searchbar
(ionCancel)="onCancel($event)">
</ion-searchbar>
<ul>
<h4 (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">SHORTLIST MEMBERS</h4>
<div *ngIf="isGroupShown(0)">
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
</div>
<h4 (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">ALREADY CONTACTED</h4>
<div *ngIf="isGroupShown(1)">
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
</div>
<h4 (click)="toggleGroup(2)" [ngClass]="{active:isGroupShown(2)}">PREFFERED MATCHES</h4>
<div *ngIf="isGroupShown(2)">
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary</h5>
<h6>r356777</h6>
<p>Kochin,Kerala</p>
</div>
<div class="clear"></div>
</li>
</div>
</ul>
</div>
<div class="messenger_chat" [hidden]="tab !='chat'">
<ul>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary<span>(T124245)</span>
<p class="floatRight">Fri 23</p>
</h5>
<p>Hi..<span><img src="../assets/imgs/read.png"></span></p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary<span>(T124245)</span>
<p class="floatRight">Fri 23</p>
</h5>
<p>Hi..<span><img src="../assets/imgs/read.png"></span></p>
</div>
<div class="clear"></div>
</li>
<li (click)="chat()">
<div class="circle_photo">
</div>
<div class="circle_detail">
<div class="online"></div>
<h5>Madona mary<span>(T124245)</span>
<p class="floatRight">Fri 23</p>
</h5>
<p>Hi..<span><img src="../assets/imgs/read.png"></span></p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MessengerPage } from './messenger';
@NgModule({
declarations: [
MessengerPage,
],
imports: [
IonicPageModule.forChild(MessengerPage),
],
})
export class MessengerPageModule {}
page-messenger {
.main_tab {
width: 100%;
ul {
padding: 0px;
margin: 0px;
padding: 10px;
padding-top: 25px;
li {
width: 40%;
float: left;
text-align: center;
color: #fce8ed;
list-style: none;
font-size: 16px;
font-weight: 400;
padding: 3px;
border: 2px solid transparent;
position: relative;
.notification {
width: 20px;
height: 20px;
background: #f7f6f0;
color: #646362;
border-radius: 50%;
position: absolute;
text-align: center;
font-size: 14px;
padding: 2px;
left: 40%;
bottom: 35px;
}
}
.active {
border: 2px solid #facbde;
border-radius: 20px;
}
}
}
.messenger_wrapper{
padding:15px;
.searchbar {
padding: 0px;
.searchbar-input{
background: #e9e8e8;
height:40px;
border-radius:20px;
box-shadow: none;
}
}
.messenger_content{
h4{
margin:0px;
padding:0px;
color: #282828;
font-size: 18px;
margin-bottom: 20px;
background: url("../assets/imgs/y_arrow_close.png");
background-position: right;
background-repeat: no-repeat;
background-size: 25px;
}
.active{
background: url("../assets/imgs/y_arrow.png");
background-position: right;
background-repeat: no-repeat;
background-size: 25px;
}
ul{
padding: 0px;
margin:0px;
padding-top: 20px;
li{
list-style: none;
margin-bottom: 20px;
.circle_photo{
width:80px;
height:80px;
float: left;
background: #646362;
border-radius: 50%;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.circle_detail{
width:calc(100% - 80px);
float: left;
padding: 8px;
padding-left: 15px;
position: relative;
h5{
text-transform: capitalize;
margin: 0px;
padding:0px;
color: #626262;
font-weight: 400;
padding-bottom: 2px;
}
h6{
text-transform: capitalize;
margin: 0px;
padding:0px;
color: #919191;
font-size: 17px;
font-weight: 400;
padding-bottom: 5px;
}
p{
text-transform: capitalize;
margin: 0px;
padding:0px;
color: #626262;
font-weight:400;
}
.online{
width:10px;
height:10px;
border-radius:50%;
background: #549b00;
position: absolute;
top: 35px;
right: 0px;
}
}
}
}
}
.messenger_chat{
ul{
padding: 0px;
margin:0px;
padding-top:0px;
li{
list-style: none;
margin-bottom: 20px;
.circle_photo{
width:80px;
height:80px;
float: left;
background: #646362;
border-radius: 50%;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.circle_detail{
width:calc(100% - 80px);
float: left;
padding: 20px;
padding-left: 15px;
position: relative;
padding-right: 0px;
h5{
text-transform: capitalize;
margin: 0px;
padding:0px;
color: #626262;
font-weight: 400;
padding-bottom:5px;
p{
font-size:12px;
padding-top: 5px;
font-weight: 300;
}
}
span{
font-size: 14px;
padding-left: 10px;
}
h6{
text-transform: capitalize;
margin: 0px;
padding:0px;
color: #919191;
font-size: 17px;
font-weight: 400;
padding-bottom: 5px;
}
p{
text-transform: capitalize;
margin: 0px;
padding:0px;
color: #626262;
font-weight:400;
span{
img{
width:17px;
}
}
}
.online{
width:10px;
height:10px;
border-radius:50%;
background: #549b00;
position: absolute;
top: 45px;
right: 0px;
}
}
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-messenger',
templateUrl: 'messenger.html',
})
export class MessengerPage {
tab:any;
shownGroup = null;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.tab = "online";
this.shownGroup = 0;
}
ionViewDidLoad() {
console.log('ionViewDidLoad MessengerPage');
}
tab_swap(type) {
this.tab = type;
}
back(){
this.navCtrl.pop();
}
isGroupShown(group) {
return this.shownGroup === group;
}
toggleGroup(group) {
if (this.isGroupShown(group)) {
this.shownGroup = null;
} else {
this.shownGroup = group;
}
}
chat(){
this.navCtrl.push("ChatPage");
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft nav_menu" menuToggle></button>
<div class="nav_header_inner_title floatLeft">My Profile</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="profile_detail_wrapper">
<div class="profile_banner">
<div class="profile_circle">
<div class="add">
<ion-icon name="ios-add-outline"></ion-icon>
</div>
</div>
<div class="profile_detail">
<h5><span><img src="../assets/imgs/edit_contact.png"></span>Edit Contact Info</h5>
<h5><span><img src="../assets/imgs/gen_horror.png"></span>Generate Horoscope</h5>
</div>
<div class="clear"></div>
</div>
<div class="profile_content">
<h5>Personal Information</h5>
<h4>A few words about myself <button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<h6>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum
is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look </h6>
</div>
<hr>
<div class="profile_content">
<h4>Basic Details<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Name</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Ann Alexander</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Age</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>23</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Height</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>6Ft/183 Cms</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Mother Tongue</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Malayalam</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Eating Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Non Vegetarian</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Smoking Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never Smokes</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Profile created for</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Myself</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Body Type/Complextion</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Slim / Wheatish</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Physical Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Normal</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Weight</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>78 Kgs</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Martial Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never married</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Drinking Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never drinks</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Religious Information<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Religion</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Christian</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Caste/Subcaste</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Syrian Orthodox</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Star</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Dosham</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Grooms Location<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Country</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>State</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>City</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Citizen Ship</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Professional Information<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Education</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>College / Institution</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Education in Detail</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Occupation</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Occupation in Detail</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Employed in</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Annuval Income</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Family Details<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Values</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Type</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Orgin</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Location</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Father's Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Mother's Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>No of Brother(s)</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>No of Sister(s)</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>About Our Family<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<h6>I am creating this profile on behalf of my daughter sreeva sreekumar.
She is studying her final year btech in MG college of Engineering(CUSAT).
We are looking for a suitable alliance for her.My wife is a homemaker.
We have one more child , a son elder to her he has completed his btech (EcE)
from anna university and now working as a engineer at Ethisalat, dubai.</h6>
</div>
<hr>
<div class="profile_content">
<h4>Hobbies and Interests <button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<div class="interest_div">
<li>
<img src="../assets/imgs/1.png">
<p>Cooking</p>
</li>
<li>
<img src="../assets/imgs/10.png">
<p>Internet</p>
</li>
<li>
<img src="../assets/imgs/9.png">
<p>Music</p>
</li>
</div>
</div>
<hr>
<div class="profile_content">
<h4>Favourite Music<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<div class="interest_div">
<li>
<img src="../assets/imgs/13.png">
<p>Film<br> Songs</p>
</li>
<li>
<img src="../assets/imgs/14.png">
<p>Western<br> Music</p>
</li>
</div>
</div>
<hr>
<div class="profile_content">
<h4>Sports and Fitness<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<div class="interest_div">
<li>
<img src="../assets/imgs/16.png">
<p> Cricket</p>
</li>
<li>
<img src="../assets/imgs/17.png">
<p>Carrom</p>
</li>
</div>
</div>
<hr>
<div class="profile_content">
<h4>Spoken Languages<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<h6>Hindi, English, Tamil, Malayalam</h6>
</div>
<hr>
<div class="profile_content">
<h5>Partner Preference</h5>
<h4>Basic Preference<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Age</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>23</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Height</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>6 Ft / 183cms</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Mother Tongue</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Malayalam</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Height</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>6 Ft / 183cms</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Physical Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Normal</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Weight</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>78 Kgs</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Martial Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never married</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Drinking Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never drinks</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Religion Preference<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Religion</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Christian</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Caste/Subcaste</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Syrian Orthodox</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Star</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Dosham</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Professional Preference<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Occupation</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Employed in</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Annual Income</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Location Preference<button ion-button class="edit"><ion-icon name="md-create"></ion-icon>Edit</button></h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Country</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>State</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>City</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Citizen Ship</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyprofilePage } from './myprofile';
@NgModule({
declarations: [
MyprofilePage,
],
imports: [
IonicPageModule.forChild(MyprofilePage),
],
})
export class MyprofilePageModule {}
page-myprofile {
.profile_detail_wrapper{
width:100%;
}
.profile_banner{
padding:15px;
.profile_circle{
width:100px;
height:100px;
border-radius:50%;
background: #929191;
float: left;
position: relative;
.add{
width:30px;
height:30px;
position: absolute;
border-radius: 50%;
background: #ffae00;
text-align: center;
color:#292929;
top:0px;
right:0px;
font-size: 24px;
padding: 1px;
}
img{
width:100%;
height:100%;
border-radius:50%;
object-fit: cover;
object-position: center;
}
}
.profile_detail{
float: left;
width:calc(100% - 100px);
padding: 25px;
padding-top: 10px;
h5{
color: #616161;
margin: 0px;
font-weight: 400;
font-size: 16px;
span{
img{
width:30px;
position: relative;
top: 8px;
margin-right: 10px;
}
}
}
}
}
.profile_content{
width:100%;
padding: 15px;
h5{
color: #282828;
margin: 0px;
padding:0px;
font-size: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 5px;
}
p{
color: #3f3e3e;
margin: 0px;
padding:0px;
padding-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member_flag{
background: #59a400;
color: #fff;
border-radius:20px;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
}
.badge_list{
width:100%;
padding-top: 15px;
padding-bottom:25px;
li{
list-style: none;
display: inline-block;
width:35px;
height:35px;
border-radius:50%;
margin-right: 15px;
text-align: center;
color: #fff;
font-size: 17px;
padding-top:7px;
}
.fav{
background: #ffc600;
}
.call{
background: #00a493;
}
.chat{
background: #d12d82;
}
}
.row{
padding-bottom: 5px !important;
}
h4{
margin: 0px;
color: #343434;
font-weight:500;
padding-bottom: 10px;
font-size: 16px;
position: relative;
.edit{
position: absolute;
top:0px;
right:0px;
height:20px;
margin: 0px;
text-transform:lowercase;
font-weight:400;
letter-spacing: 1px;
font-size: 14px;
background: transparent;
color: #5e5e5e;
.icon{
margin-right: 5px;
}
}
}
h6{
margin: 0px;
color: #929191;
padding-top: 10px;
font-weight: 300;
text-align: justify;
font-size: 14px;
strong{
font-weight:400;
color: #666666;
}
}
.interest_div{
padding-top: 10px;
li{
list-style: none;
display:inline-block;
text-align: center;
margin-right: 15px;
img{
width: 30px;
}
p{
margin: 0px;
padding:0px;
color: #6c6c6c;
font-weight: 300;
text-align: center;
}
}
}
}
.login_btn{
color: #ffffff;
background: #ee3380;
.icon{
padding-right: 10px;
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-myprofile',
templateUrl: 'myprofile.html',
})
export class MyprofilePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad MyprofilePage');
}
}
<ion-header class="nav_header theme_background">
<button ion-button class=" nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1">
Notification Settings
</div>
<br>
<br>
<ion-row class="p0">
<ion-col col-8 class="p0">
<p>Daily Recommendations</p>
</ion-col>
<ion-col col-4 class="p0 textRight">
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-8 class="p0">
<p>Who viewed my Profile</p>
</ion-col>
<ion-col col-4 class="p0 textRight">
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-8 class="p0">
<p>New matching Profile</p>
</ion-col>
<ion-col col-4 class="p0 textRight">
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-8 class="p0">
<p>Who Shortlisted Me</p>
</ion-col>
<ion-col col-4 class="p0 textRight">
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-8 class="p0">
<p>All Notifications</p>
</ion-col>
<ion-col col-4 class="p0 textRight">
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-8 class="p0">
<p>SMS Alert</p>
</ion-col>
<ion-col col-4 class="p0 textRight">
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</ion-col>
</ion-row>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { NotificationsettingsPage } from './notificationsettings';
@NgModule({
declarations: [
NotificationsettingsPage,
],
imports: [
IonicPageModule.forChild(NotificationsettingsPage),
],
})
export class NotificationsettingsPageModule {}
page-notificationsettings {
.settings_wrapper {
.setting_head {
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
}
.m1 {
background: url("../assets/imgs/notification.png");
}
p {
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 0px;
margin: 0px;
}
.item-inner {
border: none !important;
.label {
color: #858585;
font-weight: 300;
margin: 0px;
font-size: 17px;
}
}
}
.row {
margin-bottom: 20px;
}
.toggle {
padding: 5px;
}
.save {
background: #d12d82;
border: 2px solid #d12d82;
color: #fff;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
.reset {
background: transparent;
border: 2px solid #939393;
color: #939393;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
height: 35px;
padding-left: 30px;
padding-right: 30px;
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-notificationsettings',
templateUrl: 'notificationsettings.html',
})
export class NotificationsettingsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad NotificationsettingsPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-content padding>
<div class="otp_wrapper">
<h4>Congratulations !</h4>
<p>You have Successfully registered with <br>
Soulmate.com</p>
<h5>ID : E3654258</h5>
<br>
<hr>
<br>
<p>A 6 - Digit Confirmation code has been sent to</p>
<h6>+91 9613457965<span><img src="../assets/imgs/edit.png"></span></h6>
<br>
<h6>Enter the Code</h6>
<input class="code_input" placeholder="0000">
<h3>Didnt Received code yet?</h3>
<h3><strong>Resend pin</strong></h3>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="main_btn login_btn widthFull" (click)="addphoto()">Verify</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OtpPage } from './otp';
@NgModule({
declarations: [
OtpPage,
],
imports: [
IonicPageModule.forChild(OtpPage),
],
})
export class OtpPageModule {}
page-otp {
.otp_wrapper{
h4{
color: #464646;
text-align:center;
font-size: 45px;
font-weight: 400;
}
p{
color: #6c6c6c;
text-align: center;
font-weight:300;
font-size: 18px;
}
h6{
text-align:center;
color: #464646;
font-size: 20px;
span{
img{
width: 30px;
position: relative;
top: 5px;
margin-left: 10px;
}
}
}
h3{
color: #6c6c6c;
font-size: 16px;
font-weight:300;
text-align: center;
strong{
color: #d12d4c;
}
}
.code_input{
height:45px;
border-radius:25px;
background: #ededec;
border:none;
width: 100%;
text-align: center;
font-size: 24px;
font-weight: 400;
letter-spacing: 4px;
}
h5{
color: #ee3380;
text-align: center;
}
hr{
border:2px solid #ee3380;
height:0px;
width:25px;
border-radius: 20px;
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-otp',
templateUrl: 'otp.html',
})
export class OtpPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad OtpPage');
}
back(){
this.navCtrl.pop();
}
addphoto(){
this.navCtrl.push("AddphotoPage");
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft nav_menu" menuToggle></button>
<div class="nav_header_inner_title floatLeft">Membership Package</div>
<button ion-button class="nav_inner_btn floatRight">
<ion-icon name="ios-funnel"></ion-icon>
</button>
<div class="clear"></div>
<div class="main_tab">
<ul>
<li [class.active]="tab == 'match'" (click)="tab_swap('match')">3 Months</li>
<li [class.active]="tab == 'shortlist'" (click)="tab_swap('shortlist')">6 Months</li>
<li [class.active]="tab == 'recent'" (click)="tab_swap('recent')">Till u Marry</li>
<div class="clear"></div>
</ul>
</div>
</ion-header>
<ion-content class="">
<div class="home_wrapper">
<div class="home_content" [hidden]="tab !='match'">
<ul>
<li (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">
<div class="badge classic"></div>
<h5>CLASSIC</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(0)">
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
<li (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
<div class="badge classic_advantage "></div>
<h5>CLASSIC advantage</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(1)">
<h4 class="highlighter">Get 1 month free profile <br> highlighter
</h4>
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
<li (click)="toggleGroup(2)" [ngClass]="{active:isGroupShown(2)}">
<div class="badge classic_premium "></div>
<h5>CLASSIC advantage</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(2)">
<h4 class="highlighter">Get 2 month free profile <br> highlighter
</h4>
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
</ul>
</div>
<div class="home_content " [hidden]="tab !='shortlist' ">
<ul>
<li (click)="toggleGroup(3)" [ngClass]="{active:isGroupShown(3)}">
<div class="badge classic"></div>
<h5>CLASSIC</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(3)">
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
<li (click)="toggleGroup(4)" [ngClass]="{active:isGroupShown(4)}">
<div class="badge classic_advantage "></div>
<h5>CLASSIC advantage</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(4)">
<h4 class="highlighter">Get 1 month free profile <br> highlighter
</h4>
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
<li (click)="toggleGroup(5)" [ngClass]="{active:isGroupShown(5)}">
<div class="badge classic_premium "></div>
<h5>CLASSIC advantage</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(5)">
<h4 class="highlighter">Get 2 month free profile <br> highlighter
</h4>
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
</ul>
</div>
<div class="home_content " [hidden]="tab !='recent' ">
<ul>
<li (click)="toggleGroup(6)" [ngClass]="{active:isGroupShown(6)}">
<div class="badge classic"></div>
<h5>CLASSIC</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(6)">
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
<li (click)="toggleGroup(7)" [ngClass]="{active:isGroupShown(7)}">
<div class="badge classic_advantage "></div>
<h5>CLASSIC advantage</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(7)">
<h4 class="highlighter">Get 1 month free profile <br> highlighter
</h4>
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
<li (click)="toggleGroup(8)" [ngClass]="{active:isGroupShown(8)}">
<div class="badge classic_premium "></div>
<h5>CLASSIC advantage</h5>
<p>Rs. 4200/-</p>
<h6>Rs. 1200/ month</h6>
</li>
<div class="package_detail" *ngIf="isGroupShown(8)">
<h4 class="highlighter">Get 2 month free profile <br> highlighter
</h4>
<h4 class="message">Send unlimited Personalized <br> Messages
</h4>
<h4 class="number">Access 40 Verified <br> mobile numbers
</h4>
<button ion-button class=" subscribe " (click)="subscribe()">Subscribe</button>
</div>
</ul>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PackagePage } from './package';
@NgModule({
declarations: [
PackagePage,
],
imports: [
IonicPageModule.forChild(PackagePage),
],
})
export class PackagePageModule {}
page-package {
.main_tab {
width: 100%;
ul {
padding: 0px;
margin: 0px;
padding: 10px;
li {
width: 33.3%;
float: left;
text-align: center;
color: #fce8ed;
list-style: none;
font-size: 16px;
font-weight: 400;
padding: 3px;
border: 2px solid transparent;
}
.active {
border: 2px solid #facbde;
border-radius: 20px;
}
}
}
.home_background {
background: #e1f0f1;
}
.home_wrapper {
ul {
padding: 0px;
margin: 0px;
li {
list-style: none;
width: 100%;
background-color: #efeee5 !important;
position: relative;
padding: 10px;
padding-left: 70px;
padding-top: 30px;
padding-bottom: 30px;
background: url("../assets/imgs/drop_down_arrow.png");
background-position: right 25px top 47%;
background-repeat: no-repeat;
background-size: 25px;
margin-bottom: 5px;
.badge {
width: 35px;
height: 25px;
position: absolute;
background-position: left !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
left: 0px;
top: 38%;
}
h5 {
margin: 0px;
padding: 0px;
color: #5c5c5c;
padding-bottom: 8px;
text-transform: uppercase;
}
p {
margin: 0px;
padding: 0px;
color: #525252;
padding-bottom: 8px;
font-size: 18px;
}
h6 {
margin: 0px;
padding: 0px;
color: #919191;
font-weight: 400;
}
.classic {
background: url("../assets/imgs/classic.png");
}
.classic_advantage {
background: url("../assets/imgs/classic_advantage.png");
}
.classic_premium {
background: url("../assets/imgs/classic_premium.png");
}
}
.package_detail {
padding: 15px;
padding-left: 70px;
h4 {
margin: 0px;
color: #757575;
font-weight: 300;
font-size: 14px;
background-position: top left !important;
background-repeat: no-repeat !important;
background-size: 30px !important;
padding-left: 50px;
padding-bottom: 15px;
}
.subscribe {
background: #659a00;
height: 30px;
text-transform: capitalize;
font-weight: 400;
border-radius: 20px;
padding-left: 30px;
padding-right: 30px;
}
.message {
background: url("../assets/imgs/message.png");
}
.number {
background: url("../assets/imgs/number.png");
}
.highlighter {
background: url("../assets/imgs/highlighter.png");
}
}
}
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-package',
templateUrl: 'package.html',
})
export class PackagePage {
tab:any;
shownGroup = null;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.tab = "match";
this.shownGroup = 0;
}
tab_swap(type) {
this.tab = type;
}
ionViewDidLoad() {
console.log('ionViewDidLoad PackagePage');
}
subscribe(){
this.navCtrl.push("SubscribePage");
}
isGroupShown(group) {
return this.shownGroup === group;
}
toggleGroup(group) {
if (this.isGroupShown(group)) {
this.shownGroup = null;
} else {
this.shownGroup = group;
}
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Premium Services</div>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="premium_div">
<ul>
<li>
</li>
<li></li>
<li>
</li>
<li></li>
</ul>
<h4>We have 214 Profiles matching<br>
your criteria</h4>
<p>You can get in touch with them directly via phone or
mail by upgrading to a paid member membership</p>
<br>
<hr>
<br>
<button ion-button class="main_btn login_btn widthFull" (click)="next()">View Services</button>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="main_btn btn_trans widthFull" (click)="next()">I’ ll do this Later</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PremiumservicePage } from './premiumservice';
@NgModule({
declarations: [
PremiumservicePage,
],
imports: [
IonicPageModule.forChild(PremiumservicePage),
],
})
export class PremiumservicePageModule {}
page-premiumservice {
.premium_div{
ul{
margin:0px;
padding:0px;
padding-top: 20px;
padding-bottom: 20px;
width:100%;
text-align: center;
li{
list-style: none;
width:70px;
height:70px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background: #e7e7e7;
display: inline-block;
margin: 3px;
img{
width:100%;
height:100%;
border-radius:50%;
object-fit: cover;
object-position:center;
}
}
}
h4{
color: #664150;
text-align: center;
}
p{
color: #6c6c6c;
text-align: center;
font-weight: 300;
font-size: 16px;
}
hr{
border:2px solid #ee3380;
height:0px;
width:20px;
border-radius:20px;
margin: 0 auto;
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
.btn_trans{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
color: #8d8d8d;
background: transparent;
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.btn_trans{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 2px;
color: #8d8d8d;
background: transparent;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-premiumservice',
templateUrl: 'premiumservice.html',
})
export class PremiumservicePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PremiumservicePage');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("MatchesPage");
}
}
<ion-content>
<div class="profile_detail_wrapper">
<div class="nav_header profile_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
E825456
</div>
<button ion-button class="nav_btn floatRight"></button>
<div class="clear"></div>
</div>
<div class="profile_banner">
<div class="profile_banner_overflow"></div>
<img src="../assets/imgs/banner.png">
<div class="bottom_list">
<li>
<img src="../assets/imgs/g1.png">
</li>
<li>
<div class="over_flow">+13</div>
<img src="../assets/imgs/g1.png">
</li>
</div>
</div>
<div class="profile_content">
<ion-row class="p0">
<ion-col col-7 class="p0">
<h5>Ann Alexander</h5>
<p>22 Yrs, 5 Ft, Alappuzha Kerala </p>
</ion-col>
<ion-col col-5 class="p0">
<div class="member_flag floatRight">Premium Member</div>
<div class="clear"></div>
</ion-col>
</ion-row>
<div class="badge_list">
<li class="fav">
<ion-icon name="md-star"></ion-icon>
</li>
<li class="call">
<ion-icon name="md-call"></ion-icon>
</li>
<li class="chat">
<ion-icon name="md-chatboxes"></ion-icon>
</li>
</div>
<h5>Personal Information</h5>
<h4>A few words about myself</h4>
<h6>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum
is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look </h6>
</div>
<hr>
<div class="profile_content">
<h4>Basic Details</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Name</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Ann Alexander</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Age</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>23</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Height</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>6Ft/183 Cms</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Mother Tongue</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Malayalam</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Eating Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Non Vegetarian</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Smoking Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never Smokes</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Profile created for</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Myself</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Body Type/Complextion</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Slim / Wheatish</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Physical Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Normal</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Weight</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>78 Kgs</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Martial Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never married</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Drinking Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never drinks</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Religious Information</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Religion</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Christian</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Caste/Subcaste</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Syrian Orthodox</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Star</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Dosham</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Grooms Location</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Country</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>State</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>City</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Citizen Ship</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Professional Information</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Education</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>College / Institution</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Education in Detail</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Occupation</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Occupation in Detail</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Employed in</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Annuval Income</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Family Details</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Values</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Type</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Orgin</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Family Location</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Father's Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Mother's Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>No of Brother(s)</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>No of Sister(s)</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>About Our Family</h4>
<h6>I am creating this profile on behalf of my daughter sreeva sreekumar.
She is studying her final year btech in MG college of Engineering(CUSAT).
We are looking for a suitable alliance for her.My wife is a homemaker.
We have one more child , a son elder to her he has completed his btech (EcE)
from anna university and now working as a engineer at Ethisalat, dubai.</h6>
</div>
<hr>
<div class="profile_content">
<h4>Hobbies and Interests</h4>
<div class="interest_div">
<li>
<img src="../assets/imgs/1.png">
<p>Cooking</p>
</li>
<li>
<img src="../assets/imgs/10.png">
<p>Internet</p>
</li>
<li>
<img src="../assets/imgs/9.png">
<p>Music</p>
</li>
</div>
</div>
<hr>
<div class="profile_content">
<h4>Favourite Music</h4>
<div class="interest_div">
<li>
<img src="../assets/imgs/13.png">
<p>Film<br> Songs</p>
</li>
<li>
<img src="../assets/imgs/14.png">
<p>Western<br> Music</p>
</li>
</div>
</div>
<hr>
<div class="profile_content">
<h4>Sports and Fitness</h4>
<div class="interest_div">
<li>
<img src="../assets/imgs/16.png">
<p> Cricket</p>
</li>
<li>
<img src="../assets/imgs/17.png">
<p>Carrom</p>
</li>
</div>
</div>
<hr>
<div class="profile_content">
<h4>Spoken Languages</h4>
<h6>Hindi, English, Tamil, Malayalam</h6>
</div>
<hr>
<div class="profile_content">
<h5>Partner Preference</h5>
<h4>Basic Preference</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Age</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>23</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Height</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>6 Ft / 183cms</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Mother Tongue</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Malayalam</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Height</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>6 Ft / 183cms</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Physical Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Normal</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Weight</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>78 Kgs</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Martial Status</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never married</h6></ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="p0"><h6><strong>Drinking Habits</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Never drinks</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Religion Preference</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Religion</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Christian</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Caste/Subcaste</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Syrian Orthodox</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Star</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Dosham</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Professional Preference</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Occupation</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Employed in</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Annual Income</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
<hr>
<div class="profile_content">
<h4>Location Preference</h4>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Country</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>State</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>City</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
<ion-row class="p0">
<ion-col col-6 class="p0"><h6><strong>Citizen Ship</strong></h6></ion-col>
<ion-col col-1 class="p0"><h6>:</h6></ion-col>
<ion-col col-5 class="p0"><h6>Not Specified</h6></ion-col>
</ion-row>
</div>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="main_btn login_btn widthFull"><ion-icon name="md-heart"></ion-icon>Send Interest</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfiledetailPage } from './profiledetail';
@NgModule({
declarations: [
ProfiledetailPage,
],
imports: [
IonicPageModule.forChild(ProfiledetailPage),
],
})
export class ProfiledetailPageModule {}
page-profiledetail {
.profile_detail_wrapper {
width: 100%;
}
.profile_banner {
width: 100%;
height: 300px;
background: #e7e7e7;
position: relative;
.profile_banner_overflow {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
box-shadow: inset 10px 20px 120px 40px rgba(0, 0, 0, 0.5);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bottom_list {
position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
li {
width: 60px;
height: 60px;
border-radius: 50%;
background: #e7e7e7;
list-style: none;
margin: 5px;
display: inline-block;
position: relative;
.over_flow {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.8);
color: #fefefd;
text-align: center;
font-size: 20px;
font-weight: 300;
padding-top: 15px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
}
}
.profile_header {
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 99;
background: transparent;
.nav_btn {
color: #fff;
}
.nav_header_title {
color: #fff;
text-align: left;
}
}
.profile_content {
width: 100%;
padding: 15px;
h5 {
color: #282828;
margin: 0px;
padding: 0px;
font-size: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 5px;
}
p {
color: #3f3e3e;
margin: 0px;
padding: 0px;
padding-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member_flag {
background: #59a400;
color: #fff;
border-radius: 20px;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
}
.badge_list {
width: 100%;
padding-top: 15px;
padding-bottom: 25px;
li {
list-style: none;
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
margin-right: 15px;
text-align: center;
color: #fff;
font-size: 17px;
padding-top: 7px;
}
.fav {
background: #ffc600;
}
.call {
background: #00a493;
}
.chat {
background: #d12d82;
}
}
.row {
padding-bottom: 5px !important;
}
h4 {
margin: 0px;
color: #343434;
font-weight: 500;
padding-bottom: 10px;
font-size: 16px;
}
h6 {
margin: 0px;
color: #929191;
padding-top: 10px;
font-weight: 300;
text-align: justify;
font-size: 14px;
strong {
font-weight: 400;
color: #666666;
}
}
.interest_div {
padding-top: 10px;
li {
list-style: none;
display: inline-block;
text-align: center;
margin-right: 15px;
img {
width: 30px;
}
p {
margin: 0px;
padding: 0px;
color: #6c6c6c;
font-weight: 300;
text-align: center;
}
}
}
}
.login_btn {
color: #ffffff;
background: #ee3380;
.icon {
padding-right: 10px;
}
}
.main_btn {
height: 50px;
border-radius: 25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-profiledetail',
templateUrl: 'profiledetail.html',
})
export class ProfiledetailPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProfiledetailPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="setting_bg">
<div class="settings_wrapper">
<div class="setting_head m1" radio-group>
Profile Settings
</div>
<p>Your Profile Privacy has been set as "Show my Profile to all including visitors"
</p>
<ion-item>
<ion-label>Show my Profile to all including visitors</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Show my Profile to registered members only</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
<br>
<ion-item>
<ion-checkbox></ion-checkbox>
<ion-label>Let others know that I shortlisted their profile.</ion-label>
</ion-item>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="save">Submit</button>
<button ion-button class="reset">Cancel</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfilesettingsPage } from './profilesettings';
@NgModule({
declarations: [
ProfilesettingsPage,
],
imports: [
IonicPageModule.forChild(ProfilesettingsPage),
],
})
export class ProfilesettingsPageModule {}
page-profilesettings {
.settings_wrapper{
.setting_head{
color: #282828;
font-size: 24px;
background-repeat: no-repeat !important;
background-position: 0px !important;
background-size: 45px !important;
padding-top: 10px;
padding-bottom: 10px;
padding-left:60px;
}
.m1{
background: url("../assets/imgs/profile_settings.png");
}
p{
color: #858585;
font-weight: 300;
text-align: justify;
padding-top: 10px;
}
h6{
color: #858585;
}
.input {
border-bottom:1px solid #acacac;
.text-input{
margin-left: 0px;
margin-right: 0px;
width: 100%;
font-size: 16px;
font-weight: 300;
}
}
.checkbox {
margin:0px !important;
.checkbox-checked{
border:1px solid #ee3380 !important;
background: #ee3380 !important;
}
.checkbox-icon{
width:20px;
height:20px;
border:1px solid #959595;
background: transparent;
margin-right: 15px;
}
.checkbox-inner{
left: 6px;
top: 3px;
}
}
.item-inner{
border: none !important;
.label{
color: #858585;
font-weight: 300;
margin: 0px;
font-size: 17px;
}
}
}
.save{
background: #d12d82;
border:2px solid #d12d82;
color: #fff;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
.reset{
background:transparent;
border:2px solid #939393;
color: #939393;
text-transform:capitalize;
font-weight: 400;
border-radius: 20px;
height:35px;
padding-left: 30px;
padding-right:30px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-profilesettings',
templateUrl: 'profilesettings.html',
})
export class ProfilesettingsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProfilesettingsPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Refine Search</div>
<button ion-button class="nav_inner_btn floatRight">
</button>
<div class="clear"></div>
<ion-searchbar [showCancelButton]="shouldShowCancel" (ionCancel)="onCancel($event)" placeholder="Search by ID">
</ion-searchbar>
</ion-header>
<ion-content padding>
<div class="refine_search_wrapper">
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Age</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-row>
<ion-col col-5>
<input class="custom_input" placeholder="18">
</ion-col>
<ion-col col-2>
<p>To</p>
</ion-col>
<ion-col col-5>
<input class="custom_input" placeholder="25">
</ion-col>
</ion-row>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Height</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-row>
<ion-col col-5>
<input class="custom_input" placeholder="5 Ft">
</ion-col>
<ion-col col-2>
<p>To</p>
</ion-col>
<ion-col col-5>
<input class="custom_input" placeholder="6.5 Ft">
</ion-col>
</ion-row>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Maritial Status</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Never Married</ion-option>
<ion-option value="2"> Married</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Religion</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Religion</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Mother Tongue</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Mother Tongue</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Caste</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Caste</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Star</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Karthika</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Country</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>India</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>State</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Kerala</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>City</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Kochin</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Education</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Education</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<ion-item>
<p>Occupation</p>
</ion-item>
</ion-col>
<ion-col col-7 class="p0">
<ion-item>
<ion-select>
<ion-option value="1" selected>Occupation</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</div>
</ion-content>
<ion-footer padding>
<button ion-button class="login_btn main_btn widthFull">Search</button>
</ion-footer>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SearchfilterPage } from './searchfilter';
@NgModule({
declarations: [
SearchfilterPage,
],
imports: [
IonicPageModule.forChild(SearchfilterPage),
],
})
export class SearchfilterPageModule {}
page-searchfilter {
.searchbar-input {
background-color: #cf3072 !important;
border-radius: 20px !important;
box-shadow: none !important;
color: #fff !important;
font-weight: 400 !important;
padding-left: 25px !important;
background: url("../assets/imgs/search_icon.png");
background-repeat: no-repeat;
background-position: right 10px top 10px !important;
background-size: 20px;
&::placeholder {
color: #d89ab3;
}
}
.searchbar-search-icon {
display: none;
}
.searchbar-clear-icon {
display: none !important;
}
.refine_search_wrapper {
width: 100%;
p {
margin: 0px;
padding: 0px;
color: #492d38;
font-size: 16px;
font-weight: 400;
}
.row {}
.item-inner {
border: none !important;
.label {
color: #999999;
font-weight: 300;
margin: 0px;
font-size: 16px;
}
.select {
min-width: 100%;
padding: 0px;
color: #999999;
font-size: 16px;
background: url("../assets/imgs/drop.png");
background-repeat: no-repeat;
background-position: right;
background-size: 15px;
.select-icon {
display: none;
}
}
.custom_input {
background: #e9e8e8;
text-align: center;
color: #474747;
width: 100%;
border: none;
border-radius: 20px;
font-weight: 400;
font-size: 16px;
height: 25px;
&::placeholder {
color: #474747;
font-weight: 400;
}
}
}
}
.login_btn {
color: #ffffff;
background: #ee3380;
.icon {
padding-right: 10px;
}
}
.main_btn {
height: 50px;
border-radius: 25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-searchfilter',
templateUrl: 'searchfilter.html',
})
export class SearchfilterPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SearchfilterPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button menuToggle ion-button class="nav_btn nav_inner_btn floatLeft">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Settings</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<ion-content padding>
<div class="settings_wrapper">
<h6>Application Settings</h6>
<ul>
<li (click)="editemail()"><span><img src="../assets/imgs/editmail.png"></span>Edit Email Address</li>
<li (click)="changepass()"><span><img src="../assets/imgs/changepass.png"></span>Change Password</li>
<li (click)="managealerts()"><span><img src="../assets/imgs/managealert.png"></span>Manage Mail Alerts</li>
<li (click)="contactfilters()"><span><img src="../assets/imgs/contactfilter.png"></span>Contact Filters</li>
<li (click)="notification()"><span><img src="../assets/imgs/notification_icon.png"></span>Notification Settings</li>
<li (click)="profilesettings()"><span><img src="../assets/imgs/profilesettings.png"></span>Profile Settings</li>
<!-- <li (click)="accountsettings()"><span><img src="../assets/imgs/account_icon.png"></span>Account Settings</li> -->
<li (click)="deactivateprofile()"><span><img src="../assets/imgs/deactivateprofile.png"></span>Deactivate Profile</li>
<li (click)="deleteprofile()"><span><img src="../assets/imgs/deleteprofile.png"></span>Delete Profile</li>
</ul>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingsPage } from './settings';
@NgModule({
declarations: [
SettingsPage,
],
imports: [
IonicPageModule.forChild(SettingsPage),
],
})
export class SettingsPageModule {}
page-settings {
.settings_wrapper{
width: 100%;
h6{
color:#282828;
font-size: 22px;
font-weight: 400;
}
ul{
margin:0px;
padding: 0px;
li{
list-style: none;
color: #5d5d5d;
font-size: 18px;
font-weight:400;
padding-top: 12px;
padding-bottom: 12px;
background: url("../assets/imgs/arrow.png");
background-repeat: no-repeat;
background-position: right;
background-size: 15px;
span{
img{
width:30px;
margin-right:20px;
position: relative;
top: 7px;
}
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-settings',
templateUrl: 'settings.html',
})
export class SettingsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SettingsPage');
}
editemail(){
this.navCtrl.push("EditemailPage");
}
profilesettings(){
this.navCtrl.push("ProfilesettingsPage");
}
managealerts(){
this.navCtrl.push("ManagealertsPage");
}
changepass(){
this.navCtrl.push("ChangepassPage");
}
contactfilters(){
this.navCtrl.push("ContactfiltersPage");
}
deleteprofile(){
this.navCtrl.push("DeleteprofilePage");
}
deactivateprofile(){
this.navCtrl.push("DeactivateprofilePage");
}
notification(){
this.navCtrl.push("NotificationsettingsPage");
}
accountsettings(){
this.navCtrl.push("AccountsettingsPage");
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Signup</div>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="signup_wrapper">
<h4>Welcome to</h4>
<h5>Soulmate</h5>
<div class="signup_content">
<ion-item>
<ion-input type="text" placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="g" selected>Gender</ion-option>
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-datetime displayFormat="MM/DD/YYYY" placeholder="Date of Birth"></ion-datetime>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="r" selected>Religion</ion-option>
<ion-option value="f">Christian</ion-option>
<ion-option value="m">Hindu</ion-option>
<ion-option value="o">Islam</ion-option>
<ion-option value="p">Sikh</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-input type="number" placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input type="text" placeholder="Mail"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
</ion-item>
</div>
</div>
</ion-content>
<ion-footer padding>
<button class="main_btn login_btn widthFull" (click)="next()">Next</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SignupPage } from './signup';
@NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage),
],
})
export class SignupPageModule {}
page-signup {
.signup_wrapper{
width: 100%;
h4{
color: #6c6c6c;
margin:0px;
padding:0px;
font-size: 50px;
font-weight: 300;
}
h5{
color: #ee3380;
margin:0px;
padding:0px;
font-weight: 300;
font-size: 35px;
}
.signup_content{
width: 100%;
padding-top: 30px;
.item {
margin-bottom: 10px;
.item-inner{
border:none;
.input-wrapper{
.select {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
color: #afafae;
background: url("../assets/imgs/drop.png");
background-position: right;
background-repeat:no-repeat;
background-size: 16px;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
.select-icon{
display: none;
}
.datetime {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
&::placeholder{
color: #afafae;
}
.datetime-text{
color: #afafae;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
.input {
.text-input{
height: 100%;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
}
}
}
}
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
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');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("Signup2Page");
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Signup</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="signup_wrapper">
<h5>Tell us more about you</h5>
<p>so we can help find relevant <br>
matches !</p>
<div class="signup_content">
<ion-item>
<ion-select>
<ion-option value="g" selected>Caste/ Division</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="g" selected>Sub Caste</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Marital Status</ion-option>
<ion-option value="2">Married</ion-option>
<ion-option value="3">Not Married</ion-option>
<ion-option value="4">Widowed</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Willing to marry from other communities</ion-label>
<ion-checkbox ></ion-checkbox>
</ion-item>
</div>
</div>
<hr>
<div class="signup_wrapper">
<div class="signup_content pt0">
<h4>Your current location</h4>
<br>
<ion-item>
<ion-select>
<ion-option value="1" selected>Country living in</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>State</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>City</ion-option>
</ion-select>
</ion-item>
</div>
</div>
</ion-content>
<ion-footer padding>
<button class="main_btn login_btn widthFull" (click)="next()">Next</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Signup2Page } from './signup2';
@NgModule({
declarations: [
Signup2Page,
],
imports: [
IonicPageModule.forChild(Signup2Page),
],
})
export class Signup2PageModule {}
page-signup2 {
.signup_wrapper{
width: 100%;
padding:15px;
padding-bottom: 0px;
h5{
color: #ee3380;
margin:0px;
padding:0px;
font-weight: 400;
font-size:30px;
}
p{
color: #6c6c6c;
margin: 0px;
font-size: 20px;
}
h4{
color: #939393;
}
.signup_content{
width: 100%;
padding-top: 30px;
.item {
margin-bottom: 10px;
.item-inner{
border:none;
.input-wrapper{
.select {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
color: #afafae;
background: url("../assets/imgs/drop.png");
background-position: right;
background-repeat:no-repeat;
background-size: 16px;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
.select-icon{
display: none;
}
.datetime {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
&::placeholder{
color: #afafae;
}
.datetime-text{
color: #afafae;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
.input {
.text-input{
height: 100%;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
}
.label {
color: #676767;
font-size: 16px;
}
}
.checkbox {
margin: 0px;
margin-right: 20px;
.checkbox-icon{
width:23px;
height:23px;
border-radius: 50%;
.checkbox-inner {
left:7px;
top:3px;
}
}
}
}
}
}
hr{
margin: 0px;
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-signup2',
templateUrl: 'signup2.html',
})
export class Signup2Page {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Signup2Page');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("Signup3Page");
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Signup</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="signup_wrapper">
<p>Just a few more details and you are<br>
good to go !</p>
<div class="signup_content">
<ion-item>
<ion-select>
<ion-option value="g" selected>Height</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="g" selected>Physical Status</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Education</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Employed in</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Country living in</ion-option>
</ion-select>
</ion-item>
<h4>Annual Income</h4>
<ion-item>
<ion-select>
<ion-option value="1" selected>INR</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-input type="text" placeholder="Amount"></ion-input>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Having Dosham</ion-option>
<ion-option value="2" >Yes</ion-option>
<ion-option value="3" >No</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Family Status</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Family Type</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select>
<ion-option value="1" selected>Family Value</ion-option>
</ion-select>
</ion-item>
</div>
</div>
</ion-content>
<ion-footer padding>
<button class="main_btn login_btn widthFull" (click)="next()">Next</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Signup3Page } from './signup3';
@NgModule({
declarations: [
Signup3Page,
],
imports: [
IonicPageModule.forChild(Signup3Page),
],
})
export class Signup3PageModule {}
page-signup3 {
.signup_wrapper{
width: 100%;
padding:15px;
padding-bottom: 0px;
h5{
color: #ee3380;
margin:0px;
padding:0px;
font-weight: 400;
font-size:30px;
}
p{
color: #6c6c6c;
margin: 0px;
font-size: 20px;
}
h4{
color: #939393;
}
.signup_content{
width: 100%;
padding-top: 30px;
.item {
margin-bottom: 10px;
.item-inner{
border:none;
.input-wrapper{
.select {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
color: #afafae;
background: url("../assets/imgs/drop.png");
background-position: right;
background-repeat:no-repeat;
background-size: 16px;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
.select-icon{
display: none;
}
.datetime {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
&::placeholder{
color: #afafae;
}
.datetime-text{
color: #afafae;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
.input {
.text-input{
height: 100%;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
}
.label {
color: #676767;
font-size: 16px;
}
}
.checkbox {
margin: 0px;
margin-right: 20px;
.checkbox-icon{
width:23px;
height:23px;
border-radius: 50%;
.checkbox-inner {
left:7px;
top:3px;
}
}
}
}
}
}
hr{
margin: 0px;
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-signup3',
templateUrl: 'signup3.html',
})
export class Signup3Page {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Signup3Page');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("Signup4Page");
}
}
<ion-header class="nav_header">
<button ion-button class="nav_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">Signup</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="signup_wrapper">
<h4><strong>About you</strong></h4>
<p><strong>Say something about you !</strong></p>
<div class="signup_content">
<h6>Description here</h6>
<textarea class="" rows="6" placeholder=""></textarea>
<span>Min. 50 Characters</span>
<br>
<br>
<span class="help">Need help?</span>
</div>
</div>
</ion-content>
<ion-footer padding>
<button class="main_btn login_btn widthFull" (click)="next()">Complete</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Signup4Page } from './signup4';
@NgModule({
declarations: [
Signup4Page,
],
imports: [
IonicPageModule.forChild(Signup4Page),
],
})
export class Signup4PageModule {}
page-signup4 {
.signup_wrapper{
width: 100%;
padding:15px;
padding-bottom: 0px;
h5{
color: #ee3380;
margin:0px;
padding:0px;
font-weight: 400;
font-size:30px;
}
p{
color: #6c6c6c;
margin: 0px;
font-size: 20px;
strong{
color: #6c6c6c;
font-weight: 300;
}
}
h4{
color: #939393;
strong{
color: #464646;
font-weight:500;
font-size: 23px;
}
}
.signup_content{
width: 100%;
padding-top:20px;
.item {
margin-bottom: 10px;
.item-inner{
border:none;
.input-wrapper{
.select {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
color: #afafae;
background: url("../assets/imgs/drop.png");
background-position: right;
background-repeat:no-repeat;
background-size: 16px;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
.select-icon{
display: none;
}
.datetime {
min-width: 100%;
padding-left: 0px;
padding-right: 0px;
&::placeholder{
color: #afafae;
}
.datetime-text{
color: #afafae;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
.input {
.text-input{
height: 100%;
font-size: 18px;
&::placeholder{
color: #afafae;
}
}
}
}
.label {
color: #676767;
font-size: 16px;
}
}
.checkbox {
margin: 0px;
margin-right: 20px;
.checkbox-icon{
width:23px;
height:23px;
border-radius: 50%;
.checkbox-inner {
left:7px;
top:3px;
}
}
}
}
h6{
color: #676767;
font-size: 20px;
}
textarea{
width:100%;
border-radius: 10px;
background: #ededec;
border:none;
resize: none;
margin-bottom: 15px;
}
span{
color: #6c6c6c;
font-size: 16px;
}
.help{
color: #d12d4c;
}
}
}
hr{
margin: 0px;
}
.main_btn{
height:50px;
border-radius:25px;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 5px;
}
.login_btn{
color: #ffffff;
background: #ee3380;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-signup4',
templateUrl: 'signup4.html',
})
export class Signup4Page {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Signup4Page');
}
back(){
this.navCtrl.pop();
}
next(){
this.navCtrl.push("OtpPage")
}
}
<ion-header class="nav_header theme_background">
<button ion-button class=" nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Subscribe</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="subscribe_wrapper">
<div class="subscribe_banner">
<h4>CLASSIC<span class="floatRight"><ion-icon name="md-create"></ion-icon>edit </span></h4>
<h6>3 months<span>Rs. 1200</span></h6>
<ion-checkbox class="floatLeft"></ion-checkbox>
<ion-label class="floatLeft">Activate Profile highlighter worth Rs. <span>299/-</span></ion-label>
<div class="clear"></div>
</div>
<div class="pay_div">
<h5>You have to pay <strong>Rs. 3600</strong></h5>
</div>
<div class="choose_payment">
<h4>Choose a Payment Method</h4>
<ul>
<li><span><img src="../assets/imgs/credit.png"></span>Credit Card</li>
<li><span><img src="../assets/imgs/debit.png"></span>Debit Card</li>
<li><span><img src="../assets/imgs/netbanking.png"></span>Net Banking</li>
</ul>
<br>
<br>
<p>Its secure to make payment wwith us</p>
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SubscribePage } from './subscribe';
@NgModule({
declarations: [
SubscribePage,
],
imports: [
IonicPageModule.forChild(SubscribePage),
],
})
export class SubscribePageModule {}
page-subscribe {
.subscribe_wrapper {
width: 100%;
.subscribe_banner {
background-color: #efeee5 !important;
padding: 30px;
padding-top: 50px;
background: url("../assets/imgs/badge.png");
background-position: left 30px top;
background-repeat: no-repeat;
background-size: 25px;
h4 {
margin: 0px;
padding: 0px;
color: #5c5c5c;
font-size: 16px;
padding-bottom: 5px;
span {
font-weight: 400;
font-size: 14px;
.icon {
margin-right: 5px;
}
}
}
h6 {
margin: 0px;
padding: 0px;
color: #525252;
font-weight: 400;
padding-bottom: 30px;
span {
margin-left: 10px;
color: #d12d4c;
}
}
.checkbox {
.checkbox-icon {
background: transparent;
width: 20px;
height: 20px;
border-radius: 3px;
}
.checkbox-checked {
background: #ee3380;
}
.checkbox-inner {
left: 5px;
top: 2px;
}
}
.label {
margin: 2px;
margin-left: 10px;
color: #5a5959;
font-weight: 400;
font-size: 15px;
span {
color: #d12d4c;
}
}
}
.pay_div {
padding: 25px;
border-bottom: 1px solid #e0e0e0;
h5 {
color: #5a5959;
margin: 0px;
padding: 0px;
font-weight: 400;
strong {
color: #494848;
margin-left: 15px;
font-size: 20px;
}
}
}
.choose_payment {
padding: 25px;
h4 {
margin: 0px;
padding: 0px;
color: #282828;
font-size: 24px;
font-weight: 400;
}
ul {
padding: 0px;
padding-top: 20px;
margin: 0px;
li {
background: url("../assets/imgs/arrow.png");
background-position: right;
background-repeat: no-repeat;
list-style: none;
color: #5a5959;
padding-top: 10px;
padding-bottom: 10px;
font-size: 18px;
background-size: 14px;
span {
margin-right: 20px;
img {
width: 24px;
position: relative;
top: 6px;
}
}
}
}
p {
padding: 0px;
margin: 0px;
font-size: 14px;
color: #737272;
}
}
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-subscribe',
templateUrl: 'subscribe.html',
})
export class SubscribePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SubscribePage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button ion-button class=" nav_inner_btn floatLeft" (click)="back()">
<ion-icon name="md-arrow-back"></ion-icon>
</button>
<div class="nav_header_inner_title floatLeft">Success Stories</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="success_stories_wrapper">
<div class="success_stories_banner">
<img src="../assets/imgs/img1.png">
</div>
<div class="success_stories_detail">
<h5>Jay & Soudarya</h5>
<h6>Marriage date: 23rd aug 2016</h6>
<p>Being a non-believer of arrange marriage, things turned around for me
after talking to 4th guys via jeevansathi website. Started with small
introduction our conversations hovered around travel stories, nature,
spiritual beliefs and life adventures and went on and on and on. For the
first time I felt
a spark and we both felt deeply for each other. In three months time
we decided to take the roller coaster ride of life together. Miracles do happen! :)</p>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SuccessdetailPage } from './successdetail';
@NgModule({
declarations: [
SuccessdetailPage,
],
imports: [
IonicPageModule.forChild(SuccessdetailPage),
],
})
export class SuccessdetailPageModule {}
page-successdetail {
.success_stories_wrapper{
.success_stories_banner{
width:100%;
height:300px;
position: relative;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
}
.success_stories_detail{
padding:10px;
h5{
color: #282828;
margin: 0px;
font-size: 25px;
padding-bottom:10px;
}
h6{
color: #6a6a6a;
font-weight:300;
font-size: 14px;
margin: 0px;
padding-bottom: 10px;
}
p{
color: #696969;
font-size: 14px;
font-weight:300;
text-align: justify;
line-height: 18px;
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-successdetail',
templateUrl: 'successdetail.html',
})
export class SuccessdetailPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SuccessdetailPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_background">
<button ion-button class="nav_inner_btn floatLeft nav_menu" menuToggle></button>
<div class="nav_header_inner_title floatLeft">Success Stories</div>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="success_wrapper">
<ul>
<li (click)="successdetail()">
<div class="success_circle"></div>
<div class="success_detail">
<h5>JAY & SAUDARYA</h5>
<p>Marriage date:23 Aug 2016</p>
<h6>Being a non-believer of arrange marriage, things turned around for me after talking to 4th guys via jeevansathi website. </h6>
<span>More</span>
</div>
<div class="clear"></div>
</li>
<li (click)="successdetail()">
<div class="success_circle"></div>
<div class="success_detail">
<h5>JAY & SAUDARYA</h5>
<p>Marriage date:23 Aug 2016</p>
<h6>Being a non-believer of arrange marriage, things turned around for me after talking to 4th guys via jeevansathi website. </h6>
<span>More</span>
</div>
<div class="clear"></div>
</li>
<li (click)="successdetail()">
<div class="success_circle"></div>
<div class="success_detail">
<h5>JAY & SAUDARYA</h5>
<p>Marriage date:23 Aug 2016</p>
<h6>Being a non-believer of arrange marriage, things turned around for me after talking to 4th guys via jeevansathi website. </h6>
<span>More</span>
</div>
<div class="clear"></div>
</li>
<li (click)="successdetail()">
<div class="success_circle"></div>
<div class="success_detail">
<h5>JAY & SAUDARYA</h5>
<p>Marriage date:23 Aug 2016</p>
<h6>Being a non-believer of arrange marriage, things turned around for me after talking to 4th guys via jeevansathi website. </h6>
<span>More</span>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SuccessstoriesPage } from './successstories';
@NgModule({
declarations: [
SuccessstoriesPage,
],
imports: [
IonicPageModule.forChild(SuccessstoriesPage),
],
})
export class SuccessstoriesPageModule {}
page-successstories {
.success_wrapper{
width:100%;
ul{
padding:0px;
margin:0px;
li{
width:100%;
list-style: none;
margin-bottom: 20px;
.success_circle{
width:125px;
height:125px;
border-radius:50%;
float: left;
background: url("../assets/imgs/avatar1.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
border-radius:50%;
}
}
.success_detail{
float: left;
width:calc(100% - 125px);
padding: 5px;
padding-left:20px;
h5{
margin:0px;
padding:0px;
color: #282828;
padding-bottom: 2px;
}
p{
margin:0px;
padding:0px;
color: #6a6a6a;
padding-bottom: 10px;
}
h6{
margin:0px;
padding:0px;
color: #6a6a6a;
font-size: 12px;
font-weight: 300;
padding-bottom: 15px;
}
span{
color: #ff9c00;
}
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-successstories',
templateUrl: 'successstories.html',
})
export class SuccessstoriesPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SuccessstoriesPage');
}
successdetail(){
this.navCtrl.push("SuccessdetailPage");
}
}
<!--
Generated template for the TabsPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>tabs</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';
@NgModule({
declarations: [
TabsPage,
],
imports: [
IonicPageModule.forChild(TabsPage),
],
})
export class TabsPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the TabsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TabsPage');
}
}
/**
* Check out https://googlechromelabs.github.io/sw-toolbox/ for
* more info on how to use sw-toolbox to custom configure your service worker.
*/
'use strict';
importScripts('./build/sw-toolbox.js');
self.toolbox.options.cache = {
name: 'ionic-cache'
};
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.fastest);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";
// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;
@import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: (
primary: #ee3380,
secondary: #58585a,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
@import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/
@import "ionic.ionicons";
// Fonts
// --------------------------------------------------
@import "roboto";
@import "noto-sans";
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"src/**/*.spec.ts",
"src/**/__tests__/*.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
{
"rules": {
"no-duplicate-variable": true,
"no-unused-variable": [
true
]
},
"rulesDirectory": [
"node_modules/tslint-eslint-rules/dist/rules"
]
}
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