GitHub - Mohitscodiclab/ZYPHORA: Zyphora Invites is a futuristic, no-code invitation builder that lets you design fully customizable, interactive invites with ease. Create, personalize, and share beautifully crafted invitation pages—or export them as ready-to-host websites—making every moment feel unique and memorable.

███████╗██╗   ██╗██████╗ ██╗  ██╗ ██████╗ ██████╗  █████╗ 
╚══███╔╝╚██╗ ██╔╝██╔══██╗██║  ██║██╔═══██╗██╔══██╗██╔══██╗
  ███╔╝  ╚████╔╝ ██████╔╝███████║██║   ██║██████╔╝███████║
 ███╔╝    ╚██╔╝  ██╔═══╝ ██╔══██║██║   ██║██╔══██╗██╔══██║
███████╗   ██║   ██║     ██║  ██║╚██████╔╝██║  ██║██║  ██║
╚══════╝   ╚═╝   ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝

⬡ Advanced Invitation Builder — Design. Customize. Share.

ZYPHORA is a zero-backend, fully browser-powered invitation builder.
Create stunning digital invitations for birthdays, weddings, parties, business events & memorials —
then share instantly via a single link or QR code. No login. No server. No limits.

🌐 Live Link & Quick Access

Open ZYPHORA directly in your browser — no installation, no signup.

🔗  https://mohitscodiclab.github.io/ZYPHORA/

What	Link
🏠 Open Builder	mohitscodiclab.github.io/ZYPHORA
💻 GitHub Repo	github.com/MOHITSCODICLAb/ZYPHORA
☕ Support Dev	buymeacoffee.com/mohitscodiclab

✨ Features at a Glance

┌─────────────────────────────────────────────────────────────────┐
│  🎂  5 Invitation Domains    Birthday, Wedding, Party,           │
│                              Business, Funeral                   │
│  🖼️  Image & Video Upload    Live card preview + ambient glow    │
│  🎨  6 Premium Palettes      Gold, Crimson, Ocean, Emerald,     │
│                              Sunset, Minimal                     │
│  🔤  6 Font Pairings         Playfair, Cinzel, Cormorant,       │
│                              Great Vibes, Baskerville & more     │
│  💍  Wedding Timeline        Multi-event planner (Haldi,        │
│                              Mehendi, Sangeet, Baraat, etc.)     │
│  🎬  GSAP Animations         Typewriter, Zoom, Bounce, Fade     │
│  🔗  1-Click Share Link      Full invite encoded in the URL      │
│  📲  QR Code Generator       Scan & open on any phone           │
│  📦  ZIP Export              Standalone HTML + CSS + README      │
│  📵  Zero Backend            100% browser — no server ever      │
└─────────────────────────────────────────────────────────────────┘

📁 Folder Structure

ZYPHORA/
│
├── 📄  index.html          ← The entire app lives here (one file!)
│
├── 📄  README.md           ← You are here
│
└── 📁  assets/             ← Place YOUR images & videos here
    ├── 🖼️  sample-photo.jpg
    ├── 🎬  wedding-video.mp4
    └── ...  (any media files you want to use)

When you use Export ZIP, each invitation you export has its own self-contained structure:

invitation-birthday-1721234567.zip
│
├── 📄  index.html     ← Standalone invitation page
├── 📄  style.css      ← All styling (colors, fonts, layout)
├── 📄  README.txt     ← Hosting instructions
│
└── 📁  assets/        ← ⚠️ Drop your media file here
    └── your-photo.jpg

🚀 How to Deploy on GitHub Pages

Do this once and ZYPHORA will be permanently live at your URL.

Step 1 — Get the code

# Clone the repository
git clone https://github.com/MOHITSCODICLAb/ZYPHORA.git
cd ZYPHORA

Or simply Fork it on GitHub (click Fork button top-right on the repo page).

Step 2 — Push to your GitHub account

git add .
git commit -m "🚀 Initial deploy"
git push origin main

Step 3 — Turn on GitHub Pages

1. Open your repo on github.com
2. Go to  ⚙️ Settings  →  Pages  (left sidebar)
3. Under "Source" → choose:  Deploy from a branch
4. Branch: main   |   Folder: / (root)
5. Click Save

Step 4 — You're live! 🎉

Your ZYPHORA will be available at:
https://[your-username].github.io/ZYPHORA/

For this project:
https://mohitscodiclab.github.io/ZYPHORA/

GitHub Pages takes 1–3 minutes to deploy the first time.
After that, every git push auto-updates the live site.

🖼️ How to Add Images & Videos

ZYPHORA supports two workflows for media — pick whichever fits your use case.

Method 1 — Upload in the Builder (Instant, No Hosting) ✅

This is the fastest method for creating and sharing one-off invitations.

1. Visit https://mohitscodiclab.github.io/ZYPHORA/
2. In the left editor panel → scroll to the 🖼️ Media section
3. Click the dashed upload area
4. Choose any image (.jpg .png .webp .gif) or video (.mp4 .webm)
5. It instantly appears on the invitation card preview
6. The background automatically becomes a blurred ambient glow
7. Use 🔗 Share to generate your link — done!

⚠️ Note: Uploaded files are stored temporarily in your browser only.
They will NOT be included in the share link (the URL only encodes text state).
For shareable links WITH images, use Method 2 below.

Method 2 — Host Image Online → Use in Exported HTML

Best for permanent invitations that you host on GitHub Pages.

Step 1: Upload your photo to a free image host:
        ┌─────────────────────────────────────────┐
        │  imgbb.com       → free, permanent URLs  │
        │  postimages.org  → no account needed     │
        │  cloudinary.com  → best for production   │
        └─────────────────────────────────────────┘

Step 2: Copy the direct image URL (ends in .jpg / .png)
        Example: https://i.ibb.co/abc123/party.jpg

Step 3: Click ⬇ Export ZIP in ZYPHORA

Step 4: Open index.html in VS Code or any text editor

Step 5: Find this line:
        <img src="assets/your-photo.jpg" .../>

Step 6: Replace with your hosted URL:
        <img src="https://i.ibb.co/abc123/party.jpg" .../>

Step 7: Upload index.html + style.css to GitHub Pages
        → your invitation now has the image permanently embedded!

Method 3 — Add to assets/ Folder (Self-Hosted)

If you're hosting the full ZYPHORA repo yourself:

1. Place your file in:   ZYPHORA/assets/my-photo.jpg

2. In index.html, reference it as:
   <img src="assets/my-photo.jpg" .../>

3. Push to GitHub — the image will load from your repo

✅ Recommended Media Specs

Property	Recommended Value
Format	`.jpg` or `.webp` (best compression)
File Size	Under 2 MB for fast mobile loading
Image Dimensions	`1280 × 720px` or higher
Aspect Ratio	`16:9` for banner · `1:1` for portrait
Video Format	`.mp4` (H.264 codec)
Video Length	Under 30 seconds

🎨 How to Customize Your Invitation

Go to mohitscodiclab.github.io/ZYPHORA and use the editor on the left:

Step 1 — Pick a Domain (Top Navigation)

🎂 Birthday  → Colorful celebration style
💍 Wedding   → Multi-event timeline builder (Haldi, Mehendi, Baraat…)
🎉 Party     → Fun and casual gathering invite
💼 Business  → Professional meeting / conference card
🕊️ Funeral  → Gentle, respectful memorial notice

Switching domains auto-fills placeholders and restructures the form.

Step 2 — Fill in Content (✏️ Content Section)

Main Title    → The big heading on the card
               e.g. "Priya & Arjun", "Rohan's 30th", "Annual Meet 2025"

Subtitle      → A short tagline below the title
               e.g. "Turning 30 & Fabulous", "Unite in Love"

Pre-written   → Pick from 5 ready-made messages per domain
               (saves you time — just select and it fills in!)

Custom Msg    → Write your own personal message in the text box

Step 3 — Set Date, Time & Venue (📅 Section)

Date     → Click the date picker
Time     → Set the event time (displays as 12-hour format)
Location → Type the full venue name
           e.g. "Royal Orchid Hotel, Bengaluru"

For Wedding domain only:
The date/location section transforms into a Timeline Builder:

➕ Add Function → gives you fields for:
   • Function Name  (e.g. Haldi Ceremony)
   • Date           (pick from calendar)
   • Time           (12-hour display)
   • Venue          (specific venue per event)

Default events pre-added:
   Haldi · Mehendi · Sangeet · Baraat · Reception
   (you can edit names, add more, or remove any)

Step 4 — Add Contacts (📞 Section)

Mobile Number    → +91 98765 43210
WhatsApp Number  → +91 98765 43210  (can be same or different)

Toggle ON:
   📞 Show Call Button    → Adds a "Call" button on the card
   💬 Show WhatsApp Btn  → Adds a WhatsApp button on the card

Guests can tap these buttons directly from the invitation to call or message you.

Step 5 — Toggle Visibility (👁️ Section)

Glowing cyber-switch sliders:

  📅 Show Date & Time   →  Hide if date is TBD
  📍 Show Location      →  Hide for online events
  ✨ Show Subtitle      →  Toggle the tagline line
  📞 Show Call Button   →  Toggle call button
  💬 Show WhatsApp Btn  →  Toggle WhatsApp button
  🌫️ Ambient Background →  Toggle the background glow effect

Step 6 — Choose Colors (🎨 Theme Section)

Quick Palettes (1-click):
  🟡 Gold      BG #1a1230  |  Text #f5f0e8  |  Accent #c89b3c  → Royal/Luxury
  🔴 Crimson   BG #1a0a0a  |  Text #f8e8e8  |  Accent #e74c3c  → Passion/Love
  🔵 Ocean     BG #0a1628  |  Text #e8f4f8  |  Accent #1e90ff  → Calm/Corporate
  🟢 Emerald   BG #0a1a10  |  Text #e8f8ec  |  Accent #27ae60  → Nature/Fresh
  🟠 Sunset    BG #1a0814  |  Text #f8ede8  |  Accent #ff6b35  → Festive/Warm
  ⬛ Minimal   BG #111114  |  Text #e8e8e8  |  Accent #888899  → Clean/Modern

Custom Colors (fine control):
  Background Color  →  The card's base fill
  Text Color        →  All body text
  Accent Color      →  Headings, icons, borders, glows

Step 7 — Pick a Font Pairing (🔤 Section)

Card	Title Font	Body Font	Ideal For
Elegant	Playfair Display (italic)	Lato	Birthday, Wedding
Modern	Montserrat Bold	Lato	Business, Party
Classic	Cormorant Garamond	DM Sans	Formal Events
Minimal	Cinzel	Josefin Sans	Clean Invites
Romantic	Libre Baskerville	Raleway	Wedding, Memorial
Script	Great Vibes	Lato	Casual, Birthday

Step 8 — Set Animations (🎬 Section)

Title Animations:
  Fade In    → smooth soft appearance
  Zoom In    → dramatic scale entrance
  Bounce     → playful drop-bounce (great for birthdays!)
  Slide Down → sweeps in from above
  None       → no animation

Message Animations:
  ✨ Typewriter  → types character by character (most impressive!)
  Fade In        → gentle fade
  Slide Up       → rises from below
  None           → instant

→ Click ▶ Preview Animations to watch it all play out live.

💌 How to Send Invitations

ZYPHORA gives you 3 ways to share your invitation — choose what fits:

🔗 Option A — Share Link (Easiest, No Hosting Required) ⭐

1. Design your invitation in the builder
2. Click 🔗 Share in the top navigation bar
3. A unique URL is generated:
   https://mohitscodiclab.github.io/ZYPHORA/?data=eyJkb21haW...

4. Click Copy → paste the link anywhere:
   WhatsApp, Instagram DM, Email, SMS, Telegram…

5. Recipient opens the link → sees your invitation
   in full-screen VIEWER MODE (no editor, just the card)
   with animations playing automatically!

📲 Option B — QR Code

1. Click 🔗 Share → scroll down to the QR code
2. Screenshot the QR code image
3. Share via:
   • WhatsApp / Telegram (as image)
   • Instagram Stories
   • Print on physical cards or posters
   • Display on screen at the event venue

4. Anyone who scans it → instantly opens your invitation

📦 Option C — Export & Host Permanently

1. Click ⬇ Export ZIP
2. A file downloads: invitation-birthday-[timestamp].zip
3. Extract the ZIP:
   ├── index.html
   ├── style.css
   └── README.txt

4. Upload to any free host:
   ┌─────────────────────────────────────────────────┐
   │  GitHub Pages  → See deploy steps above         │
   │  Netlify.com   → Drag & drop the folder         │
   │  Tiiny.host    → No account, instant publish    │
   │  Vercel.com    → Connect GitHub repo            │
   └─────────────────────────────────────────────────┘

5. Share the permanent URL with all your guests

📱 Sending via WhatsApp / Email / SMS

WhatsApp — Paste the Link

1. Generate share link → click 🔗 Share → Copy
2. Open WhatsApp → open a chat or group
3. Paste the link with a message:

   "🎉 You're invited! Open this link to view your invitation:
    https://mohitscodiclab.github.io/ZYPHORA/?data=..."

WhatsApp Broadcast (Send to All Guests at Once)

1. Open WhatsApp → ⋮ Menu → New Broadcast
2. Add all your guests' numbers
3. Paste the ZYPHORA invite link
4. Hit send → everyone gets it as a personal message!

Email Template (copy & use)

Subject: You're Invited! 🎉 — [Event Name]

Hi [Guest Name],

We warmly invite you to join us for [Event Name].

👉 View your personal invitation here:
   https://mohitscodiclab.github.io/ZYPHORA/?data=...

Open the link on your phone or computer to see the full
invitation with all event details, date, and venue.

Looking forward to seeing you!
[Your Name]
[Your Contact]

SMS / iMessage

"Hi! You're invited 🎉 View your invitation:
 https://mohitscodiclab.github.io/ZYPHORA/?data=..."

(Keep it short — the link does all the talking!)

🔗 The Magic Share Link Explained

Your normal builder URL:
  https://mohitscodiclab.github.io/ZYPHORA/

Your share link:
  https://mohitscodiclab.github.io/ZYPHORA/?data=eyJkb21haW4iOiJiaXJ0aGRh...
                                                   ↑
                               Your ENTIRE invitation is compressed
                               into this Base64 encoded text string!
                               (No server, no database — pure URL magic)

What gets encoded in the link:

Data	Included?
Title, Subtitle, Message	✅ Yes
Date, Time, Location	✅ Yes
All color settings	✅ Yes
Font pairing	✅ Yes
Wedding events & timeline	✅ Yes
Contact numbers	✅ Yes
All toggle states	✅ Yes
Uploaded image/video	❌ No (use hosted image URL instead)

Viewer Mode — When someone opens a share link:

Editor panel is completely hidden
Invitation fills the entire screen beautifully
Animations play automatically after 0.4 seconds
Feels like a real premium digital invitation

🗂️ Editing Your Exported ZIP

After downloading the ZIP, you can hand-edit the files in any text editor (VS Code recommended).

Changing Text

<!-- Open index.html — find and change: -->

<h1 class="card-title italic" id="card-title">
  Sarah's Birthday Bash          ← edit title here
</h1>

<div class="card-subtitle">
  Turning 30 & Fabulous          ← edit subtitle here
</div>

<div class="card-message" id="card-message">
  Wishing you a wonderful day... ← edit message here
</div>

Changing Colors

/* Open style.css — edit these lines at the very top: */

:root {
  --inv-bg:     #1a1230;   /* Card background */
  --inv-text:   #f5f0e8;   /* Body text color */
  --inv-accent: #c89b3c;   /* Headings, icons, borders */
}

/* Use coolors.co to find beautiful hex color combos */

Changing Fonts

/* In style.css, find: */
--inv-font-title: 'Playfair Display', serif;
--inv-font-body:  'Lato', sans-serif;

/* Replace with any Google Font, e.g.: */
--inv-font-title: 'Dancing Script', cursive;
--inv-font-body:  'Nunito', sans-serif;

/* Then in index.html <head>, add the font link: */
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Nunito&display=swap" rel="stylesheet">

Changing the Media Image

<!-- Find in index.html: -->
<img src="assets/your-photo.jpg" alt="Invitation Media"/>

<!-- Replace with hosted URL: -->
<img src="https://i.ibb.co/abc123/party.jpg" alt="Invitation Media"/>

<!-- OR place the file in assets/ folder and keep the path -->

🧩 Domain Guide

🎂 Birthday

Best Palettes: Gold, Crimson, Sunset
Best Fonts: Elegant, Script, Romantic
Best Animation: Bounce title + Typewriter message
Tip: Upload a photo of the birthday person as media

💍 Wedding

Best Palettes: Gold, Crimson, Emerald
Best Fonts: Elegant, Romantic, Classic
Best Animation: Zoom In title + Typewriter message
Tip: Enable the wedding timeline — add each ceremony with its own date and venue. Add a romantic couple photo as media.

🎉 Party

Best Palettes: Sunset, Ocean, Emerald
Best Fonts: Modern, Script
Best Animation: Bounce title + Slide Up message
Tip: Use a vibrant event flyer or decoration photo

💼 Business

Best Palettes: Minimal, Ocean
Best Fonts: Modern, Minimal
Best Animation: Slide Down title + Fade In message
Tip: Keep message formal, use a clean office/venue photo

🕊️ Funeral / Memorial

Best Palettes: Minimal, Ocean
Best Fonts: Classic, Romantic
Best Animation: Fade In title + Fade In message (keep it subtle)
Tip: Use a peaceful nature photo or a portrait of the departed

💅 Theming & Color Reference

Built-in Palettes

Palette	BG Color	Text Color	Accent	Mood
Gold	`#1a1230`	`#f5f0e8`	`#c89b3c`	Luxury, Royal
Crimson	`#1a0a0a`	`#f8e8e8`	`#e74c3c`	Passion, Love
Ocean	`#0a1628`	`#e8f4f8`	`#1e90ff`	Calm, Corporate
Emerald	`#0a1a10`	`#e8f8ec`	`#27ae60`	Nature, Fresh
Sunset	`#1a0814`	`#f8ede8`	`#ff6b35`	Festive, Warm
Minimal	`#111114`	`#e8e8e8`	`#888899`	Clean, Modern

Custom Color Inspirations

Rose Gold    →  BG #1a1015  |  Text #f8e8e8  |  Accent #d4a0a0
Deep Navy    →  BG #0a0f1e  |  Text #e8eef8  |  Accent #4488ff
Lavender     →  BG #12101e  |  Text #f0e8f8  |  Accent #aa77ff
Champagne    →  BG #1a1810  |  Text #f8f5e8  |  Accent #d4b896
Forest       →  BG #0c1810  |  Text #e8f8ec  |  Accent #5db87a
Midnight     →  BG #06060f  |  Text #e8e8ff  |  Accent #7777ff

🤝 Support the Project

ZYPHORA is 100% free and open source. If it made your event special or saved you hours of design work, please consider supporting the developer!

☕ Buy Me a Coffee

buymeacoffee.com/mohitscodiclab

Every coffee fuels more free tools for everyone. 🙏

⭐ Star on GitHub

If ZYPHORA was useful, please star the repo — it helps others discover it!

⭐ Star ZYPHORA

🐛 Report a Bug or Request a Feature

Open an Issue

📄 License

MIT License — Copyright (c) 2025 MOHITSCODICLAb

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software to use, copy, modify, merge, publish, and
distribute it — provided this copyright notice is included.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.

Built with ❤️ by MOHITSCODICLAb

⬡ ZYPHORA — Design. Customize. Share.

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
assets		assets
Readme.md		Readme.md
favicon.png		favicon.png
index.html		index.html

Folders and files

Latest commit

History

Repository files navigation

⬡ Advanced Invitation Builder — Design. Customize. Share.

📌 Table of Contents

🌐 Live Link & Quick Access

✨ Features at a Glance

📁 Folder Structure

🚀 How to Deploy on GitHub Pages

Step 1 — Get the code

Step 2 — Push to your GitHub account

Step 3 — Turn on GitHub Pages

Step 4 — You're live! 🎉

🖼️ How to Add Images & Videos

Method 1 — Upload in the Builder (Instant, No Hosting) ✅

Method 2 — Host Image Online → Use in Exported HTML

Method 3 — Add to assets/ Folder (Self-Hosted)

✅ Recommended Media Specs

🎨 How to Customize Your Invitation

Step 1 — Pick a Domain (Top Navigation)

Step 2 — Fill in Content (✏️ Content Section)

Step 3 — Set Date, Time & Venue (📅 Section)

Step 4 — Add Contacts (📞 Section)

Step 5 — Toggle Visibility (👁️ Section)

Step 6 — Choose Colors (🎨 Theme Section)

Step 7 — Pick a Font Pairing (🔤 Section)

Step 8 — Set Animations (🎬 Section)

💌 How to Send Invitations

🔗 Option A — Share Link (Easiest, No Hosting Required) ⭐

📲 Option B — QR Code

📦 Option C — Export & Host Permanently

📱 Sending via WhatsApp / Email / SMS

WhatsApp — Paste the Link

WhatsApp Broadcast (Send to All Guests at Once)

Email Template (copy & use)

SMS / iMessage

🔗 The Magic Share Link Explained

🗂️ Editing Your Exported ZIP

Changing Text

Changing Colors

Changing Fonts

Changing the Media Image

🧩 Domain Guide

🎂 Birthday

💍 Wedding

🎉 Party

💼 Business

🕊️ Funeral / Memorial

💅 Theming & Color Reference

Built-in Palettes

Custom Color Inspirations

🤝 Support the Project

☕ Buy Me a Coffee

⭐ Star on GitHub

🐛 Report a Bug or Request a Feature

📄 License

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages