a toast for reminding ending

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.

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

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(