1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
"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);
const [audioElement, setAudioElement] = useState<HTMLAudioElement>()
useEffect(() => {
if (!rm || !nome || !cpf) {
router.push("/");
return;
}
// setAudioContext(
// new (window.AudioContext || (window as any).webkitContext)()
// );
const audio = new Audio('/confirma.mp3')
setAudioElement(audio)
}, [rm, nome, cpf, router]);
const handleVote = (option: string) => {
setSelectedOption(option);
if (!audioElement) return;
audioElement.play()
// 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>
);
}
|
