From 4c56a29edc8498756cd8306ffb174391927b2f37 Mon Sep 17 00:00:00 2001
From: namasikanam <namasikanam@gmail.com>
Date: Mon, 15 Nov 2021 22:33:30 +0800
Subject: [PATCH] a toast for reminding ending

---
 README.md               |  4 +++-
 static/css/ordinary.css |  7 +++++++
 templates/story.html    | 16 ++++++++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1a5ac3a..3c507d8 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,10 @@
 ## Run in Develop Mode
 
 ```bash
+export FLASK_APP=app.py
+export FLASK_ENV=development
 python3 init_data.py
-python3 app.py
+flask run
 ```
 
 Open http://127.0.0.1:5000/ordinary in a browser.
diff --git a/static/css/ordinary.css b/static/css/ordinary.css
index c6252ac..8792c55 100644
--- a/static/css/ordinary.css
+++ b/static/css/ordinary.css
@@ -187,3 +187,10 @@ nav .page-item.active .page-link {
   background-color: #000;
   border-color: #000;
 }
+
+.toast {
+  left: 50%;
+  position: fixed;
+  transform: translate(-50%, 0px);
+  z-index: 9999;
+}
\ No newline at end of file
diff --git a/templates/story.html b/templates/story.html
index 75ae4bb..bb8d613 100644
--- a/templates/story.html
+++ b/templates/story.html
@@ -35,6 +35,16 @@
       </div>
     </div>
 
+    <div class="toast fixed-top" id="ending-toast" role="alert" aria-live="assertive" aria-atomic="true" autohide="false">
+      <div class="toast-header">
+        <strong class="me-auto">结尾提醒</strong>
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+      <div class="toast-body">
+        到最后一个时段啦，请为故事续写结尾吧~
+      </div>
+    </div>
+
     <div class="part1 col-md-6">
       <div class="story-box qbox part-box">
         <h1>{{story.title}}</h1>
@@ -183,6 +193,12 @@
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/locales/jquery.timeago.zh-CN.js"></script>
 
 <script>
+  window.onload = function(e) {
+    var DOMToast = document.getElementById('ending-toast');
+    var bootstrapToast = new bootstrap.Toast(DOMToast);
+    bootstrapToast.show();
+  };
+
   $('.can-react').click(function (e) {
     $this = $(this);
     $.post(