====================================
1. HTML CONTAINER
====================================

<div id="reader"></div>
<div id="loading" style="text-align:center;padding:20px">Loading...</div>


====================================
2. CACHE SYSTEM SCRIPT
====================================

<script>
const DB_NAME = "MangaReaderDB";
const STORE = "chapters";
const DB_VERSION = 1;

const MAX_CACHE = 30;
const EXPIRY_DAYS = 7;
const EXPIRY_TIME = EXPIRY_DAYS * 86400000;

function openDB(){
  return new Promise((resolve,reject)=>{
    const req = indexedDB.open(DB_NAME, DB_VERSION);

    req.onupgradeneeded = e=>{
      const db = e.target.result;
      if(!db.objectStoreNames.contains(STORE)){
        db.createObjectStore(STORE,{ keyPath:"id" });
      }
    };

    req.onsuccess = ()=>resolve(req.result);
    req.onerror = ()=>reject(req.error);
  });
}

async function getCache(id){
  const db = await openDB();
  const tx = db.transaction(STORE,"readonly");
  const store = tx.objectStore(STORE);

  return new Promise(resolve=>{
    const req = store.get(id);

    req.onsuccess = ()=>{
      const data = req.result;

      if(!data) return resolve(null);

      if(Date.now() - data.saved > EXPIRY_TIME){
        deleteCache(id);
        return resolve(null);
      }

      resolve(data.images);
    };

    req.onerror = ()=>resolve(null);
  });
}

async function saveCache(id, images){
  const db = await openDB();
  const tx = db.transaction(STORE,"readwrite");
  const store = tx.objectStore(STORE);

  store.put({
    id: id,
    images: images,
    saved: Date.now()
  });

  tx.oncomplete = ()=> cleanupCache();
}

async function deleteCache(id){
  const db = await openDB();
  const tx = db.transaction(STORE,"readwrite");
  tx.objectStore(STORE).delete(id);
}

async function cleanupCache(){
  const db = await openDB();
  const tx = db.transaction(STORE,"readwrite");
  const store = tx.objectStore(STORE);

  const items = [];

  store.openCursor().onsuccess = e=>{
    const cursor = e.target.result;
    if(cursor){
      items.push(cursor.value);
      cursor.continue();
    }else{

      const now = Date.now();

      items.forEach(item=>{
        if(now - item.saved > EXPIRY_TIME){
          store.delete(item.id);
        }
      });

      if(items.length > MAX_CACHE){
        items.sort((a,b)=>a.saved-b.saved);
        const remove = items.slice(0, items.length - MAX_CACHE);
        remove.forEach(item=> store.delete(item.id));
      }
    }
  };
}
</script>


====================================
3. LOAD CHAPTER SCRIPT
====================================

<script>
const chapterId = location.pathname;

const imageList = [
  "https://site.com/img1.jpg",
  "https://site.com/img2.jpg",
  "https://site.com/img3.jpg"
];

function renderImages(images){
  const reader = document.getElementById("reader");
  reader.innerHTML = images.map(src =>
    `<img src="${src}" loading="lazy" style="width:100%;display:block">`
  ).join("");
}

function showLoading(){
  document.getElementById("loading").style.display="block";
}

function hideLoading(){
  document.getElementById("loading").style.display="none";
}

async function fetchFromServer(){
  return imageList;
}

async function loadChapter(){
  showLoading();

  if(!window.indexedDB){
    renderImages(imageList);
    hideLoading();
    return;
  }

  const cached = await getCache(chapterId);

  if(cached){
    console.log("Loaded from cache");
    renderImages(cached);
  }else{
    console.log("Fetch from server");
    const images = await fetchFromServer();
    renderImages(images);
    saveCache(chapterId, images);
  }

  hideLoading();
}

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