diff --git a/Tugas1/index.html b/Tugas1/index.html
new file mode 100644
index 0000000..d48d3f6
--- /dev/null
+++ b/Tugas1/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="utf-8">
+<title>Tugas 1 - WebGIS SPBU</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<style>
+html, body {height:100%; margin:0; font-family: Arial, Helvetica, sans-serif;}
+#map {height:100%;}
+input, select {width:100%; margin-bottom:5px; padding:4px;}
+button {margin-top:5px; cursor:pointer;}
+.back-link {
+  position: fixed; z-index: 9999; left: 12px; top: 12px;
+  background: white; color: #111827; padding: 9px 12px;
+  border-radius: 10px; text-decoration: none; font-weight: 700;
+  box-shadow: 0 3px 14px rgba(0,0,0,.18); font-size: 13px;
+}
+.legend { background:white; padding:10px; line-height:18px; color:#333; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,.3); }
+.legend i { width:18px; height:18px; float:left; margin-right:8px; opacity:.8; }
+</style>
+</head>
+<body>
+<a class="back-link" href="../">← Landing Page</a>
+<div id="map"></div>
+<script>
+const map = L.map('map').setView([-0.02, 109.34], 13);
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+const iconSPBU = new L.Icon({ iconUrl:'https://maps.google.com/mapfiles/ms/icons/blue-dot.png', iconSize:[32,32] });
+
+function formPopup(lat,lng){
+return `
+<b>Input SPBU</b><br>
+Nama:<input id="nama"><br>
+WA:<input id="wa"><br>
+Buka 24 Jam:
+<select id="buka"><option>Iya</option><option>Tidak</option></select><br>
+<button onclick="simpan(${lat},${lng})">Simpan</button>
+<button onclick="map.closePopup()">Batal</button>`;
+}
+
+map.on('click',function(e){
+  L.popup().setLatLng(e.latlng).setContent(formPopup(e.latlng.lat,e.latlng.lng)).openOn(map);
+});
+
+function simpan(lat,lng){
+  const nama=document.getElementById('nama').value;
+  const wa=document.getElementById('wa').value;
+  const buka=document.getElementById('buka').value;
+  fetch('../simpan.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`nama=${encodeURIComponent(nama)}&wa=${encodeURIComponent(wa)}&buka=${encodeURIComponent(buka)}&lat=${lat}&lng=${lng}`}).then(()=>location.reload());
+}
+
+fetch('../ambil.php').then(res=>res.json()).then(data=>{
+  data.forEach(d=>{
+    L.marker([d.lat,d.lng],{icon:iconSPBU}).addTo(map).bindPopup(`
+      <b>${d.nama}</b><br>WA: ${d.wa}<br>Buka 24 Jam: ${d.buka}<br><br>
+      <button onclick="editSPBU(${d.id},'${String(d.nama).replace(/'/g,'')}','${d.wa}','${d.buka}',${d.lat},${d.lng})">Edit</button>
+      <button onclick="hapusSPBU(${d.id})">Hapus</button>`);
+  });
+});
+
+function editSPBU(id,nama,wa,buka,lat,lng){
+  const form=`<b>Edit SPBU</b><br>
+  Nama:<input id="nama" value="${nama}"><br>
+  WA:<input id="wa" value="${wa}"><br>
+  <select id="buka"><option ${buka=='Iya'?'selected':''}>Iya</option><option ${buka=='Tidak'?'selected':''}>Tidak</option></select><br>
+  <button onclick="updateSPBU(${id})">Update</button>`;
+  L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
+}
+
+function updateSPBU(id){
+  const nama=document.getElementById('nama').value;
+  const wa=document.getElementById('wa').value;
+  const buka=document.getElementById('buka').value;
+  fetch('../update.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}&nama=${encodeURIComponent(nama)}&wa=${encodeURIComponent(wa)}&buka=${encodeURIComponent(buka)}`}).then(()=>location.reload());
+}
+
+function hapusSPBU(id){
+  if(confirm('Hapus SPBU?')){
+    fetch('../hapus.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}`}).then(()=>location.reload());
+  }
+}
+</script>
+</body>
+</html>
