Загрузка...
Glassmorphism карточка интерфейса управления миссиями. Отображает статус, статистику, интерактивные элементы. Идеально для дашбордов.
<div class="card-top glass-effect bg-gradient-to-r from-white/15 to-white/5 w-[32rem] h-fit rounded-[1.2em] overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
<div class="absolute inset-0 rounded-[1.2em] border border-white/40" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
<div class="absolute inset-0 border-neutral-400/50 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
<div class="flex flex-col h-full p-6 pb-7">
<div class="flex justify-between items-start mb-2">
<div class="w-3/4">
<h1 class="text-[26px] leading-tight tracking-tight font-medium">Mission Control</h1>
<p class="text-neutral-300 text-sm font-light mt-1">ARTEMIS-VII Deep Space</p>
</div>
<div class="w-1/4 text-right">
<div class="text-[20px] font-semibold font-mono">NASA</div>
<div class="flex items-center justify-end gap-1 mt-1">
<div class="w-2 h-2 rounded-full bg-green-400 animate-pulse" style="box-shadow: 0 0 6px rgba(16, 185, 129, 0.6)"></div>
<span class="text-xs text-green-300">ACTIVE</span>
</div>
</div>
</div>
<div class="flex items-center gap-3 mb-4">
<div class="h-9 w-9 rounded-full flex items-center justify-center bg-white/10 border border-green-400/50 cursor-pointer transition-all duration-300 hover:scale-110 hover:bg-white/20" style="background: rgba(16, 185, 129, 0.2); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3)">
<svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<div class="w-px h-5 bg-gradient-to-b from-transparent via-white/60 to-transparent"></div>
<div class="h-9 w-9 rounded-full flex items-center justify-center bg-amber-400/20 border border-amber-400/50 cursor-pointer transition-all duration-300 hover:scale-110 hover:bg-white/20" style="box-shadow: 0 0 20px rgba(245, 158, 11, 0.3)">
<svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
</svg>
</div>
<div class="w-px h-5 bg-gradient-to-b from-transparent via-white/60 to-transparent"></div>
<div class="h-9 w-9 rounded-full flex items-center justify-center bg-white/10 border border-white/30 cursor-pointer transition-all duration-300 hover:scale-110 hover:bg-white/20">
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m0 0V3a1 1 0 011 1v8.5a1 1 0 01-.5.866L12 18l-5.5-4.634A1 1 0 016 12.5V4a1 1 0 011-1z"></path>
</svg>
</div>
<div class="w-px h-5 bg-gradient-to-b from-transparent via-white/60 to-transparent"></div>
<div class="h-9 w-9 rounded-full flex items-center justify-center bg-white/10 border border-white/30 cursor-pointer transition-all duration-300 hover:scale-110 hover:bg-white/20">
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
</div>
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/60 to-transparent mb-4"></div>
<div class="flex justify-between mb-4 max-w-lg">
<div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
<div class="text-2xl font-semibold leading-tight font-mono bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent">
2.4
<span class="text-sm">M</span>
</div>
<div class="text-xs opacity-80 uppercase tracking-wide">KM TRAVELED</div>
</div>
<div class="w-px h-12 my-auto bg-gradient-to-b from-transparent via-white/60 to-transparent"></div>
<div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
<div class="text-2xl font-semibold leading-tight font-mono bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent">
98
<span class="text-sm">%</span>
</div>
<div class="text-xs opacity-80 uppercase tracking-wide">SYSTEMS OK</div>
</div>
<div class="w-px h-12 my-auto bg-gradient-to-b from-transparent via-white/60 to-transparent"></div>
<div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
<div class="text-2xl font-semibold leading-tight font-mono bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent">847</div>
<div class="text-xs opacity-80 uppercase tracking-wide">DAYS ACTIVE</div>
</div>
</div>
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/40 to-transparent mb-3"></div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs px-2 py-1 rounded-full bg-green-500/10 border border-green-500/30 text-green-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg">LIFE SUPPORT</span>
<span class="text-xs px-2 py-1 rounded-full bg-neutral-500/10 border border-neutral-500/30 text-neutral-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg">NAVIGATION</span>
<span class="text-xs px-2 py-1 rounded-full bg-purple-500/10 border border-purple-500/30 text-purple-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg">DEEP SPACE</span>
<span class="text-xs px-2 py-1 rounded-full bg-amber-500/10 border border-amber-500/30 text-amber-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg">RESEARCH</span>
</div>
<div class="rounded px-2 py-0.5 font-mono text-xs relative overflow-hidden mb-4" style="background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%)">
<div class="flex items-center justify-between">
<span class="text-neutral-300">T+ 847 DAYS</span>
<span class="text-white">PHASE 3: EXPLORATION</span>
</div>
</div>
<div class="mt-auto flex justify-between w-full">
<div class="flex flex-col">
<span class="opacity-70 flex items-center gap-2 text-sm mb-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>SECTOR 7-ALPHA</span>
</span>
<span class="text-xs opacity-60 flex items-center gap-2 font-mono">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
</svg>
<span>ART-VII-2024</span>
</span>
</div>
<div class="flex flex-col items-end">
<span class="opacity-70 flex items-center gap-2 text-sm mb-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM22 16c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM12 8l9-3"></path>
</svg>
<span>COMM LINK</span>
<div class="w-2 h-2 rounded-full bg-amber-400" style="box-shadow: 0 0 6px rgba(245, 158, 11, 0.6)"></div>
</span>
<p class="text-sm font-medium flex items-center gap-2 cursor-pointer hover:text-blue-300 transition-colors">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
</svg>
<span>mission.nasa.gov</span>
</p>
</div>
</div>
</div>
</div>