|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Report Viewer</title> |
|
|
<style> |
|
|
body { |
|
|
background-color: #041C32; |
|
|
color: #ECB365; |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
} |
|
|
.container { |
|
|
margin: 20px auto; |
|
|
padding: 20px; |
|
|
background-color: #04293A; |
|
|
border-radius: 10px; |
|
|
text-align: center; |
|
|
max-width: 90%; |
|
|
box-shadow: 0px 0px 15px rgba(236, 179, 101, 0.3); |
|
|
} |
|
|
.toggle-buttons { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.toggle-buttons a { |
|
|
padding: 10px 15px; |
|
|
background-color: #ECB365; |
|
|
color: #041C32; |
|
|
text-decoration: none; |
|
|
margin: 0 10px; |
|
|
border-radius: 5px; |
|
|
font-weight: bold; |
|
|
} |
|
|
.toggle-buttons a.active { |
|
|
background-color: #d69f50; |
|
|
} |
|
|
.pagination { |
|
|
margin-top: 15px; |
|
|
} |
|
|
.pagination a { |
|
|
padding: 8px 12px; |
|
|
background-color: #ECB365; |
|
|
color: #041C32; |
|
|
text-decoration: none; |
|
|
margin: 0 5px; |
|
|
border-radius: 5px; |
|
|
} |
|
|
.table-wrapper { |
|
|
overflow-x: auto; |
|
|
margin: auto; |
|
|
padding: 15px; |
|
|
background-color: #04293A; |
|
|
border-radius: 6px; |
|
|
} |
|
|
table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
color: #ECB365; |
|
|
} |
|
|
th, td { |
|
|
border: 1px solid #ECB365; |
|
|
padding: 10px; |
|
|
text-align: center; |
|
|
} |
|
|
th { |
|
|
background-color: #064663; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 12px 20px; |
|
|
background-color: #ECB365; |
|
|
color: #041C32; |
|
|
text-decoration: none; |
|
|
margin: 10px 5px; |
|
|
border-radius: 6px; |
|
|
font-weight: bold; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
.btn:hover { |
|
|
background-color: #d69f50; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
|
|
|
<div class="toggle-buttons"> |
|
|
<a href="{{ url_for('report_view', report_type='pred', page=1) }}" |
|
|
class="{% if report_type == 'pred' %}active{% endif %}">Prediction Report</a> |
|
|
<a href="{{ url_for('report_view', report_type='class', page=1) }}" |
|
|
class="{% if report_type == 'class' %}active{% endif %}">Classification Analysis</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="table-wrapper"> |
|
|
{{ table_html | safe }} |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pagination"> |
|
|
{% if has_prev %} |
|
|
<a href="{{ url_for('report_view', report_type=report_type, page=page-1) }}">Previous</a> |
|
|
{% endif %} |
|
|
<span>Page {{ page }}</span> |
|
|
{% if has_next %} |
|
|
<a href="{{ url_for('report_view', report_type=report_type, page=page+1) }}">Next</a> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="margin-top:20px;"> |
|
|
{% if report_type == 'pred' %} |
|
|
<a href="{{ url_for('download_pred') }}" class="btn">Download Prediction CSV</a> |
|
|
{% else %} |
|
|
<a href="{{ url_for('download_class') }}" class="btn">Download Classification CSV</a> |
|
|
{% endif %} |
|
|
<a href="/" class="btn">Go Back</a> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
