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

added experimental client filter, rank number on leaderboard and changed git links

Browse Source
This commit is contained in:
eiiko6
2026-05-04 20:57:00 +02:00
parent 33eb3e4f3f
commit 4e450430f6
3 changed files with 125 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
templates/_layout.html
View File

@@ -22,23 +22,23 @@
<div class="nav-right">
<div class="dropdown" id="githubDropdown">
<button class="dropdown-trigger" onclick="toggleDropdown(event)" aria-label="GitHub Repositories">
<i class="fa-brands fa-github fa-lg"></i>
<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>
<a href="https://github.com/eiiko6/slimes" target="_blank" rel="noopener">
<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>
</a>
<a href="https://github.com/eiiko6/slimes-website" target="_blank" rel="noopener">
<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>
</a>
<a href="https://github.com/eiiko6/slimes-gui" target="_blank" rel="noopener">
<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">Cross-platform GUI</span>
<span class="link-desc">Experimental Cross-platform GUI</span>
</a>
</div>
</div>

115
templates/homepage.html
View File

@@ -6,6 +6,16 @@
<div class="table-controls">
<form id="sortForm" method="get" action="">
<div class="control-group">
<label class="switch-ui" title="Show Android clients">
<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>
</div>
<input type="hidden" name="sort" id="sortInput" value="{{ current_sort }}">
<input type="hidden" name="order" id="orderInput" value="{{ current_order }}">
@@ -70,6 +80,7 @@
<table>
<thead>
<tr>
<th class="rank-header"></th>
<th>CPU Score</th>
<th>Threads</th>
<th>RAM</th>
@@ -82,6 +93,18 @@
<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>
@@ -242,12 +265,94 @@ window.addEventListener('click', function(event) {
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 {
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 %}