rotonda 0.5.2-alpha.0

composable, programmable BGP engine
Documentation
@(title)
@use "Navigation";

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rotonda WebUI</title>
    <link rel="icon" type="image/svg+xml"
                     href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyODkuNjEgMjU2LjE3Ij48cGF0aCBkPSJtMjgxLjY3LDQ5LjA5bC0yNS4xMy0zMi43NXMwLS4wMS0uMDEtLjAyQzI0My45MS0uMTIsMjE4LjY2LTQuMzEsMTg1LjQzLDQuNTJjLTI3LjY0LDcuMzQtNTguNjgsMjMuMDItODguMzEsNDQuNDYtNS41OCw0LjA0LTExLjA0LDguMjMtMTYuMzgsMTIuNTctMjguMzgsMjMuMDctNTEuNTUsNDktNjUuOCw3My44LTE3LjEzLDI5LjgxLTE5LjYxLDU1LjI5LTcsNzEuNzNoMHMyNS4xNCwzMi43NywyNS4xNCwzMi43N2M4LjUzLDExLjEyLDIyLjg1LDE2LjY0LDQxLjUsMTYuMzEsOC45Mi0uMTYsMTguODQtMS42NSwyOS42LTQuNTEsMjcuNjQtNy4zNCw1OC42OC0yMy4wMiw4OC4zMS00NC40Niw1LjU4LTQuMDQsMTEuMDQtOC4yMywxNi4zOC0xMi41NywyOC4zOC0yMy4wNyw1MS41NS00OSw2NS44LTczLjgsMTcuMTMtMjkuODEsMTkuNjEtNTUuMjksNy03MS43M1ptLTM5LjU1LDQuMThjLTIwLjY4LS4xMy01MS41LDkuNzMtODUuMzIsMzAuMjctMS40OS45LTIuNjYsMi4yNi0zLjMzLDMuODdoMGMtMSwyLjQyLS42NCw1LjE5Ljk2LDcuMjYsMS41OSwyLjA3LDQuMTcsMy4xNCw2Ljc2LDIuOGw2My4yNS04LjMzYy01LjI5LDcuNzItMTEuNDUsMTUuNTItMTguMzgsMjMuMjVsLTQyLjE3LDUuNTVjLTIuNTkuMzQtNC44LDIuMDQtNS44MSw0LjQ1LTEsMi40Mi0uNjQsNS4xOC45Niw3LjI1bDEyLjEzLDE1LjhjLTIuNjUsMi4xNi01LjM0LDQuMzEtOC4wOSw2LjQyLTIuNzcsMi4xMy01LjU0LDQuMTYtOC4yOSw2LjE1bC0xMi4xMy0xNS44MWMtMS41OS0yLjA3LTQuMTctMy4xNC02Ljc2LTIuOC0yLjU5LjM0LTQuOCwyLjA0LTUuODEsNC40NWwtMTYuMywzOS4zNWMtOS41Miw0Ljg0LTE4LjY2LDguNzgtMjcuMjUsMTEuODFsMjQuNDctNTkuMDdjMS0yLjQyLjY0LTUuMTgtLjk2LTcuMjUtMS41OS0yLjA3LTQuMTctMy4xNC02Ljc2LTIuOGgwYy0xLjcyLjIzLTMuMzEuOTktNC41NywyLjItMTcuMTgsMTYuNDctMzEuMjEsMzMuNzEtNDAuNzMsNTAuMjgtNS4wOSw4Ljg1LTguNTksMTcuMTQtMTAuNDksMjQuNDktMTAuODctLjA3LTE4Ljk1LTIuODktMjMuMTctOC4zOC0xMy45NS0xOC4xOCwxMS4xNC02OS40NSw2OC45OS0xMTYuNTcsNS4zNC00LjM1LDEwLjc5LTguNTYsMTYuMzctMTIuNTksNDEuMzMtMjkuODQsODAuNTYtNDQuNDEsMTA1LjcyLTQ0Ljg0LDExLjY3LS4yLDIwLjMyLDIuNjMsMjQuNzQsOC4zOSw0LjEyLDUuMzYsNC42OSwxMy45LDEuOTcsMjQuMzhaIi8+PC9zdmc+"/>
    <style>
        table, tr, td, th {
            border: 1px solid black;
        }
        table {
            /*min-width: 95%;*/
            white-space: nowrap;
        }
        td {
            padding: 2px 10px;
        }
        th {
            position: sticky;
            top: 0;
            padding: 5px;
            background: whitesmoke;
        }

        span.green, td.green {
            background: greenyellow;
        }
        span.yellow, td.yellow {
            background: yellow;
        }
        span.red, td.red {
            background: red;
        }

        td:has(span) {
            padding: 0;
        }

        ul.legend {
            list-style: none
        }

        ul.legend li::before {padding: 0; margin: 0; vertical-align: middle; line-height: 1rem}
        ul.legend li.green::before {content: "•"; color: green; font-size: 3em; }
        ul.legend li.yellow::before {content: "•"; color: yellow; font-size: 3em; }
        ul.legend li.local::before {content: "L: "; color: white; font-weight: bold;}
        ul.legend li.remote::before {content: "R: "; color: white; font-weight: bold;}

        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: fit-content;
            background-color: #555;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            top: 2em;
            left: 50%;
            opacity: 0;
            transition: opacity 0.3s;
            transform: translateX(-50%);
            font-weight: initial;
        }

        .tooltip .tooltiptext::before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent #555 transparent;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        
    </style>
</head>
<body>
    <div class="container">
        <nav>
        <Navigation />
        </nav>
        <main>
            <h1>@title</h1>
            @child_content
        </main>
    </div>
</body>
</html>