From 19c5913e08a50940b72c0252a1377e65fa4f3051 Mon Sep 17 00:00:00 2001 From: 22nibis Date: Tue, 24 Jun 2025 09:29:44 +0530 Subject: [PATCH] style: navbar changes with pop up --- .../components/navbar/navbar.component.css | 448 +++++++++++++++++- .../components/navbar/navbar.component.html | 175 ++++--- src/app/components/navbar/navbar.component.ts | 79 ++- 3 files changed, 621 insertions(+), 81 deletions(-) diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css index bea5554..6d96d9e 100644 --- a/src/app/components/navbar/navbar.component.css +++ b/src/app/components/navbar/navbar.component.css @@ -1,3 +1,4 @@ +/* Top Bar */ .top-bar { background-color: #6a4607; height: 2.5rem; @@ -24,7 +25,7 @@ cursor: pointer; } - +/* Navbar */ .custom-navbar { background-color: #a15914; height: 2.7rem; @@ -53,8 +54,6 @@ background: none; border-left: 1px solid white; border-right: 1px solid white; - border-top: none; - border-bottom: none; height: 2.7rem; padding: 0 0.5rem; display: flex; @@ -69,7 +68,6 @@ cursor: pointer; } - .hamburger { font-size: 1.7rem; background: none; @@ -78,6 +76,7 @@ padding: 0.3rem 0.75rem; } +/* Mobile Navbar */ @media (max-width: 800px) { .mobile-menu-container { background-color: #c17a30; @@ -96,11 +95,444 @@ padding-right: 1rem; } - .dropdown-menu { - text-align: right; - } - + .dropdown-menu, .dropdown-item { text-align: right; } } +.wallet-modal-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +} + +.wallet-modal-box { + background: #fff; + color: black; + padding: 30px; + border-radius: 6px; + width: 800px; + max-width: 90%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + text-align: center; +} + +.wallet-modal-box h5 { + font-size: 20px; + font-weight: bold; + margin-bottom: 20px; + color: #a15914; +} + +.wallet-table { + width: 100%; + border-collapse: collapse; + margin-top: 10px; +} + +.wallet-table td { + border: 1px solid #ccc; + padding: 8px 12px; + font-size: 0.9rem; + text-align: left; +} + +.wallet-modal-box .cancel-btn { + margin-top: 20px; +} +.result-modal-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +} + +.result-modal-box { + background: #fff; + color: black; + padding: 30px; + border-radius: 6px; + width: 800px; + height: 500px; + max-width: 90%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + text-align: center; + justify-content: space-between; /* Push content to top and buttons to bottom */ +} + +.result-modal-box h5 { + font-size: 20px; + font-weight: bold; + margin-bottom: 20px; + color: #a15914; +} + +.result-modal-box .btn-group { + display: flex; + justify-content: space-between; + gap: 10px; /* spacing between buttons */ +} + +.result-modal-box .cancel-btn, +.result-modal-box .erase-btn { + flex: 1; + padding: 12px; + font-size: 16px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.result-modal-box .cancel-btn { + background-color: #ccc; +} + +.result-modal-box .erase-btn { + background-color: #f0ad4e; + color: white; +} + +/* message section */ + +.messages-modal-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +} + +.messages-modal-box { + background: #fff; + color: black; + padding: 30px; + border-radius: 6px; + width: 800px; + height: 500px; + max-width: 90%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + text-align: center; +} + +.messages-modal-box h5 { + font-size: 20px; + font-weight: bold; + margin-bottom: 20px; + color: #a15914; +} + +.messages-list { + list-style: none; + padding-left: 0; + margin: 0 0 10px 0; + text-align: left; +} + +.messages-list li { + padding: 8px 10px; + border-bottom: 1px solid #ccc; +} + +.messages-modal-box .cancel-btn { + margin-top: 20px; +} +.messages-modal-box .btn-cancel { + background-color: #c0392b !important; /* deep red */ + color: #fff !important; + border: none; + border-radius: 4px; + padding: 12px; + font-size: 16px; + cursor: pointer; + width: 100%; + margin-top: 280px; +} +/* viewlog section */ + +.viewlog-modal-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +} + +.viewlog-modal-box { + background: #fff; + color: black; + padding: 30px; + border-radius: 6px; + width: 800px; + height: 500px; + max-width: 90%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + text-align: center; +} + +.viewlog-modal-box h5 { + font-size: 20px; + font-weight: bold; + margin-bottom: 20px; + color: #a15914; +} + +.viewlog-table { + width: 100%; + border-collapse: collapse; + margin-top: 10px; + flex: 1; + overflow-y: auto; +} + +.viewlog-table th, +.viewlog-table td { + border: 1px solid #ccc; + padding: 8px 12px; + font-size: 0.9rem; + text-align: left; +} + +.viewlog-modal-box .cancel-btn { + margin-top: auto; + padding: 12px; + font-size: 16px; + border-color:lavenderblush; + background-color: #ccc; + border-radius: 4px; + cursor: pointer; +} + + +.modal-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +} + +.modal-box { + background: #fff; + color: black; + padding: 30px; + border-radius: 6px; + width: 800px; + max-width: 90%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + text-align: center; +} + +.modal-box h5 { + font-size: 20px; + font-weight: bold; + margin-bottom: 20px; + color: #a15914; +} + +.modal-option { + padding: 10px; + margin-bottom: 5px; + border-radius: 4px; + background: #f0f0f0; + cursor: pointer; + transition: background 0.3s ease; +} + +.modal-option:hover { + background: #d8d8d8; +} + + +.deposit-modal-overlay, +.withdraw-modal-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +} + +.deposit-modal-box, +.withdraw-modal-box { + background: #fff; + color: black; + padding: 30px; + border-radius: 6px; + width: 800px; + max-width: 90%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + text-align: center; +} + +/* Titles */ +.deposit-modal-title { + color: #2980b9; + font-size: 20px; + font-weight: bold; + margin-bottom: 20px; +} + +.withdraw-modal-title { + color: #c0392b; + font-size: 20px; + font-weight: bold; + margin-bottom: 20px; +} + +/* Form Input Fields */ +.deposit-input, +.withdraw-input { + width: 100%; + padding: 10px; + margin-bottom: 15px; + font-size: 16px; + border: 1px solid #ccc; +} + +/* Layout for Input + Numpad */ +.deposit-modal-content, +.withdraw-modal-content { + display: flex; + justify-content: space-between; + gap: 20px; +} + +.deposit-form, +.withdraw-form, +.deposit-numpad-section, +.withdraw-numpad { + flex: 1; +} + +/* Numpad */ +.deposit-numpad, +.withdraw-numpad { + width: 100%; +} + +.row { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +.row button { + flex: 1 1 30%; + margin: 0 5px; + padding: 10px; + font-size: 16px; + background-color: white; + border: 1px solid orange; + border-radius: 4px; + cursor: pointer; + transition: background 0.2s; +} + +.row button:hover { + background-color: #ffe4c4; +} + +.back-btn { + background-color: #f9d3b4 !important; +} + +/* Balance Container */ +.deposit-balance-container, +.withdraw-balance-container { + width: 100%; + background-color: #f0f0f0; + padding: 12px 15px; + border-radius: 4px; + margin-bottom: 15px; + text-align: center; +} + +.deposit-balance, +.withdraw-balance { + font-size: 18px; + font-weight: bold; + color: #2c3e50; +} + +/* Footer Buttons */ +.deposit-footer, +.withdraw-footer { + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +.deposit-cancel-btn, +.withdraw-cancel-btn, +.deposit-print-btn, +.withdraw-print-btn { + width: 48%; + padding: 12px; + font-size: 16px; + border: none; + cursor: pointer; + border-radius: 4px; +} + +.deposit-cancel-btn { + background-color: #bdc3c7; +} + +.deposit-print-btn { + background-color: #2980b9; + color: white; +} + +.withdraw-cancel-btn { + background-color: #ecf0f1; +} + +.withdraw-print-btn { + background-color: #c0392b; + color: white; +} diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index 8eccf61..8ac1fd8 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -12,92 +12,125 @@ + + +
+
+
WALLET
+ + + + + + + + + +
WITHDRAW{{ wallet.withdraw }}
DEPOSIT{{ wallet.deposit }}
PAY-OUT{{ wallet.payout }}
CANCEL{{ wallet.cancel }}
TICKETING{{ wallet.ticketing }}
BALANCE{{ wallet.balance }}
+ +
+
+ + +
+
+
RESULTS
+
+ + +
+
+
+ + +
+
+
MESSAGES
+
    +
  • {{ msg }}
    • +
+ +
+
+ + +
+
+
VIEW-LOG
+ + + + + + + + + + + + + + + + + + + +
DescriptionVenueTicket NumberPool NameTotal Amount
{{ log.description }}{{ log.venue }}{{ log.ticketNumber }}{{ log.poolName }}{{ log.totalAmount }}
+ +
+
+ + +
+
+
Select Venue
+
+ {{ venue }} +
+
+
+ + +
+
+
Select Race
+
+ {{ race }} +
+
+
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index 8a68839..0a6fd45 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -1,18 +1,50 @@ import { Component, OnInit, HostListener } from '@angular/core'; -import { CommonModule } from '@angular/common'; // ✅ this is what you need +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', styleUrls: ['./navbar.component.css'], standalone: true, - imports: [CommonModule] // ✅ import here + imports: [CommonModule] }) export class NavbarComponent implements OnInit { dateTime: string = ''; isMenuOpen: boolean = false; screenWidth: number = window.innerWidth; + // Venue and Race state + showVenueModal = false; + showRaceModal = false; + venues = ['MYS', 'BLR', 'CHN']; + races = ['1', '2', '3']; + selectedVenue = 'MYS'; + selectedRace = '1'; + + // Modal state flags + showWalletModal = false; + showResultModal = false; + showMessagesModal = false; + showLogModal = false; + + // Wallet data + wallet = { + withdraw: 0, + deposit: 0, + payout: 0, + cancel: 0, + ticketing: 0, + balance: 0 + }; + + // Messages + messages = ['HIII']; // Can be dynamically fetched + + // Logs + logs = [ + { description: '', venue: '', ticketNumber: '', poolName: '', totalAmount: '' } + ]; + ngOnInit() { this.updateDateTime(); setInterval(() => this.updateDateTime(), 1000); @@ -34,4 +66,47 @@ export class NavbarComponent implements OnInit { toggleMenu() { this.isMenuOpen = !this.isMenuOpen; } + + openVenueModal() { + this.showVenueModal = true; + } + + openRaceModal() { + this.showRaceModal = true; + } + + openWalletModal() { + this.showWalletModal = true; + } + + openResultModal() { + this.showResultModal = true; + } + + openMessagesModal() { + this.showMessagesModal = true; + } + + openLogModal() { + this.showLogModal = true; + } + + closeModals() { + this.showVenueModal = false; + this.showRaceModal = false; + this.showWalletModal = false; + this.showResultModal = false; + this.showMessagesModal = false; + this.showLogModal = false; + } + + selectVenue(venue: string) { + this.selectedVenue = venue; + this.closeModals(); + } + + selectRace(race: string) { + this.selectedRace = race; + this.closeModals(); + } }