1588 lines
48 KiB
HTML
1588 lines
48 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Fiche classe inversée Mercredi 3</title>
|
||
|
||
<!-- Tabler Icons CSS CDN -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
|
||
|
||
:root {
|
||
/* Theme core colors (Indigo/Violet) */
|
||
--primary-hsl: 247, 80%, 62%;
|
||
--primary: hsl(var(--primary-hsl));
|
||
--primary-light: hsl(247, 85%, 96%);
|
||
--primary-dark: hsl(247, 80%, 35%);
|
||
|
||
/* Neutral colors - Clean & Premium Cool Grays */
|
||
--bg-primary: #f8fafc;
|
||
--bg-secondary: #ffffff;
|
||
--bg-tertiary: #f1f5f9;
|
||
|
||
--color-text-primary: #0f172a;
|
||
--color-text-secondary: #475569;
|
||
--color-text-tertiary: #94a3b8;
|
||
|
||
--color-border-primary: #f1f5f9;
|
||
--color-border-secondary: #e2e8f0;
|
||
--color-border-tertiary: #e2e8f0;
|
||
|
||
--border-radius-sm: 8px;
|
||
--border-radius-md: 14px;
|
||
--border-radius-lg: 18px;
|
||
|
||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
|
||
--shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.05), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
|
||
|
||
/* Warning Accent (Red/Orange) */
|
||
--color-a-bg: #FCEBEB;
|
||
--color-a-border: #F09595;
|
||
--color-a-accent: #A32D2D;
|
||
--color-a-dark: #791F1F;
|
||
}
|
||
|
||
/* Header Right Container & Timer styles */
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Timer Widget */
|
||
.timer-pill {
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 8px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
box-shadow: var(--shadow-md);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.timer-texts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.timer-label {
|
||
font-size: 0.65rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.timer-display {
|
||
font-size: 1.35rem;
|
||
font-weight: 900;
|
||
color: var(--primary-dark);
|
||
min-width: 60px;
|
||
line-height: 1.1;
|
||
text-align: center;
|
||
}
|
||
|
||
.timer-controls {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tcbtn {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: 8px;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 0.95rem;
|
||
color: var(--color-text-primary);
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.tcbtn:hover {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
|
||
}
|
||
|
||
.tcbtn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
@keyframes pulse-timer {
|
||
0% { box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0.4); }
|
||
70% { box-shadow: 0 0 0 10px hsla(247, 80%, 62%, 0); }
|
||
100% { box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0); }
|
||
}
|
||
|
||
.timer-pill.ticking {
|
||
animation: pulse-timer 2s infinite;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-primary);
|
||
color: var(--color-text-primary);
|
||
font-family: 'Nunito', sans-serif;
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-image:
|
||
radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.04) 0px, transparent 50%),
|
||
radial-gradient(at 100% 0%, hsla(162, 75%, 34%, 0.01) 0px, transparent 50%),
|
||
radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.02) 0px, transparent 50%);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
.fiche {
|
||
max-width: 960px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 2.5rem 24px;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Header */
|
||
.fiche-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1.5rem;
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
padding-bottom: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.fiche-kicker {
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: .2em;
|
||
text-transform: uppercase;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.fiche-title {
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.2;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.fiche-badge {
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 10px 18px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.badge-top {
|
||
font-size: 0.65rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.badge-bottom {
|
||
font-size: 1.25rem;
|
||
font-weight: 900;
|
||
color: var(--primary-dark);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Identity input cards */
|
||
.identity-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.id-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 10px 14px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.id-field:focus-within {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12), var(--shadow-md);
|
||
}
|
||
|
||
.field-label {
|
||
font-size: 0.65rem;
|
||
font-weight: 800;
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.field-line {
|
||
border: none;
|
||
background: transparent;
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-primary);
|
||
padding: 2px 0 0 0;
|
||
width: 100%;
|
||
outline: none;
|
||
}
|
||
|
||
.field-line::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Instructions & Reminder boxes */
|
||
.intro-block {
|
||
background: var(--primary-light);
|
||
border-left: 4px solid var(--primary);
|
||
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
|
||
padding: 14px 20px;
|
||
margin-bottom: 2rem;
|
||
box-shadow: var(--shadow-sm);
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.intro-block i {
|
||
color: var(--primary);
|
||
font-size: 1.3rem;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.intro-block p {
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.intro-block strong {
|
||
color: var(--color-text-primary);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.reminder-box {
|
||
background: var(--color-a-bg);
|
||
border: 1px solid var(--color-a-border);
|
||
border-left: 4px solid var(--color-a-accent);
|
||
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
|
||
padding: 14px 20px;
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.reminder-box i {
|
||
color: var(--color-a-accent);
|
||
font-size: 1.3rem;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.reminder-box p {
|
||
font-size: 0.9rem;
|
||
color: var(--color-a-dark);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.reminder-box strong {
|
||
color: #501313;
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* Section Headers */
|
||
.section-title {
|
||
font-size: 0.85rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary);
|
||
margin: 2.5rem 0 1.5rem 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.section-title i {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.section-title::after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--color-border-secondary);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Question Block Cards */
|
||
.question-block {
|
||
margin-bottom: 2rem;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
padding: 20px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.question-block:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.q-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.q-num {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-border-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
font-weight: 800;
|
||
color: var(--primary-dark);
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.q-text {
|
||
font-size: 0.95rem;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.q-hint {
|
||
font-size: 0.825rem;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
line-height: 1.5;
|
||
margin-left: 42px;
|
||
margin-bottom: 12px;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* Textarea inputs */
|
||
.write-area {
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
background: var(--bg-primary);
|
||
width: 100%;
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-primary);
|
||
padding: 12px 16px;
|
||
resize: vertical;
|
||
outline: none;
|
||
line-height: 1.6;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.write-area:focus {
|
||
border-color: var(--primary);
|
||
background: var(--bg-secondary);
|
||
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12), var(--shadow-md);
|
||
}
|
||
|
||
.write-area::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Rocco 3-column Grid for UFs and situations */
|
||
.rocco-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
margin-left: 42px;
|
||
margin-top: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.rg-item {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.rg-item:focus-within {
|
||
border-color: var(--primary);
|
||
box-shadow: var(--shadow-md);
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.rg-lbl {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
width: fit-content;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.tag-uf3 {
|
||
background: #FCEBEB;
|
||
color: #791F1F;
|
||
}
|
||
|
||
.tag-uf4 {
|
||
background: #EEEDFE;
|
||
color: #3C3489;
|
||
}
|
||
|
||
.tag-uf5 {
|
||
background: #EAF3DE;
|
||
color: #27500A;
|
||
}
|
||
|
||
.uf-name {
|
||
font-size: 0.85rem;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.45;
|
||
min-height: 38px;
|
||
}
|
||
|
||
/* Two column custom input groups */
|
||
.two-col-areas {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-left: 42px;
|
||
margin-top: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.mini-area-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.mini-label {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
/* micro-block */
|
||
.micro-block {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
margin-bottom: 2rem;
|
||
overflow: hidden;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.micro-block:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.micro-head {
|
||
background: var(--primary-light);
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
padding: 14px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.micro-head i {
|
||
color: var(--primary);
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.micro-head-lbl {
|
||
font-size: 0.8rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
}
|
||
|
||
.micro-body {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.mb-row {
|
||
display: grid;
|
||
grid-template-columns: 180px 1fr;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.mb-key {
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.divider {
|
||
border: none;
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
margin: 2.5rem 0 1.5rem 0;
|
||
}
|
||
|
||
/* Confidence level tag group */
|
||
.level-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-left: 42px;
|
||
margin-top: 12px;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.level-opt {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: 20px;
|
||
padding: 8px 16px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.level-opt:hover {
|
||
border-color: var(--primary);
|
||
background: var(--primary-light);
|
||
}
|
||
|
||
.level-opt input[type="radio"] {
|
||
accent-color: var(--primary);
|
||
width: 16px;
|
||
height: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.level-opt span {
|
||
font-size: 0.85rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Footer */
|
||
.footer-strip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
padding-top: 1.5rem;
|
||
margin-top: 3rem;
|
||
gap: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.footer-note {
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
max-width: 60%;
|
||
}
|
||
|
||
.footer-btns {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.print-btn {
|
||
font-family: 'Nunito', sans-serif;
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
background: var(--primary);
|
||
border: 1px solid var(--primary);
|
||
color: white;
|
||
border-radius: 10px;
|
||
padding: 10px 18px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
white-space: nowrap;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.print-btn:hover {
|
||
background: var(--primary-dark);
|
||
border-color: var(--primary-dark);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
|
||
}
|
||
|
||
.print-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Accessibility Utilities */
|
||
.sr-only {
|
||
position: absolute !important;
|
||
width: 1px !important;
|
||
height: 1px !important;
|
||
padding: 0 !important;
|
||
margin: -1px !important;
|
||
overflow: hidden !important;
|
||
clip: rect(0, 0, 0, 0) !important;
|
||
white-space: nowrap !important;
|
||
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 {
|
||
padding: 1.5rem 16px;
|
||
}
|
||
|
||
.fiche-header {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.header-right {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
gap: 12px;
|
||
}
|
||
|
||
.identity-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.rocco-grid {
|
||
grid-template-columns: 1fr;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.two-col-areas {
|
||
grid-template-columns: 1fr;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.mb-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 6px;
|
||
}
|
||
|
||
.mb-key {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.level-row {
|
||
margin-left: 0;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
}
|
||
|
||
.level-opt {
|
||
width: 100%;
|
||
}
|
||
|
||
.q-hint {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.footer-strip {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.footer-note {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.footer-btns {
|
||
flex-direction: column;
|
||
width: 100%;
|
||
gap: 8px;
|
||
}
|
||
|
||
.footer-btns button {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
/* Print Styles Overrides */
|
||
@media print {
|
||
body {
|
||
background: white !important;
|
||
color: black !important;
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
}
|
||
|
||
.print-btn, .timer-pill {
|
||
display: none !important;
|
||
}
|
||
|
||
.question-block, .micro-block {
|
||
page-break-inside: avoid;
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.write-area {
|
||
background: white !important;
|
||
border: 1px solid #94a3b8 !important;
|
||
resize: none;
|
||
}
|
||
|
||
.rg-item {
|
||
page-break-inside: avoid;
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.level-opt {
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
}
|
||
|
||
.id-field {
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="fiche">
|
||
<!-- Accessibility Hidden Title -->
|
||
<h2 class="sr-only">Fiche de classe inversée à compléter avant le Mercredi 3 - lecture UF3 RGPD sécurité, UF4 accessibilité, UF5 éthique, préparation micro-teaching et question difficile</h2>
|
||
|
||
<!-- Header -->
|
||
<div class="fiche-header">
|
||
<div class="header-left">
|
||
<div class="fiche-kicker">Formation de formateurs IA-PRO · Classe inversée · Séance 3/5</div>
|
||
<div class="fiche-title">Fiche de préparation<br>Mercredi 3 - Maîtriser UF3, UF4 & UF5</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<!-- Estimated duration badge -->
|
||
<div class="fiche-badge">
|
||
<div class="badge-top">Durée estimée</div>
|
||
<div class="badge-bottom">~1h30</div>
|
||
</div>
|
||
|
||
<!-- Timer widget -->
|
||
<div class="timer-pill" id="timer-widget">
|
||
<div class="timer-texts">
|
||
<span class="timer-label">Minuteur préparation</span>
|
||
<span class="timer-display" id="timer-display">90:00</span>
|
||
</div>
|
||
<div class="timer-controls">
|
||
<button class="tcbtn" onclick="startTimer()" aria-label="Démarrer le minuteur">
|
||
<i class="ti ti-player-play" aria-hidden="true"></i>
|
||
</button>
|
||
<button class="tcbtn" onclick="pauseTimer()" aria-label="Pause">
|
||
<i class="ti ti-player-pause" aria-hidden="true"></i>
|
||
</button>
|
||
<button class="tcbtn" onclick="resetTimer()" aria-label="Réinitialiser">
|
||
<i class="ti ti-refresh" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Identity card row -->
|
||
<div class="identity-row">
|
||
<div class="id-field">
|
||
<span class="field-label">Prénom & nom</span>
|
||
<input class="field-line" type="text" placeholder="Votre nom" />
|
||
</div>
|
||
<div class="id-field">
|
||
<span class="field-label">Date de la séance</span>
|
||
<input class="field-line" type="text" placeholder="Mercredi __/__/____" />
|
||
</div>
|
||
<div class="id-field">
|
||
<span class="field-label">Complétée le</span>
|
||
<input class="field-line" type="text" placeholder="__/__/____" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Informative Intro Block -->
|
||
<div class="intro-block">
|
||
<i class="ti ti-book" aria-hidden="true"></i>
|
||
<p>Lisez en détail les séquences de l'<strong>UF3</strong> (RGPD, IA Act, bonnes pratiques, shadow AI), de l'<strong>UF4</strong> (accessibilité, WCAG, déficiences visuelles et auditives, FALC) et de l'<strong>UF5</strong> (éthique, biais, sobriété numérique, études de cas). Complétez ensuite cette fiche. Elle structure le débrief collectif et prépare votre micro-teaching.</p>
|
||
</div>
|
||
|
||
<!-- Warning Reminder capsule -->
|
||
<div class="reminder-box" aria-label="Conseil important">
|
||
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
||
<p><strong>Ces UF sont d'une nature différente des précédentes.</strong> Elles touchent au juridique, aux vécus personnels (handicap, emploi, éthique) et peuvent mobiliser des positions tranchées. La fiche vous demande d'anticiper ces moments - pas de les éviter, mais de les préparer.</p>
|
||
</div>
|
||
|
||
<!-- PART 1 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-layout-grid" aria-hidden="true"></i>Partie 1 - Lecture UF3, UF4 & UF5
|
||
</div>
|
||
|
||
<!-- Question 1 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">1</div>
|
||
<div class="q-text">Pour chacune des 3 UF, notez en une phrase l'intention pédagogique centrale - ce que l'apprenant doit avoir compris ou être capable de faire à la fin.</div>
|
||
</div>
|
||
|
||
<!-- Rocco 3-column Grid for UFs -->
|
||
<div class="rocco-grid">
|
||
<!-- UF3 -->
|
||
<div class="rg-item">
|
||
<div class="rg-lbl tag-uf3">UF3</div>
|
||
<div class="uf-name">Confidentialité & sécurisation des données - RGPD, IA Act, shadow AI</div>
|
||
<textarea class="write-area" rows="3" style="margin-top: 6px" placeholder="Ex. : L'apprenant sait identifier les risques liés à l'usage de l'IA avec des données professionnelles et connaît les réflexes de base pour les limiter."></textarea>
|
||
</div>
|
||
|
||
<!-- UF4 -->
|
||
<div class="rg-item">
|
||
<div class="rg-lbl tag-uf4">UF4</div>
|
||
<div class="uf-name">Contenus inclusifs & accessibles - WCAG, FALC, déficiences</div>
|
||
<textarea class="write-area" rows="3" style="margin-top: 6px" placeholder="Ex. : L'apprenant est capable de produire avec l'IA des contenus accessibles aux personnes en situation de handicap visuel et auditif."></textarea>
|
||
</div>
|
||
|
||
<!-- UF5 -->
|
||
<div class="rg-item">
|
||
<div class="rg-lbl tag-uf5">UF5</div>
|
||
<div class="uf-name">Éthique & impacts sociaux - biais, sobriété, responsabilité</div>
|
||
<textarea class="write-area" rows="3" style="margin-top: 6px" placeholder="Ex. : L'apprenant adopte une posture critique et responsable face à l'IA - il sait identifier un biais et questionner l'impact de ses usages."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 2 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">2</div>
|
||
<div class="q-text">Parmi toutes les séquences de ces 3 UF, laquelle vous semble la plus difficile à animer - pas à comprendre, à <em>enseigner devant un groupe</em> ? Pourquoi ?</div>
|
||
</div>
|
||
|
||
<div class="two-col-areas">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">La séquence</span>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : UF5 – TP retro-prompting sur les biais IA"></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Pourquoi c'est difficile à animer</span>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : Les résultats peuvent choquer ou créer de la méfiance - je ne sais pas comment recadrer sans minimiser."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- PART 2 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-help-circle" aria-hidden="true"></i>Partie 2 - La question difficile (obligatoire)
|
||
</div>
|
||
|
||
<!-- Question 3 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">3</div>
|
||
<div class="q-text">Identifiez 1 question précise qu'un apprenant pourrait vous poser sur une séquence de l'UF3, UF4 ou UF5 - à laquelle vous ne sauriez pas bien répondre aujourd'hui.</div>
|
||
</div>
|
||
<p class="q-hint">C'est cette question qui ouvrira le débrief. Plus elle est précise et déstabilisante, plus elle sera utile au groupe. Évitez les questions vagues ("comment gérer les biais en général ?").</p>
|
||
|
||
<div class="two-col-areas">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">La question de l'apprenant</span>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : Est-ce que je risque quelque chose personnellement si j'utilise ChatGPT avec des données clients sans le savoir ?"></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Mon ébauche de réponse aujourd'hui</span>
|
||
<textarea class="write-area" rows="3" placeholder="Ce que je dirais - même si incomplet ou incertain. Pas la bonne réponse, votre réponse."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 4 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">4</div>
|
||
<div class="q-text">Pour chacune des 3 UF, anticipez 1 situation qui pourrait vous mettre en difficulté devant le groupe.</div>
|
||
</div>
|
||
|
||
<div class="rocco-grid">
|
||
<!-- UF3 Card -->
|
||
<div class="rg-item">
|
||
<div class="rg-lbl tag-uf3">UF3</div>
|
||
<div class="uf-name" style="min-height: auto;">Situation redoutée</div>
|
||
<textarea class="write-area" rows="3" style="margin-top: 6px;" placeholder="Ex. : Un apprenant me demande si son entreprise est conforme RGPD avec les outils qu'elle utilise - je ne peux pas répondre à ça."></textarea>
|
||
</div>
|
||
|
||
<!-- UF4 Card -->
|
||
<div class="rg-item">
|
||
<div class="rg-lbl tag-uf4">UF4</div>
|
||
<div class="uf-name" style="min-height: auto;">Situation redoutée</div>
|
||
<textarea class="write-area" rows="3" style="margin-top: 6px;" placeholder="Ex. : Un apprenant partage un vécu très personnel sur le handicap et l'émotion prend trop de place."></textarea>
|
||
</div>
|
||
|
||
<!-- UF5 Card -->
|
||
<div class="rg-item">
|
||
<div class="rg-lbl tag-uf5">UF5</div>
|
||
<div class="uf-name" style="min-height: auto;">Situation redoutée</div>
|
||
<textarea class="write-area" rows="3" style="margin-top: 6px;" placeholder="Ex. : Le débat sur l'emploi et l'IA devient trop idéologique et je ne sais plus comment l'arrêter sans frustrer."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- PART 3 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-player-play" aria-hidden="true"></i>Partie 3 - Préparation du micro-teaching (10 min)
|
||
</div>
|
||
|
||
<!-- Micro teaching Block -->
|
||
<div class="micro-block">
|
||
<div class="micro-head">
|
||
<i class="ti ti-clipboard-text" aria-hidden="true"></i>
|
||
<span class="micro-head-lbl">Votre séquence choisie - UF3, UF4 ou UF5 uniquement</span>
|
||
</div>
|
||
<div class="micro-body">
|
||
<div class="mb-row">
|
||
<span class="mb-key">Séquence choisie</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : UF4 – Ch.2 – Spécificités pour la déficience auditive (Sous-titrage, FALC, veille et mise en commun, 0h45)"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Intention pédagogique</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ce que l'apprenant comprend ou sait faire à l'issue de vos 10 min - 1 phrase, pas une liste."></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Méthode retenue</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : Veille rapide en binôme (3 min) → partage (4 min) → synthèse formateur (3 min). Pas de slides."></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Exemple concret préparé</span>
|
||
<textarea class="write-area" rows="3" placeholder="L'exemple, le cas ou la démo que vous utiliserez - ancré dans un contexte réel. Ex. : demander à l'IA de réécrire un texte en FALC, comparer avant/après."></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Posture visée</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : Facilitateur qui accueille les vécus sans les instrumentaliser - ni expert ni thérapeute."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 5 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">5</div>
|
||
<div class="q-text">Pour votre séquence, anticipez la question ou la réaction la plus déstabilisante qu'un apprenant pourrait avoir pendant vos 10 min. Préparez une amorce de réponse.</div>
|
||
</div>
|
||
<p class="q-hint">Pas "quelle question technique" - quelle réaction émotionnelle, idéologique ou personnelle. C'est différent.</p>
|
||
|
||
<div class="two-col-areas">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">La réaction redoutée</span>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : Un apprenant dit 'tout ça c'est du virtue signaling, dans la réalité personne ne fait du FALC'."></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Mon amorce de réponse</span>
|
||
<textarea class="write-area" rows="3" placeholder="Comment je commence à répondre - sans esquiver ni sur-réagir."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 6 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">6</div>
|
||
<div class="q-text">Pourquoi avez-vous choisi cette séquence ? Est-ce qu'elle vous sort de votre zone de confort ?</div>
|
||
</div>
|
||
|
||
<!-- confidence levels -->
|
||
<div class="level-row" role="radiogroup" aria-label="Zone de confort">
|
||
<label class="level-opt">
|
||
<input type="radio" name="zc" value="1">
|
||
<span>Très inconfortable</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="zc" value="2">
|
||
<span>Plutôt inconfortable</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="zc" value="3">
|
||
<span>Neutre</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="zc" value="4">
|
||
<span>Assez à l'aise</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="zc" value="5">
|
||
<span>Très à l'aise</span>
|
||
</label>
|
||
</div>
|
||
|
||
<textarea class="write-area" rows="2" style="margin-top: 12px" placeholder="Ce qui motive ce choix - et ce que vous voulez tester sur vous-même dans ce micro-teaching…"></textarea>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- PART 4 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-mood-check" aria-hidden="true"></i>Partie 4 - Positionnement avant la séance
|
||
</div>
|
||
|
||
<!-- Question 7 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">7</div>
|
||
<div class="q-text">Y a-t-il un sujet parmi UF3, UF4 ou UF5 sur lequel vous avez vous-même une position forte - et qui pourrait influencer votre façon de l'animer ?</div>
|
||
</div>
|
||
<p class="q-hint">Ce n'est pas un problème d'avoir des convictions. Le problème est de ne pas le savoir. Cette question vous aide à distinguer votre opinion de votre rôle de formateur.</p>
|
||
|
||
<div class="reminder-box" style="background: #FBEAF0; border: 1px solid #ED93B1; border-left: 4px solid #A32D2D; color: #72243E;">
|
||
<i class="ti ti-eye" style="color: #993556;" aria-hidden="true"></i>
|
||
<p style="color: #72243E;"><strong>Zone de vigilance personnelle :</strong> Répondre à cette question est facultatif dans la fiche - mais fortement conseillé de le faire pour soi, avant la séance.</p>
|
||
</div>
|
||
|
||
<textarea class="write-area" rows="3" style="margin-top: 8px;" placeholder="Ex. : Sur l'UF5 éthique, j'ai un avis très tranché sur l'IA et l'emploi. Je devrai veiller à ne pas orienter le débat."></textarea>
|
||
</div>
|
||
|
||
<!-- Question 8 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">8</div>
|
||
<div class="q-text">Qu'attendez-vous du jeu de rôle "situations difficiles" prévu en séance ? Quel scénario vous serait le plus utile à expérimenter ?</div>
|
||
</div>
|
||
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : Je veux m'entraîner à répondre à quelqu'un qui dit 'je sais déjà' - parce que c'est la situation qui me déstabilise le plus."></textarea>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- 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 et préparé votre micro-teaching pour le Mercredi 3.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer section with clear and print buttons -->
|
||
<div class="footer-strip">
|
||
<div class="footer-note">À apporter en séance ou partager via le drive avant le Mercredi 3. La question difficile (Q3) est votre contribution au débrief collectif - sans elle, le débrief perde de sa substance.</div>
|
||
<div class="footer-btns">
|
||
<button class="signature-btn clear" onclick="clearAll()">
|
||
<i class="ti ti-eraser" aria-hidden="true"></i> Effacer toutes les saisies
|
||
</button>
|
||
<button class="print-btn" onclick="window.print()">
|
||
<i class="ti ti-printer" aria-hidden="true"></i>Imprimer la fiche
|
||
</button>
|
||
</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_m3');
|
||
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];
|
||
}
|
||
|
||
// Gestion des événements avec optimisation
|
||
canvas.addEventListener('mousedown', startDrawing);
|
||
canvas.addEventListener('mousemove', draw);
|
||
canvas.addEventListener('mouseup', () => { isDrawing = false; });
|
||
canvas.addEventListener('mouseout', () => { isDrawing = false; });
|
||
|
||
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', () => { isDrawing = false; });
|
||
|
||
// Fonctions de gestion de la signature
|
||
window.clearSignature = function() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
localStorage.removeItem('signatureData_m3');
|
||
};
|
||
|
||
window.saveSignature = function() {
|
||
const signatureData = canvas.toDataURL('image/png');
|
||
localStorage.setItem('signatureData_m3', signatureData);
|
||
return signatureData;
|
||
};
|
||
|
||
// Chargement de la signature sauvegardée
|
||
const savedSignature = localStorage.getItem('signatureData_m3');
|
||
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_m3');
|
||
if (savedDate) signatureDate.value = savedDate;
|
||
|
||
signatureDate.addEventListener('input', () => {
|
||
localStorage.setItem('signatureDate_m3', signatureDate.value);
|
||
});
|
||
|
||
// Initialisation finale
|
||
initCanvas();
|
||
});
|
||
</script>
|
||
|
||
<!-- Active Auto-save script -->
|
||
<script>
|
||
// Auto-save & Load for Textareas
|
||
const textareas = document.querySelectorAll('textarea');
|
||
textareas.forEach((t, index) => {
|
||
const savedVal = localStorage.getItem(`textarea_fiche_m3_${index}`);
|
||
if (savedVal) t.value = savedVal;
|
||
|
||
t.addEventListener('input', () => {
|
||
localStorage.setItem(`textarea_fiche_m3_${index}`, t.value);
|
||
});
|
||
});
|
||
|
||
// Auto-save & Load for Text Inputs
|
||
const textInputs = document.querySelectorAll('input[type="text"]');
|
||
textInputs.forEach((input, index) => {
|
||
// Exclude signature date to avoid double saving/loading clash
|
||
if (input.id === 'signature-date') return;
|
||
|
||
const savedVal = localStorage.getItem(`input_fiche_m3_${index}`);
|
||
if (savedVal) input.value = savedVal;
|
||
|
||
input.addEventListener('input', () => {
|
||
localStorage.setItem(`input_fiche_m3_${index}`, input.value);
|
||
});
|
||
});
|
||
|
||
// Auto-save & Load for Radio Inputs
|
||
const radios = document.querySelectorAll('input[type="radio"]');
|
||
radios.forEach((radio) => {
|
||
const savedVal = localStorage.getItem('radio_fiche_m3_zc');
|
||
if (savedVal && radio.value === savedVal) {
|
||
radio.checked = true;
|
||
}
|
||
|
||
radio.addEventListener('change', () => {
|
||
localStorage.setItem('radio_fiche_m3_zc', radio.value);
|
||
});
|
||
});
|
||
|
||
// Clear All Function
|
||
window.clearAll = function() {
|
||
if (!confirm('Effacer toutes les saisies de cette fiche ?')) return;
|
||
document.querySelectorAll('textarea').forEach(t => t.value = '');
|
||
document.querySelectorAll('.field-line').forEach(i => i.value = '');
|
||
document.querySelectorAll('input[type=radio]').forEach(r => r.checked = false);
|
||
if (typeof clearSignature === 'function') {
|
||
clearSignature();
|
||
}
|
||
|
||
// Clean signature date field
|
||
const sigDateEl = document.getElementById('signature-date');
|
||
if (sigDateEl) sigDateEl.value = '';
|
||
|
||
// Remove from localStorage
|
||
const keysToRemove = [];
|
||
for (let i = 0; i < localStorage.length; i++) {
|
||
const key = localStorage.key(i);
|
||
if (key && (key.startsWith('textarea_fiche_m3_') || key.startsWith('input_fiche_m3_') || key.startsWith('radio_fiche_m3_') || key === 'signatureData_m3' || key === 'signatureDate_m3')) {
|
||
keysToRemove.push(key);
|
||
}
|
||
}
|
||
keysToRemove.forEach(k => localStorage.removeItem(k));
|
||
};
|
||
|
||
// Timer Logic (90 minutes)
|
||
let secs = 5400, interval = null;
|
||
|
||
function fmt(s) {
|
||
const m = Math.floor(s / 60), ss = s % 60;
|
||
return String(m).padStart(2, '0') + ':' + String(ss).padStart(2, '0');
|
||
}
|
||
|
||
function render() {
|
||
document.getElementById('timer-display').textContent = fmt(secs);
|
||
}
|
||
|
||
function startTimer() {
|
||
if (interval) return;
|
||
document.getElementById('timer-widget').classList.add('ticking');
|
||
interval = setInterval(() => {
|
||
if (secs <= 0) {
|
||
clearInterval(interval);
|
||
interval = null;
|
||
document.getElementById('timer-widget').classList.remove('ticking');
|
||
document.getElementById('timer-display').textContent = 'Temps !';
|
||
return;
|
||
}
|
||
secs--;
|
||
render();
|
||
}, 1000);
|
||
}
|
||
|
||
function pauseTimer() {
|
||
clearInterval(interval);
|
||
interval = null;
|
||
document.getElementById('timer-widget').classList.remove('ticking');
|
||
}
|
||
|
||
function resetTimer() {
|
||
clearInterval(interval);
|
||
interval = null;
|
||
secs = 5400;
|
||
document.getElementById('timer-widget').classList.remove('ticking');
|
||
render();
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|