changed score calculation and added sorting and 'new' tag

templates/homepage.html

@@ -1,11 +1,41 @@
 {% extends "_layout.html" %}
 
 {% block content %}
-<h2>Benchmark Reports</h2>
+<div class="header-section">
+    <h2>Benchmark Reports</h2>
+
+    <div class="table-controls">
+        <form id="sortForm" method="get" action="/">
+            <div class="control-group">
+                <label for="sort">Sort by:</label>
+                <select name="sort" onchange="this.form.submit()">
+                    <option value="score" {% if current_sort == "score" %}selected{% endif %}>Score</option>
+                    <option value="single" {% if current_sort == "single" %}selected{% endif %}>Single Thread</option>
+                    <option value="multi" {% if current_sort == "multi" %}selected{% endif %}>Multi Thread</option>
+                    <option value="ram" {% if current_sort == "ram" %}selected{% endif %}>RAM Amount</option>
+                    <option value="threads" {% if current_sort == "threads" %}selected{% endif %}>Thread Count</option>
+                    <option value="time" {% if current_sort == "time" %}selected{% endif %}>Time Ago</option>
+                </select>
+            </div>
+
+            <div class="control-group">
+                <input type="hidden" name="order" value="{{ current_order }}">
+                <button type="button" class="order-toggle" onclick="toggleOrder()">
+                    {% if current_order == "desc" %}
+                        Descending ↓
+                    {% else %}
+                        Ascending ↑
+                    {% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
 <table>
     <thead>
         <tr>
-            <th>MT Score</th>
+            <th>CPU Score</th>
             <th>Threads</th>
             <th>RAM</th>
             <th>OS</th>
@@ -24,13 +54,26 @@
             <td data-label="RAM">{{ report.ram }}</td>
             <td data-label="OS">{{ report.os | truncate(length=30) }}</td>
             <td data-label="Hostname">{{ report.hostname }}</td>
-            <td data-label="Time">{{ report.time_ago }}</td>
+            <td data-label="Time">{{ report.time_ago }}
+              {% if report.is_new %}
+                <span class="new-badge">NEW</span>
+              {% endif %}
+            </td>
             <td data-label="Note" class="signature-cell">{{ report.signature }}</td>
         </tr>
         {% endfor %}
     </tbody>
 </table>
 
+<script>
+function toggleOrder() {
+    const form = document.getElementById('sortForm');
+    const orderInput = form.querySelector('input[name="order"]');
+    orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
+    form.submit();
+}
+</script>
+
 <style>
 .clickable-row {
     cursor: pointer;
@@ -45,5 +88,100 @@
     text-decoration: none;
     color: inherit;
 }
+
+.score-cell {
+    color: var(--primary-color);
+    font-weight: 700;
+}
+
+.signature-cell {
+    color: var(--text-muted);
+    font-style: italic;
+    font-size: 0.8rem;
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.new-badge {
+  font-size: 0.6rem;
+  padding: 3px;
+  color: var(--primary-text);
+  border: 1px solid var(--primary-color);
+  background: var(--primary-soft);
+  border-radius: 8px;
+}
+
+.header-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 25px;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.header-section h2 { margin: 0; }
+
+.table-controls form {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    background: var(--bg-card);
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+select {
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: var(--text-dark);
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.order-toggle {
+    background: var(--primary-soft);
+    border: 1px solid var(--primary-border);
+    color: var(--primary-text);
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.2s;
+}
+
+.order-toggle:hover {
+    background: var(--primary-border);
+}
+
+.sub-scores {
+    font-size: 0.65rem;
+    font-weight: normal;
+    opacity: 0.7;
+    margin-top: 2px;
+}
+
+@media screen and (max-width: 640px) {
+  .table-controls form {
+      /* flex-direction: column; */
+      gap: 0.6rem;
+  }
+}
 </style>
 {% endblock %}