Komunitas:Daftar Artikel: Perbedaan antara revisi

Dari WikiPangan
VisualTeks wiki
Tidak ada ringkasan suntingan
Tag: Dikembalikan
Tidak ada ringkasan suntingan
 
(14 revisi perantara oleh satu pengguna lainnya tidak ditampilkan)
Baris 1: Baris 1:
<!DOCTYPE html>
__NOTOC__
<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");
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em;">
    const provinsiFilter = document.getElementById("provinsi");
    const kategoriFilter = document.getElementById("kategori");


    function tampilkanData() {
<!-- Container for Bahan Pangan and Olahan Pangan -->
      const p = provinsiFilter.value;
<div style="display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 1em; width: 100%;">
      const k = kategoriFilter.value;
<!-- Bahan Pangan -->
      hasilContainer.innerHTML = "";
<div style="flex: 1 1 48%; display: flex; flex-direction: row; align-items: flex-start; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="flex: 1;">
<h2>🍚 Bahan Pangan</h2>
<DynamicPageList>
  category = Bahan Pangan
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>
</div>


      const hasil = data.filter(item =>
<!-- Olahan Pangan -->
        (!p || item.province === p) &&
<div style="flex: 1 1 48%; display: flex; flex-direction: row; align-items: flex-start; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
        (!k || item.category === k)
<div style="flex: 1;">
      );
<h2>🥫 Olahan Pangan</h2>
<DynamicPageList>
  category = Olahan Pangan
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>
</div>
</div>


      if (hasil.length === 0) {
<!-- Sumatera Utara -->
        hasilContainer.innerHTML = "<p class='text-center col-span-2 text-gray-500'>Tidak ada data ditemukan.</p>";
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
      }
<h2>📍 Sumatera Utara</h2>
<DynamicPageList>
  category = Sumatera Utara
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>
<!-- Sumatera Selatan -->
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>📍 Sumatera Selatan</h2>
<DynamicPageList>
  category = Sumatera Selatan
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>
<!-- Jawa Barat -->
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>📍 Jawa Barat</h2>
<DynamicPageList>
  category = Jawa Barat
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>
<!-- Jawa Tengah -->
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>📍 Jawa Tengah</h2>
<DynamicPageList>
  category = Jawa Tengah
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>
<!-- Jawa Timur -->
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>📍 Jawa Timur</h2>
<DynamicPageList>
  category = Jawa Timur
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>


      hasil.forEach(item => {
<!-- Sulawesi Selatan -->
        const card = document.createElement("div");
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
        card.className = "p-4 border rounded-xl hover:shadow transition";
<h2>📍 Sulawesi Selatan</h2>
<DynamicPageList>
  category = Sulawesi Selatan
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>


        card.innerHTML = `
<!-- Maluku Utara -->
          <h2 class="text-lg font-semibold">${item.province} - ${item.category}</h2>
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
          <p class="text-sm text-gray-600">Volume: ${item.volume}</p>
<h2>📍 Maluku Utara</h2>
        `;
<DynamicPageList>
 
  category = Maluku Utara
        hasilContainer.appendChild(card);
  category = Matang
      });
  order = ascending
    }
  ordermethod = title
 
</DynamicPageList>
    provinsiFilter.addEventListener("change", tampilkanData);
</div>
    kategoriFilter.addEventListener("change", tampilkanData);
 
<!-- Nusa Tenggara Barat -->
    tampilkanData(); // load awal
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  </script>
<h2>📍 Nusa Tenggara Barat</h2>
 
<DynamicPageList>
</body>
  category = Nusa Tenggara Barat
</html>
  category = Matang
 
  order = ascending
 
  ordermethod = title
<!-- Bahan Pangan -->
</DynamicPageList>
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
</div>
<h2>Bahan Pangan</h2>
<DynamicPageList>
<!-- Nusa Tenggara Timur -->
category = Bahan Pangan
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
category = Matang
<h2>📍 Nusa Tenggara Timur</h2>
order = ascending
<DynamicPageList>
ordermethod = title
  category = Nusa Tenggara Timur
</DynamicPageList>
  category = Matang
</div>
  order = ascending
 
  ordermethod = title
<!-- Olahan Pangan -->
</DynamicPageList>
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
</div>
<h2>Olahan Pangan</h2>
<DynamicPageList>
category = Olahan Pangan
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
</div>
<!-- Sumatera Selatan -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>Sumatera Selatan</h2>
<DynamicPageList>
category = Sumatera Selatan
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
<!-- Sulawesi Selatan -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Sulawesi Selatan</h2>
<dynamicpagelist>
category = Sulawesi Selatan
category = Matang
order = ascending
ordermethod = title
</dynamicpagelist>
</div>
<!-- Nusa Tenggara Timur -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Nusa Tenggara Timur</h2>
<DynamicPageList>
category = Nusa Tenggara Timur
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
<!-- Jawa Barat -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Jawa Barat</h2>
<DynamicPageList>
category = Jawa Barat
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
<!-- Jawa Tengah -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Jawa Tengah</h2>
<DynamicPageList>
category = Jawa Tengah
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
<!-- Jawa Timur -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Jawa Timur</h2>
<DynamicPageList>
category = Jawa Timur
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
<!-- Sumatera Utara -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Sumatera Utara</h2>
<DynamicPageList>
category = Sumatera Utara
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
__NOTOC__

Revisi terkini sejak 9 Maret 2026 16.00


🥫 Olahan Pangan

📍 Sumatera Utara

Tidak ada halaman yang memenuhi kriteria ini.

📍 Maluku Utara

Tidak ada halaman yang memenuhi kriteria ini.

📍 Nusa Tenggara Barat

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