From a4f9be81dcb916445b4ddb8f87f295554ae2d6f9 Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Thu, 4 Dec 2025 11:49:47 +0100 Subject: [PATCH] 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