Cheddar — cheddar.cam
Marketing + compliance site for Cheddar, a kids' camera app (ages 3 and up).
Plain static HTML/CSS/vanilla JS. No build step. No framework. No trackers.
.
├── index.html # Home: hero, walkthrough carousel, feature cards,
│ # Safety, photo band, Cheddar Says voices,
│ # testimonials, FAQ CTA, footer
├── faq.html # Accordion FAQ (native <details>, no JS needed)
├── privacy.html # Plain-language, COPPA-aware privacy policy
├── contact.html # mailto contact card
├── css/styles.css # The whole design system ("Painted Toy" palette)
├── js/main.js # Progressive enhancement (audio, carousel, reveals)
├── fonts/ # Self-hosted Nunito (variable woff2, latin + latin-ext)
├── assets/img/ # Icon (png + webp, several sizes), favicon, OG image
├── assets/voices/ # 10 character voice-preview clips (.m4a) from the app
├── _headers # Cloudflare Pages security + cache headers
├── robots.txt, sitemap.xml
Design direction pulls from Adobe Aqua (playful kid-brand warmth) and
Optimizely (bold section stacking, big type). Key mechanics:
- Floating header — a logo pill on the left + a nav-cluster pill on the right
(Features · Safety · Testimonials · FAQ + store badges), floating over the hero.
- Stacked "sheet" sections — full-width panels with rounded top corners
only, each sliding up over the previous with a soft top shadow. Section
backgrounds do the color-blocking (no white gaps between them).
- Bold color blocking — yellow hero, solid Gallery-Blue Safety band, solid
Timer-Purple FAQ band, with lighter tinted sections between.
- CSS camera-UI hero — a hand-built phone showing Cheddar's camera screen
(shutter + colored toy buttons) with floating sticker buttons and sparkles. No
image asset needed; it's all CSS.
Local preview
No build needed. Any static server works:
python3 -m http.server 8000
# then open http://localhost:8000
(Open via a server, not file:// — the self-hosted fonts and audio need HTTP.)
Deploy — Cloudflare Pages
- Push this repo to GitHub/GitLab.
- Cloudflare dashboard → Workers & Pages → Create → Pages → Connect to Git.
- Build settings: Framework preset = None, Build command = (empty),
Build output directory =
/ (the repo root is the site).
- After the first deploy, Custom domains → Set up
cheddar.cam (cheddarcam.com stays attached and 301-redirects to it via a zone Redirect Rule). DNS is
already on Cloudflare, so it's one click.
Support email (contact page)
The contact page links mailto:[email protected] ([email protected] keeps routing too; both land in the same inbox). Set up free
Cloudflare Email Routing (dashboard → Email → Email Routing) to forward that
address to Ian's real inbox. If you'd rather not, change the address in
contact.html to a real inbox.
What's left to do (manual, by Ian)
1. App screenshots ← DONE (real screenshots wired in)
Real app screenshots now live in assets/screenshots/ (optimized WebP,
~30–45KB each, source PNGs came from the app repo's assets/Screenshots/). They
appear in the hero phone (camera.webp), the four walkthrough carousel slides
(camera, gallery, cheddar-says, settings), and the download section's
phone (say-cheese.webp). To refresh one, drop a new WebP at the same path (or
re-run the resize+cwebp step). photo-detail.webp is included but unused —
available if you want another slide. The CSS app-screen mockups remain as the
fallback if a screenshot ever fails to load.
1b. The full-width lifestyle photo ("Happiest in little hands")
That full-bleed band shows a gradient placeholder until you add a real photo of a
kid using the app. Save it as assets/img/kid-using-app.jpg and it becomes the
band's background automatically (JS probes for it; a legibility scrim is applied).
Privacy: shoot it specifically for the site — no other child's identifiable
face; toys/objects or your own kid with consent.
2. Real testimonials (placeholders in place)
The "Parents and kids love it!" section currently uses sample quotes with
monogram avatars (M / J / P on colored circles). Replace the three <blockquote>
texts and .testi-name lines in index.html with real ones before launch. To
use a real photo instead of a monogram, put an <img> inside .testi-avatar.
3. Real "Cheddar Says" & "Story" demo audio (optional, delightful)
The voice section has two locked ContentCards ("Demo coming soon"). To light them
up, save web-playable audio (e.g. .m4a/.mp3) and, on each .content-card,
add data-audio="assets/voices/…", remove is-locked, and remove disabled
from its .cc-play button:
<div class="content-card accent-purple" data-audio="assets/voices/cheddar-says-demo.m4a">
<button class="cc-play" type="button" aria-label="Play Cheddar Says demo"> … </button>
Privacy: record demo content specifically for the site (Ian narrating; photos
of toys/objects). Do not publish a real child's voice or identifiable photos.
4. The Play Store link
Live since 2026-10-26: https://play.google.com/store/apps/details?id=com.cheddarcam.android.
It lives in two places that must stay in sync: PLAY_STORE_URL at the top of
js/main.js (applied to every [data-play-store] button on load) and the href
of those same anchors in the HTML (no-JS fallback, crawlers, and the JSON-LD
installUrl in index.html). The iOS App Store badge still shows "Coming soon."
Design system
The app's "Painted Toy" palette, radii, and motion live as CSS custom
properties atop css/styles.css — Shutter #FFD54A, Gallery #3E9BD1, Settings
#EE9A17, Flip #2CB283, Timer #7A67D9, Delete #E45B4E, Favorite #F06BA3.
Accent theming uses .accent-* utility classes (no inline styles, so the strict
CSP needs no unsafe-inline). Buttons are the app's "ToyButtons" (chunky pill
with a solid darker bottom edge that presses down on click). Store badges are
self-hosted inline SVG (no third-party embeds). All decorative motion — the hero
icon bob, cheese-hole float, reveals, carousel smooth-scroll — is disabled under
prefers-reduced-motion, and the whole site is readable with JS off.
Notes on the carousel
The feature carousel is a native horizontal scroll-snap track inside the phone
frame: touch/trackpad swipe drives it, and arrows, dots, and arrow keys enhance
it. JS keeps the caption (title/description/accent) and active dot in sync with
the centered slide. With JS off, the first slide's caption shows and the track is
still swipeable.
