feat(saas): live interactive health dashboard, MCP protocol explorer, sandbox widgets & unified navigation
This commit is contained in:
+550
@@ -0,0 +1,550 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Aura Courier MCP — Live Health & Telemetry Dashboard</title>
|
||||
<meta name="description" content="Real-time operational status, latency, memory utilization, and webhook metrics for Aura Courier MCP." />
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c5cff'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E" />
|
||||
<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=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #07080a;
|
||||
--bg-elev: #0d0e11;
|
||||
--bg-card: #0f1115;
|
||||
--line: rgba(255, 255, 255, 0.08);
|
||||
--line-strong: rgba(255, 255, 255, 0.16);
|
||||
--text: #f4f5f7;
|
||||
--text-dim: #a4a8b3;
|
||||
--text-faint: #6b7080;
|
||||
--accent: #7c5cff;
|
||||
--accent-glow: rgba(124, 92, 255, 0.35);
|
||||
--good: #10b981;
|
||||
--good-glow: rgba(16, 185, 129, 0.25);
|
||||
--warn: #f59e0b;
|
||||
--danger: #ef4444;
|
||||
--cyan: #00d4ff;
|
||||
--radius: 12px;
|
||||
--font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
|
||||
--font-mono: "Geist Mono", "SF Mono", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 0%, rgba(124, 92, 255, 0.15), transparent 70%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.08), transparent 50%);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* Top Navigation */
|
||||
header {
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(7, 8, 10, 0.85);
|
||||
backdrop-filter: blur(16px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.logo-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #7c5cff, #00d4ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 16px var(--accent-glow);
|
||||
}
|
||||
.brand-title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.brand-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-left: 6px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.pill-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
color: var(--good);
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.pulse-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--good);
|
||||
box-shadow: 0 0 8px var(--good);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.85); }
|
||||
}
|
||||
.nav-btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-dim);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nav-btn:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--line-strong);
|
||||
background: var(--bg-elev);
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
main {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 36px 24px;
|
||||
}
|
||||
.hero-banner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 32px;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.hero-desc {
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
.auto-refresh-tag {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-mono);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Metrics Grid */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.metric-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.metric-card:hover {
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-faint);
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-val {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.metric-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Section Cards */
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 32px 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.section-title span {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Webhook Cards Grid */
|
||||
.courier-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.courier-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.courier-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.courier-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.badge-ok {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--good);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.webhook-box {
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--cyan);
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Memory / Performance Bar */
|
||||
.perf-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.bar-group {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.bar-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.bar-label-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
}
|
||||
.bar-bg {
|
||||
height: 8px;
|
||||
background: var(--bg-elev);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
/* Raw JSON Section */
|
||||
.json-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.json-header {
|
||||
padding: 12px 20px;
|
||||
background: var(--bg-elev);
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.json-code {
|
||||
padding: 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #93c5fd;
|
||||
overflow-x: auto;
|
||||
max-height: 340px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: 1px solid var(--line);
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="nav-container">
|
||||
<div class="logo-group">
|
||||
<div class="brand-mark">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="brand-title">Aura Courier MCP</span>
|
||||
<span class="brand-sub">v2.4.0 · Telemetry</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
<div class="pill-status">
|
||||
<span class="pulse-dot"></span>
|
||||
<span id="global-status-text">All Systems Operational</span>
|
||||
</div>
|
||||
<a href="/" class="nav-btn">← Courier Hub</a>
|
||||
<a href="/mcp" class="nav-btn">MCP Playground ↗</a>
|
||||
<a href="https://auraajenticai.cloud" target="_blank" class="nav-btn">Aura Main ↗</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="hero-banner">
|
||||
<div>
|
||||
<h1 class="hero-title">Live Health & Telemetry Matrix</h1>
|
||||
<p class="hero-desc">Real-time metrics directly from Docker container <code style="font-family:var(--font-mono);color:var(--cyan);">ix4jsg321uqfrko9qrrq4k7m</code></p>
|
||||
</div>
|
||||
<div class="auto-refresh-tag">
|
||||
<span class="pulse-dot" style="width:6px;height:6px;"></span>
|
||||
Live auto-refresh: <span id="ping-timer" style="color:var(--text)">active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Metrics -->
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">API Health</div>
|
||||
<div class="metric-val" style="color:var(--good);">200 OK</div>
|
||||
<div class="metric-sub">Streamable-HTTP Ready</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Client Roundtrip Latency</div>
|
||||
<div class="metric-val" id="metric-latency" style="color:var(--cyan);">-- ms</div>
|
||||
<div class="metric-sub">Real-time browser ping</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Registered Tools</div>
|
||||
<div class="metric-val" id="metric-tools">9</div>
|
||||
<div class="metric-sub">Spatial, Fraud & Courier</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">System Uptime</div>
|
||||
<div class="metric-val" id="metric-uptime">--</div>
|
||||
<div class="metric-sub">Continuous production runtime</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Courier Carrier Webhook Matrix -->
|
||||
<h2 class="section-title">Carrier Webhook Listeners <span>(Real-Time Ingestion)</span></h2>
|
||||
<div class="courier-grid">
|
||||
<div class="courier-card">
|
||||
<div class="courier-head">
|
||||
<span class="courier-name"><span style="color:#10b981;">●</span> Steadfast Courier</span>
|
||||
<span class="badge-ok">LISTENING</span>
|
||||
</div>
|
||||
<div class="webhook-box">POST /webhooks/steadfast</div>
|
||||
<div style="font-size:12px;color:var(--text-dim);">Consignment dispatch, tracking & NDR updates</div>
|
||||
</div>
|
||||
<div class="courier-card">
|
||||
<div class="courier-head">
|
||||
<span class="courier-name"><span style="color:#ef4444;">●</span> Pathao Express</span>
|
||||
<span class="badge-ok">LISTENING</span>
|
||||
</div>
|
||||
<div class="webhook-box">POST /webhooks/pathao</div>
|
||||
<div style="font-size:12px;color:var(--text-dim);">Real-time courier rider events & return alerts</div>
|
||||
</div>
|
||||
<div class="courier-card">
|
||||
<div class="courier-head">
|
||||
<span class="courier-name"><span style="color:#f97316;">●</span> RedX Delivery</span>
|
||||
<span class="badge-ok">LISTENING</span>
|
||||
</div>
|
||||
<div class="webhook-box">POST /webhooks/redx</div>
|
||||
<div style="font-size:12px;color:var(--text-dim);">Doorstep pickup & nationwide hub tracking</div>
|
||||
</div>
|
||||
<div class="courier-card">
|
||||
<div class="courier-head">
|
||||
<span class="courier-name"><span style="color:#0ea5e9;">●</span> Paperfly Go</span>
|
||||
<span class="badge-ok">LISTENING</span>
|
||||
</div>
|
||||
<div class="webhook-box">POST /webhooks/paperfly</div>
|
||||
<div style="font-size:12px;color:var(--text-dim);">Remote union delivery status & OTP verification</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Engines & Infrastructure -->
|
||||
<h2 class="section-title">Intelligent AI Engines & Infrastructure</h2>
|
||||
<div class="metrics-grid" style="grid-template-columns: 1fr 1fr;">
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Spatial & Geocoding Engine</div>
|
||||
<div class="metric-val" style="font-size:18px;color:#a78bfa;">Google Maps Platform</div>
|
||||
<div class="metric-sub">Attribution: <code>gmp_git_agentskills_v1</code> · Routes v2 & Geocoding</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Fraud Risk Detection</div>
|
||||
<div class="metric-val" style="font-size:18px;color:#38bdf8;">Steadfast + BD Telco Regex</div>
|
||||
<div class="metric-sub">Zero Mock Data · 013-019 carrier prefix & historical cancel rate</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Runtime Memory & Performance -->
|
||||
<div class="perf-card">
|
||||
<div class="metric-label">Node.js V8 Runtime Telemetry</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-row">
|
||||
<div class="bar-label-group">
|
||||
<span style="color:var(--text-dim);">Heap Memory Allocated</span>
|
||||
<span id="mem-heap-text" style="font-family:var(--font-mono);font-weight:600;">-- MB / -- MB</span>
|
||||
</div>
|
||||
<div class="bar-bg">
|
||||
<div id="mem-heap-bar" class="bar-fill" style="width: 25%; background: linear-gradient(90deg, #7c5cff, #00d4ff);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label-group">
|
||||
<span style="color:var(--text-dim);">Resident Set Size (RSS)</span>
|
||||
<span id="mem-rss-text" style="font-family:var(--font-mono);font-weight:600;">-- MB</span>
|
||||
</div>
|
||||
<div class="bar-bg">
|
||||
<div id="mem-rss-bar" class="bar-fill" style="width: 35%; background: linear-gradient(90deg, #10b981, #00d4ff);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Raw JSON Response -->
|
||||
<div class="json-card">
|
||||
<div class="json-header">
|
||||
<span>Raw JSON Payload (Automated Monitoring Output)</span>
|
||||
<a href="/health?format=json" target="_blank" style="color:var(--cyan);font-family:var(--font-mono);font-size:12px;">Open in New Tab ↗</a>
|
||||
</div>
|
||||
<pre class="json-code" id="raw-json">Fetching live telemetry...</pre>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Aura Courier MCP v2.4 · Built with pride by <a href="https://auraajenticai.cloud" style="color:var(--text);font-weight:600;">Aura Ajentic AI</a> · Apache 2.0 License</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function formatUptime(seconds) {
|
||||
const d = Math.floor(seconds / (3600*24));
|
||||
const h = Math.floor(seconds % (3600*24) / 3600);
|
||||
const m = Math.floor(seconds % 3600 / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
if (d > 0) return `${d}d ${h}h ${m}m`;
|
||||
if (h > 0) return `${h}h ${m}m ${s}s`;
|
||||
return `${m}m ${s}s`;
|
||||
}
|
||||
|
||||
async function refreshHealth() {
|
||||
const t0 = performance.now();
|
||||
try {
|
||||
const res = await fetch('/health?format=json');
|
||||
const lat = Math.round(performance.now() - t0);
|
||||
document.getElementById('metric-latency').textContent = `${lat} ms`;
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
document.getElementById('metric-tools').textContent = data.tools_count || 9;
|
||||
document.getElementById('metric-uptime').textContent = formatUptime(data.performance?.uptime_seconds || 0);
|
||||
|
||||
const heapUsed = data.performance?.heap_used_mb || 0;
|
||||
const heapTotal = data.performance?.heap_total_mb || 1;
|
||||
const rss = data.performance?.rss_mb || 0;
|
||||
|
||||
document.getElementById('mem-heap-text').textContent = `${heapUsed} MB / ${heapTotal} MB`;
|
||||
const heapPct = Math.min(Math.round((heapUsed / heapTotal) * 100), 100);
|
||||
document.getElementById('mem-heap-bar').style.width = `${heapPct}%`;
|
||||
|
||||
document.getElementById('mem-rss-text').textContent = `${rss} MB`;
|
||||
document.getElementById('mem-rss-bar').style.width = `${Math.min(Math.round((rss / 256) * 100), 100)}%`;
|
||||
|
||||
document.getElementById('raw-json').textContent = JSON.stringify(data, null, 2);
|
||||
}
|
||||
} catch (e) {
|
||||
document.getElementById('global-status-text').textContent = 'Connecting...';
|
||||
}
|
||||
}
|
||||
|
||||
refreshHealth();
|
||||
setInterval(refreshHealth, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user