# TBW Christian Radio — PWA

A Progressive Web App for **TBW Christian Media**  
*See It. Receive It. Conquer It.*

---

## File Structure

```
tbw-pwa/
├── index.php              ← Main app (single-page PWA shell)
├── manifest.json          ← PWA manifest (install metadata)
├── sw.js                  ← Service worker (offline support)
├── .htaccess              ← Apache config (MIME types, caching, security)
├── generate-icons.php     ← Run once to generate icons from logo
│
├── api/
│   ├── verse.php          ← Bible Verse of the Day (JSON API)
│   ├── schedule.php       ← Programme schedule (JSON API)
│   ├── events.php         ← Events data (JSON API)
│   └── playlist.php       ← Playlist data (JSON API)
│
├── icons/
│   ├── icon-72.png        ← PWA icons (all sizes)
│   ├── icon-96.png
│   ├── icon-128.png
│   ├── icon-192.png
│   └── icon-512.png
│
└── assets/
    └── images/            ← TBW brand imagery
```

---

## Deployment (Shared Hosting / cPanel)

1. **Upload** the entire `tbw-pwa/` folder contents to your `public_html/` directory (or a subdirectory like `public_html/app/`)

2. **Ensure PHP 7.4+** is enabled (check in cPanel → PHP Version)

3. **Enable mod_rewrite** — most shared hosts have this on by default

4. **HTTPS is required** for PWA install prompts. Activate a free SSL certificate via cPanel → SSL/TLS → Let's Encrypt

5. **Test the app** at `https://yourdomain.com` (or your subdirectory)

---

## Adding the Live Stream

In `index.php`, find the `<audio>` element near the bottom:

```html
<audio id="radioAudio" preload="none">
  <!-- <source src="YOUR_STREAM_URL" type="audio/mpeg"> -->
</audio>
```

Replace `YOUR_STREAM_URL` with your radio stream URL (e.g. from RadioKing, Shoutcast, Icecast, or similar).  
Then uncomment the `audio.play()` and `audio.pause()` lines in the `togglePlay()` function.

---

## Customisation

### Stream URL
Edit `index.php` — search for `YOUR_STREAM_URL`

### Schedule
Edit `api/schedule.php` — replace programme data with your actual schedule

### Events
Edit `api/events.php` — add real event dates and details

### Social Media Links
Edit `index.php` — search for `Facebook`, `Instagram`, `YouTube` — replace `href="#"` with your profile URLs

### Partnership Website Link
Edit `index.php` — search for `btn-partner` — replace the `onclick` with your website URL

### Verse of the Day
Edit `api/verse.php` — adjust the verse list or connect to a Bible API (Bible.api.bible is free)

---

## PWA Features

- ✅ Install to home screen (Android + iOS)
- ✅ Offline fallback via Service Worker
- ✅ Server-rendered initial content (PHP)
- ✅ Dynamic JSON APIs
- ✅ Responsive mobile-first design
- ✅ Safe area insets (iPhone notch/Dynamic Island)
- ✅ Brand colours: Red (#C41E1E) + Gold (#C9932A)
- ✅ All 9 TBW brand images integrated
- ✅ Bible Verse of the Day (daily rotation)
- ✅ Programme Schedule with day tabs
- ✅ Events listing
- ✅ Playlist view
- ✅ About / Contact / Partnership pages
- ✅ Live player UI (stream URL configurable)
- ✅ Offline detection banner

---

## Requirements

- PHP 7.4 or higher
- Apache with mod_rewrite (for clean URLs)
- HTTPS (required for PWA install prompt and service workers)

---

*TBW Christian Media · info@tbwchristianmedia.org*
