feat: add language switcher between English and German

- Add language toggle button in header (EN/DE)
- Link directly to the other language version
- Style consistent with existing header buttons
- Accessible with proper aria-labels
This commit is contained in:
2025-12-24 00:51:54 +01:00
parent 81614431e9
commit 79e7f69414
3 changed files with 36 additions and 2 deletions

View File

@@ -20,7 +20,10 @@
<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
<h1>CODE<span>CRISPIES</span></h1>
</div>
<button id="help-btn" class="help-toggle" aria-label="Hilfe">?</button>
<div class="header-actions">
<a href="./index.html" class="lang-switch" aria-label="Switch language: English">EN</a>
<button id="help-btn" class="help-toggle" aria-label="Hilfe">?</button>
</div>
</header>
<!-- Hauptlayout -->

View File

@@ -20,7 +20,10 @@
<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
<h1>CODE<span>CRISPIES</span></h1>
</div>
<button id="help-btn" class="help-toggle" aria-label="Help">?</button>
<div class="header-actions">
<a href="./index.de.html" class="lang-switch" aria-label="Sprache wechseln: Deutsch">DE</a>
<button id="help-btn" class="help-toggle" aria-label="Help">?</button>
</div>
</header>
<!-- Main Game Layout -->

View File

@@ -155,6 +155,34 @@ code, kbd {
color: var(--primary-color);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.lang-switch {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--border-color);
background: none;
font-size: 0.7rem;
font-weight: 700;
text-decoration: none;
color: var(--light-text);
transition: all 0.2s;
}
.lang-switch:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: var(--primary-bg-light);
}
/* ================= GAME LAYOUT ================= */
.game-layout {
display: flex;