juan/zhdo.space
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update colors and main UI

Browse Source
This commit is contained in:
juan 2022-05-13 21:27:49 +08:00
parent 879f15819c
commit bd6e0ca4f0
6 changed files with 138 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

@ -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():

7
static/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
static/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
static/style.css Normal file
View File

@ -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;
}

61
templates/base.html Normal file
View File

@ -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>

48
templates/index.html Normal file
View File

@ -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 %}