Update colors and main UI
This commit is contained in:
juan
parent
879f15819c
commit
bd6e0ca4f0
2
app.py
2
app.py
|
|
@ -5,7 +5,7 @@ app = Flask(__name__)
|
|||
|
||||
@app.route("/")
|
||||
def index():
|
||||
return "<p>Hello, World!</p>"
|
||||
return render_template("index.html")
|
||||
|
||||
@app.route("/privacy")
|
||||
def privacypolicy():
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,14 @@
|
|||
.bg-lightblue {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: #d6d9e2;
|
||||
}
|
||||
|
||||
.bg-darkblue {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: #00305c;
|
||||
}
|
||||
|
||||
.bg-darkerblue {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: #1d2f4c;
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<title>智慧奥运</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/static/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="/static/style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="collapse bg-darkerblue" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-md-7 py-4">
|
||||
<h4 class="text-white">关于</h4>
|
||||
<p class="text-muted">
|
||||
Add some information about the album below, the author, or any
|
||||
other background context. Make it a few sentences long so folks
|
||||
can pick up some informative tidbits. Then, link them off to
|
||||
some social networking sites or contact information.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4 class="text-white">联系我们</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">微信公众号</a></li>
|
||||
<li><a href="#" class="text-white">电子邮件</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-darkerblue shadow-sm">
|
||||
<div class="container">
|
||||
<a href="#" class="navbar-brand d-flex align-items-center">
|
||||
<strong>智互冬奥</strong>
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarHeader"
|
||||
aria-controls="navbarHeader"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>{% block content %} {% endblock %}</main>
|
||||
|
||||
<script src="/static/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
{% extends "base.html" %} {% block content %}
|
||||
<main>
|
||||
<div class="container py-4">
|
||||
<div class="p-5 mb-4 bg-light rounded-3">
|
||||
<div class="container-fluid py-5">
|
||||
<h1 class="display-5 fw-bold">智互奥运</h1>
|
||||
<p class="col-md-8 fs-4">
|
||||
Using a series of utilities, you can create this jumbotron, just like
|
||||
the one in previous versions of Bootstrap. Check out the examples
|
||||
below for how you can remix and restyle it to your liking.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-md-stretch">
|
||||
<div class="col-md-6">
|
||||
<div class="h-100 p-5 text-white bg-darkblue rounded-3">
|
||||
<h2>文章列表</h2>
|
||||
<p>
|
||||
Swap the background-color utility and add a `.text-*` color utility
|
||||
to mix up the jumbotron look. Then, mix and match with additional
|
||||
component themes and more.
|
||||
</p>
|
||||
<button class="btn btn-outline-light" type="button">
|
||||
跳转
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="h-100 p-5 bg-lightblue border rounded-3">
|
||||
<h2>讨论区</h2>
|
||||
<p>
|
||||
Or, keep it light and add a border for some added definition to the
|
||||
boundaries of your content. Be sure to look under the hood at the
|
||||
source HTML here as we've adjusted the alignment and sizing of both
|
||||
column's content for equal-height.
|
||||
</p>
|
||||
<button class="btn btn-outline-secondary" type="button">
|
||||
跳转
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="pt-3 mt-4 text-muted border-top">© 2022</footer>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue