All Prompts
All Prompts
herosectionuidashboardtailwindanimatedinteractivechartjs
Cybersecurity Hero with Radar UI Dashboard
Hero-секция с анимированным радаром и дашбордом безопасности. UI-компонент для SaaS, DevOps, мониторинга. Tailwind, Chart.js.
Prompt
<style>
/* Radar Specifics */
.perspective-1000 {
perspective: 1000px;
}
/* Concentric filled circles pulsing + fading out */
@keyframes centerCirclePulse {
0% {
opacity: 0;
transform: scale(0.4);
}
10% {
opacity: 0.9;
transform: scale(1);
}
40% {
opacity: 0.9;
transform: scale(1.02);
}
60% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
.center-circle {
animation: centerCirclePulse 5s ease-out infinite;
}
.center-circle--2 {
animation-delay: 0.12s;
}
.center-circle--3 {
animation-delay: 0.24s;
}
/* Rays that appear after the circles fade */
@keyframes centerRayX {
0%,
45% {
opacity: 0;
transform: scaleX(0);
}
60% {
opacity: 1;
transform: scaleX(1);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
@keyframes centerRayY {
0%,
45% {
opacity: 0;
transform: scaleY(0);
}
60% {
opacity: 1;
transform: scaleY(1);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
.center-ray-horizontal {
height: 1px;
animation: centerRayX 5s ease-out infinite;
}
.center-ray-vertical {
width: 1px;
animation: centerRayY 5s ease-out infinite;
}
/* Origins so each ray “starts” from the icon center and grows out */
.center-ray-left {
transform-origin: right center;
}
.center-ray-right {
transform-origin: left center;
}
.center-ray-top {
transform-origin: center bottom;
}
.center-ray-bottom {
transform-origin: center top;
}
/* ================= CUSTOM ANIMATIONS ================= */
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse-slow {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
@keyframes radar-scan {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse-glow {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
/* Glass Dashboard Specifics */
.glass-surface {
background: rgba(10, 15, 30, 0.65);
/* Dark semi-transparent base */
backdrop-filter: blur(24px);
/* Heavy blur for the "frosted" look */
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08),
/* Subtle border */
0 25px 50px -12px rgba(0, 0, 0, 0.5);
/* Depth shadow */
}
/* The glowing top border line */
.glass-top-border {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.8) 50%, transparent 100%);
box-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
z-index: 10;
}
/* Radar Gradients */
.radar-sweep {
background: conic-gradient(from 180deg at 50% 50%,
transparent 0deg,
transparent 200deg,
rgba(6, 182, 212, 0.05) 240deg,
rgba(6, 182, 212, 0.4) 360deg);
}
.mask-radar-bottom {
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 85%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 85%);
}
.text-gradient-cyan {
background: linear-gradient(to right, #22d3ee, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
<!-- Hero Section -->
<section class="overflow-hidden min-h-[1100px] pt-32 pb-44 relative">
<!-- RADAR BACKGROUND LAYER -->
<!-- Positioned to be centered behind the UI, masked at bottom -->
<div
class="absolute top-0 left-1/2 -translate-x-1/2 w-[1100px] h-[1100px] z-0 pointer-events-none mask-radar-bottom select-none">
<!-- Radar Container -->
<div class="relative w-full h-full flex items-center justify-center">
<!-- 1. The Sweep / Scanner -->
<div class="absolute inset-0 w-full h-full rounded-full animate-[radar-scan_8s_linear_infinite]">
<div class="radar-sweep w-full h-full rounded-full"></div>
<!-- Leading edge glowing line -->
<div
class="absolute top-0 left-1/2 w-[2px] h-1/2 bg-gradient-to-b from-cyan-300 via-cyan-500 to-transparent origin-bottom -translate-x-1/2 shadow-[0_0_30px_rgba(34,211,238,1)]">
</div>
</div>
<!-- 2. Outer Ring Structure (Static + Slow Spin) -->
<!-- Outermost dashed ring -->
<div
class="absolute w-[98%] h-[98%] rounded-full border border-dashed border-cyan-500/10 opacity-30 animate-[spin-slow_120s_linear_infinite]">
</div>
<!-- Main Outer Circle -->
<div class="absolute w-[80%] h-[80%] rounded-full border border-cyan-500/10 opacity-60"></div>
<!-- Decorative Arc Slices (Wedge shapes) -->
<svg class="absolute w-[80%] h-[80%] animate-[spin-reverse-slow_60s_linear_infinite]" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="49" fill="none" stroke="rgba(34,211,238,0.1)" stroke-width="0.2"
stroke-dasharray="20 40"></circle>
</svg>
<!-- 3. Inner Rings (Close to outer ring as requested) -->
<div class="absolute w-[72%] h-[72%] rounded-full border border-cyan-500/5"></div>
<!-- 4. Grid Lines -->
<div class="absolute w-full h-full opacity-10">
<div class="absolute top-0 bottom-0 left-1/2 w-px bg-cyan-400"></div>
<div class="absolute left-0 right-0 top-1/2 h-px bg-cyan-400"></div>
<div class="absolute top-[14.6%] left-[14.6%] w-[70.8%] h-[70.8%] border border-cyan-400 rounded-full"></div>
</div>
<!-- 5. Central Glowing Core (Aligns just above dashboard) -->
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200px] h-[200px] flex items-center justify-center">
<div class="absolute inset-0 bg-cyan-500/10 blur-xl rounded-full animate-pulse"></div>
<div class="w-[60%] h-[60%] border border-cyan-400/30 rounded-full flex items-center justify-center">
<div class="w-2 h-2 bg-cyan-300 rounded-full shadow-[0_0_10px_#22d3ee]"></div>
</div>
</div>
<!-- Floating Data Points on Radar -->
<div
class="absolute top-[20%] left-[75%] w-32 h-8 flex items-center gap-2 text-cyan-500/50 text-[10px] font-mono animate-pulse">
<div class="w-1.5 h-1.5 bg-cyan-500 rounded-full"></div> TARGET_LOCKED
</div>
<div
class="absolute bottom-[40%] left-[25%] w-32 h-8 flex items-center gap-2 text-blue-500/50 text-[10px] font-mono animate-pulse delay-700">
<div class="w-1.5 h-1.5 bg-blue-500 rounded-full"></div> SCANNING...
</div>
</div>
</div>
<!-- HERO CONTENT -->
<div class="flex flex-col z-10 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative items-center"
style="mask-image: linear-gradient(180deg, transparent, black 0%, black 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 70%, transparent);">
<!-- Text Content (Floating above dashboard) -->
<div class="text-center max-w-3xl mx-auto mb-16 pt-10">
<div
class="inline-flex items-center gap-2 rounded-full border border-cyan-500/20 bg-cyan-950/20 px-4 py-1.5 mb-8 backdrop-blur-md shadow-[0_0_20px_rgba(34,211,238,0.1)]">
<div class="h-1.5 w-1.5 animate-pulse bg-cyan-400 rounded-full"></div>
<span class="text-[10px] font-semibold tracking-widest uppercase text-cyan-300 font-jakarta">
Next Gen Defense
</span>
</div>
<h1 class="text-5xl md:text-7xl font-medium tracking-tight text-white mb-6 leading-[1.1]">
Security at the
<span class="text-gradient-cyan relative inline-block">
speed of code
<!-- Glitch decorative underline -->
<svg class="absolute w-full h-2 bottom-0 left-0 text-cyan-500/30" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M0 5 Q 50 10 100 5" fill="transparent" stroke="currentColor" stroke-width="1" class=""></path>
</svg>
</span>
</h1>
<p class="text-lg text-slate-400 font-light max-w-xl mx-auto leading-relaxed">
Unified security platform for modern engineering teams. Monitor infrastructure drift and detect threats in
real-time.
</p>
</div>
<!-- GLASS DASHBOARD INTERFACE -->
<!-- Positioned to overlap bottom half of radar -->
<div class="w-full max-w-6xl z-20 mt-[-20px] relative perspective-1000">
<!-- Dashboard Container -->
<div
class="glass-surface border-x overflow-hidden transition-all duration-500 animate-enter [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)] bg-zinc-900/95 border-white/20 rounded-t-2xl border-b relative backdrop-blur-md">
<!-- Top Glow Border -->
<div class="glass-top-border"></div>
<!-- Subtle internal noise/texture -->
<div
class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-[0.03] mix-blend-overlay pointer-events-none">
</div>
<!-- Header Bar -->
<div
class="z-20 flex bg-black/20 border-white/5 border-b pt-4 pr-6 pb-4 pl-6 relative items-center justify-between">
<div class="flex items-center gap-4">
<!-- MacOS style dots -->
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/40"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/40"></div>
<div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/40"></div>
</div>
<div class="h-4 w-px bg-white/10 mx-2"></div>
<div class="flex items-center gap-2 text-xs font-mono text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-shield-check">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<span>SYS.MONITORING</span>
<span class="text-slate-600">/</span>
<span class="text-slate-300">MAIN_CLUSTER</span>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-950/40 border border-cyan-500/20">
<div class="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></div>
<span class="text-[10px] font-semibold text-cyan-300 tracking-wide">LIVE FEED</span>
</div>
</div>
</div>
<!-- Dashboard Content -->
<div class="z-20 flex h-[500px] relative">
<!-- Sidebar -->
<div
class="flex flex-col gap-6 bg-black/10 w-16 border-white/5 border-r pt-6 pb-6 gap-x-6 gap-y-6 items-center">
<div class="p-2.5 rounded-xl bg-cyan-500/10 text-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.2)]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-activity">
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
class=""></path>
</svg>
</div>
<div class="p-2.5 rounded-xl text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-server">
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
<line x1="6" x2="6.01" y1="6" y2="6"></line>
<line x1="6" x2="6.01" y1="18" y2="18"></line>
</svg>
</div>
<div class="p-2.5 rounded-xl text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-globe">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
<path d="M2 12h20"></path>
</svg>
</div>
<div
class="mt-auto p-2.5 rounded-xl text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-settings-2">
<path d="M20 7h-9"></path>
<path d="M14 17H5"></path>
<circle cx="17" cy="17" r="3"></circle>
<circle cx="7" cy="7" r="3"></circle>
</svg>
</div>
</div>
<!-- Main Grid -->
<div class="flex-1 grid grid-cols-12 gap-6 overflow-hidden pt-6 pr-6 pb-6 pl-6 gap-x-6 gap-y-6">
<!-- Stats Row -->
<div class="col-span-12 grid grid-cols-3 gap-6 h-32">
<!-- Stat 1 -->
<div
class="rounded-xl border border-white/5 bg-white/[0.03] p-5 flex flex-col justify-between group hover:border-cyan-500/30 transition-all hover:bg-cyan-500/[0.05]">
<div class="flex justify-between items-start">
<div class="">
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Total Threats</p>
<h3 class="text-2xl font-bold text-white tracking-tight">8,942</h3>
</div>
<div class="text-cyan-400 bg-cyan-500/10 rounded-md pt-1.5 pr-1.5 pb-1.5 pl-1.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-shield-alert">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
</path>
<path d="M12 8v4"></path>
<path d="M12 16h.01"></path>
</svg>
</div>
</div>
<div class="w-full h-1 bg-white/10 rounded-full overflow-hidden mt-2">
<div class="h-full w-[70%] bg-cyan-400 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.5)]"></div>
</div>
</div>
<!-- Stat 2 -->
<div
class="rounded-xl border border-white/5 bg-white/[0.03] p-5 flex flex-col justify-between group hover:border-cyan-500/30 transition-all hover:bg-cyan-500/[0.05]">
<div class="flex justify-between items-start">
<div class="">
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Sys Latency</p>
<h3 class="text-2xl font-bold text-white tracking-tight">
12<span class="text-sm font-medium text-slate-500 ml-1">ms</span></h3>
</div>
<div class="text-cyan-400 bg-cyan-500/10 rounded-md pt-1.5 pr-1.5 pb-1.5 pl-1.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-zap">
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
</path>
</svg>
</div>
</div>
<div class="flex items-center gap-1.5 text-[10px] text-emerald-400 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-trend-down">
<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"></polyline>
<polyline points="16 17 22 17 22 11"></polyline>
</svg>
-4.2% vs last hour
</div>
</div>
<!-- Stat 3 -->
<div
class="rounded-xl border border-white/5 bg-white/[0.03] p-5 flex flex-col justify-between group hover:border-cyan-500/30 transition-all hover:bg-cyan-500/[0.05]">
<div class="flex justify-between items-start">
<div class="">
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Uptime</p>
<h3 class="text-2xl font-bold text-white tracking-tight">99.99%</h3>
</div>
<div class="text-cyan-400 bg-cyan-500/10 rounded-md pt-1.5 pr-1.5 pb-1.5 pl-1.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</div>
</div>
<div class="flex gap-1 mt-2">
<div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-100 shadow-[0_0_5px_#10b981]"></div>
<div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-100 shadow-[0_0_5px_#10b981]"></div>
<div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-100 shadow-[0_0_5px_#10b981]"></div>
<div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-50"></div>
</div>
</div>
</div>
<!-- Main Chart Area -->
<div class="col-span-8 bg-white/[0.02] border border-white/5 rounded-xl p-6 relative">
<div class="flex items-center justify-between mb-4">
<h4 class="text-xs font-semibold text-white">Network Traffic</h4>
<div class="flex gap-2">
<button class="text-[10px] px-2 py-0.5 rounded bg-white/10 text-white border border-white/10">1H</button>
<button class="text-[10px] px-2 py-0.5 rounded text-slate-500 hover:text-white transition-colors">24H</button>
</div>
</div>
<div class="relative w-full h-[200px]">
<canvas id="mainChart" width="1268" height="400"
style="display: block; box-sizing: border-box; height: 200px; width: 634px;" class=""></canvas>
</div>
</div>
<!-- Logs/Events -->
<div class="col-span-4 bg-white/[0.02] border border-white/5 rounded-xl flex flex-col">
<div class="p-4 border-b border-white/5 flex justify-between items-center">
<h4 class="text-xs font-semibold text-white">Event Log</h4>
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
</span>
</div>
<div class="flex-1 overflow-y-hidden p-3 space-y-2 font-mono text-[10px]">
<div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
<span class="text-slate-600">10:42:01</span>
<span class="text-cyan-400">INFO</span>
<span class="group-hover:text-white transition-colors">Backup initialized</span>
</div>
<div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
<span class="text-slate-600">10:42:05</span>
<span class="text-emerald-400">SUCCESS</span>
<span class="group-hover:text-white transition-colors">Node synced</span>
</div>
<div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
<span class="text-slate-600">10:42:12</span>
<span class="text-red-400">ALERT</span>
<span class="group-hover:text-white transition-colors">Port 443 spike</span>
</div>
<div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
<span class="text-slate-600">10:42:18</span>
<span class="text-cyan-400">INFO</span>
<span class="group-hover:text-white transition-colors">Heal check passed</span>
</div>
<div
class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group opacity-50">
<span class="text-slate-600">10:42:22</span>
<span class="text-cyan-400">INFO</span>
<span class="group-hover:text-white transition-colors">User authenticated</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Reflection/Glow under dashboard -->
<div class="absolute -bottom-10 left-0 right-0 h-20 bg-cyan-500/10 blur-[50px] pointer-events-none z-0"></div>
</div>
</div>
<!-- Bottom dark shade -->
<div
class="pointer-events-none absolute inset-x-0 bottom-0 h-64 bg-gradient-to-b from-transparent via-black/70 to-black z-[15]">
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js" class=""></script>
<script class="">
document.addEventListener('DOMContentLoaded', () => {
lucide.createIcons();
const ctx = document.getElementById('mainChart').getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(34, 211, 238, 0.4)');
gradient.addColorStop(1, 'rgba(34, 211, 238, 0)');
new Chart(ctx, {
type: 'line',
data: {
labels: ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
datasets: [{
label: 'Requests',
data: [45, 52, 49, 62, 58, 65, 75, 68, 72, 85, 80, 92],
borderColor: '#22d3ee',
backgroundColor: gradient,
borderWidth: 2,
tension: 0.4,
fill: true,
pointRadius: 0,
pointHoverRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { display: false },
y: { display: false }
},
animation: { duration: 2000 }
}
});
});
</script>
</section>