obmp-docker/portal/index.html

107 lines
2.5 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenBMP Lab Portal</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #111217;
color: #d8dee9;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
.header {
text-align: center;
margin-bottom: 2.5rem;
}
.header h1 {
font-size: 1.8rem;
color: #e2e8f0;
margin-bottom: 0.5rem;
}
.header p {
color: #7b8da0;
font-size: 0.95rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
max-width: 900px;
width: 100%;
}
.card {
background: #1a1d26;
border: 1px solid #2a2e3a;
border-radius: 10px;
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, transform 0.15s;
}
.card:hover {
border-color: #3b82f6;
transform: translateY(-2px);
}
.card .icon {
font-size: 2rem;
margin-bottom: 0.75rem;
display: block;
}
.card h2 {
font-size: 1.1rem;
color: #e2e8f0;
margin-bottom: 0.4rem;
}
.card p {
font-size: 0.85rem;
color: #7b8da0;
line-height: 1.4;
}
.footer {
margin-top: 3rem;
color: #4a5568;
font-size: 0.8rem;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>OpenBMP Lab</h1>
<p>BGP Monitoring Protocol &middot; Route Analysis &middot; Telemetry</p>
</div>
<div class="grid">
<a href="/grafana/" class="card">
<span class="icon">&#x1F4CA;</span>
<h2>Grafana Dashboards</h2>
<p>BGP analytics, RR Loc-RIB diff, IS-IS topology, telemetry, and 27+ dashboards.</p>
</a>
<a href="/exabgp/" class="card">
<span class="icon">&#x1F6E4;</span>
<h2>ExaBGP Route Injector</h2>
<p>Inject and withdraw BGP routes into the lab fabric via ExaBGP API.</p>
</a>
<a href="/traffic/" class="card">
<span class="icon">&#x1F680;</span>
<h2>Traffic Generator</h2>
<p>RFC 2544 throughput, latency, and loss testing across the network.</p>
</a>
</div>
<div class="footer">
OpenBMP Docker Stack &middot; 9 IOS-XR Routers &middot; CML Lab
</div>
</body>
</html>