From e125215f5c39c26b30b88653c5549e3ba5d1187e Mon Sep 17 00:00:00 2001 From: ordonneau antoine Date: Thu, 20 Nov 2025 09:50:24 +0100 Subject: [PATCH] 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