72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { motion } from 'framer-motion';
|
|||
|
|
|
|||
|
|
const bootLogs = [
|
|||
|
|
'ИНИЦИАЛИЗАЦИЯ СИСТЕМЫ...',
|
|||
|
|
'ЗАГРУЗКА ЯДРА [##########......]',
|
|||
|
|
'МОНТИРОВАНИЕ ТОМОВ...',
|
|||
|
|
'ПОДКЛЮЧЕНИЕ К ЗАЩИЩЕННОЙ СЕТИ...',
|
|||
|
|
'ДОСТУП РАЗРЕШЕН.'
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
onComplete: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const BootAnimation: React.FC<Props> = ({ onComplete }) => {
|
|||
|
|
const [logs, setLogs] = useState<string[]>([]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
let delay = 0;
|
|||
|
|
bootLogs.forEach((log, index) => {
|
|||
|
|
delay += 200 + Math.random() * 300;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setLogs(prev => [...prev, log]);
|
|||
|
|
if (index === bootLogs.length - 1) {
|
|||
|
|
setTimeout(onComplete, 800);
|
|||
|
|
}
|
|||
|
|
}, delay);
|
|||
|
|
});
|
|||
|
|
}, [onComplete]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<motion.div
|
|||
|
|
exit={{ y: "-100%" }}
|
|||
|
|
transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1] }}
|
|||
|
|
className="fixed inset-0 z-[100] flex flex-col justify-between bg-[#0e0e10] p-8 md:p-12 text-[#20e3b2] font-mono text-xs uppercase"
|
|||
|
|
>
|
|||
|
|
<div className="flex justify-between w-full border-b border-[#20e3b2]/20 pb-4">
|
|||
|
|
<span>iiEasy // ЗАГРУЗКА</span>
|
|||
|
|
<span>V 1.0</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="w-full max-w-lg">
|
|||
|
|
{logs.map((log, i) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={i}
|
|||
|
|
initial={{ opacity: 0 }}
|
|||
|
|
animate={{ opacity: 1 }}
|
|||
|
|
className="mb-1"
|
|||
|
|
>
|
|||
|
|
<span className="text-[#666] mr-2">
|
|||
|
|
{String(i).padStart(2, '0')} ::
|
|||
|
|
</span>
|
|||
|
|
{log}
|
|||
|
|
</motion.div>
|
|||
|
|
))}
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ opacity: [0, 1, 0] }}
|
|||
|
|
transition={{ repeat: Infinity, duration: 0.2 }}
|
|||
|
|
className="w-3 h-4 bg-[#20e3b2] mt-2 inline-block"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex justify-between w-full border-t border-[#20e3b2]/20 pt-4 text-[#666]">
|
|||
|
|
<span>ПАМЯТЬ: 128TB</span>
|
|||
|
|
<span>CPU: ОПТИМАЛЬНО</span>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default BootAnimation;
|