Contrive

.gitignore

@@ -4,3 +4,4 @@ server/node_modules
 server/.env
 server/env
 server/inventive/credentials.json
+server/contrive/credentials.json

server/app.js

@@ -28,6 +28,7 @@ app.use("/api/clubs", require("./routes/projectRoutes"));
 app.use("/api/bookings", require("./routes/bookingRoutes"));
 app.use("/api/admin", require("./routes/adminRoutes"));
 app.use("/api/inventiveForm", require("./inventive/inventiveFormRoutes")); // Add the new route
+app.use("/api/contriveForm",require("./contrive/contriveFormRoutes"))
 app.use("/api/inventory", require("./routes/inventoryRoutes"));
 app.use("/api/temp", require("./temporary/temp-route"));
 

server/contrive/contriveFormRoutes.js

@@ -0,0 +1,94 @@
+const express = require("express");
+const { google } = require("googleapis");
+const router = express.Router();
+const dotenv = require("dotenv");
+const fs = require("fs");
+const path = require("path");
+dotenv.config();
+
+const credentials = JSON.parse(
+  fs.readFileSync(path.join(__dirname, "credentials.json"))
+);
+
+const auth = new google.auth.GoogleAuth({
+  credentials,
+  scopes: ["https://www.googleapis.com/auth/spreadsheets"],
+});
+
+// Your Google Sheet ID
+const SPREADSHEET_ID = "14s9xsLdvrAnXK2m5HyJMZgOoTIK6r_E9DwzP11lvEVk";
+
+router.post("/submit", async (req, res) => {
+  try {
+    const client = await auth.getClient();
+    const sheets = google.sheets({ version: "v4", auth: client });
+
+    const {
+      roll,
+      branch,
+      year,
+      name,
+      hostelName,
+      roomNo,
+      email,
+      mobile,
+      source,
+      otherSource,
+      teamSize,
+    } = req.body;
+
+    // Validate required fields
+    if (
+      !roll ||
+      !branch ||
+      !year ||
+      !name ||
+      !hostelName ||
+      !roomNo ||
+      !email ||
+      !mobile ||
+      !teamSize
+    ) {
+      return res.status(400).send("All fields are required");
+    }
+
+    if (!source) {
+      return res.status(400).send("Source is required");
+    }
+
+    if (source === "Other" && !otherSource) {
+      return res.status(400).send("Please specify other source");
+    }
+
+    const finalSource = source === "Other" ? otherSource : source;
+
+    await sheets.spreadsheets.values.append({
+      spreadsheetId: SPREADSHEET_ID,
+      range: "Sheet1!A:J", // 10 columns
+      valueInputOption: "RAW",
+      requestBody: {
+        values: [
+          [
+            roll,
+            branch,
+            year,
+            name,
+            hostelName,
+            roomNo,
+            email,
+            mobile,
+            finalSource,
+            teamSize,
+          ],
+        ],
+      },
+    });
+
+    res.status(200).send("Success! Data added to sheet.");
+  } catch (error) {
+    console.error("Error adding to sheet:", error);
+    res.status(500).send(`Error adding to sheet: ${error.message}`);
+  }
+});
+
+module.exports = router;

src/App.js

@@ -58,6 +58,8 @@ import ProjectDetailsPage from "./pages/ProjectDetailsPage";
 import Inventive from "./inventive/Pages/Inventive";
 import InventivePage from "./inventive/Pages/InventivePage" ;
 import Members from "./pages/Members"
+import Contrive from "./contrive/Pages/Contrive";
+import ContrivePage from "./contrive/Pages/ContrivePage";
 const App = () => {
   return (
     <>
@@ -95,6 +97,8 @@ const App = () => {
         <Route path="/inventive" element={<Inventive />} />
         <Route path="/inventiveForm" element={<InventivePage/>} />
         <Route path="/inventory" element={<Inventory />} />
+        <Route path="/contrive" element={<Contrive/>}/>
+        <Route path="/contriveForm" element={<ContrivePage/>}/>
         <Route path="/Team" element={<Team/>} />
         <Route path="/contact" element={<Contact />} />
         <Route path="/roombook" element={<Bookings />} />

src/components/Navbar.jsx

@@ -38,13 +38,13 @@ const Navbar = () => {
                         Timeline
                     </Link>
 
-                    <Link
+                    {/* <Link
                         to="/gallery"
                         onClick={handleClick}
                         className={`nav-link ${isActive('/gallery') ? 'active font-bold text-lg' : ''}`}
                     >
                         Gallery
-                    </Link>
+                    </Link> */}
 
                     <Link
                         to="/clubs"
@@ -68,6 +68,14 @@ const Navbar = () => {
                     >
                         Inventory
                     </Link>
+                    <Link
+                        to="/contrive"
+                        onClick={handleClick}
+                        className={`nav-link ${isActive('/contrive') ? 'active font-bold text-lg' : ''} `}
+                    >
+                        CONTRIVE'25
+                    </Link>
+
                     <Link
                         to="/inventive"
                         onClick={handleClick}

src/components/footer.jsx

@@ -33,7 +33,7 @@ const Footer = () => {
                 <a href="/">Home</a>
               </li>
               <li>
-                <a href="/project">Projects</a>
+                <a href="/gallery">Gallery</a>
               </li>
               <li>
                 <a href="/contact">Contact Us</a>

src/contrive/CanvasBackground.jsx

@@ -0,0 +1,121 @@
+import { useEffect, useRef } from "react";
+
+const PageWrapper = ({ children }) => {
+  const canvasRef = useRef(null);
+  const animationRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = Math.max(
+        document.documentElement.scrollHeight,
+        document.body.scrollHeight,
+        window.innerHeight
+      );
+    };
+    resize();
+    window.addEventListener("resize", resize);
+
+    const drops = [];
+    const dropCount = 100;
+    let globalWind = 0; // global wind direction
+    const windChange = 0.001; // how fast wind direction changes
+
+    class Drop {
+      constructor() {
+        this.reset();
+      }
+
+      reset() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * -canvas.height;
+        this.length = Math.random() * 20 + 20;
+        this.speed = Math.random() * 3 + 2;
+        this.opacity = Math.random() * 0.5 + 0.5;
+        this.width = Math.random() * 2 + 0.8;
+        this.localWind = (Math.random() - 0.5) * 0.5; // per-drop variation
+      }
+
+      update() {
+        this.y += this.speed;
+        this.x += this.localWind + globalWind;
+
+        if (
+          this.y > canvas.height + this.length ||
+          this.x < -50 ||
+          this.x > canvas.width + 50
+        ) {
+          this.reset();
+        }
+      }
+
+      draw() {
+        const gradient = ctx.createLinearGradient(
+          this.x,
+          this.y,
+          this.x + (this.localWind + globalWind) * 4,
+          this.y + this.length
+        );
+        gradient.addColorStop(0, `rgba(255, 215, 0, ${this.opacity})`);
+        gradient.addColorStop(1, "rgba(255, 215, 0, 0)");
+
+        ctx.beginPath();
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = this.width;
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(
+          this.x + (this.localWind + globalWind) * 4,
+          this.y + this.length
+        );
+        ctx.shadowBlur = 35;
+        ctx.shadowColor = "rgba(255, 215, 0, 1)";
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+      }
+    }
+
+    for (let i = 0; i < dropCount; i++) {
+      drops.push(new Drop());
+    }
+
+    function animate() {
+      ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Slowly change wind direction for a natural flow
+      globalWind = Math.sin(Date.now() * windChange) * 1.2;
+
+      drops.forEach((d) => {
+        d.update();
+        d.draw();
+      });
+
+      animationRef.current = requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    return () => {
+      cancelAnimationFrame(animationRef.current);
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+
+  return (
+    <div className="relative min-h-screen bg-black overflow-hidden">
+      {/* Golden drizzle canvas */}
+      <canvas
+        ref={canvasRef}
+        className="fixed inset-0 w-full h-full pointer-events-none z-0"
+      />
+
+      {/* Foreground content */}
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+};
+
+export default PageWrapper;