Skip to content

Feat/bug2bot #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mitiksha-28 merged 2 commits into from
Jan 23, 2025
Merged

Feat/bug2bot #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fea4ff4
Bug2Bot page (Imcomplete)
pranav-suri-phc Jan 23, 2025
3f24e8e
fix the issues and finished the design
Mitiksha-28 Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<title>CodeX</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet" />
<link rel="manifest" href="favicon/site.webmanifest">
<title>CodeX</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>

</html>
1 change: 1 addition & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const navLinks = [
{ name: "Gallery", path: "/gallery" },
{ name: "Events", path: "/events" },
{ name: "Contact Us", path: "/contact" },
{ name: "Symbitech 2025", path: "/symbitech2025"}
];

function App() {
Expand Down
Binary file added src/assets/images/Bug2Bot/background1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/Bug2Bot/background2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/assets/images/Bug2Bot/bug2botLogo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/Bug2Bot/card1_debug.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/Bug2Bot/card2_build.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/Bug2Bot/card3_conquer.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/Bug2Bot/mazeImage.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 2 additions & 5 deletions src/components/Footer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,7 @@ function Footer() {
through a variety of activities and events.
</p>
<div className="flex flex-col sm:flex-row items-center gap-4 md:w-full">
<img
src={SitLogo}
alt="Symbiosis Logo"
className="h-12"
/>
<img src={SitLogo} alt="Symbiosis Logo" className="h-12" />
<div className="hidden sm:block w-px h-12 bg-secondary-light"></div>
<img
src={Logo}
Expand All @@ -61,6 +57,7 @@ function Footer() {
{ name: "Gallery", path: "/gallery" },
{ name: "Events", path: "/events" },
{ name: "Contact", path: "/contact" },
{ name: "SymbiTech2025", path: "/symbitech2025" },
].map((link) => (
<li
key={link.name}
Expand Down
255 changes: 255 additions & 0 deletions src/pages/Bug2Bot/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
import PageTransition from "@/components/PageTransition";
import { useEffect, useState } from "react";
import MazeImage from "../../assets/images/Bug2Bot/mazeImage.png";
import Bug2BotLogo from "../../assets/images/Bug2Bot/bug2botLogo.svg";
import Background1 from "../../assets/images/Bug2Bot/background1.png";
import Background2 from "../../assets/images/Bug2Bot/background2.png";
import Card1Background from "../../assets/images/Bug2Bot/card1_debug.png";
import Card2Background from "../../assets/images/Bug2Bot/card2_build.png";
import Card3Background from "../../assets/images/Bug2Bot/card3_conquer.png";
import React from "react";

const targetDate = new Date("2025-01-24T12:00:00");

/**
* GradientTextSVG component
* @param {Object} props
* @param {string} props.text - Text to display
* @param {number} props.width - Width of the SVG
* @param {number} props.height - Height of the SVG
* @param {number} props.fontSize - Font size of the text
* @param {string[]} props.gradientColors - Array of two colors for gradient
*/
function GradientTextSVG({ text, width, height, fontSize, gradientColors }) {
return (
<svg height={height} viewBox={`0 0 ${width} ${height}`} className="w-full">
<defs>
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor={gradientColors[0]} />
<stop offset="100%" stopColor={gradientColors[1]} />
</linearGradient>
</defs>
<text
x="50%"
y="50%"
fontSize={fontSize}
fontWeight="bold"
fill="transparent"
stroke="url(#textGradient)"
strokeWidth="2"
textAnchor="middle"
dominantBaseline="middle"
className="font-poppins w-max"
>
{text}
</text>
</svg>
);
}

export default function Bug2Bot() {
const [remainingTime, setRemainingTime] = useState({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});

const updateCountdown = () => {
const now = new Date(); // Current date and time
const diff = targetDate.getTime() - now.getTime(); // Difference in milliseconds

if (diff <= 0) {
setRemainingTime({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});
return; // Stop updating if the target time is reached
}

const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

setRemainingTime({ days, hours, minutes, seconds });
};

useEffect(() => {
updateCountdown();
const interval = setInterval(updateCountdown, 1000);
return () => clearInterval(interval);
}, []);

const gradientFontSize = 100;
return (
<PageTransition>
<div className="text-white overflow-hidden">
{/* Section 1 START ====== */}
<div
className="flex flex-col items-center p-10 w-full justify-center"
style={{
minHeight: "95vh",
backgroundImage: `url(${Background1})`,
backgroundPosition: "center",
}}
>
<div>
<GradientTextSVG
text="SYMBITECH 2025"
width={9 * gradientFontSize}
height={gradientFontSize}
fontSize={gradientFontSize}
gradientColors={["#FD4445", "#F2C849"]}
/>
</div>
<div className="text-2xl font-orbitron">Presenting You</div>
<img src={Bug2BotLogo} alt="bug2botLogo" />
<div className="text-3xl font-orbitron">Event Starts in:</div>
<div
className="text-3xl font-orbitron text-center"
style={{
WebkitTextStroke: "0.5px red",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundImage: "linear-gradient(to right, #FD4445, #F2C849)",
}}
>
{remainingTime.days} Days {remainingTime.hours} Hours{" "}
{remainingTime.minutes} Mins
</div>
<div className="font-orbitron text-2xl text-center">
Date: 24th & 25th January
</div>
<div className="font-orbitron text-2xl text-center">
Venue: CL9 & 10
</div>
<div className="font-orbitron text-2xl text-center">
(DBMS & Applied AI Lab)
</div>
</div>
{/* Section 1 END ====== */}
{/* Section 2, 3 Container START ===== */}
<div
style={{
backgroundImage: `url(${Background2})`,
backgroundSize: "cover",
}}
>
{/* Section 2 START ====== */}
<div className="w-full flex flex-col items-center p-10">
<div className="grid lg:grid-cols-2 gap-4 sm:grid-cols-1 lg:container md:container">
{/* Col 1 */}
<div>
<div className="font-orbitron font-bold text-xl">
Join the Challenge!
</div>
<div className="font-orbitron text-xl">
Unleash your tech prowess in this ultimate challenge where
coding precision meets hands-on ingenuity. Teams will tackle
gripping puzzles to unlock a path toward an innovative and
competitive build. Navigate through tasks designed to test
your creativity, strategy, and teamwork!
</div>
</div>
{/* Col 2 */}
<div className="mt-20">
{/* Maze Image */}
<img src={MazeImage} alt="Maze" />
</div>
</div>
</div>
{/* Section 2 END ====== */}

{/* Section 3 Rules START ====== */}
<div className="flex flex-col p-10 text-white lg:items-center md:items-center">
<div className="lg:container md:container">
<div className="text-3xl font-orbitron font-bold mb-6">
GUIDELINES
</div>
<div className="flex flex-col gap-6">
{/* DEBUG Card */}

<div
className="bg-gray-800 p-4 sm:p-6 rounded-lg shadow-lg w-full sm:w-[30rem] min-h-[10rem] sm:h-[15rem] bg-cover flex flex-col justify-center"
style={{
backgroundImage: `url(${Card1Background})`,
}}
>
<div className="text-xl sm:text-2xl font-orbitron mb-2 sm:mb-4 font-bold">
DEBUG
</div>
<ol className="list-decimal list-inside space-y-1 sm:space-y-2">
<li className="font-orbitron text-base sm:text-xl">
Form a team of 3 - 4.
</li>
<li className="font-orbitron text-base sm:text-xl">
Find Qr, scan it.
</li>
<li className="font-orbitron text-base sm:text-xl">
Look for PC number.
</li>
<li className="font-orbitron text-base sm:text-xl">
2 Debugging challenges.
</li>
<li className="font-orbitron text-base sm:text-xl">
4 Programming languages.
</li>
</ol>
</div>
{/* BUILD Card */}
<div
className="bg-gray-800 p-6 rounded-lg shadow-lg sm:w-[30rem] min-h-[10rem] sm:h-[15rem] bg-cover flex flex-col justify-center self-end "
style={{
backgroundImage: `url(${Card2Background})`,
}}
>
<div className="text-2xl font-bold mb-4 font-orbitron">
BUILD
</div>
<ol className="list-decimal list-inside">
<li className="font-orbitron text-xl">
Get the components.
</li>
<li className="font-orbitron text-xl">
Assemble the RC car and race!!
</li>
<li className="font-orbitron text-xl">
Total Time - 15 Minutes.
</li>
</ol>
</div>
{/* CONQUER Card */}
<div
className="bg-gray-800 p-6 rounded-lg shadow-lg sm:w-[30rem] min-h-[10rem] sm:h-[15rem] bg-cover flex flex-col justify-center"
style={{
backgroundImage: `url(${Card3Background})`,
}}
>
<div className="text-2xl mb-4 font-orbitron font-bold">
CONQUER
</div>
<ol className="list-decimal list-inside">
<li className="font-orbitron text-xl">
Navigate through the race track.
</li>
<li className="font-orbitron text-xl">
Outsmart the traps.
</li>
<li className="font-orbitron text-xl">
Reach the finish line.
</li>
</ol>
</div>
</div>
</div>
</div>
{/* Section 3 END ====== */}
</div>
{/* Section 2, 3 Container END ===== */}
</div>
</PageTransition>
);
}
7 changes: 7 additions & 0 deletions src/routes/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Contact from "@/pages/Contact";
import PageNotFound from "../pages/PageNotFound";
import Loader from "@/components/Loader";
import Events from "../pages/Events";
import Bug2Bot from "../pages/Bug2Bot";

const routes = [
{
Expand Down Expand Up @@ -56,6 +57,12 @@ const routes = [
requireAuth: false,
render: <PageNotFound />,
},
{
label: "Bug2Bot",
path: "/symbitech2025",
requireAuth: false,
render: <Bug2Bot />,
}
];

export default routes;
2 changes: 2 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/** @type {import('tailwindcss').Config} */

export default {
content: ["./src/**/*.{js,jsx}"],
theme: {
Expand Down Expand Up @@ -41,6 +42,7 @@ export default {
fontFamily: {
poppins: ["Poppins", "sans-serif"],
gothic: ["League Gothic", "sans-serif"],
orbitron: ["Orbitron", "sans-serif"],
},
},
},
Expand Down
Loading