| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>Prediction Results</title>
|
| <style>
|
| body {
|
| background-color: #041C32;
|
| color: #ECB365;
|
| font-family: Arial, sans-serif;
|
| margin: 0;
|
| padding: 20px;
|
| }
|
| .container {
|
| max-width: 600px;
|
| margin: auto;
|
| background-color: #04293A;
|
| padding: 20px;
|
| border-radius: 8px;
|
| }
|
| h1 {
|
| color: #ECB365;
|
| text-align: center;
|
| }
|
| table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| margin-top: 20px;
|
| }
|
| th, td {
|
| border: 1px solid #064663;
|
| padding: 10px;
|
| text-align: center;
|
| }
|
| th {
|
| background-color: #064663;
|
| }
|
| .positive {
|
| color: green;
|
| font-weight: bold;
|
| }
|
| .negative {
|
| color: red;
|
| font-weight: bold;
|
| }
|
| .btn {
|
| display: block;
|
| margin: 20px auto 0;
|
| padding: 10px 15px;
|
| background-color: #ECB365;
|
| color: #041C32;
|
| border: none;
|
| border-radius: 4px;
|
| text-decoration: none;
|
| font-weight: bold;
|
| width: fit-content;
|
| }
|
|
|
| .tooltip {
|
| position: relative;
|
| display: inline-block;
|
| cursor: pointer;
|
| }
|
|
|
| .tooltip .tooltip-content {
|
| visibility: hidden;
|
| width: 200px;
|
| background-color: #ECB365;
|
| color: #041C32;
|
| text-align: center;
|
| border-radius: 6px;
|
| padding: 10px;
|
| position: absolute;
|
| z-index: 1;
|
| bottom: 125%;
|
| left: 50%;
|
| transform: translateX(-50%);
|
| opacity: 0;
|
| transition: opacity 0.3s;
|
| }
|
|
|
| .tooltip .tooltip-content::after {
|
| content: "";
|
| position: absolute;
|
| top: 100%;
|
| left: 50%;
|
| transform: translateX(-50%);
|
| border-width: 5px;
|
| border-style: solid;
|
| border-color: #ECB365 transparent transparent transparent;
|
| }
|
|
|
| .tooltip:hover .tooltip-content {
|
| visibility: visible;
|
| opacity: 1;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <h1>Prediction Results</h1>
|
| <p>Note: This is a demo model results, so results may vary and be weak on predictions.</p>
|
| <table>
|
| <tr>
|
| <th>Model</th>
|
| <th>Predicted Price</th>
|
| <th>Difference (Price - EngAmt)</th>
|
| </tr>
|
| <tr>
|
| <td>
|
| <div class="tooltip">
|
| GIA
|
| <div class="tooltip-content">
|
| <strong>Note:</strong> this GIA model is trainned over 372 records.
|
| </div>
|
| </div>
|
| </td>
|
| <td>{{ gia_price }}</td>
|
| <td>
|
| {% if gia_diff >= 0 %}
|
| <span class="positive">{{ gia_diff }}</span>
|
| {% else %}
|
| <span class="negative">{{ gia_diff }}</span>
|
| {% endif %}
|
| </td>
|
| </tr>
|
| <tr>
|
| <td>
|
| <div class="tooltip">
|
| Grade
|
| <div class="tooltip-content">
|
| <strong>Note:</strong> this Grade model is trainned over 641 records.
|
| </div>
|
| </div>
|
| </td>
|
| <td>{{ grade_price }}</td>
|
| <td>
|
| {% if grade_diff >= 0 %}
|
| <span class="positive">{{ grade_diff }}</span>
|
| {% else %}
|
| <span class="negative">{{ grade_diff }}</span>
|
| {% endif %}
|
| </td>
|
| </tr>
|
| <tr>
|
| <td>
|
| <div class="tooltip">
|
| By Grade
|
| <div class="tooltip-content">
|
| <strong>Note:</strong> this By Grade model is trainned over 641 records.
|
| </div>
|
| </div>
|
| </td>
|
| <td>{{ bygrade_price }}</td>
|
| <td>
|
| {% if bygrade_diff >= 0 %}
|
| <span class="positive">{{ bygrade_diff }}</span>
|
| {% else %}
|
| <span class="negative">{{ bygrade_diff }}</span>
|
| {% endif %}
|
| </td>
|
| </tr>
|
| <tr>
|
| <td>
|
| <div class="tooltip">
|
| Makable
|
| <div class="tooltip-content">
|
| <strong>Note:</strong> this Makable model is trainned over 1774 records.
|
| </div>
|
| </div>
|
| </td>
|
| <td>{{ makable_price }}</td>
|
| <td>
|
| {% if makable_diff >= 0 %}
|
| <span class="positive">{{ makable_diff }}</span>
|
| {% else %}
|
| <span class="negative">{{ makable_diff }}</span>
|
| {% endif %}
|
| </td>
|
| </tr>
|
| </table>
|
| <a href="{{ url_for('home') }}" class="btn">Make Another Prediction</a>
|
| </div>
|
| </body>
|
| </html>
|
|
|
