SeanChenTaipei
2 years ago
parent
f61bcb4791
commit
0357b22ec9
6 changed files with 244 additions and 33 deletions
|
After Width: | Height: | Size: 1015 B |
@ -0,0 +1,86 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Serial Information</title> |
||||||
|
<!-- Required meta tags --> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||||
|
|
||||||
|
<!-- Bootstrap CSS --> |
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
||||||
|
|
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<div class="container"> |
||||||
|
<h1>Serial Information</h1> |
||||||
|
|
||||||
|
<!-- Button group for filtering --> |
||||||
|
<div class="btn-group mb-3"> |
||||||
|
<button type="button" class="btn btn-primary filter" data-filter="all">All</button> |
||||||
|
<button type="button" class="btn btn-primary filter" data-filter="serial001">Serial 001</button> |
||||||
|
<button type="button" class="btn btn-primary filter" data-filter="serial002">Serial 002</button> |
||||||
|
<button type="button" class="btn btn-primary filter" data-filter="serial003">Serial 003</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<table class="table table-striped"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Serial Number</th> |
||||||
|
<th>Description</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr class="filter-item serial001"> |
||||||
|
<td>001</td> |
||||||
|
<td><a href="#">Serial 001 Information</a></td> |
||||||
|
</tr> |
||||||
|
<tr class="filter-item serial002"> |
||||||
|
<td>002</td> |
||||||
|
<td><a href="#">Serial 002 Information</a></td> |
||||||
|
</tr> |
||||||
|
<tr class="filter-item serial003"> |
||||||
|
<td>003</td> |
||||||
|
<td><a href="#">Serial 003 Information</a></td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
<div class="card h-100"> |
||||||
|
<img src="{{ item.image }}" class="card-img-top" alt="{{ item.title }}"> |
||||||
|
<div class="card-body"> |
||||||
|
<h5 class="card-title"><a href="{{ item.href }}">{{ item.title }}</a></h5> |
||||||
|
<p class="card-text">{{ item.description }}</p> |
||||||
|
</div> |
||||||
|
<div class="card-footer"> |
||||||
|
<small class="text-muted">{{ item.date }}</small> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- jQuery first, then Popper.js, then Bootstrap JS --> |
||||||
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper-base.min.js" |
||||||
|
integrity="sha384-GCUZeyb8ZgWw+/sO62C/NzCHQvT8CZTVSd8zRn77mDyBkGyMUwzA8bjoCIp1afmU" |
||||||
|
crossorigin="anonymous"></script> |
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" |
||||||
|
integrity="sha384-LofhOvz9f0uYN7V+eLhqJF7iG0QikIKgv7VYlWlqAz7VX9/ZLyya0TpRG2x/sxIS" |
||||||
|
crossorigin="anonymous"></script> |
||||||
|
|
||||||
|
<!-- Filter logic with jQuery --> |
||||||
|
<script> |
||||||
|
$(document).ready(function() { |
||||||
|
$('.filter').click(function() { |
||||||
|
var filter = $(this).data('filter'); |
||||||
|
if (filter == 'all') { |
||||||
|
$('.filter-item').show(); |
||||||
|
} else { |
||||||
|
$('.filter-item').hide(); |
||||||
|
$('.' + filter).show(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -1,6 +1,95 @@ |
|||||||
{% extends 'base.html' %} |
{% extends 'base.html' %} |
||||||
{% set active_page = 'result' %} |
{% set active_page = 'result' %} |
||||||
|
|
||||||
|
{% block style %} |
||||||
|
body { |
||||||
|
background-image: url({{ url_for('static', filename='img/money.jpeg') }}); |
||||||
|
background-repeat: no-repeat; /* Do not repeat the image */ |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
{% endblock style %} |
||||||
|
|
||||||
{% block title %}Strategy Page{% endblock%} |
{% block title %}Strategy Page{% endblock%} |
||||||
{% block content %}Hello world - {{ active_page|e }} {% endblock %} |
{% block content %} |
||||||
|
<div class="container-fluid fade-in" style="background-color: #eee;"> |
||||||
|
<div class="container-fluid px-1 py-4"> |
||||||
|
<div class="alert alert-success p-3 mx-3" role="alert"> |
||||||
|
<h4 class="alert-heading">Well done!</h4> |
||||||
|
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> |
||||||
|
<hr> |
||||||
|
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> |
||||||
|
<div class='d-flex justify-content-end'> |
||||||
|
<div> |
||||||
|
<select id="competition" class="form-select" size="1" aria-label="size 5 select example"> |
||||||
|
{% include 'competitions.html' %} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<button type="button" class="btn btn-info"><i class="fa-duotone fa-person-running"></i></button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="card m-3"> |
||||||
|
<div card="card p-3 m-3"> |
||||||
|
<div class="card-header"> |
||||||
|
|
||||||
|
<div class="d-flex"> |
||||||
|
<div class="py-2 font-bold text-xl"> |
||||||
|
<span class='m-2'>策略顯示</span> |
||||||
|
</div> |
||||||
|
<div class="dropdown ms-auto py-2"> |
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> |
||||||
|
排行方式 |
||||||
|
</button> |
||||||
|
<ul class="dropdown-menu"> |
||||||
|
<li><a class="dropdown-item" href="#">我的策略</a></li> |
||||||
|
<li><a class="dropdown-item" href="#">時間排行</a></li> |
||||||
|
<li><a class="dropdown-item" href="#">報酬排行</a></li> |
||||||
|
<li><a class="dropdown-item" href="#">ＳＲ排行</a></li> |
||||||
|
<li><a class="dropdown-item" href="#">波動率排行</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="p-3"> |
||||||
|
<table class="table caption-top"> |
||||||
|
<caption></caption> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th scope="col">#ID</th> |
||||||
|
<th scope="col">投組名稱</th> |
||||||
|
<th scope="col">創建者</th> |
||||||
|
<th scope="col">報酬率</th> |
||||||
|
<th scope="col">夏普率</th> |
||||||
|
<th scope="col">波動率</th> |
||||||
|
<th scope="col">創建時間</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
{% for info in strategy_data %} |
||||||
|
<thead style="font-size: 1vmin'"> |
||||||
|
<tr> |
||||||
|
<th scope="col" role="alert"> |
||||||
|
<a href="" class="alert-link"> |
||||||
|
{{ info[0] }} |
||||||
|
</a> |
||||||
|
</th> |
||||||
|
<td>{{ info[2] }}</td> |
||||||
|
<td>{{ info[3] }}</td> |
||||||
|
<td>{{ info[4] }}</td> |
||||||
|
<td>{{ info[6] }}</td> |
||||||
|
<td>{{ info[5] }}</td> |
||||||
|
<td>{{ info[1] }}</td> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
{% endfor %} |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{% endblock %} |
||||||
|
|||||||
Loading…
Reference in new issue