wartana/sidak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make all dashboard cards clickable (entire card area) with cursor pointer and onclick redirect, preserve footer links with stopPropagation

Browse Source
This commit is contained in:
wartana
2026-01-22 16:09:58 +08:00
parent 19cc3244de
commit cfa09f6837
2 changed files with 398 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

398
home/admin.php
View File

@@ -78,157 +78,157 @@
<?php endif; ?>
<div class="row">
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info">
<div class="inner">
<h3>
<?php echo $pend; ?>
</h3>
<p>Penduduk</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="index.php?page=data-pend" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend'">
<div class="inner">
<h3>
<?php echo $pend; ?>
</h3>
<p>Penduduk</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="index.php?page=data-pend" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success">
<div class="inner">
<h3>
<?php echo $kartu; ?>
</h3>
<p>Kartu Keluarga</p>
</div>
<div class="icon">
<i class="ion ion-card"></i>
</div>
<a href="index.php?page=data-kartu" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-kartu'">
<div class="inner">
<h3>
<?php echo $kartu; ?>
</h3>
<p>Kartu Keluarga</p>
</div>
<div class="icon">
<i class="ion ion-card"></i>
</div>
<a href="index.php?page=data-kartu" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
<?php echo $laki; ?>
</h3>
<p>Laki-laki</p>
</div>
<div class="icon">
<i class="ion ion-male"></i>
</div>
<a href="index.php?page=data-pend&jekel=LK" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&jekel=LK'">
<div class="inner">
<h3>
<?php echo $laki; ?>
</h3>
<p>Laki-laki</p>
</div>
<div class="icon">
<i class="ion ion-male"></i>
</div>
<a href="index.php?page=data-pend&jekel=LK" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning">
<div class="inner">
<h3>
<?php echo $prem; ?>
</h3>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&jekel=PR'">
<div class="inner">
<h3>
<?php echo $prem; ?>
</h3>
<p>Perempuan</p>
</div>
<div class="icon">
<i class="ion ion-female"></i>
</div>
<a href="index.php?page=data-pend&jekel=PR" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<p>Perempuan</p>
</div>
<div class="icon">
<i class="ion ion-female"></i>
</div>
<a href="index.php?page=data-pend&jekel=PR" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info">
<div class="inner">
<h3>
<?php echo $lahir; ?>
</h3>
<p>Lahir</p>
</div>
<div class="icon">
<i class="ion ion-android-happy"></i>
</div>
<a href="index.php?page=data-lahir" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-lahir'">
<div class="inner">
<h3>
<?php echo $lahir; ?>
</h3>
<p>Lahir</p>
</div>
<div class="icon">
<i class="ion ion-android-happy"></i>
</div>
<a href="index.php?page=data-lahir" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success">
<div class="inner">
<h3>
<?php echo $mendu; ?>
</h3>
<p>Meninggal</p>
</div>
<div class="icon">
<i class="ion ion-android-sad"></i>
</div>
<a href="index.php?page=data-mendu" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-mendu'">
<div class="inner">
<h3>
<?php echo $mendu; ?>
</h3>
<p>Meninggal</p>
</div>
<div class="icon">
<i class="ion ion-android-sad"></i>
</div>
<a href="index.php?page=data-mendu" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
<?php echo $datang; ?>
</h3>
<p>Pendatang</p>
</div>
<div class="icon">
<i class="ion ion-android-download"></i>
</div>
<a href="index.php?page=data-datang" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-datang'">
<div class="inner">
<h3>
<?php echo $datang; ?>
</h3>
<p>Pendatang</p>
</div>
<div class="icon">
<i class="ion ion-android-download"></i>
</div>
<a href="index.php?page=data-datang" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning">
<div class="inner">
<h3>
<?php echo $pindah; ?>
</h3>
<p>Pindah</p>
</div>
<div class="icon">
<i class="ion ion-android-upload"></i>
</div>
<a href="index.php?page=data-pindah" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pindah'">
<div class="inner">
<h3>
<?php echo $pindah; ?>
</h3>
<p>Pindah</p>
</div>
<div class="icon">
<i class="ion ion-android-upload"></i>
</div>
<a href="index.php?page=data-pindah" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
@@ -245,61 +245,61 @@
<!-- Right Col: Demographics -->
<div class="col-lg-6">
<div class="row">
<!-- Balita -->
<div class="col-lg-4 col-6">
<div class="small-box bg-info">
<div class="inner">
<h3><?php echo $balita; ?></h3>
<p>Balita (0-5)</p>
</div>
<div class="icon"><i class="fas fa-baby"></i></div>
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Anak -->
<div class="col-lg-4 col-6">
<div class="small-box bg-success">
<div class="inner">
<h3><?php echo $anak; ?></h3>
<p>Anak (6-12)</p>
</div>
<div class="icon"><i class="fas fa-child"></i></div>
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Remaja -->
<div class="col-lg-4 col-6">
<div class="small-box bg-purple">
<div class="inner">
<h3><?php echo $remaja; ?></h3>
<p>Remaja (13-17)</p>
</div>
<div class="icon"><i class="fas fa-user-graduate"></i></div>
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Dewasa -->
<div class="col-lg-6 col-6">
<div class="small-box bg-primary">
<div class="inner">
<h3><?php echo $dewasa; ?></h3>
<p>Dewasa (18-59)</p>
</div>
<div class="icon"><i class="fas fa-user-tie"></i></div>
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lansia -->
<div class="col-lg-6 col-6">
<div class="small-box bg-secondary">
<div class="inner">
<h3><?php echo $lansia; ?></h3>
<p>Lansia (>60)</p>
</div>
<div class="icon"><i class="fas fa-blind"></i></div>
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Balita -->
<div class="col-lg-4 col-6">
<div class="small-box bg-info" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Balita'">
<div class="inner">
<h3><?php echo $balita; ?></h3>
<p>Balita (0-5)</p>
</div>
<div class="icon"><i class="fas fa-baby"></i></div>
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Anak -->
<div class="col-lg-4 col-6">
<div class="small-box bg-success" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Anak'">
<div class="inner">
<h3><?php echo $anak; ?></h3>
<p>Anak (6-12)</p>
</div>
<div class="icon"><i class="fas fa-child"></i></div>
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Remaja -->
<div class="col-lg-4 col-6">
<div class="small-box bg-purple" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Remaja'">
<div class="inner">
<h3><?php echo $remaja; ?></h3>
<p>Remaja (13-17)</p>
</div>
<div class="icon"><i class="fas fa-user-graduate"></i></div>
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Dewasa -->
<div class="col-lg-6 col-6">
<div class="small-box bg-primary" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Dewasa'">
<div class="inner">
<h3><?php echo $dewasa; ?></h3>
<p>Dewasa (18-59)</p>
</div>
<div class="icon"><i class="fas fa-user-tie"></i></div>
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lansia -->
<div class="col-lg-6 col-6">
<div class="small-box bg-secondary" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Lansia'">
<div class="inner">
<h3><?php echo $lansia; ?></h3>
<p>Lansia (>60)</p>
</div>
<div class="icon"><i class="fas fa-blind"></i></div>
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>

398
home/kaur.php
View File

@@ -78,157 +78,157 @@
<?php endif; ?>
<div class="row">
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info">
<div class="inner">
<h3>
<?php echo $pend; ?>
</h3>
<p>Penduduk</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="index.php?page=data-pend" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend'">
<div class="inner">
<h3>
<?php echo $pend; ?>
</h3>
<p>Penduduk</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="index.php?page=data-pend" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success">
<div class="inner">
<h3>
<?php echo $kartu; ?>
</h3>
<p>Kartu Keluarga</p>
</div>
<div class="icon">
<i class="ion ion-card"></i>
</div>
<a href="index.php?page=data-kartu" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-kartu'">
<div class="inner">
<h3>
<?php echo $kartu; ?>
</h3>
<p>Kartu Keluarga</p>
</div>
<div class="icon">
<i class="ion ion-card"></i>
</div>
<a href="index.php?page=data-kartu" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
<?php echo $laki; ?>
</h3>
<p>Laki-laki</p>
</div>
<div class="icon">
<i class="ion ion-male"></i>
</div>
<a href="index.php?page=data-pend&jekel=LK" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&jekel=LK'">
<div class="inner">
<h3>
<?php echo $laki; ?>
</h3>
<p>Laki-laki</p>
</div>
<div class="icon">
<i class="ion ion-male"></i>
</div>
<a href="index.php?page=data-pend&jekel=LK" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning">
<div class="inner">
<h3>
<?php echo $prem; ?>
</h3>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&jekel=PR'">
<div class="inner">
<h3>
<?php echo $prem; ?>
</h3>
<p>Perempuan</p>
</div>
<div class="icon">
<i class="ion ion-female"></i>
</div>
<a href="index.php?page=data-pend&jekel=PR" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<p>Perempuan</p>
</div>
<div class="icon">
<i class="ion ion-female"></i>
</div>
<a href="index.php?page=data-pend&jekel=PR" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info">
<div class="inner">
<h3>
<?php echo $lahir; ?>
</h3>
<p>Lahir</p>
</div>
<div class="icon">
<i class="ion ion-android-happy"></i>
</div>
<a href="index.php?page=data-lahir" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-lahir'">
<div class="inner">
<h3>
<?php echo $lahir; ?>
</h3>
<p>Lahir</p>
</div>
<div class="icon">
<i class="ion ion-android-happy"></i>
</div>
<a href="index.php?page=data-lahir" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success">
<div class="inner">
<h3>
<?php echo $mendu; ?>
</h3>
<p>Meninggal</p>
</div>
<div class="icon">
<i class="ion ion-android-sad"></i>
</div>
<a href="index.php?page=data-mendu" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-mendu'">
<div class="inner">
<h3>
<?php echo $mendu; ?>
</h3>
<p>Meninggal</p>
</div>
<div class="icon">
<i class="ion ion-android-sad"></i>
</div>
<a href="index.php?page=data-mendu" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
<?php echo $datang; ?>
</h3>
<p>Pendatang</p>
</div>
<div class="icon">
<i class="ion ion-android-download"></i>
</div>
<a href="index.php?page=data-datang" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-red" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-datang'">
<div class="inner">
<h3>
<?php echo $datang; ?>
</h3>
<p>Pendatang</p>
</div>
<div class="icon">
<i class="ion ion-android-download"></i>
</div>
<a href="index.php?page=data-datang" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning">
<div class="inner">
<h3>
<?php echo $pindah; ?>
</h3>
<p>Pindah</p>
</div>
<div class="icon">
<i class="ion ion-android-upload"></i>
</div>
<a href="index.php?page=data-pindah" class="small-box-footer">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pindah'">
<div class="inner">
<h3>
<?php echo $pindah; ?>
</h3>
<p>Pindah</p>
</div>
<div class="icon">
<i class="ion ion-android-upload"></i>
</div>
<a href="index.php?page=data-pindah" class="small-box-footer" onclick="event.stopPropagation();">Selengkapnya
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
@@ -245,61 +245,61 @@
<!-- Right Col: Demographics -->
<div class="col-lg-6">
<div class="row">
<!-- Balita -->
<div class="col-lg-4 col-6">
<div class="small-box bg-info">
<div class="inner">
<h3><?php echo $balita; ?></h3>
<p>Balita (0-5)</p>
</div>
<div class="icon"><i class="fas fa-baby"></i></div>
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Anak -->
<div class="col-lg-4 col-6">
<div class="small-box bg-success">
<div class="inner">
<h3><?php echo $anak; ?></h3>
<p>Anak (6-12)</p>
</div>
<div class="icon"><i class="fas fa-child"></i></div>
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Remaja -->
<div class="col-lg-4 col-6">
<div class="small-box bg-purple">
<div class="inner">
<h3><?php echo $remaja; ?></h3>
<p>Remaja (13-17)</p>
</div>
<div class="icon"><i class="fas fa-user-graduate"></i></div>
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Dewasa -->
<div class="col-lg-6 col-6">
<div class="small-box bg-primary">
<div class="inner">
<h3><?php echo $dewasa; ?></h3>
<p>Dewasa (18-59)</p>
</div>
<div class="icon"><i class="fas fa-user-tie"></i></div>
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lansia -->
<div class="col-lg-6 col-6">
<div class="small-box bg-secondary">
<div class="inner">
<h3><?php echo $lansia; ?></h3>
<p>Lansia (>60)</p>
</div>
<div class="icon"><i class="fas fa-blind"></i></div>
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Balita -->
<div class="col-lg-4 col-6">
<div class="small-box bg-info" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Balita'">
<div class="inner">
<h3><?php echo $balita; ?></h3>
<p>Balita (0-5)</p>
</div>
<div class="icon"><i class="fas fa-baby"></i></div>
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Anak -->
<div class="col-lg-4 col-6">
<div class="small-box bg-success" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Anak'">
<div class="inner">
<h3><?php echo $anak; ?></h3>
<p>Anak (6-12)</p>
</div>
<div class="icon"><i class="fas fa-child"></i></div>
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Remaja -->
<div class="col-lg-4 col-6">
<div class="small-box bg-purple" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Remaja'">
<div class="inner">
<h3><?php echo $remaja; ?></h3>
<p>Remaja (13-17)</p>
</div>
<div class="icon"><i class="fas fa-user-graduate"></i></div>
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Dewasa -->
<div class="col-lg-6 col-6">
<div class="small-box bg-primary" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Dewasa'">
<div class="inner">
<h3><?php echo $dewasa; ?></h3>
<p>Dewasa (18-59)</p>
</div>
<div class="icon"><i class="fas fa-user-tie"></i></div>
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lansia -->
<div class="col-lg-6 col-6">
<div class="small-box bg-secondary" style="cursor: pointer;" onclick="window.location.href='index.php?page=data-pend&kategori=Lansia'">
<div class="inner">
<h3><?php echo $lansia; ?></h3>
<p>Lansia (>60)</p>
</div>
<div class="icon"><i class="fas fa-blind"></i></div>
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer" onclick="event.stopPropagation();">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>