horse-betting/btc-ui-app-2/src/app/login/login.html

89 lines
2.6 KiB
HTML

<!-- Top Bar -->
<div class="top-bar">
<span>TOTE BETTING CONSOLE v7.9.1</span>
</div>
<!-- Main Login Container -->
<div class="login-container">
<!-- Left Image -->
<div class="login-left">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXNtvgCYhMqpZef92nycXTb2pKqA2MoGLOAw&s"
alt="Horse Racing"
class="bg-image"
/>
</div>
<!-- Right Panel -->
<div class="login-right">
<div class="logo">BTC <span>BANGALORE TURF CLUB LTD</span></div>
<!-- Email Error Message -->
<div
class="error-message"
*ngIf="loginForm.get('email')?.touched && loginForm.get('email')?.invalid"
>
<small *ngIf="loginForm.get('email')?.errors?.['required']">Email is required.</small>
<small *ngIf="loginForm.get('email')?.errors?.['email']">Invalid email format.</small>
</div>
<!-- Email Input -->
<input
type="text"
placeholder="Enter Your Username"
class="input-box"
formControlName="email"
(focus)="setFocus('email')"
#emailInput
/>
<!-- Password Error Message -->
<div
class="error-message"
*ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid"
>
<small *ngIf="loginForm.get('password')?.errors?.['required']">Password is required.</small>
</div>
<!-- Password Input -->
<input
type="password"
placeholder="Enter Your Password"
class="input-box"
formControlName="password"
(focus)="setFocus('password')"
#passwordInput
/>
<!-- Login Button -->
<button class="login-btn" (click)="onSubmit()">LOGIN</button>
<!-- Numeric Keypad -->
<div class="numpad">
<div class="row">
<button (click)="onNumpadClick('0')">0</button>
<button class="back-btn" (click)="onBackspace()">BACK</button>
</div>
<div class="row">
<button (click)="onNumpadClick('7')">7</button>
<button (click)="onNumpadClick('8')">8</button>
<button (click)="onNumpadClick('9')">9</button>
</div>
<div class="row">
<button (click)="onNumpadClick('4')">4</button>
<button (click)="onNumpadClick('5')">5</button>
<button (click)="onNumpadClick('6')">6</button>
</div>
<div class="row">
<button (click)="onNumpadClick('1')">1</button>
<button (click)="onNumpadClick('2')">2</button>
<button (click)="onNumpadClick('3')">3</button>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="bottom-bar">
<span>Powered by <strong>Cezen Tech</strong></span>
</div>