f

templates/strategy_tw.html

@@ -19,7 +19,7 @@ div.card{
     color: #000093;
 }
 .scroll {
-    max-height: 390px;
+    max-height: 450px;
     overflow-y: auto;
 }
 @keyframes cursor {
@@ -52,7 +52,7 @@ div.card{
             </ul>
         </div>
         <div class="row">
-            <div class="col-lg-6 col-md-6 col-sm-12">
+            <!-- <div class="col-lg-6 col-md-6 col-sm-12">
                 <div class="card my-2 font-bold" style="border-radius: 7px;">
                     <div class="card-header">
                         <h5 class="card-title text-xl font-bold pt-2">
@@ -74,8 +74,8 @@ div.card{
                         </ol>
                     </div>
                 </div>
-            </div>
-            <div class="col-lg-6 col-md-6 col-sm-12">
+            </div> -->
+            <div class="col-lg-12 col-md-12 col-sm-12">
                 <div class="card my-2 scroll" style="border-radius: 7px;">
                     <div class="card-header d-flex">
                         <div class="py-2 font-bold text-xl">
@@ -236,12 +236,46 @@ div.card{
               </div>
             </div>
         </div>
+        <div class="modal" id="intro" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+              <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="card-title text-xl font-bold pt-2">
+                        {% if session.tw == 1 %}台股{% endif %}投資組合策略建立指南</h5>
+                </div>
+                <div class="modal-body">
+                    <ol class="list-group list-group-flush list-group-numbered">
+                        <li class="list-group-item">
+                            <span class="ps-2">輸入投資組合名稱。</span>
+                        </li>
+                        <li class="list-group-item">
+                            <span class="ps-2">選擇所參加的課程或競賽。</span>
+                        </li>
+                        <li class="list-group-item"><span class="ps-2">選擇資產後按下 <span class="badge bg-secondary">加入</span>。</li>
+                        <li class="list-group-item"><span class="ps-2">按下 <button type="button" class="btn btn-outline-primary btn-sm" disabled>確認資產</button> 後查看資產價格動態圖表。</span></li>
+                        <li class="list-group-item"><span class="ps-2">刪除不加入投資組合的資產。</span></li>
+                        <li class="list-group-item"><span class="ps-2">選擇建立策略相關參數。</span></li>
+                        <li class="list-group-item"><span class="ps-2">按下 <button type="button" class="btn btn-outline-danger btn-sm" disabled>確認建立</button> 並查看回傳訊息。</span></li>
+                    </ol>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">了解 !</button>
+                </div>
+              </div>
+            </div>
+        </div>
     </div>
 </div>
 
 {% endblock %}
 {% block script %}
 <script src="{{ url_for('static', filename='js/addStock.js') }}"></script>
+<script type="text/javascript">
+$(function() {
+    $('#intro').modal('show'); 
+});
+</script>
+
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 {% endblock script %}