style: login page ui navbar

btc-ui-app-2/src/app/login/login.css

@@ -1,9 +1,27 @@
-.login-container {
-  display: flex;
-  height: 100vh;
+body {
+  margin: 0;
   font-family: Arial, sans-serif;
 }
 
+/* Top bar */
+.top-bar {
+  height: 40px;
+  background-color: orange;
+  color: #fff;
+  font-weight: bold;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 20px;
+  font-size: 14px;
+}
+/* Main container */
+.login-container {
+  display: flex;
+  height: calc(100vh - 80px); /* minus top & bottom bar */
+}
+
+/* Left image */
 .login-left {
   flex: 2;
 }
@@ -14,6 +32,7 @@
   object-fit: cover;
 }
 
+/* Right side */
 .login-right {
   flex: 1;
   padding: 40px;
@@ -29,6 +48,7 @@
   font-weight: bold;
   margin-bottom: 30px;
   color: #004aad;
+  text-align: center;
 }
 
 .logo span {
@@ -56,6 +76,7 @@
   cursor: pointer;
 }
 
+/* Keypad styling */
 .numpad {
   width: 80%;
 }
@@ -79,3 +100,15 @@
 .back-btn {
   background-color: #f9d3b4;
 }
+
+/* Bottom bar */
+.bottom-bar {
+  height: 40px;
+  background-color: orange;
+  color: white;
+  display: flex;
+  justify-content: flex;
+  align-items: center;
+  padding: 0 20px;
+  font-size: 14px;
+}

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

@@ -1,7 +1,16 @@
+<!-- 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>
 
@@ -10,6 +19,7 @@
 
     <button class="login-btn">LOGIN</button>
 
+    <!-- Numeric Keypad -->
     <div class="numpad">
       <div class="row">
         <button>0</button>
@@ -32,4 +42,9 @@
       </div>
     </div>
   </div>
-</div>
+</div>
+
+<!-- Bottom Bar -->
+<div class="bottom-bar">
+  <span>Powered by <strong>Cezen Tech</strong></span>
+</div>