From 1047757e9f89467c9005582d4a446bdd40949516 Mon Sep 17 00:00:00 2001 From: 22nibis Date: Thu, 26 Jun 2025 14:13:03 +0530 Subject: [PATCH] style:"ui fixed v2" --- angular.json | 6 +- package.json | 2 +- src/app/app.routes.ts | 1 + .../middle-section.component.css | 45 +++- .../middle-section.component.html | 17 +- .../components/navbar/navbar.component.css | 22 +- .../components/navbar/navbar.component.html | 4 +- src/app/components/navbar/navbar.component.ts | 14 ++ .../components/sidebar/sidebar.component.css | 9 +- .../components/sidebar/sidebar.component.html | 21 +- .../components/sidebar/sidebar.component.ts | 48 ++-- .../touch-pad-menu.component.css | 211 ++++++++++++++---- .../touch-pad-menu.component.html | 77 +++---- .../touch-pad-menu.component.ts | 4 +- src/app/constants/http-routs.ts | 12 + src/app/home/home.component.html | 22 +- src/app/home/home.component.ts | 9 + src/app/login/login.component.css | 211 +++++++++++++++--- src/app/login/login.component.html | 93 ++++---- src/app/login/login.component.ts | 15 +- src/app/service/auth.guard.ts | 19 ++ src/app/service/auth.service.ts | 20 ++ src/app/service/btc.service.ts | 42 ++++ src/assets/image2.jpg | Bin 0 -> 993394 bytes src/assets/img.jpg | Bin 0 -> 910692 bytes src/assets/logo_w.png | Bin 0 -> 19310 bytes src/assets/newlogo.png | Bin 0 -> 74405 bytes src/main.ts | 3 +- 28 files changed, 680 insertions(+), 247 deletions(-) create mode 100644 src/app/constants/http-routs.ts create mode 100644 src/app/service/auth.guard.ts create mode 100644 src/app/service/auth.service.ts create mode 100644 src/app/service/btc.service.ts create mode 100644 src/assets/image2.jpg create mode 100644 src/assets/img.jpg create mode 100644 src/assets/logo_w.png create mode 100644 src/assets/newlogo.png diff --git a/angular.json b/angular.json index 24246d0..7fc60b8 100644 --- a/angular.json +++ b/angular.json @@ -18,7 +18,7 @@ "zone.js" ], "tsConfig": "tsconfig.app.json", - "assets": [ + "assets": [ "src/assets", "src/favicon.ico", { @@ -62,6 +62,10 @@ }, "serve": { "builder": "@angular/build:dev-server", + "options": { + "host": "0.0.0.0", + "allowedHosts": true + }, "configurations": { "production": { "buildTarget": "Btc-race-app:build:production" diff --git a/package.json b/package.json index 63d5efb..86833c9 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "scripts": { "ng": "ng", - "start": "ng serve", + "start": "ng serve --host 0.0.0.0 --port 4200", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index e6cfe06..1cfd9f8 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,6 +1,7 @@ import { Routes } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; +import {AuthGuard} from './service/auth.guard'; export const routes: Routes = [ { path: 'login', component: LoginComponent }, diff --git a/src/app/components/middle-section/middle-section.component.css b/src/app/components/middle-section/middle-section.component.css index f167728..bdc78c0 100644 --- a/src/app/components/middle-section/middle-section.component.css +++ b/src/app/components/middle-section/middle-section.component.css @@ -1,13 +1,11 @@ - - .borderless-custom { border-collapse: separate; border-spacing: 4px; } .custom-cell { - height: 3.4rem; /* increased height for better fill */ + height: 2.5rem; /* increased height for better fill */ background-color: #f8f9fa; border: 1px solid #ced4da; border-radius: 0.3rem; @@ -22,23 +20,27 @@ div[style*="background-color: black"] .custom-cell { /* Override custom cell color inside grey box */ .pure-white { background-color: #ffffff !important; + border-color: black; } .middle-section-container { display: flex; gap: 1rem; - height: 49vh; + height: 38vh; width: 100%; + } /* Desktop view (default) */ .main-table { width: 60%; + background-color: #f1f1f1df; } .transaction-summary { width: 40%; + background-color: #d0ddf5; } .borderless-custom { @@ -46,11 +48,11 @@ div[style*="background-color: black"] .custom-cell { border-spacing: 4px; } -.custom-cell { - height: 3.4rem; +.custom-cell-new { + height: 2.5rem; background-color: #f8f9fa; - border: 1px solid #ced4da; border-radius: 0.3rem; + border: 1px solid rgba(3, 27, 69, 0.678); } div[style*="background-color: black"] .custom-cell { @@ -60,6 +62,24 @@ div[style*="background-color: black"] .custom-cell { .pure-white { background-color: #ffffff !important; } + +.buttons-custom{ + display: flex; + height: 2.6rem; + width: 100%; + justify-content: space-between; + padding-bottom: 0.2rem; +} + + +.btn{ + padding-bottom:0.8rem; + height: 100%; +} +.fw-bold{ + margin-right: 2rem; + padding-bottom: 1rem; +} /* Desktop view (default) - reorder the layout */ @media (min-width: 801px) { .main-table { @@ -87,3 +107,14 @@ div[style*="background-color: black"] .custom-cell { margin-bottom: 1rem; } } + +/* REMOVE or COMMENT this block */ +@media (min-width: 900px) and (max-width: 1400px) { + .middle-section-container { + height: auto; + max-height: 50vh; + } + + +} +/* REMOVE or COMMENT this block fixed */ diff --git a/src/app/components/middle-section/middle-section.component.html b/src/app/components/middle-section/middle-section.component.html index 281466b..872d5f5 100644 --- a/src/app/components/middle-section/middle-section.component.html +++ b/src/app/components/middle-section/middle-section.component.html @@ -3,7 +3,7 @@
-
+
Transaction Summary
@@ -27,7 +27,7 @@
-
+
@@ -37,19 +37,18 @@ - - - - + + + +
-
+
-
Amount :
+
Amount :
-
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css index 6d96d9e..1204746 100644 --- a/src/app/components/navbar/navbar.component.css +++ b/src/app/components/navbar/navbar.component.css @@ -1,13 +1,13 @@ /* Top Bar */ .top-bar { - background-color: #6a4607; + background-color: #043785; height: 2.5rem; - font-size: 0.85rem; + font-size: 1rem; width: 100%; } .top-live-button { - background: rgb(5, 126, 43); + background: rgb(3, 108, 36); color: #f8f3f3; font-weight: bold; height: 2.5rem; @@ -21,13 +21,13 @@ } .top-live-button:hover { - background-color: rgba(12, 249, 142, 0.903); + background-color: rgba(3, 93, 52, 0.903); cursor: pointer; } /* Navbar */ .custom-navbar { - background-color: #a15914; + background-color: #0e4487; height: 2.7rem; font-weight: bold; font-size: 0.9rem; @@ -38,7 +38,7 @@ background: none; border: none !important; height: 2.7rem; - color: rgb(14, 0, 0); + color: rgb(251, 248, 248); font-weight: bold; font-size: 1rem; } @@ -50,11 +50,11 @@ } .nav-button { - color: rgb(26, 1, 1); - background: none; - border-left: 1px solid white; - border-right: 1px solid white; - height: 2.7rem; + color: rgb(254, 253, 253); + + height: 2.3rem; + margin-bottom: 0.5rem; + padding: 0 0.5rem; display: flex; align-items: center; diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index 8ac1fd8..fe10e05 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -5,7 +5,7 @@
B.T.No:1111 -
LIVE
+
LIVE
@@ -31,7 +31,7 @@
-
+
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index 0a6fd45..865e669 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, HostListener } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { BtcService } from '../../service/btc.service'; @Component({ selector: 'app-navbar', @@ -45,6 +46,10 @@ export class NavbarComponent implements OnInit { { description: '', venue: '', ticketNumber: '', poolName: '', totalAmount: '' } ]; + constructor(private btcService : BtcService){ + + } + ngOnInit() { this.updateDateTime(); setInterval(() => this.updateDateTime(), 1000); @@ -109,4 +114,13 @@ export class NavbarComponent implements OnInit { this.selectedRace = race; this.closeModals(); } + + ping() { + console.log("Ping"); + + this.btcService.pingLiveStatus().subscribe({ + next: (employee) => {console.log(employee); console.log("Resp")}, + error: (e) => {console.log(e); console.log("Error")} + }); + } } diff --git a/src/app/components/sidebar/sidebar.component.css b/src/app/components/sidebar/sidebar.component.css index 739aa91..078e721 100644 --- a/src/app/components/sidebar/sidebar.component.css +++ b/src/app/components/sidebar/sidebar.component.css @@ -4,7 +4,7 @@ align-items: center; height: 104vh; width: 5rem; - background-color: #1e1e2f; + background-color: #01050f; padding-top: 1rem; padding-bottom: 2rem; box-sizing: border-box; @@ -16,6 +16,10 @@ margin: 0 auto; } +.logo{ + width: 4rem; + height: 3rem; +} .sidebar-menu { list-style: none; padding: 0; @@ -31,7 +35,8 @@ display: flex; flex-direction: column; align-items: center; - font-size: 0.75rem; + font-size: 0.8rem; + font-weight: bold; padding: 0.5rem 0; cursor: pointer; transition: background 0.2s; diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html index b9f3baa..9006182 100644 --- a/src/app/components/sidebar/sidebar.component.html +++ b/src/app/components/sidebar/sidebar.component.html @@ -1,18 +1,25 @@ -new +
    -
  • Ticketing
    • -
  • Withdraw
    • -
  • Deposit
    • - -
  • +
  • + Ticketing +
    • +
  • + Withdraw +
    • +
  • + Deposit +
    • +
  • Pay-out -
  • View RC
    • + +
  • View RC
  • Cancel
+
diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts index 54b1de9..04ebc8a 100644 --- a/src/app/components/sidebar/sidebar.component.ts +++ b/src/app/components/sidebar/sidebar.component.ts @@ -1,20 +1,40 @@ -import { Component } from '@angular/core'; +import { Component, Output, EventEmitter } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; // Required for ngModel +import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.css'], standalone: true, - imports: [CommonModule, FormsModule] + imports: [CommonModule, FormsModule], }) export class SidebarComponent { - // Cancel Modal + @Output() ticketingClick = new EventEmitter(); + @Output() withdrawClick = new EventEmitter(); + @Output() depositClick = new EventEmitter(); + @Output() payoutClick = new EventEmitter(); + @Output() cancelClick = new EventEmitter(); + showCancel: boolean = false; ticketNo: string = ''; + showPayout: boolean = false; + payoutTicketNo: string = ''; + + showDeposit: boolean = false; + depositOperatorId = ''; + depositShroffId = ''; + depositAmount = ''; + + showWithdraw: boolean = false; + withdrawOperatorId = ''; + withdrawShroffId = ''; + withdrawAmount = ''; + + // Modal handlers... openCancelPopup() { + this.cancelClick.emit(); this.showCancel = true; } @@ -28,11 +48,8 @@ export class SidebarComponent { this.closeCancelPopup(); } - // Pay-out Modal - showPayout: boolean = false; - payoutTicketNo: string = ''; - openPayoutPopup() { + this.payoutClick.emit(); this.showPayout = true; } @@ -50,13 +67,8 @@ export class SidebarComponent { this.closePayoutPopup(); } - // Deposit Modal - showDeposit: boolean = false; - depositOperatorId = ''; - depositShroffId = ''; - depositAmount = ''; - openDepositPopup() { + this.depositClick.emit(); this.showDeposit = true; } @@ -72,13 +84,8 @@ export class SidebarComponent { this.closeDepositPopup(); } - // Withdraw Modal - showWithdraw: boolean = false; - withdrawOperatorId = ''; - withdrawShroffId = ''; - withdrawAmount = ''; - openWithdrawPopup() { + this.withdrawClick.emit(); this.showWithdraw = true; } @@ -94,7 +101,6 @@ export class SidebarComponent { this.closeWithdrawPopup(); } - // Numpad handlers for Deposit and Withdraw modals onNumpadClick(value: string, type: 'deposit' | 'withdraw') { if (type === 'deposit') { this.depositAmount += value; diff --git a/src/app/components/touch-pad-menu/touch-pad-menu.component.css b/src/app/components/touch-pad-menu/touch-pad-menu.component.css index a7dab40..4d4b5c9 100644 --- a/src/app/components/touch-pad-menu/touch-pad-menu.component.css +++ b/src/app/components/touch-pad-menu/touch-pad-menu.component.css @@ -1,8 +1,14 @@ +/* 🔲 Base Styles */ .touch-pad-container { - background-color: #f9f9f9; + /*background-color: #cc0f0f;*/ border: 1px solid #ccc; padding: 1rem; border-radius: 8px; + height: 56.8vh; +} + +.container-fluid.mb-2{ + width: 100%; } .scrollable-touchpad { @@ -13,6 +19,7 @@ .scrollable-touchpad::-webkit-scrollbar { width: 6px; } + .scrollable-touchpad::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; @@ -28,75 +35,68 @@ button { color: #5d6165; } -/* ✅ Tablet & Mobile View */ +.number-button{ +height: 3rem; +} + +/* ✅ Responsive Tablet/Mobile Styles */ @media (max-width: 800px) { .container-fluid { padding: 0 1rem; } - .row.align-items-center { + /* Stack the top row groups */ + .touch-pad-container .container-fluid.mb-2 > .d-flex { flex-direction: column !important; align-items: center; - gap: 0.5rem; } - /* Stack and center 3 sections */ + .touch-pad-container .container-fluid.mb-2 > .d-flex > div { + justify-content: center; + width: 100%; + } + + .touch-pad-container .btn { + min-width: 80px; + flex: 1 1 auto; + } + + /* Main grid stacking */ .touch-pad-container .row.gx-2 { flex-direction: column; align-items: center; } - .touch-pad-container .col-3 { - width: 90% !important; - margin-bottom: 1rem; - order: 1; - } - - .touch-pad-container .col-3 .row.gx-1 { - display: flex; - flex-wrap: wrap; - } - - .touch-pad-container .col-3 .col-4 { - flex: 0 0 33.3333%; - max-width: 33.3333%; - } - - .touch-pad-container .col-2 { - width: 90% !important; - margin-bottom: 1rem; - order: 2; - } - - .touch-pad-container .col-2 .row.gx-1 { - display: flex; - flex-wrap: wrap; - } - - .touch-pad-container .col-2 .col-6 { - flex: 0 0 50%; - max-width: 50%; - } - - .touch-pad-container .col-2 .col-4 { - flex: 0 0 33.3333%; - max-width: 33.3333%; - } - + .touch-pad-container .col-3, + .touch-pad-container .col-2, .touch-pad-container .col-7 { - width: 90% !important; - margin: 0 auto 1rem auto; - order: 3; + width: 95% !important; + margin-bottom: 1rem; } + .touch-pad-container .col-3 .row.gx-1, + .touch-pad-container .col-2 .row.gx-1, .touch-pad-container .col-7 .row.gx-1 { display: flex; flex-wrap: wrap; } + /* ✅ This ensures 6 columns (≈16.66% each) for 1–30 buttons */ .touch-pad-container .col-7 .col-2 { - flex: 0 0 16.6667%; - max-width: 16.6667%; + flex: 0 0 16.6667% !important; + max-width: 16.6667% !important; + } + + /* Labels and number pad layout (unchanged logic) */ + .touch-pad-container .col-3 .col-4, + .touch-pad-container .col-2 .col-4 { + flex: 0 0 33.3333%; + max-width: 33.3333%; + } + + .touch-pad-container .col-2 .col-6 { + flex: 0 0 50%; + max-width: 50%; } .col-2 .btn, @@ -108,4 +108,121 @@ button { .scrollable-touchpad { max-height: 40vh; } + } + +@media (min-width: 801px) { + /* Remove container padding on desktop to align buttons edge-to-edge */ + .touch-pad-container .container-fluid.mb-2 { + padding-left: 0; + padding-right: 0; + } + + /* Parent flex row */ + .touch-pad-container .container-fluid.mb-2 > .d-flex { + /*justify-content: space-between;*/ + flex-wrap: nowrap; + gap: 2rem; + } + + /* Left group: CALC to FIELD */ + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:first-child { + flex: 0 0 45%; + display: flex; + justify-content: flex-start; + padding-left: 0; /* optional: add 1rem if you still want a little breathing room */ + } + + /* Right group: COPY, CLEAR, PR */ + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child { + flex: 0 0 50%; + display: flex; + justify-content: flex-end; + gap: 0.8rem; + padding-right: 1rem; /* optional: for symmetry */ + } + + /* Optional: widen left buttons slightly */ + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:first-child button { + min-width: 120px; + margin-right: 2rem; + } + + +/* Increase COPY button width */ +.touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child button:nth-child(1) { + min-width: 190px; + margin-right: 2rem; + margin-left: 2rem; +} + +/* Add 3rem gap between COPY and CLEAR */ +.touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child button:nth-child(2) { + margin-left: 9rem; + min-width: 150px; +} + +.touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child button:nth-child(3) { + min-width: 100px; + margin-left: 1rem; +} + +} + +/* 🎯 POS Machine Optimization */ +@media (min-width: 900px) and (max-width: 1400px) { + + .touch-pad-container .container-fluid.mb-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; + width: 100%; + } + + .touch-pad-container .container-fluid.mb-2 > .d-flex { + gap: 1rem; + } + + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:first-child { + flex: 0 0 50%; + justify-content: flex-start; + } + + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:first-child button { + min-width: 110px; + font-size: 0.9rem; + } + + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child { + flex: 0 0 50%; + justify-content: flex-end; + } + + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child button:nth-child(1) { + min-width: 160px; + margin-right: 4rem; + margin-left: 1rem; + } + + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child button:nth-child(2) { + margin-left: 0.3rem; + min-width: 130px; + } + + .touch-pad-container .container-fluid.mb-2 > .d-flex > div:last-child button:nth-child(3) { + min-width: 90px; + margin-left: 0.5rem; + } + + .scrollable-touchpad { + max-height: 60vh; + overflow-y: auto; +} + +} + + +@media(min-height: 600px) and (max-height: 725px){ + .number-button{ +height: 2rem; +} +} \ No newline at end of file diff --git a/src/app/components/touch-pad-menu/touch-pad-menu.component.html b/src/app/components/touch-pad-menu/touch-pad-menu.component.html index 3afe07e..4908c23 100644 --- a/src/app/components/touch-pad-menu/touch-pad-menu.component.html +++ b/src/app/components/touch-pad-menu/touch-pad-menu.component.html @@ -1,57 +1,44 @@ +
+ +
+
- -
- -
- - - - + +
+ + + +
- -
- -
- - -
- - -
-
- - -
- -
- - - - -
- - -
+ +
+
- +
-
+
- +
@@ -59,10 +46,10 @@
-
+
- +
@@ -70,25 +57,25 @@
-
+
-
-
+
+
-
+
-
+
-
+
-
-
+
+
diff --git a/src/app/components/touch-pad-menu/touch-pad-menu.component.ts b/src/app/components/touch-pad-menu/touch-pad-menu.component.ts index c0b0be6..dec9163 100644 --- a/src/app/components/touch-pad-menu/touch-pad-menu.component.ts +++ b/src/app/components/touch-pad-menu/touch-pad-menu.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ @@ -9,6 +9,8 @@ import { CommonModule } from '@angular/common'; styleUrls: ['./touch-pad-menu.component.css'] }) export class TouchPadMenuComponent implements OnInit { + @Input() ticketingActive: boolean = false; + labels: string[] = [ 'WIN', 'SHP', 'THP', 'PLC', 'SHW', 'FOR', diff --git a/src/app/constants/http-routs.ts b/src/app/constants/http-routs.ts new file mode 100644 index 0000000..cfd3d3c --- /dev/null +++ b/src/app/constants/http-routs.ts @@ -0,0 +1,12 @@ +export class ApplicationHttpRouts{ + + private static readonly PROTOCOL: string = 'http'; + private static readonly BACKEND_SERVER: string = 'localhost'; + private static readonly PORT_NUMBER: string = '8083'; + private static readonly SOCKET: string = `${this.PROTOCOL}://${this.BACKEND_SERVER}:${this.PORT_NUMBER}`; + + + //login user + static readonly LOG_IN: string = this.SOCKET + '/open/login'; + static readonly PING : string = this.SOCKET + '/user/ping'; +} \ No newline at end of file diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 89cfb3c..9467157 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,31 +1,33 @@
- - +
- +
-
- - +
- +
- +
- +
-
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 31186ff..34e7a51 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -20,6 +20,7 @@ import { CommonModule } from '@angular/common'; }) export class HomeComponent implements OnInit, OnDestroy { isTabletView = false; + isTicketingActive = false; private resizeObserver!: () => void; constructor(private cdr: ChangeDetectorRef) {} @@ -40,4 +41,12 @@ export class HomeComponent implements OnInit, OnDestroy { private updateView() { this.isTabletView = window.innerWidth <= 800; } + + onTicketingClicked() { + this.isTicketingActive = true; + } + + onOtherActionClicked() { + this.isTicketingActive = false; + } } diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css index 8dd6383..ffbdb26 100644 --- a/src/app/login/login.component.css +++ b/src/app/login/login.component.css @@ -6,7 +6,7 @@ body { /* Top bar */ .top-bar { height: 40px; - background-color: orange; + background-color: rgb(2, 37, 101); color: #fff; font-weight: bold; display: flex; @@ -19,20 +19,21 @@ body { /* Bottom bar */ .bottom-bar { height: 40px; - background-color: orange; + background-color: rgb(3, 37, 124); color: white; display: flex; - justify-content: flex; + justify-content: flex-start; align-items: center; padding: 0 20px; font-size: 14px; } -/* Container */ +/* Main container */ .login-container { display: flex; - /* flex-wrap: wrap; */ height: calc(100vh - 80px); + background-color: #666; + /* flex-direction: row; */ } /* Left panel */ @@ -51,64 +52,87 @@ body { .login-right { flex: 1; min-width: 300px; - padding: 40px; + padding: 40px 20px; background-color: #f4f4f4; display: flex; flex-direction: column; justify-content: center; align-items: center; } - .logo { font-size: 24px; font-weight: bold; - margin-bottom: 30px; + margin-bottom: 15px; color: #004aad; - text-align: center; + display: flex; /* Arrange children side by side */ + align-items: center; /* Vertically align */ + justify-content: center; /* Center horizontally */ + gap: 8px; /* Space between BTC and text */ +} + +.logo_img{ + width: 5rem; + height: 5rem; } .logo span { - display: block; + display: inline; /* Inline so it sits beside BTC */ font-size: 18px; - color: orange; + color: rgb(5, 77, 165); } + +/* Form */ .input-box { - width: 75%; + width: 84%; /* height: 30px; */ - padding: 15px; + padding: 12px; margin-bottom: 15px; font-size: 16px; border: 1px solid #ccc; text-align: center; + box-sizing: border-box; } .input-box.ng-invalid.ng-touched { border-color: red; } +.form-wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + /* Error */ .error-message { color: red; - font-size: 20px; - margin-bottom: 3px; - width: 80%; + font-size: 16px; + margin-bottom: 8px; text-align: center; + width: 100%; } -/* Button */ +/* Login Button */ .login-btn { - width: 80%; + width: 84%; padding: 12px; - background-color: orange; - border: none; - color: white; + background-color: #d0ddf5; + border-color: black; + color: rgb(2, 38, 138); font-size: 16px; - margin-bottom: 20px; + margin-bottom: 16px; + border-radius: 0.5rem; cursor: pointer; } -/* Keypad */ +.login-btn:hover{ + background-color:#073674e7 ; + color: white; +} + +/* Numpad */ .numpad { width: 80%; } @@ -120,29 +144,142 @@ body { } .row button { - flex: 1 1 30%; + flex: 1; margin: 0 5px; - padding: 10px; - font-size: 16px; - background-color: white; - border: 1px solid orange; + padding: 14px; + font-size: 18px; + background-color: #d0ddf5; + border-color: black; cursor: pointer; + border-radius: 4px; + color: rgb(3, 39, 122); } + + .back-btn { - background-color: #f9d3b4; + background-color: #7b9af1; +} + +/* ─── FIELD WITH FLOATING LABEL ───────────────────── */ +.field-wrapper { + position: relative; + width: 84%; + margin-bottom: 24px; +} +.input-box { + width: 100%; + padding: 18px 12px 8px; + font-size: 16px; + text-align: center; + border: 2px solid #022f63; + background-color: #d0ddf5; + border-radius: 4px; + background: transparent; + box-sizing: border-box; + transition: border-color 0.2s ease; +} +.field-wrapper.active .input-box { + border: 2px solid #009fe3; +} +/* Floating label inside the input box, vertically centered */ +.field-wrapper label { + position: absolute; + left: 0; + right: 0; + top: 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + font-size: 16px; + color: #666; + background: transparent; + transition: all 0.18s cubic-bezier(.4,0,.2,1); + padding: 0 12px; + z-index: 2; +} + +/* Float label above input when focused or filled */ +.field-wrapper.active label, +.field-wrapper.filled label { + left: 12px; + right: auto; + top: -10px; + height: auto; + font-size: 14px; + color: #009fe3; + background: #f4f4f4; + padding: 0 4px; + justify-content: flex-start; + align-items: flex-end; } /* Responsive */ @media (max-width: 768px) { - .login-left{ - display: none; + .login-container { + flex-direction: column; } + + .login-left { + height: 200px; + min-width: 100%; + flex: none; + } + + .bg-image { html, body{ + overflow:auto; +} + object-fit: cover; + height: 100%; + width: 100%; + } + + /* Focus the entire login panel (inputs, buttons, numpad) in the center */ + .login-right { + flex: none; + width: 100%; + padding: 20px; + position: fixed; + left: 50%; + top: 51%; + transform: translate(-50%, -50%); + z-index: 1000; + background: #f4f4f4; + box-shadow: 0 2px 16px rgba(0,0,0,0.15); + border-radius: 12px; + /* Optional: add max-width for better appearance */ + max-width: 400px; + } + + .numpad { + max-width: 100%; + position: static; + left: auto; + top: auto; + transform: none; + z-index: auto; + background: none; + box-shadow: none; + border-radius: 0; + padding: 0; + } + + .row button { + font-size: 16px; + padding: 12px; + } + + } -.form-wrapper { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; -} + +@media(min-height: 600px) and (max-height: 725px){ + .login-right{ + height: 100%; + } + .btn{ + height: 3rem; + } +} \ No newline at end of file diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 4514940..66a7263 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -3,12 +3,12 @@ BANGALORE TURF CLUB LTD
- +