<!DOCTYPE html>
<html>
    <head>
        <title>loli-safe - A self hosted upload service</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
        <link rel="stylesheet" type="text/css" href="/css/style.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
        <script type="text/javascript" src="https://use.fontawesome.com/cd26baa9bd.js"></script>
        <script type="text/javascript" src="/js/auth.js"></script>
    </head>
    <body>

        <style type="text/css">
            section#login {
                background-color: #f5f6f8;
            }
        </style>

        <section id='login' class="hero is-fullheight">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title">
                        Dashboard Access
                    </h1>
                    <h2 class="subtitle">
                        Login or register
                    </h2>
                    <div class="columns">
                        <div class="column">
                            <p class="control">
                                <input id='user' class="input" type="text" placeholder="Your username">
                            </p>
                            <p class="control">
                                <input id='pass' class="input" type="password" placeholder="Your password">
                            </p>
                            
                            <p class="control has-addons is-pulled-right">
                                <a class="button" id='registerBtn' onclick="page.do('register')">
                                    <span>Register</span>
                                </a>
                                <a class="button" id='loginBtn' onclick="page.do('login')">
                                    <span>Log in</span>
                                </a>
                            </p>

                        </div>
                        <div class="column is-hidden-mobile"></div>
                        <div class="column is-hidden-mobile"></div>
                    </div>
                </div>
            </div>
        </section>

    </body>
</html>