page style

This commit is contained in:
CHIEFSOFT\ameye
2023-11-07 08:24:09 -05:00
parent 2d11cf081b
commit 4ceaed2eaf
4 changed files with 233 additions and 271 deletions
+46 -91
View File
@@ -1,99 +1,54 @@
<ion-content class="ion-padding">
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<!-- <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/jobinterest.jpg)'">-->
<!-- <ion-button (click)="moveToStartScan()">Scan Qr Code</ion-button>-->
<!-- <div class="ion-padding">-->
<!-- <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
<!-- </div>-->
<!-- </div>-->
<div class="boxed_contents">
<ion-grid>
<ion-row>
<ion-col>
</ion-col>
<ion-col>
<ion-button fill="outline" size="large" class="scan_login_button" (click)="moveToStartScan()">
<ion-icon slot="start" name="scan"></ion-icon>
Scan Login</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<div class="ion-padding space">
<div>
<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="UserCode" maxlength="12" [(ngModel)]='username'></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="pin-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 class="start-pages">
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div class="boxed_contents">
<ion-grid>
<ion-row>
<ion-col>
</ion-col>
<ion-col>
<ion-button fill="outline" size="large" class="scan_login_button" (click)="moveToStartScan()">
<ion-icon slot="start" name="scan"></ion-icon>
Scan Login</ion-button>
</ion-col>
</ion-row>
<ion-button expand="block" (click)="startLogin()">
Login
</ion-button>
</ion-grid>
<div class="ion-padding space">
<div>
<!-- <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>-->
<ion-label class="or">Or return to general accounts</ion-label>
<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="UserCode" maxlength="12" [(ngModel)]='username'></ion-input>
</ion-item>
</div>
<div class="bottom">
<ion-label class="last_lbl">Have an account? <span (click)="userLogin()">login</span></ion-label>
</div>
<ion-item lines="none">
<ion-icon slot="start" name="pin-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>
</div>
</div>
<!-- <ion-grid>-->
<!-- <ion-row>-->
<!-- <ion-col>-->
<!-- <ion-button expand="block" fill="outline" >Login</ion-button>-->
<!-- </ion-col>-->
<!-- <ion-col>-->
<!-- <ion-button expand="block" class="loginvb -type" (click)="familyLogin()">-->
<!-- <ion-icon slot="start" name="star"></ion-icon>-->
<!-- Family</ion-button>-->
<!-- </ion-col>-->
<!-- </ion-row>-->
<!-- </ion-grid>-->
<!-- <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-twitter"></ion-icon>-->
<!-- </ion-button>-->
<!-- </ion-buttons>-->
<!-- </div>-->
</ion-content>
+81 -83
View File
@@ -1,102 +1,100 @@
<ion-content class="ion-padding">
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div class="start-pages">
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div class="ion-padding space">
<div>
<div class="ion-padding space">
<div>
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
<div class="boxed_contents">
<ion-grid>
<ion-row>
<ion-col size="6">
<ion-button fill="outline" size="large" class="scan_login_button" (click)="moveToStartScan()">
<ion-icon slot="start" name="scan"></ion-icon>
Scan Login</ion-button>
</ion-col>
<ion-col size="6">
<ion-button class="login-type22" (click)="familyLogin()">
<ion-icon name="people-circle-outline"></ion-icon>
Family Login</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<div class="boxed_contents">
<ion-grid>
<ion-row>
<ion-col size="6">
<ion-button fill="outline" size="large" class="scan_login_button" (click)="moveToStartScan()">
<ion-icon slot="start" name="scan"></ion-icon>
Scan Login</ion-button>
</ion-col>
<ion-col size="6">
<ion-button class="login-type22" (click)="familyLogin()">
<ion-icon name="people-circle-outline"></ion-icon>
Family Login</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<!-- <ion-grid>-->
<!-- <ion-row>-->
<!-- <ion-col>-->
<!-- <ion-button fill="outline" size="large" (click)="moveToStartScan()">-->
<!-- <ion-icon slot="start" name="scan"></ion-icon>-->
<!-- Scan 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 Login</ion-button>-->
<!-- </ion-col>-->
<!-- <ion-grid>-->
<!-- <ion-row>-->
<!-- <ion-col>-->
<!-- <ion-button fill="outline" size="large" (click)="moveToStartScan()">-->
<!-- <ion-icon slot="start" name="scan"></ion-icon>-->
<!-- Scan 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 Login</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 (ionChange)="refreshBut()" 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 (ionChange)="refreshBut()" 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 (ionChange)="refreshBut()" 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 (ionChange)="refreshBut()" 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>
<div class="check">
<ion-checkbox mode="md" checked></ion-checkbox>
<ion-label>Remember me</ion-label>
</div>
<ion-button shape="round" expand="block"
(click)="startLogin()"
[disabled]="isDisabled"
>
Login
</ion-button>
<!-- <ion-button shape="round">Round</ion-button>-->
<ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>
<ion-button shape="round" expand="block"
(click)="startLogin()"
[disabled]="isDisabled"
>
Login
</ion-button>
<!-- <ion-button shape="round">Round</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 (click) ="onLoginFacebook()">
<ion-icon name="logo-facebook"></ion-icon>
</ion-button>
</ion-buttons>
<div *ngIf="showSocial == true ">
<ion-label class="or">Or Continue With</ion-label>
<div class="button">
<ion-buttons>
<ion-button (click) ="onLoginFacebook()">
<ion-icon name="logo-facebook"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons>
<ion-button (click) ="onLoginGoogle()" >
<ion-icon name="logo-google"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons>
<ion-button (click) ="onLoginGoogle()" >
<ion-icon name="logo-google"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons *ngIf="ios">
<ion-button (click) ="onLoginApple()" >
<ion-icon name="logo-apple"></ion-icon>
</ion-button>
</ion-buttons>
</div>
</div>
<ion-buttons *ngIf="ios">
<ion-button (click) ="onLoginApple()" >
<ion-icon name="logo-apple"></ion-icon>
</ion-button>
</ion-buttons>
</div>
<div class="bottom">
<ion-label class="last_lbl">Don't have an account? <span (click)="onRegister()">Register</span></ion-label>
</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>
</ion-content>
+99 -97
View File
@@ -1,120 +1,122 @@
<ion-content class="ion-padding">
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div class="boxed_contents">
<div class="ion-padding space">
<div *ngIf="signup_state==1; then startBlock"></div>
<div *ngIf="signup_state==2; then secondBlock"></div>
<ng-template #startBlock>
<div>
<div class="start-pages">
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div class="boxed_contents">
<div class="ion-padding space">
<div *ngIf="signup_state==1; then startBlock"></div>
<div *ngIf="signup_state==2; then secondBlock"></div>
<ng-template #startBlock>
<div>
<ion-label class="simp_lbl">Create Your Account</ion-label>
<ion-item lines="none">
<ion-select label="Default label" placeholder="Select Country" [(ngModel)]='country'>
<ion-select-option value="NG">Nigeria</ion-select-option>
<ion-select-option value="US">United States</ion-select-option>
</ion-select>
<!-- <ion-label>Nigeria</ion-label>-->
<!-- <ion-icon name="caret-down-outline"></ion-icon>-->
</ion-item>
<ion-label class="simp_lbl">Create Your Account</ion-label>
<ion-item lines="none">
<ion-select label="Default label" placeholder="Select Country" [(ngModel)]='country'>
<ion-select-option value="NG">Nigeria</ion-select-option>
<ion-select-option value="US">United States</ion-select-option>
</ion-select>
<!-- <ion-label>Nigeria</ion-label>-->
<!-- <ion-icon name="caret-down-outline"></ion-icon>-->
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="person-outline"></ion-icon>
<ion-input type="firstname" placeholder="Firstname" [(ngModel)]='firstname'></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="person-outline"></ion-icon>
<ion-input type="firstname" placeholder="Firstname" [(ngModel)]='firstname'></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="person-outline"></ion-icon>
<ion-input type="lastname" placeholder="Lastname" [(ngModel)]='lastname'></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="person-outline"></ion-icon>
<ion-input type="lastname" placeholder="Lastname" [(ngModel)]='lastname'></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="mail-outline"></ion-icon>
<ion-input type="username" placeholder="Email (your username)" [(ngModel)]='username'></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="mail-outline"></ion-icon>
<ion-input type="username" placeholder="Email (your username)" [(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>
<!-- <ion-item lines="none">-->
<!-- <ion-icon slot="start" name="lock-closed-outline"></ion-icon>-->
<!-- <ion-input type="password" placeholder="Confirm Password"></ion-input>-->
<!-- </ion-item>-->
<!-- <ion-item lines="none">-->
<!-- <ion-icon slot="start" name="lock-closed-outline"></ion-icon>-->
<!-- <ion-input type="password" placeholder="Confirm Password"></ion-input>-->
<!-- </ion-item>-->
<ion-button expand="block" (click)="onFillProfile()">
Register
</ion-button>
<ion-button expand="block" (click)="onFillProfile()">
Register
</ion-button>
<div *ngIf="showSocial == true ">
<div *ngIf="showSocial == true ">
<ion-label class="or">Or Continue With</ion-label>
<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>
<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-google"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons>
<ion-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons>
<ion-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-button>
</ion-buttons>
</div>
</div>
</div>
</ng-template>
<ng-template #secondBlock>
<div>
<ion-label class="simp_lbl">Complete Account</ion-label>
<ion-grid>
<ion-row>
<ion-col size-md="3">Country</ion-col>
<ion-col size-md="9">{{signup_country}}</ion-col>
</ion-row>
<ion-row>
<ion-col size-md="3">Username</ion-col>
<ion-col size-md="9">{{signup_username}}</ion-col>
</ion-row>
</ion-grid>
<ion-label class="or">Enter Confirmation Received In Email</ion-label>
<ion-item lines="none">
<ion-icon slot="start" name="mail-outline"></ion-icon>
<ion-input type="username" placeholder="Random text" [(ngModel)]='random_text'></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-button expand="block" (click)="onCompleteProfile()">
Complete signup
</ion-button>
</div>
</ng-template>
<div class="bottom">
<ion-label class="last_lbl">Already have an account? <span (click)="onLogin()">Login</span></ion-label>
</div>
</ng-template>
<ng-template #secondBlock>
<div>
<ion-label class="simp_lbl">Complete Account</ion-label>
<ion-grid>
<ion-row>
<ion-col size-md="3">Country</ion-col>
<ion-col size-md="9">{{signup_country}}</ion-col>
</ion-row>
<ion-row>
<ion-col size-md="3">Username</ion-col>
<ion-col size-md="9">{{signup_username}}</ion-col>
</ion-row>
</ion-grid>
<ion-label class="or">Enter Confirmation Received In Email</ion-label>
<ion-item lines="none">
<ion-icon slot="start" name="mail-outline"></ion-icon>
<ion-input type="username" placeholder="Random text" [(ngModel)]='random_text'></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-button expand="block" (click)="onCompleteProfile()">
Complete signup
</ion-button>
</div>
</ng-template>
<div class="bottom">
<ion-label class="last_lbl">Already have an account? <span (click)="onLogin()">Login</span></ion-label>
</div>
</div>
</div>
+7
View File
@@ -229,6 +229,13 @@ body.scanner-active {
}
ion-content{
margin-top: 0px !important;
.start-pages{
// background-color: #3dc2ff;
background-image: linear-gradient(white, aliceblue);
margin-top: 0px;
height: 100%;
width: 100%;
}
}
.scan_login_button{
font-size: 16px;