strawberries/slimes-website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added list (home) and details pages

Browse Source
This commit is contained in:
eiiko6
2026-03-26 22:12:54 +01:00
parent 26b12e9dca
commit 453f48804f
10 changed files with 599 additions and 2059 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
templates/details.html Normal file
View File

@@ -0,0 +1,258 @@
{% extends "_layout.html" %}
{% block content %}
<div class="back-nav">
<a href="/">&larr; Back to Leaderboard</a>
</div>
<div class="report-card">
<div class="report-header">
<div class="header-main">
<h1 class="hostname-title">
{% if report.slimes["Hostname"] %}
{{ report.slimes["Hostname"].0 }}
{% else %}
Device {{ report.signature | truncate(length=10) }}
{% endif %}
</h1>
<p class="report-signature">{% if report.signature %}"{{ report.signature }}"{% endif %}</p>
<div class="meta-container">
<div class="meta-group system-context">
<div class="meta-item">
<span class="label">ID</span>
<span class="value">#{{ report.id }}</span>
</div>
<div class="meta-item">
<span class="label">VERSION</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="value">{{ report.mac_address }}</span>
</div>
<div class="meta-item">
<span class="label">REPORTED</span>
<span class="value">{{ time_ago }}</span>
</div>
</div>
</div>
</div>
<div class="score-container">
<div class="score-value">{{ report.benchmark.multi_thread.score }}</div>
<div class="score-label">Multi-Thread Score</div>
</div>
</div>
<div class="report-grid">
<div class="info-section">
<h3>Performance Breakdown</h3>
<div class="bench-stats">
<div class="stat-row">
<span>Single-Thread</span>
<strong>{{ report.benchmark.single_thread.score }}</strong>
</div>
<div class="stat-row">
<span>Multi-Thread</span>
<strong>{{ report.benchmark.multi_thread.score }}</strong>
</div>
<div class="stat-row">
<span>Threads</span>
<strong>{{ report.benchmark.logical_cores }}</strong>
</div>
</div>
</div>
{% for key, list in report.slimes %}
{% if key != "Hostname" %}
<div class="info-section">
<h3>{{ key }}</h3>
<ul class="info-list">
{% for item in list %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<style>
.back-nav { margin-bottom: 1.5rem; }
.back-nav a { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.report-card {
background: var(--bg-card);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
border: 1px solid var(--border-color);
}
.report-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color);
gap: 1.5rem;
}
.hostname-title {
margin: 0;
font-size: 2.2rem;
color: var(--text-dark);
letter-spacing: -0.02em;
line-height: 1.1;
}
.report-signature {
margin: 0.2rem 0 1.5rem 0;
font-style: italic;
color: var(--text-muted);
opacity: 0.7;
font-size: 1.1rem;
word-break: break-word;
}
.meta-container {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.meta-group {
display: flex;
gap: 1.25rem;
padding: 0.6rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
}
.system-context {
background: var(--primary-soft);
border: 1px solid var(--primary-border);
color: var(--primary-text);
}
.hardware-context {
background: var(--bg-main);
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.meta-item { display: flex; flex-direction: column; }
.meta-item .label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
opacity: 0.6;
letter-spacing: 0.05em;
}
.meta-item .value { font-family: ui-monospace, monospace; font-weight: 600; white-space: nowrap; }
.score-container { text-align: right; flex-shrink: 0; }
.score-value {
font-size: 2.5rem;
font-weight: 900;
color: var(--primary-color);
line-height: 1;
}
.score-label {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.1em;
}
.report-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.info-section {
background: var(--bg-card);
padding: 1.25rem;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.info-section h3 {
margin: 0 0 1rem 0;
font-size: 0.75rem;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
}
.info-list { list-style: none; padding: 0; margin: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.info-list li {
margin-bottom: 0.5rem;
padding-left: 1rem;
position: relative;
word-break: break-word;
}
.info-list li::before { content: "›"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }
.bench-stats { display: flex; flex-direction: column; gap: 0.6rem; }
.stat-row { display: flex; justify-content: space-between; font-size: 0.9rem; }
@media (max-width: 640px) {
.report-card {
padding: 1.25rem;
border-radius: 0;
border-left: none;
border-right: none;
}
.report-header {
flex-direction: column;
align-items: flex-start;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
gap: 1.5rem;
}
.hostname-title {
font-size: 1.75rem;
}
.score-container {
text-align: left;
width: 100%;
padding: 1rem;
background: var(--primary-soft);
border-radius: 8px;
box-sizing: border-box;
}
.score-value {
font-size: 2.0rem;
}
.meta-container {
flex-direction: column;
gap: 0.5rem;
}
.meta-group {
width: 100%;
box-sizing: border-box;
justify-content: flex-start;
}
.report-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
</style>
{% endblock %}