added github links and styled dropdowns
This commit is contained in:
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
<style>
|
<style>
|
||||||
{% include "_base.css" %}
|
{% include "_base.css" %}
|
||||||
</style>
|
</style>
|
||||||
@@ -11,10 +12,36 @@
|
|||||||
<body>
|
<body>
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="nav-content">
|
<div class="nav-content">
|
||||||
|
<div class="nav-left">
|
||||||
<span class="nav-logo">Slimes 🧪</span>
|
<span class="nav-logo">Slimes 🧪</span>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<a href="/" class="{% if current_page == 'leaderboard' %}active{% endif %}">Leaderboard</a>
|
<a href="/" class="{% if current_page == 'leaderboard' %}active{% endif %}">Leaderboard</a>
|
||||||
<a href="/analytics" class="{% if current_page == 'analytics' %}active{% endif %}">Analytics</a>
|
<a href="analytics" class="{% if current_page == 'analytics' %}active{% endif %}">Analytics</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -23,6 +50,23 @@
|
|||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
<footer>{{ now() | date(format="%Y") }} - Slimes</footer>
|
<footer>{{ now() | date(format="%Y") }} - Slimes</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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -43,6 +87,12 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-logo {
|
.nav-logo {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
@@ -72,5 +122,113 @@
|
|||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border-bottom-color: var(--primary-color);
|
border-bottom-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid var(--primary-border);
|
||||||
|
color: var(--primary-color);
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger:hover {
|
||||||
|
background: var(--primary-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown.open .chevron {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: calc(100% + 0.6rem);
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
|
||||||
|
width: 240px;
|
||||||
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown.open .dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
animation: dropdownFadeIn 0.15s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dropdownFadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(-8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-header {
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
background: var(--bg-header);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu a:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu a:hover {
|
||||||
|
background: var(--hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-title {
|
||||||
|
color: var(--text-dark);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-title i {
|
||||||
|
color: var(--primary-color);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding-left: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.nav-left { gap: 1rem; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -6,26 +6,61 @@
|
|||||||
|
|
||||||
<div class="table-controls">
|
<div class="table-controls">
|
||||||
<form id="sortForm" method="get" action="">
|
<form id="sortForm" method="get" action="">
|
||||||
|
<input type="hidden" name="sort" id="sortInput" value="{{ current_sort }}">
|
||||||
|
<input type="hidden" name="order" id="orderInput" value="{{ current_order }}">
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label for="sort">Sort by:</label>
|
<label>Sort by:</label>
|
||||||
<select name="sort" onchange="this.form.submit()">
|
<div class="dropdown" id="sortDropdown">
|
||||||
<option value="score" {% if current_sort == "score" %}selected{% endif %}>Score</option>
|
<button class="dropdown-trigger select-styled" type="button" onclick="toggleSortDropdown(event)">
|
||||||
<option value="single" {% if current_sort == "single" %}selected{% endif %}>Single Thread</option>
|
<span>
|
||||||
<option value="multi" {% if current_sort == "multi" %}selected{% endif %}>Multi Thread</option>
|
{% if current_sort == "score" %}Score
|
||||||
<option value="ram" {% if current_sort == "ram" %}selected{% endif %}>RAM Amount</option>
|
{% elif current_sort == "single" %}Single Thread
|
||||||
<option value="threads" {% if current_sort == "threads" %}selected{% endif %}>Thread Count</option>
|
{% elif current_sort == "multi" %}Multi Thread
|
||||||
<option value="time" {% if current_sort == "time" %}selected{% endif %}>Time Ago</option>
|
{% elif current_sort == "ram" %}RAM Amount
|
||||||
</select>
|
{% elif current_sort == "threads" %}Thread Count
|
||||||
|
{% elif current_sort == "time" %}Time Ago
|
||||||
|
{% endif %}
|
||||||
|
</span>
|
||||||
|
<i class="fa-solid fa-chevron-down chevron"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-header">Sort Benchmarks By</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<input type="hidden" name="order" value="{{ current_order }}">
|
|
||||||
<button type="button" class="order-toggle" onclick="toggleOrder()">
|
<button type="button" class="order-toggle" onclick="toggleOrder()">
|
||||||
{% if current_order == "desc" %}
|
<span>
|
||||||
Descending ↓
|
{% if current_order == "desc" %}Descending{% else %}Ascending{% endif %}
|
||||||
{% else %}
|
</span>
|
||||||
Ascending ↑
|
<i class="fa-solid {% if current_order == 'desc' %}fa-arrow-down-wide-short{% else %}fa-arrow-up-short-wide{% endif %}"></i>
|
||||||
{% endif %}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -66,12 +101,28 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function toggleOrder() {
|
function toggleSortDropdown(event) {
|
||||||
const form = document.getElementById('sortForm');
|
event.stopPropagation();
|
||||||
const orderInput = form.querySelector('input[name="order"]');
|
document.getElementById('sortDropdown').classList.toggle('open');
|
||||||
orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
|
|
||||||
form.submit();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -144,43 +195,58 @@ function toggleOrder() {
|
|||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
.select-styled {
|
||||||
padding: 0.4rem 0.8rem;
|
min-width: 160px;
|
||||||
border-radius: 6px;
|
justify-content: space-between;
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
background: white;
|
|
||||||
color: var(--text-dark);
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-toggle {
|
.select-styled, .order-toggle {
|
||||||
background: var(--primary-soft);
|
background: white;
|
||||||
border: 1px solid var(--primary-border);
|
border: 1px solid var(--border-color);
|
||||||
color: var(--primary-text);
|
padding: 0 0.8rem;
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-weight: 600;
|
color: var(--text-dark);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.7rem;
|
||||||
|
height: 38px;
|
||||||
|
box-sizing: border-box;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-toggle:hover {
|
.select-styled:hover {
|
||||||
background: var(--primary-border);
|
background: var(--bg-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-scores {
|
.select-styled .chevron {
|
||||||
font-size: 0.65rem;
|
font-size: 0.7rem;
|
||||||
font-weight: normal;
|
opacity: 0.5;
|
||||||
opacity: 0.7;
|
transition: transform 0.2s;
|
||||||
margin-top: 2px;
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 640px) {
|
@media screen and (max-width: 640px) {
|
||||||
.table-controls form {
|
.table-controls form {
|
||||||
/* flex-direction: column; */
|
|
||||||
gap: 0.6rem;
|
gap: 0.6rem;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user