Komunitas:Daftar Artikel: Perbedaan antara revisi

Dari WikiPangan
VisualTeks wiki
Tidak ada ringkasan suntingan
Tag: Dikembalikan
Tidak ada ringkasan suntingan
Tag: Dikembalikan
Baris 1: Baris 1:
<html><iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe></html>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Peta Pangan Indonesia</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800">
 
  <!-- Header -->
  <header class="text-center py-6 space-y-2 bg-blue-50">
    <h1 class="text-3xl font-bold">🗺️ Peta Pangan Indonesia</h1>
    <p class="text-gray-600">Klik provinsi atau filter berdasarkan kategori bahan pangan dan olahan.</p>
  </header>
 
  <main class="p-6 space-y-8 max-w-7xl mx-auto">
 
    <!-- Filter -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <select id="provinsi" class="p-2 border rounded">
        <option value="">Semua Provinsi</option>
        <option value="Aceh">Aceh</option>
        <option value="Sumatera Utara">Sumatera Utara</option>
        <option value="Jawa Barat">Jawa Barat</option>
        <option value="Jawa Tengah">Jawa Tengah</option>
        <option value="NTT">NTT</option>
        <option value="Papua">Papua</option>
      </select>
 
      <select id="kategori" class="p-2 border rounded">
        <option value="">Semua Kategori</option>
        <option value="Beras">Beras</option>
        <option value="Jagung">Jagung</option>
        <option value="Ikan Asin">Ikan Asin</option>
        <option value="Keripik Tempe">Keripik Tempe</option>
        <option value="Minyak Kelapa">Minyak Kelapa</option>
      </select>
 
      <input type="text" placeholder="🔍 Cari sesuatu..." class="p-2 border rounded" />
    </div>
 
    <!-- Peta Placeholder -->
    <div class="w-full h-64 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500">
      [Peta Interaktif Indonesia]
    </div>
 
    <!-- Hasil -->
    <div id="hasil" class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Kartu hasil akan dimasukkan lewat JS -->
    </div>
  </main>
 
  <!-- Footer -->
  <footer class="text-center text-gray-400 text-sm py-10">
    © 2025 PetaPangan.id
  </footer>
 
  <script>
    const data = [
      { province: "Aceh", category: "Beras", volume: "5000 ton" },
      { province: "Aceh", category: "Ikan Asin", volume: "800 ton" },
      { province: "Jawa Barat", category: "Keripik Tempe", volume: "1200 kg" },
    ];
 
    const hasilContainer = document.getElementById("hasil");
    const provinsiFilter = document.getElementById("provinsi");
    const kategoriFilter = document.getElementById("kategori");
 
    function tampilkanData() {
      const p = provinsiFilter.value;
      const k = kategoriFilter.value;
      hasilContainer.innerHTML = "";
 
      const hasil = data.filter(item =>
        (!p || item.province === p) &&
        (!k || item.category === k)
      );
 
      if (hasil.length === 0) {
        hasilContainer.innerHTML = "<p class='text-center col-span-2 text-gray-500'>Tidak ada data ditemukan.</p>";
      }
 
      hasil.forEach(item => {
        const card = document.createElement("div");
        card.className = "p-4 border rounded-xl hover:shadow transition";
 
        card.innerHTML = `
          <h2 class="text-lg font-semibold">${item.province} - ${item.category}</h2>
          <p class="text-sm text-gray-600">Volume: ${item.volume}</p>
        `;
 
        hasilContainer.appendChild(card);
      });
    }
 
    provinsiFilter.addEventListener("change", tampilkanData);
    kategoriFilter.addEventListener("change", tampilkanData);
 
    tampilkanData(); // load awal
  </script>
 
</body>
</html>
 


<!-- Bahan Pangan -->
<!-- Bahan Pangan -->

Revisi per 24 Juli 2025 18.05

<!DOCTYPE html> Peta Pangan Indonesia

🗺️ Peta Pangan Indonesia

Klik provinsi atau filter berdasarkan kategori bahan pangan dan olahan.

[Peta Interaktif Indonesia]
© 2025 PetaPangan.id


Olahan Pangan

Jawa Barat

Sumatera Utara

Tidak ada halaman yang memenuhi kriteria ini.


Diperoleh dari "https://wikipangan.id/index.php?title=Komunitas:Daftar_Artikel&oldid=2536"