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 1cecc549a2
commit 1c99e0ab0d
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" /> <img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
<h1>CODE<span>CRISPIES</span></h1> <h1>CODE<span>CRISPIES</span></h1>
</div> </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> </header>
<!-- Hauptlayout --> <!-- Hauptlayout -->

View File

@@ -20,7 +20,10 @@
<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" /> <img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
<h1>CODE<span>CRISPIES</span></h1> <h1>CODE<span>CRISPIES</span></h1>
</div> </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> </header>
<!-- Main Game Layout --> <!-- Main Game Layout -->

View File

@@ -155,6 +155,34 @@ code, kbd {
color: var(--primary-color); 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 ================= */
.game-layout { .game-layout {
display: flex; display: flex;