From 8d8109f4e8f45b9a44ae1b0269584beb01a392bc Mon Sep 17 00:00:00 2001 From: stanig2106 Date: Sun, 5 Apr 2026 13:00:11 +0100 Subject: [PATCH] feat: ajoute la section Formations au formulaire Closes #3 --- index.html | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) diff --git a/index.html b/index.html index f9c0c29..78ef264 100644 --- a/index.html +++ b/index.html @@ -119,6 +119,79 @@ font-size: 0.8rem; color: #4a4a6a; } + + /* --- Section Formations --- */ + .section-title { + font-size: 1.1rem; + font-weight: 600; + color: #e94560; + margin-bottom: 16px; + padding-bottom: 8px; + border-bottom: 1px solid #2a2a4a; + } + + .section-formations { + margin-bottom: 28px; + } + + .formation-item { + background: #1a1a2e; + border: 1px solid #2a2a4a; + border-radius: 8px; + padding: 16px; + margin-bottom: 12px; + position: relative; + } + + .form-row { + display: flex; + gap: 12px; + } + + .form-row .form-group { + flex: 1; + } + + .btn-remove { + position: absolute; + top: 10px; + right: 10px; + background: transparent; + border: 1px solid #4a4a6a; + color: #a0a0b0; + border-radius: 4px; + width: 24px; + height: 24px; + font-size: 0.75rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: border-color 0.2s ease, color 0.2s ease; + } + + .btn-remove:hover { + border-color: #e94560; + color: #e94560; + } + + .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%; + margin-top: 4px; + transition: background 0.2s ease, color 0.2s ease; + } + + .btn-add:hover { + background: rgba(233, 69, 96, 0.08); + } @@ -185,6 +258,48 @@ > + + +
+

Formations

+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ +
+

@@ -216,6 +331,54 @@ console.log('Données du CV :', formData); }); + + // Gestion des formations dynamiques + let formationCount = 1; + + document.getElementById('add-formation').addEventListener('click', function () { + const list = document.getElementById('formations-list'); + const index = formationCount++; + const item = document.createElement('div'); + item.className = 'formation-item'; + item.innerHTML = ` + +
+
+ + +
+
+ + +
+
+
+ + +
+ `; + item.querySelector('.btn-remove').addEventListener('click', function () { + this.closest('.formation-item').remove(); + }); + list.appendChild(item); + });