From 5070f36c8e2c844ffb71f783c8c42d60f1508c61 Mon Sep 17 00:00:00 2001
From: MHR81 <hosein81rahimi@gmail.com>
Date: Thu, 25 Dec 2025 11:33:25 +0330
Subject: [PATCH] fix begaii

---
 src/pages/Login/Login.jsx | 49 +++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
index 903bbb3..9de7c6c 100644
--- a/src/pages/Login/Login.jsx
+++ b/src/pages/Login/Login.jsx
@@ -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>