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

@@ -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;
+}

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;
+}

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;
+}

index.html

@@ -4,122 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CV Generator</title>
-  <style>
+  <link rel="stylesheet" href="css/base.css">
-    *, *::before, *::after {
+  <link rel="stylesheet" href="css/form.css">
-      box-sizing: border-box;
+  <link rel="stylesheet" href="css/button.css">
-      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;
-    }
-
-    .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);
-    }
-
-    .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;
-    }
-
-    .success-message {
-      display: none;
-      color: #4caf50;
-      text-align: center;
-      padding-top: 16px;
-      font-size: 0.95rem;
-    }
-
-    footer {
-      text-align: center;
-      margin-top: 28px;
-      font-size: 0.8rem;
-      color: #4a4a6a;
-    }
-  </style>
 </head>
 <body>
   <div class="container">
@@ -196,26 +83,6 @@
     </footer>
   </div>
 
-  <script>
+  <script type="module" src="js/main.js"></script>
-    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);
-    });
-  </script>
 </body>
 </html>

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';
+  });
+}

js/main.js

@@ -0,0 +1,3 @@
+import { initForm } from './form/formHandler.js';
+
+initForm();

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;
+}