FSLAMES Landing Page

A static, one-page marketing site for the FSLAMES Android app. Plain HTML + Tailwind CSS v4 (compiled at build time) + a few lines of vanilla JS. It lives in website/ and does not touch the Flutter app.

Local testing

cd website
npm install
npm run build        # compiles CSS + copies index.html and public/ into dist/
npm run dev          # serves dist/ (default: http://localhost:3000)

The download buttons point at downloads/fslames-v2.0.0.apk. To test the real APK locally, copy it in (the folder is git-ignored):

copy ..\fslames-mobile-app\build\app\outputs\flutter-apk\fslames-v2.0.0-20261023.apk downloads\fslames-v2.0.0.apk

APK download — one config point

public/config.js is the single place the download destination lives:

window.FSLAMES_APK = {
  url: "https://github.com/fpaulpalis/fslames-app/releases", // <- redirect target
  version: "2.0.0",
  size: "126 MB",
  updated: "October 2026",
  requires: "Android 10+",
};

Every "Download APK" button (header, hero, download section, footer) reads from this object. If url is left empty, the buttons flip to a harmless "APK coming soon" state instead of a broken link.

Before deploying: the APK is ~126 MB, so it cannot be committed to GitHub (100 MB push limit) or served from most static hosts. Recommended: upload build/app/outputs/flutter-apk/fslames-v2.0.0-20261023.apk as a GitHub Release asset, then paste its download URL into config.js.

Deploying to Vercel

1. Push this repository to GitHub (*.apk and node_modules are ignored).
2. In Vercel: Add New → Project → import the repo.
3. Set Root Directory to website/. The bundled website/vercel.json sets:
   • install: npm install
   • build: npm run build
   • output: dist
4. Deploy. The site is fully static; direct navigation to / and refreshes work (static pages; cleanUrls also serves /privacy and /terms).
5. Set the hosted APK URL in public/config.js and redeploy.

Structure

website/
├── index.html            # the landing page
├── how-to-play.html      # Quick Start Guide: Practice
├── privacy.html          # Privacy Policy (text from lib/features/auth/policy_texts.dart)
├── terms.html            # Terms and Conditions (same source)
├── package.json          # build tooling (Tailwind CSS v4)
├── vercel.json           # Vercel build/output settings
├── src/
│   ├── styles.css        # Tailwind theme + bespoke styles (colors from the app)
│   └── main.js           # nav toggle, reveal-on-scroll, APK config wiring
├── scripts/copy-assets.mjs
├── public/
│   ├── config.js         # APK download configuration (edit before deploy)
│   └── img/              # logo, Learn-scene background, frog mascot, app mockups
└── downloads/            # local APK copy (git-ignored)

Optional QA: node qa/qa.mjs drives a headless Chrome over CDP to check overflow and capture screenshots at 390 / 768 / 1280 px (--full for full-page captures).

Design notes

• Colors, the green Learn-path background and the crowned frog mascot are reproduced from the app's own code (lib/core/theme/app_colors.dart, lib/widgets/learning_path.dart, lib/widgets/frog_mascot.dart).
• Fonts: Bricolage Grotesque (display) and Atkinson Hyperlegible (body) via Google Fonts, with system fallbacks.
• The phone images are hand-drawn SVG mockups of the real screens. If/when real device screenshots are captured (see docs/screenshot_plate_plan.md), drop PNG/JPG replacements into public/img/ and swap the <img src>s in index.html.