fix begaii
This commit is contained in:
parent
c2ef1976e3
commit
5070f36c8e
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { FiLock } from "react-icons/fi";
|
||||
import { FaRegUser } from "react-icons/fa6";
|
||||
|
||||
// Assets
|
||||
import Loginpic from "../../assets/image/loginpic.jpg";
|
||||
import Loginpic from "../../../src/assets/image/loginpic.jpg";
|
||||
import LogoDM from "../../assets/icons/LogoDM.svg";
|
||||
|
||||
// Redux
|
||||
|
|
@ -24,6 +24,16 @@ export default function Login() {
|
|||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
// Handle Login
|
||||
const handleLogin = async (e) => {
|
||||
|
|
@ -92,8 +102,17 @@ export default function Login() {
|
|||
{/* Main Content */}
|
||||
<div className="flex min-h-screen pt-20">
|
||||
{/* Left Side - Login Form */}
|
||||
<div className="w-full md:w-1/2 flex items-start justify-center md:justify-start bg-[#f5f0e8] px-4 md:px-12 lg:px-24 py-8 md:py-16">
|
||||
<div className="w-full max-w-md">
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: isMobile ? `url(${Loginpic})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundAttachment: 'fixed'
|
||||
}}
|
||||
className="w-full md:w-1/2 flex items-start justify-center md:justify-start md:bg-[#f5f0e8] px-4 md:px-12 lg:px-24 py-8 md:py-16 relative">
|
||||
{/* Dark Overlay */}
|
||||
<div className="absolute inset-0 bg-black/10 backdrop-blur-[1px] md:bg-transparent"></div>
|
||||
<div className="w-full max-w-md relative z-10">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-500 mb-8">
|
||||
<span>ورود</span>
|
||||
|
|
@ -103,8 +122,8 @@ export default function Login() {
|
|||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-[#402E32] mb-2">ورود ادمین</h1>
|
||||
<p className="text-sm md:text-base text-gray-700">دسترسی ویژه برای مدیریت و گزارشها</p>
|
||||
<h1 className="text-2xl md:text-3xl font-bold mb-2 text-white md:text-[#402E32]">ورود ادمین</h1>
|
||||
<p className="text-sm md:text-base md:text-gray-700 text-white/80">دسترسی ویژه برای مدیریت و گزارشها</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
|
|
@ -118,14 +137,14 @@ export default function Login() {
|
|||
|
||||
{/* Username Field */}
|
||||
<div className="relative">
|
||||
<label className="absolute -top-2.5 right-4 bg-[#f5f0e8] px-2 text-sm text-gray-600">نام کاربری</label>
|
||||
<div className="relative">
|
||||
<label className="md:absolute -top-2.5 right-4 text-[#f5f0e8] md:text-[#402E32] md:bg-[#f5f0e8] z-50 px-1 text-sm">نام کاربری</label>
|
||||
<div className="relative mt-2">
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
placeholder="userName"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 bg-[#f5f0e8] border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
||||
dir="ltr"
|
||||
required
|
||||
/>
|
||||
|
|
@ -135,14 +154,14 @@ export default function Login() {
|
|||
|
||||
{/* Password Field */}
|
||||
<div className="relative">
|
||||
<label className="absolute -top-2.5 right-4 bg-[#f5f0e8] px-2 text-sm text-gray-600">رمز عبور</label>
|
||||
<div className="relative">
|
||||
<label className="md:absolute -top-2.5 right-4 z-50 md:bg-[#f5f0e8] md:text-[#402E32] px-1 text-sm text-[#f5f0e8]">رمز عبور</label>
|
||||
<div className="relative mt-2">
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="password"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 bg-[#f5f0e8] border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
||||
dir="ltr"
|
||||
required
|
||||
/>
|
||||
|
|
@ -152,7 +171,7 @@ export default function Login() {
|
|||
|
||||
{/* Forgot Password */}
|
||||
<div className="text-right">
|
||||
<a href="#" className="text-sm text-gray-500 hover:text-[#7f4629] transition-colors">
|
||||
<a href="#" className="text-sm text-[#f5f0e8] hover:text-[#7f4629] transition-colors">
|
||||
فراموشی رمز عبور؟
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -170,8 +189,8 @@ export default function Login() {
|
|||
</div>
|
||||
|
||||
{/* Right Side - Image (Hidden on Mobile) */}
|
||||
<div className="hidden md:block w-1/2 relative overflow-hidden">
|
||||
<img src={Loginpic} alt="Coffee workspace" className="w-full h-full object-cover" />
|
||||
<div className="hidden md:block w-1/2 h-[calc(100vh-5rem)] relative overflow-hidden">
|
||||
<img src={Loginpic} alt="Coffee workspace" className="w-full h-full object-cover " />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue