Spaces:
Running
Running
| <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 container */ | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| /* Tooltip text (info card) */ | |
| .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%; /* Position above the text */ | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| /* Tooltip arrow */ | |
| .tooltip .tooltip-content::after { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; /* At the bottom of the tooltip */ | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: #ECB365 transparent transparent transparent; | |
| } | |
| /* Show tooltip on hover */ | |
| .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> | |