feat: add interactive signature pad with local storage persistence to index.html

index.html

@@ -614,6 +614,177 @@
         border: 0 !important;
       }
 
+      /* Signature Section Styles */
+      .signature-block {
+        background: var(--bg-secondary);
+        border: 1px solid var(--color-border-secondary);
+        border-radius: var(--border-radius-lg);
+        padding: 24px;
+        box-shadow: var(--shadow-sm);
+        margin-bottom: 2rem;
+        transition: box-shadow 0.2s ease;
+      }
+
+      .signature-block:hover {
+        box-shadow: var(--shadow-md);
+      }
+
+      .signature-grid {
+        display: grid;
+        grid-template-columns: 1.5fr 1fr;
+        gap: 24px;
+      }
+
+      .signature-col {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .signature-label {
+        font-size: 0.75rem;
+        font-weight: 800;
+        letter-spacing: .05em;
+        text-transform: uppercase;
+        color: var(--color-text-secondary);
+      }
+
+      .signature-pad-wrapper {
+        border: 1px solid var(--color-border-secondary);
+        border-radius: var(--border-radius-md);
+        background: var(--bg-primary);
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        transition: all 0.25s ease;
+      }
+
+      .signature-pad-wrapper:focus-within {
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12);
+      }
+
+      .signature-pad {
+        width: 100%;
+        height: 180px;
+        background: #ffffff;
+        border-radius: var(--border-radius-sm);
+        border: 1px dashed var(--color-border-secondary);
+        cursor: crosshair;
+        touch-action: none;
+      }
+
+      .signature-pad-controls {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+      }
+
+      .signature-btn {
+        font-family: 'Nunito', sans-serif;
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: .03em;
+        text-transform: uppercase;
+        background: var(--bg-secondary);
+        border: 1px solid var(--color-border-secondary);
+        color: var(--color-text-secondary);
+        border-radius: 8px;
+        padding: 8px 14px;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: var(--shadow-sm);
+      }
+
+      .signature-btn:hover {
+        background: var(--bg-tertiary);
+        color: var(--color-text-primary);
+        transform: translateY(-1px);
+      }
+
+      .signature-btn.clear:hover {
+        background: #fee2e2;
+        color: #ef4444;
+        border-color: #fca5a5;
+        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
+      }
+
+      .signature-btn.save {
+        background: var(--primary);
+        border-color: var(--primary);
+        color: white;
+      }
+
+      .signature-btn.save:hover {
+        background: var(--primary-dark);
+        border-color: var(--primary-dark);
+        box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
+      }
+
+      .date-col {
+        justify-content: space-between;
+      }
+
+      .signature-info-box {
+        background: var(--primary-light);
+        border: 1px solid var(--color-border-secondary);
+        border-radius: var(--border-radius-md);
+        padding: 16px;
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+      }
+
+      .signature-info-box i {
+        color: var(--primary);
+        font-size: 1.25rem;
+        flex-shrink: 0;
+        margin-top: 2px;
+      }
+
+      .signature-info-box p {
+        font-size: 0.8rem;
+        color: var(--color-text-secondary);
+        line-height: 1.5;
+      }
+
+      /* Responsive CSS Overrides for Signature */
+      @media (max-width: 860px) {
+        .signature-grid {
+          grid-template-columns: 1fr;
+          gap: 16px;
+        }
+        
+        .date-col {
+          gap: 16px;
+        }
+      }
+
+      /* Print Styles for Signature */
+      @media print {
+        .signature-pad-controls {
+          display: none !important;
+        }
+        .signature-pad {
+          border: 1px solid #94a3b8 !important;
+          background: white !important;
+        }
+        .signature-block {
+          page-break-inside: avoid;
+          border: 1px solid #94a3b8 !important;
+          background: white !important;
+          box-shadow: none !important;
+        }
+        .signature-info-box {
+          border: 1px solid #94a3b8 !important;
+          background: white !important;
+        }
+      }
+
       /* Responsive CSS Overrides */
       @media (max-width: 860px) {
         .fiche {
@@ -977,9 +1148,166 @@
         <textarea class="write-area" rows="3" placeholder="Ex. : Comprendre pourquoi le scénario est construit comme ça et repartir avec une image claire de ce que je dois animer…"></textarea>
       </div>
 
+      <!-- PART 5 -->
+      <div class="section-title">
+        <i class="ti ti-edit" aria-hidden="true"></i>Partie 5 — Validation & Signature
+      </div>
+
+      <div class="signature-block">
+        <div class="signature-grid">
+          <div class="signature-col">
+            <div class="signature-label">Signature</div>
+            <div class="signature-pad-wrapper">
+              <canvas class="signature-pad" id="signature-pad"></canvas>
+              <div class="signature-pad-controls">
+                <button type="button" class="signature-btn clear" onclick="clearSignature()">
+                  <i class="ti ti-trash" aria-hidden="true"></i> Effacer
+                </button>
+                <button type="button" class="signature-btn save" onclick="saveSignature()">
+                  <i class="ti ti-circle-check" aria-hidden="true"></i> Enregistrer
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="signature-col date-col">
+            <div class="id-field">
+              <span class="field-label">Date de signature</span>
+              <input type="text" class="field-line" placeholder="__/__/____" id="signature-date" />
+            </div>
+            <div class="signature-info-box">
+              <i class="ti ti-info-circle" aria-hidden="true"></i>
+              <p>Cette signature atteste que vous avez complété cette fiche de préparation et pris connaissance des 5 UF du scénario IA-PRO.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const canvas = document.getElementById('signature-pad');
+        const ctx = canvas.getContext('2d');
+        let isDrawing = false;
+        let lastX = 0;
+        let lastY = 0;
+        let ratio = Math.max(window.devicePixelRatio || 1, 1);
+
+        // Fonction optimisée pour le redimensionnement du canvas
+        function resizeCanvas() {
+          const rect = canvas.getBoundingClientRect();
+          canvas.width = rect.width * ratio;
+          canvas.height = rect.height * ratio;
+          canvas.style.width = rect.width + 'px';
+          canvas.style.height = rect.height + 'px';
+          ctx.scale(ratio, ratio);
+          ctx.lineWidth = 2;
+          ctx.lineCap = 'round';
+          ctx.strokeStyle = '#0f172a';
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+
+        // Initialisation du canvas
+        function initCanvas() {
+          // Utilisation de ResizeObserver pour une meilleure gestion du redimensionnement
+          const resizeObserver = new ResizeObserver(() => {
+            resizeCanvas();
+            // Recharger la signature après redimensionnement
+            const savedSignature = localStorage.getItem('signatureData');
+            if (savedSignature) {
+              const img = new Image();
+              img.onload = function() {
+                ctx.drawImage(img, 0, 0, canvas.width / ratio, canvas.height / ratio);
+              };
+              img.src = savedSignature;
+            }
+          });
+
+          resizeObserver.observe(canvas);
+          resizeCanvas();
+        }
+
+        // Fonctions de dessin optimisées
+        function startDrawing(e) {
+          isDrawing = true;
+          const rect = canvas.getBoundingClientRect();
+          lastX = (e.clientX || e.touches[0].clientX) - rect.left;
+          lastY = (e.clientY || e.touches[0].clientY) - rect.top;
+        }
+
+        function draw(e) {
+          if (!isDrawing) return;
+          const rect = canvas.getBoundingClientRect();
+          const currentX = (e.clientX || e.touches[0].clientX) - rect.left;
+          const currentY = (e.clientY || e.touches[0].clientY) - rect.top;
+
+          ctx.beginPath();
+          ctx.moveTo(lastX, lastY);
+          ctx.lineTo(currentX, currentY);
+          ctx.stroke();
+          [lastX, lastY] = [currentX, currentY];
+        }
+
+        function stopDrawing() {
+          isDrawing = false;
+        }
+
+        // Gestion des événements avec optimisation
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseup', stopDrawing);
+        canvas.addEventListener('mouseout', stopDrawing);
+
+        canvas.addEventListener('touchstart', function(e) {
+          e.preventDefault();
+          startDrawing(e);
+        }, { passive: false });
+
+        canvas.addEventListener('touchmove', function(e) {
+          e.preventDefault();
+          draw(e);
+        }, { passive: false });
+
+        canvas.addEventListener('touchend', stopDrawing);
+
+        // Fonctions de gestion de la signature
+        window.clearSignature = function() {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          localStorage.removeItem('signatureData');
+        };
+
+        window.saveSignature = function() {
+          const signatureData = canvas.toDataURL('image/png');
+          localStorage.setItem('signatureData', signatureData);
+          return signatureData;
+        };
+
+        // Chargement de la signature sauvegardée
+        const savedSignature = localStorage.getItem('signatureData');
+        if (savedSignature) {
+          const img = new Image();
+          img.onload = function() {
+            ctx.drawImage(img, 0, 0, canvas.width / ratio, canvas.height / ratio);
+          };
+          img.src = savedSignature;
+        }
+
+        // Gestion de la date de signature
+        const signatureDate = document.getElementById('signature-date');
+        const savedDate = localStorage.getItem('signatureDate');
+        if (savedDate) signatureDate.value = savedDate;
+
+        signatureDate.addEventListener('input', () => {
+          localStorage.setItem('signatureDate', signatureDate.value);
+        });
+
+        // Initialisation finale
+        initCanvas();
+      });
+    </script>
+
       <!-- Footer section with print button -->
       <div class="footer-strip">
-        <div class="footer-note">À apporter en séance (ou partager via le drive de formation avant le mercredi 1). Cette fiche est votre point d'entrée dans le débrief collectif.</div>
+        <div class="footer-note">À apporter en séance (ou partager via le drive de formation avant le premier jour. Cette fiche est votre point d'entrée dans le débrief collectif.</div>
         <button class="print-btn" onclick="window.print()">
           <i class="ti ti-printer" aria-hidden="true"></i>Imprimer la fiche
         </button>