Update UI

app.py

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

helper.py

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

readme.md

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

templates/base.html

@@ -18,18 +18,31 @@
             <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.
+                Ipsum rerum recusandae animi explicabo omnis asperiores ex Est
+                recusandae maiores modi harum quo? Nihil rem consequatur nemo
+                asperiores repellat Laboriosam nostrum inventore explicabo
+                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>
             </div>
             <div class="col-sm-4 offset-md-1 py-4">
-              <h4 class="text-white">联系我们</h4>
+              <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>
+              <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>

templates/index.html

@@ -13,30 +13,46 @@
     </div>
 
     <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">
-          <h2>文章列表</h2>
+          <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.
+            Sports Culture即体育文化，
+            该公众号主要是为大学生提供一个有关体育文化的有趣的中英文知识学习及互动平台，
+            让大家在了解体育知识与文化的同时学习到英语知识。
           </p>
+          <h6 class="mb-3">
+            <u>
+              最新文章:
+              <a href="{{ recentArticle['link'] }}"
+                >{{ recentArticle['title'] }}</a
+              >
+            </u>
+          </h6>
           <button class="btn btn-outline-light" type="button">
-						跳转
+            跳转至文章列表
           </button>
         </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">
-          <h2>讨论区</h2>
+          <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>
+          <h6 class="mb-3">
+            <u>
+              最新讨论:
+              <a href="{{ recentDiscussion['link'] }}"
+                >{{ recentDiscussion['title'] }}</a
+              >
+            </u>
+          </h6>
           <button class="btn btn-outline-secondary" type="button">
-						跳转
+            跳转至讨论区
           </button>
         </div>
       </div>