feat: implement milestone-based progress system and activate new lessons

Progress System:
- Replace percentage-based progress with milestone markers (1, 5, 10, 20, 30, 50, 75, 100)
- Add visual milestone indicators with reached/current/next states
- Add celebration animation when milestones are reached
- Update progress bar to show progress toward next milestone
- Add progressTextMilestone i18n key for all 6 languages

New Lessons Activated:
- HTML Dialog (native modal dialogs)
- HTML Progress & Meter (indicator elements)
- HTML Fieldset (form grouping)
- HTML Datalist (autocomplete inputs)

This adds 10 new lessons across all 6 languages, bringing total from ~66 to ~76.
This commit is contained in:
2026-01-16 13:56:29 +01:00
parent 9844d9ed15
commit b693013743
7 changed files with 209 additions and 13 deletions

View File

@@ -261,12 +261,18 @@ function setupAuthForms() {
});
// OAuth buttons
document.getElementById("google-login")?.addEventListener("click", () => {
authModule?.signInWithGoogle();
document.getElementById("google-login")?.addEventListener("click", async () => {
const { error } = await authModule?.signInWithGoogle() ?? { error: null };
if (error) {
showOAuthError(error.message);
}
});
document.getElementById("github-login")?.addEventListener("click", () => {
authModule?.signInWithGitHub();
document.getElementById("github-login")?.addEventListener("click", async () => {
const { error } = await authModule?.signInWithGitHub() ?? { error: null };
if (error) {
showOAuthError(error.message);
}
});
// Close dialog on backdrop click
@@ -364,6 +370,22 @@ async function handleResetSubmit(e) {
}
}
function showOAuthError(message) {
// Show error in the currently visible form's error element
const loginError = document.getElementById("login-error");
const signupError = document.getElementById("signup-error");
// Use whichever form is visible
const errorEl = !document.getElementById("login-form")?.classList.contains("hidden")
? loginError
: signupError;
if (errorEl) {
errorEl.textContent = message;
errorEl.classList.remove("hidden");
}
}
function switchForm(formName) {
const loginForm = document.getElementById("login-form");
const signupForm = document.getElementById("signup-form");