halaman /notifikasi

 Baik, berikut ini saya buatkan halaman /notifikasi untuk Blogger, yang otomatis:

✅ Menampilkan daftar notifikasi tersimpan
✅ Desain clean & responsif
✅ SEO-friendly + schema JSON-LD
✅ Bisa langsung dipublish sebagai Halaman Blogger
✅ Sinkron dengan script lonceng yang sudah saya buat sebelumnya
✅ Tanpa library tambahan

Copy-paste seluruh kode ini ke halaman baru Blogger (mode HTML)
Nama halaman: Notifikasi
Link: /p/notifikasi.html (atau jadikan halaman statis & redirect ke /notifikasi)

✅ Kode Halaman /notifikasi

<!-- ✅ Warkasa1919 — Halaman Notifikasi -->
<style>
.w1919-notif-page{max-width:780px;margin:0 auto;padding:22px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial}
.w1919-notif-title{text-align:center;font-size:22px;font-weight:800;margin-bottom:20px}
.w1919-notif-list{display:flex;flex-direction:column;gap:12px}
.w1919-notif-item{display:flex;gap:12px;padding:14px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;align-items:flex-start;transition:.2s;text-decoration:none;color:inherit}
.w1919-notif-item:hover{background:#f8fafc}
.w1919-notif-item img{width:80px;height:60px;border-radius:8px;object-fit:cover}
.w1919-notif-meta{font-size:12px;color:#6b7280;margin-top:4px}
.w1919-empty{text-align:center;color:#6b7280;padding:40px 10px;font-size:14px}
.w1919-clear{text-align:right;margin-bottom:10px}
.w1919-clear button{padding:8px 14px;border:0;border-radius:8px;font-size:13px;font-weight:600;background:#ef4444;color:#fff;cursor:pointer}
@media(max-width:540px){
 .w1919-notif-item img{display:none}
}
</style>

<div class="w1919-notif-page">
<h1 class="w1919-notif-title">Notifikasi</h1>

<div class="w1919-clear">
<button onclick="w1919ClearAll()">Hapus Semua</button>
</div>

<div id="w1919-list" class="w1919-notif-list"></div>
<div id="w1919-empty" class="w1919-empty" style="display:none;">Belum ada notifikasi.</div>
</div>

<script>
(function(){
const SK_ITEMS='w1919_notif_items_v1';

function load(){return JSON.parse(localStorage.getItem(SK_ITEMS)||'[]')}
function clear(){localStorage.removeItem(SK_ITEMS)}

function render(){
let data=load().slice().reverse();
let list=document.getElementById('w1919-list');
let empty=document.getElementById('w1919-empty');

if(!data.length){
 list.style.display='none';
 empty.style.display='block';
 return;
}

list.style.display='flex';
empty.style.display='none';
list.innerHTML='';

data.forEach(n=>{
 let a=document.createElement('a');
 a.className='w1919-notif-item';
 a.href=n.url||'#';

 if(n.image){
  let img=document.createElement('img');
  img.src=n.image;
  a.appendChild(img);
 }

 let info=document.createElement('div');
 info.innerHTML=
   `<div style="font-weight:700;font-size:15px">${n.title}</div>
    <div class="w1919-notif-meta">${new Date(n.time).toLocaleString()}</div>`;
 a.appendChild(info);

 a.onclick=e=>{if(n.url)window.open(n.url,'_blank')}
 list.appendChild(a);
});
}

window.w1919ClearAll=function(){
 if(confirm("Hapus semua notifikasi?")){
  clear();
  render();
 }
}

document.addEventListener("DOMContentLoaded",render);
})();
</script>

<!-- ✅ SEO - Structured Data -->
<script type="application/ld+json">
{
 "@context":"https://schema.org",
 "@type":"CollectionPage",
 "name":"Notifikasi — Warkasa1919",
 "description":"Halaman pemberitahuan terbaru dari Warkasa1919",
 "url":"https://warkasa1919.com/p/notifikasi.html"
}
</script>

🎯 Hasil yang terlihat oleh pengunjung

• Tampilan daftar notifikasi rapi

• Bisa klik untuk menuju artikel

• Bisa hapus semua

• Jika kosong → ada pesan "Belum ada notifikasi"

📌 Cara Integrasi

Halaman ini otomatis membaca notifikasi dari script lonceng sebelumnya.

Tidak perlu API, tidak perlu database — tetap ringan & cepat.

🚀 Opsional (mau saya tambahkan?)

Balas dengan angka:

1. 🔄 Sinkron server (notifikasi global, bukan per browser)

2. 🔔 Mode real-time Firebase Web Push

3. 🌙 Dark mode khusus halaman ini

4. 🎨 Versi modern card + avatar + emoji notif

5. 🪂 Efek muncul fade + slide

Contoh: 3 + 4

Silakan pilih — saya lanjutkan 😎