diff --git a/frontend/index.html b/frontend/index.html index 0ef5ee7..af1bc01 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -108,6 +108,7 @@ + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b0ca43c..571386c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -31,6 +31,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-fast-marquee": "^1.6.5", + "react-responsive-modal": "^6.4.2", "react-router-dom": "6.23.0", "react-simple-maps": "^3.0.0", "tailwind-merge": "^2.5.2", @@ -396,6 +397,27 @@ "node": ">=6.9.0" } }, + "node_modules/@bedrock-layout/use-forwarded-ref": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@bedrock-layout/use-forwarded-ref/-/use-forwarded-ref-1.6.1.tgz", + "integrity": "sha512-GD9A9AFLzFNjr7k6fgerSqxfwDWl+wsPS11PErOKe1zkVz0y7RGC9gzlOiX/JrgpyB3NFHWIuGtoOQqifJQQpw==", + "license": "MIT", + "dependencies": { + "@bedrock-layout/use-stateful-ref": "^1.4.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17 || ^18" + } + }, + "node_modules/@bedrock-layout/use-stateful-ref": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz", + "integrity": "sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18" + } + }, "node_modules/@darkroom.engineering/tempus": { "version": "0.0.46", "resolved": "https://registry.npmjs.org/@darkroom.engineering/tempus/-/tempus-0.0.46.tgz", @@ -3204,6 +3226,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/body-scroll-lock": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", + "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==", + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -3359,6 +3387,12 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -6810,6 +6844,24 @@ } } }, + "node_modules/react-responsive-modal": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz", + "integrity": "sha512-ARjGEKE5Gu5CSvyA8U9ARVbtK4SMAtdXsjtzwtxRlQIHC99RQTnOUctLpl7+/sp1Kg1OJZ6yqvp6ivd4TBueEw==", + "license": "MIT", + "dependencies": { + "@bedrock-layout/use-forwarded-ref": "^1.3.1", + "body-scroll-lock": "^3.1.5", + "classnames": "^2.3.1" + }, + "funding": { + "url": "https://github.com/sponsors/pradel" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-router": { "version": "6.23.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 2ab773d..a37a82d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,6 +33,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-fast-marquee": "^1.6.5", + "react-responsive-modal": "^6.4.2", "react-router-dom": "6.23.0", "react-simple-maps": "^3.0.0", "tailwind-merge": "^2.5.2", diff --git a/frontend/src/components/Home/UpcomingEvents.jsx b/frontend/src/components/Home/UpcomingEvents.jsx index ee67de6..28f0937 100644 --- a/frontend/src/components/Home/UpcomingEvents.jsx +++ b/frontend/src/components/Home/UpcomingEvents.jsx @@ -1,7 +1,11 @@ +import React from "react"; import { Button } from "@nextui-org/button"; import { Chip } from "@nextui-org/chip"; import { useRef, useEffect, useState } from "react"; +import { Modal } from 'react-responsive-modal'; +import 'react-responsive-modal/styles.css'; import { Link } from "react-router-dom"; +import { modal } from "@nextui-org/theme"; function formatDate(isoDate) { const date = new Date(isoDate); @@ -9,9 +13,11 @@ function formatDate(isoDate) { const options = { year: 'numeric', month: 'long', day: 'numeric' }; return date.toLocaleDateString(undefined, options); } -function EventCard({ title, date, type = "Workshop", description, isVisible, registrationLink }) { +function EventCard({ title, date, details, moreInfo, registrationLink, imgUrl, type = "Workshop", description, isVisible }) { const cardRef = useRef(null); const [visible, setVisible] = useState(isVisible); + const [open, setOpen] = React.useState(false); + const myRef = React.useRef(null); const eventDate = new Date(date); const currentDate = new Date(); @@ -30,10 +36,39 @@ function EventCard({ title, date, type = "Workshop", description, isVisible, reg }; }, []); + const closeIcon = ( + + close + + ); + + return ( + <> +
+ + + setOpen(false)} + center + container={myRef.current} + closeIcon={closeIcon} + > +
+
+ +
+

{title}

+

Event Description :
{moreInfo}

+

Event Details :
{details[0]}
{details[1]}
{details[2]}

+
+
+
setOpen(true)} >
@@ -48,17 +83,21 @@ function EventCard({ title, date, type = "Workshop", description, isVisible, reg ) : ( !!registrationLink && - + )}
+ ); } export default function UpcomingEvents() { const events = [ + + + { title: "Web Security Basics", date: "2025-01-24T00:00:00Z", @@ -89,24 +128,6 @@ export default function UpcomingEvents() { description: "An introductory workshop to mobile app development using native Kotlin for Android apps.", type: "Workshop" }, - { - title: "Pre-Tesseract Pixel Art Workshop", - date: "Soon", - description: "A creative art workshop before Tesseract events.", - type: "Workshop" - }, - { - title: "Tesseract: CodeWars", - date: "Soon", - description: "A competitive coding challenge for all levels, where participants can showcase their skills and win exciting prizes.", - type: "Competition" - }, - { - title: "Tesseract: CTF & Treasure Hunt", - date: "Soon", - description: "Capture The Flag and Treasure Hunt events, testing your problem-solving skills and knowledge.", - type: "Competition" - }, { title: "General AI Workshop", date: "2025-01-25T00:00:00Z", @@ -137,32 +158,70 @@ export default function UpcomingEvents() { description: "Join us for a deep dive into AWS services, focusing on cloud computing essentials.", type: "Workshop" }, + + + { + title: "Guardians of the Elements", + date: "19th Oct", + status: "current", + description: "Navigate through real-world locations, solve unique elemental challenges, and unlock hidden clues. This interactive adventure blends technology and nature, as you journey to prove your worth as true Guardians of the Elements!", + moreInfo: "Embark on Guardians of the Elements, a thrilling geolocation-based treasure hunt where you and your team will explore the power of Earth, Fire, Water, Air, and Ether through a custom-built app. Navigate through real-world locations, solve unique elemental challenges, and unlock hidden clues. This interactive adventure blends technology and nature, testing your endurance, intellect, and adaptability as you journey to prove your worth as true Guardians of the Elements!", + details: ["1. Event Timings: 19th October 2024, Saturday 10:00 AM to 12:00 PM", "2. Event Venue: To be conducted throughout the whole campus with various locations for clues", "3. Event Price: Rs. 120 per team"], + imgUrl: "https://i.imgur.com/IX9LTKS.png", + registrationLink: "https://docs.google.com/forms/d/e/1FAIpQLSdN3cQDTvbAwTtJ8OUNFUA9N_ARb64YdIkzW1I-cQy-B0bKgA/viewform", + type: "Treasure hunt" + }, + { + title: "Capture The Flag", + date: "19th Oct", + status: "current", + description: "Whether you're cracking cryptography, mastering reverse engineering, or outsmarting digital defenses, this competition has it all.", + moreInfo: "Capture The Flag (CTF), the ultimate thrill ride in cybersecurity, brought to you by our coding club! Ready to put your hacker hat on and dive into a world of puzzles, codes, and challenges? Whether you’re cracking cryptography, mastering reverse engineering, or outsmarting digital defenses, this competition has it all. Our custom-built CTF platform is your playground, where you’ll face off against the best, push your skills to the limit, and compete for the glory of being crowned the top cyber sleuth. Let the games begin!", + details: ["1. Event Timings: 19th October 2024, Saturday 02:00 PM to 05:00 PM", "2. Event Venue: BLT/ Computer Lab", "3. Event Price: Rs. 50 per team"], + imgUrl: "https://i.imgur.com/Dpj6yRA.png", + registrationLink: "https://docs.google.com/forms/d/e/1FAIpQLScSS2SHdhDXWUw2TscHjEwNF8gPJqwRnMP3fC5bArodtTTvnQ/viewform", + type: "Competition" + }, + { + title: "Code Tatva", + date: "20th Oct", + status: "current", + description: "Feel the adrenaline of solving challenges? Join Encode's Code Tatva to compete in challenges that tests your foundational coding skills and reasoning.", + moreInfo : "Code Tatva is a Competitive Programming challenge where participants in a team take part to solve CP questions in a contest. where the five elements—Earth, Fire, Water, Air, and Ether—guide your coding journey. Compete in challenges that test your foundational skills with Earth-based problems, speed and efficiency with Fire-themed tasks, adaptability with Water puzzles, logical flow with Air challenges, and creative thinking with Ether problems. Showcase your coding prowess and unlock the secrets of each element as you strive to become the ultimate coding Guardian!", + details: ["1. Event Timings: 20th October 2024, Sunday 09:00 AM to 01:00 PM", "2. Event Venue: C007/C008/Computer Lab", "3. Event Price: Rs. 70 per team"], + imgUrl: "https://i.imgur.com/DuTMdrW.png", + registrationLink: "https://forms.gle/oFm41wRoAam1iRgv6", + type: "Competition" + } ]; return ( +
- Upcoming Events - This year's events of Encode! + TesseractX + TesseractX events of Encode!
{events - .filter(event => event.date !== "Soon").sort((a, b) => new Date(a.date) - new Date(b.date)) - .concat(events.filter(event => event.date === "Soon")).map((event, index) => ( + .filter(event => event.status == "current").map((event, index) => ( ))}
- -
+ ); } diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index df81ba4..774c581 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -172,3 +172,57 @@ body { height: 40px; margin-inline: 0; } + +.react-responsive-modal-root{ + z-index: 19;; +} + + + + +/* temporary css for event more Info part */ +/* ============ */ +/* ============ */ + + +.event-card-info{ + padding: 1vw; +} + +.event-img-container{ + display: flex; + flex-direction: column; + align-items: center; +} + +.event-img-container img{ + width: 20vw; +} + +@media (max-width: 500px){ + .event-img-container img{ + width: 40vw; + } +} + +.event-card-info h1, .event-card-info div, .event-card-info p{ + padding: 15px; +} + +.event-card-info span:last-child{ + opacity: 0.7; +} + + +.react-responsive-modal-modal{ + background: black; +} + + +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24 +}