diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..6eab59e --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,175 @@ +/* === RESET SIMPLE === */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + sans-serif; + background: #f5f5f5; + color: #222; +} + +/* === LAYOUT GLOBAL === */ +.pf-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 16px; +} + +.pf-header { + background: #243b53; + color: #fff; + padding: 8px 0; +} + +.pf-header-content { + display: flex; + align-items: center; + justify-content: space-between; +} + +.pf-logo { + font-weight: 600; + font-size: 18px; +} + +.pf-nav { + display: flex; + gap: 16px; +} + +.pf-nav-link { + color: #d9e2ec; + text-decoration: none; + font-size: 14px; + padding: 4px 8px; + border-radius: 4px; +} + +.pf-nav-link:hover { + background: rgba(255, 255, 255, 0.1); +} + +.pf-nav-link--active { + background: #102a43; + color: #f0f4f8; +} + +.pf-main { + padding: 24px 0 48px; +} + +.pf-section { + margin-top: 24px; +} + +.pf-section--panel { + background: #fff; + border-radius: 8px; + padding: 16px 16px 20px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); +} + +.pf-footer { + border-top: 1px solid #d9e2ec; + padding: 8px 0; + font-size: 12px; + color: #627d98; + background: #f0f4f8; +} + +/* === CARDS & FLEX === */ +.pf-flex { + display: flex; +} + +.pf-flex--wrap { + flex-wrap: wrap; +} + +.pf-gap-lg { + gap: 24px; +} + +.pf-card { + background: #f8fafc; + border-radius: 8px; + border: 1px solid #d9e2ec; + padding: 12px 14px; +} + +.pf-card--small { + min-width: 240px; + max-width: 260px; +} + +.pf-card-title { + margin: 0 0 8px; + font-size: 15px; +} + +.pf-card-body { + font-size: 13px; +} + +label { + font-size: 12px; +} + +/* === TABLES === */ +.pf-table-wrapper { + max-height: 600px; + overflow: auto; + border-radius: 8px; + background: #fff; + border: 1px solid #d9e2ec; +} + +.pf-table { + width: 100%; + border-collapse: collapse; + font-size: 12px; +} + +.pf-table th, +.pf-table td { + border: 1px solid #d9e2ec; + padding: 4px 6px; + text-align: center; +} + +.pf-table thead th { + position: sticky; + top: 0; + background: #f0f4f8; + z-index: 1; +} + +.pf-table--compact th, +.pf-table--compact td { + padding: 3px 4px; +} + +/* === INPUTS === */ +input[type="number"] { + width: 3.1rem; + font-size: 11px; + padding: 2px 3px; +} + +/* === COLOR CODING POUR LE FAMILY CALENDAR === */ +.fc-row--carole-off { + background: #ffe0e0; +} + +.fc-row--school-holiday { + background: #fff5cc; +} + +.fc-row--bank-holiday { + background: #d9f7be; +} diff --git a/assets/js/family-calendar.js b/assets/js/family-calendar.js new file mode 100644 index 0000000..41d5498 --- /dev/null +++ b/assets/js/family-calendar.js @@ -0,0 +1,214 @@ +// assets/js/family-calendar.js + +const weeks = [ + { + month: "September", + code: "W36", + dates: "01/09 – 07/09", + caroleOffDays: 0, + isSchoolHoliday: false, + isBankHoliday: false, + alex: { cp: 0, rtt: 0, ja: 0 }, + laia: { cp: 0, rtt: 0, ja: 0 }, + }, + { + month: "September", + code: "W38", + dates: "15/09 – 21/09", + caroleOffDays: 2, + isSchoolHoliday: false, + isBankHoliday: false, + alex: { cp: 0, rtt: 0, ja: 0 }, + laia: { cp: 0, rtt: 0, ja: 0 }, + }, + { + month: "October", + code: "W40", + dates: "29/09 – 05/10", + caroleOffDays: 0, + isSchoolHoliday: false, + isBankHoliday: false, + alex: { cp: 0, rtt: 0, ja: 0 }, + laia: { cp: 0, rtt: 0, ja: 0 }, + }, + { + month: "August", + code: "W32", + dates: "03/08 – 09/08", + caroleOffDays: 5, + isSchoolHoliday: true, + isBankHoliday: false, + alex: { cp: 0, rtt: 0, ja: 0 }, + laia: { cp: 0, rtt: 0, ja: 0 }, + }, + // TODO: compléter le reste des semaines W36 → W35 +]; + +function renderTable() { + const planningBody = document.getElementById("planningBody"); + if (!planningBody) return; + + planningBody.innerHTML = ""; + + const showOnlyCaroleOff = + document.getElementById("showOnlyCaroleOff")?.checked; + const showOnlySchoolHoliday = document.getElementById( + "showOnlySchoolHoliday" + )?.checked; + + weeks.forEach((week, index) => { + if (showOnlyCaroleOff && week.caroleOffDays === 0) return; + if (showOnlySchoolHoliday && !week.isSchoolHoliday) return; + + const tr = document.createElement("tr"); + + if (week.caroleOffDays > 0) tr.classList.add("fc-row--carole-off"); + if (week.isSchoolHoliday) tr.classList.add("fc-row--school-holiday"); + if (week.isBankHoliday) tr.classList.add("fc-row--bank-holiday"); + + tr.innerHTML = ` + ${week.month} + ${week.code} + ${week.dates} + ${week.caroleOffDays || ""} + ${week.isSchoolHoliday ? "Oui" : ""} + ${week.isBankHoliday ? "Oui" : ""} + + + + + + + `; + + planningBody.appendChild(tr); + }); + + attachInputListeners(); + updateSummary(); +} + +function attachInputListeners() { + const planningBody = document.getElementById("planningBody"); + if (!planningBody) return; + + planningBody.querySelectorAll("input[type='number']").forEach((input) => { + input.addEventListener("change", (e) => { + const w = parseInt(e.target.dataset.week, 10); + const person = e.target.dataset.person; + const type = e.target.dataset.type; + const value = parseFloat(e.target.value || "0"); + weeks[w][person][type] = value; + updateSummary(); + }); + }); +} + +function updateSummary() { + const summaryDiv = document.getElementById("summaryText"); + if (!summaryDiv) return; + + const alexCpInit = parseFloat( + document.getElementById("alexCpInit")?.value || "0" + ); + const alexRttInit = parseFloat( + document.getElementById("alexRttInit")?.value || "0" + ); + const alexJaInit = parseFloat( + document.getElementById("alexJaInit")?.value || "0" + ); + + const laiaCpInit = parseFloat( + document.getElementById("laiaCpInit")?.value || "0" + ); + const laiaRttInit = parseFloat( + document.getElementById("laiaRttInit")?.value || "0" + ); + const laiaJaInit = parseFloat( + document.getElementById("laiaJaInit")?.value || "0" + ); + + let alexCpUsed = 0, + alexRttUsed = 0, + alexJaUsed = 0; + let laiaCpUsed = 0, + laiaRttUsed = 0, + laiaJaUsed = 0; + + weeks.forEach((week) => { + alexCpUsed += week.alex.cp; + alexRttUsed += week.alex.rtt; + alexJaUsed += week.alex.ja; + + laiaCpUsed += week.laia.cp; + laiaRttUsed += week.laia.rtt; + laiaJaUsed += week.laia.ja; + }); + + const alexCpLeft = alexCpInit - alexCpUsed; + const alexRttLeft = alexRttInit - alexRttUsed; + const alexJaLeft = alexJaInit - alexJaUsed; + + const laiaCpLeft = laiaCpInit - laiaCpUsed; + const laiaRttLeft = laiaRttInit - laiaRttUsed; + const laiaJaLeft = laiaJaInit - laiaJaUsed; + + summaryDiv.innerHTML = ` +

Alex
+ CP utilisés : ${alexCpUsed.toFixed(2)} / ${alexCpInit.toFixed( + 2 + )} (reste ${alexCpLeft.toFixed(2)})
+ RTT utilisés : ${alexRttUsed.toFixed(2)} / ${alexRttInit.toFixed( + 2 + )} (reste ${alexRttLeft.toFixed(2)})
+ JA utilisés : ${alexJaUsed.toFixed(2)} / ${alexJaInit.toFixed( + 2 + )} (reste ${alexJaLeft.toFixed(2)})

+ +

Laia
+ CP utilisés : ${laiaCpUsed.toFixed(2)} / ${laiaCpInit.toFixed( + 2 + )} (reste ${laiaCpLeft.toFixed(2)})
+ RTT utilisés : ${laiaRttUsed.toFixed(2)} / ${laiaRttInit.toFixed( + 2 + )} (reste ${laiaRttLeft.toFixed(2)})
+ JA utilisés : ${laiaJaUsed.toFixed(2)} / ${laiaJaInit.toFixed(2)})

+ `; +} + +function initFamilyCalendar() { + if (!document.getElementById("planningBody")) return; + + [ + "alexCpInit", + "alexRttInit", + "alexJaInit", + "laiaCpInit", + "laiaRttInit", + "laiaJaInit", + ].forEach((id) => { + const el = document.getElementById(id); + if (el) el.addEventListener("change", updateSummary); + }); + + ["showOnlyCaroleOff", "showOnlySchoolHoliday"].forEach((id) => { + const el = document.getElementById(id); + if (el) el.addEventListener("change", renderTable); + }); + + renderTable(); +} + +document.addEventListener("DOMContentLoaded", initFamilyCalendar); diff --git a/family-calendar.php b/family-calendar.php new file mode 100644 index 0000000..e65ab02 --- /dev/null +++ b/family-calendar.php @@ -0,0 +1,94 @@ + + +

Family Calendar

+

Planning annuel de septembre à août – Carole (assistante maternelle), Alex & Laia (CP / RTT / JA).

+ +
+
+
+

Soldes initiaux

+
+

Alex

+
+
+ + +

Laia

+
+
+ +
+
+ +
+

Filtres

+
+
+ +
+
+ +
+

Résumé

+
+ +
+
+
+
+ +
+

Planning par semaine

+
+ + + + + + + + + + + + + + + + + + + + + + +
MoisSemaineDates (lun–dim)# Off CaroleVacances scolairesBank holidayAlex – jours posés (semaine)Laia – jours posés (semaine)
CPRTTJACPRTTJA
+
+
+ + + + + + + + diff --git a/header.php b/header.php new file mode 100644 index 0000000..9583f1c --- /dev/null +++ b/header.php @@ -0,0 +1,31 @@ + + + + + + <?= htmlspecialchars($pageTitle) ?> + + + +
+
+ + +
+
+ +
diff --git a/index.html b/index.html index 802992c..b3f5994 100644 --- a/index.html +++ b/index.html @@ -1 +1,19 @@ -Hello world + + +

Bienvenue sur PachaFamily

+

Centre de contrôle de l’organisation familiale.

+ +
+

Modules

+ +
+ +