fix html layout

This commit is contained in:
CHIEFSOFT\ameye
2025-05-25 13:30:36 -04:00
parent 2e24697d3b
commit 26d07c5578
2 changed files with 347 additions and 282 deletions
+196 -170
View File
@@ -1,172 +1,198 @@
<ion-content class="no-scroll" style="padding: 0;">
<div class="start-pages" >
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div *ngIf="loginType==='normal';" >
<div class="ion-padding space">
<div>
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
<div class="boxed_contents">
<div style="max-width: 450px; margin-left: auto; margin-right: auto;">
<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>
<span style="margin-left: 5px;">Kids Login</span></ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-label class="simp_lbl">Login</ion-label>
<div class="login_box">
<ion-item lines="none">
<ion-icon slot="start" name="mail-outline"></ion-icon>
<ion-input
class ="login_entry"
(ionChange)="refreshBut()" type="email"
placeholder="Email"
maxlength="35"
[(ngModel)]='username'></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
<ion-input
class ="login_entry"
(ionChange)="refreshBut()"
type="password"
placeholder="Password"
maxlength="15"
[(ngModel)]='password'></ion-input>
</ion-item>
<div class="check" style="padding-left: 35px;">
<ion-checkbox mode="md" checked></ion-checkbox>
<ion-label>Remember me</ion-label>
</div>
<div style="margin-left: 55px;">
<ion-button
size="small"
shape="round"
expand="block"
(click)="startLogin()"
[disabled]="isDisabled"
>
Login
</ion-button>
</div>
</div>
<!-- <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>
<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>
</div>
<div class="bottom">
<ion-label class="last_lbl">Don't have an account? <span (click)="onRegister()">Sign up</span></ion-label>
</div>
</div>
</div>
</div>
<div *ngIf="loginType==='pending';" >
<div class="ion-padding space">
<div>
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
<div class="boxed_contents">
<ion-label class="simp_lbl_tx">Complete your signup</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="pin-outline"></ion-icon>
<ion-input type="text" (ionChange)="signupVerify()" placeholder="Random text" maxlength="8" [(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" (ionChange)="signupVerify()" placeholder="Password" maxlength="15" [(ngModel)]='signup_password'></ion-input>
</ion-item>
<!-- <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-button shape="round" expand="block" color="danger"
(click)="onCompleteProfile()"
[disabled]="isPendingDisabled"
>
Complete Signup
</ion-button>
</div>
<div class="bottom pending-buttom">
<ion-label class="last_lbl">Have an account? <span (click)="onReturnToLogin()">Login</span></ion-label>
</div>
</div>
</div>
</div>
<ion-content class="no-scroll" style="padding: 0">
<div class="start-pages">
<div class="page_logo">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div *ngIf="loginType==='normal';">
<div class="ion-padding space">
<div>
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
<div class="boxed_contents">
<div
style="max-width: 450px; margin-left: auto; margin-right: auto"
>
<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>
<span style="margin-left: 5px"
>Kids Login</span
></ion-button
>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div class="login_box">
<ion-label
style="padding-top: 2px; padding-bottom: 10px"
class="simp_lbl"
>Welcome back</ion-label
>
<ion-item lines="none">
<ion-icon slot="start" name="person-outline"></ion-icon>
<ion-input
class="login_entry"
(ionChange)="refreshBut()"
type="email"
placeholder="Email"
maxlength="35"
[(ngModel)]="username"
></ion-input>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
<ion-input
class="login_entry"
(ionChange)="refreshBut()"
type="password"
placeholder="Password"
maxlength="15"
[(ngModel)]="password"
></ion-input>
</ion-item>
<div class="check" style="padding-left: 35px">
<ion-checkbox mode="md" checked></ion-checkbox>
<ion-label>Remember me</ion-label>
</div>
<div style="margin-left: 55px">
<ion-button
size="small"
shape="round"
expand="block"
(click)="startLogin()"
[disabled]="isDisabled"
>
Login
</ion-button>
</div>
</div>
<!-- <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>
<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>
</div>
<div class="bottom">
<ion-label class="last_lbl"
>Don't have an account?
<span (click)="onRegister()">Sign up</span></ion-label
>
</div>
</div>
</div>
</div>
<div *ngIf="loginType==='pending';">
<div class="ion-padding space">
<div>
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
<div class="boxed_contents">
<ion-label class="simp_lbl_tx">Complete your signup</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="pin-outline"></ion-icon>
<ion-input
type="text"
(ionChange)="signupVerify()"
placeholder="Random text"
maxlength="8"
[(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"
(ionChange)="signupVerify()"
placeholder="Password"
maxlength="15"
[(ngModel)]="signup_password"
></ion-input>
</ion-item>
<!-- <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-button
shape="round"
expand="block"
color="danger"
(click)="onCompleteProfile()"
[disabled]="isPendingDisabled"
>
Complete Signup
</ion-button>
</div>
<div class="bottom pending-buttom">
<ion-label class="last_lbl"
>Have an account?
<span (click)="onReturnToLogin()">Login</span></ion-label
>
</div>
</div>
</div>
</div>
</div>
</ion-content>
+151 -112
View File
@@ -1,6 +1,6 @@
<ion-content class="no-scroll" style="padding: 0;">
<div class="start-pages">
<div class="page_logo" style="padding-top: 15px;">
<ion-content class="no-scroll" style="padding: 0">
<div class="start-pages">
<div class="page_logo" style="padding-top: 15px">
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
</div>
<div class="boxed_contents">
@@ -9,72 +9,94 @@
<div *ngIf="signup_state==2; then secondBlock"></div>
<ng-template #startBlock>
<div>
<!-- <div class="login_box"></div>-->
<div style="display: flex; width: 100%; ">
<div class="simp_lbl" style="width: 40%;">Get Started.</div>
<div style="width: 20%;"> </div>
<div class="simp_lbl" style="text-align: right; width: 40%; margin-left: auto;">
<!-- <div style="background-color: aliceblue; color: darkblue; font-weight: normal; width: 85px; border-radius: 10px; text-align: center" (click)="onLogin()">or Login</div>-->
</div>
</div>
<div class="login_box" >
<ion-item lines="none" style="margin-bottom: 10px;">
<ion-icon slot="start" name="flag-outline"></ion-icon>
<div class="login_box">
<ion-label
style="padding-top: 2px; padding-bottom: 10px"
class="simp_lbl"
>Get Started</ion-label
>
<ion-item lines="none" style="margin-bottom: 10px">
<ion-icon slot="start" name="flag-outline"></ion-icon>
<ion-select
style="width: 100%; padding-left: 10px;"
class ="login_entry" (ionChange)="verReg()" label="Select Country" placeholder="Select Country" [(ngModel)]='country'>
<ion-select-option *ngFor="let item of signupCountry" value="{{item.code}}">{{item.country}}</ion-select-option>
style="width: 100%; padding-left: 10px"
class="login_entry"
(ionChange)="verReg()"
label="Select Country"
placeholder="Select Country"
[(ngModel)]="country"
>
<ion-select-option
*ngFor="let item of signupCountry"
value="{{item.code}}"
>{{item.country}}</ion-select-option
>
</ion-select>
</ion-item>
<ion-item lines="none" style="margin-bottom: 10px;">
<ion-item lines="none" style="margin-bottom: 10px">
<ion-icon slot="start" name="person-outline"></ion-icon>
<ion-input
class ="login_entry"
maxlength="25"
(ionChange)="verReg()"
type="firstname" placeholder="Firstname"
[(ngModel)]='firstname'></ion-input>
class="login_entry"
maxlength="25"
(ionChange)="verReg()"
type="firstname"
placeholder="Firstname"
[(ngModel)]="firstname"
></ion-input>
</ion-item>
<ion-item lines="none" style="margin-bottom: 10px;">
<ion-item lines="none" style="margin-bottom: 10px">
<ion-icon slot="start" name="person-outline"></ion-icon>
<ion-input
class ="login_entry"
maxlength="25"
(ionChange)="verReg()"
type="lastname"
placeholder="Lastname"
[(ngModel)]='lastname'></ion-input>
class="login_entry"
maxlength="25"
(ionChange)="verReg()"
type="lastname"
placeholder="Lastname"
[(ngModel)]="lastname"
></ion-input>
</ion-item>
<ion-item lines="none" style="margin-bottom: 10px;">
<ion-item lines="none" style="margin-bottom: 10px">
<ion-icon slot="start" name="mail-outline"></ion-icon>
<ion-input class ="login_entry" (ionChange)="verReg()" type="username" maxlength="35" placeholder="Email (Your Username)" [(ngModel)]='username'></ion-input>
<ion-input
class="login_entry"
(ionChange)="verReg()"
type="username"
maxlength="35"
placeholder="Email (Your Username)"
[(ngModel)]="username"
></ion-input>
</ion-item>
<ion-item lines="none" style="margin-bottom: 0px;">
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
<ion-input class ="login_entry" (ionChange)="verReg()" type="password" placeholder="Password (8 chars. minimum)" maxlength="15" [(ngModel)]='password'></ion-input>
</ion-item>
<ion-item lines="none" style="margin-bottom: 10px; padding-left: 50px;">
<div>.</div>
</ion-item>
<ion-item lines="none" style="margin-bottom: 0px">
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
<ion-input
class="login_entry"
(ionChange)="verReg()"
type="password"
placeholder="Password (8 chars. minimum)"
maxlength="15"
[(ngModel)]="password"
></ion-input>
</ion-item>
<ion-item
lines="none"
style="margin-bottom: 10px; padding-left: 50px"
>
<div>.</div>
</ion-item>
<ion-button expand="block" [disabled]="isDisabled" (click)="onFillProfile()">
<ion-button
expand="block"
[disabled]="isDisabled"
(click)="onFillProfile()"
>
Register
</ion-button>
</div>
<div *ngIf="showSocial == true ">
<ion-label class="or">Or Continue With</ion-label>
<div class="button">
@@ -97,82 +119,99 @@
</ion-buttons>
</div>
</div>
</div>
</ng-template>
<ng-template #secondBlock>
<div>
<ion-label class="simp_lbl">Complete Account</ion-label>
<div class="login_box" >
<ion-grid style="margin-top: 15px;">
<ion-row>
<ion-col size="3" class="side_lb">Country</ion-col>
<ion-col size="9">{{signup_country}}</ion-col>
</ion-row>
<ion-row>
<ion-col size="3" class="side_lb">Username</ion-col>
<ion-col size="9">{{signup_username}}</ion-col>
</ion-row>
<div class="login_box">
<ion-grid style="margin-top: 15px">
<ion-row>
<ion-col size="3" class="side_lb">Country</ion-col>
<ion-col size="9">{{signup_country}}</ion-col>
</ion-row>
<ion-row>
<ion-col size="3" class="side_lb">Username</ion-col>
<ion-col size="9">{{signup_username}}</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label class="or" style="width: 100%;
background-color: #f5eff4;
color: red; font-weight: bolder; height: 45px; margin: 5px; padding: 10px; border-radius: 10px;">Enter Confirmation Received In Email</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label
class="or"
style="
width: 100%;
background-color: #f5eff4;
color: red;
font-weight: bolder;
height: 45px;
margin: 5px;
padding: 10px;
border-radius: 10px;
"
>Enter Confirmation Received In Email</ion-label
>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="4" class="side_lb">
Verification Code :
</ion-col>
<ion-col size="8">
<!-- <ion-icon slot="start" name="mail-outline"></ion-icon>-->
<ion-input
type="text"
autocomplete="false"
class="login_entry"
(ionChange)="verReg2()"
placeholder="Random text"
maxlength="8"
[(ngModel)]="random_text"
></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="4" class="side_lb">Password</ion-col>
<ion-col size="8">
<ion-icon
slot="start"
name="lock-closed-outline"
></ion-icon>
<ion-input
type="password"
class="login_entry"
(ionChange)="verReg2()"
placeholder="Password"
maxlength="15"
[(ngModel)]="password"
></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="4" class="side_lb">
Verification Code :
</ion-col>
<ion-col size="8">
<!-- <ion-icon slot="start" name="mail-outline"></ion-icon>-->
<ion-input type="text"
autocomplete="false"
class ="login_entry"
(ionChange)="verReg2()"
placeholder="Random text"
maxlength="8" [(ngModel)]='random_text'></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="4" class="side_lb">Password</ion-col>
<ion-col size="8">
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
<ion-input
type="password"
class ="login_entry"
(ionChange)="verReg2()"
placeholder="Password"
maxlength="15" [(ngModel)]='password'></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="4"></ion-col>
<ion-col size="8" style="text-align: right;">
<ion-button
expand="block"
[disabled]="isDisabled2"
(click)="onCompleteProfile()">
Complete Signup
</ion-button>
</ion-col>
<!-- <ion-col size="2"></ion-col>-->
</ion-row>
</ion-grid>
</div>
<ion-row>
<ion-col size="4"></ion-col>
<ion-col size="8" style="text-align: right">
<ion-button
expand="block"
[disabled]="isDisabled2"
(click)="onCompleteProfile()"
>
Complete Signup
</ion-button>
</ion-col>
<!-- <ion-col size="2"></ion-col>-->
</ion-row>
</ion-grid>
</div>
</div>
</ng-template>
<div class="bottom">
<ion-label class="last_lbl">Already have an account? <span (click)="onLogin()">Login</span></ion-label>
<ion-label class="last_lbl"
>Already have an account?
<span (click)="onLogin()">Login</span></ion-label
>
</div>
</div>
</div>