autre moitiay

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;

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 (
-        <div className={styles.glassCard}>
+        <div className={styles.allContent}>
-            <div className={styles.calendarContainer}>
+            <div className={styles.glassCard}>
-                <div className={styles.calendarHeader}>
+                <div className={styles.calendarContainer}>
-                    <button onClick={handlePrevMonth}>◀</button>
+                    <div className={styles.calendarHeader}>
-                    <p>{monthNames[currentMonth]} {currentYear}</p>
+                        <button onClick={handlePrevMonth}>◀</button>
-                    <button onClick={handleNextMonth}>▶</button>
+                        <p>{monthNames[currentMonth]} {currentYear}</p>
-                </div>
+                        <button onClick={handleNextMonth}>▶</button>
-
-                <table className={styles.calendar}>
-                    <thead>
-                    <tr>
-                        <th>Lun</th>
-                        <th>Mar</th>
-                        <th>Mer</th>
-                        <th>Jeu</th>
-                        <th>Ven</th>
-                        <th>Sam</th>
-                        <th>Dim</th>
-                    </tr>
-                    </thead>
-
-                    <tbody>
-                    {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => (
-                        <tr key={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 (
-                                    <td
-                                        key={index}
-                                        className={[
-                                            day === today.getDate() &&
-                                            currentMonth === today.getMonth() &&
-                                            currentYear === today.getFullYear()
-                                                ? styles.today : "",
-                                            hasEvent ? styles.hasEvent : "",
-                                            selectedDay?.date === key ? styles.selected : ""
-                                        ].join(" ")}
-                                        onClick={() => handleDayClick(day)}
-                                    >
-                                        {day || ""}
-                                    </td>
-                                );
-                            })}
-                        </tr>
-                    ))}
-                    </tbody>
-                </table>
-
-                {selectedDay && (
-                    <div className={styles.eventBox}>
-                        <h3>Événements du {selectedDay.date}</h3>
-
-                        {selectedDay.events.length > 0 ? (
-                            <ul>
-                                {selectedDay.events.map((ev, i) => (
-                                    <li key={i}>{ev}</li>
-                                ))}
-                            </ul>
-                        ) : (
-                            <p>Aucun événement ce jour-là.</p>
-                        )}
                     </div>
-                )}
+
+                    <table className={styles.calendar}>
+                        <thead>
+                        <tr>
+                            <th>Lun</th>
+                            <th>Mar</th>
+                            <th>Mer</th>
+                            <th>Jeu</th>
+                            <th>Ven</th>
+                            <th>Sam</th>
+                            <th>Dim</th>
+                        </tr>
+                        </thead>
+
+                        <tbody>
+                        {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => (
+                            <tr key={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 (
+                                        <td
+                                            key={index}
+                                            className={[
+                                                day === today.getDate() &&
+                                                currentMonth === today.getMonth() &&
+                                                currentYear === today.getFullYear()
+                                                    ? styles.today : "",
+                                                hasEvent ? styles.hasEvent : "",
+                                                selectedDay?.date === key ? styles.selected : ""
+                                            ].join(" ")}
+                                            onClick={() => handleDayClick(day)}
+                                        >
+                                            {day || ""}
+                                        </td>
+                                    );
+                                })}
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+
+                    {selectedDay && (
+                        <div className={styles.eventBox}>
+                            <h3>Événements du {formatDate(selectedDay.date)}</h3>
+
+                            {selectedDay.events.length > 0 ? (
+                                <ul>
+                                    {selectedDay.events.map((ev, i) => (
+                                        <li key={i}>{ev}</li>
+                                    ))}
+                                </ul>
+                            ) : (
+                                <p>Aucun événement ce jour-là.</p>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className={styles.glassCard}>
+                <div className={styles.eventListContainer}>
+                    <h2>Liste des Événements à Venir</h2>
+                    {sortedEvents.length > 0 ? (
+                        <ul className={styles.eventList}>
+                            {sortedEvents.map((eventGroup) => (
+                                <li key={eventGroup.date} className={styles.eventGroup}>
+                                    <div className={styles.eventDate}>
+                                        <strong>{formatDate(eventGroup.date)}</strong>
+                                    </div>
+                                    <ul className={styles.eventDetails}>
+                                        {eventGroup.events.map((event, i) => (
+                                            <li key={i}>- {event}</li>
+                                        ))}
+                                    </ul>
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <p>Aucun événement planifié pour l'instant.</p>
+                    )}
+                </div>
             </div>
         </div>
     );

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:
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
-            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.5),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
-            inset 0 -1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
-            inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
-    position: relative;
     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;
+    }
 }