Merge branch 'main' into main

.github/workflows/ci.yml

@@ -28,4 +28,4 @@ jobs:
         run: |
           npm run dev &
           sleep 10 # Wait for the server to start
-          curl -f http://localhost:5173 # Change this to the actual port your Vite server runs on
+          curl -f http://localhost:5174 # Change this to the actual port your Vite server runs on

src/App.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { z } from 'zod';
+import { useState, useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { Loader2, UserPlus, X } from 'lucide-react';
@@ -11,6 +12,9 @@ import { Select, SelectContent, SelectTrigger, SelectValue } from '@/components/
 import { toast } from 'sonner';
 import { formSchema } from '@/lib/schema';
 import { SelectItems } from './SelectItems';
+import saveData from './api/google-sheets';
+import { z } from 'zod';
+import { MatrixEffect } from './components/MatrixEffect';
 
 type FormValues = z.infer<typeof formSchema>;
 
@@ -30,6 +34,47 @@ export default function App() {
     },
   });
 
+  useEffect(() => {
+    const createCircuitLines = () => {
+      const container = document.querySelector('.circuit-decoration');
+      if (!container) return;
+
+      // Clear any existing elements
+      container.innerHTML = '';
+
+      // Create more elements for better coverage
+      for (let i = 0; i < 25; i++) {
+        // Create circuits
+        const line = document.createElement('div');
+        line.className = 'circuit-line';
+        line.style.left = `${Math.random() * 100}%`;
+        line.style.top = `${Math.random() * 100}%`;
+        line.style.width = `${100 + Math.random() * 200}px`; // Longer lines
+        line.style.transform = `rotate(${Math.random() * 360}deg)`;
+        container.appendChild(line);
+
+        // Create dots at ends
+        const dot = document.createElement('div');
+        dot.className = 'circuit-dot';
+        dot.style.left = `${Math.random() * 100}%`;
+        dot.style.top = `${Math.random() * 100}%`;
+        container.appendChild(dot);
+
+        // Create vines with varied sizes
+        const vine = document.createElement('div');
+        vine.className = 'vine';
+        vine.style.left = `${Math.random() * 100}%`;
+        vine.style.top = `${Math.random() * 100}%`;
+        vine.style.width = `${50 + Math.random() * 150}px`;
+        vine.style.height = `${50 + Math.random() * 150}px`;
+        vine.style.transform = `rotate(${Math.random() * 360}deg)`;
+        container.appendChild(vine);
+      }
+    };
+
+    createCircuitLines();
+  }, []);
+
   async function onSubmit(data: FormValues) {
     setIsSubmitting(true);
     try {
@@ -227,5 +272,144 @@ export default function App() {
         </Card>
       </div>
     </div>
+    <>
+      <MatrixEffect />
+      <div className="circuit-decoration" />
+      <div className="min-h-screen flex items-center justify-center px-4 py-8 sm:px-6 lg:px-8 relative z-10">
+        <div className="w-full max-w-3xl">
+          <Card className="bg-[#1a1a1a] border-[#333] shadow-2xl rounded-3xl">
+            <CardHeader className="space-y-2 border-b border-[#333] bg-gradient-to-r from-[#00ff80]/10 to-[#1d8a54]/10 rounded-t-3xl">
+              <CardTitle className="text-3xl font-bold bg-gradient-to-r from-[#00ff80] to-[#1d8a54] bg-clip-text text-transparent">
+                Registration Form
+              </CardTitle>
+              <CardDescription className="text-gray-400">
+                Fill in your details to register. You can participate solo or add up to 2 team members.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="pt-6">
+              <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                  <div className="space-y-4">
+                    {Object.keys(formSchema.shape).filter(key => key !== 'teamMembers').map((fieldName) => (
+                      <FormField
+                        key={fieldName}
+                        control={form.control}
+                        name={fieldName as keyof Omit<FormValues, 'teamMembers'>}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-white">
+                              {fieldName.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
+                            </FormLabel>
+                            <FormControl>
+                              {fieldName === 'branch' ? (
+                                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                  <FormControl>
+                                    <SelectTrigger className="bg-[#222] border-[#333] text-white rounded-lg"> {/* Rounded dropdown */}
+                                      <SelectValue placeholder={`Select ${fieldName}`} />
+                                    </SelectTrigger>
+                                  </FormControl>
+                                  <SelectContent className="bg-[#222] border-[#333] text-white rounded-lg"> {/* Rounded dropdown */}
+                                    <SelectItem value="cse">Computer Science</SelectItem>
+                                    <SelectItem value="ece">Electronics</SelectItem>
+                                    <SelectItem value="me">Mechanical</SelectItem>
+                                    <SelectItem value="ce">Civil</SelectItem>
+                                  </SelectContent>
+                                </Select>
+                              ) : (
+                                <Input
+                                  {...field}
+                                  placeholder={`Enter ${fieldName.replace(/([A-Z])/g, ' $1').toLowerCase()}`}
+                                  className="bg-[#222] border-[#333] text-white placeholder:text-gray-500 rounded-lg"
+                                />
+                              )}
+                            </FormControl>
+                            <FormMessage className="text-red-400" />
+                          </FormItem>
+                        )}
+                      />
+                    ))}
+                  </div>
+
+                  <div className="flex justify-between items-center pt-4">
+                    <Button
+                      type="button"
+                      onClick={addTeamMember}
+                      disabled={teamMemberCount >= 2}
+                      className="bg-gradient-to-r from-[#00ff80] to-[#1d8a54] text-black hover:opacity-90 rounded-lg" 
+                    >
+                      <UserPlus className="mr-2 h-4 w-4" />
+                      Add Team Member
+                    </Button>
+                    {teamMemberCount > 0 && (
+                      <Button
+                        type="button"
+                        onClick={removeTeamMember}
+                        className="bg-[#222] text-white hover:bg-[#333] border-[#333] rounded-lg"
+                      >
+                        <X className="mr-2 h-4 w-4" />
+                        Remove Member
+                      </Button>
+                    )}
+                  </div>
+
+                  {Array.from({ length: teamMemberCount }).map((_, index) => (
+                    <div key={index} className="space-y-4 pt-4 border-t border-[#333]">
+                      <h3 className="text-lg font-semibold text-[#00ff80]">Team Member {index + 1}</h3>
+                      {Object.keys(formSchema.shape).filter(key => key !== 'teamMembers').map((fieldName) => (
+                        <FormField
+                          key={fieldName}
+                          control={form.control}
+                          name={`teamMembers.${index}.${fieldName}` as any}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-white">
+                                {fieldName.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
+                              </FormLabel>
+                              <FormControl>
+                                {fieldName === 'branch' ? (
+                                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                    <FormControl>
+                                      <SelectTrigger className="bg-[#222] border-[#333] text-white rounded-lg"> {/* Rounded dropdown */}
+                                        <SelectValue placeholder={`Select ${fieldName}`} />
+                                      </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent className="bg-[#222] border-[#333] text-white rounded-lg"> {/* Rounded dropdown */}
+                                      <SelectItem value="cse">Computer Science</SelectItem>
+                                      <SelectItem value="ece">Electronics</SelectItem>
+                                      <SelectItem value="me">Mechanical</SelectItem>
+                                      <SelectItem value="ce">Civil</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                ) : (
+                                  <Input
+                                    {...field}
+                                    placeholder={`Enter ${fieldName.replace(/([A-Z])/g, ' $1').toLowerCase()}`}
+                                    className="bg-[#222] border-[#333] text-white placeholder:text-gray-500 rounded-lg"
+                                  />
+                                )}
+                              </FormControl>
+                              <FormMessage className="text-red-400" />
+                            </FormItem>
+                          )}
+                        />
+                      ))}
+                    </div>
+                  ))}
+
+                  <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full bg-gradient-to-r from-[#00ff80] to-[#1d8a54] hover:opacity-90 text-black font-semibold rounded-lg"
+                  >
+                    {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {isSubmitting ? 'Submitting...' : 'Submit Registration'}
+                  </Button>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </>
   );
 };

src/components/MatrixEffect.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+
+interface FallingLetter {
+  id: number;
+  char: string;
+  x: number;
+  delay: number;
+  speed: number;
+}
+
+export const MatrixEffect = () => {
+  const [letters, setLetters] = useState<FallingLetter[]>([]);
+  let nextId = 0;
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      const char = event.key;
+      if (char.length === 1) { 
+        const x = Math.random() * window.innerWidth;
+        setLetters(prev => [...prev, {
+          id: nextId++,
+          char,
+          x,
+          delay: Math.random() * 0.2,
+          speed: 2 + Math.random()
+        }]);
+      }
+    };
+
+    window.addEventListener('keypress', handleKeyPress);
+    return () => window.removeEventListener('keypress', handleKeyPress);
+  }, []);
+
+  useEffect(() => {
+    const cleanup = setInterval(() => {
+      setLetters(prev => prev.filter(letter => 
+        document.documentElement.clientHeight > letter.x
+      ));
+    }, 8000);
+
+    return () => clearInterval(cleanup);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
+      {letters.map((letter) => (
+        <div
+          key={letter.id}
+          className="absolute text-[#00ff80] font-mono text-xl matrix-letter"
+          style={{
+            left: `${letter.x}px`,
+            animation: `fall ${letter.speed}s linear forwards`,
+            animationDelay: `${letter.delay}s`
+          }}
+        >
+          {letter.char}
+        </div>
+      ))}
+    </div>
+  );
+};

src/index.css

@@ -35,13 +35,13 @@ body {
   background-color: #242424;
 }
 
-.min-h-screen {
+/* .min-h-screen {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color: #242424;
-}
+} */
 
 h1 {
   font-size: 3.2em;
@@ -144,3 +144,62 @@ button:focus-visible {
     @apply bg-background text-foreground;
   }
 }
+
+.circuit-decoration {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0; 
+  overflow: hidden;
+}
+
+.circuit-line {
+  position: absolute;
+  background: linear-gradient(90deg, transparent, #00ff8066, transparent); /* Made more visible */
+  height: 3px; 
+  filter: drop-shadow(0 0 5px #00ff80);
+}
+
+/* .circuit-dot {
+  position: absolute;
+  width: 8px; 
+  height: 8px;
+  background: #00ff80;
+  border-radius: 50%;
+  box-shadow: 0 0 15px #00ff80; 
+  z-index: 1;
+} */
+
+@keyframes vineGrow {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0.5; 
+  }
+}
+
+.matrix-letter {
+  opacity: 0;
+  transform: translateY(-20px) scale(2);
+}
+
+@keyframes fall {
+  0% {
+    opacity: 1;
+    transform: translateY(-20px) scale(2);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translateY(50vh) scale(1.5);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100vh) scale(1);
+  }
+}