-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (90 loc) · 3.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<title>Fasilitas Kesehatan Indonesia</title>
<link rel="icon" type="image/png" href="assets/pngwing.png" />
<link rel="stylesheet" href="style.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</head>
<body>
<nav class="navbar navbar-dark bg-danger shadow-sm md">
<div class="container-fluid">
<span class="navbar-brand h1 fw-bold">Dashboard Fasilitas Kesehatan Indonesia</span>
</div>
</nav>
<table class="table table-bordered md">
<thead>
<tr>
<th>Provinsi</th>
<th>RS</th>
<th>Puskesmas</th>
</tr>
</thead>
<tbody>
<script>
fetch("http://52.139.171.12:5000/api/provinsifaskes")
.then((response) => response.json())
.then((data) => {
for (const provinsi in data) {
const rs = data[provinsi]["RS"];
const puskesmas = data[provinsi]["Puskesmas"];
const row = document.createElement("tr");
const provinsiCell = document.createElement("td");
const rsCell = document.createElement("td");
const puskesmasCell = document.createElement("td");
provinsiCell.textContent = provinsi;
rsCell.textContent = rs;
puskesmasCell.textContent = puskesmas;
row.appendChild(provinsiCell);
row.appendChild(rsCell);
row.appendChild(puskesmasCell);
document.querySelector("tbody").appendChild(row);
}
})
.catch((error) => console.error(error));
</script>
</tbody>
</table>
<section class="box-layout2 pt-3 md">
<div class="container">
<div class="row mt-3 justify-content-between">
<div class="col-md-4 shadow p-3 mb-5">
<h2 class="fs-6">Jumlah Penduduk Indonesia</h2>
<div class="card">
<div class="card-body fs-3 text-center text-warning">275,361,267</div>
</div>
</div>
<div class="col-md-4 shadow p-3 mb-5">
<h2 class="fs-6">Jumlah Rumah Sakit Indonesia</h2>
<div class="card">
<div class="card-body fs-3 text-center text-danger">1,616</div>
</div>
</div>
<div class="col-md-4 shadow p-3 mb-5">
<h2 class="fs-6">Jumlah Puskesmas Indonesia</h2>
<div class="card">
<div class="card-body fs-3 text-center text-primary">9,512</div>
</div>
</div>
</div>
</div>
</section>
<section class="jumbotron text-center pb-">
<p class="display-6">Map</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d16327922.032404086!2d107.19791866789299!3d-2.4032494336959966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2c4c07d7496404b7%3A0xe37b4de71badf485!2sIndonesia!5e0!3m2!1sen!2sid!4v1684329168182!5m2!1sen!2sid"
width="720px"
height="720px"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="object-fit-none border rounded"
></iframe>
</section>
<footer class="bg-danger text-white fw-bold text-center pb-2">
<p>Created By Kelompok 1 Cloud Computing</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-dX01ytpYno/ry3GQIrFnP0U0IXf5PVKGkSEfZ/djg1bLUMSp8lUNHbBZfG28mGVT" crossorigin="anonymous"></script>
</body>
</html>