backend/app/views/login.pug

html
    head
        title Flitter
        meta(name="viewport" content="width=device-width, initial-scale=1")
        link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous")
        script(src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous")
        script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous")
        script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous")
        script(src="https://kit.fontawesome.com/5043ba9cc5.js" crossorigin="anonymous")
        link(href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet")

        style(type="text/css").
            @import url('https://fonts.googleapis.com/css?family=Rajdhani');
            html,
            body {
                background-color:#343a40;
            }
            .container-intro {
                margin-top: 1em;
                color: #cccccc;
                text-align: center;
            }
            #name {
                font-family: 'Merienda', cursive;
            }
            #login {
                width: 50em;
            }
            .login-container {
                display: grid;
                color: #cccccc;
                //- border: solid 7em #cccccc;
                align-self: center;
                background: transparent;
                -webkit-transition: all .5s ease;
                transition: all .5s ease;
                outline: none;
                box-shadow: 20em 38em 34em -26em rgba(0, 0, 0, 0.2);
                border-radius: 82em 65em 185em 1085em/72em 225em 58em 15em;
                width: 90%;
                margin: auto;
            }
            .btn-login {
                color: #cccccc;
                border: solid em #cccccc;
                margin: .5rem;
                align-self: center;
                background: transparent;
                -webkit-transition: all .5s ease;
                transition: all .5s ease;
                outline: none;
                box-shadow: 20em 38em 34em -26em rgba(0, 0, 0, 0.2);
                border-radius: 255em 15em 225em 15em/15em 225em 15em 255em;
                padding: 1em;
            }
            .login-container div a {
                width: 100%;
            }
            .icons {
                font-size: 1.8em;
                padding: 1em 1em 1em 1em;
            }

    body
    .container-intro
        h1 Welcome to 
            span#name #{AppName}
        h2 Choose your login method:

    .container-login
        .login-container
            div
                a.btn.btn-login.btn-light(href="/auth/flitter/login")
                    i.icons.fas.fa-sign-in-alt
                    span Local Login
            div    
                a.btn.btn-login.btn-light(href="/auth/github_oauth/login")
                    i.icons.fab.fa-github
                    span Login with GitHub
            div
                a.btn.btn-login.btn-light.disabled(href="google.com")
                    i.icons.fab.fa-google
                    span Login with Google
            div
                a.btn.btn-login.btn-light.disabled(href="microsoft.com")
                    i.icons.fab.fa-microsoft
                    span Login with Microsoft
            div
                a.btn.btn-login.btn-light.disabled(href="apple.com")
                    i.icons.fab.fa-apple
                    span Login with Apple