Skip to content

Commit fea4ff4

Browse files
pranav-suri-phcpranav-suri-phc
committed
Bug2Bot page (Imcomplete)
1 parent a9c8686 commit fea4ff4

File tree

12 files changed

+272
-14
lines changed

12 files changed

+272
-14
lines changed

‎index.html‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
7-
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
8-
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
9-
<link rel="manifest" href="favicon/site.webmanifest">
10-
<title>CodeX</title>
11-
</head>
123

13-
<body>
14-
<div id="root"></div>
15-
<script type="module" src="/src/main.jsx"></script>
16-
</body>
17-
</html>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
8+
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
9+
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
10+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap" rel="stylesheet" />
11+
<link rel="manifest" href="favicon/site.webmanifest">
12+
<title>CodeX</title>
13+
</head>
14+
15+
<body>
16+
<div id="root"></div>
17+
<script type="module" src="/src/main.jsx"></script>
18+
</body>
19+
20+
</html>

‎src/App.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const navLinks = [
1717
{ name: "Gallery", path: "/gallery" },
1818
{ name: "Events", path: "/events" },
1919
{ name: "Contact Us", path: "/contact" },
20+
{ name: "Symbitech 2025", path: "/symbitech2025"}
2021
];
2122

2223
function App() {

‎src/assets/images/Bug2Bot/background1.png‎

1.72 MB
Loading

‎src/assets/images/Bug2Bot/background2.png‎

480 KB
Loading

‎src/assets/images/Bug2Bot/bug2botLogo.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/assets/images/Bug2Bot/card1_debug.png‎

367 KB
Loading

‎src/assets/images/Bug2Bot/card2_build.png‎

364 KB
Loading

‎src/assets/images/Bug2Bot/card3_conquer.png‎

366 KB
Loading

‎src/assets/images/Bug2Bot/mazeImage.png‎

138 KB
Loading

‎src/pages/Bug2Bot/index.jsx‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
import PageTransition from "@/components/PageTransition";
2+
import { useEffect, useState } from "react";
3+
import MazeImage from "../../assets/images/Bug2Bot/mazeImage.png";
4+
import Bug2BotLogo from "../../assets/images/Bug2Bot/bug2botLogo.svg";
5+
import Background1 from "../../assets/images/Bug2Bot/background1.png";
6+
import Background2 from "../../assets/images/Bug2Bot/background2.png";
7+
import Card1Background from "../../assets/images/Bug2Bot/card1_debug.png";
8+
import Card2Background from "../../assets/images/Bug2Bot/card2_build.png";
9+
import Card3Background from "../../assets/images/Bug2Bot/card3_conquer.png";
10+
import React from "react";
11+
12+
const targetDate = new Date("2025-01-24T12:00:00");
13+
14+
/**
15+
* GradientTextSVG component
16+
* @param {Object} props
17+
* @param {string} props.text - Text to display
18+
* @param {number} props.width - Width of the SVG
19+
* @param {number} props.height - Height of the SVG
20+
* @param {number} props.fontSize - Font size of the text
21+
* @param {string[]} props.gradientColors - Array of two colors for gradient
22+
*/
23+
function GradientTextSVG({ text, width, height, fontSize, gradientColors }) {
24+
return (
25+
<svg height={height} viewBox={`0 0 ${width} ${height}`} className="w-full">
26+
<defs>
27+
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
28+
<stop offset="0%" stopColor={gradientColors[0]} />
29+
<stop offset="100%" stopColor={gradientColors[1]} />
30+
</linearGradient>
31+
</defs>
32+
<text
33+
x="50%"
34+
y="50%"
35+
fontSize={fontSize}
36+
fontWeight="bold"
37+
fill="transparent"
38+
stroke="url(#textGradient)"
39+
strokeWidth="2"
40+
textAnchor="middle"
41+
dominantBaseline="middle"
42+
className="font-poppins w-max"
43+
>
44+
{text}
45+
</text>
46+
</svg>
47+
);
48+
}
49+
50+
export default function Bug2Bot() {
51+
const [remainingTime, setRemainingTime] = useState({
52+
days: 0,
53+
hours: 0,
54+
minutes: 0,
55+
seconds: 0,
56+
});
57+
58+
const updateCountdown = () => {
59+
const now = new Date(); // Current date and time
60+
const diff = targetDate.getTime() - now.getTime(); // Difference in milliseconds
61+
62+
if (diff <= 0) {
63+
setRemainingTime({
64+
days: 0,
65+
hours: 0,
66+
minutes: 0,
67+
seconds: 0,
68+
});
69+
return; // Stop updating if the target time is reached
70+
}
71+
72+
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
73+
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
74+
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
75+
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
76+
77+
setRemainingTime({ days, hours, minutes, seconds });
78+
};
79+
80+
useEffect(() => {
81+
updateCountdown();
82+
const interval = setInterval(updateCountdown, 1000);
83+
return () => clearInterval(interval);
84+
}, []);
85+
86+
const gradientFontSize = 100;
87+
return (
88+
<PageTransition>
89+
<div className="text-white">
90+
{/* Section 1 START ====== */}
91+
<div
92+
className="flex flex-col items-center pt-10 w-full justify-center"
93+
style={{
94+
minHeight: "95vh",
95+
backgroundImage: `url(${Background1})`,
96+
backgroundPosition: "center",
97+
}}
98+
>
99+
<div>
100+
<GradientTextSVG
101+
text="SYMBITECH 2025"
102+
width={9 * gradientFontSize}
103+
height={gradientFontSize}
104+
fontSize={gradientFontSize}
105+
gradientColors={["#FD4445", "#F2C849"]}
106+
/>
107+
</div>
108+
<div className="text-2xl font-orbitron">Presenting You</div>
109+
<img src={Bug2BotLogo} alt="bug2botLogo" />
110+
<div className="text-3xl font-orbitron">Event Starts in:</div>
111+
<div
112+
className="text-3xl font-orbitron"
113+
style={{
114+
WebkitTextStroke: "0.5px red",
115+
WebkitBackgroundClip: "text",
116+
WebkitTextFillColor: "transparent",
117+
backgroundImage: "linear-gradient(to right, #FD4445, #F2C849)",
118+
}}
119+
>
120+
{remainingTime.days} Days {remainingTime.hours} Hours{" "}
121+
{remainingTime.minutes} Mins
122+
</div>
123+
<div className="font-orbitron">Date: 24th & 25th January</div>
124+
<div className="font-orbitron">Venue: CL9 & 10</div>
125+
<div className="font-orbitron">(DBMS & Applied AI Lab)</div>
126+
</div>
127+
{/* Section 1 END ====== */}
128+
{/* Section 2, 3 Container START ===== */}
129+
<div
130+
style={{
131+
backgroundImage: `url(${Background2})`,
132+
backgroundSize: "cover",
133+
}}
134+
>
135+
{/* Section 2 START ====== */}
136+
<div
137+
className="w-full flex flex-col items-center p-10"
138+
style={{ backgroundImage: `url(${Background2})` }}
139+
>
140+
<div className="grid lg:grid-cols-2 gap-4 sm:grid-cols-1 lg:container md:container">
141+
{/* Col 1 */}
142+
<div>
143+
<div className="font-orbitron font-bold">
144+
Join the Challenge!
145+
</div>
146+
<div className="font-orbitron sm">
147+
Unleash your tech prowess in this ultimate challenge where
148+
coding precision meets hands-on ingenuity. Teams will tackle
149+
gripping puzzles to unlock a path toward an innovative and
150+
competitive build. Navigate through tasks designed to test
151+
your creativity, strategy, and teamwork!
152+
</div>
153+
</div>
154+
{/* Col 2 */}
155+
<div className="mt-20">
156+
{/* Maze Image */}
157+
<img src={MazeImage} alt="Maze" />
158+
<div className="mt-20 font-orbitron text-3xl">
159+
TIMINGS: 12PM - 4PM
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
{/* Section 2 END ====== */}
165+
166+
{/* Section 3 Rules START ====== */}
167+
<div className="flex flex-col p-10 text-white lg:items-center md:items-center">
168+
<div className="lg:container md:container">
169+
<div className="text-3xl font-orbitron font-bold mb-6">
170+
GUIDELINES
171+
</div>
172+
<div className="flex flex-col gap-6">
173+
{/* DEBUG Card */}
174+
<div
175+
className="bg-gray-800 p-6 rounded-lg shadow-lg max-w-80 bg-cover"
176+
style={{
177+
backgroundImage: `url(${Card1Background})`,
178+
}}
179+
>
180+
<div className="text-2xl font-orbitron mb-4 font-bold">
181+
DEBUG
182+
</div>
183+
<ol className="list-decimal list-inside">
184+
<li className="font-orbitron">Form a team of 4 - 5</li>
185+
<li className="font-orbitron">Find Qr, scan it</li>
186+
<li className="font-orbitron">Find PC number</li>
187+
<li className="font-orbitron">Debugging challenges</li>
188+
<li className="font-orbitron">Programming languages</li>
189+
</ol>
190+
</div>
191+
{/* BUILD Card */}
192+
<div
193+
className="bg-gray-800 p-6 rounded-lg shadow-lg max-w-80 self-end bg-cover"
194+
style={{
195+
backgroundImage: `url(${Card2Background})`,
196+
}}
197+
>
198+
<div className="text-2xl font-bold mb-4 font-orbitron">
199+
BUILD
200+
</div>
201+
<ol className="list-decimal list-inside">
202+
<li className="font-orbitron">Get the components</li>
203+
<li className="font-orbitron">
204+
Assemble the RC car and race!
205+
</li>
206+
<li className="font-orbitron">Total Time - 15 Minutes</li>
207+
</ol>
208+
</div>
209+
{/* CONQUER Card */}
210+
<div
211+
className="bg-gray-800 p-6 rounded-lg shadow-lg max-w-80 bg-cover"
212+
style={{
213+
backgroundImage: `url(${Card3Background})`,
214+
}}
215+
>
216+
<div className="text-2xl mb-4 font-orbitron font-bold">
217+
CONQUER
218+
</div>
219+
<ol className="list-decimal list-inside">
220+
<li className="font-orbitron">
221+
Navigate through the race track
222+
</li>
223+
<li className="font-orbitron">Outsmart the traps</li>
224+
<li className="font-orbitron">reach the finish line</li>
225+
</ol>
226+
</div>
227+
</div>
228+
</div>
229+
</div>
230+
{/* Section 3 END ====== */}
231+
</div>
232+
{/* Section 2, 3 Container END ===== */}
233+
</div>
234+
</PageTransition>
235+
);
236+
}

0 commit comments

Comments
 (0)