feat: add interactive signature pad with local storage persistence to index.html
This commit is contained in:
sebvtl728
parent
ee4895a6bf
commit
d95cb3fb4c
330
index.html
330
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user