diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..373f5f3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +snapshots/ diff --git a/assets/sections/competences.css b/assets/sections/competences.css new file mode 100644 index 0000000..8b9c8bb --- /dev/null +++ b/assets/sections/competences.css @@ -0,0 +1,3 @@ +/* css/sections/competences.css + * TODO: styles de la section "competences" à implémenter. + */ diff --git a/assets/sections/experience.css b/assets/sections/experience.css new file mode 100644 index 0000000..c3a3bfb --- /dev/null +++ b/assets/sections/experience.css @@ -0,0 +1,3 @@ +/* css/sections/experience.css + * TODO: styles de la section "experience" à implémenter. + */ diff --git a/assets/sections/formation.css b/assets/sections/formation.css new file mode 100644 index 0000000..c9c7d1b --- /dev/null +++ b/assets/sections/formation.css @@ -0,0 +1,3 @@ +/* css/sections/formation.css + * TODO: styles de la section "formation" à implémenter. + */ diff --git a/assets/sections/hobbies.css b/assets/sections/hobbies.css new file mode 100644 index 0000000..e9615f1 --- /dev/null +++ b/assets/sections/hobbies.css @@ -0,0 +1,3 @@ +/* css/sections/hobbies.css + * TODO: styles de la section "hobbies" à implémenter. + */ diff --git a/assets/sections/langues.css b/assets/sections/langues.css new file mode 100644 index 0000000..f568405 --- /dev/null +++ b/assets/sections/langues.css @@ -0,0 +1,3 @@ +/* css/sections/langues.css + * TODO: styles de la section "langues" à implémenter. + */ diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..00ce034 --- /dev/null +++ b/assets/style.css @@ -0,0 +1,138 @@ +/* =========================== + Reset & base +=========================== */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #0f0f0f; + color: #e0e0e0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; + padding: 20px; +} + +/* =========================== + Layout +=========================== */ +.container { + max-width: 520px; + width: 100%; +} + +/* =========================== + Header +=========================== */ +header { + text-align: center; + margin-bottom: 32px; +} + +h1 { + font-size: 2.2rem; + font-weight: 700; + color: #e94560; + margin-bottom: 10px; +} + +header p { + color: #a0a0b0; + font-size: 0.95rem; +} + +/* =========================== + Card +=========================== */ +.card { + background: #16213e; + border: 1px solid #2a2a4a; + border-radius: 12px; + padding: 32px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +} + +/* =========================== + Form +=========================== */ +.form-group { + margin-bottom: 20px; +} + +label { + display: block; + font-size: 0.85rem; + color: #a0a0b0; + margin-bottom: 6px; + font-weight: 500; + letter-spacing: 0.03em; +} + +input { + width: 100%; + padding: 11px 14px; + background: #1a1a2e; + border: 1px solid #2a2a4a; + border-radius: 6px; + color: #e0e0e0; + font-size: 0.95rem; + outline: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +input::placeholder { + color: #4a4a6a; +} + +input:focus { + border-color: #e94560; + box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15); +} + +/* =========================== + Button +=========================== */ +.btn-generate { + width: 100%; + background: #e94560; + color: #fff; + border: none; + padding: 13px; + border-radius: 6px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + margin-top: 8px; + transition: background 0.2s ease; +} + +.btn-generate:hover { + background: #f05a73; +} + +/* =========================== + Messages +=========================== */ +.success-message { + display: none; + color: #4caf50; + text-align: center; + padding-top: 16px; + font-size: 0.95rem; +} + +/* =========================== + Footer +=========================== */ +footer { + text-align: center; + margin-top: 28px; + font-size: 0.8rem; + color: #4a4a6a; +} diff --git a/index.html b/index.html index f9c0c29..1a9b9d0 100644 --- a/index.html +++ b/index.html @@ -4,122 +4,7 @@ CV Generator - +
@@ -130,6 +15,8 @@
+ +
+ + + + + +

@@ -196,26 +89,6 @@
- + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..534d736 --- /dev/null +++ b/js/app.js @@ -0,0 +1,24 @@ +/** + * app.js — Point d'entrée principal du CV Generator + * Gère la soumission du formulaire et la sauvegarde des données. + */ + +document.getElementById('cv-form').addEventListener('submit', function (e) { + e.preventDefault(); + + const nom = document.getElementById('nom').value.trim(); + const prenom = document.getElementById('prenom').value.trim(); + const email = document.getElementById('email').value.trim(); + const titre = document.getElementById('titre').value.trim(); + + if (!nom || !prenom || !email || !titre) return; + + const formData = { nom, prenom, email, titre }; + localStorage.setItem('cvData', JSON.stringify(formData)); + + const success = document.getElementById('success'); + success.textContent = `CV prêt à être généré pour ${prenom} ${nom} !`; + success.style.display = 'block'; + + console.log('Données du CV :', formData); +}); diff --git a/js/sections/competences.js b/js/sections/competences.js new file mode 100644 index 0000000..26efb16 --- /dev/null +++ b/js/sections/competences.js @@ -0,0 +1,22 @@ +/** + * js/sections/competences.js + * Gestion de la section "Compétences" du CV. + */ + +/** + * Collecte les données du formulaire de compétences. + * @returns {{ libelle: string, niveau: string }[]} + * Tableau de compétences saisies par l'utilisateur. + */ +export function collect() { + return []; +} + +/** + * Affiche les compétences dans l'aperçu du CV. + * @param {{ libelle: string, niveau: string }[]} data + * @returns {void} + */ +export function render(data) { + // TODO +} diff --git a/js/sections/experience.js b/js/sections/experience.js new file mode 100644 index 0000000..53ec68e --- /dev/null +++ b/js/sections/experience.js @@ -0,0 +1,22 @@ +/** + * js/sections/experience.js + * Gestion de la section "Expérience professionnelle" du CV. + */ + +/** + * Collecte les données du formulaire d'expérience professionnelle. + * @returns {{ poste: string, entreprise: string, periode: string, description: string }[]} + * Tableau d'entrées d'expérience saisies par l'utilisateur. + */ +export function collect() { + return []; +} + +/** + * Affiche les données d'expérience dans l'aperçu du CV. + * @param {{ poste: string, entreprise: string, periode: string, description: string }[]} data + * @returns {void} + */ +export function render(data) { + // TODO +} diff --git a/js/sections/formation.js b/js/sections/formation.js new file mode 100644 index 0000000..02cf621 --- /dev/null +++ b/js/sections/formation.js @@ -0,0 +1,24 @@ +/** + * js/sections/formation.js + * Gestion de la section "Formation" du CV. + */ + +/** + * Collecte les données du formulaire de formation. + * @returns {{ diplome: string, etablissement: string, annee: string, description: string }[]} + * Tableau d'entrées de formation saisies par l'utilisateur. + */ +export function collect() { + // TODO: lire les champs du formulaire et retourner un tableau d'objets formation + return []; +} + +/** + * Affiche les données de formation dans l'aperçu du CV. + * @param {{ diplome: string, etablissement: string, annee: string, description: string }[]} data + * Tableau d'entrées de formation à afficher. + * @returns {void} + */ +export function render(data) { + // TODO: générer le HTML de la section formation et l'injecter dans le DOM +} diff --git a/js/sections/hobbies.js b/js/sections/hobbies.js new file mode 100644 index 0000000..6e8051e --- /dev/null +++ b/js/sections/hobbies.js @@ -0,0 +1,22 @@ +/** + * js/sections/hobbies.js + * Gestion de la section "Loisirs / Hobbies" du CV. + */ + +/** + * Collecte les données du formulaire de loisirs. + * @returns {{ libelle: string }[]} + * Tableau de loisirs saisis par l'utilisateur. + */ +export function collect() { + return []; +} + +/** + * Affiche les loisirs dans l'aperçu du CV. + * @param {{ libelle: string }[]} data + * @returns {void} + */ +export function render(data) { + // TODO +} diff --git a/js/sections/langues.js b/js/sections/langues.js new file mode 100644 index 0000000..62437fd --- /dev/null +++ b/js/sections/langues.js @@ -0,0 +1,22 @@ +/** + * js/sections/langues.js + * Gestion de la section "Langues" du CV. + */ + +/** + * Collecte les données du formulaire de langues. + * @returns {{ langue: string, niveau: string }[]} + * Tableau de langues saisies par l'utilisateur. + */ +export function collect() { + return []; +} + +/** + * Affiche les langues dans l'aperçu du CV. + * @param {{ langue: string, niveau: string }[]} data + * @returns {void} + */ +export function render(data) { + // TODO +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..ba77541 --- /dev/null +++ b/package.json @@ -0,0 +1,8 @@ +{ + "name": "cv-generator", + "version": "1.0.0", + "description": "Application web pour générer des CV professionnels", + "scripts": { + "start": "npx serve ." + } +} diff --git a/sections/competences/README.md b/sections/competences/README.md new file mode 100644 index 0000000..8dc46be --- /dev/null +++ b/sections/competences/README.md @@ -0,0 +1,7 @@ +# Section : Compétences + +Ce dossier contiendra les fichiers liés à la section **Compétences** du CV. + +- HTML partiel ou composant du formulaire compétences +- Logique JS associée (voir `js/sections/competences.js`) +- Styles spécifiques (voir `css/sections/competences.css`) diff --git a/sections/experience/README.md b/sections/experience/README.md new file mode 100644 index 0000000..fd4282e --- /dev/null +++ b/sections/experience/README.md @@ -0,0 +1,7 @@ +# Section : Expérience professionnelle + +Ce dossier contiendra les fichiers liés à la section **Expérience professionnelle** du CV. + +- HTML partiel ou composant du formulaire expérience +- Logique JS associée (voir `js/sections/experience.js`) +- Styles spécifiques (voir `css/sections/experience.css`) diff --git a/sections/formation/README.md b/sections/formation/README.md new file mode 100644 index 0000000..909d710 --- /dev/null +++ b/sections/formation/README.md @@ -0,0 +1,7 @@ +# Section : Formation + +Ce dossier contiendra les fichiers liés à la section **Formation** du CV. + +- HTML partiel ou composant du formulaire formation +- Logique JS associée (voir `js/sections/formation.js`) +- Styles spécifiques (voir `css/sections/formation.css`) diff --git a/sections/hobbies/README.md b/sections/hobbies/README.md new file mode 100644 index 0000000..7f2e9b3 --- /dev/null +++ b/sections/hobbies/README.md @@ -0,0 +1,7 @@ +# Section : Centres d'intérêt / Hobbies + +Ce dossier contiendra les fichiers liés à la section **Hobbies** du CV. + +- HTML partiel ou composant du formulaire hobbies +- Logique JS associée (voir `js/sections/hobbies.js`) +- Styles spécifiques (voir `css/sections/hobbies.css`) diff --git a/sections/langues/README.md b/sections/langues/README.md new file mode 100644 index 0000000..d6f1410 --- /dev/null +++ b/sections/langues/README.md @@ -0,0 +1,7 @@ +# Section : Langues + +Ce dossier contiendra les fichiers liés à la section **Langues** du CV. + +- HTML partiel ou composant du formulaire langues +- Logique JS associée (voir `js/sections/langues.js`) +- Styles spécifiques (voir `css/sections/langues.css`)