1567 lines
42 KiB
HTML
1567 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Triptyque Breakout - Mercredi</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;
|
||
--border-radius-xl: 24px;
|
||
|
||
--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);
|
||
|
||
/* Column Theme: Dimension 1 (Contenu - Violet) */
|
||
--color-p-bg: hsl(250, 75%, 97%);
|
||
--color-p-border: hsl(250, 70%, 92%);
|
||
--color-p-accent: hsl(250, 70%, 58%);
|
||
--color-p-dark: hsl(250, 80%, 25%);
|
||
|
||
/* Column Theme: Dimension 2 (Méthode - Teal) */
|
||
--color-t-bg: hsl(162, 55%, 96%);
|
||
--color-t-border: hsl(162, 50%, 88%);
|
||
--color-t-accent: hsl(162, 75%, 34%);
|
||
--color-t-dark: hsl(162, 80%, 18%);
|
||
|
||
/* Column Theme: Dimension 3 (Posture - Amber) */
|
||
--color-a-bg: hsl(36, 85%, 96%);
|
||
--color-a-border: hsl(36, 80%, 88%);
|
||
--color-a-accent: hsl(36, 90%, 45%);
|
||
--color-a-dark: hsl(36, 95%, 22%);
|
||
}
|
||
|
||
* {
|
||
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.02) 0px, transparent 50%),
|
||
radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.03) 0px, transparent 50%);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
.wrap {
|
||
max-width: 1240px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 2.5rem 24px;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Header */
|
||
.doc-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;
|
||
}
|
||
|
||
.header-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.doc-kicker {
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: .2em;
|
||
text-transform: uppercase;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.doc-title {
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.2;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Theme Toggle */
|
||
.theme-btn {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
color: var(--color-text-primary);
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.2s ease;
|
||
font-size: 1.2rem;
|
||
outline: none;
|
||
}
|
||
|
||
.theme-btn:hover {
|
||
background: var(--bg-tertiary);
|
||
border-color: var(--color-text-secondary);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.theme-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* Timer Widget */
|
||
.timer-pill {
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-p-border);
|
||
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);
|
||
}
|
||
|
||
/* Instruction bar */
|
||
.consigne-bar {
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-p-border);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 14px 20px;
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.consigne-bar i {
|
||
color: var(--primary);
|
||
font-size: 1.35rem;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.consigne-bar p {
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.consigne-bar strong {
|
||
color: var(--color-text-primary);
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* Grid Headers */
|
||
.col-headers {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.ch-empty {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.col-head {
|
||
border-radius: var(--border-radius-md);
|
||
padding: 14px 18px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.col-head:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.ch-purple {
|
||
background: var(--color-p-bg);
|
||
border: 1px solid var(--color-p-border);
|
||
}
|
||
|
||
.ch-teal {
|
||
background: var(--color-t-bg);
|
||
border: 1px solid var(--color-t-border);
|
||
}
|
||
|
||
.ch-amber {
|
||
background: var(--color-a-bg);
|
||
border: 1px solid var(--color-a-border);
|
||
}
|
||
|
||
.ch-icon {
|
||
font-size: 1.35rem;
|
||
margin-top: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ch-icon-p {
|
||
color: var(--color-p-accent);
|
||
}
|
||
|
||
.ch-icon-t {
|
||
color: var(--color-t-accent);
|
||
}
|
||
|
||
.ch-icon-a {
|
||
color: var(--color-a-accent);
|
||
}
|
||
|
||
.ch-texts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.ch-num {
|
||
font-size: 0.65rem;
|
||
font-weight: 800;
|
||
letter-spacing: .12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.ch-num-p {
|
||
color: var(--color-p-accent);
|
||
}
|
||
|
||
.ch-num-t {
|
||
color: var(--color-t-accent);
|
||
}
|
||
|
||
.ch-num-a {
|
||
color: var(--color-a-accent);
|
||
}
|
||
|
||
.ch-name {
|
||
font-size: 1rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.ch-name-p {
|
||
color: var(--color-p-dark);
|
||
}
|
||
|
||
.ch-name-t {
|
||
color: var(--color-t-dark);
|
||
}
|
||
|
||
.ch-name-a {
|
||
color: var(--color-a-dark);
|
||
}
|
||
|
||
.ch-q {
|
||
font-size: 0.8rem;
|
||
font-style: italic;
|
||
margin-top: 2px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.ch-q-p {
|
||
color: var(--color-p-accent);
|
||
}
|
||
|
||
.ch-q-t {
|
||
color: var(--color-t-accent);
|
||
}
|
||
|
||
.ch-q-a {
|
||
color: var(--color-a-accent);
|
||
}
|
||
|
||
/* Sequence Rows */
|
||
.seq-row {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.seq-label-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 18px 16px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.seq-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-p-border);
|
||
border-radius: 20px;
|
||
padding: 4px 10px;
|
||
font-size: 0.725rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 12px;
|
||
width: fit-content;
|
||
}
|
||
|
||
.seq-title-main {
|
||
font-size: 0.95rem;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.4;
|
||
margin-bottom: 6px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.seq-uf-tag {
|
||
font-size: 0.775rem;
|
||
color: var(--color-text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Grid Interactive Cells */
|
||
.cell {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 14px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.cell::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
border-radius: 4px 4px 0 0;
|
||
}
|
||
|
||
.cell-eg {
|
||
font-size: 0.775rem;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
line-height: 1.45;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px dashed var(--color-border-secondary);
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.cell textarea {
|
||
border: none;
|
||
background: transparent;
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-primary);
|
||
padding: 4px 0 0 0;
|
||
resize: vertical;
|
||
outline: none;
|
||
width: 100%;
|
||
line-height: 1.5;
|
||
min-height: 85px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.cell textarea::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Column themes for cells */
|
||
.seq-row .cell:nth-child(2)::before {
|
||
background: var(--color-p-accent);
|
||
}
|
||
|
||
.seq-row .cell:nth-child(2):focus-within {
|
||
border-color: var(--color-p-accent);
|
||
box-shadow: 0 0 0 3px hsla(250, 70%, 58%, 0.15), var(--shadow-lg);
|
||
}
|
||
|
||
.seq-row .cell:nth-child(3)::before {
|
||
background: var(--color-t-accent);
|
||
}
|
||
|
||
.seq-row .cell:nth-child(3):focus-within {
|
||
border-color: var(--color-t-accent);
|
||
box-shadow: 0 0 0 3px hsla(162, 75%, 34%, 0.15), var(--shadow-lg);
|
||
}
|
||
|
||
.seq-row .cell:nth-child(4)::before {
|
||
background: var(--color-a-accent);
|
||
}
|
||
|
||
.seq-row .cell:nth-child(4):focus-within {
|
||
border-color: var(--color-a-accent);
|
||
box-shadow: 0 0 0 3px hsla(36, 90%, 45%, 0.15), var(--shadow-lg);
|
||
}
|
||
|
||
/* Restitution Debrief Panel */
|
||
.debrief-box {
|
||
margin-top: 2rem;
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
background: var(--bg-secondary);
|
||
box-shadow: var(--shadow-md);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.debrief-head {
|
||
background: var(--bg-tertiary);
|
||
padding: 14px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.debrief-head i {
|
||
color: var(--primary);
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.debrief-head-label {
|
||
font-size: 0.85rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.debrief-body {
|
||
padding: 20px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.db-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 16px;
|
||
position: relative;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.db-col:focus-within {
|
||
border-color: var(--primary);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.db-col::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
border-radius: 3px 3px 0 0;
|
||
}
|
||
|
||
.db-col:nth-child(1)::before {
|
||
background: #10b981;
|
||
}
|
||
|
||
/* success green */
|
||
.db-col:nth-child(2)::before {
|
||
background: #3b82f6;
|
||
}
|
||
|
||
/* debug blue */
|
||
.db-col:nth-child(3)::before {
|
||
background: #f59e0b;
|
||
}
|
||
|
||
/* attention orange */
|
||
|
||
.db-col-label {
|
||
font-size: 0.8rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-primary);
|
||
padding: 0 0 6px 0;
|
||
border-bottom: 1px dashed var(--color-border-secondary);
|
||
}
|
||
|
||
.db-col textarea {
|
||
width: 100%;
|
||
border: none;
|
||
background: transparent;
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-primary);
|
||
padding: 4px 0 0 0;
|
||
resize: vertical;
|
||
outline: none;
|
||
line-height: 1.5;
|
||
min-height: 90px;
|
||
}
|
||
|
||
.db-col textarea::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
|
||
/* Footer styles */
|
||
.sep {
|
||
border: none;
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
margin: 2.5rem 0 1.5rem 0;
|
||
}
|
||
|
||
.footer-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1.5rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.foot-note {
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
max-width: 65%;
|
||
}
|
||
|
||
.foot-btns {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.fbtn {
|
||
font-family: 'Nunito', sans-serif;
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
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);
|
||
}
|
||
|
||
.fbtn-print {
|
||
background: var(--primary);
|
||
border: 1px solid var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.fbtn-print:hover {
|
||
background: var(--primary-dark);
|
||
border-color: var(--primary-dark);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
|
||
}
|
||
|
||
.fbtn-reset {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.fbtn-reset:hover {
|
||
background: var(--bg-tertiary);
|
||
border-color: var(--color-text-secondary);
|
||
color: var(--color-text-primary);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.fbtn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Screen Reader 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;
|
||
}
|
||
|
||
/* Responsive CSS Overrides */
|
||
@media (max-width: 1100px) {
|
||
.col-headers {
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
|
||
.ch-empty {
|
||
display: none;
|
||
}
|
||
|
||
.seq-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 14px;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
padding: 20px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.seq-label-cell {
|
||
border: none;
|
||
padding: 0 0 14px 0;
|
||
box-shadow: none;
|
||
border-bottom: 1px solid var(--color-border-primary);
|
||
border-radius: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.seq-row .cell {
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.doc-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.header-right {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.col-headers {
|
||
display: none;
|
||
}
|
||
|
||
.debrief-body {
|
||
grid-template-columns: 1fr;
|
||
gap: 14px;
|
||
}
|
||
|
||
.foot-note {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.footer-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.foot-btns {
|
||
width: 100%;
|
||
}
|
||
|
||
.fbtn {
|
||
flex: 1;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
/* Print Styles Overrides */
|
||
@media print {
|
||
body {
|
||
background: white !important;
|
||
color: black !important;
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
}
|
||
|
||
|
||
|
||
.wrap {
|
||
max-width: 100% !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.theme-btn,
|
||
.timer-pill,
|
||
.timer-controls,
|
||
.foot-btns,
|
||
hr.sep {
|
||
display: none !important;
|
||
}
|
||
|
||
.doc-header {
|
||
border-bottom: 2px solid #000;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.col-headers {
|
||
display: grid !important;
|
||
grid-template-columns: 160px 1fr 1fr 1fr !important;
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.ch-empty {
|
||
display: block !important;
|
||
}
|
||
|
||
.seq-row {
|
||
display: grid !important;
|
||
grid-template-columns: 160px 1fr 1fr 1fr !important;
|
||
gap: 8px !important;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.cell {
|
||
border: 1px solid #64748b !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.cell::before {
|
||
display: none !important;
|
||
}
|
||
|
||
.cell textarea {
|
||
background: white !important;
|
||
resize: none;
|
||
}
|
||
|
||
.debrief-box {
|
||
page-break-inside: avoid;
|
||
border: 1px solid #64748b !important;
|
||
}
|
||
|
||
.debrief-body {
|
||
grid-template-columns: 1fr 1fr 1fr !important;
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.db-col {
|
||
border: 1px solid #64748b !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="wrap">
|
||
<!-- Accessibility Title -->
|
||
<h2 class="sr-only">Grille triptyque Contenu–Méthode–Posture pour l'atelier breakout rooms du Mercredi 1, avec 3
|
||
séquences UF1 et UF2 à analyser en sous-groupes</h2>
|
||
|
||
<!-- Elegant Header Dashboard style -->
|
||
<div class="doc-header">
|
||
<div class="header-left">
|
||
<div class="doc-kicker">Formation IA - Mercredi 1</div>
|
||
<div class="doc-title">Grille triptyque — Contenu / Méthode / Posture</div>
|
||
</div>
|
||
<div class="header-right">
|
||
|
||
|
||
<!-- Timer widget -->
|
||
<div class="timer-pill" id="timer-widget">
|
||
<div class="timer-texts">
|
||
<span class="timer-label">Minuteur groupe</span>
|
||
<span class="timer-display" id="timer-display">10: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>
|
||
|
||
<!-- Interactive Instruction bar -->
|
||
<div class="consigne-bar">
|
||
<i class="ti ti-clipboard-text" aria-hidden="true"></i>
|
||
<p><strong>Consigne (10 min par groupe) :</strong> Pour la séquence qui vous est assignée, identifiez les 3
|
||
dimensions du triptyque. Notez vos réponses dans la grille. Lors de la restitution en plénière, chaque groupe
|
||
présentera ses 3 dimensions en 5 min.</p>
|
||
</div>
|
||
|
||
<!-- Table Columns Header -->
|
||
<div class="col-headers">
|
||
<div class="ch-empty"></div>
|
||
|
||
<!-- Contenu (Purple Header) -->
|
||
<div class="col-head ch-purple">
|
||
<i class="ti ti-file-text ch-icon ch-icon-p" aria-hidden="true"></i>
|
||
<div class="ch-texts">
|
||
<div class="ch-num ch-num-p">Dimension 1</div>
|
||
<div class="ch-name ch-name-p">Contenu</div>
|
||
<div class="ch-q ch-q-p">Quoi transmettre ?</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Méthode (Teal Header) -->
|
||
<div class="col-head ch-teal">
|
||
<i class="ti ti-tools ch-icon ch-icon-t" aria-hidden="true"></i>
|
||
<div class="ch-texts">
|
||
<div class="ch-num ch-num-t">Dimension 2</div>
|
||
<div class="ch-name ch-name-t">Méthode</div>
|
||
<div class="ch-q ch-q-t">Comment l'animer ?</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Posture (Amber Header) -->
|
||
<div class="col-head ch-amber">
|
||
<i class="ti ti-user-check ch-icon ch-icon-a" aria-hidden="true"></i>
|
||
<div class="ch-texts">
|
||
<div class="ch-num ch-num-a">Dimension 3</div>
|
||
<div class="ch-name ch-name-a">Posture</div>
|
||
<div class="ch-q ch-q-a">Quelle présence adopter ?</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 1: Groupe A -->
|
||
<div class="seq-row">
|
||
<div class="seq-label-cell">
|
||
<div class="seq-badge"><i class="ti ti-users" style="font-size:12px;" aria-hidden="true"></i>Groupe A</div>
|
||
<div class="seq-title-main">Définition, historique & types d'IA</div>
|
||
<div class="seq-uf-tag">UF1 · Ch.1 · Séq. 1.1 · 0h45</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : panorama IA, distinctions IA faible/forte, mise en contexte professionnel…</div>
|
||
<textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
|
||
aria-label="Contenu séquence 1.1"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : présentation + échanges, classe inversée possible…</div>
|
||
<textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
|
||
aria-label="Méthode séquence 1.1"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : expert qui contextualise, facilitateur qui interroge…</div>
|
||
<textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
|
||
aria-label="Posture séquence 1.1"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 2: Groupe B -->
|
||
<div class="seq-row">
|
||
<div class="seq-label-cell">
|
||
<div class="seq-badge"><i class="ti ti-users" style="font-size:12px;" aria-hidden="true"></i>Groupe B</div>
|
||
<div class="seq-title-main">Les optimisations & opportunités envisageables</div>
|
||
<div class="seq-uf-tag">UF1 · Ch.2 · Séq. 1.5 · 1h30</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : tâches délégables à l'IA, bonnes/mauvaises pratiques, point légal…</div>
|
||
<textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
|
||
aria-label="Contenu séquence 1.5"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : travaux de réflexion collective, études de cas…</div>
|
||
<textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
|
||
aria-label="Méthode séquence 1.5"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : facilitateur de débat, neutre sur les cas légaux…</div>
|
||
<textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
|
||
aria-label="Posture séquence 1.5"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 3: Groupe C -->
|
||
<div class="seq-row">
|
||
<div class="seq-label-cell">
|
||
<div class="seq-badge"><i class="ti ti-users" style="font-size:12px;" aria-hidden="true"></i>Groupe C</div>
|
||
<div class="seq-title-main">Rédiger des prompts efficaces</div>
|
||
<div class="seq-uf-tag">UF2 · Ch.1 · Prompt Engineering · 1h00</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : structure ROCCO, bonnes pratiques, logique d'un prompt pertinent…</div>
|
||
<textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
|
||
aria-label="Contenu séquence UF2 prompt"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : démo live, co-construction, ne pas donner de recettes…</div>
|
||
<textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
|
||
aria-label="Méthode séquence UF2 prompt"></textarea>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-eg">Ex. : praticien qui montre son raisonnement, pair en exploration…</div>
|
||
<textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
|
||
aria-label="Posture séquence UF2 prompt"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="sep">
|
||
|
||
<!-- Restitution Panel for Referent Trainer -->
|
||
<div class="debrief-box">
|
||
<div class="debrief-head">
|
||
<i class="ti ti-message-dots" aria-hidden="true"></i>
|
||
<div class="debrief-head-label">Notes de restitution plénière — formateur référent</div>
|
||
</div>
|
||
<div class="debrief-body">
|
||
<div class="db-col">
|
||
<div class="db-col-label">Points forts identifiés</div>
|
||
<textarea rows="4" placeholder="Ce que les groupes ont bien vu…"
|
||
aria-label="Points forts plénière"></textarea>
|
||
</div>
|
||
<div class="db-col">
|
||
<div class="db-col-label">Zones de flou à clarifier</div>
|
||
<textarea rows="4" placeholder="Ce qui nécessite un recadrage ou un approfondissement…"
|
||
aria-label="Zones de flou plénière"></textarea>
|
||
</div>
|
||
<div class="db-col">
|
||
<div class="db-col-label">Point posture à insister</div>
|
||
<textarea rows="4" placeholder="La dimension souvent sous-estimée à mettre en lumière…"
|
||
aria-label="Point posture plénière"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PART 5 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-edit" aria-hidden="true"></i>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 sur la méthode / Posture.</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 Area with instructions & CTAs -->
|
||
<div class="footer-row">
|
||
<div class="foot-note">Durée totale activité : 10 min breakout + 15 min restitution (5 min / groupe). Le minuteur
|
||
compte le temps de travail en sous-groupe.</div>
|
||
<div class="foot-btns">
|
||
<button class="fbtn fbtn-reset" onclick="clearAll()"><i class="ti ti-eraser" aria-hidden="true"></i>Effacer
|
||
tout</button>
|
||
<button class="fbtn fbtn-print" onclick="window.print()"><i class="ti ti-printer"
|
||
aria-hidden="true"></i>Imprimer la grille</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<script>
|
||
// Timer Logic
|
||
let secs = 600, 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 = 600;
|
||
document.getElementById('timer-widget').classList.remove('ticking');
|
||
render();
|
||
}
|
||
|
||
// LocalStorage Auto-save & Load Logic
|
||
const textareas = document.querySelectorAll('textarea');
|
||
textareas.forEach((t, index) => {
|
||
// Load saved values
|
||
const savedVal = localStorage.getItem(`textarea_triptyque_${index}`);
|
||
if (savedVal) t.value = savedVal;
|
||
|
||
// Auto-save on input
|
||
t.addEventListener('input', () => {
|
||
localStorage.setItem(`textarea_triptyque_${index}`, t.value);
|
||
});
|
||
});
|
||
|
||
function clearAll() {
|
||
if (!confirm('Effacer toutes les saisies de la grille ?')) return;
|
||
textareas.forEach((t, index) => {
|
||
t.value = '';
|
||
localStorage.removeItem(`textarea_triptyque_${index}`);
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |