Implement multilingual support with Dutch and English translations across the application

This commit is contained in:
Alvin
2025-11-04 11:35:45 +01:00
parent 278e9353f9
commit 1d5b007577
9 changed files with 540 additions and 52 deletions

View File

@@ -12,29 +12,37 @@
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">School Magazijn</a>
<a class="navbar-brand" href="#" data-translate="school-warehouse">School Magazijn</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="student.html">Beschikbare Artikelen</a>
<a class="nav-link" href="student.html" data-translate="available-items">Beschikbare Artikelen</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="student-reservations.html">Mijn Reserveringen</a>
<a class="nav-link active" href="student-reservations.html" data-translate="my-reservations">Mijn Reserveringen</a>
</li>
</ul>
<div class="navbar-nav ms-auto">
<div class="language-toggle nav-item">
<span class="language-label" id="nlLabel">NL</span>
<label class="language-switch">
<input type="checkbox" id="languageToggle">
<span class="language-slider"></span>
</label>
<span class="language-label" id="enLabel">EN</span>
</div>
<span class="nav-item nav-link text-light" id="userInfo"></span>
<a class="nav-link" href="#" id="logoutBtn">Uitloggen</a>
<a class="nav-link" href="#" id="logoutBtn" data-translate="logout">Uitloggen</a>
</div>
</div>
</div>
</nav>
<div class="container mt-4">
<h2 class="mb-4">Mijn Reserveringen</h2>
<h2 class="mb-4" data-translate="my-reservations">Mijn Reserveringen</h2>
<div class="card">
<div class="card-header">
@@ -97,6 +105,7 @@
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/translations.js"></script>
<script src="js/student-reservations.js"></script>
</body>
</html>