feat: add interactive 45-minute preparation timer widget to fiche header

index.html

@@ -46,33 +46,92 @@
         --color-a-dark: hsl(36, 95%, 22%);
       }
 
-      /* Dark Mode Custom Overrides */
+      /* Header Right Container & Timer styles */
-      @media (prefers-color-scheme: dark) {
+      .header-right {
-        :root {
+        display: flex;
-          --bg-primary: #090d16;
+        align-items: center;
-          --bg-secondary: #111827;
+        gap: 16px;
-          --bg-tertiary: #1f2937;
+        flex-shrink: 0;
-          
-          --primary-light: hsl(247, 40%, 16%);
-          --primary-dark: hsl(247, 85%, 80%);
-          
-          --color-text-primary: #f8fafc;
-          --color-text-secondary: #94a3b8;
-          --color-text-tertiary: #64748b;
-          
-          --color-border-primary: #1e293b;
-          --color-border-secondary: #334155;
-          --color-border-tertiary: #1f2937;
-          
-          --color-a-bg: hsl(36, 45%, 11%);
-          --color-a-border: hsl(36, 40%, 19%);
-          --color-a-accent: hsl(36, 85%, 58%);
-          --color-a-dark: hsl(36, 90%, 82%);
-          
-          --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
-          --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
-          --shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.5);
       }
+
+      /* Timer Widget */
+      .timer-pill {
+        background: var(--primary-light);
+        border: 1px solid var(--color-a-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);
       }
 
       * {
@@ -96,14 +155,7 @@
         background-attachment: fixed;
       }
       
-      @media (prefers-color-scheme: dark) {
+
-        body {
-          background-image: 
-            radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.08) 0px, transparent 50%),
-            radial-gradient(at 100% 0%, hsla(162, 75%, 34%, 0.04) 0px, transparent 50%),
-            radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.04) 0px, transparent 50%);
-        }
-      }
 
       .fiche {
         max-width: 960px;
@@ -568,6 +620,19 @@
           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;
@@ -627,19 +692,7 @@
           print-color-adjust: exact;
         }
         
-        @media (prefers-color-scheme: dark) {
+        .print-btn, .timer-pill {
-          body {
-            --bg-secondary: #ffffff !important;
-            --color-text-primary: #000000 !important;
-          }
-        }
-        
-        .fiche {
-          max-width: 100% !important;
-          padding: 0 !important;
-        }
-        
-        .print-btn {
           display: none !important;
         }
         
@@ -687,14 +740,35 @@
 
       <!-- Header -->
       <div class="fiche-header">
-        <div>
+        <div class="header-left">
           <div class="fiche-kicker">Formation de formateurs IA-PRO · Classe inversée</div>
           <div class="fiche-title">Fiche de préparation<br />Posture & architecture pédagogique</div>
         </div>
+        <div class="header-right">
           <div class="fiche-badge">
             <div class="badge-top">Durée estimée</div>
             <div class="badge-bottom">~45 min</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">45: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 -->
@@ -951,6 +1025,48 @@
           localStorage.setItem('radio_fiche_conf', radio.value);
         });
       });
+
+      // Timer Logic (45 minutes)
+      let secs = 2700, 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 = 2700; 
+        document.getElementById('timer-widget').classList.remove('ticking');
+        render(); 
+      }
     </script>
   </body>
 </html>