From 5ff303a2c09e57b8595dbb9d7f10194f72e30907 Mon Sep 17 00:00:00 2001 From: stanig2106 Date: Sun, 5 Apr 2026 13:32:26 +0100 Subject: [PATCH] refactor: factoriser le code en plusieurs fichiers - Extrait le CSS inline vers css/base.css, css/form.css, css/button.css - Extrait le JS inline vers js/main.js, js/form/formHandler.js, js/storage/cvStorage.js - index.html devient un shell qui charge les fichiers externes - Ajoute les dossiers placeholder pour les futures sections : education, experience, hobbies --- css/base.css | 46 +++++++++ css/button.css | 17 ++++ css/form.css | 49 ++++++++++ index.html | 141 +-------------------------- js/form/formHandler.js | 21 ++++ js/form/sections/education/.gitkeep | 0 js/form/sections/experience/.gitkeep | 0 js/form/sections/hobbies/.gitkeep | 0 js/main.js | 3 + js/storage/cvStorage.js | 8 ++ 10 files changed, 148 insertions(+), 137 deletions(-) create mode 100644 css/base.css create mode 100644 css/button.css create mode 100644 css/form.css create mode 100644 js/form/formHandler.js create mode 100644 js/form/sections/education/.gitkeep create mode 100644 js/form/sections/experience/.gitkeep create mode 100644 js/form/sections/hobbies/.gitkeep create mode 100644 js/main.js create mode 100644 js/storage/cvStorage.js diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..03da6f1 --- /dev/null +++ b/css/base.css @@ -0,0 +1,46 @@ +*, *::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; +} + +.container { + max-width: 520px; + width: 100%; +} + +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; +} + +footer { + text-align: center; + margin-top: 28px; + font-size: 0.8rem; + color: #4a4a6a; +} diff --git a/css/button.css b/css/button.css new file mode 100644 index 0000000..40f1475 --- /dev/null +++ b/css/button.css @@ -0,0 +1,17 @@ +.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; +} diff --git a/css/form.css b/css/form.css new file mode 100644 index 0000000..09152f4 --- /dev/null +++ b/css/form.css @@ -0,0 +1,49 @@ +.card { + background: #16213e; + border: 1px solid #2a2a4a; + border-radius: 12px; + padding: 32px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +} + +.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); +} + +.success-message { + display: none; + color: #4caf50; + text-align: center; + padding-top: 16px; + font-size: 0.95rem; +} diff --git a/index.html b/index.html index f9c0c29..706a0cd 100644 --- a/index.html +++ b/index.html @@ -4,122 +4,9 @@ CV Generator - + + +
@@ -196,26 +83,6 @@
- + diff --git a/js/form/formHandler.js b/js/form/formHandler.js new file mode 100644 index 0000000..d61b9bd --- /dev/null +++ b/js/form/formHandler.js @@ -0,0 +1,21 @@ +import { saveCvData } from '../storage/cvStorage.js'; + +export function initForm() { + 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 }; + saveCvData(formData); + + const success = document.getElementById('success'); + success.textContent = `CV prêt à être généré pour ${prenom} ${nom} !`; + success.style.display = 'block'; + }); +} diff --git a/js/form/sections/education/.gitkeep b/js/form/sections/education/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/js/form/sections/experience/.gitkeep b/js/form/sections/experience/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/js/form/sections/hobbies/.gitkeep b/js/form/sections/hobbies/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..c8b0902 --- /dev/null +++ b/js/main.js @@ -0,0 +1,3 @@ +import { initForm } from './form/formHandler.js'; + +initForm(); diff --git a/js/storage/cvStorage.js b/js/storage/cvStorage.js new file mode 100644 index 0000000..b3ee427 --- /dev/null +++ b/js/storage/cvStorage.js @@ -0,0 +1,8 @@ +export function saveCvData(data) { + localStorage.setItem('cvData', JSON.stringify(data)); +} + +export function loadCvData() { + const raw = localStorage.getItem('cvData'); + return raw ? JSON.parse(raw) : null; +}