359 lines
11 KiB
HTML
359 lines
11 KiB
HTML
{% extends "_layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="header-section">
|
|
<h2>{{ fluent(key="home-title", lang=lang) }}</h2>
|
|
|
|
<div class="table-controls">
|
|
<form id="sortForm" method="get" action="">
|
|
<div class="control-group">
|
|
<label class="switch-ui" title="{{ fluent(key='home-experimental-tooltip', lang=lang) }}">
|
|
<input type="checkbox" name="experimental" value="true"
|
|
onchange="this.form.submit()"
|
|
{% if show_experimental %}checked{% endif %}>
|
|
<span class="slider"></span>
|
|
</label>
|
|
<span class="switch-text">{{ fluent(key="home-experimental", lang=lang) }}</span>
|
|
</div>
|
|
|
|
<input type="hidden" name="sort" id="sortInput" value="{{ current_sort }}">
|
|
<input type="hidden" name="order" id="orderInput" value="{{ current_order }}">
|
|
|
|
<div class="control-group">
|
|
<label>{{ fluent(key="home-sort-by", lang=lang) }}</label>
|
|
<div class="dropdown" id="sortDropdown">
|
|
<button class="dropdown-trigger select-styled" type="button" onclick="toggleSortDropdown(event)">
|
|
<span>
|
|
{% if current_sort == "score" %}{{ fluent(key="sort-score", lang=lang) }}
|
|
{% elif current_sort == "single" %}{{ fluent(key="sort-single", lang=lang) }}
|
|
{% elif current_sort == "multi" %}{{ fluent(key="sort-multi", lang=lang) }}
|
|
{% elif current_sort == "ram" %}{{ fluent(key="sort-ram", lang=lang) }}
|
|
{% elif current_sort == "threads" %}{{ fluent(key="sort-threads", lang=lang) }}
|
|
{% elif current_sort == "time" %}{{ fluent(key="sort-time", lang=lang) }}
|
|
{% endif %}
|
|
</span>
|
|
<i class="fa-solid fa-chevron-down chevron"></i>
|
|
</button>
|
|
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-header">{{ fluent(key="home-sort-by", lang=lang) }}</div>
|
|
<a href="javascript:void(0)" onclick="selectSort('score')">
|
|
<span class="link-title"><i class="fa-solid fa-award fa-fw"></i> {{ fluent(key="sort-score", lang=lang) }}</span>
|
|
<span class="link-desc">{{ fluent(key="sort-desc-score", lang=lang) }}</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('single')">
|
|
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> {{ fluent(key="sort-single", lang=lang) }}</span>
|
|
<span class="link-desc">{{ fluent(key="sort-desc-single", lang=lang) }}</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('multi')">
|
|
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> {{ fluent(key="sort-multi", lang=lang) }}</span>
|
|
<span class="link-desc">{{ fluent(key="sort-desc-multi", lang=lang) }}</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('ram')">
|
|
<span class="link-title"><i class="fa-solid fa-memory fa-fw"></i> {{ fluent(key="sort-ram", lang=lang) }}</span>
|
|
<span class="link-desc">{{ fluent(key="sort-desc-ram", lang=lang) }}</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('threads')">
|
|
<span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> {{ fluent(key="sort-threads", lang=lang) }}</span>
|
|
<span class="link-desc">{{ fluent(key="sort-desc-threads", lang=lang) }}</span>
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="selectSort('time')">
|
|
<span class="link-title"><i class="fa-solid fa-clock fa-fw"></i> {{ fluent(key="sort-time", lang=lang) }}</span>
|
|
<span class="link-desc">{{ fluent(key="sort-desc-time", lang=lang) }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<button type="button" class="order-toggle" onclick="toggleOrder()">
|
|
<span>
|
|
{% if current_order == "desc" %}{{ fluent(key="home-order-desc", lang=lang) }}{% else %}{{ fluent(key="home-order-asc", lang=lang) }}{% endif %}
|
|
</span>
|
|
<i class="fa-solid {% if current_order == 'desc' %}fa-arrow-down-wide-short{% else %}fa-arrow-up-short-wide{% endif %}"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="rank-header"></th>
|
|
<th>{{ fluent(key="table-cpu-score", lang=lang) }}</th>
|
|
<th>{{ fluent(key="table-threads", lang=lang) }}</th>
|
|
<th>{{ fluent(key="table-ram", lang=lang) }}</th>
|
|
<th>{{ fluent(key="table-os", lang=lang) }}</th>
|
|
<th>{{ fluent(key="table-hostname", lang=lang) }}</th>
|
|
<th>{{ fluent(key="table-time", lang=lang) }}</th>
|
|
<th>{{ fluent(key="table-note", lang=lang) }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for report in reports %}
|
|
<tr class="clickable-row" onclick="window.location='report/{{ report.id }}';">
|
|
<td class="rank-cell">
|
|
{% if loop.index == 1 %}
|
|
<span class="medal">🥇</span>
|
|
{% elif loop.index == 2 %}
|
|
<span class="medal">🥈</span>
|
|
{% elif loop.index == 3 %}
|
|
<span class="medal">🥉</span>
|
|
{% else %}
|
|
<span class="rank-number">{{ loop.index }}</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<td data-label="MT Score" class="score-cell">
|
|
<a href="report/{{ report.id }}">{{ report.score }}</a>
|
|
</td>
|
|
<td data-label="Threads">{{ report.cores }}</td>
|
|
<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 }}
|
|
{% if report.is_new %}
|
|
<span class="new-badge">{{ fluent(key="badge-new", lang=lang) }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td data-label="Note" class="signature-cell">{{ report.signature }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
function toggleSortDropdown(event) {
|
|
event.stopPropagation();
|
|
document.getElementById('sortDropdown').classList.toggle('open');
|
|
}
|
|
|
|
function selectSort(value) {
|
|
document.getElementById('sortInput').value = value;
|
|
document.getElementById('sortForm').submit();
|
|
}
|
|
|
|
function toggleOrder() {
|
|
const orderInput = document.getElementById('orderInput');
|
|
orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
|
|
document.getElementById('sortForm').submit();
|
|
}
|
|
|
|
window.addEventListener('click', function(event) {
|
|
if (!event.target.closest('#sortDropdown')) {
|
|
const dropdown = document.getElementById('sortDropdown');
|
|
if (dropdown) dropdown.classList.remove('open');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.clickable-row {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.clickable-row:hover {
|
|
background-color: var(--hover-color);
|
|
}
|
|
|
|
.clickable-row a {
|
|
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-styled {
|
|
min-width: 160px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.select-styled, .order-toggle {
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
padding: 0 0.8rem;
|
|
border-radius: 6px;
|
|
color: var(--text-dark);
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
height: 38px;
|
|
box-sizing: border-box;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.select-styled:hover {
|
|
background: var(--bg-main);
|
|
}
|
|
|
|
.select-styled .chevron {
|
|
font-size: 0.7rem;
|
|
opacity: 0.5;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.dropdown.open .chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.order-toggle {
|
|
white-space: nowrap;
|
|
background: white;
|
|
justify-content: center;
|
|
}
|
|
|
|
.select-styled:hover, .order-toggle:hover {
|
|
background: var(--bg-main);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.rank-header {
|
|
width: 50px;
|
|
}
|
|
|
|
.rank-cell {
|
|
text-align: center;
|
|
padding-right: 0 !important;
|
|
width: 50px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.medal {
|
|
font-size: 1.25rem;
|
|
display: inline-block;
|
|
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
|
|
}
|
|
|
|
.rank-number {
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 0.85rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.switch-ui {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 34px;
|
|
height: 18px;
|
|
}
|
|
|
|
.switch-ui input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: #e2e8f0;
|
|
transition: .3s;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 12px;
|
|
width: 12px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: white;
|
|
transition: .3s;
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.switch-text {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.table-controls form {
|
|
gap: 0.6rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
.table-controls form {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 1rem;
|
|
}
|
|
.switch-text { margin-right: 0; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|