# Screenshot Guide — ISP Startup Guide

Use this when capturing images for  
**https://portal.gtlradius.com/docs/startup-guide/index.html**

---

## Where to save files

```
/var/www/html/gtl_radiusv2/docs/startup-guide/screenshots/
```

The HTML guide loads PNGs from that folder automatically. Use **exact filenames** below (lowercase, numbered).

---

## Before you start

| Setting | Recommendation |
|--------|----------------|
| Browser width | **1400px** desktop (or full laptop screen) |
| Browser | Chrome / Edge / Firefox |
| Zoom | **100%** |
| Theme | Default portal theme (dark sidebar is fine) |
| Sensitive data | Blur or use demo/test values — no real API keys in shots |

**Tip:** Hide personal bookmarks bar and extra browser tabs for cleaner images.

---

## Quick checklist

| # | Filename | Who logs in | Done |
|---|----------|-------------|------|
| 1 | `01-register.png` | Nobody (public) | ☐ |
| 2 | `02-login.png` | Nobody (public) | ☐ |
| 3 | `03-marketing-register.png` | Nobody (public) | ☐ |
| 4 | `05-add-router.png` | Tenant admin | ☐ |
| 5 | `router-provisioning.png` | Tenant admin | ☐ |
| 6 | `07-create-package.png` | Tenant admin | ☐ |
| 7 | `08-add-payment-gateway.png` | Tenant admin (Full/Admin) | ☐ |
| 8 | `09-add-sms-gateway.png` | Tenant admin | ☐ |

---

## Screenshots 1–3 — Public pages (no login)

### 1. `01-register.png`

**URL:** https://portal.gtlradius.com/isp_register.php  

**What to capture:** Full registration page — sidebar (desktop) or form (mobile). Show all three sections: Personal, Company, Account Security.

**How:**
1. Open the URL in a private/incognito window (not logged in).
2. Optionally fill sample data (e.g. John Doe, johndoe@example.com) — do **not** submit if you don’t want a test registration.
3. Capture the **full page** (scroll screenshot) on desktop, or form area on mobile.

**Auto-capture (if Chrome/Puppeteer installed on server):**
```bash
cd /var/www/html/gtl_radiusv2/docs/startup-guide
npm install puppeteer@22.15.0
node capture-screenshots.js
```

---

### 2. `02-login.png`

**URL:** https://portal.gtlradius.com/login.php  

**What to capture:** Logo, username/password fields, **Sign in** button, and **Register your account** link.

**How:**
1. Open in incognito (logged out).
2. Capture the centered login card only (no need for full-page scroll).

---

### 3. `03-marketing-register.png`

**URL:** https://gtlradius.com/#register  

**What to capture:** Registration section on the marketing site — system type (Hotspot / PPPoE / Both), details fields, credentials.

**How:**
1. Open the URL — page should scroll to `#register`.
2. If not, click **Register** in the menu or scroll to **Register for GTLRadius**.
3. Capture the form card (not the entire long homepage).

---

## Screenshots 4–8 — Admin pages (login required)

Log in first, then navigate. Use **Win + Shift + S** (Windows), **Cmd + Shift + 4** (Mac), or browser **Inspect → Capture screenshot**.

---

### 4. `05-add-router.png`

**Login as:** Tenant ISP admin

**Path:** **NAS → Router List → Add Router**

**URL:** https://portal.gtlradius.com/nas_create.php  

**What to capture:** Add Router form — Router Name, RouterOS version (6/7), Location, **Add Router** button.

---

### 5. `router-provisioning.png`

**Login as:** Same tenant admin  

**When:** Immediately after creating a router (redirects to provisioning page)

**URL:** https://portal.gtlradius.com/view_router.php?id=…  

**What to capture:**
- VPN / OpenVPN details
- Provisioning script or download section
- Enough context to show “what to run on MikroTik”

**How:** Add a test router named e.g. `Guide-Demo-Router`, screenshot the provisioning page, then delete the test router if not needed.

---

### 6. `07-create-package.png`

**Login as:** Tenant admin  

**Path:** **Packages → Package Create**

**URL:** https://portal.gtlradius.com/package_create.php  

**What to capture:** Package name, price, **Package For** (Hotspot or PPPoE), duration, speed fields.

**Tip:** Use sample values like `1Day-5Mbps`, price `100`, duration `1 Days`.

---

### 7. `08-add-payment-gateway.png`

**Login as:** Tenant admin with **Full** or **Admin** permission  

**Path:** **Payment Gateway → Add Gateway**

**URL:** https://portal.gtlradius.com/add_payment_gateway.php  

**What to capture:**
- Gateway type choices: **Own Paybill**, **Till Number**, **Bank Account**
- One type expanded (e.g. Own Paybill) with empty credential fields

**Important:** Do **not** screenshot real Consumer Key, Secret, or Pass Key. Use blurred or empty fields.

---

### 8. `09-add-sms-gateway.png`

**Login as:** Tenant admin  

**Path:** **SMS Gateway → SMS Gateway List → Add Gateway**

**URL:** https://portal.gtlradius.com/add_sms_gateway.php  

**What to capture:**
- SMS Provider dropdown (Onfon, GatewaySMS, Africa's Talking, etc.)
- Credential fields for one provider (empty or blurred)

---

## Manual capture steps (any OS)

1. Open the page at the URL above.
2. Set browser window to ~1400px wide (or use laptop full screen).
3. Hide side panels / close dev tools.
4. Take screenshot:
   - **Windows:** `Win + Shift + S` → select area, save as PNG.
   - **Mac:** `Cmd + Shift + 4` → select area.
   - **Chrome:** DevTools (`F12`) → `Ctrl+Shift+P` → type **Capture screenshot**.
5. Rename file to the exact name (e.g. `05-add-router.png`).
6. Upload/copy to:
   ```
   /var/www/html/gtl_radiusv2/docs/startup-guide/screenshots/
   ```

---

## Verify screenshots appear in the guide

1. Place all PNGs in the `screenshots/` folder.
2. Open: https://portal.gtlradius.com/docs/startup-guide/index.html  
3. Hard refresh: **Ctrl + F5** (or clear cache).
4. Each figure should show your image instead of the grey placeholder.

---

## Optional: resize large images

If files are very large (>500 KB), resize before upload:

```bash
cd /var/www/html/gtl_radiusv2/docs/startup-guide/screenshots
for f in *.png; do
  convert "$f" -resize 1400x\> "$f"
done
```

*(Requires ImageMagick `convert`.)*

---

## Troubleshooting

| Problem | Fix |
|--------|-----|
| Placeholder still shows | Wrong filename or file not in `screenshots/` |
| Image cached old version | Hard refresh or rename file (e.g. `05-add-router-v2.png` then rename back) |
| Admin page shows login | Log in first, then open the URL |
| Access denied on admin pages | Log in as tenant admin first, then open the URL |
| Payment gateway page denied | Tenant user needs **Full** or **Admin** role |

---

## File summary

| File | Guide section |
|------|----------------|
| `01-register.png` | §1 Register your ISP account |
| `02-login.png` | §1 After registration — login |
| `03-marketing-register.png` | §1 Alternative registration (gtlradius.com) |
| `05-add-router.png` | §2 Add router |
| `router-provisioning.png` | §2 Provisioning script |
| `07-create-package.png` | §3 Create package |
| `08-add-payment-gateway.png` | §4 M-Pesa gateway |
| `09-add-sms-gateway.png` | §5 SMS gateway |