feat: ajoute le système i18n frontend (FR/EN)

- Crée js/i18n/i18n.js : module central avec t(), getLocale(), setLocale()
- Crée js/i18n/locales/fr.json et en.json : traductions FR et EN
- Crée js/i18n/applyTranslations.js : applique les data-i18n au DOM
- Crée js/i18n/langSwitcher.js : sélecteur de langue (boutons FR/EN)
- Modifie index.html : ajoute les attributs data-i18n sur tous les textes
- Modifie js/main.js : intègre i18n et relance l'application des traductions
- Modifie css/form.css : styles pour le sélecteur de langue
- Persistance de la langue dans localStorage (clé cv_lang)
This commit is contained in:
stanig2106
2026-04-05 22:43:44 +01:00
parent f0cf9a605f
commit 4e9746c308
8 changed files with 173 additions and 9 deletions
+15 -8
View File
@@ -10,8 +10,11 @@
<body>
<div class="container">
<header>
<h1>CV Generator</h1>
<p>Remplissez vos informations pour générer votre CV</p>
<div class="header-top">
<h1 data-i18n="header.title">CV Generator</h1>
<div id="lang-switcher" class="lang-switcher" aria-label="Language switcher"></div>
</div>
<p data-i18n="header.subtitle">Remplissez vos informations pour générer votre CV</p>
</header>
<div class="card">
@@ -20,11 +23,12 @@
<!-- ── Section Identité ── -->
<!-- Voir sections/identite/identite.html pour le découpage complet -->
<div class="form-group">
<label for="nom">Nom</label>
<label for="nom" data-i18n="form.nom">Nom</label>
<input
type="text"
id="nom"
name="nom"
data-i18n-placeholder="form.nom_placeholder"
placeholder="Dupont"
autocomplete="family-name"
required
@@ -34,11 +38,12 @@
</div>
<div class="form-group">
<label for="prenom">Prénom</label>
<label for="prenom" data-i18n="form.prenom">Prénom</label>
<input
type="text"
id="prenom"
name="prenom"
data-i18n-placeholder="form.prenom_placeholder"
placeholder="Jean"
autocomplete="given-name"
required
@@ -48,11 +53,12 @@
</div>
<div class="form-group">
<label for="email">Email</label>
<label for="email" data-i18n="form.email">Email</label>
<input
type="email"
id="email"
name="email"
data-i18n-placeholder="form.email_placeholder"
placeholder="jean.dupont@email.com"
autocomplete="email"
required
@@ -61,11 +67,12 @@
</div>
<div class="form-group">
<label for="titre">Titre du poste</label>
<label for="titre" data-i18n="form.titre">Titre du poste</label>
<input
type="text"
id="titre"
name="titre"
data-i18n-placeholder="form.titre_placeholder"
placeholder="Développeur Full Stack"
autocomplete="organization-title"
required
@@ -81,14 +88,14 @@
- Hobbies → sections/hobbies/
-->
<button type="submit" class="btn-generate">Générer mon CV</button>
<button type="submit" class="btn-generate" data-i18n="form.submit">Générer mon CV</button>
<p class="success-message" id="success"></p>
</form>
</div>
<footer>
<p>CV Generator &copy; 2026</p>
<p data-i18n="footer">CV Generator &copy; 2026</p>
</footer>
</div>