|
|
@ -9,47 +9,50 @@ |
|
|
|
|
|
|
|
|
|
|
|
{% block title %}Strategy Page{% endblock%} |
|
|
|
{% block title %}Strategy Page{% endblock%} |
|
|
|
{% block style %} |
|
|
|
{% block style %} |
|
|
|
|
|
|
|
|
|
|
|
<!-- .input-group > input { |
|
|
|
|
|
|
|
border: 2px solid #8E8E8E; |
|
|
|
|
|
|
|
border-radius: 7px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.input-group-lg > input { |
|
|
|
|
|
|
|
border: 2px solid #8E8E8E; |
|
|
|
|
|
|
|
border-radius: 7px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.input-group-lg > select { |
|
|
|
|
|
|
|
border: 2px solid #8E8E8E; |
|
|
|
|
|
|
|
border-radius: 7px; |
|
|
|
|
|
|
|
} --> |
|
|
|
|
|
|
|
<!-- .input-group > span{ |
|
|
|
|
|
|
|
bg-dark; |
|
|
|
|
|
|
|
font-bold; |
|
|
|
|
|
|
|
} --> |
|
|
|
|
|
|
|
div.input-group > * { |
|
|
|
div.input-group > * { |
|
|
|
border-radius: 0px; |
|
|
|
border-radius: 0px; |
|
|
|
} |
|
|
|
} |
|
|
|
div.card{ |
|
|
|
div.card{ |
|
|
|
border-radius: 2px; |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes cursor { |
|
|
|
|
|
|
|
0% { |
|
|
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
40% { |
|
|
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
50% { |
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
90% { |
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
|
|
|
|
opacity: 0.9; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
{% endblock style %} |
|
|
|
{% endblock style %} |
|
|
|
|
|
|
|
|
|
|
|
{% block content %} |
|
|
|
{% block content %} |
|
|
|
<div class="container-md"> |
|
|
|
<div class="container-lg"> |
|
|
|
<div class="container-md m-1"> |
|
|
|
<div class="container-lg m-1"> |
|
|
|
<div class="card mb-3 p-4"> |
|
|
|
<div class="card m-4 p-4"> |
|
|
|
<div class="card mb-3"> |
|
|
|
<div class="card mb-3" style="border-radius:10px;border:0.5rem outset #eee;"> |
|
|
|
<!-- <img src="{{ url_for("static", filename="img/stock.jpeg") }}" class="card-img-top" alt="..."> --> |
|
|
|
<!-- <img src="{{ url_for("static", filename="img/stock.jpeg") }}" class="card-img-top" alt="..."> --> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body"> |
|
|
|
<h5 class="card-title text-xl font-bold">{% if session.tw == 1 %}台股{% endif %}投資組合建立指南 <i class="bi bi-arrow-down-right-circle-fill"></i></h5> |
|
|
|
|
|
|
|
<ol class="list-group list-group-flush list-group-numbered"> |
|
|
|
<h5 class="card-title text-xl font-bold accordion-header"> |
|
|
|
|
|
|
|
{% if session.tw == 1 %}台股{% endif %}投資組合建立指南 <i class="bi bi-caret-left-fill" style="animation: cursor 1s 3;"></i></h5> |
|
|
|
|
|
|
|
<ol class="list-group list-group-flush list-group-numbered" id="collapseExample"> |
|
|
|
<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></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">選擇資產後按下<span class="badge bg-secondary">加入</span></span></li> |
|
|
|
<li class="list-group-item"><span class="ps-2">確認資產後按下<span class="badge bg-info">確認資產</span> , 後查看資產價格動態圖表</span></li> |
|
|
|
<li class="list-group-item"><span class="ps-2">確認資產後按下<span class="badge bg-info">確認資產</span>後, 查看資產價格動態圖表</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">確認後按下<span class="badge bg-danger">確認建立</span>, 後查看回傳訊息</span></li> |
|
|
|
<li class="list-group-item"><span class="ps-2">確認後按下<span class="badge bg-danger">確認建立</span>後, 查看回傳訊息</span></li> |
|
|
|
</ol> |
|
|
|
</ol> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card"> |
|
|
|
<div class="card"> |
|
|
@ -73,31 +76,14 @@ div.card{ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<hr class="my-3"> |
|
|
|
<hr class="my-3"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
|
|
|
|
<div class="card-header "> |
|
|
|
|
|
|
|
<div class="py-2 font-bold text-lg"> |
|
|
|
|
|
|
|
價格動態圖表 |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card-body"> |
|
|
|
|
|
|
|
<div id="graph"> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
按下 |
|
|
|
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm" disabled>確認資產</button> |
|
|
|
|
|
|
|
後,圖表將在此渲染。 |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header d-flex"> |
|
|
|
<div class="card-header d-flex"> |
|
|
|
<div class="py-2 font-bold text-lg-center"> |
|
|
|
<div class="py-2 font-bold text-lg-center"> |
|
|
|
已選擇的資產 |
|
|
|
已選擇的資產 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="btn-group ms-auto"> |
|
|
|
<div class="btn-group ms-auto"> |
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm" id="submit-btn"> |
|
|
|
|
|
|
|
確認資產 |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
<button type="button" class="btn btn-outline-danger btn-sm" id="submit-port"> |
|
|
|
<button type="button" class="btn btn-outline-danger btn-sm" id="submit-port"> |
|
|
|
確認建立 |
|
|
|
確認建立 |
|
|
|
</button> |
|
|
|
</button> |
|
|
@ -106,6 +92,7 @@ div.card{ |
|
|
|
<div class="card-body d-flex mb-0"> |
|
|
|
<div class="card-body d-flex mb-0"> |
|
|
|
<input name="assetSelect" class="form-control" list="datalistOptions" id="stockAll" placeholder="輸入資產名稱..."> |
|
|
|
<input name="assetSelect" class="form-control" list="datalistOptions" id="stockAll" placeholder="輸入資產名稱..."> |
|
|
|
<datalist id="datalistOptions"> |
|
|
|
<datalist id="datalistOptions"> |
|
|
|
|
|
|
|
<span>美股</span> |
|
|
|
{% if session.tw==0 %} |
|
|
|
{% if session.tw==0 %} |
|
|
|
{% for key, data in data_us.items() -%} |
|
|
|
{% for key, data in data_us.items() -%} |
|
|
|
<option value="{{ key|e }}">{{ key|e }} | {{ data|e }}</option> |
|
|
|
<option value="{{ key|e }}">{{ key|e }} | {{ data|e }}</option> |
|
|
@ -115,24 +102,44 @@ div.card{ |
|
|
|
<option value="{{ key|e }}">{{ key|e }} | {{ data|e }} </option> |
|
|
|
<option value="{{ key|e }}">{{ key|e }} | {{ data|e }} </option> |
|
|
|
{% endfor %} |
|
|
|
{% endfor %} |
|
|
|
</datalist> |
|
|
|
</datalist> |
|
|
|
<button class="btn btn-secondary" |
|
|
|
<button class="btn btn-secondary btn-sm" |
|
|
|
type="button btn-lg" |
|
|
|
type="button" |
|
|
|
id="addStockBtn"> |
|
|
|
id="addStockBtn"> |
|
|
|
加入 |
|
|
|
加入 |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<hr class="mb-3"> |
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<ol class="list-group list-group-numbered px-3 pb-3" id="stock-list" type="1"> |
|
|
|
<ol class="list-group list-group-numbered px-3 pb-3" id="stock-list" type="1"> |
|
|
|
<li class="list-group-item"> |
|
|
|
<li class="list-group-item"> |
|
|
|
<span class="px-2">2330.TW | 台積電</span> |
|
|
|
<span class="px-2">2330.TW</span> |
|
|
|
<a class="btn btn-sm btn-danger float-right delete-btn"> |
|
|
|
<a class="btn btn-sm btn-danger float-right delete-btn"> |
|
|
|
<i class="fas fa-trash-alt"></i> |
|
|
|
<i class="fas fa-trash-alt"></i> |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ol> |
|
|
|
</ol> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
|
|
|
|
<div class="card-header d-flex"> |
|
|
|
|
|
|
|
<div class="py-2 font-bold text-lg"> |
|
|
|
|
|
|
|
價格動態圖表 |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="btn-group ms-auto"> |
|
|
|
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm" id="submit-btn"> |
|
|
|
|
|
|
|
確認資產 |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card-body"> |
|
|
|
|
|
|
|
<div id="graph"> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
按下 |
|
|
|
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm" disabled>確認資產</button> |
|
|
|
|
|
|
|
後,圖表將在此渲染。 |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<hr> |
|
|
|
<hr> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div class="d-flex p-2 mt-2 font-bold text-lg">策略參數選擇</div> |
|
|
|
<div class="d-flex p-2 mt-2 font-bold text-lg">策略參數選擇</div> |
|
|
@ -155,7 +162,6 @@ div.card{ |
|
|
|
</select> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="modal" id="portModal" tabindex="-1"> |
|
|
|
<div class="modal" id="portModal" tabindex="-1"> |
|
|
@ -169,7 +175,7 @@ div.card{ |
|
|
|
<span> |
|
|
|
<span> |
|
|
|
確認後將會暫時關閉建立按鈕,請等待完成訊息! |
|
|
|
確認後將會暫時關閉建立按鈕,請等待完成訊息! |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<div class="input-group"> |
|
|
|
<div class="input-group mt-3"> |
|
|
|
<span class="input-group-text">輸入筆記</span> |
|
|
|
<span class="input-group-text">輸入筆記</span> |
|
|
|
<textarea id="commentPort" class="form-control" aria-label="With textarea"></textarea> |
|
|
|
<textarea id="commentPort" class="form-control" aria-label="With textarea"></textarea> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -216,5 +222,6 @@ div.card{ |
|
|
|
{% block script %} |
|
|
|
{% block script %} |
|
|
|
<script src="{{ url_for('static', filename='js/addStock.js') }}"></script> |
|
|
|
<script src="{{ url_for('static', filename='js/addStock.js') }}"></script> |
|
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
|
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
|
|
|
|
|
|
|
<script src="https://code.highcharts.com/highcharts.js"></script> |
|
|
|
{% endblock script %} |
|
|
|
{% endblock script %} |
|
|
|
|
|
|
|
|
|
|
|