<div id="poll-box" style="max-width:500px;margin:auto;font-family:'Noto Sans Devanagari',sans-serif;">
<h3 style="text-align:center; color:#0288d1;">📊 आपका पसंदीदा उम्मीदवार कौन है?</h3>
<form id="voteForm" style="background:#f9f9f9;padding:15px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);">
<label>नाम:</label>
<input type="text" name="name" required style="width:100%;margin-bottom:10px;padding:8px;border-radius:5px;border:1px solid #ccc;">
<label>गाँव:</label>
<input type="text" name="village" required style="width:100%;margin-bottom:10px;padding:8px;border-radius:5px;border:1px solid #ccc;">
<label>मोबाइल नंबर:</label>
<input type="tel" name="mobile" pattern="[0-9]{10}" required style="width:100%;margin-bottom:10px;padding:8px;border-radius:5px;border:1px solid #ccc;">
<label>उम्मीदवार चुनें:</label><br>
<label><input type="radio" name="option" value="उम्मीदवार A" required> उम्मीदवार A</label><br>
<label><input type="radio" name="option" value="उम्मीदवार B"> उम्मीदवार B</label><br>
<label><input type="radio" name="option" value="उम्मीदवार C"> उम्मीदवार C</label><br>
<button type="submit" style="margin-top:10px;width:100%;padding:10px;background:#0288d1;color:#fff;border:none;border-radius:5px;cursor:pointer;">वोट सबमिट करें</button>
</form>
<div id="message" style="margin-top:10px;text-align:center;font-weight:bold;"></div>
<div id="results" style="margin-top:20px;display:none;">
<h4>📊 पोल रिजल्ट</h4>
<div id="resultChart"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const SCRIPT_URL = "YOUR_SCRIPT_URL_HERE"; // 👉 यहां अपना Apps Script URL डालें
document.getElementById("voteForm").addEventListener("submit", function(e) {
e.preventDefault();
const formData = {
name: this.name.value,
village: this.village.value,
mobile: this.mobile.value,
option: this.option.value
};
fetch(SCRIPT_URL, {
method: "POST",
body: JSON.stringify(formData)
})
.then(res => res.json())
.then(data => {
document.getElementById("message").innerText = data.message;
if (data.status === "success") {
this.reset();
loadResults();
}
})
.catch(err => {
document.getElementById("message").innerText = "❌ कुछ गड़बड़ हो गई, कृपया दोबारा कोशिश करें।";
});
});
// रिजल्ट लोड करना
function loadResults() {
fetch(SCRIPT_URL + "?action=results")
.then(res => res.json())
.then(data => {
const ctx = document.createElement("canvas");
document.getElementById("resultChart").innerHTML = "";
document.getElementById("resultChart").appendChild(ctx);
new Chart(ctx, {
type: "bar",
data: {
labels: Object.keys(data),
datasets: [{
label: "वोट",
data: Object.values(data),
backgroundColor: ["#0288d1","#ff9800","#4caf50"]
}]
}
});
document.getElementById("results").style.display = "block";
});
}
// पेज खुलते ही रिजल्ट लोड करना
loadResults();
</script>