mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-16 04:30:08 +00:00
Added fade in animation about and projects pages
This commit is contained in:
AdamBtech
@@ -0,0 +1,551 @@
|
||||
/* ===================== NEURAL PROFILE SECTION ANIMATIONS ===================== */
|
||||
|
||||
/* Section Container Animation */
|
||||
.neural-section {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: neuralSectionMaterialize 1.2s ease-out 0.1s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralSectionMaterialize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
filter: blur(2px);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-5px);
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header Section Animation */
|
||||
.neural-header {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
animation: neuralHeaderSlideDown 1s ease-out 0.3s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralHeaderSlideDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.9;
|
||||
transform: translateY(3px);
|
||||
filter: blur(0.3px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Divider Line Animation */
|
||||
.neural-divider {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
animation: neuralDividerExpand 0.8s ease-out 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralDividerExpand {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
transform: scaleX(0.7);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Content Grid Animation */
|
||||
.neural-content-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
animation: neuralContentReveal 1.2s ease-out 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralContentReveal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Left Panel - Neural Profile Tree Animation */
|
||||
.neural-left-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
animation: neuralLeftPanelSlideIn 1.2s ease-out 0.7s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralLeftPanelSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
transform: translateX(-10px) scale(0.98);
|
||||
border-color: var(--color-nier-border);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.9;
|
||||
transform: translateX(2px) scale(1.01);
|
||||
background-color: var(--color-nier-bg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
border-color: var(--color-nier-border);
|
||||
background-color: var(--color-nier-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Neural Profile Tree Content */
|
||||
.neural-tree-container {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: neuralTreeContentFadeUp 0.8s ease-out 1.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralTreeContentFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Right Panel Container Animation */
|
||||
.neural-right-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
animation: neuralRightPanelSlideIn 1s ease-out 0.9s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralRightPanelSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Display Panel Animation */
|
||||
.neural-video-panel {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
animation: neuralVideoPanelMaterialize 1.2s ease-out 1.1s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralVideoPanelMaterialize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
30% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.98) translateY(10px);
|
||||
border-color: var(--color-nier-accent);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.01) translateY(-2px);
|
||||
background-color: var(--color-nier-dark);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
border-color: var(--color-nier-accent);
|
||||
background-color: var(--color-nier-dark);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Container Inner Animation */
|
||||
.neural-video-inner {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralVideoInnerExpand 0.8s ease-out 1.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralVideoInnerExpand {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.02);
|
||||
border-color: rgba(255, 201, 102, 0.3);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
border-color: rgba(255, 201, 102, 0.5);
|
||||
background-color: rgba(41, 41, 37, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Holo Video Component Animation */
|
||||
.neural-holo-video {
|
||||
opacity: 0;
|
||||
animation: neuralHoloVideoFadeIn 1s ease-out 1.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralHoloVideoFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
filter: blur(2px) brightness(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
filter: blur(1px) brightness(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0px) brightness(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Panel Animation */
|
||||
.neural-status-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
animation: neuralStatusPanelRise 1s ease-out 1.3s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralStatusPanelRise {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(10px) scale(0.98);
|
||||
border-color: var(--color-nier-border);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
background-color: var(--color-nier-mid);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
border-color: var(--color-nier-border);
|
||||
background-color: var(--color-nier-mid);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Grid Content Animation */
|
||||
.neural-status-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
animation: neuralStatusGridFadeUp 0.6s ease-out 1.7s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralStatusGridFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Items Staggered Animation */
|
||||
.neural-status-item {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
animation: neuralStatusItemSlideIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) { animation-delay: 1.9s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 2.1s; }
|
||||
|
||||
@keyframes neuralStatusItemSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Labels Animation */
|
||||
.neural-status-label {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
animation: neuralStatusLabelFadeDown 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 2.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes neuralStatusLabelFadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Values Animation */
|
||||
.neural-status-value {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralStatusValuePop 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 2.1s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 2.3s; }
|
||||
|
||||
@keyframes neuralStatusValuePop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse Animation for Status Indicator */
|
||||
.neural-pulse-dot {
|
||||
opacity: 0;
|
||||
animation: neuralPulseDotAppear 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes neuralPulseDotAppear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Background Checkered Pattern Enhancement */
|
||||
.neural-checkered-bg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.neural-checkered-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%);
|
||||
background-size: 30px 30px;
|
||||
background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
|
||||
animation: neuralBgPatternFadeIn 3s ease-out 0.2s forwards;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes neuralBgPatternFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scanning Line Effect for Neural Section */
|
||||
.neural-scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 201, 102, 0.6),
|
||||
transparent
|
||||
);
|
||||
animation: neuralScanLine 4s ease-in-out 1s forwards;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes neuralScanLine {
|
||||
0% {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================== RESPONSIVE DESIGN ===================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
/* Faster animations on tablets */
|
||||
.neural-section {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.neural-left-panel,
|
||||
.neural-video-panel {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Much faster animations on mobile */
|
||||
.neural-section {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
|
||||
.neural-header {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.neural-divider {
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.neural-content-grid {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.neural-left-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.neural-video-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.neural-status-panel {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) { animation-delay: 0.9s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 1.0s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 1.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.1s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.1s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.2s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.2s; }
|
||||
}
|
||||
|
||||
/* ===================== ACCESSIBILITY ===================== */
|
||||
|
||||
/* Respect reduced motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.neural-section,
|
||||
.neural-header,
|
||||
.neural-divider,
|
||||
.neural-content-grid,
|
||||
.neural-left-panel,
|
||||
.neural-tree-container,
|
||||
.neural-right-panel,
|
||||
.neural-video-panel,
|
||||
.neural-video-inner,
|
||||
.neural-holo-video,
|
||||
.neural-status-panel,
|
||||
.neural-status-grid,
|
||||
.neural-status-item,
|
||||
.neural-status-label,
|
||||
.neural-status-value,
|
||||
.neural-pulse-dot {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.neural-checkered-bg::before,
|
||||
.neural-scan-line {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,58 +1,64 @@
|
||||
<section class="border-b border-nier-border min-h-screen checkered-background p-6 lg:p-8 flex flex-col relative">
|
||||
<section class="border-b border-nier-border min-h-screen checkered-background neural-checkered-bg p-6 lg:p-8 flex flex-col relative neural-section">
|
||||
|
||||
<!-- Header section with NieR styling -->
|
||||
<div class="mb-6 lg:mb-8">
|
||||
<app-section-title title="NEURAL PROFILE"/>
|
||||
<!-- Subtle divider line -->
|
||||
<div class="mt-3 h-px bg-nier-border opacity-50"></div>
|
||||
</div>
|
||||
<!-- Scanning line effect -->
|
||||
<div class="neural-scan-line"></div>
|
||||
|
||||
<!-- Main content grid -->
|
||||
<div class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
|
||||
|
||||
<!-- Left panel - Neural Profile Tree -->
|
||||
<div class="lg:col-span-7 xl:col-span-6">
|
||||
<div class="h-full bg-nier-bg border-2 border-nier-border font-terminal text-nier-dark">
|
||||
<!-- Inner content container with proper padding -->
|
||||
<div class="h-full p-4 lg:p-6">
|
||||
<app-neural-profile-tree/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Header section with NieR styling -->
|
||||
<div class="mb-6 lg:mb-8 neural-header">
|
||||
<app-section-title title="NEURAL PROFILE"/>
|
||||
<!-- Subtle divider line with animation -->
|
||||
<div class="mt-3 h-px bg-nier-border opacity-50 neural-divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- Right panel - Video and status (responsive) -->
|
||||
<div class="lg:col-span-5 xl:col-span-6 flex flex-col gap-4 lg:gap-6">
|
||||
<!-- Main content grid -->
|
||||
<div class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 neural-content-grid">
|
||||
|
||||
<!-- Main video display -->
|
||||
<div class="flex-1 bg-nier-dark border-2 border-nier-accent">
|
||||
<div class="h-full min-h-[250px] sm:min-h-[300px] lg:min-h-[400px] xl:min-h-[500px] p-2">
|
||||
<div class="w-full h-full bg-nier-bg/10 border border-nier-border/50">
|
||||
<app-holo-video-container
|
||||
containerClasses="w-full h-full"
|
||||
videoSrc="video/cyber_skull.mp4"/>
|
||||
</div>
|
||||
<!-- Left panel - Neural Profile Tree -->
|
||||
<div class="lg:col-span-7 xl:col-span-6 neural-left-panel">
|
||||
<div class="h-full bg-nier-bg border-2 border-nier-border font-terminal text-nier-dark">
|
||||
<!-- Inner content container with proper padding -->
|
||||
<div class="h-full p-4 lg:p-6 neural-tree-container">
|
||||
<app-neural-profile-tree/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status panel -->
|
||||
<div class="bg-nier-mid border-2 border-nier-border font-terminal">
|
||||
<div class="p-3 sm:p-4 lg:p-6">
|
||||
<!-- Status grid - responsive layout -->
|
||||
<div class="nier-grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 p-3">
|
||||
<div class="text-nier-dark">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1">STATUS</div>
|
||||
<div class="flex items-center gap-2 font-terminal text-sm">
|
||||
<div class="w-2 h-2 bg-nier-accent animate-pulse"></div>
|
||||
<span>NEURAL SCAN ACTIVE</span>
|
||||
</div>
|
||||
<!-- Right panel - Video and status (responsive) -->
|
||||
<div class="lg:col-span-5 xl:col-span-6 flex flex-col gap-4 lg:gap-6 neural-right-panel">
|
||||
|
||||
<!-- Main video display -->
|
||||
<div class="flex-1 bg-nier-dark border-2 border-nier-accent neural-video-panel">
|
||||
<div class="h-full min-h-[250px] sm:min-h-[300px] lg:min-h-[400px] xl:min-h-[500px] p-2 neural-video-inner">
|
||||
<div class="w-full h-full bg-nier-bg/10 border border-nier-border/50">
|
||||
<app-holo-video-container
|
||||
containerClasses="w-full h-full neural-holo-video"
|
||||
videoSrc="video/cyber_skull.mp4"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-nier-dark">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1">MODE</div>
|
||||
<div class="font-terminal text-sm">REAL-TIME ANALYSIS</div>
|
||||
|
||||
<!-- Status panel -->
|
||||
<div class="bg-nier-mid border-2 border-nier-border font-terminal neural-status-panel">
|
||||
<div class="p-3 sm:p-4 lg:p-6 neural-status-grid">
|
||||
<!-- Status grid - responsive layout -->
|
||||
<div class="nier-grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 p-3">
|
||||
|
||||
<div class="text-nier-dark neural-status-item">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1 neural-status-label">STATUS</div>
|
||||
<div class="flex items-center gap-2 font-terminal text-sm neural-status-value">
|
||||
<div class="w-2 h-2 bg-nier-accent animate-pulse neural-pulse-dot"></div>
|
||||
<span>NEURAL SCAN ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-nier-dark neural-status-item">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1 neural-status-label">MODE</div>
|
||||
<div class="font-terminal text-sm neural-status-value">REAL-TIME ANALYSIS</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user