 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/private_html/src/pages/ |
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import {
Shield,
AlertTriangle,
Lock,
UserX,
ArrowLeft,
Home,
Mail,
Phone,
Eye,
EyeOff,
} from 'lucide-react';
import type { NextPage } from 'next';
const UnauthorizedPage: NextPage = () => {
const router = useRouter();
const [showDetails, setShowDetails] = useState(false);
const [attemptCount, setAttemptCount] = useState(0);
const [isRecording, setIsRecording] = useState(false);
const [securityId, setSecurityId] = useState('000000');
useEffect(() => {
// Generate security ID on client side only
setSecurityId(Math.floor(Math.random() * 1000000).toString().padStart(6, '0'));
// Simulate security monitoring
const interval = setInterval(() => {
setIsRecording(prev => !prev);
}, 2000);
// Get attempt count from localStorage
const attempts = localStorage.getItem('unauthorized_attempts') || '0';
setAttemptCount(parseInt(attempts));
localStorage.setItem('unauthorized_attempts', (parseInt(attempts) + 1).toString());
return () => clearInterval(interval);
}, []);
const handleGoBack = () => {
router.back();
};
const handleGoHome = () => {
router.push('/');
};
return (
<LayoutWithSidebar>
<div className="min-h-screen bg-gradient-to-br from-red-900 via-black to-red-800 relative overflow-hidden">
{/* Animated background elements */}
<div className="absolute inset-0">
<div className="absolute top-10 left-10 w-2 h-2 bg-red-500 rounded-full animate-pulse" />
<div className="absolute top-20 right-20 w-1 h-1 bg-red-400 rounded-full animate-ping" />
<div className="absolute bottom-20 left-1/4 w-1 h-1 bg-red-300 rounded-full animate-pulse" />
<div className="absolute bottom-10 right-1/3 w-2 h-2 bg-red-600 rounded-full animate-ping" />
</div>
{/* Security grid overlay */}
<div className="absolute inset-0 opacity-10">
<div className="grid grid-cols-20 grid-rows-20 h-full">
{Array.from({ length: 400 }).map((_, i) => (
<div key={i} className="border border-red-500/20"></div>
))}
</div>
</div>
<div className="relative z-10 flex items-center justify-center min-h-screen p-4">
<div className="max-w-2xl w-full">
{/* Main Security Alert */}
<div className="bg-black/80 backdrop-blur-sm border-2 border-red-500 rounded-2xl p-8 shadow-2xl">
{/* Header */}
<div className="text-center mb-8">
<div className="inline-block mb-4 animate-bounce">
<Shield className="w-16 h-16 text-red-500 mx-auto" />
</div>
<h1 className="text-4xl font-bold text-red-500 mb-2 tracking-wider">
🚨 SECURITY BREACH DETECTED 🚨
</h1>
<div className="flex items-center justify-center space-x-2 text-red-400 mb-4">
<div className={`w-3 h-3 rounded-full ${isRecording ? 'bg-red-500 animate-pulse' : 'bg-red-400'}`}></div>
<span className="text-sm font-mono">
{isRecording ? 'RECORDING IN PROGRESS' : 'SECURITY MONITORING ACTIVE'}
</span>
</div>
</div>
{/* Alert Message */}
<div className="bg-red-900/50 border border-red-600 rounded-lg p-6 mb-6">
<div className="flex items-start space-x-3">
<AlertTriangle className="w-6 h-6 text-red-400 mt-1 flex-shrink-0" />
<div>
<h2 className="text-xl font-bold text-red-300 mb-2">
UNAUTHORIZED ACCESS ATTEMPT
</h2>
<p className="text-red-200 leading-relaxed">
Your access attempt has been <span className="font-bold text-red-400">BLOCKED</span> by our security system.
This incident has been logged and reported to our security team.
</p>
</div>
</div>
</div>
{/* Security Details */}
<div className="bg-gray-900/50 border border-gray-600 rounded-lg p-4 mb-6">
<div className="flex items-center justify-between mb-3">
<h3 className="text-lg font-semibold text-gray-300">SECURITY LOG</h3>
<button
onClick={() => setShowDetails(!showDetails)}
className="flex items-center space-x-1 text-gray-400 hover:text-gray-200 transition-colors"
>
{showDetails ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
<span className="text-sm">{showDetails ? 'HIDE' : 'SHOW'} DETAILS</span>
</button>
</div>
{showDetails && (
<div className="space-y-2 text-sm font-mono overflow-hidden transition-all duration-300 ease-in-out">
<div className="text-gray-400">
<span className="text-green-400">[INFO]</span> Timestamp: {new Date().toISOString()}
</div>
<div className="text-gray-400">
<span className="text-red-400">[WARN]</span> Access denied: Insufficient privileges
</div>
<div className="text-gray-400">
<span className="text-yellow-400">[ALERT]</span> Attempt #{attemptCount} from this session
</div>
<div className="text-gray-400">
<span className="text-blue-400">[LOG]</span> IP logged and monitored
</div>
<div className="text-gray-400">
<span className="text-purple-400">[SEC]</span> Security team notified
</div>
</div>
)}
</div>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<button
onClick={handleGoBack}
className="flex items-center justify-center space-x-2 bg-gray-800 hover:bg-gray-700 text-gray-200 px-6 py-3 rounded-lg transition-all duration-200 border border-gray-600 hover:border-gray-500 hover:scale-105 hover:-translate-y-0.5 active:scale-95"
>
<ArrowLeft className="w-5 h-5" />
<span>Go Back</span>
</button>
<button
onClick={handleGoHome}
className="flex items-center justify-center space-x-2 bg-red-800 hover:bg-red-700 text-red-200 px-6 py-3 rounded-lg transition-all duration-200 border border-red-600 hover:border-red-500 hover:scale-105 hover:-translate-y-0.5 active:scale-95"
>
<Home className="w-5 h-5" />
<span>Return Home</span>
</button>
</div>
{/* Footer Warning */}
<div className="mt-6 text-center">
<p className="text-xs text-gray-500">
<Lock className="w-4 h-4 inline mr-1" />
All unauthorized access attempts are monitored and logged for security purposes.
</p>
</div>
</div>
{/* Additional Security Notice */}
<div className="mt-6 text-center">
<div className="bg-black/60 border border-red-500/30 rounded-lg p-4 hover:scale-[1.02] hover:border-red-500/50 transition-all duration-200">
<p className="text-sm text-gray-400">
<span className="text-red-400 font-bold">⚠️ SECURITY NOTICE:</span> If you believe this is an error,
please contact our support team with your credentials for verification.
</p>
</div>
</div>
</div>
</div>
{/* Floating security elements */}
<div className="fixed top-4 right-4 text-xs text-red-400 font-mono">
<div className="flex items-center space-x-2 animate-bounce">
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
<span>SEC-{securityId}</span>
</div>
</div>
<div className="fixed bottom-4 left-4 text-xs text-red-400 font-mono">
<div className="flex items-center space-x-2 animate-bounce">
<span>MONITORING</span>
<div className="w-1 h-1 bg-red-500 rounded-full animate-ping"></div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default UnauthorizedPage;