create eletrocast-eleicoes

1 files changed, 113 insertions, 0 deletions

diff --git a/app/votar/page.tsx b/app/votar/page.tsx
new file mode 100644
index 0000000..8946f73
--- /dev/null
+++ b/app/votar/page.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function VotarPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const rm = searchParams.get("rm") || "";
+  const nome = searchParams.get("nome") || "";
+  const cpf = searchParams.get("cpf") || "";
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [audioContext, setAudioContext] = useState<AudioContext | null>(null);
+
+  useEffect(() => {
+    if (!rm || !nome || !cpf) {
+      router.push("/");
+      return;
+    }
+
+    setAudioContext(
+      new (window.AudioContext || (window as any).webkitContext)()
+    );
+  }, [rm, nome, cpf, router]);
+
+  const handleVote = (option: string) => {
+    setSelectedOption(option);
+
+    if (!audioContext) return;
+
+    const oscillator = audioContext.createOscillator();
+    const gainNode = audioContext.createGain();
+
+    oscillator.type = "sine";
+    oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
+    gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
+
+    oscillator.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+
+    oscillator.start();
+    oscillator.stop(audioContext.currentTime + 0.2);
+
+    setTimeout(() => {
+      router.push(
+        `/obrigado?rm=${rm}&nome=${encodeURIComponent(
+          nome
+        )}&cpf=${cpf}&option=${option}`
+      );
+    }, 500);
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa]">
+      <div className="w-full max-w-md">
+        <div className="mb-6 flex items-center justify-center">
+          <div className="flex flex-col items-center">
+            <div className="mb-2 text-center text-3xl font-bold text-[#004a93]">
+              JUSTIÇA ELEITORAL
+            </div>
+            <div className="h-2 w-full bg-gradient-to-r from-[#009c3b] via-[#ffdf00] to-[#002776]"></div>
+          </div>
+        </div>
+
+        <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden">
+          <CardHeader className="bg-[#004a93] text-center text-white">
+            <CardTitle className="text-2xl">SEU VOTO PARA</CardTitle>
+            <CardDescription className="text-gray-100">
+              CHAPA DO GREMIO ESTUDANTIL
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6 p-6 rounded-b-lg">
+            <div className="grid grid-cols-2 gap-6">
+              <Button
+                onClick={() => handleVote("SIE")}
+                className="flex h-40 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-xl font-bold text-[#004a93] hover:bg-[#e6f0fa]"
+                variant="outline"
+              >
+                <div className="mb-2 text-4xl">1</div>
+                SIE
+              </Button>
+              <Button
+                onClick={() => handleVote("Liderança Jovem")}
+                className="flex h-40 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-xl font-bold text-[#004a93] hover:bg-[#e6f0fa]"
+                variant="outline"
+              >
+                <div className="mb-2 text-4xl">2</div>
+                Liderança Jovem
+              </Button>
+            </div>
+            <div className="mt-4 text-center text-sm text-[#004a93]">
+              Toque no quadro correspondente para VOTAR
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="mt-4 flex justify-center">
+          <div className="text-center text-sm text-[#004a93]">
+            © {new Date().getFullYear()} Justiça Eleitoral Estudantil
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}