diff --git a/Tugas3/index.html b/Tugas3/index.html
new file mode 100644
index 0000000..fd68767
--- /dev/null
+++ b/Tugas3/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tugas 3 - Layer Control SPBU</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <style>html,body,#map{height:100%;margin:0;font-family:Arial}.panel{position:absolute;z-index:999;top:14px;left:14px;background:#fff;padding:14px;border-radius:12px;box-shadow:0 4px 18px #0002;width:300px}.back{display:block;color:#0f766e;text-decoration:none;font-weight:bold;margin-bottom:8px}.panel p{font-size:13px;color:#555}.leaflet-control-layers{font-size:14px}</style>
+</head>
+<body><div id="map"></div><div class="panel"><a class="back" href="../">← Kembali ke Landing Page</a><h3>Tugas 3 - Layer Control</h3><p>Gunakan layer control kanan atas untuk menampilkan SPBU 24 jam atau tidak 24 jam.</p></div>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script>
+const map=L.map('map').setView([-0.0263,109.3425],12);const osm=L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap'}).addTo(map);const carto=L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',{maxZoom:19,attribution:'© OSM & CartoDB'});
+const layer24=L.layerGroup().addTo(map);const layerNon24=L.layerGroup();L.control.layers({'OpenStreetMap':osm,'Carto Light':carto},{'⛽ SPBU Buka 24 Jam':layer24,'⛽ SPBU Tidak 24 Jam':layerNon24},{collapsed:false}).addTo(map);
+function icon(color){return L.divIcon({html:`<div style="background:${color};color:white;border-radius:20px;padding:7px;border:2px solid white;box-shadow:0 2px 8px #0005">⛽</div>`,className:'',iconSize:[34,34],iconAnchor:[17,17]});}
+function loadData(){layer24.clearLayers();layerNon24.clearLayers();fetch('../api.php?action=get_spbu').then(r=>r.json()).then(data=>{data.forEach(d=>{const target=d.buka==1?layer24:layerNon24;L.marker([d.lat,d.lng],{icon:icon(d.buka==1?'#16a34a':'#dc2626')}).addTo(target).bindPopup(`<b>${d.nama}</b><br>${d.hp||''}<br>${d.buka==1?'Buka 24 Jam':'Tidak 24 Jam'}`);});});}loadData();
+</script></body></html>
