EnglishPal/app/templates/login.html

{% block body %}
{% if session['logged_in'] %}

You're logged in already!

{% else %}
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
<style>
  
  .container{
      background-color: #FFFFFF;
      width: 400px;
      height: 500px;
      margin: 7em auto;
      border-radius: 1.5em;
      box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
      
  }

  .signin-heading{
      padding-top: 5px;
      color: #8C55AA;
      font-family: 'Ubuntu', sans-serif;
      font-weight: bold;
      font-size: 23px;
      text-align: center;
  }

  .username, .email, .password, .re-password{
      width: 76%;
      color: rgb(38, 50, 56);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 1px;
      background: rgba(136, 126, 126, 0.04);
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      outline: none;
      box-sizing: border-box;
      border: 2px solid rgba(124, 16, 97, 0.02);
      margin-bottom: 50px;
      margin-left: 46px;
      text-align: center;
      margin-bottom: 27px;
      font-family: 'Ubuntu', sans-serif;
  }

  .btn{
      width: 50%;
      border: none;
      border-radius: 20px;
      box-sizing: border-box;
      border: 2px solid #8C55AA;
      margin-bottom: 50px;
      margin-left: 90px;
      padding: 10px 20px;
      
  }

  .btn:hover{

      background: #8C55AA;
      transition: .5s;
      cursor: pointer;
      color: #fff;
  }


  .signup{
      display: flex;
      justify-content: center;
      align-items: center;
  }

  ul{
      position: absolute;
      display: flex;
      left: 65%;
      
  }

  li{
      padding: 10px;
      margin: 10px;  
  }

  a{
      text-decoration: none;
      list-style: none;
      font-weight: bold;
      font-family: 'ink free';
      
  }

  .main_menu a{
      color: #fff;
      font-size: 300;
  }

  li :hover{
      color: #8C55AA;
      transition: .5s;
  }

  h1{
      font-family: 'ink free';

  }

  .main_menu h1{
      color: #fff;
  }


</style>

<div class="container">

  <section class="signin-heading">
    <h1>Sign In</h1>
  </section>

  <form action="/login" method="POST">
    <input type="text" placeholder="用户名" class="username" name="username" required>
    <input type="password" placeholder="密码" class="password"  name="password" required>
    <button type="submit" class="btn">登录</button>
  </form>

</div>

<a href="/signup" class="signup">注册</a>

{% endif %}
{% endblock %}