Merge branch 'backend' of github.com:tomaseuu/project-pomodoro into b…

…ackend
tomaseuu · Nov 19, 2024 · e70576f · e70576f
2 parents dc8c063 + 764350f
commit e70576f
Show file tree

Hide file tree

Showing 3 changed files with 226 additions and 9 deletions.
diff --git a/packages/frontend/calendar.html b/packages/frontend/calendar.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>FocusFruitCalendar</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="index.css" />
+</head>
+<body class="calendar-page">
+    <nav class="navbar">
+        <a href="index.html" class="logo-link">
+            <div class="logo-container">
+                <img src="focus-fruit-logo.png" alt="Focus-Fruit Logo" class="logo-image" />
+                <span class="logo-text">FocusFruit</span>
+            </div>
+        </a>
+        <ul class="nav-list">
+            <li><a href="pomodoro.html">Home</a></li>
+            <li><a href="calendar.html">Calendar</a></li>
+            <li><a href="profile.html"><img src="user-logo.png" alt="Profile" class="profile-icon"></a></li>
+        </ul>
+    </nav>
+
+    <main class="main-content">
+        <div class="calendar-container">
+            <div class="calendar-header">
+                <button id="prevMonth" class="nav-button">&lt;</button>
+                <h2 id="monthYear" class="month-header"></h2>
+                <button id="nextMonth" class="nav-button">&gt;</button>
+            </div>
+            <div id="calendar" class="calendar-grid"></div>
+        </div>
+    </main>
+
+<script>
+
+    let currentMonth = new Date().getMonth();
+    let currentYear = new Date().getFullYear();
+
+    function renderCalendar(month, year) {
+
+        const calendar = document.getElementById('calendar');
+        const monthYearHeader = document.getElementById('monthYear');
+
+        calendar.innerHTML = '';
+
+        const monthName = new Date(year, month).toLocaleString('default', {month: 'long'});
+        monthYearHeader.textContent = `${monthName} ${year}`;
+
+        const firstDays = new Date(year, month, 1).getDay();
+        const totalDays = new Date(year, month + 1, 0).getDate();
+
+        //days before first day (empty)
+        for (let i = 0 ; i < firstDays ; i++) {
+            const emptyCell = document.createElement('div');
+            emptyCell.classList.add('empty');
+            calendar.appendChild(emptyCell);
+        }
+
+        //add days of month
+        for (let day = 1 ; day <= totalDays ; day++) {
+            const dayDiv =  document.createElement('div');
+            dayDiv.textContent = day;
+
+            //todays date
+            const today = new Date();
+            if (
+                day === today.getDate() &&
+                month === today.getMonth() &&
+                year === today.getFullYear()
+            ) {
+                dayDiv.classList.add('current-date');
+            }
+
+            calendar.appendChild(dayDiv);
+        }
+    }
+
+    //left nav button
+    document.getElementById('prevMonth').addEventListener('click', () => {
+        currentMonth--;
+        if (currentMonth < 0) {
+            currentMonth = 11;
+            currentYear--;
+        }
+        renderCalendar(currentMonth, currentYear);
+    })
+
+    //right nav button
+    document.getElementById('nextMonth').addEventListener('click', () => {
+        currentMonth++;
+        if (currentMonth > 11) {
+            currentMonth = 0;
+            currentYear++;
+        }
+        renderCalendar(currentMonth, currentYear);
+    });
+
+    renderCalendar(currentMonth, currentYear);
+
+
+</script>
+
+</body>
+</html>
diff --git a/packages/frontend/index.css b/packages/frontend/index.css
@@ -79,6 +79,7 @@ body {
   border: 2px solid var(--cg-orange);
   border-radius: 0px;
   background-color: #ffc857;
+  margin-left: 30px;
 }
 
 .logo-image {
@@ -422,9 +423,11 @@ button.send-button:hover {
   background-color: #50a8c2;
   width: 500px;
   height: 630px;
-  align-items: center;
+  align-items: left;
   border-radius: 20px;
-  text-align: center;
+  text-align: left;
+  overflow-y: auto;
+  overflow-x: auto;
 }
 
 .todolist-header {
@@ -438,13 +441,19 @@ button.send-button:hover {
   color:#ffc857;
 }
 
+.add-task-container {
+  display: sticky;
+  text-align: center;
+}
+
 .add-task-container input {
   height: 10px;
   width: 120px;
   background-color: #fff;
   border: none;
 }
 
+
 .add-task-container button {
   height: 30px;
   width: 40px;
@@ -464,10 +473,6 @@ button.send-button:hover {
   display: flex;
   flex-direction: row;
   gap: 10px;
-}
-
-.todo-item {
-  display: flex;
   align-items: left;
   font-size: 20px;
   color: #ffff;
@@ -495,4 +500,87 @@ button.send-button:hover {
 .profile-icon {
   width: 50px;
   height: 50px;
-}
+}
+
+.timer-dropdown {
+  width: 300px;
+  height: 50px;
+  background-color: #ffc857;
+  color: #db7347;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  border-radius: 5px;
+  border: none;
+}
+
+.calendar-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background-color: #ffc857;
+  border-radius: 15px;
+  padding: 20px;
+  width: 1100px;
+  height: 800px;
+}
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #50a8c2;
+  width: 100%;
+  color: #ffff;
+  position: relative;
+  border-radius: 15px;
+  font-size: 20px;
+  margin-bottom: 50px;
+}
+
+.nav-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 50px;
+  color: #ffff;
+}
+
+.nav-button:hover {
+  color: #255f85;
+}
+
+.calendar-grid {
+  display: grid;
+  margin-left: 30px;
+  grid-template-columns: repeat(7, 1fr); 
+  gap: 50px; 
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+  color: #fff;
+  font-size: 30px;
+}
+
+.calendar-grid div {
+  display: flex;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #50a8c2;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease
+}
+
+.calendar-grid div:hover {
+  background-color: #255f85;
+}
+
+.calendar-grid .current-date {
+  background-color: #db7347;
+}
+
+.calendar-grid .empty:hover {
+  background-color: #50a8c2; 
+}
diff --git a/packages/frontend/pomodoro.html b/packages/frontend/pomodoro.html
@@ -30,10 +30,16 @@ <h2 class="todolist-header">To-Do List</h2>
             </div>
             <ul id="taskList" class="todo-items"></ul>
         </div>
-
         <div class="timer-guide-column">
             <div class="timer-container">
-                <h3 class="timer-header">Timer</h3>
+                <form>
+                    <select id="timerOptions" class="timer-dropdown" onchange="changeTimer(this.value)">
+                        <option value="25">Pomodoro</option>
+                        <option value="5">Short Break</option>
+                        <option value="30">Long Break</option>
+                        <option value="custom">Custom</option>
+                    </select>
+                </form>
                 <div id="timerDisplay" class="timer-display">25:00</div>
                 <div class="timer-controls">
                     <button onclick="startTimer()">Start</button>
@@ -92,6 +98,23 @@ <h3 class="guide-header">Pomodoro Guide</h3>
       document.getElementById("timerDisplay").textContent = `${minutes}:${seconds}`;
     }
 
+    function changeTimer(value) {
+        stopTimer();
+        if (value == "custom") {
+            const customMinutes = prompt("Enter custom minutes: ");
+
+            if (!isNaN(customMinutes) && customMinutes > 0) {
+                time = customMinutes * 60;
+            } else {
+                alert("Enter a valid number.")
+                return;
+            }
+        } else {
+            time = value * 60;
+        }
+        updateTimerDisplay();
+    }
+
     // To-Do List functionality
     const tasks = [];