import React, { useState, useEffect } from 'react';
import { User, Lock, Terminal, Cpu, ShieldCheck, Activity } from 'lucide-react';
export default function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [logMessages, setLogMessages] = useState([]);
const [time, setTime] = useState(new Date());
// Ceas în timp real
useEffect(() => {
const timer = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
// Simulare efect de scriere terminal
useEffect(() => {
const introText = [
"INITIALIZING SYSTEM...",
"LOADING CORE MODULES...",
"ESTABLISHING SECURE CONNECTION...",
"READY FOR AUTHENTICATION."
];
let delay = 0;
introText.forEach((text, index) => {
setTimeout(() => {
setLogMessages(prev => [...prev, text]);
}, delay);
delay += 800;
});
}, []);
const handleLogin = (e) => {
e.preventDefault();
if (!username || !password) return;
setIsLoading(true);
setLogMessages([]);
// Simulare proces de autentificare
const authSteps = [
"ENCRYPTING CREDENTIALS...",
"HANDSHAKE WITH MAINFRAME...",
"VERIFYING BIOMETRICS...",
"ACCESS GRANTED."
];
let delay = 0;
authSteps.forEach((step, index) => {
setTimeout(() => {
setLogMessages(prev => [...prev, step]);
if (index === authSteps.length - 1) {
setIsLoading(false);
setIsLoggedIn(true);
}
}, delay + 500);
delay += 1000;
});
};
if (isLoggedIn) {
return (
{/* Background Grid */}
);
}
return (
SYSTEM UNLOCKED
WELCOME BACK, OPERATOR {username.toUpperCase()}
{/* Background Elements */}
);
}
{/* Grid animat */}
{/* Scanline Effect Overlay */}
{/* Top Bar */}
NET: ONLINE
{time.toLocaleTimeString()}
{/* Decorative Corners */}
{/* Card Content */}
{/* Scanning light effect */}
{/* Log Console Output - Below Login Card */}
USER LOGIN
SECURE ACCESS TERMINAL
System Status: NORMAL
Encryption: 256-BIT
{logMessages.map((msg, idx) => (
[{new Date().toLocaleTimeString()}] {'>'} {msg}
))}
_