import React, { useState, useEffect } from 'react'; import Head from 'next/head'; interface MaintenanceModeProps { onPasswordCorrect: () => void; } const MaintenanceMode: React.FC = ({ onPasswordCorrect }) => { const [password, setPassword] = useState(''); const [isShaking, setIsShaking] = useState(false); const [progress, setProgress] = useState(0); const correctPassword = 'protek2024'; // Замените на ваш пароль // Дебаг информация (удалите в продакшене) useEffect(() => { console.log('Maintenance Mode Environment Variable:', process.env.NEXT_PUBLIC_MAINTENANCE_MODE); }, []); useEffect(() => { const interval = setInterval(() => { setProgress(prev => prev >= 100 ? 0 : prev + 1); }, 100); return () => clearInterval(interval); }, []); const handlePasswordSubmit = (e: React.FormEvent) => { e.preventDefault(); if (password === correctPassword) { onPasswordCorrect(); } else { setIsShaking(true); setPassword(''); setTimeout(() => setIsShaking(false), 500); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handlePasswordSubmit(e); } }; return ( <> Техническое обслуживание - Protek Auto
{/* Анимированный фон */}
{/* Логотип и автомобиль */}
{/* Анимированный автомобиль */}
{/* Дым из выхлопной трубы */}

PROTEK AUTO

{/* Инструменты */}
{/* Текст состояния */}

🔧 Техническое обслуживание

Наш автосервис временно закрыт на профилактику

Мы настраиваем двигатель для лучшей производительности

{/* Прогресс бар */}

Прогресс обслуживания: {progress}%

{/* Форма ввода пароля */}

🔐 Код доступа для техперсонала

setPassword(e.target.value)} onKeyDown={handleKeyDown} placeholder="Введите код доступа..." className={`w-full px-6 py-4 bg-gray-700 border-2 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 transition-all duration-300 ${ isShaking ? 'animate-pulse border-red-500 bg-red-900/20' : 'border-gray-600' }`} autoComplete="off" tabIndex={0} aria-label="Введите пароль для доступа к сайту" /> {/* Индикатор безопасности */}
{isShaking && (

❌ Неверный код доступа! Попробуйте еще раз.

)}
{/* Контактная информация */}

По вопросам обращайтесь к администратору системы

🛠️ ⚙️ 🔧
{/* Дополнительные анимационные элементы */}
); }; export default MaintenanceMode;