tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: make screen responsive for mobile and browser.

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-10-07 12:46:04 +05:30
parent 649fc5acea
commit 72b0fa4378
12 changed files with 1060 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/login/page.tsx
View File

@@ -5,12 +5,14 @@ import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import styles from './page.module.css';
import logo from '@/app/image/logo1.jpg';
import frontPage from '@/app/image/ib_front_1.jpg';
import dynamic from 'next/dynamic';
import { generateCaptcha } from '@/app/captcha';
import { IconShieldLockFilled } from "@tabler/icons-react";
export default function Login() {
const router = useRouter();
const [CIF, SetCIF] = useState("");
@@ -313,54 +315,34 @@ export default function Login() {
{/* Main Screen */}
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */}
<Box
style={{
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
display: "flex",
justifyContent: "flex-start",
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
}}>
<Box className={styles.header}>
<Image
src={logo}
component={NextImage}
fit="contain"
alt="ebanking"
style={{ width: "100%", height: "auto", flexShrink: 0 }}
style={{ width: "60px", height: "auto" }}
/>
<Title ref={headerRef}
order={2}
style={{
fontFamily: 'Roboto',
position: 'absolute',
top: '30%',
left: '7%',
color: 'White',
transition: "opacity 0.5s ease-in-out",
}}
>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title>
<Text size="sm" c="white"
style={{
backgroundColor: '#1f1f14',
fontFamily: 'Roboto',
position: 'absolute',
top: '59%',
left: '72%',
color: 'white',
textShadow: '1px 1px 2px blue',
}}
>
Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215
</Text>
{/* <Box style={{ position: "absolute", right: "1rem", top: "50%", transform: 'translateY(-50%)' }}>
<Tooltip
label='Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215'
position="right"
withArrow>
<IconBuildingBank size={40} style={{ cursor: "pointer", color: "white" }} />
</Tooltip>
</Box> */}
<Box className={styles['header-text']}>
{/* Desktop */}
<Title className={styles['desktop-text']} ref={headerRef} order={2}>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title>
<Text className={styles['desktop-address']} size="xs">
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
</Text>
{/* Mobile */}
<Title className={styles['mobile-text']} order={5}>
THE KANGRA CENTRAL
</Title>
<Title className={styles['mobile-text']} order={5}>
CO-OPERATIVE BANK LTD.
</Title>
<Text className={styles['mobile-text']} size="xs">
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
</Text>
</Box>
</Box>
<div style={{ marginTop: '10px' }}>