All Prompts
All Prompts
featuresectioninteractiveanimateddashboardhudtailwind
Futuristic Network Status HUD Section
Футуристичный UI-раздел Network Status HUD. Панель с анимированным радаром, модулями статуса (двигатель, маршрутизация, безопасность). Идеально для дашбордов мониторинга.
Prompt
<section
class="bg-[#c9d1c1] min-h-screen flex items-center justify-center p-4 md:p-12 overflow-hidden selection:bg-[#8eb364] selection:text-[#161f14]">
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Mono:ital,wght@0,300;0,400;1,300&family=Space+Grotesk:wght@300;400&display=swap"
rel="stylesheet">
<svg class="hidden absolute w-0 h-0">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo">
</feColorMatrix>
<feBlend in="SourceGraphic" in2="goo"></feBlend>
</filter>
</defs>
</svg>
<canvas id="env-canvas" class="fixed inset-0 pointer-events-none z-0" style="filter: url(#goo);"></canvas>
<div id="main-card"
class="relative z-10 w-full max-w-[1400px] min-h-[85vh] md:min-h-[700px] md:aspect-[21/9] rounded-sm shadow-2xl overflow-hidden flex flex-col justify-between group cursor-crosshair"
style="background-color: #161f14;
background-image: repeating-linear-gradient(90deg, #161f14 0px, #161f14 16px, #121a10 16px, #121a10 32px);
box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.05), inset 0 -4px 8px rgba(0,0,0,0.8);
--mouse-x: 50%;
--mouse-y: 50%;">
<!-- Blueprint Grid Overlay -->
<div class="absolute inset-0 pointer-events-none z-0 opacity-50"
style="background-size: 40px 40px; background-image: linear-gradient(to right, rgba(142,179,100,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(142,179,100,0.05) 1px, transparent 1px);">
</div>
<!-- Vertical Container-Size Lines -->
<div
class="absolute left-[33%] top-0 bottom-0 w-px bg-[#8eb364]/20 z-10 hidden md:flex flex-col justify-end pb-8 items-center">
<span class="text-[#8eb364]/30 text-xs font-['DM_Mono'] uppercase tracking-widest" style="writing-mode: vertical-rl;">Zone-A</span>
</div>
<div
class="absolute left-[66%] top-0 bottom-0 w-px bg-[#8eb364]/20 z-10 hidden md:flex flex-col justify-start pt-8 items-center">
<span class="text-[#8eb364]/30 text-xs font-['DM_Mono'] uppercase tracking-widest" style="writing-mode: vertical-rl;">Zone-B</span>
</div>
<!-- Horizontal Lines -->
<div class="absolute top-[25%] left-0 right-0 h-px bg-[#8eb364]/10 z-10 hidden md:block"></div>
<div class="absolute bottom-[35%] left-0 right-0 h-px bg-[#8eb364]/10 z-10 hidden md:block"></div>
<!-- Subtle Lighting Gradient -->
<div class="absolute inset-0 pointer-events-none z-0"
style="background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.65) 100%);"></div>
<!-- Flashlight Hover Effect -->
<div
class="absolute inset-0 pointer-events-none z-20 transition-opacity duration-500 opacity-0 group-hover:opacity-100 border-2 border-[#8eb364]"
style="background-image: repeating-linear-gradient(45deg, rgba(142,179,100,0.3) 0px, rgba(142,179,100,0.3) 1px, transparent 1px, transparent 24px),
repeating-linear-gradient(-45deg, rgba(142,179,100,0.3) 0px, rgba(142,179,100,0.3) 1px, transparent 1px, transparent 24px);
mask-image: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);
-webkit-mask-image: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);">
</div>
<!-- Architectural Corner Castings -->
<div
class="absolute top-0 left-0 w-8 h-8 border-b border-r border-[#8eb364]/40 z-30 flex items-start justify-start p-1.5">
<div class="w-1 h-1 bg-[#8eb364]/60"></div>
</div>
<div
class="absolute top-0 right-0 w-8 h-8 border-b border-l border-[#8eb364]/40 z-30 flex items-start justify-end p-1.5">
<div class="w-1 h-1 bg-[#8eb364]/60"></div>
</div>
<div
class="absolute bottom-0 left-0 w-8 h-8 border-t border-r border-[#8eb364]/40 z-30 flex items-end justify-start p-1.5">
<div class="w-1 h-1 bg-[#8eb364]/60"></div>
</div>
<div
class="absolute bottom-0 right-0 w-8 h-8 border-t border-l border-[#8eb364]/40 z-30 flex items-end justify-end p-1.5">
<div class="w-1 h-1 bg-[#8eb364]/60"></div>
</div>
<!-- Floating Crosses -->
<div class="absolute inset-0 pointer-events-none z-10">
<span class="absolute top-[15%] left-[15%] text-[#8eb364] text-xs opacity-80 animate-pulse" style="animation-duration: 3s;">+</span>
<span class="absolute top-[45%] left-[45%] text-[#8eb364] text-xs opacity-50 animate-pulse" style="animation-duration: 5s;">+</span>
<span class="absolute bottom-[25%] left-[10%] text-[#8eb364] text-xs opacity-90 animate-pulse" style="animation-duration: 4s;">+</span>
<span class="absolute top-[20%] right-[20%] text-[#8eb364] text-xs opacity-70 animate-pulse" style="animation-duration: 3.5s;">+</span>
<span class="absolute bottom-[15%] right-[35%] text-[#8eb364] text-xs opacity-60 animate-pulse" style="animation-duration: 6s;">+</span>
</div>
<!-- Central Concentric Radar Graphic -->
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 pointer-events-none opacity-20 flex items-center justify-center">
<div
class="w-[300px] h-[300px] md:w-[600px] md:h-[600px] rounded-full border border-[#8eb364]/30 border-dashed animate-[spin_60s_linear_infinite]">
</div>
<div
class="absolute w-[220px] h-[220px] md:w-[440px] md:h-[440px] rounded-full border border-[#8eb364]/40 animate-[spin_40s_linear_infinite_reverse]">
<div class="absolute top-0 left-1/2 w-1.5 h-1.5 bg-[#8eb364] -translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-0 left-1/2 w-1.5 h-1.5 bg-[#8eb364] -translate-x-1/2 translate-y-1/2"></div>
</div>
<div
class="absolute w-[140px] h-[140px] md:w-[280px] md:h-[280px] rounded-full border border-[#8eb364]/50 border-dotted animate-[spin_20s_linear_infinite]">
</div>
<div
class="absolute w-[60px] h-[60px] md:w-[120px] md:h-[120px] rounded-full border border-[#8eb364]/60 flex items-center justify-center">
<div class="w-3 h-3 bg-[#8eb364]/80 rotate-45 animate-pulse"></div>
</div>
</div>
<!-- Top Section: Header & Radar -->
<div class="relative z-30 flex flex-col md:flex-row justify-between items-start p-6 md:p-12 w-full">
<div class="flex flex-col gap-1 pointer-events-none">
<div class="font-['DM_Mono',monospace] text-xs text-[#8eb364]/60 mb-2 font-light tracking-widest">04 //
INFRASTRUCTURE</div>
<h1
class="font-['Cormorant_Garamond',serif] text-5xl md:text-7xl font-light tracking-tight text-[#c3d1b6] leading-none italic">
Network Nexus
</h1>
<h2
class="font-['Space_Grotesk',sans-serif] text-xl md:text-2xl font-light tracking-tight text-[#8eb364] uppercase mt-1">
Operational / Live
</h2>
</div>
<div class="hidden md:flex items-start gap-6 pointer-events-none mt-2">
<div class="font-['DM_Mono',monospace] text-xs tracking-widest text-[#8eb364]/60 uppercase font-light mt-1">
MATRIX // SYNC
</div>
<div
class="grid grid-cols-3 gap-1.5 text-center text-[#c3d1b6] font-light text-xs tracking-widest font-['Space_Grotesk',sans-serif]">
<div class="col-start-2 text-[#8eb364]">N</div>
<div class="col-start-1 row-start-2">W</div>
<div class="col-start-2 row-start-2 flex items-center justify-center text-[#8eb364]">
<iconify-icon icon="solar:target-linear" class="text-sm" style="stroke-width: 1.5;"></iconify-icon>
</div>
<div class="col-start-3 row-start-2">E</div>
<div class="col-start-2 row-start-3 text-[#8eb364]">S</div>
</div>
</div>
</div>
<!-- Bottom Section: HUD Feature Modules & Logs -->
<div
class="relative z-30 flex flex-col md:flex-row justify-between items-end p-6 md:p-12 w-full mt-auto gap-8 md:gap-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 w-full md:w-3/4">
<!-- Module 1 -->
<div class="border-t border-[#8eb364]/30 pt-4 relative group/feat">
<div class="absolute -top-1 left-0 w-2 h-2 bg-[#8eb364]/50"></div>
<div class="flex items-center gap-3 mb-4 text-[#c3d1b6]">
<iconify-icon icon="solar:cpu-linear" class="text-xl" style="stroke-width: 1.5;"></iconify-icon>
<h3 class="font-['Space_Grotesk',sans-serif] text-lg font-light tracking-tight uppercase">Photon Engine</h3>
</div>
<div class="font-['DM_Mono',monospace] text-xs text-[#8eb364]/80 font-light tracking-widest space-y-2">
<div class="flex justify-between"><span>STATUS</span><span class="text-[#c3d1b6]">STABLE</span></div>
<div class="flex justify-between"><span>LOAD</span><span class="text-[#c3d1b6]">78.4%</span></div>
<div class="w-full h-[3px] bg-[#8eb364]/20 mt-4 relative overflow-hidden">
<div class="absolute top-0 left-0 h-full w-[78%] bg-[#8eb364] opacity-80"></div>
</div>
</div>
</div>
<!-- Module 2 -->
<div class="border-t border-[#8eb364]/30 pt-4 relative group/feat">
<div class="absolute -top-1 left-0 w-2 h-2 bg-[#8eb364]/50"></div>
<div class="flex items-center gap-3 mb-4 text-[#c3d1b6]">
<iconify-icon icon="solar:network-linear" class="text-xl" style="stroke-width: 1.5;"></iconify-icon>
<h3 class="font-['Space_Grotesk',sans-serif] text-lg font-light tracking-tight uppercase">Synaptic Path</h3>
</div>
<div class="font-['DM_Mono',monospace] text-xs text-[#8eb364]/80 font-light tracking-widest space-y-2">
<div class="flex justify-between"><span>ROUTE</span><span class="text-[#c3d1b6]">CLEARED</span></div>
<div class="flex justify-between"><span>DELAY</span><span class="text-[#c3d1b6]">02 MS</span></div>
<div class="flex gap-1.5 mt-4 h-[3px] items-center">
<div class="w-1.5 h-1.5 bg-[#8eb364] opacity-100 animate-pulse"></div>
<div class="w-1.5 h-1.5 bg-[#8eb364] opacity-40"></div>
<div class="w-1.5 h-1.5 bg-[#8eb364] opacity-80 animate-pulse" style="animation-delay: 0.5s;"></div>
<div class="w-1.5 h-1.5 bg-[#8eb364] opacity-30"></div>
<div class="w-1.5 h-1.5 bg-[#8eb364] opacity-90 animate-pulse" style="animation-delay: 0.2s;"></div>
<div class="w-1.5 h-1.5 bg-[#8eb364] opacity-50"></div>
<div class="w-1.5 h-1.5 bg-[#8eb364] opacity-100 animate-pulse" style="animation-delay: 0.7s;"></div>
</div>
</div>
</div>
<!-- Module 3 -->
<div class="border-t border-[#8eb364]/30 pt-4 relative group/feat">
<div class="absolute -top-1 left-0 w-2 h-2 bg-[#8eb364]/50"></div>
<div class="flex items-center gap-3 mb-4 text-[#c3d1b6]">
<iconify-icon icon="solar:shield-check-linear" class="text-xl" style="stroke-width: 1.5;"></iconify-icon>
<h3 class="font-['Space_Grotesk',sans-serif] text-lg font-light tracking-tight uppercase">Security Wall</h3>
</div>
<div class="font-['DM_Mono',monospace] text-xs text-[#8eb364]/80 font-light tracking-widest space-y-2">
<div class="flex justify-between"><span>HASH</span><span class="text-[#c3d1b6]">SHA-256</span></div>
<div class="flex justify-between"><span>SHIELD</span><span class="text-[#c3d1b6]">INTACT</span></div>
<div class="flex items-end gap-1 h-3 mt-3">
<div class="w-full bg-[#8eb364] opacity-60 h-[40%]"></div>
<div class="w-full bg-[#8eb364] opacity-90 h-[100%] animate-pulse"></div>
<div class="w-full bg-[#8eb364] opacity-40 h-[60%]"></div>
<div class="w-full bg-[#8eb364] opacity-70 h-[80%] animate-pulse" style="animation-delay: 0.3s;"></div>
<div class="w-full bg-[#8eb364] opacity-50 h-[30%]"></div>
<div class="w-full bg-[#8eb364] opacity-100 h-[90%] animate-pulse" style="animation-delay: 0.6s;"></div>
</div>
</div>
</div>
</div>
<!-- Bottom Right Logs -->
<div class="pointer-events-none text-right flex flex-col items-end gap-3 hidden md:flex">
<div
class="font-['Space_Grotesk',sans-serif] text-5xl font-light tracking-tight text-[#c3d1b6] leading-none flex items-start gap-4">
<span class="font-['DM_Mono',monospace] text-xs text-[#8eb364]/60 font-light tracking-widest mt-1">NET // CAP</span>
<div>98<span class="text-[#8eb364]">.</span>7%</div>
</div>
<div
class="font-['DM_Mono',monospace] text-xs text-[#c3d1b6] opacity-75 uppercase tracking-widest space-y-1 font-light mt-2">
<p>CONNECTION: SECURE</p>
<p>FREQ: 2048 MHZ</p>
<p>SYSTEM: RUNNING</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
const card = document.getElementById('main-card');
const cvs = document.getElementById('env-canvas');
const ctx = cvs.getContext('2d');
let w, h, rect;
function resize() {
w = cvs.width = window.innerWidth;
h = cvs.height = window.innerHeight;
rect = card.getBoundingClientRect();
}
window.addEventListener('resize', resize);
card.addEventListener('mousemove', (e) => {
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty('--mouse-x', `${x}px`);
card.style.setProperty('--mouse-y', `${y}px`);
});
const debris = Array.from({length: 60}, () => ({
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
vx: (Math.random() - 0.5) * 0.4,
vy: (Math.random() - 0.5) * 0.4
}));
let rain = [];
let splashes = [];
function animateEnvironment() {
ctx.clearRect(0, 0, w, h);
ctx.lineCap = 'round';
// Background Debris & Connectivity Lines (Longer reach)
ctx.fillStyle = 'rgba(22, 31, 20, 0.8)';
ctx.strokeStyle = 'rgba(22, 31, 20, 0.4)';
ctx.lineWidth = 1;
for (let i = 0; i < debris.length; i++) {
let p = debris[i];
p.x += p.vx; p.y += p.vy;
if(p.x < 0 || p.x > w) p.vx *= -1;
if(p.y < 0 || p.y > h) p.vy *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, 2, 0, Math.PI*2);
ctx.fill();
for (let j = i + 1; j < debris.length; j++) {
let p2 = debris[j];
let dx = p.x - p2.x, dy = p.y - p2.y;
if (dx*dx + dy*dy < 25000) { // Increased line length
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
}
}
// More Rain Generation (Higher volume, longer lines)
for(let k = 0; k < 4; k++) {
if (Math.random() < 0.6) {
rain.push({ x: Math.random() * w, y: -50, vy: 18 + Math.random() * 8, l: 40 + Math.random() * 80 });
}
}
// Rain Physics & Layout Collision
ctx.strokeStyle = '#8eb364'; // Solid color for gooey filter
ctx.lineWidth = 3; // Thicker lines for liquid feel
for (let i = rain.length - 1; i >= 0; i--) {
let r = rain[i];
r.y += r.vy;
ctx.beginPath();
ctx.moveTo(r.x, r.y);
ctx.lineTo(r.x, r.y - r.l);
ctx.stroke();
if (r.y >= rect.top && r.y - r.vy <= rect.top && r.x > rect.left && r.x < rect.right) {
for(let k = 0; k < 6; k++) {
splashes.push({
x: r.x, y: rect.top,
vx: (Math.random() - 0.5) * 5,
vy: -Math.random() * 3 - 1,
life: 1,
size: 3 + Math.random() * 5
});
}
rain.splice(i, 1);
} else if (r.y > h) {
rain.splice(i, 1);
}
}
// Gooey Splash Physics (Pooling and sliding)
ctx.fillStyle = '#8eb364'; // Solid color for gooey filter
for (let i = splashes.length - 1; i >= 0; i--) {
let s = splashes[i];
s.x += s.vx;
s.y += s.vy;
s.vy += 0.25; // Gravity
// Pool at the top edge of the card
if (s.y > rect.top) {
s.y = rect.top;
s.vy = 0;
s.vx *= 0.85; // Friction
}
s.life -= 0.02; // Slow shrink
if (s.life <= 0) {
splashes.splice(i, 1);
continue;
}
ctx.beginPath();
ctx.arc(s.x, s.y, s.size * s.life, 0, Math.PI*2);
ctx.fill();
}
requestAnimationFrame(animateEnvironment);
}
resize();
animateEnvironment();
</script>
</section>