Embed

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Vote Winner FIFA Club World Cup 2025</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #fdf6e3;
      text-align: center;
    }
    h1 {
      font-size: 14px;
      color: #333;
    }
    .option {
      margin: 10px;
    }
    #voteBtn {
      background-color: green;
      color: white;
      padding: 10px 20px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    #voteBtn[disabled] {
      background-color: #888;
      cursor: wait;
    }
    #homeBtn {
      display: none;
      background-color: #007BFF;
      color: white;
      padding: 10px 20px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
      margin-top: 20px;
      position: relative;
    }
    #homeBtn:hover::after {
      content: "return to home page";
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #333;
      color: #fff;
      padding: 6px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0.9;
      pointer-events: none;
    }
    .result-bar {
      height: 24px;
      color: white;
      margin-bottom: 10px;
      text-align: left;
      padding-left: 10px;
      border-radius: 5px;
      font-weight: bold;
      transition: width 0.5s ease;
    }
    #voteMessage {
      margin-top: 20px;
      font-size: 16px;
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1><span style="color: green;">Vote:</span> Winner FIFA Club World Cup 2025</h1>

  <div class="option"><input type="radio" name="option" value="Real" id="optReal" /><label for="optReal"> a. Real Madrid</label></div>
  <div class="option"><input type="radio" name="option" value="Pari" id="optPari" /><label for="optPari"> b. Paris Saint-Germain</label></div>
  <div class="option"><input type="radio" name="option" value="ManC" id="optManC" /><label for="optManC"> c. Manchester City</label></div>
  <div class="option"><input type="radio" name="option" value="Other" id="optOther" /><label for="optOther"> d. Other</label></div>

  <button id="voteBtn">Vote</button>
  <button id="homeBtn" title="Επιστροφή στην αρχική">Home</button>

  <div id="voteMessage"></div>
  <div id="results" style="margin-top: 30px;"></div>

  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.9.0/firebase-app.js";
    import { getFirestore, doc, updateDoc, increment, collection, getDocs } from "https://www.gstatic.com/firebasejs/11.9.0/firebase-firestore.js";

    const firebaseConfig = {
      apiKey: "AIzaSyATiukNI0dFRw8A_-zZYOHjkntj5U_H5hA",
      authDomain: "vote-a79b1.firebaseapp.com",
      projectId: "vote-a79b1",
      storageBucket: "vote-a79b1.appspot.com",
      messagingSenderId: "908298772132",
      appId: "1:908298772132:web:f9d11731b5a71a081b5031",
      measurementId: "G-G9D5HB7FMJ"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    const voteBtn = document.getElementById("voteBtn");
    const homeBtn = document.getElementById("homeBtn");
    const resultsDiv = document.getElementById("results");
    const voteMessage = document.getElementById("voteMessage");

    voteBtn.addEventListener("click", async () => {
      const selected = document.querySelector('input[name="option"]:checked');
      if (!selected) {
        alert("Please select an option before voting!");
        return;
      }

      voteBtn.disabled = true;

      const vote = selected.value;
      const voteRef = doc(db, "votes", vote);

      try {
        await updateDoc(voteRef, { count: increment(1) });

        voteMessage.textContent = "thanks for your vote";
        voteBtn.style.display = "none";
        homeBtn.style.display = "inline-block";

        showResults();
      } catch (e) {
        console. Error("Wrong:", e);
        alert("Problem saving vote.");
        voteBtn.disabled = false;
      }
    });

    async function showResults() {
      const options = ["Real", "Pari", "ManC", "Other"];
      let total = 0;
      const counts = {};

      const votesCol = collection(db, "votes");
      const snapshot = await getDocs(votesCol);

      snapshot.forEach(docSnap => {
        const id = docSnap.id;
        if (options.includes(id)) {
          counts[id] = docSnap.data().count || 0;
          total += counts[id];
        }
      });

      const labelMap = {
        Real: "Real Madrid",
        Pari: "Paris Saint-Germain",
        ManC: "Manchester City",
        Other: "Other"
      };

      const maxVotes = Math.max(...Object.values(counts));

      resultsDiv.innerHTML = "";
      for (const option of options) {
        const count = counts[option] || 0;
        const percent = total > 0 ? Math.round((count / total) * 100) : 0;
        const barColor = count === maxVotes ? "#008000" : "#90EE90";

        resultsDiv.innerHTML += `
          <div>
            <strong>${labelMap[option]}</strong>: ${count} vote(s) (${percent}%)
            <div class="result-bar" style="width:${percent}%; background-color: ${barColor};">${percent > 0 ? percent + "%" : ""}</div>
          </div>
        `;
      }
    }

    homeBtn.addEventListener("click", () => {
      window.location.href = "https://betdiamondsgroup.com";
    });
  </script>
</body>
</html>


betdiamonds

BetDiamonds

Vote: Winner FIFA Club World Cup 2025