feat : add carousel in login page
feat : add disclaimer,policy in login page
This commit is contained in:
BIN
src/app/image/DICGC_image.jpg
Normal file
BIN
src/app/image/DICGC_image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
src/app/image/objective.jpg
Normal file
BIN
src/app/image/objective.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
98
src/app/login/clientCarousel.tsx
Normal file
98
src/app/login/clientCarousel.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import { Box, Image, ActionIcon } from '@mantine/core';
|
||||
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
|
||||
import { useRef } from 'react';
|
||||
import DICGC from '@/app/image/DICGC_image.jpg';
|
||||
import objective from '@/app/image/objective.jpg';
|
||||
import frontPage from '@/app/image/ib_front_page.jpg';
|
||||
|
||||
export default function CustomCarousel() {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const scrollBy = 300; // px per click
|
||||
|
||||
const scrollLeft = () => {
|
||||
scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const scrollRight = () => {
|
||||
scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const images = [DICGC, objective, frontPage];
|
||||
|
||||
return (
|
||||
<Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
|
||||
{/* Scrollable container */}
|
||||
<Box
|
||||
ref={scrollRef}
|
||||
style={{
|
||||
display: 'flex',
|
||||
overflowX: 'auto',
|
||||
scrollSnapType: 'x mandatory',
|
||||
gap: '1rem',
|
||||
padding: '1rem',
|
||||
scrollBehavior: 'smooth',
|
||||
}}
|
||||
>
|
||||
{images.map((img, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
style={{
|
||||
flex: '0 0 100%',
|
||||
scrollSnapAlign: 'start',
|
||||
height: '250px',
|
||||
minWidth: '100%',
|
||||
maxWidth: '100%',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#f2f2f2',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={img.src}
|
||||
alt={`Slide ${i + 1}`}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* Left Scroll Button */}
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="blue"
|
||||
onClick={scrollLeft}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '10px',
|
||||
transform: 'translateY(-50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<IconChevronLeft size={24} />
|
||||
</ActionIcon>
|
||||
|
||||
{/* Right Scroll Button */}
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="blue"
|
||||
onClick={scrollRight}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
right: '10px',
|
||||
transform: 'translateY(-50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<IconChevronRight size={24} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,3 +27,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-wrapper {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gradient-control {
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.6;
|
||||
color: white;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* First control is left */
|
||||
.gradient-control:first-of-type {
|
||||
left: 0;
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
|
||||
}
|
||||
|
||||
/* Last control is right */
|
||||
.gradient-control:last-of-type {
|
||||
right: 0;
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
|
||||
}
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {Text,Button,TextInput,PasswordInput,Title,Card,Group,Flex,Box,Image,Anchor,Stack} from "@mantine/core";
|
||||
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import myImage from '@/app/image/ebanking.jpg';
|
||||
import frontPage from '@/app/image/ib_front_page.jpg';
|
||||
import NextImage from "next/image";
|
||||
import { Carousel } from '@mantine/carousel';
|
||||
import { Providers } from "@/app/providers";
|
||||
import { useRouter } from "next/navigation";
|
||||
import NextImage from "next/image";
|
||||
import myImage from '@/app/image/ebanking.jpg';
|
||||
import frontPage from '@/app/image/ib_front_page.jpg';
|
||||
import DICGC from '@/app/image/DICGC_image.jpg';
|
||||
import objective from '@/app/image/objective.jpg';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
function generateCaptcha(length = 6) {
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
@@ -22,6 +24,11 @@ export default function Login() {
|
||||
const [psw, SetPsw] = useState("");
|
||||
const [captcha, setCaptcha] = useState("");
|
||||
const [inputCaptcha, setInputCaptcha] = useState("");
|
||||
const ClientCarousel =dynamic(() => import ('./clientCarousel'),{ssr:false});
|
||||
// const [isClient,SetIsClient] =useState(false);
|
||||
|
||||
|
||||
// useEffect(()=> SetIsClient(true),[]);
|
||||
|
||||
useEffect(() => {
|
||||
setCaptcha(generateCaptcha());
|
||||
@@ -72,8 +79,8 @@ export default function Login() {
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100vh", paddingTop: "5%" }}>
|
||||
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0 }}>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
@@ -83,174 +90,182 @@ export default function Login() {
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "10%",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "8px 0",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
component="span"
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Box
|
||||
style={{
|
||||
display: "inline-block",
|
||||
paddingLeft: "100%",
|
||||
animation: "scroll-left 60s linear infinite",
|
||||
fontWeight: "bold",
|
||||
color: "#004d99",
|
||||
width: "100%",
|
||||
height: "0.5%",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "8px 0",
|
||||
}}
|
||||
>
|
||||
⚠️ Always login to our Net Banking site directly or through Banks website.
|
||||
⚠️ Do not disclose your UserId and Password to any third party and keep Your UserId and Password strictly confidential.
|
||||
⚠️ KCC Bank never asks for UserId,Passwords and Pins through email or phone.
|
||||
⚠️ Be ware of Phishing mails with links to fake bank's websites asking for personal information are in circulation.
|
||||
⚠️ Please DO NOT Click on the links given in the emails asking for personal details like bank account number, userID and password.
|
||||
⚠️ If you had shard your UserId and Password through such mails or links, please change your Password immediately.
|
||||
⚠️ Inform the Bank/branch in which your account is maintained for resetting your password.
|
||||
</Text>
|
||||
<style>
|
||||
{`
|
||||
<Text
|
||||
component="span"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
paddingLeft: "100%",
|
||||
animation: "scroll-left 60s linear infinite",
|
||||
fontWeight: "bold",
|
||||
color: "#004d99",
|
||||
}}
|
||||
>
|
||||
⚠️ Always login to our Net Banking site directly or through Banks website.
|
||||
⚠️ Do not disclose your UserId and Password to any third party and keep Your UserId and Password strictly confidential.
|
||||
⚠️ KCC Bank never asks for UserId,Passwords and Pins through email or phone.
|
||||
⚠️ Be ware of Phishing mails with links to fake bank's websites asking for personal information are in circulation.
|
||||
⚠️ Please DO NOT Click on the links given in the emails asking for personal details like bank account number, userID and password.
|
||||
⚠️ If you had shard your UserId and Password through such mails or links, please change your Password immediately.
|
||||
⚠️ Inform the Bank/branch in which your account is maintained for resetting your password.
|
||||
</Text>
|
||||
<style>
|
||||
{`
|
||||
@keyframes scroll-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</Box>
|
||||
|
||||
<div style={{ display: "flex", height: "70vh" }}>
|
||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex" }}>
|
||||
<Image
|
||||
fit="cover"
|
||||
src={frontPage}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#c1e0f0",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
shadow="lg"
|
||||
padding="xl"
|
||||
radius="md"
|
||||
</style>
|
||||
</Box>
|
||||
<div style={{ display: "flex", height: "70vh", overflow: "hidden", position: "relative" }}>
|
||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
|
||||
<Image
|
||||
fit="cover"
|
||||
src={frontPage}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 480,
|
||||
height: 380,
|
||||
marginTop: 0,
|
||||
paddingTop: 5,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
|
||||
// border:"1px solid black"
|
||||
flex: 1,
|
||||
backgroundColor: "#c1e0f0",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%"
|
||||
}}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Title order={6} style={{ marginLeft: 10 }}>
|
||||
<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="xs"
|
||||
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="xs"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Group >
|
||||
<Box
|
||||
style={{
|
||||
padding: "5px 5px",
|
||||
backgroundColor: "#ffffff",
|
||||
fontFamily: "'UnifrakturCook',cursive",
|
||||
textDecoration: "line-through",
|
||||
userSelect: "none",
|
||||
<Card
|
||||
shadow="lg"
|
||||
padding="xl"
|
||||
radius="md"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: 480,
|
||||
height: 380,
|
||||
marginTop: 0,
|
||||
paddingTop: 5,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 2px 10px rgba(228, 215, 215, 0.1)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Title order={6} style={{ marginLeft: 10 }}>
|
||||
<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="xs"
|
||||
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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{captcha}
|
||||
</Box>
|
||||
<Button variant="outline" size="xs" onClick={regenerateCaptcha}>
|
||||
Refresh
|
||||
required
|
||||
error={error}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
size="xs"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Group >
|
||||
<Box
|
||||
style={{
|
||||
padding: "5px 5px",
|
||||
backgroundColor: "#ffffff",
|
||||
fontFamily: "'UnifrakturCook',cursive",
|
||||
textDecoration: "line-through",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{captcha}
|
||||
</Box>
|
||||
<Button variant="outline" size="xs" onClick={regenerateCaptcha}>
|
||||
Refresh
|
||||
</Button>
|
||||
</Group>
|
||||
<TextInput
|
||||
label="Enter CAPTCHA"
|
||||
size="xs"
|
||||
placeholder="Enter above text"
|
||||
value={inputCaptcha}
|
||||
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" fullWidth variant="filled" mt="md">
|
||||
Login
|
||||
</Button>
|
||||
</Group>
|
||||
<TextInput
|
||||
label="Enter CAPTCHA"
|
||||
size="xs"
|
||||
placeholder="Enter above text"
|
||||
value={inputCaptcha}
|
||||
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" fullWidth variant="filled" mt="md">
|
||||
Login
|
||||
</Button>
|
||||
</form>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</form>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
<Box style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. |{" "}
|
||||
<Anchor href="document/disclaimer.pdf" target="_blank" rel="noopener noreferrer">Disclaimer</Anchor> |{" "}
|
||||
<Anchor href="document/privacy_policy.pdf" target="_blank" rel="noopener noreferrer">Privacy Policy</Anchor> |{" "}
|
||||
<Anchor href="document/phishing.pdf" target="_blank" rel="noopener noreferrer">Phishing</Anchor> |{" "}
|
||||
<Anchor href="document/security_tips.pdf" target="_blank" rel="noopener noreferrer">Security Tips</Anchor>
|
||||
</Text>
|
||||
</Box>
|
||||
height: '60vh',
|
||||
textAlign: "left",
|
||||
marginTop:0,
|
||||
}}>
|
||||
<ClientCarousel/>
|
||||
</Box>
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. |{" "}
|
||||
<Anchor href="document/disclaimer.pdf" target="_blank" rel="noopener noreferrer">Disclaimer</Anchor> |{" "}
|
||||
<Anchor href="document/privacy_policy.pdf" target="_blank" rel="noopener noreferrer">Privacy Policy</Anchor> |{" "}
|
||||
<Anchor href="document/phishing.pdf" target="_blank" rel="noopener noreferrer">Phishing</Anchor> |{" "}
|
||||
<Anchor href="document/security_tips.pdf" target="_blank" rel="noopener noreferrer">Security Tips</Anchor>
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user