| <!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> |
|
|
