Komunitas:Daftar Artikel: Perbedaan antara revisi

Dari WikiPangan
VisualTeks wiki
Tidak ada ringkasan suntingan
Tag: Dikembalikan
Tidak ada ringkasan suntingan
 
(13 revisi perantara oleh pengguna yang sama 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");
    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 -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>Bahan Pangan</h2>
<DynamicPageList>
category = Bahan Pangan
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</div>
 
<!-- Olahan Pangan -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>Olahan Pangan</h2>
<DynamicPageList>
category = Olahan Pangan
category = Matang
order = ascending
ordermethod = title
</DynamicPageList>
</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="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em;">
<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>
<!-- Container for Bahan Pangan and Olahan Pangan -->
</div>
<div style="display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 1em; width: 100%;">
<!-- Bahan Pangan -->
<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>


<!-- Nusa Tenggara Timur -->
<!-- Olahan Pangan -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<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;">
  <h2>Nusa Tenggara Timur</h2>
<div style="flex: 1;">
<DynamicPageList>
<h2>🥫 Olahan Pangan</h2>
category = Nusa Tenggara Timur
<DynamicPageList>
category = Matang
  category = Olahan Pangan
order = ascending
  category = Matang
ordermethod = title
  order = ascending
</DynamicPageList>
  ordermethod = title
</div>
</DynamicPageList>
</div>
</div>
</div>


<!-- Jawa Barat -->
<!-- Sumatera Utara -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Jawa Barat</h2>
<h2>📍 Sumatera Utara</h2>
<DynamicPageList>
<DynamicPageList>
category = Jawa Barat
  category = Sumatera Utara
category = Matang
  category = Matang
order = ascending
  order = ascending
ordermethod = title
  ordermethod = title
</DynamicPageList>
</DynamicPageList>
</div>
</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>


<!-- Jawa Tengah -->
<!-- Sulawesi Selatan -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
  <h2>Jawa Tengah</h2>
<h2>📍 Sulawesi Selatan</h2>
<DynamicPageList>
<DynamicPageList>
category = Jawa Tengah
  category = Sulawesi Selatan
category = Matang
  category = Matang
order = ascending
  order = ascending
ordermethod = title
  ordermethod = title
</DynamicPageList>
</DynamicPageList>
</div>
<!-- Nusa Tenggara Barat -->
<div style="flex: 1 1 48%; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>📍 Nusa Tenggara Barat</h2>
<DynamicPageList>
  category = Nusa Tenggara Barat
  category = Matang
  order = ascending
  ordermethod = title
</DynamicPageList>
</div>
<!-- Nusa Tenggara Timur -->
<div style="flex: 1 1 48%; 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>
</div>
</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 25 Juli 2025 09.48


🥫 Olahan Pangan

📍 Sumatera Utara

Tidak ada halaman yang memenuhi kriteria ini.

📍 Jawa Barat

Tidak ada halaman yang memenuhi kriteria ini.

📍 Jawa Tengah

Tidak ada halaman yang memenuhi kriteria ini.

📍 Jawa Timur

📍 Nusa Tenggara Barat

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