added i18n
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="{{ fluent(key='lang', lang=lang) }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -15,33 +15,58 @@
|
||||
<div class="nav-left">
|
||||
<span class="nav-logo">Slimes 🧪</span>
|
||||
<div class="nav-links">
|
||||
<a href="{{ prefix }}./" class="{% if current_page == 'leaderboard' %}active{% endif %}">Leaderboard</a>
|
||||
<a href="{{ prefix }}analytics" class="{% if current_page == 'analytics' %}active{% endif %}">Analytics</a>
|
||||
<a href="{{ prefix }}./" class="{% if current_page == 'leaderboard' %}active{% endif %}">{{ fluent(key="nav-leaderboard", lang=lang) }}</a>
|
||||
<a href="{{ prefix }}analytics" class="{% if current_page == 'analytics' %}active{% endif %}">{{ fluent(key="nav-analytics", lang=lang) }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<div class="dropdown" id="githubDropdown">
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-trigger" onclick="toggleDropdown(event)" aria-label="Git Repositories">
|
||||
<i class="fa-brands fa-git-alt fa-lg"></i>
|
||||
<i class="fa-solid fa-chevron-down chevron"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-header">Source Code</div>
|
||||
<div class="dropdown-header">{{ fluent(key="nav-source-header", lang=lang) }}</div>
|
||||
<a href="https://git.alatreon.org/strawberries/slimes" target="_blank" rel="noopener">
|
||||
<span class="link-title"><i class="fa-solid fa-terminal fa-fw"></i> CLI + Server</span>
|
||||
<span class="link-desc">Core lib, CLI and API monorepo</span>
|
||||
<span class="link-title"><i class="fa-solid fa-terminal fa-fw"></i> {{ fluent(key="nav-cli-title", lang=lang) }}</span>
|
||||
<span class="link-desc">{{ fluent(key="nav-cli-desc", lang=lang) }}</span>
|
||||
</a>
|
||||
<a href="https://git.alatreon.org/strawberries/slimes-website" target="_blank" rel="noopener">
|
||||
<span class="link-title"><i class="fa-solid fa-globe fa-fw"></i> Website</span>
|
||||
<span class="link-desc">This very website</span>
|
||||
<span class="link-title"><i class="fa-solid fa-globe fa-fw"></i> {{ fluent(key="nav-web-title", lang=lang) }}</span>
|
||||
<span class="link-desc">{{ fluent(key="nav-web-desc", lang=lang) }}</span>
|
||||
</a>
|
||||
<a href="https://git.alatreon.org/strawberries/slimes-gui" target="_blank" rel="noopener">
|
||||
<span class="link-title"><i class="fa-solid fa-window-restore fa-fw"></i> GUI Version</span>
|
||||
<span class="link-desc">Experimental Cross-platform GUI</span>
|
||||
<span class="link-title"><i class="fa-solid fa-window-restore fa-fw"></i> {{ fluent(key="nav-gui-title", lang=lang) }}</span>
|
||||
<span class="link-desc">{{ fluent(key="nav-gui-desc", lang=lang) }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-trigger" onclick="toggleDropdown(event)" aria-label="Language">
|
||||
<i class="fa-solid fa-globe fa-lg"></i>
|
||||
<i class="fa-solid fa-chevron-down chevron"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-header">{{ fluent(key="nav-lang-header", lang=lang) }}</div>
|
||||
{% for l in available_languages %}
|
||||
<a href="{{ prefix }}set-lang/{{ l }}" {% if l == lang %}class="active"{% endif %}>
|
||||
{{ l | upper }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="dropdown"> -->
|
||||
<!-- <button class="dropdown-trigger"> -->
|
||||
<!-- <i class="fa-solid fa-language"></i> {{ lang | truncate(length=2, end="") | upper }} -->
|
||||
<!-- </button> -->
|
||||
<!-- <div class="dropdown-menu"> -->
|
||||
<!-- <a href="/set-lang/en-US">English</a> -->
|
||||
<!-- <a href="/set-lang/fr-FR">Français</a> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -49,23 +74,33 @@
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
<footer>{{ now() | date(format="%Y") }} - Slimes</footer>
|
||||
<footer>{{ now() | date(format="%Y") }} - {{ fluent(key="footer-text", lang=lang) }}</footer>
|
||||
|
||||
<script>
|
||||
function toggleDropdown(event) {
|
||||
event.stopPropagation();
|
||||
const dropdown = document.getElementById('githubDropdown');
|
||||
dropdown.classList.toggle('open');
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.closest('#githubDropdown')) {
|
||||
const dropdown = document.getElementById('githubDropdown');
|
||||
if (dropdown && dropdown.classList.contains('open')) {
|
||||
dropdown.classList.remove('open');
|
||||
}
|
||||
const dropdown = event.currentTarget.closest('.dropdown');
|
||||
const isOpen = dropdown.classList.contains('open');
|
||||
|
||||
// close all
|
||||
document.querySelectorAll('.dropdown.open').forEach(d => {
|
||||
d.classList.remove('open');
|
||||
});
|
||||
|
||||
// reopen clicked one if was closed
|
||||
if (!isOpen) {
|
||||
dropdown.classList.add('open');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('click', (event) => {
|
||||
if (!event.target.closest('.dropdown')) {
|
||||
document.querySelectorAll('.dropdown.open').forEach(d => {
|
||||
d.classList.remove('open');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -93,6 +128,14 @@
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
@@ -227,7 +270,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
<!-- .nav-links { display: none; } -->
|
||||
/* .nav-links { display: none; } */
|
||||
.nav-left { gap: 1rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
{% macro chart_card(id, title) %}
|
||||
<div class="chart-card">
|
||||
<button class="expand-btn" onclick="openFullView('{{ id }}', '{{ title }}')">
|
||||
<i class="fa-solid fa-expand"></i> Full View
|
||||
<button class="expand-btn" onclick="openFullView(`{{ id }}`, `{{ title }}`)">
|
||||
<i class="fa-solid fa-expand"></i> {{ fluent(key="analytics-full-view", lang=lang) }}
|
||||
</button>
|
||||
<h3>{{ title }}</h3>
|
||||
<canvas id="{{ id }}"></canvas>
|
||||
@@ -12,8 +12,8 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="header-section">
|
||||
<h2>Benchmark Analytics</h2>
|
||||
<p style="text-align: center; color: var(--text-muted);">Insights from {{ data.total_reports }} benchmarks</p>
|
||||
<h2>{{ fluent(key="analytics-title", lang=lang) }}</h2>
|
||||
<p style="text-align: center; color: var(--text-muted);">{{ fluent(key="analytics-insights", lang=lang, count=data.total_reports) }}</p>
|
||||
</div>
|
||||
|
||||
<div id="chartModal" class="modal">
|
||||
@@ -34,21 +34,21 @@
|
||||
|
||||
<div class="analytics-grid">
|
||||
<div class="fact-card">
|
||||
<span class="fact-title">RAM Efficiency</span>
|
||||
<span class="fact-title">{{ fluent(key="analytics-ram-eff", lang=lang) }}</span>
|
||||
<span class="fact-value">{{ data.avg_score_per_gb | round(precision=1) }}</span>
|
||||
<span class="fact-label">Avg Score per GB RAM</span>
|
||||
<span class="fact-label">{{ fluent(key="analytics-ram-eff-desc", lang=lang) }}</span>
|
||||
</div>
|
||||
<div class="fact-card">
|
||||
<span class="fact-title">CPU Thread Efficiency</span>
|
||||
<span class="fact-title">{{ fluent(key="analytics-cpu-eff", lang=lang) }}</span>
|
||||
<span class="fact-value">{{ data.avg_score_per_thread | round(precision=1) }}</span>
|
||||
<span class="fact-label">Avg Score per Thread</span>
|
||||
<span class="fact-label">{{ fluent(key="analytics-cpu-eff-desc", lang=lang) }}</span>
|
||||
</div>
|
||||
|
||||
{{ self::chart_card(id="distChart", title="Score Distribution") }}
|
||||
{{ self::chart_card(id="osCountChart", title="Reports by Operating System") }}
|
||||
{{ self::chart_card(id="osChart", title="Avg Score by Operating System") }}
|
||||
{{ self::chart_card(id="osMaxChart", title="Highest Score by Operating System") }}
|
||||
{{ self::chart_card(id="osMinChart", title="Lowest Score by Operating System") }}
|
||||
{{ self::chart_card(id="distChart", title=fluent(key="analytics-chart-dist", lang=lang)) }}
|
||||
{{ self::chart_card(id="osCountChart", title=fluent(key="analytics-chart-os-count", lang=lang)) }}
|
||||
{{ self::chart_card(id="osChart", title=fluent(key="analytics-chart-os-avg", lang=lang)) }}
|
||||
{{ self::chart_card(id="osMaxChart", title=fluent(key="analytics-chart-os-max", lang=lang)) }}
|
||||
{{ self::chart_card(id="osMinChart", title=fluent(key="analytics-chart-os-min", lang=lang)) }}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
@@ -244,6 +244,10 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.expand-btn i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="back-nav">
|
||||
<a href="../">← Back to Leaderboard</a>
|
||||
<a href="../">← {{ fluent(key="details-back", lang=lang) }}</a>
|
||||
</div>
|
||||
|
||||
<div class="report-card">
|
||||
@@ -12,7 +12,7 @@
|
||||
{% if report.slimes["Hostname"] %}
|
||||
{{ report.slimes["Hostname"].0 }}
|
||||
{% else %}
|
||||
Device {{ report.signature | truncate(length=10) }}
|
||||
{{ fluent(key="details-device", lang=lang, sig=report.signature | truncate(length=10)) }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
@@ -21,22 +21,22 @@
|
||||
<div class="meta-container">
|
||||
<div class="meta-group system-context">
|
||||
<div class="meta-item">
|
||||
<span class="label">ID</span>
|
||||
<span class="label">{{ fluent(key="details-report-id", lang=lang) }}</span>
|
||||
<span class="value">#{{ report.id }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="label">VERSION</span>
|
||||
<span class="label">{{ fluent(key="details-version", lang=lang) }}</span>
|
||||
<span class="value">v{{ report.client_version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meta-group hardware-context">
|
||||
<div class="meta-item">
|
||||
<span class="label">MAC</span>
|
||||
<span class="label">{{ fluent(key="details-mac", lang=lang) }}</span>
|
||||
<span class="value">{{ report.mac_address }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="label">REPORTED</span>
|
||||
<span class="label">{{ fluent(key="details-reported", lang=lang) }}</span>
|
||||
<span class="value">{{ time_ago }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,25 +45,25 @@
|
||||
|
||||
<div class="score-container">
|
||||
<div class="score-value">{{ score }}</div>
|
||||
<div class="score-label">CPU Score</div>
|
||||
<div class="score-label">{{ fluent(key="details-cpu-score", lang=lang) }}</div>
|
||||
<div class="score-note">(mt+st)/2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-grid">
|
||||
<div class="info-section">
|
||||
<h3>Performance Breakdown</h3>
|
||||
<h3>{{ fluent(key="details-perf-breakdown", lang=lang) }}</h3>
|
||||
<div class="bench-stats">
|
||||
<div class="stat-row">
|
||||
<span>Single-Thread</span>
|
||||
<span>{{ fluent(key="details-single", lang=lang) }}</span>
|
||||
<strong>{{ report.benchmark.single_thread.score }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>Multi-Thread</span>
|
||||
<span>{{ fluent(key="details-multi", lang=lang) }}</span>
|
||||
<strong>{{ report.benchmark.multi_thread.score }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>Threads</span>
|
||||
<span>{{ fluent(key="details-threads", lang=lang) }}</span>
|
||||
<strong>{{ report.benchmark.logical_cores }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,64 +2,64 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="header-section">
|
||||
<h2>Benchmark Reports</h2>
|
||||
<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="Show Android clients">
|
||||
<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">Experimental</span>
|
||||
<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>Sort by:</label>
|
||||
<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" %}Score
|
||||
{% elif current_sort == "single" %}Single Thread
|
||||
{% elif current_sort == "multi" %}Multi Thread
|
||||
{% elif current_sort == "ram" %}RAM Amount
|
||||
{% elif current_sort == "threads" %}Thread Count
|
||||
{% elif current_sort == "time" %}Time Ago
|
||||
{% 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">Sort Benchmarks By</div>
|
||||
<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> Score</span>
|
||||
<span class="link-desc">(Singlethread + Multithread) / 2</span>
|
||||
<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> Singlethread</span>
|
||||
<span class="link-desc">Single-core efficiency</span>
|
||||
<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> Multithread</span>
|
||||
<span class="link-desc">Multi-core efficiency</span>
|
||||
<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> RAM Amount</span>
|
||||
<span class="link-desc">System memory capacity</span>
|
||||
<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> Thread Count</span>
|
||||
<span class="link-desc">Total logical cores</span>
|
||||
<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> Time Ago</span>
|
||||
<span class="link-desc">Newest reports first</span>
|
||||
<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>
|
||||
@@ -68,7 +68,7 @@
|
||||
<div class="control-group">
|
||||
<button type="button" class="order-toggle" onclick="toggleOrder()">
|
||||
<span>
|
||||
{% if current_order == "desc" %}Descending{% else %}Ascending{% endif %}
|
||||
{% 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>
|
||||
@@ -81,13 +81,13 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="rank-header"></th>
|
||||
<th>CPU Score</th>
|
||||
<th>Threads</th>
|
||||
<th>RAM</th>
|
||||
<th>OS</th>
|
||||
<th>Hostname</th>
|
||||
<th>Time</th>
|
||||
<th>Note</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>
|
||||
@@ -114,7 +114,7 @@
|
||||
<td data-label="Hostname">{{ report.hostname }}</td>
|
||||
<td data-label="Time">{{ report.time_ago }}
|
||||
{% if report.is_new %}
|
||||
<span class="new-badge">NEW</span>
|
||||
<span class="new-badge">{{ fluent(key="badge-new", lang=lang) }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td data-label="Note" class="signature-cell">{{ report.signature }}</td>
|
||||
|
||||
Reference in New Issue
Block a user