fix: Homepage design
wip :Integrate quick pay for own bank wip: Design account page as discussed
This commit is contained in:
@@ -93,6 +93,7 @@ export default function Login() {
|
||||
return (
|
||||
<Providers>
|
||||
<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",
|
||||
@@ -121,6 +122,7 @@ export default function Login() {
|
||||
</Text>
|
||||
</Box>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
{/* Movable text */}
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
@@ -157,7 +159,9 @@ export default function Login() {
|
||||
`}
|
||||
</style>
|
||||
</Box>
|
||||
<div style={{ display: "flex", height: "75vh", overflow: "hidden", position: "relative" }}>
|
||||
{/* Main */}
|
||||
<div style={{ display: "flex", height: "75vh", overflow: "hidden", position: "relative",
|
||||
background:'linear-gradient(to right, #02081eff, #0a3d91)' }}>
|
||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
|
||||
<Image
|
||||
fit="cover"
|
||||
@@ -167,120 +171,60 @@ export default function Login() {
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<Card
|
||||
shadow="lg"
|
||||
padding="xl"
|
||||
radius="md"
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: 0,
|
||||
height: "100%",
|
||||
boxShadow: "0 2px 10px rgba(228, 215, 215, 0.1)",
|
||||
// border:"1px solid black"
|
||||
}}
|
||||
>
|
||||
<Stack gap="xs" style={{ width: "100%", maxWidth: 480, marginTop: 0 }}>
|
||||
<Title order={6} style={{ marginLeft: 10, marginBottom: "8px" }}>
|
||||
<Text fs="italic">Welcome To KCC Bank</Text>
|
||||
<Text fw={700} style={{ fontSize: "18px", color: "#000066" }}>Internet Banking</Text>
|
||||
</Title>
|
||||
<Box
|
||||
style={{
|
||||
// width: 370,
|
||||
marginTop: 0,
|
||||
// paddingTop: 5,
|
||||
padding: "10px",
|
||||
border: "1px solid #e0e0d1",
|
||||
}}
|
||||
>
|
||||
<Flex justify="center" gap="md">
|
||||
<form onSubmit={handleLogin}>
|
||||
<TextInput
|
||||
size="md"
|
||||
label="User ID"
|
||||
placeholder="Enter your CIF No"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={CIF}
|
||||
onInput={(e) => {
|
||||
const input = e.currentTarget.value.replace(/\D/g, "");
|
||||
if (input.length <= 11) {
|
||||
SetCIF(input);
|
||||
}
|
||||
}}
|
||||
required
|
||||
error={error}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
size="md"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Group mt="xs" align="center" gap="xs" >
|
||||
<Box
|
||||
style={{
|
||||
// padding: "5px",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#fff",
|
||||
fontFamily: "'UnifrakturCook',cursive",
|
||||
// textDecoration: "line-through",
|
||||
fontSize: "16px",
|
||||
userSelect: "none",
|
||||
display: "flex",
|
||||
width: "30%"
|
||||
}}
|
||||
>
|
||||
{captcha}
|
||||
</Box>
|
||||
<Button variant="outline" size="xs" onClick={regenerateCaptcha}>
|
||||
Refresh
|
||||
</Button>
|
||||
</Group>
|
||||
<TextInput
|
||||
label="Enter CAPTCHA"
|
||||
size="md"
|
||||
placeholder="Enter above text"
|
||||
value={inputCaptcha}
|
||||
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md">
|
||||
{/* Login */}
|
||||
{isLogging ? "Logging...." : "Login"}
|
||||
</Button>
|
||||
</form>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
<Box style={{
|
||||
width: "100%",
|
||||
height: '50vh',
|
||||
textAlign: "left",
|
||||
marginTop: 10,
|
||||
display: "flex",
|
||||
// border: "1px solid blue"
|
||||
}}>
|
||||
<ClientCarousel />
|
||||
<Box style={{ width: "40%", textAlign: "center" }}>
|
||||
<Title order={2}>Security Notes :</Title>
|
||||
<br></br>
|
||||
<Text size="lg">When you Login,Your User Id and Password travels in an encrypted and highly secured mode .</Text>
|
||||
<br></br>
|
||||
<Text size="lg" fs="italic">For more information on Products and Services, Please Visit</Text>
|
||||
<Text c="blue" td="underline">http://www.kccb.in/</Text>
|
||||
<Box w={{ base: "100%", md: "50%" }} p="lg">
|
||||
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400,margin: "0 auto",height:'68vh'}}>
|
||||
<form onSubmit={handleLogin}>
|
||||
<TextInput
|
||||
label="User ID"
|
||||
placeholder="Enter your CIF No"
|
||||
value={CIF}
|
||||
onInput={(e) => {
|
||||
const input = e.currentTarget.value.replace(/\D/g, "");
|
||||
if (input.length <= 11) SetCIF(input);
|
||||
}}
|
||||
error={error}
|
||||
required
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
required
|
||||
mt="sm"
|
||||
/>
|
||||
<Group mt="sm" align="center">
|
||||
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
|
||||
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
|
||||
</Group>
|
||||
<TextInput
|
||||
label="Enter CAPTCHA"
|
||||
placeholder="Enter above text"
|
||||
value={inputCaptcha}
|
||||
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
|
||||
required
|
||||
mt="sm"
|
||||
/>
|
||||
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
|
||||
{isLogging ? "Logging..." : "Login"}
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
{/* Carousel and Notes */}
|
||||
<Flex direction={{ base: "column", md: "row" }} mt="lg" p="lg">
|
||||
<Box w={{ base: "100%", md: "60%" }}>
|
||||
<ClientCarousel />
|
||||
</Box>
|
||||
<Box w={{ base: "100%", md: "40%" }} p="md" style={{ textAlign: "center" }}>
|
||||
<Title order={2}>Security Notes :</Title>
|
||||
<Text mt="sm" size="md">When you Login, Your User Id and Password travels in an encrypted and highly secured mode.</Text>
|
||||
<Text mt="sm" fs="italic">For more information on Products and Services, Please Visit</Text>
|
||||
<Anchor> http://www.kccb.in/</Anchor>
|
||||
</Box>
|
||||
</Flex>
|
||||
{/* Footer */}
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user