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:
<!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 -->
<!-- FILTER: Dropdown Provinsi dan Kategori -->
  <header class="text-center py-6 space-y-2 bg-blue-50">
<div style="margin: 1em 0; padding: 1em; background: #f5faff; border: 1px solid #ccc; border-radius: 8px;">
    <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">
   <div style="margin-bottom: 1em;">
    <label for="provinsi"><strong>🗺️ Pilih Provinsi:</strong></label><br/>
    <select id="provinsi" onchange="goToPage(this.value)" style="padding: 0.5em; width: 100%; max-width: 300px;">
      <option value="">-- Pilih Provinsi --</option>
      <option value="Kategori:Aceh">Aceh</option>
      <option value="Kategori:Sumatera_Utara">Sumatera Utara</option>
      <option value="Kategori:Jawa_Barat">Jawa Barat</option>
      <option value="Kategori:Jawa_Tengah">Jawa Tengah</option>
      <option value="Kategori:NTT">Nusa Tenggara Timur</option>
      <option value="Kategori:Papua">Papua</option>
      <option value="Kategori:Sulawesi_Selatan">Sulawesi Selatan</option>
      <option value="Kategori:Sumatera_Selatan">Sumatera Selatan</option>
      <option value="Kategori:Jawa_Timur">Jawa Timur</option>
    </select>
  </div>


    <!-- Filter -->
  <div>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
     <label for="kategori"><strong>🍚 Pilih Kategori:</strong></label><br/>
      <select id="provinsi" class="p-2 border rounded">
    <select id="kategori" onchange="goToPage(this.value)" style="padding: 0.5em; width: 100%; max-width: 300px;">
        <option value="">Semua Provinsi</option>
      <option value="">-- Pilih Kategori --</option>
        <option value="Aceh">Aceh</option>
      <option value="Kategori:Bahan_Pangan">Bahan Pangan</option>
        <option value="Sumatera Utara">Sumatera Utara</option>
      <option value="Kategori:Olahan_Pangan">Olahan Pangan</option>
        <option value="Jawa Barat">Jawa Barat</option>
    </select>
        <option value="Jawa Tengah">Jawa Tengah</option>
  </div>
        <option value="NTT">NTT</option>
        <option value="Papua">Papua</option>
      </select>


      <select id="kategori" class="p-2 border rounded">
</div>
        <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 => {
<script>
        const card = document.createElement("div");
  function goToPage(value) {
        card.className = "p-4 border rounded-xl hover:shadow transition";
    if (value) {
 
      window.location.href = '/wiki/' + value;
        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);
      });
     }
     }
  }
</script>


    provinsiFilter.addEventListener("change", tampilkanData);
<!-- SECTION: BAHAN PANGAN -->
    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;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>Bahan Pangan</h2>
  <h2>🍚 Bahan Pangan</h2>
<DynamicPageList>
  <DynamicPageList>
category = Bahan Pangan
    category = Bahan Pangan
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>


<!-- Olahan Pangan -->
<!-- SECTION: OLAHAN PANGAN -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>Olahan Pangan</h2>
  <h2>🥫 Olahan Pangan</h2>
<DynamicPageList>
  <DynamicPageList>
category = Olahan Pangan
    category = Olahan Pangan
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>


<!-- Sumatera Selatan -->
<!-- SECTION: PER PROVINSI -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<h2>Sumatera Selatan</h2>
  <h2>📍 Sumatera Selatan</h2>
<DynamicPageList>
  <DynamicPageList>
category = Sumatera Selatan
    category = Sumatera Selatan
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>


<!-- Sulawesi Selatan -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
   <h2>Sulawesi Selatan</h2>
   <h2>📍 Sulawesi Selatan</h2>
<dynamicpagelist>
  <DynamicPageList>
category = Sulawesi Selatan
    category = Sulawesi Selatan
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
 
  </DynamicPageList>
</dynamicpagelist>
</div>
</div>


<!-- Nusa Tenggara Timur -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
   <h2>Nusa Tenggara Timur</h2>
   <h2>📍 Nusa Tenggara Timur</h2>
<DynamicPageList>
  <DynamicPageList>
category = Nusa Tenggara Timur
    category = Nusa Tenggara Timur
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>


<!-- Jawa Barat -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
   <h2>Jawa Barat</h2>
   <h2>📍 Jawa Barat</h2>
<DynamicPageList>
  <DynamicPageList>
category = Jawa Barat
    category = Jawa Barat
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>


<!-- Jawa Tengah -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
   <h2>Jawa Tengah</h2>
   <h2>📍 Jawa Tengah</h2>
<DynamicPageList>
  <DynamicPageList>
category = Jawa Tengah
    category = Jawa Tengah
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>


<!-- Jawa Timur -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
   <h2>Jawa Timur</h2>
   <h2>📍 Jawa Timur</h2>
<DynamicPageList>
  <DynamicPageList>
category = Jawa Timur
    category = Jawa Timur
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>


<!-- Sumatera Utara -->
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
<div style="margin-bottom: 2em; border: 1px solid #ddd; border-radius: 8px; padding: 1em; background-color: #fff;">
   <h2>Sumatera Utara</h2>
   <h2>📍 Sumatera Utara</h2>
<DynamicPageList>
  <DynamicPageList>
category = Sumatera Utara
    category = Sumatera Utara
category = Matang
    category = Matang
order = ascending
    order = ascending
ordermethod = title
    ordermethod = title
</DynamicPageList>
  </DynamicPageList>
</div>
</div>
__NOTOC__

Revisi per 24 Juli 2025 18.11


   <label for="provinsi">🗺️ Pilih Provinsi:</label>

   <select id="provinsi" onchange="goToPage(this.value)" style="padding: 0.5em; width: 100%; max-width: 300px;">
     <option value="">-- Pilih Provinsi --</option>
     <option value="Kategori:Aceh">Aceh</option>
     <option value="Kategori:Sumatera_Utara">Sumatera Utara</option>
     <option value="Kategori:Jawa_Barat">Jawa Barat</option>
     <option value="Kategori:Jawa_Tengah">Jawa Tengah</option>
     <option value="Kategori:NTT">Nusa Tenggara Timur</option>
     <option value="Kategori:Papua">Papua</option>
     <option value="Kategori:Sulawesi_Selatan">Sulawesi Selatan</option>
     <option value="Kategori:Sumatera_Selatan">Sumatera Selatan</option>
     <option value="Kategori:Jawa_Timur">Jawa Timur</option>
   </select>

   <label for="kategori">🍚 Pilih Kategori:</label>

   <select id="kategori" onchange="goToPage(this.value)" style="padding: 0.5em; width: 100%; max-width: 300px;">
     <option value="">-- Pilih Kategori --</option>
     <option value="Kategori:Bahan_Pangan">Bahan Pangan</option>
     <option value="Kategori:Olahan_Pangan">Olahan Pangan</option>
   </select>

<script> 

 function goToPage(value) {
   if (value) {
     window.location.href = '/wiki/' + value;
   }
 }

</script>

🥫 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=2537"