From e125215f5c39c26b30b88653c5549e3ba5d1187e Mon Sep 17 00:00:00 2001 From: ordonneau antoine Date: Thu, 20 Nov 2025 09:50:24 +0100 Subject: [PATCH 1/4] premier commit !!!! --- src/pages/Home/HomePage.jsx | 121 ++++++++++++++++++++++++++++- src/pages/Home/HomePage.module.css | 120 +++++++++++++++++++++++++++- 2 files changed, 235 insertions(+), 6 deletions(-) diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx index fc12601..13b06b7 100644 --- a/src/pages/Home/HomePage.jsx +++ b/src/pages/Home/HomePage.jsx @@ -1,11 +1,124 @@ +import { useState } from "react"; +import styles from "./HomePage.module.css"; -function HomePage(){ +function HomePage() { + const today = new Date(); + const [currentMonth, setCurrentMonth] = useState(today.getMonth()); + const [currentYear, setCurrentYear] = useState(today.getFullYear()); + const [selectedDay, setSelectedDay] = useState(null); + + // Exemple d'événements : tu pourras ensuite les charger d'une base de données ou d'un fichier JSON + const events = { + "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"], + "2025-11-10": ["Cours de React", "Rendez-vous médecin"], + "2025-11-14": ["Sortie cinéma"], + }; + + const monthNames = [ + "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", + "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" + ]; + + // Calcul des jours + const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); + const firstDay = new Date(currentYear, currentMonth, 1).getDay(); + const startDay = (firstDay + 6) % 7; + + const days = []; + for (let i = 0; i < startDay; i++) days.push(null); + for (let i = 1; i <= daysInMonth; i++) days.push(i); + + const handlePrevMonth = () => { + if (currentMonth === 0) { + setCurrentMonth(11); + setCurrentYear(currentYear - 1); + } else { + setCurrentMonth(currentMonth - 1); + } + setSelectedDay(null); + }; + + const handleNextMonth = () => { + if (currentMonth === 11) { + setCurrentMonth(0); + setCurrentYear(currentYear + 1); + } else { + setCurrentMonth(currentMonth + 1); + } + setSelectedDay(null); + }; + + const handleDayClick = (day) => { + if (!day) return; + const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; + setSelectedDay({ date: key, events: events[key] || [] }); + }; return ( -
+
+
+
+ +

{monthNames[currentMonth]} {currentYear}

+ +
+ + + + + + + + + + + + + + + {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => ( + + {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => { + const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; + const hasEvent = events[key]; + return ( + + ); + })} + + ))} + +
LunMarMerJeuVenSamDim
handleDayClick(day)} + > + {day || ""} +
+ + {/* Box d’événements */} + {selectedDay && ( +
+

Événements du {selectedDay.date}

+ {selectedDay.events.length > 0 ? ( +
    + {selectedDay.events.map((ev, i) => ( +
  • {ev}
    • + ))} +
+ ) : ( +

Aucun événement ce jour-là.

+ )} +
+ )} +
- ) + ); } -export default HomePage; \ No newline at end of file +export default HomePage; diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css index e83a063..69586fb 100644 --- a/src/pages/Home/HomePage.module.css +++ b/src/pages/Home/HomePage.module.css @@ -1,3 +1,119 @@ -.title { - color: red; +.calendarcontainer { + width: 50%; + padding: 20px; + font-family: Arial, sans-serif; + text-align: center; + justify-content: center; +} + +.calendarheader { + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; +} + +.glass{ + background: rgba(255, 255, 255, 0.075); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(10px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); + transition: transform 0.5s ease; +} + +.calendarheader p{ + width: auto; + text-align: center; + font-weight: bold; + font-size: 40px; +} + +.calendarheader button { + width: 40px; + height: 40px; + font-size: 15px; + color: #019AFF; + border: none; + border-radius: 50%; + cursor: pointer; + background-color: transparent; +} + +.glass{ + width:50px; + height:50px; + border-radius:50%; + background:rgba(255,255,255,.08); + box-shadow:0 0 0 2px rgba(255,255,255,.6),0 16px 32px rgba(0,0,0,.12); + place-items:center; + cursor:pointer; + outline:0; +} + +.calendar { + border-collapse: collapse; + width: 80%; + max-width: 500px; +} + +.calendar th, .calendar td { + border: 1px solid #ddd; + padding: 10px; + width: 14.2%; + text-align: center; + cursor: pointer; +} + +.calendar th { + background-color: #f2f2f2; +} + +.today { + background-color: #007bff; + color: white; + border-radius: 50%; +} + +.hasevent { + background-color: #e7f3ff; + font-weight: bold; +} + +.selected { + outline: 3px solid #007bff; +} + +.eventbox { + background-color: #f9f9f9; + border-radius: 10px; + padding: 15px; + margin-top: 20px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 500px; + text-align: left; +} + +.eventbox ul { + list-style-type: disc; + margin-left: 20px; +} + +.glassCard { + width: 100%; + padding: 10px 20px 10px 20px; + height: fit-content; + background: rgba(255, 255, 255, 0.65); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.5), + inset 0 -1px 0 rgba(255, 255, 255, 0.1), + inset 0 0 8px 4px rgba(255, 255, 255, 0.4); + position: relative; + overflow: hidden; } \ No newline at end of file From 7f4a74446e511cb3b8e48bea6ebbad5ee20fb3e1 Mon Sep 17 00:00:00 2001 From: ordonneau antoine Date: Mon, 24 Nov 2025 14:28:00 +0100 Subject: [PATCH 2/4] =?UTF-8?q?manque=20la=20deuxi=C3=A8me=20moiti=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/HomePage.jsx | 84 ++++++++++++-------- src/pages/Home/HomePage.module.css | 123 ++++++++++++++++------------- 2 files changed, 122 insertions(+), 85 deletions(-) diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx index 13b06b7..0035c76 100644 --- a/src/pages/Home/HomePage.jsx +++ b/src/pages/Home/HomePage.jsx @@ -1,14 +1,7 @@ import { useState } from "react"; import styles from "./HomePage.module.css"; - function HomePage() { - const today = new Date(); - const [currentMonth, setCurrentMonth] = useState(today.getMonth()); - const [currentYear, setCurrentYear] = useState(today.getFullYear()); - const [selectedDay, setSelectedDay] = useState(null); - - // Exemple d'événements : tu pourras ensuite les charger d'une base de données ou d'un fichier JSON const events = { "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"], "2025-11-10": ["Cours de React", "Rendez-vous médecin"], @@ -20,7 +13,17 @@ function HomePage() { "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]; - // Calcul des jours + const today = new Date(); + const [currentMonth, setCurrentMonth] = useState(today.getMonth()); + const [currentYear, setCurrentYear] = useState(today.getFullYear()); + const [selectedDay, setSelectedDay] = useState(() => { + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, "0"); + const day = String(today.getDate()).padStart(2, "0"); + const key = `${year}-${month}-${day}`; + return { date: key, events: events[key] || [] }; + }); + const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); const firstDay = new Date(currentYear, currentMonth, 1).getDay(); const startDay = (firstDay + 6) % 7; @@ -30,23 +33,35 @@ function HomePage() { for (let i = 1; i <= daysInMonth; i++) days.push(i); const handlePrevMonth = () => { - if (currentMonth === 0) { - setCurrentMonth(11); - setCurrentYear(currentYear - 1); - } else { - setCurrentMonth(currentMonth - 1); + let newMonth = currentMonth - 1; + let newYear = currentYear; + + if (newMonth < 0) { + newMonth = 11; + newYear--; } - setSelectedDay(null); + + setCurrentMonth(newMonth); + setCurrentYear(newYear); + + const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`; + setSelectedDay({ date: key, events: events[key] || [] }); }; const handleNextMonth = () => { - if (currentMonth === 11) { - setCurrentMonth(0); - setCurrentYear(currentYear + 1); - } else { - setCurrentMonth(currentMonth + 1); + let newMonth = currentMonth + 1; + let newYear = currentYear; + + if (newMonth > 11) { + newMonth = 0; + newYear++; } - setSelectedDay(null); + + setCurrentMonth(newMonth); + setCurrentYear(newYear); + + const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`; + setSelectedDay({ date: key, events: events[key] || [] }); }; const handleDayClick = (day) => { @@ -57,12 +72,12 @@ function HomePage() { return (
-
-
- -

{monthNames[currentMonth]} {currentYear}

- -
+
+
+ +

{monthNames[currentMonth]} {currentYear}

+ +
@@ -76,19 +91,24 @@ function HomePage() { + {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => ( {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => { const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; const hasEvent = events[key]; + return (
Dim
handleDayClick(day)} > @@ -101,10 +121,10 @@ function HomePage() {
- {/* Box d’événements */} {selectedDay && ( -
+

Événements du {selectedDay.date}

+ {selectedDay.events.length > 0 ? (
    {selectedDay.events.map((ev, i) => ( @@ -121,4 +141,4 @@ function HomePage() { ); } -export default HomePage; +export default HomePage; \ No newline at end of file diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css index 69586fb..da80286 100644 --- a/src/pages/Home/HomePage.module.css +++ b/src/pages/Home/HomePage.module.css @@ -1,54 +1,41 @@ -.calendarcontainer { - width: 50%; +.calendarContainer { padding: 20px; font-family: Arial, sans-serif; - text-align: center; - justify-content: center; + display: flex; + flex-direction: column; + align-items: center; } -.calendarheader { +.calendarHeader { display: flex; + width: 100%; flex-direction: row; + justify-content: space-between; align-items: center; gap: 10px; } -.glass{ - background: rgba(255, 255, 255, 0.075); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); - transition: transform 0.5s ease; -} - -.calendarheader p{ +.calendarHeader p { width: auto; text-align: center; font-weight: bold; font-size: 40px; } -.calendarheader button { +.calendarHeader button { + top: 50%; + left: 50%; width: 40px; height: 40px; + border-radius: 50%; + border: none; + background: transparent; + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1); font-size: 15px; color: #019AFF; - border: none; - border-radius: 50%; cursor: pointer; - background-color: transparent; -} - -.glass{ - width:50px; - height:50px; - border-radius:50%; - background:rgba(255,255,255,.08); - box-shadow:0 0 0 2px rgba(255,255,255,.6),0 16px 32px rgba(0,0,0,.12); - place-items:center; - cursor:pointer; - outline:0; } .calendar { @@ -58,50 +45,80 @@ } .calendar th, .calendar td { - border: 1px solid #ddd; + border: none; padding: 10px; width: 14.2%; + line-height: 130%; text-align: center; cursor: pointer; } -.calendar th { - background-color: #f2f2f2; -} - .today { - background-color: #007bff; - color: white; - border-radius: 50%; + color: #007bff; } -.hasevent { - background-color: #e7f3ff; - font-weight: bold; +.hasEvent { + position: relative; +} + +.hasEvent::before { + content: ""; + position: absolute; + left: 50%; + bottom: 10px; + width: 20px; + height: 2px; + background-color: #007bff; + transform: translateX(-50%); + border-radius: 10px; +} + +.hasEvent.selected::before { + width: 25px; + height: 2px; + bottom: 10px; } .selected { - outline: 3px solid #007bff; + position: relative; + font-size: 18px; + font-weight: 600; } -.eventbox { - background-color: #f9f9f9; - border-radius: 10px; +.selected::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 40px; + height: 40px; + transform: translate(-50%, -50%); + border-radius: 38%; + pointer-events: none; + background: transparent; + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1); +} + +.eventBox { + border-radius: 20px; padding: 15px; - margin-top: 20px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); - width: 80%; - max-width: 500px; - text-align: left; + margin-top: 16px; + border: none; + background: rgb(255, 255, 255, 0.25); + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1); } -.eventbox ul { +.eventBox ul { list-style-type: disc; - margin-left: 20px; } .glassCard { - width: 100%; + width: 45%; + margin: 16px; padding: 10px 20px 10px 20px; height: fit-content; background: rgba(255, 255, 255, 0.65); From a4f9be81dcb916445b4ddb8f87f295554ae2d6f9 Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Thu, 4 Dec 2025 11:49:47 +0100 Subject: [PATCH 3/4] autre moitiay --- src/index.css | 13 +++ src/pages/Home/HomePage.jsx | 165 ++++++++++++++++++----------- src/pages/Home/HomePage.module.css | 49 +++++++-- 3 files changed, 154 insertions(+), 73 deletions(-) diff --git a/src/index.css b/src/index.css index 1d2d1c2..dc9cfef 100644 --- a/src/index.css +++ b/src/index.css @@ -61,6 +61,19 @@ body { overflow: hidden; } +.glassBorder{ + border-radius: 20px; + padding: 15px; + margin-top: 16px; + border: none; + background: rgb(255, 255, 255, 0.25); + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); +} + h1 { font-size: 3.2em; line-height: 1.1; diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx index 0035c76..ae603b2 100644 --- a/src/pages/Home/HomePage.jsx +++ b/src/pages/Home/HomePage.jsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import { useMemo } from "react"; import styles from "./HomePage.module.css"; function HomePage() { @@ -70,72 +71,108 @@ function HomePage() { setSelectedDay({ date: key, events: events[key] || [] }); }; + const sortedEvents = useMemo(() => { + return Object.entries(events) + .map(([dateKey, eventList]) => ({ date: dateKey, events: eventList })) + .sort((a, b) => new Date(a.date) - new Date(b.date)); + }, [events]); + + const formatDate = (dateString) => { + const [year, month, day] = dateString.split('-'); + return `${day} ${monthNames[parseInt(month) - 1]} ${year}`; + }; + return ( -
    -
    -
    - -

    {monthNames[currentMonth]} {currentYear}

    - -
    - - - - - - - - - - - - - - - - {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => ( - - {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => { - const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; - const hasEvent = events[key]; - - return ( - - ); - })} - - ))} - -
    LunMarMerJeuVenSamDim
    handleDayClick(day)} - > - {day || ""} -
    - - {selectedDay && ( -
    -

    Événements du {selectedDay.date}

    - - {selectedDay.events.length > 0 ? ( -
      - {selectedDay.events.map((ev, i) => ( -
    • {ev}
      • - ))} -
    - ) : ( -

    Aucun événement ce jour-là.

    - )} +
    +
    +
    +
    + +

    {monthNames[currentMonth]} {currentYear}

    +
    - )} + + + + + + + + + + + + + + + + {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => ( + + {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => { + const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; + const hasEvent = events[key]; + + return ( + + ); + })} + + ))} + +
    LunMarMerJeuVenSamDim
    handleDayClick(day)} + > + {day || ""} +
    + + {selectedDay && ( +
    +

    Événements du {formatDate(selectedDay.date)}

    + + {selectedDay.events.length > 0 ? ( +
      + {selectedDay.events.map((ev, i) => ( +
    • {ev}
      • + ))} +
    + ) : ( +

    Aucun événement ce jour-là.

    + )} +
    + )} +
    +
    +
    +
    +

    Liste des Événements à Venir

    + {sortedEvents.length > 0 ? ( +
      + {sortedEvents.map((eventGroup) => ( +
    • +
      + {formatDate(eventGroup.date)} +
      +
        + {eventGroup.events.map((event, i) => ( +
      • - {event}
        • + ))} +
      +
      • + ))} +
    + ) : ( +

    Aucun événement planifié pour l'instant.

    + )} +
    ); diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css index da80286..a0f3426 100644 --- a/src/pages/Home/HomePage.module.css +++ b/src/pages/Home/HomePage.module.css @@ -32,7 +32,9 @@ background: transparent; box-shadow: inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1); + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); font-size: 15px; color: #019AFF; cursor: pointer; @@ -98,7 +100,9 @@ background: transparent; box-shadow: inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1); + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } .eventBox { @@ -109,13 +113,28 @@ background: rgb(255, 255, 255, 0.25); box-shadow: inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1); + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } .eventBox ul { list-style-type: disc; } +.eventGroup{ + border-radius: 20px; + padding: 15px; + margin-top: 16px; + border: none; + background: rgb(255, 255, 255, 0.25); + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); +} + .glassCard { width: 45%; margin: 16px; @@ -126,11 +145,23 @@ -webkit-backdrop-filter: blur(3px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(255, 255, 255, 0.1), - inset 0 0 8px 4px rgba(255, 255, 255, 0.4); - position: relative; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.5), + inset 0 -1px 0 rgba(255, 255, 255, 0.1), + inset 0 0 8px 4px rgba(255, 255, 255, 0.4); overflow: hidden; +} +.allContent{ + display: flex; + flex-direction: row; +} + +@media (max-width: 768px) { + .glassCard { + width: 100%; + margin: 0px; + margin-top: 16px; + margin-bottom: 16px; + display: flex; + } } \ No newline at end of file From 2021220cfeb0597958b3720aa8c4e37d845b9072 Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Tue, 9 Dec 2025 12:04:11 +0100 Subject: [PATCH 4/4] fin de la page --- src/pages/Home/HomePage.module.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css index a0f3426..7d6a67a 100644 --- a/src/pages/Home/HomePage.module.css +++ b/src/pages/Home/HomePage.module.css @@ -164,4 +164,10 @@ margin-bottom: 16px; display: flex; } + + + .allContent{ + display: flex; + flex-direction: column; + } } \ No newline at end of file