Scribd
Upload
16 views3 pages

Os Lock Screen

Uploaded by

ashamisha234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views3 pages

Os Lock Screen

Uploaded by

ashamisha234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useState, useEffect } from 'react';

import { Lock } from 'lucide-react';

const XPINELockscreen = () => {


// Simplified states
const [bootPhase, setBootPhase] = useState('splash');
const [currentTime, setCurrentTime] = useState(new Date());
const [showPasswordInput, setShowPasswordInput] = useState(false);
const [password, setPassword] = useState('');
const [error, setError] = useState('');

// Screen dimensions state


const [screenDimensions, setScreenDimensions] = useState({
width: window.innerWidth,
height: window.innerHeight
});

// Handle screen resize


useEffect(() => {
const handleResize = () => {
setScreenDimensions({
width: window.innerWidth,
height: window.innerHeight
});
};

window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);

// Boot sequence effect


useEffect(() => {
const timer = setTimeout(() => {
setBootPhase('lockscreen');
}, 3000);
return () => clearTimeout(timer);
}, []);

// Clock update effect


useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);

// Keyboard handler effect


useEffect(() => {
const handleKeyPress = (e) => {
if (e.key === 'Enter' && !showPasswordInput) {
setShowPasswordInput(true);
}
if (e.key === 'Escape') {
setShowPasswordInput(false);
setPassword('');
setError('');
}
};
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
}, [showPasswordInput]);

// Password handler
const handlePasswordSubmit = (e) => {
e.preventDefault();
if (password === '1818') { // Hardcoded password
setShowPasswordInput(false);
setPassword('');
setError('');
console.log('System unlocked');
} else {
setError('Incorrect password');
setPassword('');
}
};

// Splash screen
if (bootPhase === 'splash') {
return (
<div
className="flex items-center justify-center bg-white"
style={{ width: '100vw', height: '100vh' }}
>
<h1 className="text-4xl md:text-6xl font-bold text-black">XPINE</h1>
</div>
);
}

// Main lockscreen
return (
<div
className="relative overflow-hidden"
style={{
width: '100vw',
height: '100vh',
backgroundImage: 'url(/beach-wallpaper.jpg)',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}}
>
{/* Background overlay */}
<div className="absolute inset-0 bg-black/10" />

{/* Clock */}


<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -
translate-y-1/2
text-white text-center w-full px-4 z-10">
<h1 className="text-6xl md:text-8xl lg:text-9xl font-light transition-all
drop-shadow-lg">
{currentTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-
digit' })}
</h1>
<p className="text-lg md:text-xl lg:text-2xl mt-2 transition-all drop-
shadow-lg">
{currentTime.toLocaleDateString([], {
weekday: 'long',
month: 'long',
day: 'numeric'
})}
</p>
</div>

{/* Lock icon and instruction */}


{!showPasswordInput && (
<div className="absolute bottom-16 left-1/2 transform -translate-x-1/2
text-white text-center transition-all z-10">
<Lock size={screenDimensions.width < 640 ? 24 : 32} className="mx-auto
mb-2" />
<p className="text-sm md:text-base drop-shadow-lg">Press Enter to
unlock</p>
</div>
)}

{/* Password input */}


{showPasswordInput && (
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2
translate-y-16
w-[90%] max-w-md backdrop-blur-lg bg-black/30 p-6 rounded-
lg z-10">
<form onSubmit={handlePasswordSubmit}>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-2 rounded bg-white/20 text-white
placeholder-white/50
outline-none text-center text-lg"
placeholder="Enter password..."
autoFocus
/>
{error && (
<p className="text-red-400 mt-2 text-sm text-center">{error}</p>
)}
</form>
</div>
)}
</div>
);
};

export default XPINELockscreen;

You might also like