61 lines
2.3 KiB
HTML
61 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Metrics</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8fafc; padding: 24px; }
|
|
h1 { font-size: 20px; font-weight: 600; color: #0f172a; margin-bottom: 20px; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
|
|
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; transition: box-shadow 0.15s; }
|
|
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
|
|
.card-label { font-size: 13px; color: #64748b; margin-bottom: 8px; }
|
|
.card-value { font-size: 28px; font-weight: 700; color: #0f172a; }
|
|
.card-change { margin-top: 8px; font-size: 13px; font-weight: 500; }
|
|
.arrow { font-size: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 id="title"></h1>
|
|
<div class="grid" id="grid"></div>
|
|
<script>
|
|
(function () {
|
|
function esc(t) { var d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
|
|
|
|
function render(payload) {
|
|
document.getElementById('title').textContent = payload.title || 'Dashboard';
|
|
var grid = document.getElementById('grid');
|
|
grid.innerHTML = '';
|
|
|
|
(payload.metrics || []).forEach(function (m) {
|
|
var changeHtml = '';
|
|
if (m.change) {
|
|
var ct = m.change_type || 'neutral';
|
|
var color = ct === 'up' ? '#16a34a' : ct === 'down' ? '#dc2626' : '#6b7280';
|
|
var arrow = ct === 'up' ? '\u25B2' : ct === 'down' ? '\u25BC' : '\u2014';
|
|
changeHtml = '<div class="card-change"><span class="arrow" style="color:' + color + '">' + arrow + '</span> <span style="color:' + color + '">' + esc(m.change) + '</span></div>';
|
|
}
|
|
var card = document.createElement('div');
|
|
card.className = 'card';
|
|
card.innerHTML = '<div class="card-label">' + esc(m.label || '') + '</div>'
|
|
+ '<div class="card-value">' + esc(m.value || '') + '</div>'
|
|
+ changeHtml;
|
|
grid.appendChild(card);
|
|
});
|
|
}
|
|
|
|
window.addEventListener('message', function (event) {
|
|
var msg = event.data;
|
|
if (msg && msg.type === 'mcp-app-data') {
|
|
render(msg.payload);
|
|
}
|
|
});
|
|
|
|
window.parent.postMessage({ type: 'mcp-app-ready' }, '*');
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|