Now I have design inspiration showing a professional dark-themed dashboard aesthetic. Let me create the ICS Security Dashboard with:
Let me start by updating the theme and building the dashboard:
Now let me create the tailwind config and update globals.css with a professional dark SOC theme, then build the dashboard:
Now let me create the main dashboard page with all the required components:
Now let me create the sensor card component:
Now let me create the chart component:
Now let me create the attack simulator component:
Now let me create the alert banner component:
I've successfully created a professional Industrial Control System (ICS) Security Dashboard UI. Here's what I've built: ## Dashboard Features: ✅ **Dark Theme SOC Aesthetic** - Professional deep dark background with cybersecurity-focused color scheme (green/cyan for normal, orange for warning, red for emergency) ✅ **3 Sensor Monitoring Cards** - Each displays: - Sensor ID (S1, S2, S3) - Large, bold distance readings in cm - Status badges (Normal/Warning/Emergency) with appropriate colors - Animated alert indicators for emergency states - Threshold reference information ✅ **Real-Time Line Chart** - Displays trends for all three sensors over time with: - Color-coded lines for each sensor - Interactive tooltips - Threshold zones (Normal >20cm, Warning 10-20cm, Emergency <10cm) ✅ **CLI-Style Attack Simulator** - A command-line interface for simulating attacks: - Command format: `attack S1 5.0` (to set sensor S1 to 5.0 cm) - Command logging with timestamps - Error handling for invalid commands - Reset button to restore default values ✅ **Emergency Alert Banner** - Dynamically displays at the top when any sensor enters emergency state with pulsing alert indicators ✅ **Live Monitoring** - Sensors update automatically every 3 seconds with realistic fluctuations, and the chart maintains a rolling 20-point history The dashboard is fully interactive, responsive, and follows professional SOC design patterns with proper spacing, typography, and visual hierarchy.
I'll guide you through deploying the ICS Security Dashboard to Vercel. Here are your deployment options:
Extract the ZIP file and run:
npx create-next-app@latest --template ./Deploy to Vercel:
npm install -g vercel
vercelThe dashboard is production-ready with:
Which deployment method would you like to use, or would you like me to help with anything else before deploying?
You can send messages while the preview loads