A full-stack AI-powered platform built with Cloudflare Workers, D1, KV, Firebase, and modern web technologies — featuring intelligent automation, analytics, user management, and a powerful admin dashboard.
# Vision Guard — site, shop and staff attendance
Three pages and a small API for the real Vision Guard catalogue. Bilingual
Arabic (RTL, default) / English (LTR), dark by default with a full light theme.
| | |
| --- | --- |
| `/` | The marketing page — scroll-scrubbed hero, categories, price list. |
| `/shop` | Filterable catalogue, cart, checkout. Orders land in the database and push a WhatsApp notification to the shop. |
| `/account` | Sign in / sign up with separate consent boxes, order history, preferences, an attendance tab for `@visionguardeg.com` addresses, and a team timesheet for administrators. |
| `/privacy` | The privacy policy, in both languages. Linked from every footer and from each consent box. |
**No build step and no front-end framework.** The pages are hand-written HTML,
CSS and ES modules. The back end is Cloudflare Pages Functions over a D1
database — same deploy, same repo, no separate server.
---
## The direction
**Editorial restraint over decoration.** One chromatic colour — the azure lifted
from the logo (`#1B9DD9`). Everything else is near-black, hairline greys and
white. The accent is rationed: primary buttons, active states, price figures,
the live dots, and the hero canvas. Nowhere else.
**A real dark-mode logo.** The supplied logo's "GUARD" wordmark is `#58595B`,
which lands around **1.9:1 contrast** on the near-black background — unreadable.
`assets/logo-dark.png` is the dark-mode variant: every greyscale pixel mapped to
white, every chromatic pixel left alone, alpha preserved so the antialiasing
stays clean. VISION keeps its exact azure; GUARD and the swoosh go white. The
split was done by saturation (`sat ` references — three for the dark variant, two in ` ` for the
light one.
---
## Deploying to Cloudflare Pages
There is no build step. Pick one of the two routes below — but do the one
mandatory setup step first.
### Before the first deploy
1. **Set `SESSION_SECRET`** in **Workers & Pages → visionguard → Settings →
Varia …