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' %} |
||||
{% 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 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