MINI

files >> C:/xampp/htdocs/vot/result.php
 <?php
include "config.php";

// DATA KANDIDAT
$stmt = $conn->prepare("
    SELECT candidates.name, COUNT(votes.id) AS total 
    FROM candidates 
    LEFT JOIN votes ON candidates.id = votes.candidate_id 
    GROUP BY candidates.id
");
$stmt->execute();
$result = $stmt->get_result();

$labels = [];
$data   = [];
$totalSuara = 0;

while ($d = $result->fetch_assoc()) {
    $labels[] = $d['name'];
    $data[]   = (int)$d['total'];
    $totalSuara += (int)$d['total'];
}

// TOTAL DPT
$dpt = $conn->query("SELECT COUNT(*) total FROM voters")->fetch_assoc()['total'];
$persen = ($dpt > 0) ? round(($totalSuara / $dpt) * 100, 1) : 0;

// RANKING
$ranking = [];
foreach ($labels as $i => $n) {
    $ranking[] = ['name'=>$n, 'total'=>$data[$i]];
}
usort($ranking, fn($a,$b)=>$b['total'] <=> $a['total']);
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Hasil Voting Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
body {
    margin:0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background:#eef2f6;
    color:#0f172a;
}

.header {
    position:sticky;
    top:0;
    background:#2563eb;
    color:white;
    text-align:center;
    padding:16px;
    font-size:20px;
    font-weight:bold;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
    z-index:10;
}

.card {
    background:white;
    margin:12px;
    padding:18px;
    border-radius:18px;
    box-shadow:0 4px 15px rgba(0,0,0,.07);
}

.card h3 {
    margin-top:0;
    font-size:18px;
    margin-bottom:12px;
}

/* STAT */
.stat-box {
    display:flex;
    justify-content:space-between;
    text-align:center;
}

.stat { flex:1; }

.big {
    font-size:24px;
    font-weight:bold;
    color:#2563eb;
}

/* RANKING */
.rank-item {
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #e2e8f0;
    font-size:16px;
}
.rank-item:last-child {
    border-bottom:none;
}

.rank-left {
    display:flex;
    align-items:center;
}
.rank-num {
    width:28px;
    height:28px;
    background:#2563eb;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    margin-right:10px;
}

/* FOOTER */
.footer {
    text-align:center;
    font-size:13px;
    padding:15px;
    color:#64748b;
}
</style>
</head>

<body>

<div class="header">
    📱 HASIL PEMILIHAN KETUA RT 28
</div>

<!-- STATISTIK -->
<div class="card">
    <div class="stat-box">
        <div class="stat">
            <small>DPT</small><br>
            <div class="big"><?= $dpt ?></div>
        </div>
        <div class="stat">
            <small>Suara Masuk</small><br>
            <div class="big"><?= $totalSuara ?></div>
        </div>
        <div class="stat">
            <small>Partisipasi</small><br>
            <div class="big"><?= $persen ?>%</div>
        </div>
    </div>
</div>

<!-- GRAFIK BAR -->
<div class="card">
    <h3>📊 Grafik Suara</h3>
    <canvas id="bar"></canvas>
</div>

<!-- RANKING -->
<div class="card">
    <h3>🏆 Ranking Kandidat</h3>
    <?php foreach($ranking as $i=>$r): ?>
    <div class="rank-item">
        <div class="rank-left">
            <div class="rank-num"><?= $i+1 ?></div>
            <div><?= $r['name'] ?></div>
        </div>
        <div><b><?= $r['total'] ?></b></div>
    </div>
    <?php endforeach; ?>
</div>

<!-- TOMBOL KEMBALI KE LOGIN -->
<div style="text-align:center; margin:20px;">
    <a href="index.php" 
       style="
        display:inline-block;
        padding:12px 20px;
        background:#ef4444;
        color:white;
        text-decoration:none;
        font-weight:bold;
        border-radius:12px;
        box-shadow:0 3px 10px rgba(0,0,0,0.15);
       ">
       ⬅ Kembali ke Login
    </a>
</div>

<div class="footer">
    @ bulungan.info
</div>

<script>
const labels = <?= json_encode($labels) ?>;
const data = <?= json_encode($data) ?>;

// Generate warna otomatis
const dynamicColors = () => labels.map((_, i) =>
    `hsl(${i * (230 / labels.length)}, 70%, 55%)`
);

// BAR CHART
new Chart(document.getElementById('bar'), {
    type:'bar',
    data:{
        labels:labels,
        datasets:[{
            label:'Jumlah Suara',
            data:data,
            backgroundColor: dynamicColors()
        }]
    },
    options:{
        responsive:true,
        animation:{ duration:900 },
        plugins:{ legend:{ display:false } },
        scales:{ y:{ beginAtZero:true } }
    }
});

// AUTO REFRESH 20 DETIK
setInterval(()=>location.reload(), 20000);
</script>

</body>
</html>