Update UI

This commit is contained in:
juan 2022-05-13 22:11:11 +08:00
parent bd6e0ca4f0
commit fc42e62ceb
5 changed files with 73 additions and 16 deletions

12
app.py
View File

@ -1,15 +1,23 @@
from flask import Flask from flask import Flask
from flask.templating import render_template from flask.templating import render_template
from helper import *
app = Flask(__name__) app = Flask(__name__)
@app.route("/") @app.route("/")
def index(): def index():
return render_template("index.html") return render_template(
"index.html",
recentArticle=getRecentArticle(),
recentDiscussion=getRecentDiscussion(),
)
@app.route("/privacy") @app.route("/privacy")
def privacypolicy(): def privacypolicy():
return render_template("privacypolicy.html") return render_template("privacypolicy.html")
if __name__ == "__main__": if __name__ == "__main__":
app.run(host='0.0.0.0') app.run(host="0.0.0.0")

9
helper.py Normal file
View File

@ -0,0 +1,9 @@
def getRecentArticle():
# TODO fetch latest article
recent = {"title": "N/A", "link": "#"}
return recent
def getRecentDiscussion():
# TODO fetch latest discussion
recent = {"title": "N/A", "link": "#"}
return recent

11
readme.md Normal file
View File

@ -0,0 +1,11 @@
# 智慧奥运
This is the repository for 智慧奥运 project.
## Roadmap
- [x] Main UI
- [ ] Chinese Content
- [ ] Article list
- [ ] Discussion board
- [ ] Multilingual support

View File

@ -18,18 +18,31 @@
<div class="col-sm-8 col-md-7 py-4"> <div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">关于</h4> <h4 class="text-white">关于</h4>
<p class="text-muted"> <p class="text-muted">
Add some information about the album below, the author, or any Ipsum rerum recusandae animi explicabo omnis asperiores ex Est
other background context. Make it a few sentences long so folks recusandae maiores modi harum quo? Nihil rem consequatur nemo
can pick up some informative tidbits. Then, link them off to asperiores repellat Laboriosam nostrum inventore explicabo
some social networking sites or contact information. doloribus molestias! Veniam quia tempora praesentium Elit
laudantium nam explicabo maxime officiis? Doloribus facere
architecto explicabo in optio Provident saepe dicta deleniti
necessitatibus commodi Iure velit voluptate eum et ipsum? Enim
at unde ad iusto architecto Lorem veritatis dolore
exercitationem inventore eos Consectetur velit repellendus omnis
commodi maxime. Laborum ipsa eius numquam perferendis repellat
delectus? Inventore quos aut pariatur sed eaque iure.
Repudiandae distinctio soluta suscipit.
</p> </p>
</div> </div>
<div class="col-sm-4 offset-md-1 py-4"> <div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">联系我们</h4> <h4 class="text-white">联系方式</h4>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><a href="#" class="text-white">微信公众号</a></li> <li><a href="#" class="text-white">微信公众号</a></li>
<li><a href="#" class="text-white">电子邮件</a></li> <li><a href="#" class="text-white">电子邮件</a></li>
</ul> </ul>
<h4 class="text-white">更多链接</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">源代码仓库</a></li>
<li><a href="#" class="text-white">作者的blog</a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>

View File

@ -13,30 +13,46 @@
</div> </div>
<div class="row align-items-md-stretch"> <div class="row align-items-md-stretch">
<div class="col-md-6"> <div class="col-md-6 mb-4">
<div class="h-100 p-5 text-white bg-darkblue rounded-3"> <div class="h-100 p-5 text-white bg-darkblue rounded-3">
<h2>文章列表</h2> <h2>奥运文化</h2>
<p> <p>
Swap the background-color utility and add a `.text-*` color utility Sports Culture即体育文化
to mix up the jumbotron look. Then, mix and match with additional 该公众号主要是为大学生提供一个有关体育文化的有趣的中英文知识学习及互动平台,
component themes and more. 让大家在了解体育知识与文化的同时学习到英语知识。
</p> </p>
<h6 class="mb-3">
<u>
最新文章:
<a href="{{ recentArticle['link'] }}"
>{{ recentArticle['title'] }}</a
>
</u>
</h6>
<button class="btn btn-outline-light" type="button"> <button class="btn btn-outline-light" type="button">
跳转 跳转至文章列表
</button> </button>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6 mb-4">
<div class="h-100 p-5 bg-lightblue border rounded-3"> <div class="h-100 p-5 bg-lightblue border rounded-3">
<h2>讨论区</h2> <h2>奥运交流</h2>
<p> <p>
Or, keep it light and add a border for some added definition to the 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 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 source HTML here as we've adjusted the alignment and sizing of both
column's content for equal-height. column's content for equal-height.
</p> </p>
<h6 class="mb-3">
<u>
最新讨论:
<a href="{{ recentDiscussion['link'] }}"
>{{ recentDiscussion['title'] }}</a
>
</u>
</h6>
<button class="btn btn-outline-secondary" type="button"> <button class="btn btn-outline-secondary" type="button">
跳转 跳转至讨论区
</button> </button>
</div> </div>
</div> </div>