wip: make screen responsive for mobile and browser.
This commit is contained in:
89
src/app/eMandate/login/Login.module.css
Normal file
89
src/app/eMandate/login/Login.module.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 */}
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||
{/* Header */}
|
||||
<Box
|
||||
component="header"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
zIndex: 100,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
padding: "0.5rem 1rem",
|
||||
background:
|
||||
"linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{
|
||||
width: "60px", // fixed height for logo
|
||||
height: "auto",
|
||||
marginRight: "0.75rem",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Bank name + address stacked */}
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Title
|
||||
order={4}
|
||||
style={{
|
||||
fontFamily: "Roboto",
|
||||
color: "white",
|
||||
fontSize: "clamp(14px, 2vw, 20px)", // auto resizes
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text
|
||||
size="xs"
|
||||
style={{
|
||||
// backgroundColor: "#1f1f14",
|
||||
fontFamily: "Roboto",
|
||||
padding: "2px 6px",
|
||||
borderRadius: "4px",
|
||||
color: "white",
|
||||
textShadow: "1px 1px 2px blue",
|
||||
fontSize: "clamp(10px, 1.5vw, 13px)", // responsive text
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
<Box className={styles.header}>
|
||||
<Image src={logo} component={NextImage} fit="contain" alt="ebanking" style={{ width: "60px", height: "auto" }} />
|
||||
<Box className={styles['header-text']}>
|
||||
<Title className={styles['desktop-text']} order={4}>THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.</Title>
|
||||
<Text className={styles['desktop-text']} size="xs">Head Office: Dharmshala, District Kangra (H.P), Pin: 176215</Text>
|
||||
<Title className={styles['mobile-text']} order={5}>THE KANGRA CENTRAL</Title>
|
||||
<Title className={styles['mobile-text']} order={5}>CO-OPERATIVE BANK LTD.</Title>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
component="header"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
zIndex: 100,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "0.5rem 1rem",
|
||||
background:
|
||||
"linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{
|
||||
width: "60px",
|
||||
height: "auto",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Desktop: Title + Address */}
|
||||
<Box
|
||||
className="desktop-header"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginLeft: "1rem",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Title
|
||||
order={4}
|
||||
style={{
|
||||
fontFamily: "Roboto",
|
||||
color: "white",
|
||||
fontSize: "clamp(14px, 2vw, 20px)",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text
|
||||
size="xs"
|
||||
style={{
|
||||
// backgroundColor: "#1f1f14",
|
||||
fontFamily: "Roboto",
|
||||
padding: "2px 6px",
|
||||
borderRadius: "4px",
|
||||
color: "white",
|
||||
textShadow: "1px 1px 2px blue",
|
||||
fontSize: "clamp(10px, 1.5vw, 13px)",
|
||||
}}
|
||||
>
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Mobile: only Logo + Bank Name */}
|
||||
<Box
|
||||
className="mobile-header"
|
||||
style={{
|
||||
display: "none",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
marginLeft: "0.75rem",
|
||||
}}
|
||||
>
|
||||
<Title
|
||||
order={5}
|
||||
style={{
|
||||
fontFamily: "Roboto",
|
||||
color: "white",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL
|
||||
</Title>
|
||||
<Title
|
||||
order={5}
|
||||
style={{
|
||||
fontFamily: "Roboto",
|
||||
color: "white",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
</Box>
|
||||
|
||||
<style jsx>{`
|
||||
@media (max-width: 768px) {
|
||||
.desktop-header {
|
||||
display: none;
|
||||
}
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media (min-width: 769px) {
|
||||
.desktop-header {
|
||||
display: flex;
|
||||
}
|
||||
.mobile-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</Box>
|
||||
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
{/* Movable text */}
|
||||
<Box
|
||||
className="desktop-scroll-text"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "0.5%",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "8px 0",
|
||||
}}
|
||||
className={styles['desktop-scroll-text']}
|
||||
>
|
||||
<Text
|
||||
component="span"
|
||||
|
||||
Reference in New Issue
Block a user