Skip to content

Latest commit

Β 

History

4 Commits

Folders and files

NameName
Last commit message
Last commit date
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸŽ‚ Happy Birthday Udita β€” Interactive E-Greeting Web App 🎈✨

A personalized, interactive, and beautifully animated Happy Birthday E-Greeting Web Application specially crafted for Udita ❀️.

Features light-on effects, music playback, festive decoration banners, flying balloons spelling UDITA, candle lighting, real-time message progress bar, and a heart-touching romantic message sequence.


🌟 Key Features

  • πŸ’‘ Interactive Turn-On Lights: Click to glow multi-colored party bulbs and create a cozy peach-themed atmosphere.
  • 🎡 Background Music Playback: Integrated audio playback for festive vibes (hbd.mp3).
  • πŸŽ€ Decorative Banner & Flying Balloons: Floating colorful balloons spelling U D I T A with dynamic rotation and physics animation.
  • πŸŽ‚ Birthday Cake & Candle Lighting: Interactive cake reveal with real-time candle flame lighting.
  • πŸ“œ Heartfelt Story Sequence:
    • Real-time line-by-line romantic birthday message.
    • πŸ“Œ Top Notice Badge: Animated "Read carefully till the end ❀️" banner.
    • πŸ“Š Live Progress Bar: Real-time progress bar showing message completion count (Message X / 39).
    • πŸ’Œ "Show Full Message" Popup: Floating button allowing the user to view the full decorated love letter at once.
  • πŸ“± Fully Responsive Design: Tailored layouts for both Mobile and Desktop screens.

πŸ› οΈ Technology Stack

  • HTML5 & CSS3: Semantic structure, keyframe animations, glassmorphism UI, and responsive media queries.
  • JavaScript & jQuery: DOM manipulation, animation queues, dynamic positioning, and message loop logic.
  • Bootstrap 3: Grid layout utilities.
  • LESS: Dynamic cake & candle styling (cake.less).

πŸš€ How to Run Locally

Option 1: Direct Open

Simply double-click index.html or open it in any web browser!

Option 2: Local Web Server (Python)

python -m http.server 8080

Then visit http://localhost:8080 in your browser.

Option 3: Node.js / Live Server

npx serve .

🌐 Deploy to GitHub Pages

  1. Go to your repository settings on GitHub: virajverse/birthday.
  2. Click on Pages in the left sidebar under Code and automation.
  3. Under Build and deployment -> Branch, select main branch and click Save.
  4. Your birthday wish site will be live at: https://virajverse.github.io/birthday/ πŸ’–

Crafted with ❀️ for Udita's Birthday Celebration ✨

About

πŸŽ‚ Interactive Happy Birthday E-Greeting Web App with animated lights, music player, and flying balloon effects.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages