<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>%APP_NAME% - Maintenance</title>
</head>

<style>
    body {
        font-family: sans-serif;
        color: #222;
        background-color: #eee;
    }

    ul {
        list-style: none;
        padding-left: .7em;
    }

    ul li::before {
        content: "\2026\20";
    }

    .container {
        margin: 1em;
    }

    @media screen and (min-width: 1024px) {
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
</style>

<body>

<div class="container">

    <div>
        <h1>
            The <strong>%APP_NAME%</strong> is in maintenance mode
        </h1>

        <p>This may be due to</p>

        <ul>
            <li>The gates of heaven were closed.</li>
            <li>Someone tried to do a simple maintenance task which did not go as planned.</li>
            <li>DHCP decided to give me another ip address.</li>
            <li>Somebody's stolen the power chord and now the battery is empty.</li>
            <li>It might be a good time to take a nap.</li>
        </ul>
    </div>


    <div>
        <iframe width="480" height="320"
                src="https://www.youtube-nocookie.com/embed/0aV_vHcunSQ"
                allow="autoplay; encrypted-media" allowfullscreen>
        </iframe>
    </div>

    <div>
        <a href="https://github.com/engelsystem/engelsystem/issues">Bugs / Features</a>
        · <a href="https://github.com/engelsystem/engelsystem/">Development Platform</a>
    </div>
</div>

</body>
</html>
