├── .gitignore
├── .env.example
├── src
    ├── data
    │   └── votes.json
    ├── app.ts
    ├── config
    │   └── fluvio.ts
    └── routes
    │   └── vote.ts
├── tsconfig.json
├── package.json
├── LICENSE
├── README.md
└── public
    ├── vote.html
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | \node_modules
2 | .env


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | PORT=8000
2 | FLUVIO_TOPIC=vote-topic


--------------------------------------------------------------------------------
/src/data/votes.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "A": [
 3 |     "Anand",
 4 |     "Anan",
 5 |     "Kom1"
 6 |   ],
 7 |   "B": [
 8 |     "Anon"
 9 |   ],
10 |   "C": [
11 |     "Kom"
12 |   ],
13 |   "D": [],
14 |   "E": []
15 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES6",
 4 |     "module": "CommonJS",
 5 |     "strict": true,
 6 |     "esModuleInterop": true,
 7 |     "outDir": "./dist",
 8 |     "rootDir": "./src",
 9 |     "resolveJsonModule": true,
10 |     "skipLibCheck": true
11 |   },
12 |   "include": ["src/**/*"],
13 |   "exclude": ["node_modules"]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import cors from "cors";
 3 | import dotenv from "dotenv";
 4 | import path from "path";
 5 | import voteRoutes from "./routes/vote";
 6 | import { getVotes, initializeFluvio } from "./config/fluvio";
 7 | 
 8 | dotenv.config();
 9 | const port = process.env.PORT || 8000;
10 | 
11 | const app = express();
12 | app.use(express.json());
13 | app.use(cors());
14 | app.use(express.static(path.join(__dirname, "../public")));
15 | 
16 | app.use("/api/vote", voteRoutes);
17 | 
18 | app.listen(port, () => {
19 |   console.log(`Server running on port ${port}`);
20 |   initializeFluvio();
21 | });
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "backend",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "scripts": {
 6 |     "test": "echo \"Error: no test specified\" && exit 1",
 7 |     "start": "tsc && node dist/app.js",
 8 |     "dev": "ts-node-dev src/app.ts"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "description": "",
14 |   "devDependencies": {
15 |     "@types/cors": "^2.8.17",
16 |     "@types/express": "^4.17.21",
17 |     "@types/node": "^22.4.0",
18 |     "@types/ws": "^8.5.12",
19 |     "nodemon": "^3.1.4",
20 |     "ts-node": "^10.9.2",
21 |     "ts-node-dev": "^2.0.0",
22 |     "typescript": "^5.5.4"
23 |   },
24 |   "dependencies": {
25 |     "@fluvio/client": "^0.14.9",
26 |     "cors": "^2.8.5",
27 |     "dotenv": "^16.4.5",
28 |     "express": "^4.19.2",
29 |     "ws": "^8.18.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 K Om Senapati 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/config/fluvio.ts:
--------------------------------------------------------------------------------
 1 | import Fluvio, { Offset } from "@fluvio/client";
 2 | import dotenv from "dotenv";
 3 | 
 4 | dotenv.config();
 5 | 
 6 | const FLUVIO_TOPIC = process.env.FLUVIO_TOPIC || "vote-topic";
 7 | const PARTITION = 0;
 8 | 
 9 | export const initializeFluvio = async () => {
10 |   try {
11 |     const fluvio = new Fluvio();
12 |     await fluvio.connect();
13 |     console.log("Fluvio initialized");
14 |   } catch (error) {
15 |     console.error("Failed to initialize Fluvio:", error);
16 |   }
17 | };
18 | 
19 | export const getConsumer = async () => {
20 |   const fluvio = new Fluvio();
21 |   await fluvio.connect();
22 |   const consumer = await fluvio.partitionConsumer(FLUVIO_TOPIC, PARTITION);
23 |   return consumer;
24 | };
25 | 
26 | const getProducer = async () => {
27 |   const fluvio = new Fluvio();
28 |   await fluvio.connect();
29 |   const producer = await fluvio.topicProducer(FLUVIO_TOPIC);
30 |   return producer;
31 | };
32 | 
33 | export const sendVote = async (candidate: string) => {
34 |   const producer = await getProducer();
35 |   await producer.send("candidate", JSON.stringify(candidate));
36 | };
37 | 
38 | export const getVotes = async () => {
39 |   const votes: string[] = [];
40 |   const consumer = await getConsumer();
41 | 
42 |   await consumer.stream(Offset.FromEnd(), async (record) => {
43 |     votes.push(record.valueString());
44 |   });
45 |   return votes;
46 | };
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # **Real-Time Vote App** 🎉
 2 | 
 3 | ![Real-Time Vote App](https://socialify.git.ci/kom-senapati/real-time-voting-app/image?font=KoHo&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Light)
 4 | 
 5 | ## **Description:**
 6 | 
 7 | The Real-Time Vote App provides a seamless voting experience with live updates using Fluvio and Server-Sent Events (SSE). Users can cast their votes in real-time and watch as the results update dynamically. This application showcases modern web technologies and real-time data handling, making voting engaging and immediate.
 8 | 
 9 | ## **Tech Stack:**
10 | 
11 | [![My Skills](https://skillicons.dev/icons?i=ts,nodejs,expressjs,html,tailwindcss)](https://skillicons.dev)
12 | 
13 | - Chart JS
14 | - Fluvio
15 | 
16 | ## **Features:**
17 | 
18 | - **Real-Time Voting:** 🗳️ See live updates on voting results as votes are cast.
19 | - **Dynamic Charting:** 📊 View and interact with real-time charts using Chart.js.
20 | 
21 | <details>
22 | <summary><h1><b>Screenshots:</b></h1></summary>
23 | 
24 | ![image](https://github.com/user-attachments/assets/9acee59c-70b8-4241-90ed-110c942e079d)
25 | ![image](https://github.com/user-attachments/assets/d086a687-9d91-4aec-9430-eb7a9cfcfe7b)
26 | ![image](https://github.com/user-attachments/assets/9b1ca939-faf4-41c3-b41c-0f37333fed90)
27 | 
28 | </details>
29 | 
30 | ## **Demo Video:**
31 | 
32 | [![YouTube](http://i.ytimg.com/vi/vIrSBFoPjvk/hqdefault.jpg)](https://www.youtube.com/watch?v=vIrSBFoPjvk)
33 | 
34 | ## **Getting Started:**
35 | 
36 | To get started with the Real-Time Vote App:
37 | 
38 | 1. **Install Fluvio**: Open Terminal and run the following command:
39 | 
40 |    ```bash
41 |    curl -fsS https://hub.infinyon.cloud/install/install.sh | bash
42 |    ```
43 | 
44 | 2. **Add Fluvio to your path**:
45 | 
46 |    ```bash
47 |    echo 'export PATH="${HOME}/.fvm/bin:${HOME}/.fluvio/bin:${PATH}"' >> ~/.bashrc
48 |    echo 'source "${HOME}/.fvm/env"' >> ~/.bashrc
49 |    ```
50 | 
51 | 3. **Source the new .bashrc file**:
52 | 
53 |    ```bash
54 |    source ~/.bashrc
55 |    ```
56 | 
57 | 4. **Start the Fluvio cluster and create a topic**: Follow the instructions at [Fluvio GitHub](https://github.com/infinyon/fluvio):
58 | 
59 |    ```bash
60 |    fluvio cluster start
61 |    fluvio topic create vote-topic
62 |    ```
63 | 
64 | 5. **Install dependencies**:
65 | 
66 |    ```bash
67 |    npm install
68 |    ```
69 | 
70 | 6. **Run the development server**:
71 |    ```bash
72 |    npm run dev
73 |    ```
74 | 
75 | ## **About the Author:**
76 | 
77 | Hi, I'm K Om Senapati! 👋  
78 | Connect with me on [LinkedIn](https://www.linkedin.com/in/kom-senapati/), [X](https://x.com/kom_senapati) and check out my other projects on [GitHub](https://github.com/kom-senapati).
79 | 


--------------------------------------------------------------------------------
/src/routes/vote.ts:
--------------------------------------------------------------------------------
  1 | import express, { Request, Response } from "express";
  2 | import { getConsumer, sendVote } from "../config/fluvio";
  3 | import { Offset, type Record } from "@fluvio/client";
  4 | import fs from "fs";
  5 | import path from "path";
  6 | 
  7 | const router = express.Router();
  8 | 
  9 | const votesFilePath = path.join(__dirname, "../data/votes.json");
 10 | 
 11 | interface VotesData {
 12 |   [candidate: string]: string[];
 13 | }
 14 | 
 15 | interface SubmitRequestBody {
 16 |   candidate?: string;
 17 |   user: string;
 18 |   action: "create" | "update" | "delete";
 19 | }
 20 | 
 21 | router.post(
 22 |   "/submit",
 23 |   async (req: Request<{}, {}, SubmitRequestBody>, res: Response) => {
 24 |     let { candidate, user, action } = req.body;
 25 |     let oldParty = "";
 26 | 
 27 |     if (!candidate && action !== "delete") {
 28 |       return res.status(400).send({ error: "Candidate is required." });
 29 |     }
 30 | 
 31 |     if (!user) {
 32 |       return res.status(400).send({ error: "User is required." });
 33 |     }
 34 | 
 35 |     if (!["create", "update", "delete"].includes(action)) {
 36 |       return res.status(400).send({ error: "Invalid action." });
 37 |     }
 38 | 
 39 |     try {
 40 |       const votesData: VotesData = JSON.parse(
 41 |         fs.readFileSync(votesFilePath, "utf8")
 42 |       );
 43 |       const hasVoted = Object.values(votesData).some((voters: string[]) =>
 44 |         voters.includes(user)
 45 |       );
 46 | 
 47 |       if (action === "create") {
 48 |         if (hasVoted) {
 49 |           return res.status(400).send({ error: "User has already voted." });
 50 |         }
 51 | 
 52 |         if (!votesData[candidate!]) {
 53 |           votesData[candidate!] = [];
 54 |         }
 55 |         votesData[candidate!].push(user);
 56 |       } else if (action === "update") {
 57 |         if (!hasVoted) {
 58 |           return res.status(400).send({ error: "User has not voted yet." });
 59 |         }
 60 | 
 61 |         for (const key of Object.keys(votesData)) {
 62 |           if (votesData[key].includes(user)) {
 63 |             if (votesData[key].includes(user)) {
 64 |               votesData[key] = votesData[key].filter(
 65 |                 (voter: string) => voter !== user
 66 |               );
 67 |               oldParty = key;
 68 |               break;
 69 |             }
 70 |           }
 71 |         }
 72 | 
 73 |         if (!votesData[candidate!]) {
 74 |           votesData[candidate!] = [];
 75 |         }
 76 |         votesData[candidate!].push(user);
 77 |       } else if (action === "delete") {
 78 |         if (!hasVoted) {
 79 |           return res.status(400).send({ error: "User has not voted yet." });
 80 |         }
 81 | 
 82 |         for (const key of Object.keys(votesData)) {
 83 |           if (votesData[key].includes(user)) {
 84 |             votesData[key] = votesData[key].filter(
 85 |               (voter: string) => voter !== user
 86 |             );
 87 |             candidate = key;
 88 |           }
 89 |         }
 90 |       }
 91 | 
 92 |       fs.writeFileSync(votesFilePath, JSON.stringify(votesData, null, 2));
 93 | 
 94 |       const eventData = `${user}:${action}:${candidate}:${oldParty}`;
 95 |       await sendVote(JSON.stringify(eventData));
 96 | 
 97 |       res
 98 |         .status(200)
 99 |         .send({ message: "Vote operation completed successfully." });
100 |     } catch (error) {
101 |       console.error("Error submitting vote:", error);
102 |       res.status(500).send({ error: "Failed to perform vote operation." });
103 |     }
104 |   }
105 | );
106 | 
107 | router.get("/stream", async (_req: Request, res: Response) => {
108 |   try {
109 |     res.setHeader("Access-Control-Allow-Origin", "*");
110 |     res.setHeader("Cache-Control", "no-cache");
111 |     res.setHeader("Content-Type", "text/event-stream;");
112 |     res.setHeader("Connection", "keep-alive");
113 |     res.setHeader("X-Accel-Buffering", "no");
114 |     res.flushHeaders();
115 | 
116 |     const consumer = await getConsumer();
117 |     await consumer.stream(Offset.FromEnd(), async (record: Record) => {
118 |       const eventData = record.valueString();
119 |       res.write(`data: ${eventData}\n\n`);
120 |     });
121 | 
122 |     res.on("close", () => {
123 |       res.end();
124 |     });
125 |   } catch (error) {
126 |     console.log(error);
127 |     return res.status(500).json({
128 |       error: error,
129 |     });
130 |   }
131 | });
132 | 
133 | router.get("/", async (_req: Request, res: Response) => {
134 |   try {
135 |     const votesData = JSON.parse(fs.readFileSync(votesFilePath, "utf8"));
136 | 
137 |     const voteCounts: { [key: string]: number } = {};
138 |     for (const candidate in votesData) {
139 |       voteCounts[candidate] = votesData[candidate].length;
140 |     }
141 | 
142 |     res.status(200).send(voteCounts);
143 |   } catch (error) {
144 |     console.error("Error fetching vote counts:", error);
145 |     res.status(500).send({ error: "Failed to fetch vote counts." });
146 |   }
147 | });
148 | 
149 | export default router;
150 | 


--------------------------------------------------------------------------------
/public/vote.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Real-Time Vote App</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 10 |     <link
 11 |       rel="stylesheet"
 12 |       href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
 13 |     />
 14 |   </head>
 15 | 
 16 |   <body class="bg-gray-100 flex items-center justify-center h-screen m-0">
 17 |     <a href="/" class="absolute top-4 left-4">
 18 |       <button
 19 |         type="button"
 20 |         class="bg-white text-center w-48 rounded-2xl h-14 relative font-sans text-black text-xl font-semibold group"
 21 |       >
 22 |         <div
 23 |           class="bg-green-400 rounded-xl h-12 w-1/4 flex items-center justify-center absolute left-1 top-[4px] group-hover:w-[184px] z-10 duration-500"
 24 |         >
 25 |           <svg
 26 |             width="25px"
 27 |             height="25px"
 28 |             viewBox="0 0 1024 1024"
 29 |             xmlns="http://www.w3.org/2000/svg"
 30 |           >
 31 |             <path
 32 |               fill="#000000"
 33 |               d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z"
 34 |             ></path>
 35 |             <path
 36 |               fill="#000000"
 37 |               d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
 38 |             ></path>
 39 |           </svg>
 40 |         </div>
 41 |         <p class="translate-x-2">Back</p>
 42 |       </button>
 43 |     </a>
 44 | 
 45 |     <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md text-center">
 46 |       <h1 class="text-2xl font-bold mb-4">Vote for Your Favorite Party</h1>
 47 | 
 48 |       <div class="mb-4">
 49 |         <input
 50 |           type="text"
 51 |           id="userName"
 52 |           placeholder="Enter your name"
 53 |           class="text-gray-700 border border-gray-300 rounded-lg py-2 px-4 w-full"
 54 |         />
 55 |       </div>
 56 | 
 57 |       <div id="results" class="mb-4">
 58 |         <canvas id="voteChart"></canvas>
 59 |       </div>
 60 | 
 61 |       <div class="mb-4">
 62 |         <select
 63 |           id="partyDropdown"
 64 |           class="text-gray-700 border border-gray-300 rounded-lg py-2 px-4 w-full"
 65 |         >
 66 |           <option value="" disabled selected>Select Party</option>
 67 |           <option value="A">Party A</option>
 68 |           <option value="B">Party B</option>
 69 |           <option value="C">Party C</option>
 70 |           <option value="D">Party D</option>
 71 |           <option value="E">Party E</option>
 72 |         </select>
 73 |       </div>
 74 | 
 75 |       <div class="flex gap-4">
 76 |         <button
 77 |           id="voteButton"
 78 |           class="bg-blue-500 text-white py-2 px-4 rounded w-full opacity-50 cursor-not-allowed"
 79 |           disabled
 80 |         >
 81 |           Vote
 82 |         </button>
 83 |         <button
 84 |           id="updateButton"
 85 |           class="bg-yellow-500 text-white py-2 px-4 rounded w-full opacity-50 cursor-not-allowed"
 86 |           disabled
 87 |         >
 88 |           Update
 89 |         </button>
 90 |         <button
 91 |           id="deleteButton"
 92 |           class="bg-red-500 text-white py-2 px-4 rounded w-full opacity-50 cursor-not-allowed"
 93 |           disabled
 94 |         >
 95 |           Delete
 96 |         </button>
 97 |       </div>
 98 |     </div>
 99 | 
100 |     <script>
101 |       const protocol =
102 |         window.location.protocol === "https:" ? "https:" : "http:";
103 |       const eventSourceUrl = `${protocol}//${window.location.host}/api/vote/stream`;
104 |       const votes = ["A", "B", "C", "D", "E"];
105 |       const ctx = document.getElementById("voteChart").getContext("2d");
106 |       const voteChart = new Chart(ctx, {
107 |         type: "bar",
108 |         data: {
109 |           labels: ["Party A", "Party B", "Party C", "Party D", "Party E"],
110 |           datasets: [
111 |             {
112 |               label: "Votes",
113 |               data: [0, 0, 0, 0, 0],
114 |               backgroundColor: [
115 |                 "#FF5733",
116 |                 "#33FF57",
117 |                 "#3357FF",
118 |                 "#F1C40F",
119 |                 "#8E44AD",
120 |               ],
121 |               borderColor: [
122 |                 "#FF5733",
123 |                 "#33FF57",
124 |                 "#3357FF",
125 |                 "#F1C40F",
126 |                 "#8E44AD",
127 |               ],
128 |               borderWidth: 1,
129 |             },
130 |           ],
131 |         },
132 |         options: {
133 |           responsive: true,
134 |           scales: {
135 |             y: {
136 |               beginAtZero: true,
137 |             },
138 |           },
139 |         },
140 |       });
141 | 
142 |       fetch("/api/vote")
143 |         .then((response) => response.json())
144 |         .then((data) => {
145 |           const votes = ["A", "B", "C", "D", "E"];
146 |           votes.forEach((party, index) => {
147 |             if (data[party] !== undefined) {
148 |               voteChart.data.datasets[0].data[index] = data[party];
149 |             }
150 |           });
151 |           voteChart.update();
152 |         })
153 |         .catch((error) => {
154 |           console.error("Error fetching initial vote counts:", error);
155 |         });
156 | 
157 |       const eventSource = new EventSource(eventSourceUrl);
158 | 
159 |       eventSource.onopen = () => {
160 |         console.log("Connection to server opened.");
161 |       };
162 | 
163 |       eventSource.onmessage = function (event) {
164 |         let dataString = event.data;
165 |         dataString = dataString.replace(/\\|\"/g, "");
166 |         const [name, action, vote, old] = dataString.split(":");
167 |         const voteIndex = votes.indexOf(vote);
168 |         const oldVoteIndex = votes.indexOf(old);
169 | 
170 |         if (voteIndex === -1 || (action === "update" && oldVoteIndex === -1)) {
171 |           console.error("Unexpected vote data:", vote);
172 |           return;
173 |         }
174 | 
175 |         const currentData = voteChart.data.datasets[0].data;
176 | 
177 |         if (action === "create") {
178 |           currentData[voteIndex]++;
179 |         } else if (action === "delete") {
180 |           currentData[voteIndex] = Math.max(0, currentData[voteIndex] - 1);
181 |         } else if (action === "update") {
182 |           currentData[oldVoteIndex] = Math.max(
183 |             0,
184 |             currentData[oldVoteIndex] - 1
185 |           );
186 |           currentData[voteIndex]++;
187 |         }
188 | 
189 |         voteChart.update();
190 |       };
191 | 
192 |       eventSource.onerror = function (error) {
193 |         console.error("EventSource error:", error);
194 |       };
195 | 
196 |       const userNameInput = document.getElementById("userName");
197 |       const voteButton = document.getElementById("voteButton");
198 |       const updateButton = document.getElementById("updateButton");
199 |       const deleteButton = document.getElementById("deleteButton");
200 | 
201 |       function toggleButtonState() {
202 |         const isEnabled = userNameInput.value.trim() !== "";
203 |         voteButton.classList.toggle("opacity-50", !isEnabled);
204 |         voteButton.classList.toggle("cursor-not-allowed", !isEnabled);
205 |         voteButton.disabled = !isEnabled;
206 | 
207 |         updateButton.classList.toggle("opacity-50", !isEnabled);
208 |         updateButton.classList.toggle("cursor-not-allowed", !isEnabled);
209 |         updateButton.disabled = !isEnabled;
210 | 
211 |         deleteButton.classList.toggle("opacity-50", !isEnabled);
212 |         deleteButton.classList.toggle("cursor-not-allowed", !isEnabled);
213 |         deleteButton.disabled = !isEnabled;
214 |       }
215 | 
216 |       userNameInput.addEventListener("input", toggleButtonState);
217 | 
218 |       function handleAction(action) {
219 |         const party = document.getElementById("partyDropdown").value;
220 |         const userName = userNameInput.value.trim();
221 | 
222 |         if (!party && action !== "delete") {
223 |           showToast("Please select a party to perform the action.", "error");
224 |           return;
225 |         }
226 | 
227 |         fetch(`/api/vote/submit`, {
228 |           method: "POST",
229 |           headers: {
230 |             "Content-Type": "application/json",
231 |           },
232 |           body: JSON.stringify({ candidate: party, user: userName, action }),
233 |         })
234 |           .then((response) => {
235 |             if (!response.ok) {
236 |               return response.json().then((data) => {
237 |                 throw new Error(data.error || "Error submitting action.");
238 |               });
239 |             }
240 |             return response.json();
241 |           })
242 |           .then(() => {
243 |             showToast(
244 |               `Thank you, ${userName}. Your action ${action} on Party ${party} was successful.`,
245 |               "success"
246 |             );
247 |           })
248 |           .catch((error) => {
249 |             console.error(`Error performing ${action}:`, error);
250 |             showToast(error.message, "error");
251 |           });
252 |       }
253 | 
254 |       voteButton.addEventListener("click", () => handleAction("create"));
255 |       updateButton.addEventListener("click", () => handleAction("update"));
256 |       deleteButton.addEventListener("click", () => handleAction("delete"));
257 | 
258 |       function showToast(message, type) {
259 |         Toastify({
260 |           text: message,
261 |           duration: 3000,
262 |           close: true,
263 |           gravity: "top",
264 |           position: "right",
265 |           backgroundColor: type === "success" ? "seagreen" : "indianred",
266 |           stopOnFocus: true,
267 |         }).showToast();
268 |       }
269 |     </script>
270 |   </body>
271 | </html>
272 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Real-Time Vote App - Landing Page</title>
  7 |     <script src="https://cdn.tailwindcss.com"></script>
  8 |     <link
  9 |       rel="stylesheet"
 10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
 11 |     />
 12 |     <style>
 13 |       #get-in-touch {
 14 |         position: relative;
 15 |         padding: 12px 35px;
 16 |         background: #4c83fa;
 17 |         font-size: 17px;
 18 |         font-weight: 1000;
 19 |         color: #ffffff;
 20 |         border: 3px solid #4c83fa;
 21 |         border-radius: 8px;
 22 |         box-shadow: 0 0 0 #ffffff;
 23 |         transition: all 0.3s ease-in-out;
 24 |         cursor: pointer;
 25 |       }
 26 | 
 27 |       .star-1 {
 28 |         position: absolute;
 29 |         top: 20%;
 30 |         left: 20%;
 31 |         width: 25px;
 32 |         height: auto;
 33 |         filter: drop-shadow(0 0 0 #4c83fa);
 34 |         z-index: -5;
 35 |         transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
 36 |       }
 37 | 
 38 |       .star-2 {
 39 |         position: absolute;
 40 |         top: 45%;
 41 |         left: 45%;
 42 |         width: 15px;
 43 |         height: auto;
 44 |         filter: drop-shadow(0 0 0 #4c83fa);
 45 |         z-index: -5;
 46 |         transition: all 1scubic-bezier(0, 0.4, 0, 1.01);
 47 |       }
 48 | 
 49 |       .star-3 {
 50 |         position: absolute;
 51 |         top: 40%;
 52 |         left: 40%;
 53 |         width: 5px;
 54 |         height: auto;
 55 |         filter: drop-shadow(0 0 0 #4c83fa);
 56 |         z-index: -5;
 57 |         transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
 58 |       }
 59 | 
 60 |       .star-4 {
 61 |         position: absolute;
 62 |         top: 20%;
 63 |         left: 40%;
 64 |         width: 8px;
 65 |         height: auto;
 66 |         filter: drop-shadow(0 0 0 #4c83fa);
 67 |         z-index: -5;
 68 |         transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
 69 |       }
 70 | 
 71 |       .star-5 {
 72 |         position: absolute;
 73 |         top: 25%;
 74 |         left: 45%;
 75 |         width: 15px;
 76 |         height: auto;
 77 |         filter: drop-shadow(0 0 0 #4c83fa);
 78 |         z-index: -5;
 79 |         transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
 80 |       }
 81 | 
 82 |       .star-6 {
 83 |         position: absolute;
 84 |         top: 5%;
 85 |         left: 50%;
 86 |         width: 5px;
 87 |         height: auto;
 88 |         filter: drop-shadow(0 0 0 #4c83fa);
 89 |         z-index: -5;
 90 |         transition: all 0.8s ease;
 91 |       }
 92 | 
 93 |       #get-in-touch:hover {
 94 |         background: transparent;
 95 |         color: #4c83fa;
 96 |         box-shadow: 0 0 0px #4c83fa;
 97 |       }
 98 | 
 99 |       #get-in-touch:hover .star-1 {
100 |         position: absolute;
101 |         top: -80%;
102 |         left: -30%;
103 |         width: 25px;
104 |         height: auto;
105 |         filter: drop-shadow(0 0 0px #4c83fa);
106 |         z-index: 2;
107 |       }
108 | 
109 |       #get-in-touch:hover .star-2 {
110 |         position: absolute;
111 |         top: -0%;
112 |         left: 10%;
113 |         width: 15px;
114 |         height: auto;
115 |         filter: drop-shadow(0 0 0px #4c83fa);
116 |         z-index: 2;
117 |       }
118 | 
119 |       #get-in-touch:hover .star-3 {
120 |         position: absolute;
121 |         top: 55%;
122 |         left: 25%;
123 |         width: 5px;
124 |         height: auto;
125 |         filter: drop-shadow(0 0 0px #4c83fa);
126 |         z-index: 2;
127 |       }
128 | 
129 |       #get-in-touch:hover .star-4 {
130 |         position: absolute;
131 |         top: 30%;
132 |         left: 80%;
133 |         width: 8px;
134 |         height: auto;
135 |         filter: drop-shadow(0 0 0px #4c83fa);
136 |         z-index: 2;
137 |       }
138 | 
139 |       #get-in-touch:hover .star-5 {
140 |         position: absolute;
141 |         top: 25%;
142 |         left: 115%;
143 |         width: 15px;
144 |         height: auto;
145 |         filter: drop-shadow(0 0 0px #4c83fa);
146 |         z-index: 2;
147 |       }
148 | 
149 |       #get-in-touch:hover .star-6 {
150 |         position: absolute;
151 |         top: 5%;
152 |         left: 60%;
153 |         width: 5px;
154 |         height: auto;
155 |         filter: drop-shadow(0 0 0px #4c83fa);
156 |         z-index: 2;
157 |       }
158 | 
159 |       .fil0 {
160 |         fill: #4c83fa;
161 |       }
162 |     </style>
163 |   </head>
164 | 
165 |   <body class="bg-gray-50 text-gray-800 font-sans">
166 |     <nav class="bg-white text-blue-600 p-4 shadow-md">
167 |       <div class="container mx-auto flex items-center justify-between">
168 |         <h1 class="text-xl font-bold">Real-Time Vote App</h1>
169 |         <div class="flex items-center space-x-4 lg:space-x-6">
170 |           <!-- Desktop Menu -->
171 |           <div class="hidden lg:flex space-x-4">
172 |             <a href="#features" class="hover:underline">Features</a>
173 |             <a href="#tech-stack" class="hover:underline">Tech Stack</a>
174 |             <a href="#contact" class="hover:underline">Contact</a>
175 |           </div>
176 |           <!-- Mobile Menu Button -->
177 |           <button
178 |             class="lg:hidden flex items-center px-2 py-1 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
179 |             id="menu-button"
180 |           >
181 |             <svg
182 |               class="w-6 h-6"
183 |               fill="none"
184 |               stroke="currentColor"
185 |               viewBox="0 0 24 24"
186 |               xmlns="http://www.w3.org/2000/svg"
187 |             >
188 |               <path
189 |                 stroke-linecap="round"
190 |                 stroke-linejoin="round"
191 |                 stroke-width="2"
192 |                 d="M4 6h16M4 12h16m-7 6h7"
193 |               ></path>
194 |             </svg>
195 |           </button>
196 |         </div>
197 |       </div>
198 |       <!-- Mobile Menu -->
199 |       <div
200 |         class="lg:hidden fixed inset-0 bg-white shadow-md z-50 hidden"
201 |         id="mobile-menu"
202 |       >
203 |         <div class="flex justify-between items-center p-4">
204 |           <h1 class="text-xl font-bold">Real-Time Vote App</h1>
205 |           <button class="text-blue-600" id="close-menu">
206 |             <svg
207 |               class="w-6 h-6"
208 |               fill="none"
209 |               stroke="currentColor"
210 |               viewBox="0 0 24 24"
211 |               xmlns="http://www.w3.org/2000/svg"
212 |             >
213 |               <path
214 |                 stroke-linecap="round"
215 |                 stroke-linejoin="round"
216 |                 stroke-width="2"
217 |                 d="M6 18L18 6M6 6l12 12"
218 |               ></path>
219 |             </svg>
220 |           </button>
221 |         </div>
222 |         <div class="flex flex-col items-center space-y-4 py-4">
223 |           <a href="#features" class="text-blue-600 hover:underline">Features</a>
224 |           <a href="#tech-stack" class="text-blue-600 hover:underline"
225 |             >Tech Stack</a
226 |           >
227 |           <a href="#contact" class="text-blue-600 hover:underline">Contact</a>
228 |         </div>
229 |       </div>
230 |     </nav>
231 | 
232 |     <section
233 |       class="relative bg-cover bg-center h-screen"
234 |       style="
235 |         background-image: url('https://cdn.prod.website-files.com/666bbba4ff7240a20f4cccf8/666bbba4ff7240a20f4ce41d_Real-time-data-analytics.png');
236 |       "
237 |     >
238 |       <div class="absolute inset-0 bg-black opacity-50"></div>
239 |       <div
240 |         class="relative container mx-auto h-full flex flex-col justify-center items-center text-center text-white px-4"
241 |       >
242 |         <h2 class="text-4xl md:text-5xl font-bold mb-4">
243 |           Welcome to the Real-Time Vote App
244 |         </h2>
245 |         <p class="text-lg md:text-xl mb-8">
246 |           This app provides real-time voting results using Fluvio and
247 |           Server-Sent Events (SSE).
248 |         </p>
249 |         <a href="vote.html">
250 |           <button
251 |             class="overflow-hidden relative w-32 p-2 h-12 bg-black text-white border-none rounded-md text-xl font-bold cursor-pointer relative z-10 group"
252 |           >
253 |             Get
254 |             <span
255 |               class="absolute w-36 h-32 -top-8 -left-2 bg-white rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-500 duration-1000 origin-left"
256 |             ></span>
257 |             <span
258 |               class="absolute w-36 h-32 -top-8 -left-2 bg-indigo-400 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-700 duration-700 origin-left"
259 |             ></span>
260 |             <span
261 |               class="absolute w-36 h-32 -top-8 -left-2 bg-indigo-600 rotate-12 transform scale-x-0 group-hover:scale-x-50 transition-transform group-hover:duration-1000 duration-500 origin-left"
262 |             ></span>
263 |             <span
264 |               class="group-hover:opacity-100 group-hover:duration-1000 duration-100 opacity-0 absolute top-2.5 left-6 z-10"
265 |               >Started</span
266 |             >
267 |           </button>
268 |         </a>
269 |       </div>
270 |     </section>
271 | 
272 |     <section id="features" class="py-16 bg-gray-100">
273 |       <div class="container mx-auto text-center">
274 |         <h3 class="text-3xl font-bold mb-8">Features</h3>
275 |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
276 |           <div class="bg-white p-6 rounded-lg shadow-md">
277 |             <h4 class="text-xl font-bold mb-2">Real-Time Chart</h4>
278 |             <p>
279 |               Display real-time voting data using dynamic charts that update
280 |               instantly.
281 |             </p>
282 |           </div>
283 |           <div class="bg-white p-6 rounded-lg shadow-md">
284 |             <h4 class="text-xl font-bold mb-2">Fluvio for Real-Time</h4>
285 |             <p>
286 |               Utilize Fluvio, a powerful real-time data platform for live vote
287 |               streaming.
288 |             </p>
289 |           </div>
290 |           <div class="bg-white p-6 rounded-lg shadow-md">
291 |             <h4 class="text-xl font-bold mb-2">JSON Management</h4>
292 |             <p>
293 |               Efficiently manage votes using JSON for data handling and
294 |               processing.
295 |             </p>
296 |           </div>
297 |         </div>
298 |       </div>
299 |     </section>
300 | 
301 |     <section id="tech-stack" class="py-16">
302 |       <div class="container mx-auto text-center">
303 |         <h3 class="text-3xl font-bold mb-8">Tech Stack</h3>
304 |         <div class="flex flex-wrap justify-center gap-4 mb-8">
305 |           <img
306 |             src="https://skillicons.dev/icons?i=nodejs"
307 |             alt="Node.js"
308 |             class="w-12 h-12"
309 |           />
310 |           <img
311 |             src="https://skillicons.dev/icons?i=typescript"
312 |             alt="TypeScript"
313 |             class="w-12 h-12"
314 |           />
315 |           <img
316 |             src="https://skillicons.dev/icons?i=html"
317 |             alt="HTML"
318 |             class="w-12 h-12"
319 |           />
320 |           <img
321 |             src="https://skillicons.dev/icons?i=tailwindcss"
322 |             alt="Tailwind CSS"
323 |             class="w-12 h-12"
324 |           />
325 |         </div>
326 |         <a
327 |           href="https://www.fluvio.io/docs/fluvio/quickstart/"
328 |           target="_blank"
329 |           class="text-blue-500"
330 |         >
331 |           Fluvio
332 |         </a>
333 |       </div>
334 |     </section>
335 | 
336 |     <section class="py-16 px-2">
337 |       <div
338 |         class="container mx-auto bg-yellow-200 text-center py-10 rounded-3xl"
339 |       >
340 |         <h2 class="text-4xl font-bold mb-6 text-black">Open Source</h2>
341 |         <p class="text-xl mb-6 text-black">
342 |           Our project is open source! Contribute and star us on GitHub.
343 |         </p>
344 |         <div class="flex flex-wrap justify-center gap-4">
345 |           <a
346 |             href="https://github.com/kom-senapati/real-time-voting-app"
347 |             class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 group bg-gray-900 text-white hover:bg-gray-800 transition-colors duration-200 ease-in-out"
348 |           >
349 |             <svg
350 |               class="mr-2 text-white"
351 |               stroke-linejoin="round"
352 |               stroke-linecap="round"
353 |               stroke-width="2"
354 |               stroke="currentColor"
355 |               fill="none"
356 |               viewBox="0 0 24 24"
357 |               height="24"
358 |               width="24"
359 |               xmlns="http://www.w3.org/2000/svg"
360 |             >
361 |               <path
362 |                 d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
363 |               ></path>
364 |               <path d="M9 18c-4.51 2-5-2-7-2"></path>
365 |             </svg>
366 |             <span>Star on GitHub</span>
367 |             <span class="flex items-center ml-2">
368 |               <svg
369 |                 class="text-yellow-500"
370 |                 stroke-linejoin="round"
371 |                 stroke-linecap="round"
372 |                 stroke-width="2"
373 |                 stroke="currentColor"
374 |                 fill="none"
375 |                 viewBox="0 0 24 24"
376 |                 height="24"
377 |                 width="24"
378 |                 xmlns="http://www.w3.org/2000/svg"
379 |               >
380 |                 <polygon
381 |                   points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
382 |                 ></polygon>
383 |               </svg>
384 |               <span class="ml-1">1</span>
385 |             </span>
386 |           </a>
387 |           <a
388 |             href="https://quira.sh/repo/kom-senapati-real-time-voting-app-844348560?utm_source=copy&utm_share_context=quests_creators"
389 |             class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium px-4 py-2 bg-green-900 text-white"
390 |           >
391 |             <span>👍 Vote on Quira</span>
392 |           </a>
393 |         </div>
394 |       </div>
395 |     </section>
396 | 
397 |     <section id="contact" class="py-16">
398 |       <div class="container mx-auto text-center">
399 |         <h3 class="text-3xl font-bold mb-8">Contact Me</h3>
400 |         <p class="text-lg mb-4">
401 |           For more information or inquiries, feel free to reach out.
402 |         </p>
403 |         <a href="https://github.com/kom-senapati" target="_blank">
404 |           <button id="get-in-touch">
405 |             Get in touch
406 |             <div class="star-1">
407 |               <svg
408 |                 xmlns="http://www.w3.org/2000/svg"
409 |                 xml:space="preserve"
410 |                 version="1.1"
411 |                 style="
412 |                   shape-rendering: geometricPrecision;
413 |                   text-rendering: geometricPrecision;
414 |                   image-rendering: optimizeQuality;
415 |                   fill-rule: evenodd;
416 |                   clip-rule: evenodd;
417 |                 "
418 |                 viewBox="0 0 784.11 815.53"
419 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
420 |               >
421 |                 <defs></defs>
422 |                 <g id="Layer_x0020_1">
423 |                   <metadata id="CorelCorpID_0Corel-Layer"></metadata>
424 |                   <path
425 |                     class="fil0"
426 |                     d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
427 |                   ></path>
428 |                 </g>
429 |               </svg>
430 |             </div>
431 |             <div class="star-2">
432 |               <svg
433 |                 xmlns="http://www.w3.org/2000/svg"
434 |                 xml:space="preserve"
435 |                 version="1.1"
436 |                 style="
437 |                   shape-rendering: geometricPrecision;
438 |                   text-rendering: geometricPrecision;
439 |                   image-rendering: optimizeQuality;
440 |                   fill-rule: evenodd;
441 |                   clip-rule: evenodd;
442 |                 "
443 |                 viewBox="0 0 784.11 815.53"
444 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
445 |               >
446 |                 <defs></defs>
447 |                 <g id="Layer_x0020_1">
448 |                   <metadata id="CorelCorpID_0Corel-Layer"></metadata>
449 |                   <path
450 |                     class="fil0"
451 |                     d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
452 |                   ></path>
453 |                 </g>
454 |               </svg>
455 |             </div>
456 |             <div class="star-3">
457 |               <svg
458 |                 xmlns="http://www.w3.org/2000/svg"
459 |                 xml:space="preserve"
460 |                 version="1.1"
461 |                 style="
462 |                   shape-rendering: geometricPrecision;
463 |                   text-rendering: geometricPrecision;
464 |                   image-rendering: optimizeQuality;
465 |                   fill-rule: evenodd;
466 |                   clip-rule: evenodd;
467 |                 "
468 |                 viewBox="0 0 784.11 815.53"
469 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
470 |               >
471 |                 <defs></defs>
472 |                 <g id="Layer_x0020_1">
473 |                   <metadata id="CorelCorpID_0Corel-Layer"></metadata>
474 |                   <path
475 |                     class="fil0"
476 |                     d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
477 |                   ></path>
478 |                 </g>
479 |               </svg>
480 |             </div>
481 |             <div class="star-4">
482 |               <svg
483 |                 xmlns="http://www.w3.org/2000/svg"
484 |                 xml:space="preserve"
485 |                 version="1.1"
486 |                 style="
487 |                   shape-rendering: geometricPrecision;
488 |                   text-rendering: geometricPrecision;
489 |                   image-rendering: optimizeQuality;
490 |                   fill-rule: evenodd;
491 |                   clip-rule: evenodd;
492 |                 "
493 |                 viewBox="0 0 784.11 815.53"
494 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
495 |               >
496 |                 <defs></defs>
497 |                 <g id="Layer_x0020_1">
498 |                   <metadata id="CorelCorpID_0Corel-Layer"></metadata>
499 |                   <path
500 |                     class="fil0"
501 |                     d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
502 |                   ></path>
503 |                 </g>
504 |               </svg>
505 |             </div>
506 |             <div class="star-5">
507 |               <svg
508 |                 xmlns="http://www.w3.org/2000/svg"
509 |                 xml:space="preserve"
510 |                 version="1.1"
511 |                 style="
512 |                   shape-rendering: geometricPrecision;
513 |                   text-rendering: geometricPrecision;
514 |                   image-rendering: optimizeQuality;
515 |                   fill-rule: evenodd;
516 |                   clip-rule: evenodd;
517 |                 "
518 |                 viewBox="0 0 784.11 815.53"
519 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
520 |               >
521 |                 <defs></defs>
522 |                 <g id="Layer_x0020_1">
523 |                   <metadata id="CorelCorpID_0Corel-Layer"></metadata>
524 |                   <path
525 |                     class="fil0"
526 |                     d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
527 |                   ></path>
528 |                 </g>
529 |               </svg>
530 |             </div>
531 |             <div class="star-6">
532 |               <svg
533 |                 xmlns="http://www.w3.org/2000/svg"
534 |                 xml:space="preserve"
535 |                 version="1.1"
536 |                 style="
537 |                   shape-rendering: geometricPrecision;
538 |                   text-rendering: geometricPrecision;
539 |                   image-rendering: optimizeQuality;
540 |                   fill-rule: evenodd;
541 |                   clip-rule: evenodd;
542 |                 "
543 |                 viewBox="0 0 784.11 815.53"
544 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
545 |               >
546 |                 <defs></defs>
547 |                 <g id="Layer_x0020_1">
548 |                   <metadata id="CorelCorpID_0Corel-Layer"></metadata>
549 |                   <path
550 |                     class="fil0"
551 |                     d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
552 |                   ></path>
553 |                 </g>
554 |               </svg>
555 |             </div>
556 |           </button>
557 |         </a>
558 |       </div>
559 |     </section>
560 | 
561 |     <footer class="bg-white text-blue-600 p-4 text-center">
562 |       <p>&copy; 2024 Real-Time Vote App. All rights reserved.</p>
563 |     </footer>
564 | 
565 |     <script>
566 |       const menuButton = document.getElementById("menu-button");
567 |       const mobileMenu = document.getElementById("mobile-menu");
568 |       const closeButton = document.getElementById("close-menu");
569 | 
570 |       menuButton.addEventListener("click", () => {
571 |         mobileMenu.classList.remove("hidden");
572 |       });
573 | 
574 |       closeButton.addEventListener("click", () => {
575 |         mobileMenu.classList.add("hidden");
576 |       });
577 |     </script>
578 |   </body>
579 | </html>
580 | 


--------------------------------------------------------------------------------