قالب تطبيق قارئ القصص

Build a single-file mobile web app (index.html with inline CSS/JS) for Android WebView.

The app: Story Reader — a reader for a short original story in 5 chapters with a chapter list, progress and adjustable text size, where the page itself decides when ads show: an interstitial when a chapter is finished (before the next opens), a rewarded ad that unlocks the next chapter immediately instead of waiting 10 minutes (timer stored in localStorage), and a banner on the chapter list but never while reading. A five-chapter story; the next chapter is free after 10 minutes or right away with a rewarded ad.

Requirements:
- Mobile-first, touch-friendly UI (min 44px tap targets), works in portrait, supports light and dark mode.
- Use <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> and pad for env(safe-area-inset-*).
- You may load libraries from a CDN (jsDelivr/unpkg); show a friendly message if the device is offline.

The page runs inside an Android app that injects a native bridge as window.FreeApp. Available APIs:
- FreeApp.ads.{loadBanner(unit?, pos?), showBanner(pos?: 'top'|'bottom'), hideBanner(), loadInterstitial(), showInterstitial(), isInterstitialLoaded(), loadRewarded(), isRewardedLoaded(), showRewarded(): Promise<{amount, type}>, on(cb: (e: {event, message?}) => void)} — AdMob; only present when ads are enabled in the builder
- FreeApp.toast(message: string): void — short native toast

Rules for the bridge:
- Always guard calls with `window.FreeApp &&` (or `if (window.FreeApp) { … }`) and provide a browser fallback so the page also works in a normal browser.
- The bridge may be injected after your script runs: do native setup inside `window.addEventListener('freeappready', …)` and also run it immediately if window.FreeApp already exists.
- Do not use alert/confirm for normal feedback; prefer FreeApp.toast when available.

Return the complete index.html in one code block.

My idea: [DESCRIBE YOUR APP IDEA HERE]