index-maintenance.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SWViewer | Maintenance</title>
    
    <meta name="application-name" content="SWViewer">
    <meta name="author" content="Iluvatar, Ajbura, 1997kB">
    <meta name="description" content="App for viewing queue of edits on small wikis for SWMT">
    <meta name="keywords" content="SWMT">
    <meta name="msapplication-TileColor" content="#808d9f">
    <!-- icons -->
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
    <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <!-- Add iOS meta tags and icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#191919">
    <meta name="apple-mobile-web-app-title" content="SWViewer">
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
    <!-- PWA -->
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }
        a { color: rgb(93, 193, 251); }
        body {
            margin: 0;
            padding: 16px 16px 0;
            font-family: Arial, Helvetica, sans-serif;
            overflow: hidden;
            background-color: rgb(53, 53, 53);
            background-image: url(https://source.unsplash.com/1600x900?nature);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        .dark-card {
            padding: 8px 16px;
            background-color: #0000009c;
            backdrop-filter: blur(2px);
            border-radius: 8px;
        }
        .flex-wrap {
            max-width: 450px;
            margin: auto;
            height: auto;
            padding: 48px 16px;
            text-align: center;
        }
        .emoji { font-size: 90px; }
        .msg { opacity: .6; }
    </style>
</head>
<body>
    <div class="flex-wrap dark-card">
        <span class="emoji">&#8603;</span>
        <h1>Under maintenance</h1>
        <span class="msg"><b>SWViewer</b> is under maintenance. For more information you can join our <a href='https://discord.gg/UTScYTR' rel='noopener noreferrer' target='_blank'>discord server</a> or <a href='http://ircredirect.toolforge.org/?server=irc.freenode.net&channel=swviewer&consent=yes' rel='noopener noreferrer' target='_blank'>IRC channel</a>.</span>
    </div>
    <span class="dark-card" style="border-radius: 8px 8px 0 0;">Image source: <a href='https://source.unsplash.com/' rel='noopener noreferrer' target='_blank'>Unsplash</a></span>
</body>
</html>