From 26d07c55782544c8d1590d64008095d9f9fd3309 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Sun, 25 May 2025 13:30:36 -0400
Subject: [PATCH] fix html layout

---
 src/app/pages/login/login.page.html       | 366 ++++++++++++----------
 src/app/pages/register/register.page.html | 263 +++++++++-------
 2 files changed, 347 insertions(+), 282 deletions(-)

diff --git a/src/app/pages/login/login.page.html b/src/app/pages/login/login.page.html
index e57710f..81d2091 100644
--- a/src/app/pages/login/login.page.html
+++ b/src/app/pages/login/login.page.html
@@ -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>
diff --git a/src/app/pages/register/register.page.html b/src/app/pages/register/register.page.html
index ac08f14..3733c06 100644
--- a/src/app/pages/register/register.page.html
+++ b/src/app/pages/register/register.page.html
@@ -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>