complete overall implementation.

This commit is contained in:
2026-05-13 12:54:38 +05:30
parent 64a41be96b
commit 6ab819e74f
19 changed files with 6580 additions and 690 deletions
+51 -53
View File
@@ -140,7 +140,7 @@ export const FleetLogin = () => {
};
return (
<div className="fleet-login-container" style={{ display: 'flex', minHeight: '100vh', width: '100vw', backgroundColor: '#020617', fontFamily: "'Outfit', sans-serif", overflow: 'hidden' }}>
<div className="fleet-login-container" style={{ display: 'flex', minHeight: '100vh', width: '100vw', backgroundColor: '#F8FAFC', fontFamily: "'Outfit', sans-serif", overflow: 'hidden' }}>
{/* LEFT SIDE - IMAGE & TACTICAL HUD */}
<div className="fleet-login-left" style={{
@@ -150,7 +150,7 @@ export const FleetLogin = () => {
flexDirection: 'column',
justifyContent: 'space-between',
padding: '60px',
borderRight: '1px solid rgba(34, 211, 238, 0.2)'
borderRight: '1px solid rgba(6, 182, 212, 0.15)'
}}>
{/* Background Image */}
<div style={{
@@ -159,22 +159,22 @@ export const FleetLogin = () => {
backgroundImage: 'url("https://images.unsplash.com/photo-1587582423116-ec07293f0395?q=80&w=2070&auto=format&fit=crop")',
backgroundSize: 'cover',
backgroundPosition: 'center',
filter: 'grayscale(30%) contrast(120%)'
filter: 'grayscale(20%) contrast(110%)'
}} />
{/* Gradients to blend image with the tactical theme */}
<div style={{
position: 'absolute',
inset: 0,
background: 'linear-gradient(to right, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.6) 40%, rgba(2, 6, 23, 0.9) 100%)'
background: 'linear-gradient(to right, rgba(248, 250, 252, 0.95) 0%, rgba(248, 250, 252, 0.6) 40%, rgba(248, 250, 252, 0.95) 100%)'
}} />
<div style={{
position: 'absolute',
inset: 0,
background: 'radial-gradient(circle at 30% 50%, transparent 0%, rgba(2, 6, 23, 0.8) 100%)'
background: 'radial-gradient(circle at 30% 50%, transparent 0%, rgba(248, 250, 252, 0.9) 100%)'
}} />
{/* Decorative Grid & Radar (HUD elements) */}
<div style={{ position: 'absolute', inset: 0, opacity: 0.15, backgroundImage: 'linear-gradient(rgba(34, 211, 238, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.2) 1px, transparent 1px)', backgroundSize: '40px 40px', pointerEvents: 'none' }} />
<div style={{ position: 'absolute', inset: 0, opacity: 0.12, backgroundImage: 'linear-gradient(rgba(6, 182, 212, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.2) 1px, transparent 1px)', backgroundSize: '40px 40px', pointerEvents: 'none' }} />
{/* Content Top */}
<div style={{ position: 'relative', zIndex: 10 }}>
@@ -184,12 +184,12 @@ export const FleetLogin = () => {
transition={{ duration: 0.8 }}
style={{ display: 'flex', alignItems: 'center', gap: '16px' }}
>
<div style={{ padding: '12px', background: 'rgba(34, 211, 238, 0.1)', border: '1px solid #22d3ee', borderRadius: '12px', boxShadow: '0 0 20px rgba(34, 211, 238, 0.2)' }}>
<Truck size={32} color="#22d3ee" />
<div style={{ padding: '12px', background: 'rgba(6, 182, 212, 0.08)', border: '1px solid #06b6d4', borderRadius: '12px', boxShadow: '0 4px 20px rgba(6, 182, 212, 0.15)' }}>
<Truck size={32} color="#06b6d4" />
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<span style={{ fontSize: '28px', fontWeight: 900, color: '#fff', letterSpacing: '2px' }}>TELE_EMS</span>
<span style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', letterSpacing: '4px' }}>FLEET_OPERATOR</span>
<span style={{ fontSize: '28px', fontWeight: 900, color: '#0F172A', letterSpacing: '2px' }}>TELE_EMS</span>
<span style={{ fontSize: '12px', fontWeight: 700, color: '#06b6d4', letterSpacing: '4px' }}>FLEET_OPERATOR</span>
</div>
</motion.div>
</div>
@@ -200,16 +200,16 @@ export const FleetLogin = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
style={{ fontSize: '56px', fontWeight: 900, lineHeight: 1.1, color: '#fff', marginBottom: '24px', letterSpacing: '-1px' }}
style={{ fontSize: '56px', fontWeight: 900, lineHeight: 1.1, color: '#0F172A', marginBottom: '24px', letterSpacing: '-1px' }}
>
Command The Fleet.<br/>
<span style={{ color: '#22d3ee', textShadow: '0 0 30px rgba(34, 211, 238, 0.4)' }}>Save Lives Faster.</span>
<span style={{ color: '#06b6d4', textShadow: '0 0 30px rgba(6, 182, 212, 0.2)' }}>Save Lives Faster.</span>
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.4 }}
style={{ fontSize: '18px', color: '#94a3b8', lineHeight: 1.6, fontWeight: 500 }}
style={{ fontSize: '18px', color: '#475569', lineHeight: 1.6, fontWeight: 500 }}
>
Access real-time telemetry, manage dispatch routes, and monitor critical resources from a single, secure tactical terminal.
</motion.p>
@@ -220,13 +220,13 @@ export const FleetLogin = () => {
transition={{ duration: 0.8, delay: 0.6 }}
style={{ display: 'flex', gap: '24px', marginTop: '40px' }}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#22d3ee', fontSize: '14px', fontWeight: 700 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#06b6d4', fontSize: '14px', fontWeight: 700 }}>
<Activity size={18} /> REAL-TIME SYNC
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#22d3ee', fontSize: '14px', fontWeight: 700 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#06b6d4', fontSize: '14px', fontWeight: 700 }}>
<MapPin size={18} /> GPS TRACKING
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#22d3ee', fontSize: '14px', fontWeight: 700 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#06b6d4', fontSize: '14px', fontWeight: 700 }}>
<ShieldCheck size={18} /> ENCRYPTED
</div>
</motion.div>
@@ -242,11 +242,11 @@ export const FleetLogin = () => {
alignItems: 'center',
justifyContent: 'center',
padding: '40px',
background: '#0f172a',
boxShadow: '-20px 0 50px rgba(0,0,0,0.5)'
background: '#FFFFFF',
boxShadow: '-10px 0 50px rgba(15, 23, 42, 0.04), -1px 0 0 rgba(15, 23, 42, 0.05)'
}}>
{/* Subtle background glow */}
<div style={{ position: 'absolute', top: '20%', right: '-10%', width: '300px', height: '300px', background: 'rgba(34, 211, 238, 0.05)', filter: 'blur(100px)', borderRadius: '50%', pointerEvents: 'none' }} />
<div style={{ position: 'absolute', top: '20%', right: '-10%', width: '300px', height: '300px', background: 'rgba(6, 182, 212, 0.03)', filter: 'blur(100px)', borderRadius: '50%', pointerEvents: 'none' }} />
<motion.div
key={loginStep}
@@ -257,10 +257,10 @@ export const FleetLogin = () => {
style={{ width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '32px', zIndex: 10 }}
>
<div style={{ textAlign: 'center' }}>
<h2 style={{ fontSize: '28px', fontWeight: 800, color: '#fff', margin: '0 0 8px 0', letterSpacing: '1px' }}>
<h2 style={{ fontSize: '28px', fontWeight: 800, color: '#0F172A', margin: '0 0 8px 0', letterSpacing: '1px' }}>
{loginStep === 'login' ? 'TERMINAL ACCESS' : 'MFA REQUIRED'}
</h2>
<p style={{ color: '#22d3ee', fontSize: '13px', fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', margin: 0, opacity: 0.8 }}>
<p style={{ color: '#06b6d4', fontSize: '13px', fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', margin: 0, opacity: 0.9 }}>
{loginStep === 'login' ? 'Sector: Dispatch • Active Node: CS-88' : 'Identity Verification'}
</p>
</div>
@@ -268,9 +268,9 @@ export const FleetLogin = () => {
{loginStep === 'login' ? (
<form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<label style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.8 }}>Operator ID</label>
<label style={{ fontSize: '12px', fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.9 }}>Operator ID</label>
<div style={{ position: 'relative' }}>
<User size={18} color="#22d3ee" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.8 }} />
<User size={18} color="#06b6d4" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.9 }} />
<input
type="text"
placeholder="ID_ENTRY"
@@ -279,20 +279,20 @@ export const FleetLogin = () => {
required
style={{
width: '100%', padding: '16px 16px 16px 48px',
background: 'rgba(2, 6, 23, 0.6)', border: '1px solid rgba(34, 211, 238, 0.3)',
borderRadius: '12px', color: '#fff', fontSize: '15px', fontWeight: 500,
background: 'rgba(15, 23, 42, 0.03)', border: '1px solid rgba(15, 23, 42, 0.1)',
borderRadius: '12px', color: '#0F172A', fontSize: '15px', fontWeight: 500,
outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif"
}}
onFocus={(e) => e.target.style.borderColor = '#22d3ee'}
onBlur={(e) => e.target.style.borderColor = 'rgba(34, 211, 238, 0.3)'}
onFocus={(e) => e.target.style.borderColor = '#06b6d4'}
onBlur={(e) => e.target.style.borderColor = 'rgba(15, 23, 42, 0.1)'}
/>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<label style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.8 }}>Command Key</label>
<label style={{ fontSize: '12px', fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.9 }}>Command Key</label>
<div style={{ position: 'relative' }}>
<Lock size={18} color="#22d3ee" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.8 }} />
<Lock size={18} color="#06b6d4" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.9 }} />
<input
type={showPassword ? "text" : "password"}
placeholder="KEY_REQUIRED"
@@ -301,14 +301,14 @@ export const FleetLogin = () => {
required
style={{
width: '100%', padding: '16px 48px 16px 48px',
background: 'rgba(2, 6, 23, 0.6)', border: '1px solid rgba(34, 211, 238, 0.3)',
borderRadius: '12px', color: '#fff', fontSize: '15px', fontWeight: 500,
background: 'rgba(15, 23, 42, 0.03)', border: '1px solid rgba(15, 23, 42, 0.1)',
borderRadius: '12px', color: '#0F172A', fontSize: '15px', fontWeight: 500,
outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif", letterSpacing: showPassword ? 'normal' : '3px'
}}
onFocus={(e) => e.target.style.borderColor = '#22d3ee'}
onBlur={(e) => e.target.style.borderColor = 'rgba(34, 211, 238, 0.3)'}
onFocus={(e) => e.target.style.borderColor = '#06b6d4'}
onBlur={(e) => e.target.style.borderColor = 'rgba(15, 23, 42, 0.1)'}
/>
<button type="button" onClick={() => setShowPassword(!showPassword)} style={{ position: 'absolute', right: '16px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: '#22d3ee', padding: 0 }}>
<button type="button" onClick={() => setShowPassword(!showPassword)} style={{ position: 'absolute', right: '16px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: '#64748B', padding: 0 }}>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
@@ -318,14 +318,14 @@ export const FleetLogin = () => {
type="submit"
disabled={isLoading}
style={{
marginTop: '12px', padding: '16px', background: '#22d3ee', color: '#020617',
marginTop: '12px', padding: '16px', background: '#06b6d4', color: '#FFFFFF',
border: 'none', borderRadius: '12px', fontSize: '15px', fontWeight: 800, letterSpacing: '1px',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
cursor: isLoading ? 'not-allowed' : 'pointer', transition: 'all 0.3s',
boxShadow: '0 10px 25px rgba(34, 211, 238, 0.3)'
boxShadow: '0 8px 24px rgba(6, 182, 212, 0.25)'
}}
onMouseOver={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 15px 35px rgba(34, 211, 238, 0.4)'; } }}
onMouseOut={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 10px 25px rgba(34, 211, 238, 0.3)'; } }}
onMouseOver={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(6, 182, 212, 0.35)'; } }}
onMouseOut={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(6, 182, 212, 0.25)'; } }}
>
{isLoading ? (
<Cpu className="spin" size={20} />
@@ -340,9 +340,9 @@ export const FleetLogin = () => {
) : (
<form onSubmit={handleMfaVerify} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<label style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.8 }}>TOTP Authorization</label>
<label style={{ fontSize: '12px', fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.9 }}>TOTP Authorization</label>
<div style={{ position: 'relative' }}>
<KeyRound size={18} color="#22d3ee" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.8 }} />
<KeyRound size={18} color="#06b6d4" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.9 }} />
<input
type="text"
placeholder="000 000"
@@ -352,12 +352,12 @@ export const FleetLogin = () => {
required
style={{
width: '100%', padding: '16px 16px 16px 48px',
background: 'rgba(2, 6, 23, 0.6)', border: '1px solid rgba(34, 211, 238, 0.3)',
borderRadius: '12px', color: '#fff', fontSize: '20px', fontWeight: 600, letterSpacing: '4px', textAlign: 'center',
background: 'rgba(15, 23, 42, 0.03)', border: '1px solid rgba(15, 23, 42, 0.1)',
borderRadius: '12px', color: '#0F172A', fontSize: '20px', fontWeight: 600, letterSpacing: '4px', textAlign: 'center',
outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif"
}}
onFocus={(e) => e.target.style.borderColor = '#22d3ee'}
onBlur={(e) => e.target.style.borderColor = 'rgba(34, 211, 238, 0.3)'}
onFocus={(e) => e.target.style.borderColor = '#06b6d4'}
onBlur={(e) => e.target.style.borderColor = 'rgba(15, 23, 42, 0.1)'}
/>
</div>
</div>
@@ -366,11 +366,11 @@ export const FleetLogin = () => {
type="submit"
disabled={isLoading}
style={{
marginTop: '12px', padding: '16px', background: '#22d3ee', color: '#020617',
marginTop: '12px', padding: '16px', background: '#06b6d4', color: '#FFFFFF',
border: 'none', borderRadius: '12px', fontSize: '15px', fontWeight: 800, letterSpacing: '1px',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
cursor: isLoading ? 'not-allowed' : 'pointer', transition: 'all 0.3s',
boxShadow: '0 10px 25px rgba(34, 211, 238, 0.3)'
boxShadow: '0 8px 24px rgba(6, 182, 212, 0.25)'
}}
>
{isLoading ? (
@@ -393,7 +393,7 @@ export const FleetLogin = () => {
exit={{ opacity: 0, height: 0 }}
style={{ overflow: 'hidden' }}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '14px', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)', borderRadius: '10px', color: '#ef4444', fontSize: '13px', fontWeight: 600, marginTop: '8px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '14px', background: 'rgba(239, 68, 68, 0.06)', border: '1px solid rgba(239, 68, 68, 0.2)', borderRadius: '10px', color: '#ef4444', fontSize: '13px', fontWeight: 600, marginTop: '8px' }}>
<ShieldAlert size={16} />
<span>{showError}</span>
</div>
@@ -401,10 +401,8 @@ export const FleetLogin = () => {
)}
</AnimatePresence>
<div style={{ marginTop: '20px', borderTop: '1px solid rgba(34, 211, 238, 0.1)', paddingTop: '24px', textAlign: 'center' }}>
<NavLink to="/login" style={{ color: '#94a3b8', textDecoration: 'none', fontSize: '13px', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '8px', transition: 'color 0.2s' }} onMouseOver={(e) => e.currentTarget.style.color = '#22d3ee'} onMouseOut={(e) => e.currentTarget.style.color = '#94a3b8'}>
<div style={{ marginTop: '20px', borderTop: '1px solid rgba(6, 182, 212, 0.1)', paddingTop: '24px', textAlign: 'center' }}>
<NavLink to="/login" style={{ color: '#64748B', textDecoration: 'none', fontSize: '13px', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '8px', transition: 'color 0.2s' }} onMouseOver={(e) => e.currentTarget.style.color = '#06b6d4'} onMouseOut={(e) => e.currentTarget.style.color = '#64748B'}>
<ArrowRight size={14} style={{ transform: 'rotate(180deg)' }} /> RETURN TO STANDARD PORTAL
</NavLink>
</div>
@@ -424,8 +422,8 @@ export const FleetLogin = () => {
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px #020617 inset !important;
-webkit-text-fill-color: white !important;
-webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
-webkit-text-fill-color: #0f172a !important;
transition: background-color 5000s ease-in-out 0s;
}
@media (max-width: 900px) {