File: /home/dmstechonline/voting.dmstech.online/index.html
<!DOCTYPE html>
<html lang="mr">
<head>
<meta charset="UTF-8">
<title>Voting Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background:#f2f2f2;
font-family:Arial,sans-serif;
}
.panel{
background:#fff;
border-radius:25px;
padding:30px;
max-width:1200px;
margin:30px auto;
box-shadow:0 10px 35px rgba(0,0,0,.18);
}
/* HEADER */
.header{
text-align:center;
}
.header h1{
font-size:32px;
margin-bottom:6px;
}
.header h3{
font-size:20px;
color:#333;
}
/* BARS */
.blue-bar{
background:linear-gradient(to right,#332a8f,#1e1a6d);
color:#fff;
padding:16px;
border-radius:50px;
margin:18px auto;
max-width:950px;
font-weight:600;
text-align: center;
}
.orange-bar{
background:linear-gradient(to right,#ff8c1a,#ff6a00);
color:#fff;
padding:16px;
border-radius:50px;
margin:18px auto 25px;
text-align: center;
max-width:950px;
font-weight:600;
}
/* SHARE ICONS */
.share-icons{
display:flex;
justify-content:center;
gap:15px;
margin-bottom:30px;
}
.share-btn{
padding:12px 22px;
border-radius:18px;
color:#fff;
font-weight:600;
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
}
.share{background:#1db954}
.insta{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
.fb{background:#1877f2}
.web{background:#333}
/* TABLE */
.vote-table th,.vote-table td{
border:2px solid #000;
text-align:center;
vertical-align:middle;
}
/* Candidate */
.candidate-img{
width:70px;
height:70px;
border-radius:10px;
border:3px solid #2e2b8f;
object-fit:cover;
}
.candidate-cell{
display:flex;
align-items:center;
gap:14px;
justify-content:flex-start; /* LEFT */
padding-left:12px;
}
/* Symbol & bulb */
.symbol-img{width:45px}
.bulb{
width:18px;
height:18px;
background:#6b0f3f;
border-radius:50%;
margin:auto;
}
/* Button */
.vote-btn{
background:#2e2b8f;
color:#fff;
border:none;
padding:8px 26px;
border-radius:25px;
font-weight:600;
}
.vote-btn:disabled{background:#999}
/* EMPTY ROW (FIXED ✅) */
.empty-row td{
background:#fff;
color:transparent;
}
.empty-row .bulb{
background:#6b0f3f;
}
/* FOOTER */
.footer{
margin-top:30px;
background:linear-gradient(to right,#2e2b8f,#ff8c1a);
padding:16px;
border-radius:30px;
display:flex;
justify-content:center;
gap:20px;
color:#fff;
font-weight:600;
}
.footer span{
background:rgba(255,255,255,.2);
padding:8px 20px;
border-radius:25px;
}
/* TABLET (≤768px) */
@media (max-width: 768px) {
.panel {
padding:20px;
margin:15px;
}
.header h1 {
font-size:26px;
}
.header h3 {
font-size:17px;
}
.candidate-cell {
gap:10px;
font-size:14px;
}
.candidate-img {
width:55px;
height:55px;
}
.vote-btn {
padding:6px 18px;
font-size:14px;
}
}
/* ================= SHARE BUTTON FIX (<=425px) ================= */
@media (max-width:425px){
/* SHARE ICON CONTAINER */
.share-icons{
flex-wrap:wrap; /* 🔑 bahar nahi jayega */
gap:8px;
padding:0 6px;
}
/* SHARE BUTTON */
.share-btn{
font-size:11px; /* font small */
padding:7px 10px;
border-radius:14px;
white-space:nowrap;
flex:1 1 auto; /* auto adjust width */
justify-content:center;
}
/* ICON SIZE */
.share-btn i{
font-size:12px;
}
/* FACEBOOK / GLOBE ROUND BUTTONS */
.fb,
.web{
width:38px;
height:38px;
padding:0;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 38px; /* fixed round size */
}
.fb i,
.web i{
font-size:14px;
}
}
/* ================= FINAL MOBILE FIX (<=425px) ================= */
@media (max-width:425px){
body{
font-size:12px;
}
/* ===== TABLE CORE FIX ===== */
.vote-table{
width:100%;
table-layout:fixed; /* 🔑 column control */
}
.vote-table th,
.vote-table td{
font-size:11px;
padding:6px 4px;
white-space:nowrap; /* 🔑 vertical text STOP */
word-break:keep-all; /* 🔑 letter break STOP */
overflow:hidden;
text-overflow:ellipsis;
text-align:center;
}
/* ===== COLUMN WIDTH CONTROL ===== */
.vote-table th:nth-child(1),
.vote-table td:nth-child(1){
width:55px; /* प्रभाग */
}
.vote-table th:nth-child(2),
.vote-table td:nth-child(2){
width:110px; /* उमेदवार */
}
.vote-table th:nth-child(3),
.vote-table td:nth-child(3){
width:60px; /* चिन्ह */
}
.vote-table th:nth-child(4),
.vote-table td:nth-child(4){
width:45px; /* बल्ब */
}
.vote-table th:nth-child(5),
.vote-table td:nth-child(5){
width:70px; /* मत */
}
/* ===== CANDIDATE CELL ===== */
.candidate-cell{
display:flex;
align-items:center;
gap:6px;
justify-content:flex-start;
}
.candidate-img{
width:38px;
height:38px;
flex-shrink:0;
}
.candidate-cell span{
font-size:11px;
line-height:1.2;
white-space:normal; /* name wrap allowed */
}
/* ===== SYMBOL ===== */
.symbol-img{
width:28px;
}
/* ===== BULB ===== */
.bulb{
width:12px;
height:12px;
}
/* ===== BUTTON (CUT ISSUE FIX) ===== */
.vote-btn{
font-size:11px;
padding:5px 8px;
white-space:nowrap;
border-radius:14px;
}
/* ===== SHARE BUTTONS FIX ===== */
.share-icons{
flex-wrap:wrap;
gap:6px;
padding:0 6px;
}
.share-btn{
font-size:11px;
padding:6px 10px;
}
}
</style>
</head>
<body>
<div class="panel">
<!-- HEADER -->
<div class="header">
<h1>वसई विरार शहर महानगरपालिका</h1>
<h3>बहुजन विकास आघाडी - प्रभाग क्र २६</h3>
</div>
<div class="blue-bar">
डेमो मतदानासाठी शिट्टी समोरील निळे बटन दाबावे
</div>
<div class="orange-bar">
मतदानाच्या दिवशी सुद्धा शिट्टी समोरील बटण दाबून ४ ठिकाणी मतदान करा
</div>
<!-- SHARE -->
<div class="share-icons">
<a href="#" class="share-btn share"><i class="fa-solid fa-share-nodes"></i> SHARE</a>
<a href="#" class="share-btn insta"><i class="fa-brands fa-instagram"></i> Instagram</a>
<a href="#" class="share-btn fb"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="share-btn web"><i class="fa-solid fa-globe"></i></a>
</div>
<div class="table-responsive">
<table class="table vote-table">
<thead>
<tr>
<th style="width:80px">प्रभाग</th>
<th>उमेदवार</th>
<th>चिन्ह</th>
<th>बल्ब</th>
<th>मत</th>
</tr>
</thead>
<tbody>
<!-- REAL CANDIDATES (1–4) -->
<tr>
<td>1- २६(अ)</td>
<td>
<div class="candidate-cell">
<img src="img1.png" class="candidate-img">
<span>प्रमिला मनोहर पाटील</span>
</div>
</td>
<td><img src="sitti.png" class="symbol-img"></td>
<td><div class="bulb" id="b1"></div></td>
<td><button class="vote-btn" onclick="vote(1,true)">बटन दाबा</button></td>
</tr>
<tr>
<td>2- २६(ब)</td>
<td>
<div class="candidate-cell">
<img src="img2.png" class="candidate-img">
<span>मार्शलिन अजिल चाको</span>
</div>
</td>
<td><img src="sitti.png" class="symbol-img"></td>
<td><div class="bulb" id="b2"></div></td>
<td><button class="vote-btn" onclick="vote(2,true)">बटन दाबा</button></td>
</tr>
<tr>
<td>3- २६(क)</td>
<td>
<div class="candidate-cell">
<img src="img3.png" class="candidate-img">
<span>प्रकाश दुमा रोड्रिग्स</span>
</div>
</td>
<td><img src="sitti.png" class="symbol-img"></td>
<td><div class="bulb" id="b3"></div></td>
<td><button class="vote-btn" onclick="vote(3,true)">बटन दाबा</button></td>
</tr>
<tr>
<td>4- २६(ड)</td>
<td>
<div class="candidate-cell">
<img src="img4.png" class="candidate-img">
<span>चंद्रशेखर शांताराम धुरी</span>
</div>
</td>
<td><img src="sitti.png" class="symbol-img"></td>
<td><div class="bulb" id="b4"></div></td>
<td><button class="vote-btn" onclick="vote(4,true)">बटन दाबा</button></td>
</tr>
<!-- EMPTY ROWS (5–10) -->
<script>
for(let i=5;i<=10;i++){
document.write(`
<tr class="empty-row">
<td>${i}</td>
<td></td>
<td></td>
<td><div class="bulb" id="b${i}"></div></td>
<td><button class="vote-btn" onclick="vote(${i},false)">बटन दाबा</button></td>
</tr>
`);
}
</script>
</tbody>
</table>
</div>
<!-- FOOTER -->
<div class="footer">
<span>Digital Media Solution</span>
<span>📞 7888187123</span>
</div>
</div>
<!-- AUDIO -->
<audio id="candidateAudio" src="final.mp3"></audio>
<audio id="dangerAudio" src="nom1.mp3"></audio>
<!-- VOTE SUCCESS MODAL -->
<div class="modal fade" id="voteModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center" style="border-radius:20px;">
<div class="modal-body p-4">
<h4 style="font-weight:700;">✅ मतदान पूर्ण झाले</h4>
<p>आपले मत नोंदवले गेले आहे.</p>
<button class="btn btn-primary px-4 mt-2" data-bs-dismiss="modal">
OK
</button>
</div>
</div>
</div>
</div>
<!-- <script>
function vote(n,isCandidate){
document.getElementById("b"+n).style.background = isCandidate ? "green" : "red";
(isCandidate ? candidateAudio : dangerAudio).play();
event.target.disabled = true;
event.target.innerText = "Voted";
}
</script> -->
<script>
function vote(n, isCandidate){
let audio = isCandidate ? candidateAudio : dangerAudio;
audio.currentTime = 0;
audio.play();
audio.onended = function(){
document.getElementById("b"+n).style.background =
isCandidate ? "green" : "red";
new bootstrap.Modal(
document.getElementById('voteModal')
).show();
}
}
</script>
<script>
function vote(n, isCandidate, btn){
let audio = isCandidate ? candidateAudio : dangerAudio;
// Reset audio so it can play again
audio.currentTime = 0;
audio.play();
audio.onended = function(){
// Bulb color
document.getElementById("b"+n).style.background =
isCandidate ? "green" : "red";
// Show popup every time
new bootstrap.Modal(
document.getElementById('voteModal')
).show();
}
}
</script>
</body>
</html>