🚩
PRIMO FLAGS Reverse-Engineered by Antigravity
LIVE SHOWCASE WEBSITE

Explore and Craft the Banners of Sovereignty

A premium, interactive vexillology database, adaptive testing platform, and vector flag design canvas built with pure client-side technology.

Launch Live App Demo View on GitHub Deployed on Cloudflare Pages

Project Overview

PRIMO Flags is designed for both flag enthusiasts (vexillologists) and visual learners. It provides a multi-functional ecosystem built on strict client-side efficiency.

πŸ”

Interactive Flag Archive

Explore a detailed catalog of 250+ world and historic banners. Search instantly by country name, design elements, color tags, regions, and historic eras. Learn adoption dates, aspect ratios, color meanings, and historical trivia.

🎨

Flag Canvas Studio

Design your custom banner with the vector canvas engine. Choose from classic patterns like bi-colors, tri-colors, saltires, canton formats, and Nordic crosses. Adjust HSL color panels, place custom insignia, and export as a high-resolution PNG.

πŸ†

Vexillology Master Quiz

Test your flag knowledge with a state-driven educational quiz. Supports modern and historic subsets. Features random wrong-answer generation, live progress bar feedback, score counting, and visual performance report summaries.

Technical Analysis

βš™οΈ Codebase Architecture & Structure

The project follows a clean, vanilla architecture with no external framework dependencies. This allows for near-instantaneous load times and complete rendering control. Key files are structured logically:

index.html

Houses structural elements, container states, templates, and the details overlay modal.

styles.css

Contains the dark HSL design tokens, custom glassmorphism panels, and keyframe micro-interactions.

app.js

Implements client-side state machine, filter queries, quiz triggers, and HTML5 Canvas API drawings.

flags_data.js

Main database storing flag objects, tags, ratios, vector SVG paths, symbolism and historical trivia.

🎨 HTML5 Canvas Drawing Algorithms

The flag designer utilizes rendering pipelines via the Canvas 2D Context. Rather than static images, it executes vector math coordinates for custom insignia:

  • β€’ Geometric Layouts: Translates ratios like the Scandinavian Offset Cross, the Saltire (X-Cross), and canton bounds into sub-pixel coordinate fills.
  • β€’ Stars Math: Custom loop plotting outer and inner radii vertices with rotational offset (Math.cos/sin math steps) to draw crisp 5-point stars.
  • β€’ Crescent Moon Masking: Implements compositing operations using globalCompositeOperation = 'destination-out'. It draws the primary disk and masks it with a shifted secondary arc, rendering the background underneath.

🧠 State-driven Quiz Engine

The educational engine manages game phases using a unified JS state model.

  • β€’ Dynamic Option Shuffling: Filters out the target flag, selects 3 random incorrect alternatives, merges the array, and shuffles indices to prevent position bias.
  • β€’ State Locking: Locks inputs upon answer selection, displaying correct/wrong borders and firing feedback overlays before updating accuracy bars.
  • β€’ Adaptive Feedback: Aggregates accuracy metrics to deliver personalized diagnostic summary statements (e.g., Vexillology Master vs. Novice practitioner).
EXPERIENCE THE PLATFORM

Interactive Live App

Try the fully-functional live app ported directly to this page. Toggle between the Flag Creator, Vexillology Quiz, and Flag Database.

Flag Designer Controls

Color 1
Canvas Live Render (2:3 Ratio)
Width: 600 px
Height: 400 px
Composition: HTML5 Canvas Context2D

How It Works

1

Define Canvas Grid

The script maps the Canvas size (600x400) to sub-elements using normalized 2:3 aspect coordinates, ensuring proportional rendering on any client resolution.

2

Draw Background Layout

A state-check determines vertical/horizontal subdivisions, applying selected HSL variables to fill geometric rectangles or stroke diagonal crosses.

3

Inject Center Symbols

Vector equations map coordinates for emblems. Star points are drawn, or composite clipping isolates moon rings directly on the active buffer.

4

Export Data Buffer

When triggered, the app compiles the canvas pixel arrays into a binary PNG data URI, launching a temporary anchor link download.

Tech Stack & Architecture

🌐

HTML5 Semantics

Structured layout separation optimizing accessibility standards.

🎨

Tailwind Play CDN

Instant typography, spacing, and glassmorphic designs styled in real-time.

⚑

ES6 JavaScript

Vanilla modules managing navigation tabs, state arrays, and quiz scores.

πŸ–₯️

Canvas API

Vector operations rendering customizable patterns and emblems directly.

☁️

Cloudflare Pages

Global edge caching hosting the application with maximum performance.

Getting Started Locally

Run the original repository locally. PRIMO Flags is a static client-side project, so launching a server takes seconds.

1. Clone the project 
git clone https://github.com/dreamclaw/dream-net.git
cd dream-net/PRIMO_REPO
2. Launch a lightweight local server 
# Option A: Python server
python3 -m http.server 8083

# Option B: Node server
npx live-server
3. Open in browser 
http://localhost:8083

πŸš€ Deploy to Cloudflare in 60 Seconds

CLI APPROACH

Wrangler Deployment

Use Cloudflare's direct CLI command to push your project bundle straight to Cloudflare's global edge servers without setting up GitHub pipelines.

  1. Install the Wrangler CLI globally via Node.
  2. Log in to your Cloudflare dashboard account.
  3. Deploy the codebase folder directly.
npm install -g wrangler
wrangler login
wrangler pages deploy . --project-name=primo-flags
DASHBOARD APPROACH

Drag & Drop Upload

Cloudflare Pages offers a zero-code web interface where you can drop your project folder directly into their dashboard web-app.

  • Log into the Cloudflare Dashboard.
  • Go to Workers & Pages and click Create -> Pages.
  • Select Upload assets.
  • Enter your project name, and drag-and-drop the PRIMO_REPO folder containing your code.
  • Click Deploy site and your live website is ready!