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

added i18n

Browse Source
This commit is contained in:
eiiko6
2026-05-07 23:19:22 +02:00
parent 4e450430f6
commit e28e844967
11 changed files with 637 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
templates/_layout.html
View File

@@ -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>