From 72b0fa4378d7a211c33dca34d47c8b0adbd7a242 Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Tue, 7 Oct 2025 12:46:04 +0530 Subject: [PATCH] wip: make screen responsive for mobile and browser. --- TODO.md | 1 + .../account_statement/accountStatement.tsx | 112 ++++-- src/app/(main)/accounts/layout.tsx | 181 ++++++++-- src/app/(main)/accounts/page.tsx | 56 +-- src/app/(main)/funds_transfer/layout.tsx | 179 ++++++++-- src/app/(main)/home/page.tsx | 337 ++++++++++++++---- src/app/(main)/layout.tsx | 131 +++---- src/app/(main)/settings/layout.tsx | 177 +++++++-- src/app/eMandate/login/Login.module.css | 89 +++++ src/app/eMandate/login/page.tsx | 197 +--------- src/app/login/page.module.css | 121 ++++--- src/app/login/page.tsx | 66 ++-- 12 files changed, 1060 insertions(+), 587 deletions(-) create mode 100644 src/app/eMandate/login/Login.module.css diff --git a/TODO.md b/TODO.md index ba72956..785ccab 100644 --- a/TODO.md +++ b/TODO.md @@ -23,5 +23,6 @@ - Forget Password - >For Migration if user not have password - E-mandate +- Make every page responsive diff --git a/src/app/(main)/accounts/account_statement/accountStatement.tsx b/src/app/(main)/accounts/account_statement/accountStatement.tsx index 23869cf..a8d05f8 100644 --- a/src/app/(main)/accounts/account_statement/accountStatement.tsx +++ b/src/app/(main)/accounts/account_statement/accountStatement.tsx @@ -1,5 +1,5 @@ "use client"; -import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group } from "@mantine/core"; +import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group, Card } from "@mantine/core"; import { DateInput } from '@mantine/dates'; import { useEffect, useRef, useState } from "react"; import { useSearchParams } from "next/navigation"; @@ -8,10 +8,11 @@ import dayjs from 'dayjs'; import { IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react"; import { generatePDF } from "@/app/_components/statement_download/PdfGenerator"; import { generateCSV } from "@/app/_components/statement_download/CsvGenerator"; +import { useMediaQuery } from "@mantine/hooks"; export default function AccountStatementPage() { - const pdfRef = useRef(null); + // const pdfRef = useRef(null); const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]); const [selectedAccNo, setSelectedAccNo] = useState(null); const [startDate, setStartDate] = useState(null); @@ -21,6 +22,7 @@ export default function AccountStatementPage() { const passedAccNo = searchParams.get("accNo"); const [loading, setLoading] = useState(false); const [availableBalance, setAvailableBalance] = useState(null); + const isMobile = useMediaQuery("(max-width: 768px)"); useEffect(() => { const saved = sessionStorage.getItem("accountData"); @@ -237,9 +239,19 @@ export default function AccountStatementPage() { + {(startDate && endDate) && ( + + Transactions from {dayjs(startDate).format("DD/MM/YYYY")} to {dayjs(endDate).format("DD/MM/YYYY")} + + )} + + {(!startDate && !endDate && transactions.length > 0) && ( + + Last 5 Transactions + + )} {loading ? ( -
@@ -248,42 +260,70 @@ export default function AccountStatementPage() {
) : transactions.length === 0 ? (

No transactions found.

+ ) : isMobile ? ( + // ✅ Mobile View – Card Layout + + {transactions.map((txn, i) => ( + + + + {txn.name || "—"} + + + {txn.date || "—"} + + + + + + ₹{parseFloat(txn.amount).toLocaleString("en-IN", { minimumFractionDigits: 2 })}{" "} + {txn.type === "DR" ? "Dr." : "Cr."} + + + Bal: ₹{txn.balance || "—"} + + + + ))} + ) : ( - <> - - {!startDate && !endDate ? 'Last 5 Transactions' - : startDate && endDate ? `Transactions from ${dayjs(startDate).format("DD/MM/YYYY")} to ${dayjs(endDate).format("DD/MM/YYYY")}` - : ""} - - - - {/* - - - - - - */} - - - {transactions.map((txn, i) => ( - - - - {/* */} - - - - ))} - -
NameDateTypeAmount(₹)Available Balance(₹)
{txn.name || "—"}{txn.date || "—"}{txn.type} - {parseFloat(txn.amount).toLocaleString("en-IN", { - minimumFractionDigits: 2, - })} {txn.type === "DR" ? "Dr." : "Cr."} - ₹{txn.balance || "—"}
- + // ✅ Desktop View – Table Layout + + + + + + + + + + + {transactions.map((txn, i) => ( + + + + + + + ))} + +
NameDateAmount (₹)Balance (₹)
{txn.name || "—"}{txn.date || "—"} + {parseFloat(txn.amount).toLocaleString("en-IN", { + minimumFractionDigits: 2, + })}{" "} + {txn.type === "DR" ? "Dr." : "Cr."} + + ₹{txn.balance || "—"} +
)} + diff --git a/src/app/(main)/accounts/layout.tsx b/src/app/(main)/accounts/layout.tsx index 813ab2c..b662b48 100644 --- a/src/app/(main)/accounts/layout.tsx +++ b/src/app/(main)/accounts/layout.tsx @@ -1,18 +1,23 @@ "use client"; -import { Divider, Stack, Text } from '@mantine/core'; +import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core'; import { usePathname } from 'next/navigation'; import Link from 'next/link'; import React, { useEffect, useState } from 'react'; import { useRouter } from "next/navigation"; +import { useMediaQuery } from '@mantine/hooks'; +import Image from "next/image"; +import logo from "@/app/image/logo1.jpg"; export default function Layout({ children }: { children: React.ReactNode }) { const [authorized, SetAuthorized] = useState(null); const router = useRouter(); const pathname = usePathname(); + const isMobile = useMediaQuery("(max-width: 768px)"); + const [drawerOpened, setDrawerOpened] = useState(false); const links = [ { label: "Account Summary", href: "/accounts" }, - { label: "Statement of Account", href: "/accounts/account_statement" }, + { label: "Account Statement ", href: "/accounts/account_statement" }, { label: "Account Details", href: "/accounts/account_details" }, ]; useEffect(() => { @@ -28,45 +33,145 @@ export default function Layout({ children }: { children: React.ReactNode }) { if (authorized) { return ( -
-
- - - My Accounts - - + + {/* Desktop Sidebar */} + {!isMobile && ( + + + + My Accounts + + - - {links.map(link => { - const isActive = pathname === link.href; - return ( - - {link.label} - - ); - })} - -
+ + {links.map((link) => { + const isActive = pathname === link.href; + return ( + + {link.label} + + ); + })} + + + )} -
+ {/* Mobile: Burger & Drawer */} + {isMobile && ( + <> + {/* Top header with burger and title */} + + setDrawerOpened(!drawerOpened)} + size="sm" + color="white" + /> + + My Accounts + + + + setDrawerOpened(false)} + padding="md" + size="75%" + overlayProps={{ color: "black", opacity: 0.55, blur: 3 }} + styles={{ + root: { + backgroundColor: "#e6f5ff", // soft background for drawer + // borderLeft: "4px solid #228be6", + // borderRadius: "8px", + }, + }} + > + {/* Logo and Drawer Header */} + + <> + KCCB Logo + + My Accounts + + + + + {/* Menu Items */} + + {links.map((link) => { + const isActive = pathname === link.href; + + return ( + + ); + })} + + + + )} + + + {/* Content Area */} + {children} -
-
+ + ); } } diff --git a/src/app/(main)/accounts/page.tsx b/src/app/(main)/accounts/page.tsx index 9cc6bda..55ad973 100644 --- a/src/app/(main)/accounts/page.tsx +++ b/src/app/(main)/accounts/page.tsx @@ -1,6 +1,7 @@ "use client"; -import { Group, Paper, ScrollArea, Table, Text, Title } from "@mantine/core"; +import { Group, Paper, ScrollArea, Stack, Table, Text, Title } from "@mantine/core"; +import { useMediaQuery } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; @@ -16,6 +17,7 @@ export default function AccountSummary() { const router = useRouter(); const [authorized, setAuthorized] = useState(null); const [accountData, setAccountData] = useState([]); + const isMobile = useMediaQuery("(max-width: 768px)"); async function FetchAccountDetails() { try { @@ -61,7 +63,8 @@ export default function AccountSummary() { const cellStyle = { border: "1px solid #ccc", - padding: "10px", + padding: isMobile ? "8px" : "10px", + fontSize: isMobile ? "13px" : "14px", }; // Filter accounts @@ -96,7 +99,7 @@ export default function AccountSummary() { - + <Title order={isMobile ? 5 : 4} mb="sm"> {title} @@ -117,25 +120,38 @@ export default function AccountSummary() { ); - if (authorized) { - return ( - + - <Title order={3} mb="md">Account Summary + Account Summary + + + {/* ✅ Responsive layout: Group for desktop, Stack for mobile */} + {isMobile ? ( + + {depositAccounts.length > 0 && + renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))} + {loanAccounts.length > 0 && + renderTable("Loan Accounts (INR)", renderRows(loanAccounts))} + + ) : ( - {/* Left table for Deposit Accounts */} - {depositAccounts.length > 0 && renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))} - - {/* Right table for Loan Accounts (only shown if available) */} - {loanAccounts.length > 0 && renderTable("Loan Accounts (INR)", renderRows(loanAccounts))} + {depositAccounts.length > 0 && + renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))} + {loanAccounts.length > 0 && + renderTable("Loan Accounts (INR)", renderRows(loanAccounts))} - - * Book Balance includes uncleared effects. - - - ); - } + )} - return null; + + * Book Balance includes uncleared effects. + + + ); } diff --git a/src/app/(main)/funds_transfer/layout.tsx b/src/app/(main)/funds_transfer/layout.tsx index 28de9c4..115c329 100644 --- a/src/app/(main)/funds_transfer/layout.tsx +++ b/src/app/(main)/funds_transfer/layout.tsx @@ -1,14 +1,19 @@ "use client"; -import { Divider, Stack, Text } from '@mantine/core'; +import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core'; import { usePathname } from 'next/navigation'; import Link from 'next/link'; import React, { useEffect, useState } from 'react'; import { useRouter } from "next/navigation"; +import Image from "next/image"; +import logo from "@/app/image/logo1.jpg"; +import { useMediaQuery } from '@mantine/hooks'; export default function Layout({ children }: { children: React.ReactNode }) { const [authorized, SetAuthorized] = useState(null); const router = useRouter(); const pathname = usePathname(); + const isMobile = useMediaQuery("(max-width: 768px)"); + const [drawerOpened, setDrawerOpened] = useState(false); const links = [ { label: " Quick Pay", href: "/funds_transfer" }, @@ -29,45 +34,145 @@ export default function Layout({ children }: { children: React.ReactNode }) { if (authorized) { return ( -
-
- - - Send Money - - + + {/* Desktop Sidebar */} + {!isMobile && ( + + + + Send Money + + - - {links.map(link => { - const isActive = pathname === link.href; - return ( - - {link.label} - - ); - })} - -
+ + {links.map((link) => { + const isActive = pathname === link.href; + return ( + + {link.label} + + ); + })} + + + )} -
+ {/* Mobile: Burger & Drawer */} + {isMobile && ( + <> + {/* Top header with burger and title */} + + setDrawerOpened(!drawerOpened)} + size="sm" + color="white" + /> + + Send Money + + + + setDrawerOpened(false)} + padding="md" + size="75%" + overlayProps={{ color: "black", opacity: 0.55, blur: 3 }} + styles={{ + root: { + backgroundColor: "#e6f5ff", // soft background for drawer + // borderLeft: "4px solid #228be6", + // borderRadius: "8px", + }, + }} + > + {/* Logo and Drawer Header */} + + <> + KCCB Logo + + Send Money + + + + + {/* Menu Items */} + + {links.map((link) => { + const isActive = pathname === link.href; + + return ( + + ); + })} + + + + )} + + + {/* Content Area */} + {children} -
-
+ + ); } } diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx index 48c9757..4f58504 100644 --- a/src/app/(main)/home/page.tsx +++ b/src/app/(main)/home/page.tsx @@ -7,6 +7,7 @@ import { useRouter } from "next/navigation"; import { Providers } from "../../providers"; import { notifications } from '@mantine/notifications'; import dayjs from 'dayjs'; +import { useMediaQuery } from '@mantine/hooks'; interface accountData { stAccountNo: string; @@ -19,6 +20,7 @@ interface accountData { export default function Home() { const [authorized, SetAuthorized] = useState(null); const router = useRouter(); + const isMobile = useMediaQuery("(max-width: 768px)"); const [accountData, SetAccountData] = useState([]); const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN"); const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || ""); @@ -27,7 +29,7 @@ export default function Home() { const [selectedLN, setSelectedLN] = useState(loanAccounts[0]?.stAccountNo || ""); const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN); const [showBalance, setShowBalance] = useState(false); - const PassExpiryRemains =(dayjs(localStorage.getItem("pswExpiryDate"))).diff(dayjs(),"day") + const PassExpiryRemains = (dayjs(localStorage.getItem("pswExpiryDate"))).diff(dayjs(), "day") // If back and forward button is clicked useEffect(() => { @@ -42,11 +44,11 @@ export default function Home() { router.push("/login"); }; const handleBeforeUnload = () => { - // logout on tab close / refresh - localStorage.removeItem("access_token"); - sessionStorage.removeItem("access_token"); - localStorage.clear(); - sessionStorage.clear(); + // logout on tab close / refresh + localStorage.removeItem("access_token"); + sessionStorage.removeItem("access_token"); + localStorage.clear(); + sessionStorage.clear(); }; window.addEventListener("popstate", handlePopState); window.addEventListener("beforeunload", handleBeforeUnload); @@ -112,29 +114,62 @@ export default function Home() { if (authorized) { return ( -
- Accounts Overview - - - Show Balance - setShowBalance(event.currentTarget.checked)} /> + + + Accounts Overview + + + {/* Show Balance Switch */} + + + + Show Balance + + setShowBalance(event.currentTarget.checked)} + /> -
- + + {/* Cards Section */} + {isMobile ? ( + {/* Deposit Account Card */} - - - - Deposit Account + + + + + Deposit Account + {depositAccounts.length > 0 ? ( ({ + value: acc.stAccountNo, + label: `${acc.stAccountType}- ${acc.stAccountNo}`, + }))} + value={selectedLN} + // @ts-ignore + onChange={setSelectedLN} + size="xs" + styles={{ + input: { + backgroundColor: "white", + color: "black", + marginLeft: 5, + width: "120px", + }, + }} + /> + ) : ( + + No loan account available + + )} + + + {loanAccounts.length > 0 ? ( + <> + + {Number(selectedLNData?.stAccountNo || 0)} + + + {showBalance + ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}` + : "****"} + + + + ) : ( + <> + + Apply for a loan account to get started + + + + )} + + + {/* Important Links Card */} + + + Quick Links + + + + + + + + + + ) : ( + + {/* Desktop Cards */} + {/* Deposit Account Card */} + + + + Deposit Account + {depositAccounts.length > 0 ? ( + ({ + data={loanAccounts.map((acc) => ({ value: acc.stAccountNo, - label: `${acc.stAccountType}- ${acc.stAccountNo}` + label: `${acc.stAccountType}- ${acc.stAccountNo}`, }))} value={selectedLN} // @ts-ignore @@ -194,12 +391,14 @@ export default function Home() { backgroundColor: "white", color: "black", marginLeft: 30, - width: 140 - } + width: 140, + }, }} /> ) : ( - No loan account available + + No loan account available + )} @@ -207,42 +406,60 @@ export default function Home() { <> {Number(selectedLNData?.stAccountNo || 0)} - {showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"} + {showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}` : "****"} - + ) : ( <> - Apply for a loan account to get started - + + Apply for a loan account to get started + + )} {/* Important Links Card */} - - Quick Links + + + Quick Links + - - - - + + + + -
-
+ )} + + {/* Notes Section */} + ** Book Balance includes uncleared effect. - ** Click on the "Show Balance"to display balance for the Deposit and Loan account. - ** Your Password will expire in {PassExpiryRemains} days. - + ** Click on the "Show Balance" to display balance for the Deposit and Loan account. + + ** Your Password will expire in {PassExpiryRemains} days. + -
-
+ + ); } - return null; } \ No newline at end of file diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 1e05f12..83f3e14 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -8,7 +8,7 @@ import { Providers } from '../providers'; import logo from '@/app/image/logo1.jpg'; import NextImage from 'next/image'; import { notifications } from '@mantine/notifications'; -import { useDisclosure } from '@mantine/hooks'; +import { useDisclosure, useMediaQuery } from '@mantine/hooks'; export default function RootLayout({ children }: { children: React.ReactNode }) { const router = useRouter(); @@ -16,7 +16,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) const [authorized, SetAuthorized] = useState(null); const [userLastLoginDetails, setUserLastLoginDetails] = useState(null); const [custname, setCustname] = useState(null); - + const isMobile = useMediaQuery("(max-width: 768px)"); const [opened, { open, close }] = useDisclosure(false); @@ -167,104 +167,84 @@ export default function RootLayout({ children }: { children: React.ReactNode }) -
+ + + {/* HEADER */} - ebanking - - THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - - Toll Free No : 1800-180-8008 - + {/* Logo */} + + ebanking + + + {/* Title & Phone */} + + + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + + Toll Free No : 1800-180-8008 + + -
- - + <Stack gap={isMobile ? 2 : 0} align={isMobile ? "flex-start" : "flex-start"}> + <Title order={isMobile ? 5 : 4} style={{ fontFamily: "inter", fontSize: isMobile ? "18px" : "22px" }}> Welcome, {custname ?? null} - + Last logged in at {userLastLoginDetails ? new Date(userLastLoginDetails).toLocaleString() : "N/A"} - + {navItems.map((item) => { const isActive = pathname.startsWith(item.href); const Icon = item.icon; return ( ); })} - {/* */} - + + - - Are you sure you want to logout? @@ -273,30 +253,31 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - + -
+ - + -
{children} -
+ - + + {/* FOOTER */} - + © 2025 The Kangra Central Co-Operative Bank -
+ diff --git a/src/app/(main)/settings/layout.tsx b/src/app/(main)/settings/layout.tsx index bc1b7bb..2b21fca 100644 --- a/src/app/(main)/settings/layout.tsx +++ b/src/app/(main)/settings/layout.tsx @@ -1,14 +1,19 @@ "use client"; -import { Divider, Stack, Text } from '@mantine/core'; +import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core'; import { usePathname } from 'next/navigation'; import Link from 'next/link'; import React, { useEffect, useState } from 'react'; import { useRouter } from "next/navigation"; +import { useMediaQuery } from '@mantine/hooks'; +import Image from "next/image"; +import logo from "@/app/image/logo1.jpg"; export default function Layout({ children }: { children: React.ReactNode }) { const [authorized, SetAuthorized] = useState(null); const router = useRouter(); const pathname = usePathname(); + const isMobile = useMediaQuery("(max-width: 768px)"); + const [drawerOpened, setDrawerOpened] = useState(false); const links = [ { label: "View Profile", href: "/settings" }, @@ -30,45 +35,143 @@ export default function Layout({ children }: { children: React.ReactNode }) { if (authorized) { return ( -
-
- - - Settings - - + + {/* Desktop Sidebar */} + {!isMobile && ( + + + + Settings + + - - {links.map(link => { - const isActive = pathname === link.href; - return ( - - {link.label} - - ); - })} - -
+ + {links.map((link) => { + const isActive = pathname === link.href; + return ( + + {link.label} + + ); + })} + + + )} -
+ {/* Mobile: Burger & Drawer */} + {isMobile && ( + <> + {/* Top header with burger and title */} + + setDrawerOpened(!drawerOpened)} + size="sm" + color="white" + /> + + Settings + + + + setDrawerOpened(false)} + padding="md" + size="75%" + overlayProps={{ color: "black", opacity: 0.55, blur: 3 }} + styles={{ + root: { + backgroundColor: "#e6f5ff", // soft background for drawer + }, + }} + > + {/* Logo and Drawer Header */} + + <> + KCCB Logo + + Settings + + + + + {/* Menu Items */} + + {links.map((link) => { + const isActive = pathname === link.href; + + return ( + + ); + })} + + + + )} + + + {/* Content Area */} + {children} -
-
+ + ); } } diff --git a/src/app/eMandate/login/Login.module.css b/src/app/eMandate/login/Login.module.css new file mode 100644 index 0000000..68faac2 --- /dev/null +++ b/src/app/eMandate/login/Login.module.css @@ -0,0 +1,89 @@ + +/* Header */ +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 100; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 1rem; + background: linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%); +} + +.header-text { + flex: 1; +} + +/* Desktop header text */ +.desktop-text { + color: white; +} + +.mobile-text { + color: white; + display: none; +} + +/* Movable scrolling text - desktop only */ +.desktop-scroll-text { + width: 100%; + overflow: hidden; + white-space: nowrap; + padding: 8px 0; +} + +.desktop-scroll-text span { + display: inline-block; + padding-left: 100%; + animation: scroll-left 60s linear infinite; + font-weight: bold; + color: #004d99; +} + +@keyframes scroll-left { + 0% { transform: translateX(0%); } + 100% { transform: translateX(-100%); } +} + +/* Main Login Section */ +.login-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + min-height: 75vh; + padding: 1rem; +} + +.login-image { + flex: 1 1 400px; + min-width: 300px; + height: 400px; + margin: 1rem; +} + +.login-card { + flex: 1 1 300px; + min-width: 280px; + margin: 1rem; +} + +/* Responsive - Mobile */ +@media (max-width: 768px) { + .desktop-text { display: none; } + .mobile-text { display: block; } + + .desktop-scroll-text { display: none; } + + .login-container { + flex-direction: column; + } + + .login-image { + height: 250px; + margin: 0.5rem 0; + } +} diff --git a/src/app/eMandate/login/page.tsx b/src/app/eMandate/login/page.tsx index f7cf676..ca3e101 100644 --- a/src/app/eMandate/login/page.tsx +++ b/src/app/eMandate/login/page.tsx @@ -8,6 +8,7 @@ import NextImage from "next/image"; import logo from '@/app/image/logo1.jpg'; import frontPage from '@/app/image/EMandate.jpg'; import { generateCaptcha } from '@/app/captcha'; +import styles from './Login.module.css'; export default function Login() { @@ -128,7 +129,6 @@ export default function Login() { else { router.push("/eMandate/mandate_page"); } - } else { regenerateCaptcha(); @@ -159,200 +159,21 @@ export default function Login() { {/* Main Screen */}
{/* Header */} - - {/* Logo */} - ebanking - {/* Bank name + address stacked */} - - - THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - - Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 - + + ebanking + + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + THE KANGRA CENTRAL + CO-OPERATIVE BANK LTD. - - {/* Logo */} - ebanking - - {/* Desktop: Title + Address */} - - - THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - - Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 - - - - {/* Mobile: only Logo + Bank Name */} - - - THE KANGRA CENTRAL - - - CO-OPERATIVE BANK LTD. - - - - - -
{/* Movable text */} {/* Header */} - + ebanking - - THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - - Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215 - - {/* - - - - */} + + {/* Desktop */} + + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + + {/* Mobile */} + + THE KANGRA CENTRAL + + + CO-OPERATIVE BANK LTD. + + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + +