Remix

Make your own version of Smart Port Command

Edit the prompt below and generate a customized version in seconds.

Original by M. Michael Antony Xavier

Describe your app

Design a premium, futuristic, AI-powered web application for Smart Ports & Ocean Logistics Management with a modern ocean-blue theme inspired by advanced maritime command centers. The interface should feel like a real-time control dashboard used by international shipping companies and port authorities. Use a full-screen responsive layout with a deep navy blue (#081A2E) background combined with gradient shades of ocean blue, cyan, and teal. The UI should have glowing glassmorphism cards, rounded corners (16–20px), subtle shadows, neon cyan borders, animated wave effects in the background, smooth hover animations, and a professional maritime aesthetic. Typography should be clean and modern using fonts like Inter or Poppins with white text, cyan highlights, and vibrant status colors (green, yellow, orange, red). The application must support both desktop and tablet screens with a clean, organized dashboard similar to enterprise software.

The application begins with a Login Page that features a full-screen animated ocean background with moving waves and particles. In the center, place a glassmorphism login card displaying the company logo, titled "AI-Powered Ocean Route Prediction & Fraud Detection System", followed by the subtitle "Smart Ports & Logistics Through Ocean Intelligence." The login form should include email, password, Remember Me checkbox, Forgot Password link, Login button with glowing blue effects, Microsoft and Google sign-in options, and a secure authentication message. After successful login, the user should be redirected to the dashboard with a smooth fade transition.

The Home Dashboard should resemble a professional maritime command center. A fixed top navigation bar should contain the company logo, project title, live date and time, search bar, notification bell with unread alert count, AI assistant icon, profile avatar, and settings menu. On the left side, include a collapsible navigation menu with icons and menu items including Dashboard, Live Ship Tracking, Route Prediction, Fraud Detection, Alerts, Weather Intelligence, Ports, Ship Analytics, Reports, AI Insights, Settings, and Logout.

The center of the dashboard should feature a large interactive ocean map occupying most of the screen. The map should display realistic satellite ocean imagery with animated ships moving along shipping lanes. Show multiple ports such as Singapore, Chennai, Dubai, Rotterdam, and Shanghai using glowing port icons. Draw three route types: Actual Route (solid red line), AI Recommended Route (green dashed line), and Original Planned Route (yellow dashed line). Display restricted maritime zones with semi-transparent red polygons and warning symbols. Each ship marker should display vessel information on hover, including Ship Name, MMSI Number, Cargo Type, Speed, Course, Destination, ETA, Risk Score, and Current Status. Animate ships moving smoothly across the ocean.

On the right side of the dashboard, create an AI Route Prediction Panel showing origin port, destination port, total distance, weather conditions, estimated travel time, fuel consumption, carbon emissions, congestion level, recommended route, and AI Prediction Accuracy: 97.87% displayed prominently inside a glowing circular progress indicator with green color representing high confidence. Below this, include a Risk Analysis section with circular gauges showing Fraud Risk, Weather Risk, Delay Risk, Piracy Risk, Fuel Efficiency Score, and Overall Voyage Safety Score.

Create an AI Fraud Detection Panel that continuously monitors vessel behavior using artificial intelligence. The system should automatically detect suspicious activities such as route deviation, unauthorized port entry, AIS signal loss, unusual speed changes, illegal cargo unloading, restricted zone violations, identity spoofing, cargo tampering, and prolonged unscheduled stops. Each detected event should generate a risk score between 0 and 100 with High, Medium, or Low severity labels. Include an AI explanation describing why the activity was classified as suspicious and recommended actions for authorities.

Include a prominent Real-Time Alert Center with animated notification cards showing live alerts. Alerts should use different colors based on severity: red for critical, orange for warning, yellow for medium, and green for informational messages. Example alerts include "Route Deviation Detected", "Unauthorized Stop", "Restricted Zone Entry", "AIS Signal Lost", "High Wave Warning", "Possible Cargo Tampering", "Weather Risk Increased", and "Piracy Risk Nearby." Each alert card should display timestamp, ship name, location coordinates, severity level, AI confidence score, recommended action, and quick action buttons such as Notify Captain, Contact Port Authority, Dispatch Coast Guard, View Route, and Ignore Alert.

Add a Weather Intelligence Panel displaying live marine weather information including wave height, wind speed, wind direction, rainfall probability, visibility, sea temperature, ocean current direction, cyclone alerts, and storm warnings. Weather information should be represented with animated icons and colorful data cards. Integrate weather conditions directly into AI route optimization so route recommendations automatically adjust based on changing sea conditions.

Create a Live Ship Monitoring Panel showing all active vessels with search and filtering options. Each vessel card should include ship name, MMSI, vessel type, cargo category, destination, current speed, latitude, longitude, ETA, current status, and colored risk badge. Clicking any vessel should immediately center the interactive map on its location and display its complete voyage history.

Add a Ship Analytics Section with modern charts and graphs displaying total active ships, completed voyages, delayed shipments, fraud incidents, average prediction accuracy, fuel consumption trends, monthly cargo volume, and port congestion analytics. Use interactive bar charts, line charts, donut charts, and area graphs with blue and cyan color palettes. Include KPI cards showing Active Ships, AI Accuracy (97.87%), Fraud Cases Prevented, Average ETA Accuracy, Fuel Savings, and Carbon Reduction.

Include a Recent Activity Timeline listing the latest maritime events such as new voyage creation, successful arrivals, weather updates, AI recommendations, fraud detections, and alert acknowledgments. Each activity should include timestamps, user actions, and system-generated insights.

Create a Notifications Center supporting Email, SMS, WhatsApp, Push Notifications, and Port Authority Broadcasts. Users should be able to configure notification preferences and alert severity levels.

Implement an AI Assistant Chatbot floating at the bottom-right corner. The chatbot should answer questions such as "Where is my ship?", "Predict arrival time", "Why was this route changed?", "Show fraud analysis", "Generate logistics report", and "Recommend safest route."

Finally, ensure the entire application has a premium enterprise appearance with cinematic ocean visuals, animated glowing UI elements, glassmorphism cards, soft blue neon lighting, smooth transitions, responsive layouts, professional maritime icons, high-resolution maps, modern dashboards, and a polished design that looks like software used by global shipping companies such as Maersk, MSC, CMA CGM, and DP World. The interface should feel intelligent, futuristic, and capable of managing real-time global ocean logistics through AI, with the AI Route Prediction Accuracy consistently displayed as 97.87% throughout the application.

Free to use. No credit card required.