extends /layout/layout

block head
    +css("css/page/login.css")

block content 
    include include/flush.pug
    h2 天蚕 / 地雀
    .container#container
        .form-container.sign-up-container
            form(action='#' onsubmit='return false')
                h1 创建账户
                .social-container
                    a.social(href='#')
                        i.fab.fa-facebook-f
                    a.social(href='#')
                        i.fab.fa-google-plus-g
                    a.social(href='#')
                        i.fab.fa-linkedin-in
                span 使用您的邮箱注册
                input(type='text', placeholder='请输入用户名')
                input(type='email', placeholder='请输入邮箱')
                input(type='password', placeholder='请输入密码')
                include include/form_security.pug
                button(type='submit') 注册
        .form-container.sign-in-container
            form(action='/login' method='post')
                h1 登录
                .social-container
                    a.social(href='#')
                        i.fab.fa-facebook-f
                    a.social(href='#')
                        i.fab.fa-google-plus-g
                    a.social(href='#')
                        i.fab.fa-linkedin-in
                span 填写您的账户
                input(type='text',name="username" , placeholder='请输入邮箱')
                input(type='password',name="password" , placeholder='请输入密码')
                include include/form_security.pug
                a(href='#') 忘记密码?
                button 登录
        .overlay-container
            .overlay
                .overlay-panel.overlay-left
                    h1 欢迎回来!
                    p 填写您的账户，与我们保持亲密联系吧！
                    button.ghost#signIn 登录
                .overlay-panel.overlay-right
                    h1 你好朋友!
                    p 创建您的个人账户，随我们遨游于此吧！
                    button.ghost#signUp 注册
    footer
        p
        | Created with 
        i.fa.fa-heart
        |  by
        a(target='_blank', href='https://florin-pop.com') Florin Pop
        | - Read how I created this and how you can join the challenge
        a(target='_blank', href='https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/') here
        | .

block script 
    +script("js/page/login.js")