APM Terminal Operations Intelligence
by UNES97
- mcp-db-demo
- public
index.html•11.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APM Terminals - Operations Intelligence Platform</title>
<!-- Ubuntu Font -->
<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=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'maersk': {
DEFAULT: '#00ADEF',
50: '#E8F4F8',
100: '#C2E3EF',
500: '#00ADEF',
600: '#0090C9',
700: '#0077A3',
},
'apm': {
DEFAULT: '#003C71',
50: '#E6F0F5',
100: '#CCDBE6',
500: '#003C71',
600: '#00335E',
700: '#002A4B',
},
},
fontFamily: {
'ubuntu': ['Ubuntu', 'sans-serif'],
}
}
}
}
</script>
<style>
body {
font-family: 'Ubuntu', sans-serif;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Top Bar -->
<div class="bg-apm-500 text-white">
<div class="max-w-7xl mx-auto px-6 py-2 flex items-center justify-between text-xs">
<div class="flex items-center gap-6">
<span class="font-medium">OPERATIONS INTELLIGENCE PLATFORM</span>
</div>
<div class="flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full" id="statusDot"></div>
<span id="statusText" class="font-medium">Connecting...</span>
</div>
</div>
</div>
<!-- Main Header -->
<header class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<img src="logo.png" alt="APM Terminals" class="h-12">
<div class="border-l border-gray-300 h-12"></div>
<div>
<h1 class="text-xl font-bold text-gray-900">APM Terminals</h1>
<p class="text-sm text-gray-600">AI Operations Assistant</p>
</div>
</div>
<div class="text-right">
<div class="text-xs text-gray-500 uppercase tracking-wider">Tangier Med Terminal</div>
<div class="text-sm font-semibold text-gray-900" id="currentDate"></div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-6 py-6">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 h-[calc(100vh-200px)] flex flex-col">
<!-- Quick Queries - Fixed at Top -->
<div class="border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-6 py-3">
<div class="flex items-center gap-2 overflow-x-auto hide-scrollbar">
<svg class="w-4 h-4 text-apm-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
<button onclick="sendSuggestion('What visits are at the terminal today?')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
What visits are at the terminal today?
</button>
<button onclick="sendSuggestion('Show me all inbound vessels this year')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
Show me all inbound vessels this year
</button>
<button onclick="sendSuggestion('What is the CMPH of MSC vessels?')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
What is the CMPH of MSC vessels?
</button>
<button onclick="sendSuggestion('Show me vessel details for the latest visit')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
Show me vessel details for the latest visit
</button>
<button onclick="sendSuggestion('Which vessels are currently operational?')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
Which vessels are currently operational?
</button>
<button onclick="sendSuggestion('What is the productivity of Maersk Line vessels?')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
What is the productivity of Maersk Line vessels?
</button>
<button onclick="sendSuggestion('Which crane worked the longest on working vessels?')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
Which crane worked the longest on working vessels?
</button>
<button onclick="sendSuggestion('Show me cranes assigned to visit TNG001')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
Show me cranes assigned to visit TNG001
</button>
<button onclick="sendSuggestion('Show inbound vessels from 2025-01-01 to 2025-01-31')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
Show inbound vessels for January 2025
</button>
<button onclick="sendSuggestion('Show me crane delays')"
class="flex-shrink-0 px-3 py-1.5 bg-white hover:bg-apm-500 border border-gray-200 hover:border-apm-500 text-gray-700 hover:text-white rounded-full text-xs transition-all shadow-sm">
Show me crane delays
</button>
</div>
</div>
<!-- Messages Container -->
<div id="messages" class="flex-1 overflow-y-auto p-6">
<!-- Welcome Message (shown only initially) -->
<div id="welcomeMessage" class="flex flex-col items-center justify-center h-full">
<div class="text-center">
<div class="w-16 h-16 bg-apm-50 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-apm-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
</svg>
</div>
<h2 class="text-xl font-semibold text-gray-900 mb-2">How can I help you today?</h2>
<p class="text-sm text-gray-500">Ask me about vessel operations, schedules, or productivity metrics</p>
</div>
</div>
</div>
<!-- Input Area -->
<div class="border-t border-gray-200 bg-white px-6 py-4">
<form id="chatForm" class="flex gap-3">
<textarea
id="messageInput"
rows="1"
placeholder="Ask about vessel visits, productivity metrics, schedules, or any operational data..."
class="flex-1 px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apm-500 focus:border-transparent focus:bg-white resize-none transition-all"
style="max-height: 100px;"></textarea>
<button
id="sendButton"
type="submit"
disabled
class="px-5 bg-apm-500 hover:bg-apm-600 text-white rounded-lg font-medium transition-all disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-2 shadow-sm hover:shadow-md">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</button>
</form>
</div>
</div>
</main>
<script src="script.js"></script>
<script>
// Update current date
document.getElementById('currentDate').textContent = new Date().toLocaleDateString('en-US', {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric'
});
</script>
<style>
/* Hide scrollbar but allow scrolling */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/UNES97/mcp-db-demo'
If you have feedback or need assistance with the MCP directory API, please join our Discord server