diff --git a/src/NotFound/NotFound.css b/src/NotFound/NotFound.css new file mode 100644 index 0000000..a496b71 --- /dev/null +++ b/src/NotFound/NotFound.css @@ -0,0 +1,40 @@ +.not-found-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #c85b12; + font-family: Arial, sans-serif; +} + +.not-found-image { + width: 80px; + height: 80px; + margin-bottom: 20px; +} + +.not-found-code { + font-size: 120px; + color: white; + background-color: red; + padding: 40px 80px; + border-radius: 20px; + margin: 0; +} + +.home-button { + margin-top: 30px; + padding: 12px 24px; + font-size: 16px; + border: none; + border-radius: 8px; + background-color: #007bff; + color: white; + cursor: pointer; + transition: background-color 0.3s; +} + +.home-button:hover { + background-color: #0056b3; +} diff --git a/src/NotFound/NotFound.tsx b/src/NotFound/NotFound.tsx new file mode 100644 index 0000000..433e41d --- /dev/null +++ b/src/NotFound/NotFound.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import "./NotFound.css"; +import ieeeutdlogo from "../assets/ieeeutdlogo.png" + +const NotFound: React.FC = () => { + const handleGoHome = () => { + window.location.href = "/"; // redirect to home + }; + + return ( +
+ Not Found Icon +

404

+ +
+ ); +}; + +export default NotFound; diff --git a/src/events/ImageBox.css b/src/events/ImageBox.css new file mode 100644 index 0000000..5accf95 --- /dev/null +++ b/src/events/ImageBox.css @@ -0,0 +1,37 @@ + .image-box { + width: 300px; + border: 1px solid #000000; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 1px 1px #D3D3D3; + font-family: Verdana, sans-serif; + background-color: #ffffff; + } + + .image-box img { + width: 100%; + height: 300px; + object-fit: cover; + display: block; + } + + .section { + padding: 15px; + border-top: 1px solid #000000; + font-size: 14px; + color: #000000; + } + + .field { + margin-bottom: 8px; + } + + .details { + font-weight: bold; + text-decoration: underline; + margin-right: 5px; + } + + .description { + margin-top: 10px; + } diff --git a/src/events/ImageBox.tsx b/src/events/ImageBox.tsx new file mode 100644 index 0000000..1e71189 --- /dev/null +++ b/src/events/ImageBox.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import "./ImageBox.css"; + +export interface ImageBoxProps { + imageUrl: string; + name: string; + date: string; + food: string; + description: string; +} + +const ImageBox: React.FC = ({ imageUrl, name, date, food, description }) => { + return ( +
+ Image not found +
+
+ Name: {name} +
+
+ Date: {date} +
+
+ Food: {food} +
+
+ {description} +
+
+
+ ); +}; + +export default ImageBox; diff --git a/src/events/eventcalendar.css b/src/events/eventcalendar.css new file mode 100644 index 0000000..f835b0b --- /dev/null +++ b/src/events/eventcalendar.css @@ -0,0 +1,87 @@ +.weekly-calendar { + display: grid; + grid-template-rows: auto 1fr; + font-family: Verdana, sans-serif; + background-color: white; + border: 6px solid #1976d2; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + margin-top: 30px; +} + +.header-row { + display: grid; + grid-template-columns: 80px repeat(7, 1fr); + background-color: white; + font-weight: bold; + border-bottom: 2px solid black; +} + +.day-col-header { + padding: 10px; + text-align: center; + border-left: 2px solid black; + border-right: 2px solid black; +} + +.calendar-body { + display: grid; + grid-template-columns: 80px repeat(7, 1fr); + grid-template-rows: repeat(10, 60px); + background-color: white; + position: relative; +} + +.time-label { + text-align: right; + padding: 5px 10px; + font-size: 12px; + border-top: 2px solid black; + border-right: 2px solid black; + background-color: white; +} + +.time-slot { + border: 2px solid black; + background-color: white; +} + +.calendar-event { + position: absolute; + z-index: 1; + color: white; + font-size: 0.8rem; + padding: 5px 6px; + border-radius: 4px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); + overflow: hidden; + left: calc(80px + ((100% - 80px) / 7) * var(--column-start)); + width: calc((100% - 80px) / 7); + box-sizing: border-box; +} + +.event-title { + font-weight: bold; +} + +.calendar-popup { + position: fixed; + background-color: #fff; + border: 2px solid #000; + border-radius: 6px; + padding: 10px; + box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.2); + font-size: 0.85rem; + max-width: 220px; + z-index: 1000; + white-space: pre-wrap; +} + +.calendar-event { + cursor: pointer; +} + +.calendar-event:hover { + background-color: #f5f5f5; +} diff --git a/src/events/eventcalendar.tsx b/src/events/eventcalendar.tsx new file mode 100644 index 0000000..1899892 --- /dev/null +++ b/src/events/eventcalendar.tsx @@ -0,0 +1,126 @@ +import React, { useState, useEffect } from "react"; +import "./eventcalendar.css"; + +type CalendarEvent = { + day: string; + title: string; + start: string; + end: string; + color: string; + description: string; +}; + +const events: CalendarEvent[] = [ + { + day: "Monday", + title: "Tech Talk", + start: "10:00", + end: "11:00", + color: "#673AB7", + description: "AI and future tech discussion.", + }, + { + day: "Wednesday", + title: "Workshop", + start: "13:00", + end: "15:00", + color: "#E91E63", + description: "IoT hands-on session.", + }, + { + day: "Saturday", + title: "Workshop", + start: "14:00", + end: "15:30", + color: "#009688", + description: "Lecture", + }, +]; + +const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; +const times = Array.from({ length: 10 }, (_, i) => `${9 + i}:00`); + +const parseTime = (time: string) => { + const [h, m] = time.split(":").map(Number); + return h * 60 + (m || 0); +}; + +const EventCalendar: React.FC = () => { + const [popup, setPopup] = useState<{ + x: number; + y: number; + content: string; + } | null>(null); + + useEffect(() => { + const dismiss = () => setPopup(null); + document.addEventListener("click", dismiss); + return () => document.removeEventListener("click", dismiss); + }, []); + + return ( +
+
+
+ {days.map((day) => ( +
{day}
+ ))} +
+ +
+ {times.map((time, i) => ( + +
{time}
+ {days.map((day) => ( +
+ ))} + + ))} + + {events.map((event, i) => { + const columnStart = days.indexOf(event.day); + const start = parseTime(event.start); + const end = parseTime(event.end); + const top = ((start - 540) / 60) * 60; + const height = ((end - start) / 60) * 60; + + return ( +
{ + e.stopPropagation(); + setPopup({ + x: e.clientX + 10, + y: e.clientY + 10, + content: `${event.title}\n${event.start}–${event.end}\n${event.description}`, + }); + }} + > +
{event.title}
+
+ ); + })} + + {popup && ( +
+ {popup.content.split("\n").map((line, idx) => ( +
{line}
+ ))} +
+ )} +
+
+ ); +}; + +export default EventCalendar; diff --git a/src/events/events.tsx b/src/events/events.tsx new file mode 100644 index 0000000..d821c99 --- /dev/null +++ b/src/events/events.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import ImageBox from "./ImageBox"; +import EventCalendar from "./eventcalendar"; + +const Events: React.FC = () => { + return ( +
+ + +
+ ); +}; + +export default Events; diff --git a/src/footer/footer.tsx b/src/footer/footer.tsx index 71a4749..8da2087 100644 --- a/src/footer/footer.tsx +++ b/src/footer/footer.tsx @@ -14,10 +14,10 @@ export default function Footer() { { src: instagramLogo, alt: "Instagram Logo", href: "https://www.instagram.com/ieeeutd/"}, ]; - return ( -