feat: UI for guest login

3 years ago · fca736bcaa
--- a/app.py
+++ b/app.py
@ -50,9 +50,18 @@ def login_required(f):
        return f(*args, **kwargs, username=username)
    return df

@app.route('/pastExam/login')
@app.route('/pastExam/login/')
 def login():
    return app.send_static_file('login.html')
    return app.send_static_file('login/index.html')

@app.route('/pastExam/login/guest/')
 def guest_login():
    return render_template('guest-login.html', vs=C.verify)

@app.route('/pastExam/login/guest/verify', methods=['POST'])
@limiter.limit("10 / hour")
 def guest_login_send():
    return 'ok'

@app.route('/pastExam/')
@login_required
--- a/static/login/index.html
+++ b/static/login/index.html
@ -0,0 +1,86 @@
 <!DOCTYPE html>
 <html lang="zh-CN">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link href="https://fonts.yecdn.com/css2?family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">
  <link href="https://fonts.yecdn.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
  <meta property="og:title" content="华清大学课程攻略共享计划" />
  <meta property="og:description" content="说人话就是往年考题" />
  <title>华清大学课程攻略共享计划</title>
  <style>
    body {
      background: linear-gradient(-45deg,
        #fff calc(50% - 1px),
        #eee calc(50%),
        #fff calc(50% + 1px)
      );
      background-size: 6px 5px;
      font-family: 'Noto Sans SC', sans-serif;
    }

    h1 {
      font-family: 'Noto Serif SC', serif;
      font-weight: 300;
    }

    .qbox.login-box {
      background-color: black;
      color: white;
      margin: 0 auto;
      max-width: 500px;
      padding: 15px;
      margin-bottom: 25px;
    }

    a,
    a:hover,
    .btn-link,
    .btn-link:hover {
      color: inherit;
      text-decoration: underline;
    }

  </style>
 </head>

 <body>
  <div class="container">
    <div class="pt-3 pl-3 pb-4 mb-4">
      <h1>华清大学<br>&nbsp;课程攻略<br>&nbsp;&nbsp;共享计划</h1>
    </div>

    <div class="qbox login-box">
      <h1 style="margin: -23px -22px 35px">登录</h1>
      <div class="text-center mb-4 pb-4" style="border-bottom: 1px white solid">
        <a href="##" class="btn btn-link btn-lg">闭社帐号登陆</a>
      </div>
      <div class="text-center mb-4">
        <button class="btn btn-link btn-lg" onclick="load_guest_form()">guest登陆</button>
      </div>
      <div class="text-center">
        <iframe class="guest-login-form" style="display: none;border:none"></iframe>
      </div>
    </div>
  </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script>
  function load_guest_form() {
    var ifr = $('iframe');
    if(ifr.is(':visible')) {
      ifr.hide();
      return;
    }
    ifr.width($('.login-box').width() - 10);
    ifr.height(530);
    if(!ifr.attr('src'))
      ifr.attr("src", "guest");
    ifr.show();
  }
 </script>
 </html>

--- a/templates/guest-login.html
+++ b/templates/guest-login.html
@ -0,0 +1,45 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link href="https://fonts.yecdn.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans SC', sans-serif;
      background-color: black;
      color: white;
    }
    input {
      border: none !important;
      border-radius: 0 !important;
      border-bottom: 2px solid !important;
      background: black !important;
      color: white !important;
    }
    .btn-link,
    .btn-link:hover {
      color: inherit;
      text-decoration: underline;
    }
  </style>
 </head>

 <body>
  <div class="container">
    <form action="verify" method="post">
      {% for v in vs %}
      <div class="form-group row">
        <label for="{{v[0]}}" class="col-sm-8 col-form-label">{{v[1]}}</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" name="{{v[0]}}" id="{{v[0]}}" placeholder="{{v[2]}}" required="required">
        </div>
      </div>
      {% endfor %}
      <button type="submit" class="btn btn-link btn-lg">提交</button>
    </form>
  </div>
 </body>
 </html>

--- a/templates/list.html
+++ b/templates/list.html
@ -4,13 +4,12 @@
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" type="image/png" href="favioc.png" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link href="https://fonts.yecdn.com/css2?family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">
  <link href="https://fonts.yecdn.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
  <meta property="og:title" content="华清大学课程攻略" />
  <meta property="og:title" content="华清大学课程攻略共享计划" />
  <meta property="og:description" content="说人话就是往年考题" />
  <title>华清大学课程攻略</title>
  <title>华清大学课程攻略共享计划</title>
  <style>
    body {
      background: linear-gradient(-45deg,
@ -31,16 +30,11 @@
    h3,
    h4,
    h5,
    h6,
    .sort-by{
    h6 {
      font-family: 'Noto Serif SC', serif;
      font-weight: 300;
    }

    .sort-by b {
      font-weight: 700;
    }

    a,
    a:hover,
    .btn-link,
@ -175,9 +169,9 @@
 </head>

 <body>
  <div class="container" style="overflow: hidden;min-height: 100vh">
  <div class="container" style="overflow: hidden">
    <div class="pt-3 pl-3 pb-4 mb-4">
      <h1>华清大学<br>&nbsp;课程攻略</h1>
      <h1>华清大学<br>&nbsp;课程攻略<br>&nbsp;共享计划</h1>
    </div>

    <div class="part1 new">