🍔 POPFOI × McDonald's — System Map

Full architecture & troubleshooting guide for popfood.vip

📁 File Structure
MCD UTAMA/ │ ├── CNAME → Custom domain: popfood.vip ├── index.html → Main webpage (form + receipt) │ ├── src/ │ ├── app.js → Core logic (form, validation, API, receipt) │ ├── food-bg.js → Floating emoji background animation │ └── style.css → All styling (McDonald's theme, animations) │ ├── Cloudflare Worker/ │ └── index.js → Backend proxy (validation → Sheets + Telegram) │ ├── Google App Script/ │ └── script.gs → Google Sheets writer (appends row) │ └── media/ → Static assets ├── banner.jpg → Hero banner image ├── mcd.png → McDonald's logo + favicon ├── foi.png → POPFOI logo ├── bea.png luz.png n1.png → Platform logos (emoji click game) └── sur.png zoe.png → Platform logos (emoji click game)
🌐 Hosting & Domain
ComponentWhere It Lives
Frontend STATICGitHub Pages (index.html + src/ + media/)
Custom Domainpopfood.vip
Cloudflare Worker APImcd.danilla-vargas1923.workers.dev
Google Apps Script BACKENDWeb App (URL in Worker env GOOGLE_SHEET_URL)
Telegram Bot NOTIFYBot API (token in Worker env TG_BOT_TOKEN)
Google Sheet DBLinked to Apps Script — stores all registrations
🔀 Complete Data Flow
USER (Browser) │ │ 1. Opens popfood.vip │ → index.html loads → style.css → food-bg.js → app.js │ │ 2. Types Game ID (10 digits) → Tier table reveals │ 3. Types Email → Warning box appears │ │ 4. Clicks "REGISTRE-SE!" │ → app.js validates: ✓ 10 digits ✓ valid email │ → Button disabled → "Enviando..." │ → Generates São Paulo timezone date/time │ ▼ │ 5. POST → https://mcd.danilla-vargas1923.workers.dev │ Body: { platform, game_id, email, registered_date, registered_time } │ Retry: up to 3 attempts (300ms, 600ms delays) │ ▼ CLOUDFLARE WORKER │ │ 6. Validates again: ✓ 5 fields ✓ game_id ✓ email │ │ 7. Fires TWO tasks in parallel (Promise.allSettled) │ ├───────────────────────────────┐ │ │ ▼ ▼ GOOGLE APPS SCRIPT TELEGRAM BOT API │ │ │ 8a. POST JSON (3 retries) │ 8b. sendMessage (2 retries) │ 200ms backoff │ MarkdownV2 format │ │ │ 9a. script.gs: │ 🍔 NOVA INSCRIÇÃO │ → Parse JSON │ 📱 Platform │ → Append row to Sheet │ 🎮 Game ID │ → {success: true} │ 📧 Email 🕐 Date │ │ └──────────────┬────────────────┘ │ ▼ │ 10. Worker checks: │ → Sheet MUST succeed (or 502 error) │ → Telegram fail = silent (non-blocking) │ → Returns { success: true } │ ▼ BACK TO BROWSER │ │ 11. Success → Hide form → Show receipt → Fill fields → Scroll top │ 12. 2s delay → Auto-download receipt PNG (html2canvas) │ 13. User can click "📥 Baixar" or "Fazer outra inscrição"
📄 File-by-File Breakdown
index.html — Main Page
SectionID / ClassPurpose
Header.mcd-bannerPOPFOI × McDonald's logo bar
Banner Image.banner-wrap > .banner-imgHero banner with breathing animation
Form Page#pageFormRegistration form (visible by default)
How It Works.how-it-works3-step guide (recharge → receive → use)
Game ID#gameId10-digit numeric input
Tier Table#tierSectionHidden until typing; shows R$ → voucher tiers
Email#emailEmail with focus-triggered warning
Email Warning#emailWarning"Check your email!" warning (hidden until focus)
Submit Button#submitBtn"🍔 REGISTRE-SE! 🍔" — disables on submit
Receipt Page#pageReceiptHidden; shown after successful submit
Receipt Card#receiptCaptureDiv captured by html2canvas for PNG
Receipt Fields#rcptPlatform #rcptGameId #rcptEmail #rcptDateFilled dynamically after submit
Download#btnDownloadManual receipt PNG download
Back ButtonresetForm()Reset form, show form page
Toast#toastPopup notification bar
Footer.mcd-footer"amo muito tudo isso™" branding
DevTools BlockInline <script>Disables F12, Ctrl+Shift+I/J/C, Ctrl+U, right-click
Hidden Field#platformAlways "POPFOI" (hidden input)
src/app.js — Core Application Logic
Function / BlockWhat It Does
WORKER_URLhttps://mcd.danilla-vargas1923.workers.dev
loadHtml2Canvas()Lazy-loads html2canvas from jsDelivr CDN
Preload on window.loadStarts loading html2canvas 1s after page load (non-blocking)
gameIdInput listenerShows tier table on first keystroke
email focus listenerShows email warning on first focus
showToast(msg)Shows toast notification (3.5s duration)
resetForm()Clears form, hides receipt, scrolls to top
generateTicketId()Creates MCD-XXXX-XXXX ticket (defined but NOT used)
getSaoPauloDate()Gets current date in America/Sao_Paulo timezone
formatDate(d)→ "Mon, 09 Mar 2026"
formatTime(d)→ "14:30:05"
showReceipt(...)Fills receipt fields, toggles pages, auto-download after 2s
downloadReceipt()html2canvas captures #receiptCapture as PNG
sendToWorker(data, retries)POST to Worker with 3 retries; 4xx = no retry, 5xx = retry
form.submit handlerValidate → disable btn → send → receipt or error
✅ Client-Side Validation Rules
  • Game ID: exactly 10 digits (/^\d{10}$/)
  • Email: basic format (/^[^\s@]+@[^\s@]+\.[^\s@]+$/)
  • Both fields required
src/food-bg.js — Background Animation
WhatDetail
Emojis🍔 🍟 🥤 🍦 🌮 🍗 — randomly chosen
Count12 floating emojis
PositionLeft 0-20% or right 80-100% of screen
AnimationFloat upward, 10-20s duration, random delay
Click GameClick emoji → burst animation + platform logo flash
Logosbea.png foi.png luz.png n1.png sur.png zoe.png
RespawnNew emoji replaces clicked one after burst
Cloudflare Worker/index.js — Backend Proxy
SectionDetail
CORSAll origins (*), POST + OPTIONS only
Method CheckOnly POST (405 for others)
Validation5 required fields, game_id 10 digits, valid email
Google SheetsretryFetch() — 3 attempts, 200ms backoff
Sheet CheckVerifies JSON {success:true} (not HTML error page)
TelegramsendTelegram() — 2 attempts, 300ms delay
ParallelSheet + Telegram via Promise.allSettled
Error LogicSheet fail → 502; Telegram fail → silent
EscapingescapeMarkdown() for MarkdownV2 special chars
Google App Script/script.gs — Sheet Writer
WhatDetail
FunctiondoPost(e) — triggered by HTTP POST
InputJSON from Cloudflare Worker
Columnsregistered_date | registered_time | platform | game_id | email
FlushSpreadsheetApp.flush() forces immediate write
Response{success: true} or {success: false, error: "..."}
src/style.css — Styling (733 lines)
AreaClasses
BaseRed background #da291c, diagonal stripe pattern
Wrapper.page-wrapper — max 420px, centered, rounded
Banner.mcd-banner — top logo bar
Banner Image.banner-img — breathing animation (8s)
Form.card — white card, rounded corners
InputsStyled with focus glow, shake on invalid
Tier Table.tier-table — alternating rows, branded
Submit Button.btn-submit — golden gradient, shine effect
Receipt.receipt-container — zigzag edge card
Toast.toast — slide-up popup
Food BG.bg-food span — float upward animation
🔧 Troubleshooting

Click any problem to expand the solution.

🚫 Form submits but nothing happens / "Falha na conexão" ▶
  1. Browser Console → Look for network errors or CORS issues
  2. Worker URL → Is https://mcd.danilla-vargas1923.workers.dev alive?
    Test: curl -X POST <URL> -H "Content-Type: application/json" -d '{"platform":"test","game_id":"1234567890","email":"t@t.com","registered_date":"x","registered_time":"x"}'
  3. Worker Logs → Cloudflare Dashboard → Workers → Logs
  4. Google Sheet URL → Is Apps Script deployed as Web App?
    Must be: Execute as Me, Access: Anyone
    Check GOOGLE_SHEET_URL env var is set
📩 Data saved to sheet but no Telegram notification ▶
  1. Check TG_BOT_TOKEN env var is set in Cloudflare Worker
  2. Check TG_CHAT_ID env var is set in Cloudflare Worker
  3. Bot must be added to the chat/group with send message permission
  4. Telegram failures are silent — check Worker logs for "Telegram attempt X" errors
📊 Google Sheet not receiving data ▶
  1. Apps Script deployment — Must be deployed as Web App (not just saved)
  2. Redeployment — After editing script.gs, create a New Deployment
  3. Sheet permissions — Script must have Sheets access authorized
  4. Worker env var — GOOGLE_SHEET_URL must point to /exec URL (not /dev)
  5. Response format — Worker checks for JSON {success:true}; HTML = retry & fail
📸 Receipt image not downloading ▶
  1. html2canvas CDN — Check if cdn.jsdelivr.net is reachable
  2. Mixed content — All images must be HTTPS or local
  3. CORS on images — useCORS: true is set, but external images may block
  4. Popup blocker — Auto-download at 2s may be blocked; user can click "📥 Baixar"
⚠️ Form validation errors ▶
Error MessageCauseFix
"Preencha todos os campos!"Empty game_id or emailFill both fields
"ID do jogo deve ter exatamente 10 dígitos!"Not 10 digitsEnter exactly 10 digits
Input shakesInvalid game_idCheck digit count
"Por favor, insira um e-mail válido."Email fails regexEnter valid email
"Dados inválidos"Worker rejects (4xx)Check validation rules
🔗 CORS errors in browser console ▶
  1. Worker returns Access-Control-Allow-Origin: * on all responses
  2. Preflight (OPTIONS) returns 204 with CORS headers
  3. If you see CORS errors, the Worker may be down or misconfigured
  4. Check Cloudflare dashboard for Worker status
🎨 Page looks broken / unstyled ▶
  1. Check src/style.css is loading (Network tab)
  2. Check Google Fonts (fonts.googleapis.com) is reachable
  3. Check media/ images exist and are accessible
  4. Clear browser cache
🍟 Floating emojis not showing ▶
  1. food-bg.js must load after DOM (defer attribute)
  2. Check console for JS errors
  3. .bg-food container is prepended to <body> by the script
  4. @keyframes foodFloat must exist in style.css
🌐 Custom domain not working ▶
  1. CNAME file contains popfood.vip
  2. DNS must point to GitHub Pages (or your host)
  3. HTTPS certificate must be provisioned (GitHub Pages → Settings → Pages)
  4. Cloudflare DNS proxy may interfere — check DNS settings
🔑 Environment Variables

Set in Cloudflare Workers → Settings → Variables

GOOGLE_SHEET_URL = https://script.google.com/macros/s/XXXX.../exec
TG_BOT_TOKEN = 123456:ABC-DEF...
TG_CHAT_ID = -100XXXXXXXXXX
🔗 Key URLs & Endpoints
WhatURL
Live Sitehttps://popfood.vip
Worker APIhttps://mcd.danilla-vargas1923.workers.dev POST
Worker DashboardCloudflare → Workers & Pages → mcd
Apps Script EditorGoogle Apps Script dashboard → find project
Google SheetLinked to Apps Script (getActiveSpreadsheet())
html2canvas CDNcdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
Fontsfonts.googleapis.com (Nunito + Courier Prime)
🔄 How to Update / Redeploy
FRONTEND index.html, src/, media/
  1. Edit files locally
  2. Push to GitHub (or upload to static host)
  3. GitHub Pages auto-deploys from branch
WORKER Cloudflare Worker
  1. Edit Cloudflare Worker/index.js
  2. Cloudflare Dashboard → Workers → mcd → Quick Edit (or Wrangler CLI)
  3. Paste updated code → Save and Deploy
BACKEND Google Apps Script
  1. Edit Google App Script/script.gs
  2. Go to Apps Script editor → paste code
  3. Deploy → New Deployment (must create NEW, not just save)
  4. Copy the new /exec URL
  5. Update GOOGLE_SHEET_URL in Worker env vars if URL changed
⚡ Security Measures
MeasureWhereWhat
DevTools Blockedindex.htmlF12, Ctrl+Shift+I/J/C, Ctrl+U, Ctrl+S, right-click
Double Validationapp.js + WorkerClient AND server validate game_id & email
CORS RestrictedWorkerOnly POST + OPTIONS allowed
Retry + BackoffClient + Worker3x client, 3x sheet, 2x telegram
Error IsolationWorkerTelegram fail doesn't block registration
Input SanitizationWorkerMarkdownV2 chars escaped for Telegram

🔒 Enter Password