<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>APIdoc</title>
    <link rel="shortcut icon" href="static/images/apidoc.svg">
    <style>
        body {
            background-color: #131417;
        }

        .box {
            width: 300px;
            height: 200px;
            background: #2c303a;
            border-radius: 30px;
            margin: 50px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transform: scale(1);
            transition: all .3s ease;
        }

        .box:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px #333743f0;
        }

        .swagger, .redoc, .rapidoc {
            margin: 10px;
            color: white;
            font-size: 30px;
            user-select: none;
        }

        .box img {
            user-select: none;
        }

    </style>

</head>
<body>
<div class="box" onclick="window.location.href= '{{ swagger_url }}';return false">
    <img height="64"
         src="static/images/swagger.svg"
         alt="Swagger UI">
    <a class="swagger">Swagger</a>
</div>
<div class="box" onclick="window.location.href= '{{ redoc_url }}';return false">
    <img height="64"
         src="static/images/redoc.svg"
         alt="ReDoc">
    <a class="redoc">ReDoc</a>
</div>
<div class="box" onclick="window.location.href= '{{ rapidoc_url }}';return false">
    <img height="64"
         src="static/images/rapidoc.svg"
         alt="RapiDoc">
    <a class="rapidoc">RapiDoc</a>
</div>
</body>
</html>