feat: ajoute la section expériences professionnelles au formulaire (#2)

index.html

@@ -113,6 +113,113 @@
       font-size: 0.95rem;
     }
 
+    .section-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #e94560;
+      margin-bottom: 16px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #2a2a4a;
+    }
+
+    .section-block {
+      margin-bottom: 24px;
+    }
+
+    .experience-item {
+      background: #1a1a2e;
+      border: 1px solid #2a2a4a;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 12px;
+    }
+
+    .experience-item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .experience-item-header span {
+      font-weight: 600;
+      font-size: 0.9rem;
+      color: #a0a0b0;
+    }
+
+    .btn-danger {
+      background: transparent;
+      color: #e94560;
+      border: 1px solid #e94560;
+      border-radius: 6px;
+      padding: 5px 10px;
+      cursor: pointer;
+      font-size: 0.8rem;
+      transition: background 0.2s ease, color 0.2s ease;
+    }
+
+    .btn-danger:hover {
+      background: #e94560;
+      color: #fff;
+    }
+
+    #experiences-list {
+      margin-bottom: 12px;
+    }
+
+    .experience-item .form-group:last-child {
+      margin-bottom: 0;
+    }
+
+    .form-row {
+      display: flex;
+      gap: 16px;
+    }
+
+    .form-row .form-group {
+      flex: 1;
+    }
+
+    textarea {
+      width: 100%;
+      padding: 11px 14px;
+      background: #1a1a2e;
+      border: 1px solid #2a2a4a;
+      border-radius: 6px;
+      color: #e0e0e0;
+      font-size: 0.95rem;
+      font-family: inherit;
+      outline: none;
+      resize: vertical;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    textarea::placeholder {
+      color: #4a4a6a;
+    }
+
+    textarea:focus {
+      border-color: #e94560;
+      box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
+    }
+
+    .btn-add {
+      background: transparent;
+      color: #e94560;
+      border: 1px dashed #e94560;
+      border-radius: 6px;
+      padding: 9px 16px;
+      font-size: 0.9rem;
+      font-weight: 500;
+      cursor: pointer;
+      width: 100%;
+      transition: background 0.2s ease, color 0.2s ease;
+    }
+
+    .btn-add:hover {
+      background: rgba(233, 69, 96, 0.1);
+    }
+
     footer {
       text-align: center;
       margin-top: 28px;
@@ -185,6 +292,12 @@
           >
         </div>
 
+        <div class="section-block">
+          <div class="section-title">Expériences professionnelles</div>
+          <div id="experiences-list"></div>
+          <button type="button" class="btn-add" onclick="ajouterExperience()">+ Ajouter une expérience</button>
+        </div>
+
         <button type="submit" class="btn-generate">Générer mon CV</button>
 
         <p class="success-message" id="success"></p>
@@ -196,7 +309,53 @@
     </footer>
   </div>
 
+  <template id="experience-template">
+    <div class="experience-item">
+      <div class="experience-item-header">
+        <span>Expérience</span>
+        <button type="button" class="btn-danger" onclick="supprimerExperience(this)">Supprimer</button>
+      </div>
+      <div class="form-group">
+        <label>Titre du poste</label>
+        <input type="text" name="experience_poste[]" placeholder="ex : Développeur front-end">
+      </div>
+      <div class="form-group">
+        <label>Entreprise</label>
+        <input type="text" name="experience_entreprise[]" placeholder="ex : Acme Corp">
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Date de début</label>
+          <input type="text" name="experience_debut[]" placeholder="ex : Janvier 2022">
+        </div>
+        <div class="form-group">
+          <label>Date de fin</label>
+          <input type="text" name="experience_fin[]" placeholder="ex : Présent">
+        </div>
+      </div>
+      <div class="form-group">
+        <label>Description</label>
+        <textarea name="experience_description[]" rows="4" placeholder="Décrivez vos missions et réalisations…"></textarea>
+      </div>
+    </div>
+  </template>
+
   <script>
+    function ajouterExperience() {
+      const template = document.getElementById('experience-template');
+      const list = document.getElementById('experiences-list');
+      if (!template || !list) return;
+      list.appendChild(template.content.cloneNode(true));
+    }
+
+    function supprimerExperience(btn) {
+      const list = document.getElementById('experiences-list');
+      if (list.querySelectorAll('.experience-item').length <= 1) return;
+      btn.closest('.experience-item').remove();
+    }
+
+    document.addEventListener('DOMContentLoaded', ajouterExperience);
+
     document.getElementById('cv-form').addEventListener('submit', function(e) {
       e.preventDefault();
 
@@ -207,7 +366,17 @@
 
       if (!nom || !prenom || !email || !titre) return;
 
-      const formData = { nom, prenom, email, titre };
+      const postes = [...document.querySelectorAll('[name="experience_poste[]"]')].map(el => el.value.trim());
+      const entreprises = [...document.querySelectorAll('[name="experience_entreprise[]"]')].map(el => el.value.trim());
+      const debuts = [...document.querySelectorAll('[name="experience_debut[]"]')].map(el => el.value.trim());
+      const fins = [...document.querySelectorAll('[name="experience_fin[]"]')].map(el => el.value.trim());
+      const descriptions = [...document.querySelectorAll('[name="experience_description[]"]')].map(el => el.value.trim());
+
+      const experiences = postes
+        .map((_, i) => ({ poste: postes[i], entreprise: entreprises[i], debut: debuts[i], fin: fins[i], description: descriptions[i] }))
+        .filter(exp => Object.values(exp).some(v => v !== ''));
+
+      const formData = { nom, prenom, email, titre, experiences };
       localStorage.setItem('cvData', JSON.stringify(formData));
 
       const success = document.getElementById('success');