<!DOCTYPE html>
<html lang="en">
<head>
    <!-- general -->
    <title>Juxtaposition Log In</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="/web/manifest.json">

    <!-- windows/ios/chrome -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-title" content="Juxtaposition">
    <meta name="application-name" content="Juxtaposition">
    <meta name="msapplication-TileColor" content="#1b1f3b">
    <meta name="theme-color" content="#1b1f3b">

    <!-- open graph/embeds -->
    <meta property="og:title" content="Juxtaposition">
    <meta property="og:description" content="An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://juxt.pretendo.network/">
    <meta property="og:image" content="https://pretendo.network/assets/images/opengraph/opengraph-image.png">
    <meta property="og:image:alt" content="Juxtaposition">
    <meta property="og:site_name" content="Juxtaposition">

    <!-- twitter embeds -->
    <meta name="twitter:url" content="https://juxt.pretendo.network/">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@PretendoNetwork">
    <meta name="twitter:title" content="Pretendo Network">
    <meta name="twitter:description" content="An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles">
    <meta name="twitter:image" content="https://pretendo.network/assets/images/opengraph/opengraph-image.png">

    <!-- google seo -->
    <meta name="description" content="An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles">
    <meta name="robots" content="index, follow">

    <!-- favicon -->
    <link rel="apple-touch-icon" href="/web/icons/icon-144x144.png">
    <link rel="icon" type="image/png" href="/web/icons/icon-144x144.png">
    <link rel="shortcut icon" href="/web/icons/icon-72x72.png">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;display=swap" rel="stylesheet">
</head>
<body>
<div class="main-body">
    <link rel="stylesheet" href="/css/login.css">
    <div id="toast"></div>
    <div class="wrapper">
        <div class="account-form-wrapper">
            <a class="logotype" href="https://pretendo.network">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
                    <g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
                        <g id="logo" transform="translate(553 467)">
                            <rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0"></rect>
                            <g id="XMLID_6_" transform="translate(8.222 1.418)">
                                <path id="XMLID_15_" d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z" transform="translate(-64.246 -23.389)" fill="#9d6ff3"></path>
                                <path id="XMLID_14_" d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z" transform="translate(-57.476 -7.693)" fill="#9d6ff3"></path>
                                <path id="XMLID_9_" d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z" transform="translate(-44.6 -40.406)" fill="#9d6ff3"></path>
                            </g>
                        </g>
                        <text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17" font-family="Poppins-Bold, Poppins" font-weight="700">
                            <tspan x="0" y="0">Pretendo</tspan>
                        </text>
                    </g>
                </svg>
            </a>
            <form action="/login" method="post" class="account">
                <h2>Juxtaposition Sign in</h2>
                <p>Enter your account details below</p>
                <div>
                    <label for="username">Username</label>
                    <input name="username" id="username" required="">
                </div>
                <div>
                    <label for="password">Password</label>
                    <input name="password" id="password" type="password" required="">
                    <a href="https://pretendo.network/account/forgot-password" class="pwdreset">Forgot your password?</a>
                </div>
                <input name="grant_type" id="grant_type" type="hidden" value="password">
                <div class="buttons">
                    <button type="submit">Login</button>
                    <a href="https://pretendo.network/account/register" class="register">Don't have an account?</a>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    function Toast(text) {
        let x = document.getElementById("toast");
        x.innerText = text;
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
    }
    <%if(toast) {%>
        Toast("<%=toast%>");
    <%}%>
</script>
</body></html>