style formatting

This commit is contained in:
wangjiacai 2023-04-02 02:05:33 +08:00
parent 2556570fc9
commit 0f62a418ec
6 changed files with 259 additions and 248 deletions

View File

@ -1,52 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="zh">
<head>
<head> <meta name="description" content="web-gpt"/>
<meta charset="utf-8"> <meta name="keywords" content="web-gpt"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Flask</title> <title>Flask</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head> </head>
<body>
<body>
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" <button type="button"
data-target="#account-navbar-collapse"> class="navbar-toggle"
<span class="sr-only">切换导航</span> data-toggle="collapse"
<span class="icon-bar"></span> data-target="#account-navbar-collapse">
<span class="icon-bar"></span> <span class="sr-only">切换导航</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <span class="icon-bar"></span>
<a class="navbar-brand" href="{{ url_for('main.index') }}">主页</a> <span class="icon-bar"></span>
</div> </button>
<div class="collapse navbar-collapse" style="float: right;" id="account-navbar-collapse"> <a class="navbar-brand" href="{{ url_for('main.index') }}">主页</a>
<ul class="nav navbar-nav">
<li id="navbar-profile"><a href="{{ url_for('main.profile') }}">账户</a></li>
<li id="navbar-login"><a href="{{ url_for('auth.login') }}">登录</a></li>
<li id="navbar-signup"><a href="{{ url_for('auth.signup') }}">注册</a></li>
<li id="navbar-logout"><a href="{{ url_for('auth.logout') }}">退出</a></li>
</ul>
</div>
</div> </div>
<div class="collapse navbar-collapse"
style="float: right"
id="account-navbar-collapse">
<ul class="nav navbar-nav">
<li id="navbar-profile">
<a href="{{ url_for('main.profile') }}">账户</a>
</li>
<li id="navbar-login">
<a href="{{ url_for('auth.login') }}">登录</a>
</li>
<li id="navbar-signup">
<a href="{{ url_for('auth.signup') }}">注册</a>
</li>
<li id="navbar-logout">
<a href="{{ url_for('auth.logout') }}">退出</a>
</li>
</ul>
</div>
</div>
</nav> </nav>
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container has-text-centered">
{% block content %} {% block content %}
{% endblock %} {% endblock content %}
</div> </div>
</div> </div>
<script> <script>
{% if user and user.is_authenticated %} {% if user and user.is_authenticated %}
var navbar_hide_element = ["navbar-login", "navbar-signup"]; var navbar_hide_element = ["navbar-login", "navbar-signup"];
{% else%} {% else %}
var navbar_hide_element = ["navbar-profile", "navbar-logout"]; var navbar_hide_element = ["navbar-profile", "navbar-logout"];
{% endif %} {% endif %}
navbar_hide_element.forEach(element => { navbar_hide_element.forEach(element => {
@ -56,6 +68,5 @@
} }
}) })
</script> </script>
</body> </body>
</html> </html>

View File

@ -1,34 +1,30 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<h2 class="subtitle">
<h2 class="subtitle"> {% if user and user.is_authenticated %}
你好,{{ user.name }}
{% else %}
你好,游客!
{% endif %}
</h2>
{% if user and user.is_authenticated %} {% if user and user.is_authenticated %}
你好,{{ user.name }} {% if user.isActivated %}
{% else%} <a href="{{ url_for('main.chat') }}">
你好,游客! <button type="button" class="btn btn-primary">开始聊天</button>
</a>
{% else %}
<p class="text-warning">您的账号暂未激活,请等待管理员激活此账号。</p>
{% endif %}
{% else %}
<a href="{{ url_for('auth.login') }}">
<button type="button" class="btn btn-primary">登录</button>
</a>
<a href="{{ url_for('auth.signup') }}">
<button type="button" class="btn btn-default">注册</button>
</a>
{% endif %} {% endif %}
</h2> {% with messages = get_flashed_messages() %}
{% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
{% if user and user.is_authenticated %} {% endwith %}
{% if user.isActivated %} {% endblock content %}
<a href="{{ url_for('main.chat') }}"><button type="button" class="btn btn-primary">开始聊天</button></a>
{% else%}
<p class="text-warning">您的账号暂未激活,请等待管理员激活此账号。</p>
{% endif %}
{% else %}
<a href="{{ url_for('auth.login') }}"><button type="button" class="btn btn-primary">登录</button></a>
<a href="{{ url_for('auth.signup') }}"><button type="button" class="btn btn-default">注册</button></a>
{% endif %}
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="notification is-danger">
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
{% endblock %}

View File

@ -1,36 +1,37 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="column is-4 is-offset-4"> <div class="column is-4 is-offset-4">
<h3 class="title">登录</h3> <h3 class="title">登录</h3>
<div class="box"> <div class="box">
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
{% if messages %} {% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
<div class="notification is-danger"> {% endwith %}
{{ messages[0] }} <form method="post" action="{{ url_for('auth.login') }}">
<div class="field">
<div class="control">
<input class="input is-large"
type="email"
name="email"
placeholder="邮箱"
autofocus=""/>
</div>
</div> </div>
{% endif %} <div class="field">
{% endwith %} <div class="control">
<form method="POST" action="/login"> <input class="input is-large"
<div class="field"> type="password"
<div class="control"> name="password"
<input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus=""> placeholder="密码"/>
</div> </div>
</div> </div>
<div class="field">
<div class="field"> <label class="checkbox">
<div class="control"> <input type="checkbox" name="remember"/>
<input class="input is-large" type="password" name="password" placeholder="Your Password"> 记住我
</div> </label>
</div> </div>
<div class="field"> <button class="button is-block is-info is-large is-fullwidth">登录</button>
<label class="checkbox"> </form>
<input type="checkbox" name="remember">
记住我
</label>
</div>
<button class="button is-block is-info is-large is-fullwidth">登录</button>
</form>
</div> </div>
</div> </div>
{% endblock %} {% endblock content %}

View File

@ -1,53 +1,56 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<h2 class="subtitle">
<h2 class="subtitle"> {% if user.is_authenticated and user.role == "admin" %}
{% if user.is_authenticated and user.role == "admin" %} <h3 class="subtitle text-left">注册账户列表:</h3>
<h3 class="subtitle" style="text-align: left;">注册账户列表:</h3> <table class="table" id="account-list-table">
<table class="table" id="account-list-table"> <thead>
<thead> <tr>
<tr> <th abbr="id" scope="col">id</th>
<th abbr="id" scope="col">id</th> <th abbr="email" scope="col">邮箱</th>
<th abbr="email" scope="col">邮箱</th> <th abbr="name" scope="col">用户名</th>
<th abbr="name" scope="col">用户名</th> <th abbr="role" scope="col">角色</th>
<th abbr="role" scope="col">角色</th> <th abbr="isActivated" scope="col">已激活</th>
<th abbr="isActivated" scope="col">已激活</th> <th abbr="btn-submit" class="d-none" scope="col">提交</th>
<th abbr="btn-submit" style="display:none" scope="col">提交</th> <th abbr="btn-delete" class="d-none" scope="col">删除</th>
<th abbr="btn-delete" style="display:none" scope="col">删除</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {% for account in accounts %}
{% for account in accounts %} <tr id="{{ 'account-%d'|format(account.id) }}">
<tr id="{{ 'account-%d'|format(account.id) }}"> <td scope="row">{{ account.id }}</td>
<td scope="row">{{ account.id }}</td> <td>{{ account.email }}</td>
<td>{{ account.email }}</td> <td>{{ account.name }}</td>
<td>{{ account.name }}</td> <td>
<td> <select>
<select> <option value="admin" {% if account.role=="admin" %}selected{% endif %}>
<option value="admin" {% if account.role=="admin" %}selected{% endif %}>admin</option> admin
<option value="user" {% if account.role=="user" %}selected{% endif %}>user</option> </option>
</select> <option value="user" {% if account.role=="user" %}selected{% endif %}>
</td> user
<td><input type="checkbox" {% if account.isActivated %}checked{% else %}unchecked{% endif %}></td> </option>
<td><button class="btn btn-info" onclick="submit_account(this)">提交</button></td> </select>
<td><button class="btn btn-danger" onclick="delete_account(this)">删除</button></td> </td>
</tr> <td>
{% endfor %} <input type="checkbox"
</tbody> {% if account.isActivated %}checked{% else %}unchecked{% endif %}/>
</table> </td>
{% endif %} <td>
</h2> <button class="btn btn-info" onclick="submit_account(this)">提交</button>
</td>
{% with messages = get_flashed_messages() %} <td>
{% if messages %} <button class="btn btn-danger" onclick="delete_account(this)">删除</button>
<div class="notification is-danger"> </td>
{{ messages[0] }} </tr>
</div> {% endfor %}
{% endif %} </tbody>
{% endwith %} </table>
{% endif %}
<script> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
{% endwith %}
<script>
var account_list = document.getElementById("account-{{ user.id }}"); var account_list = document.getElementById("account-{{ user.id }}");
account_list.style.backgroundColor = "lightblue"; account_list.style.backgroundColor = "lightblue";
Array.from(account_list.getElementsByTagName("*")).forEach(element => { Array.from(account_list.getElementsByTagName("*")).forEach(element => {
@ -56,9 +59,8 @@
} catch (error) { } catch (error) {
} }
});; });;
</script> </script>
<script>
<script>
function submit_account(obj) { function submit_account(obj) {
var account = obj.parentElement.parentElement var account = obj.parentElement.parentElement
var data = { var data = {
@ -110,14 +112,8 @@
} }
} }
</script> </script>
{% with messages = get_flashed_messages() %}
{% with messages = get_flashed_messages() %} {% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
{% if messages %} {% endwith %}
<div class="notification is-danger"> {% endblock content %}
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
{% endblock %}

View File

@ -1,57 +1,58 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<h1 class="title"> <h1 class="title">欢迎回来,{{ user.name }}!</h1>
欢迎回来,{{ user.name }}! {% if user.isActivated %}
</h1> <h3 class="subtitle text-left">账户状态:</h3>
{% if user.isActivated %} <!-- <h3 class="subtitle" style="text-align: left;">服务状态:</h3> -->
<h3 class="subtitle" style="text-align: left;">账户状态:</h3> {% if user.role=='admin' %}
<!-- <h3 class="subtitle" style="text-align: left;">服务状态:</h3> --> <!-- admin -->
{% if user.role=='admin' %} <h3 class="subtitle text-left">注册账户列表:</h3>
<!-- admin --> <table class="table" id="account-list-table">
<h3 class="subtitle" style="text-align: left;">注册账户列表:</h3> <thead>
<table class="table" id="account-list-table"> <tr>
<thead> <th scope="col">id</th>
<tr> <th scope="col">
<th scope="col">id</th> <a href="{{ url_for('main.manage') }}">管理</a>
<th scope="col"><a href="{{ url_for('main.manage') }}">管理</a></th> </th>
<th scope="col">邮箱</th> <th scope="col">邮箱</th>
<th scope="col">用户名</th> <th scope="col">用户名</th>
<th scope="col">角色</th> <th scope="col">角色</th>
<th scope="col">已激活</th> <th scope="col">已激活</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for account in accounts %} {% for account in accounts %}
<tr id="{{ 'account-%d'|format(account.id) }}"> <tr id="{{ 'account-%d'|format(account.id) }}">
<td scope="row">{{ account.id }}</td> <td scope="row">{{ account.id }}</td>
<td><a href="{{ url_for('main.manage', id=account.id) }}">管理</a></td> <td>
<td>{{ account.email }}</td> <a href="{{ url_for('main.manage', id=account.id) }}">管理</a>
<td>{{ account.name }}</td> </td>
<td>{{ account.role }}</td> <td>{{ account.email }}</td>
<td>{% if account.isActivated %}是{% else %}否{% endif %}</td> <td>{{ account.name }}</td>
</tr> <td>{{ account.role }}</td>
{% endfor %} <td>
</tbody> {% if account.isActivated %}
</table>
<script> {% else %}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
var account_list = document.getElementById("account-{{ user.id }}"); var account_list = document.getElementById("account-{{ user.id }}");
account_list.style.backgroundColor = "lightblue"; account_list.style.backgroundColor = "lightblue";
</script> </script>
{% else %} {% else %}
<!-- user --> <!-- user -->
{% endif %} {% endif %}
{% else %} {% else %}
<!-- 未激活 --> <!-- 未激活 -->
<p class="text-warning">您的账号暂未激活,请等待管理员激活此账号。</p> <p class="text-warning">您的账号暂未激活,请等待管理员激活此账号。</p>
{% endif %} {% endif %}
{% with messages = get_flashed_messages() %}
{% with messages = get_flashed_messages() %} {% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
{% if messages %} {% endwith %}
<div class="notification is-danger"> {% endblock content %}
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
{% endblock %}

View File

@ -1,41 +1,47 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="column is-4 is-offset-4"> <div class="column is-4 is-offset-4">
<h3 class="title">注册</h3> <h3 class="title">注册</h3>
<div class="box"> <div class="box">
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
{% if messages %} {% if messages %}
<div class="notification is-danger"> <div class="notification is-danger">
{{ messages[0] }} {{ messages[0] }}
{% if messages[0] == '此邮箱已注册!' %} {% if messages[0] == '此邮箱已注册!' %}<a href="{{ url_for('auth.login') }}">点此登录</a>.{% endif %}
<a href="{{ url_for('auth.login') }}">点此登录</a>. </div>
{% endif %}
</div>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
<form method="POST" action="/signup"> <form method="post" action="{{ url_for('auth.signup') }}">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<input class="input is-large" type="email" name="email" placeholder="邮箱" autofocus="" <input class="input is-large"
required="required"> type="email"
</div> name="email"
</div> placeholder="邮箱"
autofocus=""
<div class="field"> required="required"/>
<div class="control"> </div>
<input class="input is-large" type="password" name="password" placeholder="密码" required="required"> </div>
</div> <div class="field">
</div> <div class="control">
<input class="input is-large"
<div class="field"> type="password"
<div class="control"> name="password"
<input class="input is-large" type="text" name="name" placeholder="昵称(可选)" autofocus=""> placeholder="密码"
</div> required="required"/>
</div> </div>
</div>
<button class="button is-block is-info is-large is-fullwidth">提交注册</button> <div class="field">
</form> <div class="control">
<input class="input is-large"
type="text"
name="name"
placeholder="昵称(可选)"
autofocus=""/>
</div>
</div>
<button class="button is-block is-info is-large is-fullwidth">提交注册</button>
</form>
</div> </div>
</div> </div>
{% endblock %} {% endblock content %}