Box login section
This commit is contained in:
CHIEFSOFT\ameye
@@ -7,7 +7,38 @@
|
||||
<div class="ion-padding space">
|
||||
<div>
|
||||
|
||||
<ion-label class="simp_lbl">Family Login</ion-label>
|
||||
<div class="boxed_contents">
|
||||
<ion-label class="simp_lbl">Family Login</ion-label>
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input type="email" placeholder="Username" maxlength="8" [(ngModel)]='username'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
||||
<ion-input type="password" placeholder="PIN" maxlength="4" [(ngModel)]='pin'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<div class="check">
|
||||
<ion-checkbox mode="md" checked></ion-checkbox>
|
||||
<ion-label>Remember me</ion-label>
|
||||
</div>
|
||||
|
||||
<ion-button expand="block" (click)="startLogin()">
|
||||
Login
|
||||
</ion-button>
|
||||
|
||||
<!-- <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>-->
|
||||
|
||||
<ion-label class="or">Or return to general accounts</ion-label>
|
||||
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<ion-label class="last_lbl">Have an account? <span (click)="userLogin()">login</span></ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <ion-grid>-->
|
||||
<!-- <ion-row>-->
|
||||
@@ -23,28 +54,7 @@
|
||||
<!-- </ion-row>-->
|
||||
<!-- </ion-grid>-->
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input type="email" placeholder="Username" maxlength="8" [(ngModel)]='username'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
||||
<ion-input type="password" placeholder="PIN" maxlength="4" [(ngModel)]='pin'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<div class="check">
|
||||
<ion-checkbox mode="md" checked></ion-checkbox>
|
||||
<ion-label>Remember me</ion-label>
|
||||
</div>
|
||||
|
||||
<ion-button expand="block" (click)="startLogin()">
|
||||
Login
|
||||
</ion-button>
|
||||
|
||||
<!-- <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>-->
|
||||
|
||||
<ion-label class="or">Or return to general accounts</ion-label>
|
||||
|
||||
<!-- <div class="button">-->
|
||||
<!-- <ion-buttons>-->
|
||||
@@ -65,9 +75,5 @@
|
||||
<!-- </ion-button>-->
|
||||
<!-- </ion-buttons>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<ion-label class="last_lbl">Have an account? <span (click)="userLogin()">login</span></ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -22,11 +22,59 @@
|
||||
<ion-icon slot="start" name="search"></ion-icon>
|
||||
<ion-label>Search</ion-label>
|
||||
</div> -->
|
||||
<div class="boxed_contents">
|
||||
|
||||
<div class="offer">
|
||||
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/offer.jpg)'"></div>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let item of bannerData; let i = index" class="bg_white {{item.short_style}} " (click)="onDetails(item)">
|
||||
<div class="list">
|
||||
<div *ngIf="item.banner_location === 'URL' ">
|
||||
<!-- code to render a large video block-->
|
||||
<div class="bg_image back_image banner_image" [style.backgroundImage]="'url('+item.banner+')'"></div>
|
||||
</div>
|
||||
<div *ngIf="item.banner_location === 'LOCAL' ">
|
||||
<div class="bg_image back_image banner_image" [style.backgroundImage]="'url(assets/images/'+item.banner+')'"></div>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<ion-label class="name">{{item.short_title}}</ion-label>
|
||||
<ion-label class="bg_text">{{item.short_description}}</ion-label>
|
||||
|
||||
|
||||
<!-- <ion-label class="price">$48.00 </ion-label>-->
|
||||
|
||||
<div class="row">
|
||||
<!-- <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
|
||||
<!-- <ion-label class="small">4.9</ion-label>-->
|
||||
<!-- <ion-label class="small">|</ion-label>-->
|
||||
<!-- <ion-label class="small">8266 Students</ion-label>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<ion-label class="bold_text">Recommended Blog</ion-label>
|
||||
<ion-label class="color_text">See all</ion-label>
|
||||
</div>
|
||||
<div class="bg_white bg_alice" *ngFor="let item of blogData; let i = index" (click)="blogDetails(item)">
|
||||
<div class="blog_list">
|
||||
<div class="bg_image back_image banner_image" [style.backgroundImage]="'url(https://blog.wrenchboard.com/wp-content/uploads/'+item.meta_value+')'"></div>
|
||||
<div class="detail">
|
||||
<ion-label class="name">{{item.post_title}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex">
|
||||
<ion-label class="bold_text">Top Mentors</ion-label>
|
||||
<ion-label class="color_text" (click)="onTopMentors()">See all</ion-label>
|
||||
@@ -60,46 +108,8 @@
|
||||
|
||||
<!-- <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>-->
|
||||
|
||||
<div *ngFor="let item of bannerData; let i = index" class="bg_white {{item.short_style}} " (click)="onDetails(item)">
|
||||
<div class="list">
|
||||
<div *ngIf="item.banner_location === 'URL' ">
|
||||
<!-- code to render a large video block-->
|
||||
<div class="bg_image back_image banner_image" [style.backgroundImage]="'url('+item.banner+')'"></div>
|
||||
</div>
|
||||
<div *ngIf="item.banner_location === 'LOCAL' ">
|
||||
<div class="bg_image back_image banner_image" [style.backgroundImage]="'url(assets/images/'+item.banner+')'"></div>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<ion-label class="name">{{item.short_title}}</ion-label>
|
||||
<ion-label class="bg_text">{{item.short_description}}</ion-label>
|
||||
|
||||
|
||||
<!-- <ion-label class="price">$48.00 </ion-label>-->
|
||||
|
||||
<div class="row">
|
||||
<!-- <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
|
||||
<!-- <ion-label class="small">4.9</ion-label>-->
|
||||
<!-- <ion-label class="small">|</ion-label>-->
|
||||
<!-- <ion-label class="small">8266 Students</ion-label>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<ion-label class="bold_text">Recommended Blog</ion-label>
|
||||
<ion-label class="color_text">See all</ion-label>
|
||||
</div>
|
||||
<div class="bg_white bg_alice" *ngFor="let item of blogData; let i = index" (click)="blogDetails(item)">
|
||||
<div class="blog_list">
|
||||
<div class="bg_image back_image banner_image" [style.backgroundImage]="'url(https://blog.wrenchboard.com/wp-content/uploads/'+item.meta_value+')'"></div>
|
||||
<div class="detail">
|
||||
<ion-label class="name">{{item.post_title}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -8,70 +8,75 @@
|
||||
|
||||
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<!-- <ion-button expand="block" fill="outline" >Login</ion-button>-->
|
||||
</ion-col>
|
||||
<ion-col class="family_box">
|
||||
<ion-button expand="block" class="login-type" (click)="familyLogin()">
|
||||
<ion-icon name="people-circle-outline"></ion-icon>
|
||||
Go to Family Account</ion-button>
|
||||
</ion-col>
|
||||
<div class="boxed_contents">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<!-- <ion-button expand="block" fill="outline" >Login</ion-button>-->
|
||||
</ion-col>
|
||||
<ion-col class="family_box">
|
||||
<ion-button expand="block" class="login-type" (click)="familyLogin()">
|
||||
<ion-icon name="people-circle-outline"></ion-icon>
|
||||
Go to Family Account</ion-button>
|
||||
</ion-col>
|
||||
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<ion-label class="simp_lbl_tx">Login to continue</ion-label>
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input type="email" placeholder="Email" [(ngModel)]='username'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-label class="simp_lbl_tx">Login to continue</ion-label>
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input type="email" placeholder="Email" [(ngModel)]='username'></ion-input>
|
||||
</ion-item>
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
||||
<ion-input type="password" placeholder="Password" [(ngModel)]='password'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
||||
<ion-input type="password" placeholder="Password" [(ngModel)]='password'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<div class="check">
|
||||
<ion-checkbox mode="md" checked></ion-checkbox>
|
||||
<ion-label>Remember me</ion-label>
|
||||
</div>
|
||||
|
||||
<ion-button expand="block" (click)="startLogin()">
|
||||
Login
|
||||
</ion-button>
|
||||
|
||||
<ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>
|
||||
|
||||
<div *ngIf="showSocial == true ">
|
||||
<ion-label class="or">Or Continue With</ion-label>
|
||||
<div class="button">
|
||||
<ion-buttons>
|
||||
<ion-button>
|
||||
<ion-icon name="logo-facebook"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-buttons>
|
||||
<ion-button>
|
||||
<ion-icon name="logo-google"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-buttons>
|
||||
<ion-button>
|
||||
<ion-icon name="logo-apple"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<div class="check">
|
||||
<ion-checkbox mode="md" checked></ion-checkbox>
|
||||
<ion-label>Remember me</ion-label>
|
||||
</div>
|
||||
|
||||
<ion-button expand="block" (click)="startLogin()">
|
||||
Login
|
||||
</ion-button>
|
||||
|
||||
<ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>
|
||||
|
||||
<div *ngIf="showSocial == true ">
|
||||
<ion-label class="or">Or Continue With</ion-label>
|
||||
<div class="button">
|
||||
<ion-buttons>
|
||||
<ion-button>
|
||||
<ion-icon name="logo-facebook"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-buttons>
|
||||
<ion-button>
|
||||
<ion-icon name="logo-google"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-buttons>
|
||||
<ion-button>
|
||||
<ion-icon name="logo-apple"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<ion-label class="last_lbl">Don't have an account? <span (click)="onRegister()">Register</span></ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<ion-label class="last_lbl">Don't have an account? <span (click)="onRegister()">Register</span></ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ion-tabs>
|
||||
<ion-tabs class="bottom_bar_tabs">
|
||||
<div class="bottom_bardiv">
|
||||
<ion-tab-bar slot="bottom" class="bottom_bar">
|
||||
<ion-tab-button tab="tab1">
|
||||
|
||||
@@ -4,12 +4,19 @@
|
||||
}
|
||||
.bottom_bardiv{
|
||||
// background-color: red;
|
||||
position:relative;
|
||||
//position:relative;
|
||||
align-content: center;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
}
|
||||
|
||||
.bottom_bar{
|
||||
position: relative;
|
||||
//background-color: red;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.bottom_bar_tabs{
|
||||
background-color: lightgray;
|
||||
}
|
||||
@@ -91,3 +91,10 @@ ion-modal.custom_modal_bottom {
|
||||
--height: 300px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.boxed_contents{
|
||||
//background-color: red;
|
||||
max-width: 550px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user