# Mr. DILF Build Notes

## What This Version Includes

This is a static front-end website for the Mr. DILF creator platform.

Production domain: `mrdilf.fit`

Included:

- Age gate
- Responsive navigation
- Supplied MD / Mr DILF logo asset in header and hero
- UK-facing copy and GBP pricing
- Editorial black/gold homepage hero
- Public gallery placeholders
- Gallery photo/video filtering
- Pay-per-view paid drops with stable post IDs
- Editable local price controls for each paid post
- Instant-message style inbox with paid media attachment drafts
- VIP membership pricing cards
- Membership tier selection feedback
- Locked VIP content placeholders
- Live webcam show section
- Live show reminder feedback
- Booking request form
- Booking request success state
- Merch grid
- Local cart count feedback
- Newsletter success state
- Legal/footer links
- Asset replacement map

## What Still Needs Connecting

This front end is ready for design review and future integration. The following systems are local UI only until wired to real services:

0. Domain
   - Production domain: `mrdilf.fit`.
   - Add DNS records with the chosen host.
   - Force HTTPS.
   - Set canonical URL to `https://mrdilf.fit/`.

1. Payments
   - Recommended adult-compatible options: CCBill, Segpay, Epoch, Verotel.
   - Avoid relying only on mainstream processors for explicit adult content.

2. Membership/Login
   - Options: Memberstack, Outseta, Supabase Auth, custom Next.js auth.
   - VIP cards should become protected routes or protected CMS entries.

3. Live Streaming
   - Fast route: embed an existing adult-compatible webcam provider.
   - Custom route: LiveKit, Agora, or similar real-time video infrastructure.
   - Use OBS for professional broadcast scenes.

4. Bookings
   - Fast route: Calendly, SimplyBook.me, or SavvyCal embed.
   - Custom route: database-backed booking calendar with deposit payments.

5. Merch
   - Fast route: Shopify, Fourthwall, WooCommerce.
   - Later route: headless shop integrated directly into the site.

6. Email
   - Connect newsletter to MailerLite, ConvertKit, Klaviyo, or Brevo.

7. Instant Messaging
   - Static demo only in this version.
   - Production options: Stream Chat, Sendbird, Supabase Realtime, Firebase, or a custom WebSocket service.
   - Messages should require logged-in adult-verified users.
   - Paid attachments should reference the numbered post ID and unlock only after confirmed payment.

8. Pay-Per-View Media
   - Current price controls are local UI only.
   - Production needs post records with `postId`, media type, title, price, currency, file URL, preview URL, access rules, and payment product ID.
   - Store media outside the public assets folder when charging for access.

## Suggested Production Architecture

Phase 1: Launch Static Brand Site
- Use this scaffold.
- Connect booking link, shop link, and live platform link.
- Host on Netlify, Vercel, Cloudflare Pages, or adult-friendly hosting if content restrictions apply.

Phase 2: Add CMS and Membership
- Move gallery content into Sanity, Strapi, or Supabase.
- Add paid content access rules.
- Add gated video delivery.

Phase 3: Add Native Streaming
- Add live player.
- Add ticket purchase flow.
- Add chat moderation.
- Add replay vault.

## Security and Compliance Checklist

- Age gate present on entry.
- Terms of Service required before launch.
- Privacy Policy required before launch.
- Cookie notice if tracking users.
- Content ownership and consent records should be maintained outside this public codebase.
- Use payment processors and hosts that allow your business model.
- Keep private media out of the public `/assets` folder once membership is active.

## Local Preview

Open `index.html` in a browser.

For a cleaner local server preview, run:

```bash
python3 -m http.server 8080
```

Then open:

```text
http://localhost:8080
```

## QA Performed

- Rendered the page in Chromium at 1440px desktop width using a local `file://` preview.
- Rendered the page in Chromium at 390px mobile width.
- Verified the age gate, gallery filter, VIP tier selection, booking success state, newsletter success state, live reminder state, and cart count feedback.
- Verified paid drop price editing, paid drop selection totals, message thread switching, message sending, and paid attachment drafting.

## Backend Added

The `backend/` folder contains a local Node API and JSON database.

Run it from `mr-dilf-platform/backend`:

```bash
npm start
```

Then open:

```text
http://localhost:3000
```

The front end will load paid posts and message data from `/api/bootstrap` when the backend is running. If you open `index.html` directly, it falls back to static demo data.