mirror of
https://github.com/CyberSecurityUP/NeuroSploit.git
synced 2026-06-30 07:15:30 +02:00
feat: 2026 UI overhaul, stability fixes, and NVIDIA NIM support
- Overhauled frontend with 2026 hacking HUD aesthetic (neon colors, glassmorphism) - Added native support for NVIDIA NIM as a Tier 2 provider - Fixed critical backend crashes in autonomous_agent.py and knowledge_processor.py - Updated Kali sandbox build to Go 1.26 and fixed health check reliability - Integrated Space Grotesk and JetBrains Mono fonts
This commit is contained in:
hasan72341
@@ -5,6 +5,9 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>NeuroSploit v3 - AI-Powered Penetration Testing</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -17,19 +17,19 @@ export default function Button({
|
||||
disabled,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-700 disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
const baseStyles = 'inline-flex items-center justify-center font-bold uppercase tracking-widest rounded-none transition-all duration-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed border'
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500',
|
||||
secondary: 'bg-dark-900 text-white hover:bg-dark-800 focus:ring-dark-500',
|
||||
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
||||
ghost: 'text-dark-300 hover:text-white hover:bg-dark-900/50 focus:ring-dark-500',
|
||||
primary: 'bg-cyber-green/10 text-cyber-green border-cyber-green/50 hover:bg-cyber-green hover:text-black hover:shadow-neon-green',
|
||||
secondary: 'bg-cyber-blue/10 text-cyber-blue border-cyber-blue/50 hover:bg-cyber-blue hover:text-black hover:shadow-neon-blue',
|
||||
danger: 'bg-cyber-red/10 text-cyber-red border-cyber-red/50 hover:bg-cyber-red hover:text-black hover:shadow-[0_0_20px_rgba(255,0,85,0.4)]',
|
||||
ghost: 'bg-transparent text-dark-400 border-transparent hover:text-white hover:bg-white/5',
|
||||
}
|
||||
|
||||
const sizes = {
|
||||
sm: 'px-3 py-1.5 text-sm',
|
||||
md: 'px-4 py-2 text-sm',
|
||||
lg: 'px-6 py-3 text-base',
|
||||
sm: 'px-4 py-1.5 text-[10px] font-mono',
|
||||
md: 'px-6 py-2.5 text-xs font-mono',
|
||||
lg: 'px-8 py-3.5 text-sm font-mono',
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -11,17 +11,25 @@ interface CardProps {
|
||||
|
||||
export default function Card({ children, className, title, subtitle, action }: CardProps) {
|
||||
return (
|
||||
<div className={clsx('bg-dark-800 rounded-xl border border-dark-900/50', className)}>
|
||||
<div className={clsx('cyber-card group', className)}>
|
||||
{(title || action) && (
|
||||
<div className="flex items-center justify-between p-4 border-b border-dark-900/50">
|
||||
<div>
|
||||
{title && <h3 className="text-lg font-semibold text-white">{title}</h3>}
|
||||
{subtitle && <p className="text-sm text-dark-400 mt-1">{subtitle}</p>}
|
||||
<div className="flex items-center justify-between p-5 border-b border-cyber-green/10 relative overflow-hidden">
|
||||
{/* Subtle header pulse glow */}
|
||||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-cyber-green/20 to-transparent"></div>
|
||||
|
||||
<div className="z-10">
|
||||
{title && (
|
||||
<h3 className="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-cyber-green rounded-full shadow-neon-green"></span>
|
||||
{title}
|
||||
</h3>
|
||||
)}
|
||||
{subtitle && <p className="text-[10px] text-dark-400 mt-1 uppercase tracking-widest font-mono">{subtitle}</p>}
|
||||
</div>
|
||||
{action}
|
||||
<div className="z-10">{action}</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4">{children}</div>
|
||||
<div className="p-5">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,16 +13,28 @@ export default function Header() {
|
||||
const title = pageTitles[location.pathname] || 'NeuroSploit'
|
||||
|
||||
return (
|
||||
<header className="h-16 bg-dark-800 border-b border-dark-900/50 flex items-center justify-between px-6">
|
||||
<h1 className="text-xl font-semibold text-white">{title}</h1>
|
||||
<header className="h-16 glass-panel border-b border-cyber-green/10 flex items-center justify-between px-8 z-40">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-dark-400">
|
||||
<div className="w-1 h-6 bg-cyber-green/50 rounded-full animate-pulse"></div>
|
||||
<h1 className="text-xl font-bold text-white tracking-tighter uppercase font-sans">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 font-mono text-[11px]">
|
||||
<div className="flex items-center gap-2 px-3 py-1 bg-cyber-green/5 border border-cyber-green/20 rounded text-cyber-green">
|
||||
<span className="w-1.5 h-1.5 bg-cyber-green rounded-full animate-pulse"></span>
|
||||
SCANNER_ACTIVE
|
||||
</div>
|
||||
|
||||
<span className="text-dark-400 uppercase tracking-widest hidden sm:block">
|
||||
{new Date().toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})}
|
||||
<span className="ml-2 text-cyber-green/30">|</span>
|
||||
<span className="ml-2">SEC_LEVEL: ALPHA</span>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -8,12 +8,17 @@ interface LayoutProps {
|
||||
|
||||
export default function Layout({ children }: LayoutProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen bg-dark-700 overflow-hidden">
|
||||
<div className="flex min-h-screen bg-cyber-black overflow-hidden selection:bg-cyber-green selection:text-black">
|
||||
{/* Dynamic scanning line */}
|
||||
<div className="fixed top-0 left-0 w-full h-1 bg-cyber-green/20 blur-[2px] z-[9999] animate-scanline pointer-events-none"></div>
|
||||
|
||||
<Sidebar />
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<div className="flex-1 flex flex-col min-w-0 relative">
|
||||
<Header />
|
||||
<main className="flex-1 p-6 overflow-auto">
|
||||
{children}
|
||||
<main className="flex-1 p-6 overflow-auto scrollbar-thin scrollbar-thumb-cyber-green/20">
|
||||
<div className="max-w-[1600px] mx-auto animate-fadeIn">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -63,25 +63,27 @@ export default function Sidebar() {
|
||||
<aside
|
||||
className={`${
|
||||
sidebarCollapsed ? 'w-16' : 'w-64'
|
||||
} bg-dark-800 border-r border-dark-900/50 flex flex-col transition-all duration-300 ease-in-out flex-shrink-0`}
|
||||
} glass-panel border-r border-cyber-green/10 flex flex-col transition-all duration-300 ease-in-out flex-shrink-0 z-50`}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className={`border-b border-dark-900/50 ${sidebarCollapsed ? 'p-3' : 'p-4'}`}>
|
||||
<div className={`border-b border-cyber-green/10 ${sidebarCollapsed ? 'p-3' : 'p-4'}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Shield className="w-6 h-6 text-white" />
|
||||
<Link to="/" className="flex items-center gap-3 min-w-0 group">
|
||||
<div className="w-10 h-10 bg-cyber-green/10 border border-cyber-green/30 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:shadow-neon-green transition-all duration-300">
|
||||
<Shield className="w-6 h-6 text-cyber-green animate-pulse-glow" />
|
||||
</div>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-lg font-bold text-white truncate">NeuroSploit</h1>
|
||||
<p className="text-xs text-dark-400">v3.0 AI Pentest</p>
|
||||
<h1 className="text-lg font-bold text-white truncate tracking-tighter uppercase">
|
||||
Neuro<span className="text-cyber-green">Sploit</span>
|
||||
</h1>
|
||||
<p className="text-[10px] text-cyber-green/50 font-mono tracking-widest uppercase">v3.0 AI PENTEST</p>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="text-dark-400 hover:text-white transition-colors p-1 rounded hover:bg-dark-700 flex-shrink-0"
|
||||
className="text-dark-400 hover:text-cyber-green transition-all p-1 rounded hover:bg-cyber-green/5 flex-shrink-0 border border-transparent hover:border-cyber-green/20"
|
||||
title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
{sidebarCollapsed ? (
|
||||
@@ -94,16 +96,17 @@ export default function Sidebar() {
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-2 overflow-y-auto overflow-x-hidden">
|
||||
<nav className="flex-1 p-2 overflow-y-auto overflow-x-hidden space-y-4 pt-4">
|
||||
{navGroups.map((group) => (
|
||||
<div key={group.label} className="mb-3">
|
||||
<div key={group.label}>
|
||||
{!sidebarCollapsed && (
|
||||
<p className="px-3 mb-1 text-[10px] font-semibold uppercase text-dark-500 tracking-wider">
|
||||
<p className="px-3 mb-2 text-[10px] font-bold uppercase text-dark-500 tracking-[0.2em] flex items-center gap-2">
|
||||
<span className="w-1 h-1 bg-cyber-green/30 rounded-full"></span>
|
||||
{group.label}
|
||||
</p>
|
||||
)}
|
||||
{sidebarCollapsed && <div className="border-t border-dark-700/50 mx-2 mb-2 mt-1" />}
|
||||
<ul className="space-y-0.5">
|
||||
{sidebarCollapsed && <div className="border-t border-cyber-green/5 mx-2 mb-2 mt-1" />}
|
||||
<ul className="space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isActive = location.pathname === item.path
|
||||
const Icon = item.icon
|
||||
@@ -114,16 +117,19 @@ export default function Sidebar() {
|
||||
title={sidebarCollapsed ? item.label : undefined}
|
||||
className={`flex items-center ${
|
||||
sidebarCollapsed ? 'justify-center px-2' : 'gap-3 px-3'
|
||||
} py-2.5 rounded-lg transition-colors ${
|
||||
} py-2.5 rounded transition-all duration-200 relative group overflow-hidden ${
|
||||
isActive
|
||||
? 'bg-primary-500/20 text-primary-500'
|
||||
: 'text-dark-300 hover:bg-dark-900/50 hover:text-white'
|
||||
? 'bg-cyber-green/10 text-cyber-green border-l-2 border-cyber-green shadow-[inset_4px_0_10px_rgba(0,255,102,0.1)]'
|
||||
: 'text-dark-300 hover:bg-cyber-green/5 hover:text-white border-l-2 border-transparent'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
<Icon className={`w-5 h-5 flex-shrink-0 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110 group-hover:text-cyber-green'}`} />
|
||||
{!sidebarCollapsed && (
|
||||
<span className="whitespace-nowrap text-sm">{item.label}</span>
|
||||
<span className="whitespace-nowrap text-sm font-medium tracking-tight">{item.label}</span>
|
||||
)}
|
||||
|
||||
{/* Hover effect light */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-cyber-green/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
@@ -134,10 +140,18 @@ export default function Sidebar() {
|
||||
</nav>
|
||||
|
||||
{/* Status */}
|
||||
<div className="p-3 border-t border-dark-900/50">
|
||||
<div className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'gap-2'} text-sm`}>
|
||||
<Activity className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="text-dark-400">System Online</span>}
|
||||
<div className="p-4 border-t border-cyber-green/10 bg-cyber-green/[0.02]">
|
||||
<div className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'gap-3'} text-[11px] font-mono`}>
|
||||
<div className="relative">
|
||||
<Activity className="w-4 h-4 text-cyber-green" />
|
||||
<div className="absolute inset-0 bg-cyber-green rounded-full blur-[4px] animate-pulse opacity-50"></div>
|
||||
</div>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-white font-bold uppercase tracking-tighter">System Online</span>
|
||||
<span className="text-cyber-green/50 text-[9px] uppercase">Node: NS-2026-ALPHA</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -3,61 +3,133 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg-primary: #1a1a2e;
|
||||
--bg-secondary: #16213e;
|
||||
--bg-card: #0f3460;
|
||||
--text-primary: #eee;
|
||||
--text-secondary: #aaa;
|
||||
--accent: #e94560;
|
||||
--border: #333;
|
||||
--bg-primary: #050505;
|
||||
--bg-secondary: #0a0a0a;
|
||||
--bg-card: #121212;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #94a3b8;
|
||||
--accent: #00ff66;
|
||||
--border: #1a1a1a;
|
||||
--cyber-green: #00ff66;
|
||||
--cyber-blue: #00f0ff;
|
||||
--cyber-purple: #bd00ff;
|
||||
--cyber-red: #ff0055;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
font-family: 'Space Grotesk', -apple-system, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Background Grid Effect */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 255, 102, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 255, 102, 0.03) 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Scanline Effect */
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
rgba(18, 16, 16, 0) 50%,
|
||||
rgba(0, 0, 0, 0.1) 50%
|
||||
), linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 0.02),
|
||||
rgba(0, 255, 0, 0.01),
|
||||
rgba(0, 0, 255, 0.02)
|
||||
);
|
||||
background-size: 100% 4px, 3px 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
/* Custom cyber scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-card);
|
||||
border-radius: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
/* Cyber Text Effects */
|
||||
.cyber-glitch {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
.cyber-glitch::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2px;
|
||||
text-shadow: -1px 0 var(--cyber-red);
|
||||
background: var(--bg-primary);
|
||||
overflow: hidden;
|
||||
clip: rect(0, 900px, 0, 0);
|
||||
animation: glitch-anim 2s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
@keyframes glitch-anim {
|
||||
0% { clip: rect(10px, 9999px, 50px, 0); }
|
||||
20% { clip: rect(30px, 9999px, 10px, 0); }
|
||||
40% { clip: rect(80px, 9999px, 40px, 0); }
|
||||
60% { clip: rect(20px, 9999px, 70px, 0); }
|
||||
80% { clip: rect(40px, 9999px, 20px, 0); }
|
||||
100% { clip: rect(60px, 9999px, 80px, 0); }
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
/* Glassmorphism utility */
|
||||
.glass-panel {
|
||||
background: rgba(10, 10, 10, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.cyber-card {
|
||||
@apply glass-panel transition-all duration-300;
|
||||
}
|
||||
|
||||
.cyber-card:hover {
|
||||
border-color: rgba(0, 255, 102, 0.3);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 102, 0.1);
|
||||
}
|
||||
|
||||
|
||||
@@ -6,18 +6,33 @@ export default {
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Space Grotesk', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
cyber: {
|
||||
black: '#050505',
|
||||
darker: '#0a0a0a',
|
||||
dark: '#121212',
|
||||
gray: '#1a1a1a',
|
||||
green: '#00ff66',
|
||||
blue: '#00f0ff',
|
||||
purple: '#bd00ff',
|
||||
red: '#ff0055',
|
||||
yellow: '#f3ff00',
|
||||
},
|
||||
primary: {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#e94560',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d',
|
||||
500: '#00ff66', // Switching primary to cyber green
|
||||
600: '#00e65c',
|
||||
700: '#00cc52',
|
||||
800: '#00b347',
|
||||
900: '#00993d',
|
||||
},
|
||||
dark: {
|
||||
50: '#f8fafc',
|
||||
@@ -27,12 +42,38 @@ export default {
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#1a1a2e',
|
||||
800: '#16213e',
|
||||
900: '#0f3460',
|
||||
950: '#0a0a15',
|
||||
700: '#050505', // True black for main bg
|
||||
800: '#0a0a0a', // Darker cards
|
||||
900: '#121212', // Subtle borders
|
||||
950: '#020202',
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'glitch': 'glitch 1s linear infinite',
|
||||
'scanline': 'scanline 8s linear infinite',
|
||||
'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
|
||||
'matrix': 'matrix 20s linear infinite',
|
||||
},
|
||||
keyframes: {
|
||||
glitch: {
|
||||
'2%, 64%': { transform: 'translate(2px, 0) skew(0deg)' },
|
||||
'4%, 60%': { transform: 'translate(-2px, 0) skew(0deg)' },
|
||||
'62%': { transform: 'translate(0, 0) skew(5deg)' },
|
||||
},
|
||||
scanline: {
|
||||
'0%': { transform: 'translateY(-100%)' },
|
||||
'100%': { transform: 'translateY(100%)' },
|
||||
},
|
||||
'pulse-glow': {
|
||||
'0%, 100%': { opacity: '1', filter: 'drop-shadow(0 0 5px #00ff66)' },
|
||||
'50%': { opacity: '0.7', filter: 'drop-shadow(0 0 20px #00ff66)' },
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
'neon-green': '0 0 5px #00ff66, 0 0 20px rgba(0, 255, 102, 0.2)',
|
||||
'neon-blue': '0 0 5px #00f0ff, 0 0 20px rgba(0, 240, 255, 0.2)',
|
||||
'neon-purple': '0 0 5px #bd00ff, 0 0 20px rgba(189, 0, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||
Reference in New Issue
Block a user