feat: add interactive 45-minute preparation timer widget to fiche header
This commit is contained in:
sebvtl728
parent
5e76bf7c02
commit
30d31e3dfc
220
index.html
220
index.html
@ -46,33 +46,92 @@
|
||||
--color-a-dark: hsl(36, 95%, 22%);
|
||||
}
|
||||
|
||||
/* Dark Mode Custom Overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #090d16;
|
||||
--bg-secondary: #111827;
|
||||
--bg-tertiary: #1f2937;
|
||||
|
||||
--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);
|
||||
}
|
||||
/* 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-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;
|
||||
@ -567,6 +619,19 @@
|
||||
.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;
|
||||
@ -627,19 +692,7 @@
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--bg-secondary: #ffffff !important;
|
||||
--color-text-primary: #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fiche {
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
.print-btn, .timer-pill {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -687,13 +740,34 @@
|
||||
|
||||
<!-- 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="fiche-badge">
|
||||
<div class="badge-top">Durée estimée</div>
|
||||
<div class="badge-bottom">~45 min</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user