# GOALS by Splurjj — Static Frontend

> **Production Domain:** `goalsapp.store`
> **Dev Workspace:** Splurjj · Static S3-hosted site
> **Last Audited:** 2026-05-21

---

## Project Overview

GOALS is a goal-tracking and discipline platform. This repo is the complete static frontend — public marketing pages, an authenticated app shell (web preview), admin/staff portals, and a developer API portal. All pages are plain HTML/CSS/JS — no build step required. Drop directly into an S3 bucket with static website hosting.

---

## ✅ Complete File Structure

```
/
├── index.html                  ← Public homepage (marketing) — S3 default document
├── goals.html                  ← Instant redirect → index.html (backward compat)
├── about.html                  ← "Turn Goals Into Done" page + video
├── store.html                  ← Merch store (Square SDK)
├── guide.html                  ← App help & documentation guide
├── portals.html                ← Sign-in hub (noindex) — all portal cards
├── privacy.html                ← Full Privacy Policy (11 sections, 17 KB)
├── terms.html                  ← Full Terms of Service (15 sections, 19 KB)
├── ECOSYSTEM.md                ← Cross-site integration spec: splurjj.com ↔ goalsapp.store (14 KB)
├── sitemap.xml                 ← 6 public URLs for goalsapp.store (includes privacy + terms)
├── robots.txt                  ← Allows public pages incl. privacy + terms; blocks /admin/ /app/ /auth/ /developers/
│
├── css/
│   ├── style.css               ← Homepage design tokens + all public page styles
│   ├── app-system.css          ← Shared design system (app + admin + auth + dev portal)
│   ├── auth.css                ← Auth pages (login / signup / reset)
│   ├── admin.css               ← Staff portal login page styles
│   ├── admin-system.css        ← Admin shell (sidebar, topbar, admin components)
│   ├── app-system.css          ← App shell (sidebar, topbar, app components)
│   ├── dev-portal.css          ← Developer portal specific styles
│   ├── guide.css               ← App guide / docs styles
│   └── store.css               ← Store-specific styles
│
├── js/
│   ├── main.js                 ← Homepage interactions + scroll reveal
│   ├── store.js                ← Cart, filters, Square checkout
│   ├── guide-page.js           ← TOC scroll spy + section nav
│   ├── auth.js                 ← Login / signup / reset form handlers + role cards
│   ├── app-shell.js            ← App shell: sidebar, search, GoalsToast
│   ├── admin-shell.js          ← Admin shell: AdminToast, dropdowns, toggles
│   └── admin.js                ← Staff portal login: 5-attempt rate limiter
│
├── auth/
│   ├── login.html              ← User login (SSO + email, #loginForm)
│   ├── signup.html             ← User signup (role cards, pw strength, #signupForm)
│   └── reset.html              ← Password reset (3-step: request → confirm → new-pw)
│
├── admin/
│   ├── index.html              ← Staff portal login (rate limit UI, 5-attempt lockout)
│   ├── overview.html           ← Admin dashboard (stats, Chart.js, feature flags)
│   ├── users.html              ← User management table
│   ├── goals-control.html      ← Goal & Mimic Goal control panel
│   ├── platform-analytics.html ← Platform-wide analytics (Chart.js)
│   └── permissions.html        ← Modules & permissions management
│
├── app/
│   ├── dashboard.html          ← App dashboard (stats, goal cards, Chart.js)
│   ├── goals.html              ← Goals list (filter tabs, goal cards, sort)
│   ├── goal-detail.html        ← Single goal detail + milestones (Chart.js)
│   ├── analytics.html          ← Personal analytics (Chart.js charts + heatmap)
│   ├── mimic-goals.html        ← Mimic Goals browser (adopt from Splurjj)
│   ├── mimic-create.html       ← Create goal from Splurjj deep-link (?post_id=)
│   └── profile.html            ← Profile & settings
│
├── developers/
│   ├── index.html              ← Dev portal overview (endpoints, code samples)
│   ├── api-keys.html           ← API key management (create, copy, revoke)
│   ├── sandbox.html            ← Interactive API sandbox (mock request/response)
│   └── webhooks.html           ← Webhook registration + event subscriptions
│
├── images/                     ← All image assets (34 files, ~2.3 MB total)
│   ├── bg-hero.jpg             ← Homepage hero background
│   ├── bg-bossup.jpg           ← "Boss Up" section background
│   ├── bg-lifestyle.jpg        ← "Who It's For" lifestyle photo
│   ├── bg-determination.jpg    ← Determination section image
│   ├── phone-dashboard.png     ← App dashboard mobile screenshot
│   ├── phone-back.png          ← "Set Your Goal" mobile screenshot
│   ├── phone-goals-a.png       ← Goals list screenshot A
│   ├── phone-goals-b.png       ← Goals list screenshot B
│   ├── phone-milestones.png    ← Milestones screen
│   ├── phone-mood.png          ← Mood tracking screen
│   ├── phone-reminders.png     ← Reminders screen
│   ├── phone-categories.png    ← Categories screen
│   ├── phone-themes.png        ← Themes screen
│   ├── phone-community.png     ← Community feed screen
│   ├── phone-feed.png          ← Activity feed screen
│   ├── phone-profile.png       ← Profile screen
│   ├── phone-ai.png            ← AI insights screen
│   ├── log-cabin-forest.jpg    ← Lifestyle/ambient photo
│   ├── woman-mountain-view.jpg ← Lifestyle photo
│   ├── man-writing-notebook.jpg← Lifestyle photo
│   ├── couple-hiking-selfie.jpg← Lifestyle photo
│   └── app-*.jpg               ← 12 in-app UI screenshots for guide
│
└── videos/
    └── turn-goals-into-done.mp4 ← "Turn Goals Into Done" promo video (727 KB)
```

---

## 🌐 Entry Points / URLs

### Public (indexed)
| Path | Description | SEO |
|------|-------------|-----|
| `/` or `/index.html` | Full homepage — S3 default document | ✅ indexed |
| `/goals.html` | Backward-compat redirect → `index.html` | noindex |
| `/about.html` | "Turn Goals Into Done" video page | ✅ indexed |
| `/store.html` | Merch store | ✅ indexed |
| `/guide.html` | App guide & docs | ✅ indexed |
| `/privacy.html` | Privacy Policy | ✅ indexed |
| `/terms.html` | Terms of Service | ✅ indexed |
| `/download.html` | File download index — all project files | noindex |

### Internal / Auth-gated (noindex)
| Path | Description |
|------|-------------|
| `/portals.html` | Sign-in hub — links to all portals |
| `/auth/login.html` | User login → routes to `app/dashboard.html` |
| `/auth/signup.html` | User signup — roles: user / developer / staff |
| `/auth/reset.html` | Password reset — `?token=` param activates step 3 |
| `/admin/index.html` | Staff login — 5-attempt lockout, 60s cooldown |
| `/admin/overview.html` | Admin dashboard |
| `/admin/users.html` | User management |
| `/admin/goals-control.html` | Goal & Mimic Goal control |
| `/admin/platform-analytics.html` | Platform analytics |
| `/admin/permissions.html` | Modules & permissions |
| `/app/dashboard.html` | App home |
| `/app/goals.html` | Goals list |
| `/app/goal-detail.html` | Single goal + milestones |
| `/app/analytics.html` | Personal analytics |
| `/app/mimic-goals.html` | Mimic Goals browser |
| `/app/mimic-create.html` | Create from Splurjj deep-link |
| `/app/profile.html` | Profile & settings |
| `/developers/index.html` | API overview |
| `/developers/api-keys.html` | API key management |
| `/developers/sandbox.html` | Mock API explorer |
| `/developers/webhooks.html` | Webhook management |

---

## 🎨 Design System

### Tokens
| Token | Value | Used In |
|-------|-------|---------|
| `--black` | `#000000` | Backgrounds |
| `--dark` | `#0a0a0a` | Page background |
| `--dark-2` | `#111111` | Cards, panels |
| `--green` | `#22c55e` | CTAs, accents, active states |
| `--green-lt` | `#86efac` | Hover states |
| `--font-disp` | Space Grotesk | All headings |
| `--font-body` | Inter | All body text |
| `--font-mono` | JetBrains Mono | Code blocks |

### CSS Architecture
| File | Scope |
|------|-------|
| `css/style.css` | Homepage + public pages (`index.html`, `about.html`, `store.html`, `guide.html`) |
| `css/app-system.css` | All authenticated pages (app + admin + auth + developers) |
| `css/auth.css` | Layered on `app-system.css` for auth pages only |
| `css/admin.css` | Staff portal login page only |
| `css/admin-system.css` | Layered on `app-system.css` for admin shell pages |
| `css/dev-portal.css` | Layered on `app-system.css` for developer portal |
| `css/guide.css` | Layered on `style.css` for guide page |
| `css/store.css` | Layered on `style.css` for store page |

### JS Architecture
- IIFEs with `'use strict'` in all modules
- `$` / `$$` shorthand helpers
- `DOMContentLoaded` guards
- `window.GoalsToast` — app shell toast notifications
- `window.AdminToast` — admin shell toast notifications

---

## 🚀 S3 Deployment Checklist

### Pre-Upload Verification
- [x] `sandbox_inspect.js` removed from all 16 HTML files
- [x] Cloudflare beacon scripts removed from all 16 HTML files
- [x] `sitemap.xml` uses `goalsapp.store` domain consistently
- [x] `robots.txt` uses `goalsapp.store` domain consistently
- [x] `about.html` linked from homepage nav
- [x] `videos/` folder allowed in `robots.txt`
- [x] All relative paths use `../css/`, `../js/`, `../images/` correctly per folder depth
- [x] `index.html` is the full homepage (not a redirect stub) — S3 default document ready
- [x] `goals.html` is now a backward-compat redirect → `index.html`
- [x] All nav/footer links updated across all pages: `goals.html` → `index.html`
- [x] `privacy.html` and `terms.html` created and linked on ALL pages (including auth/reset.html, app/mimic-create.html)
- [x] `privacy.html` and `terms.html` added to `sitemap.xml` and `robots.txt`
- [x] `download.html` updated to include `privacy.html` and `terms.html` entries (8 files in Public Pages section)
- [x] `ECOSYSTEM.md` created — complete cross-site integration spec for splurjj.com ↔ goalsapp.store

### S3 Bucket Upload Order
```
1. css/          ← Upload first (all 9 files)
2. js/           ← Upload second (all 7 files)
3. images/       ← Upload third (all 34 files)
4. videos/       ← Upload fourth (1 file, 727 KB)
5. auth/         ← HTML pages
6. app/          ← HTML pages
7. admin/        ← HTML pages
8. developers/   ← HTML pages
9. *.html        ← Root HTML files last
10. sitemap.xml  ← Root
11. robots.txt   ← Root
```

### S3 Bucket Settings
| Setting | Value |
|---------|-------|
| Static website hosting | Enabled |
| Index document | `index.html` |
| Error document | `index.html` (or custom `404.html`) |
| Block public access | OFF (public read) |
| Bucket policy | `s3:GetObject` for `*` |
| CORS | Required if API calls from browser |

### S3 Object Content-Types to Set Manually
| Extension | Content-Type |
|-----------|-------------|
| `.html` | `text/html; charset=utf-8` |
| `.css` | `text/css; charset=utf-8` |
| `.js` | `application/javascript; charset=utf-8` |
| `.mp4` | `video/mp4` |
| `.jpg` | `image/jpeg` |
| `.png` | `image/png` |
| `.xml` | `application/xml` |
| `.txt` | `text/plain` |

### CloudFront / CDN (Recommended)
- Point CloudFront distribution to S3 bucket origin
- Set default root object: `index.html`
- Custom error pages: 403 + 404 → `/index.html` with 200 status
- Cache policy: `CachingOptimized` for `css/`, `js/`, `images/`, `videos/`
- Set `videos/turn-goals-into-done.mp4` cache TTL: 86400s (1 day)

---

## 🔌 Backend Integration Points

All API calls are stubbed with `// [API]` comments in JS. Key endpoints to wire:

| Action | Method | Endpoint |
|--------|--------|----------|
| User login | POST | `/api/auth/login` |
| User signup | POST | `/api/auth/register` |
| Password reset request | POST | `/api/auth/reset-request` |
| Password reset confirm | POST | `/api/auth/reset-confirm` |
| Staff login | POST | `/api/auth/admin/login` |
| Get goals | GET | `/api/goals` |
| Create goal | POST | `/api/goals` |
| Get analytics | GET | `/api/analytics` |
| Community goals | GET | `/api/community/goals` |
| Dev API keys | GET/POST | `/api/developer/keys` |
| Webhooks | GET/POST | `/api/developer/webhooks` |

**Base API URL:** `https://api.goalsapp.store/v1`

---

## ⚠️ Remaining / Future Work

### High Priority
- [ ] Wire all `// [API]` stubs to real backend endpoints (`/api/auth/*`, `/api/goals/*`, `/api/store/*`, `/api/mimic/*`)
- [ ] Replace demo data in `app/dashboard.html` + `app/analytics.html` with live API calls
- [ ] Implement real Google OAuth flow (`data-action="google-auth"` in auth pages)
- [ ] Add JWT / session handling for real auth state (currently frontend-only)
- [ ] Replace Square placeholder credentials in `js/store.js` (`SQUARE_APP_ID`, `SQUARE_LOCATION`) with production values
- [ ] Build backend `POST /api/store/checkout` payment endpoint (Square token processing)
- [ ] Add `?redirect=` URL param handling to `auth/login.html` for post-login routing
- [ ] Implement `app/mimic-create.html` URL param reader for `?source=splurjj&template=<b64>` (see ECOSYSTEM.md §2)
- [ ] Configure CORS on `api.goalsapp.store` to allow origin `https://www.splurjj.com`

### Medium Priority
- [ ] Add `app/goals.html` — goal creation modal / form
- [ ] Set up `goalsapp.store` DNS → CloudFront distribution
- [ ] Create custom `404.html` for S3 error document
- [ ] Add `favicon.ico` and `apple-touch-icon.png` to root
- [ ] Build backend `GET /api/store/products` catalog endpoint (replace hardcoded CATALOG in `js/store.js`)
- [ ] Build admin product CRUD UI in `admin/` panel
- [ ] Build splurjj.com MIMIC button (code spec in `ECOSYSTEM.md` §1)
- [ ] Build backend `/api/mimic/*` endpoints (prepare + adopt)
- [ ] Phase 2: Linked accounts OAuth flow (splurjj.com ↔ goalsapp.store)

### Low Priority
- [ ] Add Open Graph image (`og:image`) for social sharing
- [ ] Compress `images/bg-determination.jpg` (497 KB — largest asset)
- [ ] Add `preload` hints for hero images and fonts in `index.html`

---

## 📁 Project Context

**Splurjj Dev Workspace** covers three frontend projects:
1. **GOALS** (`goalsapp.store`) — this repo
2. **Ooki Music** — music platform frontend
3. **RGoals Dating** — social matching app

All three use the same V5 dark design system: Space Grotesk + Inter typography, `#22c55e` green accent, `#0a0a0a` dark background.