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

Tidak ada halaman yang memenuhi kriteria ini.

Jawa Tengah

Tidak ada halaman yang memenuhi kriteria ini.

Jawa Timur

Sumatera Utara

Tidak ada halaman yang memenuhi kriteria ini.


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