قالب تطبيق ضاغط الصور

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

The app: Photo Compressor — a photo compressor that shows the before/after size and saves the smaller image. Pick a photo, shrink it natively with size and quality sliders, then save or share it.

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-*).
- Must work fully offline: no CDN or external scripts, fonts or images; persist data in localStorage.

The page runs inside an Android app that injects a native bridge as window.FreeApp. Available APIs:
- FreeApp.pickFile(opts?: {accept?: string[], multiple?: boolean}): Promise<{name, mime, size, dataUrl}>
- FreeApp.compressImage(dataUrl: string, opts?: {maxSize?: number, quality?: number}): Promise<{dataUrl, width, height, bytes}> — native, fast on low-end phones
- FreeApp.saveToGallery(dataUrl: string, fileName?: string): Promise<{uri}> — saves an image to Photos
- FreeApp.shareFile(fileName: string, mimeType: string, base64OrDataUrl?: string): boolean — share a real file (omit the data to share an app file by name)
- 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]