🎭 Responsive 3D Greeting Card Suite

A lightweight, zero-backend, fully responsive 3D animated greeting card platform. Built completely with static HTML, TailwindCSS, and native JavaScript, it functions both as an immersive card reader and an inline authoring tool.

👉 Live Demo / Creator Suite: sarin-jacob.github.io/card?create=true

---

✨ Core Engineering Features

• 100% Serverless Data Injection: Cards are entirely self-contained within the URL string. Card data is compiled into a Unicode-safe Base64 string payload (?data=...), eliminating the need for database storage.
• Dual-Axis Responsive 3D Mechanics: The layout adapts smoothly across breakpoints. On desktop viewports, the card opens horizontally (rotateY), while on mobile viewports it transforms into an intuitive vertical flip (rotateX).
• Asynchronous Font-Safe Auto-Scaling: Uses an iterative layout tracking engine that calculates element heights only after custom typography (Caveat handwriting) finishes loading. If text overflows on compact screens, it dynamically scales the font size down pixel-by-pixel to perfectly fit the page.
• Clean History URL Rewriting: When a user opens a Base64 invitation link, the engine extracts the data payload, safely commits it to local persistence (localStorage), and instantly purges the heavy query parameter from the address bar using window.history.replaceState().
• Integrated Forge Editor: Accessing the endpoint via ?create=true unlocks a hidden authoring suite complete with gradient style presets, real-time input cursor tracking, an inline fast-emoji injection dock, and a one-click copy generator.

---

📂 Repository Structure

├── index.html        # The single-file engine (Core Application & UI Layer)
├── cards.json        # Local registry database for hardcoded legacy template presets
└── README.md         # General documentation

🚀 How It Works & Usage

1. Reading a Serverless Link

When a user visits a link containing the Base64 payload, the engine automatically extracts the config object, removes the messy trailing data from the browser bar for a clean aesthetic, and triggers the automated opening timing sequence:

https://sarin-jacob.github.io/card?data=eyJjb3ZlclRpdGxlIjoiRm9...

2. Utilizing The Local Database (cards.json)

If you want to spin up pre-baked cards quickly using explicit, static identifiers, ensure your configurations are cataloged in cards.json and pass the specific token id as a matching route parameter:

https://sarin-jacob.github.io/card?id=bday-friend

3. Accessing the Builder UI

To bypass the reading engine completely and launch the interactive visual card builder dashboard:

https://sarin-jacob.github.io/card?create=true

---

🛠️ Local Development & Testing

Because the runtime environment fetches the static cards.json database fallback asynchronously via the native Fetch API, modern web browsers will block requests opened straight out of a raw local directory due to standard security protocols (CORS constraints).

To host or test the code locally:

1. Fire up a simple local engine inside the directory via terminal:

# Python 3.x
python -m http.server 8080

\n2. Navigate your local viewport browser engine path to:

http://localhost:8080/?create=true

---

🗂️ General Greeting Presets Registry

This index catalogues the 16 general preset templates configured form the cards.json file. None of these configurations reference specific names, making them instantly reusable. Each template has a tailored theme accent color and background gradient.

---

🎂 Set A: Birthdays & Milestones

Template ID	Target Relationship	Cover Theme	Accent Color
bday-friend	General Friend	Cheers to You! 🥂	#fda085
bday-from-son	Parent / Mentor	To the Very Best... 🌟	#8fd3f4
bday-from-dad	Son / Daughter	So Proud of You ✨	#764ba2
bday-from-mom	Son / Daughter	Celebrating You Today ❤️	#ff9a9e
bday-from-daughter	Parent / Mentor	To Someone Wonderful 💝	#d57eeb

---

🎓 Set B: Achievements & Celebrations

Template ID	Context	Cover Theme	Accent Color
congrats-success	Success / Promotions	You Did It! 🎉	#fddb92
graduation-parent	Academic Graduation	The Next Chapter 🎓	#4facfe
anniversary-parent	Wedding / Anniversary	Happy Anniversary! 🥂	#a6c1ee
good-luck	Career Changes / Risk	Wishing You Luck! 🚀	#ffb199

---

🌿 Set C: Gratitude, Care & Support

Template ID	Context	Cover Theme	Accent Color
thanks-generic	Appreciation Note	Deepest Thanks 🙏	#a1c4fd
support-friend	Hard Times / Comfort	Thinking of You 🌿	#cfd9df
get-well	Recovery / Sickness	Rest up & Recover ☕	#ace0f9
encouragement-generic	Motivation Booster	Keep Going ⚓	#a8efff

---

💬 Set D: Casual & Seasonal Connects

Template ID	Context	Cover Theme	Accent Color
just-because-dad	Child to Dad Check-in	Checking In... 💬	#e6e9f0
just-because-son	Parent to Son Check-in	Hello! 👋	#96e6a1
holiday-generic	Festive Season	Happy Holidays! ❄️	#bbc1c9