Add calander

frontend/src/App.css

@@ -12,10 +12,21 @@ body {
   flex-direction: column;
   align-items: center;
   padding: 2rem;
+  padding-top: 9rem;
   min-height: 100vh;
   text-align: center;
 }
 
+.top-right-container {
+  position: absolute;
+  top: 1.5rem;
+  right: 2rem;
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  z-index: 100;
+}
+
 /* 🔹 מרכז כותרת */
 .title-wrapper {
   width: 100%;

frontend/src/App.jsx

@@ -4,6 +4,7 @@ import SectionGrid from './components/SectionGrid';
 import AppModal from './components/AppModal';
 import ConfirmDialog from './components/ConfirmDialog';
 import Clock from './components/Clock';
+import Calendar from './components/Calendar';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { IoIosAdd } from 'react-icons/io';
@@ -97,7 +98,10 @@ function App() {
 
   return (
     <div className="App">
-      <Clock />
+      <div className="top-right-container">
+        <Calendar />
+        <Clock />
+      </div>
 
       {/* 🔹 לוגו וכותרת במרכז */}
       <div className="title-wrapper">

frontend/src/components/Calendar.jsx

@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react';
+import { FaChevronDown } from 'react-icons/fa';
+import '../style/Calendar.css';
+
+function Calendar() {
+  const [now, setNow] = useState(new Date());
+  const [collapsed, setCollapsed] = useState(false);
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const getDaysInMonth = (date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startingDayOfWeek = firstDay.getDay();
+
+    return { daysInMonth, startingDayOfWeek, year, month };
+  };
+
+  const { daysInMonth, startingDayOfWeek, year, month } = getDaysInMonth(currentMonth);
+
+  const days = [];
+  for (let i = 0; i < startingDayOfWeek; i++) {
+    days.push(null);
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push(i);
+  }
+
+  const isToday = (day) => {
+    return day === now.getDate() && 
+           month === now.getMonth() && 
+           year === now.getFullYear();
+  };
+
+  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'];
+
+  const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  const prevMonth = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+  };
+
+  const nextMonth = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
+  };
+
+  return (
+    <div className={`calendar-container ${collapsed ? 'collapsed' : ''}`}>
+      <div className="calendar-header" onClick={() => setCollapsed(!collapsed)}>
+        <span className={`calendar-date ${collapsed ? 'collapsed' : ''}`}>{now.toLocaleDateString('en-GB', {
+          weekday: 'short',
+          day: 'numeric',
+          month: 'short',
+          year: 'numeric'
+        })}</span>
+        <FaChevronDown className={`calendar-toggle-icon ${collapsed ? 'collapsed' : ''}`} />
+      </div>
+      
+      <div className={`calendar-body ${collapsed ? 'collapsed' : ''}`}>
+        <div className="calendar-month-nav">
+          <button onClick={prevMonth} className="calendar-nav-btn">‹</button>
+          <span className="calendar-month-year">{monthNames[month]} {year}</span>
+          <button onClick={nextMonth} className="calendar-nav-btn">›</button>
+        </div>
+        
+        <div className="calendar-grid">
+          {dayNames.map(day => (
+            <div key={day} className="calendar-day-name">{day}</div>
+          ))}
+          {days.map((day, idx) => (
+            <div
+              key={idx}
+              className={`calendar-day ${day === null ? 'empty' : ''} ${isToday(day) ? 'today' : ''}`}
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Calendar;

frontend/src/style/Calendar.css

@@ -0,0 +1,153 @@
+.calendar-container {
+  font-family: 'Rajdhani', sans-serif;
+  color: #00f0ff;
+  text-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
+  user-select: none;
+  background: rgba(0, 20, 40, 0.8);
+  border: 1px solid rgba(0, 240, 255, 0.3);
+  border-radius: 10px;
+  padding: 0.7rem;
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  width: auto;
+  position: absolute;
+  right: 200px;
+}
+
+.calendar-container.collapsed {
+  width: auto;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  backdrop-filter: none;
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding-bottom: 0.4rem;
+  min-width: 30px;
+}
+
+.calendar-date {
+  font-size: 0.85rem;
+  color: #999;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.calendar-date.collapsed {
+  width: 0;
+  opacity: 0;
+}
+
+.calendar-toggle-icon {
+  font-size: 1.4rem;
+  color: #00f0ff;
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+  transform: rotate(-90deg);
+}
+
+.calendar-toggle-icon.collapsed {
+  transform: rotate(90deg);
+}
+
+.calendar-body {
+  width: 220px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  opacity: 1;
+}
+
+.calendar-body.collapsed {
+  width: 0;
+  opacity: 0;
+}
+
+.calendar-month-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0.5rem 0;
+  padding-top: 0.4rem;
+  border-top: 1px solid rgba(0, 240, 255, 0.2);
+}
+
+.calendar-month-year {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #00f0ff;
+}
+
+.calendar-nav-btn {
+  background: transparent;
+  border: 1px solid rgba(0, 240, 255, 0.3);
+  color: #00f0ff;
+  cursor: pointer;
+  font-size: 1.2rem;
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  padding: 0;
+  line-height: 1;
+}
+
+.calendar-nav-btn:hover {
+  background: rgba(0, 240, 255, 0.1);
+  border-color: #00f0ff;
+  transform: scale(1.1);
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-top: 0.5rem;
+}
+
+.calendar-day-name {
+  text-align: center;
+  font-size: 0.65rem;
+  color: #00f0ff;
+  font-weight: 500;
+  padding: 0.2rem 0;
+  opacity: 0.7;
+}
+
+.calendar-day {
+  text-align: center;
+  padding: 0.35rem;
+  font-size: 0.75rem;
+  color: #999;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.calendar-day:not(.empty):hover {
+  background: rgba(0, 240, 255, 0.1);
+  color: #00f0ff;
+  cursor: pointer;
+}
+
+.calendar-day.today {
+  background: rgba(0, 240, 255, 0.2);
+  color: #00f0ff;
+  font-weight: bold;
+  border: 1px solid #00f0ff;
+  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
+}
+
+.calendar-day.empty {
+  visibility: hidden;
+}

frontend/src/style/Clock.css

@@ -1,7 +1,4 @@
 .clock-container {
-  position: absolute;
-  top: 1.5rem;
-  right: 2rem;
   text-align: right;
   font-family: 'Rajdhani', sans-serif;
   color: #00f0ff;
@@ -9,6 +6,8 @@
   font-size: 1rem;
   line-height: 1.2;
   user-select: none;
+  position: absolute;
+  right: 0;
 }
 
 .clock-time {