jramos
ba4d16396c
Implemented a sophisticated cyber-intelligence visual design with: DESIGN DIRECTION: - "Tactical Intelligence Command Center" aesthetic - Typography: JetBrains Mono for data/code + Outfit for UI labels - Color Palette: Deep navy (#0A0E27) base with electric cyan (#00D9FF) accents - Visual Language: Grid patterns, glowing borders, scanning animations - Motion: Smooth fade-ins, pulse effects, hover transformations FRONTEND CHANGES: - Redesigned App.css with comprehensive intelligence dashboard theme - Custom CSS classes: intel-card, intel-button, intel-input, status-badge - Added scanning line animations and pulse glow effects - Implemented grid background pattern and scrollbar styling COMPONENT UPDATES: - App.js: Transformed all UI sections to intel theme - Header with stats dashboard - Search/filter cards - CVE list with expandable cards - Document management - Quick check interface - JIRA ticket tracking - LoginForm.js: Redesigned authentication portal - All modals: Add/Edit CVE, Add/Edit JIRA tickets UI FEATURES: - Monospace fonts for technical data - Glowing accent borders on interactive elements - Status badges with animated pulse indicators - Data rows with hover states - Responsive grid layouts - Modal overlays with backdrop blur TECHNICAL: - Tailwind CSS extended with custom intel theme - Google Fonts: JetBrains Mono & Outfit - Maintained all existing functionality - Build tested successfully - No breaking changes to business logic Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
103 lines
4.0 KiB
HTML
103 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<meta
|
|
name="description"
|
|
content="Steam CVE Dashboard - Vulnerability tracking and documentation"
|
|
/>
|
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
<!--
|
|
manifest.json provides metadata used when your web app is installed on a
|
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
-->
|
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
<!--
|
|
Notice the use of %PUBLIC_URL% in the tags above.
|
|
It will be replaced with the URL of the `public` folder during the build.
|
|
Only files inside the `public` folder can be referenced from the HTML.
|
|
|
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
work correctly both with client-side routing and a non-root public URL.
|
|
Learn how to configure a non-root public URL by running `npm run build`.
|
|
-->
|
|
<title>CVE Dashboard</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=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
'mono': ['JetBrains Mono', 'monospace'],
|
|
'sans': ['Outfit', 'system-ui', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
'intel': {
|
|
'darkest': '#0A0E27',
|
|
'dark': '#131937',
|
|
'medium': '#1E2749',
|
|
'accent': '#00D9FF',
|
|
'accent-dim': '#0099BB',
|
|
'danger': '#FF3366',
|
|
'warning': '#FFB800',
|
|
'success': '#00FF88',
|
|
'grid': '#1E2749',
|
|
}
|
|
},
|
|
backgroundImage: {
|
|
'grid-pattern': 'linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px)',
|
|
},
|
|
backgroundSize: {
|
|
'grid': '20px 20px',
|
|
},
|
|
animation: {
|
|
'scan': 'scan 3s ease-in-out infinite',
|
|
'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
|
|
'fade-in': 'fade-in 0.5s ease-out',
|
|
'slide-up': 'slide-up 0.4s ease-out',
|
|
},
|
|
keyframes: {
|
|
'scan': {
|
|
'0%, 100%': { transform: 'translateY(-100%)', opacity: '0' },
|
|
'50%': { transform: 'translateY(100%)', opacity: '0.3' },
|
|
},
|
|
'pulse-glow': {
|
|
'0%, 100%': { boxShadow: '0 0 5px rgba(0, 217, 255, 0.3)' },
|
|
'50%': { boxShadow: '0 0 20px rgba(0, 217, 255, 0.6)' },
|
|
},
|
|
'fade-in': {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
'slide-up': {
|
|
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-intel-darkest">
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
<div id="root"></div>
|
|
<!--
|
|
This HTML file is a template.
|
|
If you open it directly in the browser, you will see an empty page.
|
|
|
|
You can add webfonts, meta tags, or analytics to this file.
|
|
The build step will place the bundled scripts into the <body> tag.
|
|
|
|
To begin the development, run `npm start` or `yarn start`.
|
|
To create a production bundle, use `npm run build` or `yarn build`.
|
|
-->
|
|
</body>
|
|
</html>
|