diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 28f1593..73575a4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -303,308 +303,308 @@ Contributors will be: - Invited to join the contributors team (for regular contributors) ======= -# Contributing to BYAMN Festhub 🎉 - -Thank you for your interest in contributing to BYAMN Festhub! We welcome contributions from everyone and are grateful for even the smallest fixes. - -## 🚀 Quick Start - -1. **Fork the repository** on GitHub -2. **Clone your fork** locally: - ```bash - git clone https://github.com/yourusername/byamn-festhub.git - cd byamn-festhub - ``` -3. **Create a branch** for your changes: - ```bash - git checkout -b feature/your-feature-name - ``` -4. **Make your changes** and test them thoroughly -5. **Commit your changes**: - ```bash - git commit -m "Add: Brief description of your changes" - ``` -6. **Push to your fork**: - ```bash - git push origin feature/your-feature-name - ``` -7. **Create a Pull Request** on GitHub - -## 🎯 Ways to Contribute - -### 🎨 Add New Festivals -- Create new festival greeting pages (Diwali, Eid, Holi, New Year, etc.) -- Follow the existing structure and naming conventions -- Include appropriate color schemes and cultural elements -- Add festival-specific wishes and images - -### 🌍 Localization -- Add support for more languages -- Translate existing content -- Ensure cultural sensitivity and accuracy - -### 🐛 Bug Fixes -- Fix UI/UX issues -- Improve browser compatibility -- Resolve mobile responsiveness problems -- Fix JavaScript errors - -### ✨ Feature Enhancements -- Improve existing functionality -- Add new customization options -- Enhance sharing capabilities -- Optimize performance - -### 📚 Documentation -- Improve README.md -- Add code comments -- Create tutorials -- Update screenshots - -## 📋 Development Guidelines - -### Code Style - -#### HTML -```html - -
-
-

Festival Name

- -
-
-``` - -#### CSS -```css -/* Use CSS custom properties for theming */ -:root { - --primary: #your-color; - --secondary: #your-color; - --accent: #your-color; -} - -/* Follow BEM naming convention when possible */ -.greeting-card { - /* Properties */ -} - -.greeting-card__title { - /* Properties */ -} - -.greeting-card--featured { - /* Properties */ -} -``` - -#### JavaScript -```javascript -// Use modern JavaScript (ES6+) -const elements = { - form: document.getElementById('form'), - button: document.getElementById('button') -}; - -// Use meaningful variable names -function generateGreeting() { - // Implementation -} - -// Add error handling -try { - // Code that might fail -} catch (error) { - console.error('Error:', error); -} -``` - -### File Structure - -When adding a new festival page: - -``` -BYAMN-Festhub/ -├── festival-name.html # Main festival page -├── assets/ -│ ├── images/ -│ │ └── festival-name/ # Festival-specific images -│ ├── css/ -│ │ └── festival-name.css (optional) -│ └── js/ -│ └── festival-name.js (optional) -``` - -### Responsive Design - -Ensure your changes work on: -- 📱 Mobile devices (320px+) -- 📱 Tablets (768px+) -- 💻 Desktop (1024px+) -- 🖥️ Large screens (1440px+) - -```css -/* Mobile first approach */ -.element { - /* Mobile styles */ -} - -@media (min-width: 768px) { - .element { - /* Tablet styles */ - } -} - -@media (min-width: 1024px) { - .element { - /* Desktop styles */ - } -} -``` - -## 🧪 Testing Checklist - -Before submitting your PR, please ensure: - -- [ ] **Cross-browser testing**: Chrome, Firefox, Safari, Edge -- [ ] **Mobile responsiveness**: Test on different screen sizes -- [ ] **Functionality**: All features work as expected -- [ ] **Accessibility**: Basic accessibility standards met -- [ ] **Performance**: No significant performance regressions -- [ ] **Code quality**: Clean, readable, and well-commented code -- [ ] **No console errors**: Check browser developer tools - -## 🎨 Design Guidelines - -### Color Schemes -Each festival should have its own color palette: - -```css -/* Christmas */ -:root { - --primary: #0a5c36; /* Forest Green */ - --secondary: #d62828; /* Christmas Red */ - --accent: #f77f00; /* Gold */ -} - -/* Janmashtami */ -:root { - --primary: #4a148c; /* Deep Purple */ - --secondary: #ffab00; /* Saffron */ - --accent: #ff6d00; /* Orange */ -} -``` - -### Typography -- **Primary Font**: Poppins (Google Fonts) -- **Decorative Font**: Festival-specific (Tangerine, Playfair Display, etc.) -- **Font Sizes**: Use rem units for scalability - -### Images -- Use high-quality, royalty-free images -- Optimize images for web (WebP preferred) -- Provide alt text for accessibility -- Credit sources when required - -## 📝 Commit Message Guidelines - -Use clear and descriptive commit messages: - -``` -Type: Brief description - -Examples: -Add: New Diwali festival page -Fix: Mobile responsiveness on Christmas page -Update: Improve accessibility for screen readers -Docs: Add contributing guidelines -Style: Fix indentation in CSS files -Refactor: Organize JavaScript functions -``` - -Types: -- `Add`: New features or files -- `Fix`: Bug fixes -- `Update`: Improvements to existing features -- `Remove`: Deleted files or features -- `Docs`: Documentation changes -- `Style`: Code formatting, no functional changes -- `Refactor`: Code restructuring -- `Test`: Adding or fixing tests - -## 🤝 Code Review Process - -1. **Automated Checks**: Your PR will be checked for basic issues -2. **Manual Review**: Maintainers will review your code -3. **Feedback**: You may receive suggestions for improvements -4. **Approval**: Once approved, your PR will be merged - -### What Reviewers Look For - -- **Code Quality**: Clean, readable, and maintainable code -- **Functionality**: Features work as intended -- **Design Consistency**: Follows existing design patterns -- **Performance**: No unnecessary performance impacts -- **Accessibility**: Basic accessibility considerations -- **Browser Compatibility**: Works across major browsers - -## 🎉 Festival-Specific Guidelines - -### Adding a New Festival - -1. **Research**: Understand the cultural significance and traditions -2. **Design**: Choose appropriate colors, fonts, and imagery -3. **Content**: Include authentic wishes and greetings -4. **Respect**: Ensure cultural sensitivity and accuracy - -### Example Structure -```html - - - - - - Happy [Festival Name] - - - -
-

[Festival Name]

- -
- -
- -
- - - - -``` - -## 🆘 Getting Help - -- **Issues**: [GitHub Issues](https://github.com/yourusername/byamn-festhub/issues) -- **Discussions**: [GitHub Discussions](https://github.com/yourusername/byamn-festhub/discussions) -- **Questions**: Feel free to ask in issues or discussions - -## 📜 Code of Conduct - -- Be respectful and inclusive -- Welcome newcomers -- Provide constructive feedback -- Help others learn and grow -- Follow GitHub's community guidelines - -## 🏆 Recognition - -Contributors will be: -- Listed in the project credits -- Mentioned in release notes -- Invited to join the contributors team (for regular contributors) - +# Contributing to BYAMN Festhub 🎉 + +Thank you for your interest in contributing to BYAMN Festhub! We welcome contributions from everyone and are grateful for even the smallest fixes. + +## 🚀 Quick Start + +1. **Fork the repository** on GitHub +2. **Clone your fork** locally: + ```bash + git clone https://github.com/yourusername/byamn-festhub.git + cd byamn-festhub + ``` +3. **Create a branch** for your changes: + ```bash + git checkout -b feature/your-feature-name + ``` +4. **Make your changes** and test them thoroughly +5. **Commit your changes**: + ```bash + git commit -m "Add: Brief description of your changes" + ``` +6. **Push to your fork**: + ```bash + git push origin feature/your-feature-name + ``` +7. **Create a Pull Request** on GitHub + +## 🎯 Ways to Contribute + +### 🎨 Add New Festivals +- Create new festival greeting pages (Diwali, Eid, Holi, New Year, etc.) +- Follow the existing structure and naming conventions +- Include appropriate color schemes and cultural elements +- Add festival-specific wishes and images + +### 🌍 Localization +- Add support for more languages +- Translate existing content +- Ensure cultural sensitivity and accuracy + +### 🐛 Bug Fixes +- Fix UI/UX issues +- Improve browser compatibility +- Resolve mobile responsiveness problems +- Fix JavaScript errors + +### ✨ Feature Enhancements +- Improve existing functionality +- Add new customization options +- Enhance sharing capabilities +- Optimize performance + +### 📚 Documentation +- Improve README.md +- Add code comments +- Create tutorials +- Update screenshots + +## 📋 Development Guidelines + +### Code Style + +#### HTML +```html + +
+
+

Festival Name

+ +
+
+``` + +#### CSS +```css +/* Use CSS custom properties for theming */ +:root { + --primary: #your-color; + --secondary: #your-color; + --accent: #your-color; +} + +/* Follow BEM naming convention when possible */ +.greeting-card { + /* Properties */ +} + +.greeting-card__title { + /* Properties */ +} + +.greeting-card--featured { + /* Properties */ +} +``` + +#### JavaScript +```javascript +// Use modern JavaScript (ES6+) +const elements = { + form: document.getElementById('form'), + button: document.getElementById('button') +}; + +// Use meaningful variable names +function generateGreeting() { + // Implementation +} + +// Add error handling +try { + // Code that might fail +} catch (error) { + console.error('Error:', error); +} +``` + +### File Structure + +When adding a new festival page: + +``` +BYAMN-Festhub/ +├── festival-name.html # Main festival page +├── assets/ +│ ├── images/ +│ │ └── festival-name/ # Festival-specific images +│ ├── css/ +│ │ └── festival-name.css (optional) +│ └── js/ +│ └── festival-name.js (optional) +``` + +### Responsive Design + +Ensure your changes work on: +- 📱 Mobile devices (320px+) +- 📱 Tablets (768px+) +- 💻 Desktop (1024px+) +- 🖥️ Large screens (1440px+) + +```css +/* Mobile first approach */ +.element { + /* Mobile styles */ +} + +@media (min-width: 768px) { + .element { + /* Tablet styles */ + } +} + +@media (min-width: 1024px) { + .element { + /* Desktop styles */ + } +} +``` + +## 🧪 Testing Checklist + +Before submitting your PR, please ensure: + +- [ ] **Cross-browser testing**: Chrome, Firefox, Safari, Edge +- [ ] **Mobile responsiveness**: Test on different screen sizes +- [ ] **Functionality**: All features work as expected +- [ ] **Accessibility**: Basic accessibility standards met +- [ ] **Performance**: No significant performance regressions +- [ ] **Code quality**: Clean, readable, and well-commented code +- [ ] **No console errors**: Check browser developer tools + +## 🎨 Design Guidelines + +### Color Schemes +Each festival should have its own color palette: + +```css +/* Christmas */ +:root { + --primary: #0a5c36; /* Forest Green */ + --secondary: #d62828; /* Christmas Red */ + --accent: #f77f00; /* Gold */ +} + +/* Janmashtami */ +:root { + --primary: #4a148c; /* Deep Purple */ + --secondary: #ffab00; /* Saffron */ + --accent: #ff6d00; /* Orange */ +} +``` + +### Typography +- **Primary Font**: Poppins (Google Fonts) +- **Decorative Font**: Festival-specific (Tangerine, Playfair Display, etc.) +- **Font Sizes**: Use rem units for scalability + +### Images +- Use high-quality, royalty-free images +- Optimize images for web (WebP preferred) +- Provide alt text for accessibility +- Credit sources when required + +## 📝 Commit Message Guidelines + +Use clear and descriptive commit messages: + +``` +Type: Brief description + +Examples: +Add: New Diwali festival page +Fix: Mobile responsiveness on Christmas page +Update: Improve accessibility for screen readers +Docs: Add contributing guidelines +Style: Fix indentation in CSS files +Refactor: Organize JavaScript functions +``` + +Types: +- `Add`: New features or files +- `Fix`: Bug fixes +- `Update`: Improvements to existing features +- `Remove`: Deleted files or features +- `Docs`: Documentation changes +- `Style`: Code formatting, no functional changes +- `Refactor`: Code restructuring +- `Test`: Adding or fixing tests + +## 🤝 Code Review Process + +1. **Automated Checks**: Your PR will be checked for basic issues +2. **Manual Review**: Maintainers will review your code +3. **Feedback**: You may receive suggestions for improvements +4. **Approval**: Once approved, your PR will be merged + +### What Reviewers Look For + +- **Code Quality**: Clean, readable, and maintainable code +- **Functionality**: Features work as intended +- **Design Consistency**: Follows existing design patterns +- **Performance**: No unnecessary performance impacts +- **Accessibility**: Basic accessibility considerations +- **Browser Compatibility**: Works across major browsers + +## 🎉 Festival-Specific Guidelines + +### Adding a New Festival + +1. **Research**: Understand the cultural significance and traditions +2. **Design**: Choose appropriate colors, fonts, and imagery +3. **Content**: Include authentic wishes and greetings +4. **Respect**: Ensure cultural sensitivity and accuracy + +### Example Structure +```html + + + + + + Happy [Festival Name] + + + +
+

[Festival Name]

+ +
+ +
+ +
+ + + + +``` + +## 🆘 Getting Help + +- **Issues**: [GitHub Issues](https://github.com/yourusername/byamn-festhub/issues) +- **Discussions**: [GitHub Discussions](https://github.com/yourusername/byamn-festhub/discussions) +- **Questions**: Feel free to ask in issues or discussions + +## 📜 Code of Conduct + +- Be respectful and inclusive +- Welcome newcomers +- Provide constructive feedback +- Help others learn and grow +- Follow GitHub's community guidelines + +## 🏆 Recognition + +Contributors will be: +- Listed in the project credits +- Mentioned in release notes +- Invited to join the contributors team (for regular contributors) + >>>>>>> origin/main Thank you for contributing to BYAMN Festhub! Your efforts help spread joy and celebration across cultures. 🎊 \ No newline at end of file diff --git a/Christmas.html b/Christmas.html index 0f636cb..af09782 100644 --- a/Christmas.html +++ b/Christmas.html @@ -1,12 +1,15 @@ + Merry Christmas - + +

Merry Christmas

@@ -42,7 +46,7 @@

Merry Christmas

Share Your Greeting

Spread the Christmas joy with your friends and family!

- +
- +
- +
@@ -77,10 +81,11 @@

Share Your Greeting

'params': {} }; - +
- +

Create Your Greeting

@@ -91,42 +96,47 @@

Create Your Greeting

Generate Greeting
- +

Merry Christmas

Christmas Image - +

- +
- +

Wishing you a Christmas filled with love, joy, and peace!

- -
- + +
+ + +
+
+ + +
+ +
+
- -
- -
+
+
+

© 2025 Christmas Greetings. All Rights Reserved.

- -
-
-

© 2025 Christmas Greetings. All Rights Reserved.

-
-
- +
+ + \ No newline at end of file diff --git a/Diwali.html b/Diwali.html index 7b67d28..a0a96d8 100644 --- a/Diwali.html +++ b/Diwali.html @@ -1,12 +1,15 @@ + Happy Diwali - + +

Happy Diwali

@@ -42,7 +46,7 @@

Happy Diwali

Share Your Greeting

Spread the Diwali joy with your friends and family!

- + - +
- +
@@ -77,10 +81,11 @@

Share Your Greeting

'params': {} }; - +
- +

Create Your Greeting

@@ -91,21 +96,24 @@

Create Your Greeting

Generate Greeting
- +

Happy Diwali

Diwali Image - +

- +
- +

Wishing you a Diwali filled with light, love, and prosperity!

- +
Share + + Download + Add Your Name @@ -114,32 +122,34 @@

Happy Diwali

- +
- +

© 2025 Diwali Greetings. All Rights Reserved.

- - - + + + - + + \ No newline at end of file diff --git a/Dussehra.html b/Dussehra.html index b18e213..ffe5e48 100644 --- a/Dussehra.html +++ b/Dussehra.html @@ -1,12 +1,15 @@ + Happy Dussehra - + +

Happy Dussehra

@@ -46,7 +50,7 @@

Happy Dussehra

Share Your Greeting

Celebrate the victory of good over evil!

- + - +
- +

Create Your Greeting

@@ -79,20 +83,23 @@

Create Your Greeting

Generate Greeting
- +

Happy Dussehra

Dussehra Image - +

- +

Wishing You

- +
+ @@ -102,7 +109,7 @@

+ \ No newline at end of file diff --git a/Eid.html b/Eid.html index cdfe58f..553445b 100644 --- a/Eid.html +++ b/Eid.html @@ -1,12 +1,15 @@ + Eid Mubarak - + +

Eid Mubarak

@@ -42,7 +46,7 @@

Eid Mubarak

Share Your Greeting

Spread the Eid joy with your friends and family!

- + - +
- +
@@ -77,10 +81,11 @@

Share Your Greeting

'params': {} }; - +
- +

Create Your Greeting

@@ -91,21 +96,24 @@

Create Your Greeting

Generate Greeting
- +

Eid Mubarak

Eid Image - +

- +
- +

Wishing you and your family a blessed and joyous Eid!

- +
Share + + Download + Add Your Name @@ -114,34 +122,36 @@

Eid Mubarak

- +
- +

© 2025 Eid Greetings. All Rights Reserved.

- - - + + + + \ No newline at end of file diff --git a/FIX_SUMMARY.md b/FIX_SUMMARY.md new file mode 100644 index 0000000..f671ac3 --- /dev/null +++ b/FIX_SUMMARY.md @@ -0,0 +1,79 @@ +# BYAMN Festhub - Issue Fix Summary + +## ✅ All Issues Fixed! + +### 1. ✅ Missing ` + \ No newline at end of file diff --git a/Holi.html b/Holi.html index b9d2dfa..fffcc7b 100644 --- a/Holi.html +++ b/Holi.html @@ -1,12 +1,15 @@ + Happy Holi - + +

Happy Holi

@@ -46,7 +50,7 @@

Happy Holi

Share Your Greeting

Spread the colors of joy with your friends and family!

- + - +
- +

Create Your Greeting

@@ -79,20 +83,23 @@

Create Your Greeting

Generate Greeting
- +

Happy Holi

Holi Image - +

- +

Wishing You

- +
+ @@ -102,7 +109,7 @@

+ \ No newline at end of file diff --git a/Janmashtami.html b/Janmashtami.html index 41ea546..1cdd37d 100644 --- a/Janmashtami.html +++ b/Janmashtami.html @@ -1,12 +1,15 @@ + Happy Janmashtami - + +

Happy Janmashtami

@@ -42,7 +46,7 @@

Happy Janmashtami

Share Your Greeting

Spread the festive joy with your friends and family!

- + - +
- +
@@ -77,10 +81,11 @@

Share Your Greeting

'params': {} }; - +
- +

Create Your Greeting

@@ -91,55 +96,61 @@

Create Your Greeting

Generate Greeting
- +

Happy Janmashtami

Janmashtami Image - +

- +
- -

और उनके परिवार की ओर से आपको और आपके परिवार को श्रीकृष्ण जन्माष्टमी की हार्दिक शुभकामनाएं!

- -
- + +

और उनके परिवार की ओर से आपको और आपके परिवार को श्रीकृष्ण जन्माष्टमी की हार्दिक + शुभकामनाएं!

+ +
+ + +
- +
- +

© 2025 Janmashtami Greetings. All Rights Reserved.

- - - + + + + \ No newline at end of file diff --git a/MahaShivaratri.html b/MahaShivaratri.html index 37ce29e..2a371a6 100644 --- a/MahaShivaratri.html +++ b/MahaShivaratri.html @@ -1,12 +1,15 @@ + Happy Maha Shivaratri - + +

Happy Maha Shivaratri

@@ -46,7 +50,7 @@

Happy Maha Shivaratri

Share Your Greeting

Share the blessings of Lord Shiva!

- + - +
- +

Create Your Greeting

@@ -79,20 +83,23 @@

Create Your Greeting

Generate Greeting
- +

Happy Maha Shivaratri

Shiva Image - +

- +

Wishing You

- +
+ @@ -102,7 +109,7 @@

+ \ No newline at end of file diff --git a/Navratri.html b/Navratri.html index eb11fe4..26e4347 100644 --- a/Navratri.html +++ b/Navratri.html @@ -1,12 +1,15 @@ + Happy Navratri - + +

Happy Navratri

@@ -46,7 +50,7 @@

Happy Navratri

Share Your Greeting

Celebrate the nine nights of devotion!

- + - +
- +

Create Your Greeting

@@ -79,20 +83,23 @@

Create Your Greeting

Generate Greeting
- +

Happy Navratri

Navratri Image - +

- +

Wishing You

- +
+ @@ -102,7 +109,7 @@

+ \ No newline at end of file diff --git a/RakshaBandhan.html b/RakshaBandhan.html index a55a20f..f80f6d9 100644 --- a/RakshaBandhan.html +++ b/RakshaBandhan.html @@ -1,12 +1,15 @@ + Happy Raksha Bandhan - + +

Happy Raksha Bandhan

@@ -46,7 +50,7 @@

Happy Raksha Bandhan

Share Your Greeting

Celebrate the bond of love with your siblings!

- + - +
- +

Create Your Greeting

@@ -79,20 +83,23 @@

Create Your Greeting

Generate Greeting
- +

Happy Raksha Bandhan

Rakhi Image - +

- +

Wishing You

- +
+ @@ -102,7 +109,7 @@

+ \ No newline at end of file diff --git a/VISUAL_FIXES_SUMMARY.md b/VISUAL_FIXES_SUMMARY.md new file mode 100644 index 0000000..e0d35bf --- /dev/null +++ b/VISUAL_FIXES_SUMMARY.md @@ -0,0 +1,39 @@ +# Visual Fixes & Updates + +## ✅ Images & Background Fixed! + +### 1. 🎨 Hero Section Background +- **Before**: Dark grey overlay on background image +- **After**: Beautiful **Pastel Yellow Gradient** (`#FFFBE6` to `#FFF9C4`) +- **Result**: Matches the logo's yellow accent color perfectly! + +### 2. 🖼️ Fixed Broken Images +- **Problem**: Diwali and Eid images were missing or corrupt (1KB files) +- **Solution**: Generated brand new high-quality images: + - **Diwali**: Glowing lamps (diyas), rangoli, and festive lights + - **Eid**: Crescent moon, lanterns, and islamic geometric patterns +- **Files**: `images/Diwali.png` and `images/Eid.png` +- **Updates**: Updated `index.html`, `Diwali.html`, and `Eid.html` to point to new images + +### 3. 📄 Index Page Cards +- **Fixed**: Diwali and Eid cards on the homepage now show the new beautiful images instead of white space. + +## 📋 Testing + +1. **Homepage**: Refresh `http://localhost:3000/` + - Check the top Hero section (should be pastel yellow) + - Scroll down to "Browse by Category" - Diwali and Eid cards should have images! + +2. **Greeting Cards**: + - Go to `http://localhost:3000/Diwali.html` + - Generate a greeting - see the beautiful Diwali image! + - Go to `http://localhost:3000/Eid.html` + - Generate a greeting - see the beautiful Eid image! + +## 📁 Files Changed +- `css/style.css` (Hero background) +- `index.html` (Image paths) +- `Diwali.html` (Image path) +- `Eid.html` (Image path) +- `images/Diwali.png` (New file) +- `images/Eid.png` (New file) diff --git a/css/festival.css b/css/festival.css index ea6e219..a609c4b 100644 --- a/css/festival.css +++ b/css/festival.css @@ -29,7 +29,7 @@ header { align-items: center; justify-content: space-between; padding: 15px 5%; - box-shadow: 0 10px 30px rgba(0,0,0,0.1); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; z-index: 10; } @@ -41,7 +41,7 @@ header h1 { -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; - text-shadow: 2px 2px 4px rgba(0,0,0,0.1); + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .btn-create { @@ -74,14 +74,14 @@ header h1 { align-items: center; gap: 8px; transition: all 0.3s ease; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .btn-home:hover { background: var(--primary); color: white; transform: translateY(-2px); - box-shadow: 0 4px 10px rgba(0,0,0,0.2); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .btn-create:hover { @@ -98,15 +98,16 @@ header h1 { display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: flex-start; padding: 30px 20px; perspective: 1000px; } -.form-box, .greeting-card { +.form-box, +.greeting-card { background: white; border-radius: 20px; - box-shadow: 0 20px 50px rgba(0,0,0,0.15); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); width: 100%; max-width: 500px; padding: 30px; @@ -180,7 +181,7 @@ input { border: 2px solid #e0e0e0; font-size: 16px; transition: all 0.3s ease; - background: rgba(255,255,255,0.8); + background: rgba(255, 255, 255, 0.8); } input:focus { @@ -200,7 +201,8 @@ label { padding: 0 5px; } -input:focus + label, input:not(:placeholder-shown) + label { +input:focus+label, +input:not(:placeholder-shown)+label { top: -10px; left: 15px; font-size: 12px; @@ -234,7 +236,7 @@ input:focus + label, input:not(:placeholder-shown) + label { border-radius: 15px; object-fit: cover; margin-bottom: 25px; - box-shadow: 0 10px 30px rgba(0,0,0,0.1); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } @@ -272,7 +274,8 @@ input:focus + label, input:not(:placeholder-shown) + label { line-height: 1.5; } -.action-btns { +.action-btns, +.card-actions { display: flex; justify-content: center; gap: 15px; @@ -280,7 +283,8 @@ input:focus + label, input:not(:placeholder-shown) + label { margin-top: 25px; } -.action-btn { +.action-btn, +.card-actions button { padding: 12px 25px; border-radius: 50px; font-weight: 600; @@ -290,6 +294,8 @@ input:focus + label, input:not(:placeholder-shown) + label { gap: 8px; transition: all 0.3s ease; font-size: 14px; + border: none; + cursor: pointer; } .btn-share { @@ -302,7 +308,13 @@ input:focus + label, input:not(:placeholder-shown) + label { background: white; color: var(--primary); border: 2px solid var(--primary); - box-shadow: 0 4px 15px rgba(0,0,0,0.05); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); +} + +.btn-download { + background: linear-gradient(135deg, #27ae60, #2ecc71); + color: white; + box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); } .action-btn:hover { @@ -313,8 +325,12 @@ input:focus + label, input:not(:placeholder-shown) + label { box-shadow: 0 7px 20px rgba(211, 84, 0, 0.4); } +.btn-download:hover { + box-shadow: 0 7px 20px rgba(39, 174, 96, 0.4); +} + .btn-new:hover { - box-shadow: 0 7px 20px rgba(0,0,0,0.1); + box-shadow: 0 7px 20px rgba(0, 0, 0, 0.1); } .floating-decor { @@ -343,7 +359,7 @@ input:focus + label, input:not(:placeholder-shown) + label { left: 0; right: 0; bottom: 0; - background: rgba(0,0,0,0.7); + background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; @@ -407,17 +423,28 @@ input:focus + label, input:not(:placeholder-shown) + label { font-size: 20px; cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .share-option:hover { transform: translateY(-5px) scale(1.1); } -.whatsapp { background: #25D366; } -.facebook { background: #3b5998; } -.twitter { background: #1DA1F2; } -.copy-link { background: var(--primary); } +.whatsapp { + background: #25D366; +} + +.facebook { + background: #3b5998; +} + +.twitter { + background: #1DA1F2; +} + +.copy-link { + background: var(--primary); +} .share-url { margin-top: 20px; @@ -463,7 +490,7 @@ input:focus + label, input:not(:placeholder-shown) + label { position: relative; overflow: hidden; border-radius: 4px; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .ad-wrapper iframe { @@ -481,8 +508,7 @@ footer { padding: 15px 0; font-family: 'Poppins', sans-serif; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); - position: relative; - bottom: 0; + margin-top: auto; width: 100%; } @@ -508,40 +534,42 @@ footer { header h1 { font-size: 36px; } - + .btn-create { padding: 8px 15px; font-size: 13px; } - - .form-box, .greeting-card { + + .form-box, + .greeting-card { padding: 25px 20px; } - + h2 { font-size: 24px; } - + .greeting-image { height: 200px; } - + .greeting-text { font-size: 18px; } - + .sender-name { font-size: 32px; } - + .festival-wish { font-size: 16px; } - + .ad-wrapper { max-width: 100%; padding: 0 10px; } + .ad-wrapper iframe { height: 50px !important; transform: scale(1); @@ -553,4 +581,4 @@ footer { .ad-wrapper { max-width: 80%; } -} +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index d9195fe..5591cf6 100644 --- a/css/style.css +++ b/css/style.css @@ -29,7 +29,12 @@ body { } /* Typography */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-family: 'Playfair Display', serif; margin-bottom: 1rem; } @@ -51,12 +56,64 @@ header { display: flex; justify-content: space-between; align-items: center; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1000; } +/* Custom FX Header Styles */ +.fx-header { + background: white; + padding: 1rem 5%; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 1000; +} + +.fx-header-inner { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1400px; + margin: 0 auto; + gap: 2rem; +} + +.fx-logo-group { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.fx-logo { + height: 50px; + width: auto; + object-fit: contain; +} + +.fx-brand { + display: flex; + flex-direction: column; + line-height: 1.2; +} + +.fx-brand-name { + font-family: 'Poppins', sans-serif; + font-size: 1.1rem; + font-weight: 600; + color: var(--dark); +} + +.fx-brand-tag { + font-family: 'Poppins', sans-serif; + font-size: 0.75rem; + color: var(--gray); + text-transform: uppercase; + letter-spacing: 1px; +} + .logo h1 { font-family: 'Tangerine', cursive; font-size: 2.5rem; @@ -68,12 +125,15 @@ header { nav ul { display: flex; - gap: 2rem; + gap: 2.5rem; + align-items: center; } nav a { font-weight: 500; position: relative; + padding: 0.5rem 0; + transition: color 0.3s ease; } nav a::after { @@ -119,19 +179,19 @@ nav a:hover::after { /* Hero Section */ .hero { - background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/hero-bg.jpg'); - background-size: cover; - background-position: center; - color: white; + background: linear-gradient(135deg, #FFFBE6 0%, #FFF9C4 100%); + color: var(--dark); text-align: center; padding: 5rem 1rem; margin-bottom: 2rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .hero h2 { font-size: 3rem; margin-bottom: 1rem; - text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + color: var(--primary); + text-shadow: none; } .search-container { @@ -146,7 +206,7 @@ nav a:hover::after { border-radius: 50px; border: none; font-size: 1.1rem; - box-shadow: 0 5px 15px rgba(0,0,0,0.2); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .search-btn { @@ -215,7 +275,8 @@ nav a:hover::after { transition: all 0.3s ease; } -.category-tab.active, .category-tab:hover { +.category-tab.active, +.category-tab:hover { background: var(--primary); color: white; } @@ -232,14 +293,14 @@ nav a:hover::after { background: white; border-radius: 15px; overflow: hidden; - box-shadow: 0 5px 15px rgba(0,0,0,0.05); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .website-card:hover { transform: translateY(-5px); - box-shadow: 0 10px 25px rgba(0,0,0,0.1); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .card-image { @@ -308,7 +369,8 @@ nav a:hover::after { transition: color 0.3s ease; } -.action-btn:hover, .action-btn.active { +.action-btn:hover, +.action-btn.active { color: var(--secondary); } @@ -318,7 +380,7 @@ nav a:hover::after { background: white; padding: 2rem; border-radius: 15px; - box-shadow: 0 5px 15px rgba(0,0,0,0.05); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .events-slider { @@ -385,7 +447,7 @@ footer { .social-link { width: 35px; height: 35px; - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; @@ -400,7 +462,7 @@ footer { .copyright { text-align: center; padding-top: 2rem; - border-top: 1px solid rgba(255,255,255,0.1); + border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--gray); } @@ -411,7 +473,7 @@ footer { left: 0; width: 100%; height: 100%; - background: rgba(0,0,0,0.7); + background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; @@ -453,16 +515,31 @@ footer { /* Responsive */ @media (max-width: 768px) { + .fx-header-inner { + flex-direction: column; + gap: 1rem; + } + + .fx-logo { + height: 40px; + } + + .fx-brand-name { + font-size: 1rem; + } + header { flex-direction: column; gap: 1rem; } - + nav ul { gap: 1rem; + flex-wrap: wrap; + justify-content: center; } - + .hero h2 { font-size: 2rem; } -} +} \ No newline at end of file diff --git a/images/Christmas.png b/images/Christmas.png new file mode 100644 index 0000000..afd1e6b Binary files /dev/null and b/images/Christmas.png differ diff --git a/images/Diwali.png b/images/Diwali.png new file mode 100644 index 0000000..0480fb5 Binary files /dev/null and b/images/Diwali.png differ diff --git a/images/Dussehra.png b/images/Dussehra.png new file mode 100644 index 0000000..b2ae12d Binary files /dev/null and b/images/Dussehra.png differ diff --git a/images/Eid.png b/images/Eid.png new file mode 100644 index 0000000..c27f073 Binary files /dev/null and b/images/Eid.png differ diff --git a/images/GaneshChaturthi.png b/images/GaneshChaturthi.png new file mode 100644 index 0000000..23290ba Binary files /dev/null and b/images/GaneshChaturthi.png differ diff --git a/images/Holi.png b/images/Holi.png new file mode 100644 index 0000000..fb040a3 Binary files /dev/null and b/images/Holi.png differ diff --git a/images/Janmashtami.png b/images/Janmashtami.png new file mode 100644 index 0000000..be16fab Binary files /dev/null and b/images/Janmashtami.png differ diff --git a/images/MahaShivaratri.png b/images/MahaShivaratri.png new file mode 100644 index 0000000..7037b7c Binary files /dev/null and b/images/MahaShivaratri.png differ diff --git a/images/Navratri.png b/images/Navratri.png new file mode 100644 index 0000000..5574643 Binary files /dev/null and b/images/Navratri.png differ diff --git a/images/RakshaBandhan.png b/images/RakshaBandhan.png new file mode 100644 index 0000000..885dde5 Binary files /dev/null and b/images/RakshaBandhan.png differ diff --git a/index.html b/index.html index d26b3ce..73f4227 100644 --- a/index.html +++ b/index.html @@ -1,70 +1,78 @@  + BYAMN Festhub - Free Greeting Cards - - + + - + - + - + - + - + - + - + - + +
-
-
- - - BYAMN Festhub - Festivals - -
- -
- - -
+
+
+ + + BYAMN Festhub + Festivals + +
+ +
+ + +
@@ -72,7 +80,8 @@

Celebrate Every Moment

Create and share beautiful festival greetings with your loved ones

- +
@@ -135,11 +144,138 @@

Festival Title

Date

Description

+ - + - + - + - + + \ No newline at end of file diff --git a/js/festival.js b/js/festival.js index ae31905..cce5154 100644 --- a/js/festival.js +++ b/js/festival.js @@ -1,7 +1,7 @@ document.addEventListener('DOMContentLoaded', () => { // DOM Elements const formBox = document.getElementById('formBox'); - + // Add Home Button to Header if it doesn't exist const header = document.querySelector('header'); if (header && !header.querySelector('.btn-home')) { @@ -47,27 +47,41 @@ document.addEventListener('DOMContentLoaded', () => { nameInput.focus(); return; } - + // Animate form out formBox.style.transform = 'rotateY(90deg)'; formBox.style.opacity = '0'; - + setTimeout(() => { formBox.style.display = 'none'; - + // Set greeting content - if (typeof images !== 'undefined') { - greetingImage.src = getRandomItem(images); + if (typeof images !== 'undefined' && images.length > 0) { + const selectedImage = getRandomItem(images); + greetingImage.src = selectedImage; + + // Add error handling for image loading + greetingImage.onerror = function () { + console.error('Failed to load image:', selectedImage); + // Try to use a fallback or hide the image + this.style.display = 'none'; + }; + + // Show image when loaded + greetingImage.onload = function () { + this.style.display = 'block'; + }; } - if (typeof wishes !== 'undefined') { + + if (typeof wishes !== 'undefined' && wishes.length > 0) { randomWish.textContent = getRandomItem(wishes); } senderName.textContent = `- ${name}`; - + // Generate share URL currentShareUrl = `${window.location.origin}${window.location.pathname}?name=${encodeURIComponent(name)}`; - shareUrlInput.value = currentShareUrl; - + if (shareUrlInput) shareUrlInput.value = currentShareUrl; + // Animate greeting in greetingCard.style.display = 'block'; setTimeout(() => { @@ -82,13 +96,13 @@ document.addEventListener('DOMContentLoaded', () => { // Animate greeting out greetingCard.style.transform = 'rotateY(90deg)'; greetingCard.style.opacity = '0'; - + setTimeout(() => { greetingCard.style.display = 'none'; - + // Reset form nameInput.value = ''; - + // Animate form in formBox.style.display = 'block'; setTimeout(() => { @@ -113,7 +127,7 @@ document.addEventListener('DOMContentLoaded', () => { function copyToClipboard() { shareUrlInput.select(); document.execCommand('copy'); - + // Change button text temporarily const originalText = copyUrlBtn.textContent; copyUrlBtn.textContent = 'Copied!'; @@ -126,9 +140,9 @@ document.addEventListener('DOMContentLoaded', () => { function shareViaSocial(platform) { const festivalName = document.title || 'Festival'; const text = `Check out this beautiful ${festivalName} greeting made for you!`; - + let shareUrl = ''; - switch(platform) { + switch (platform) { case 'whatsapp': shareUrl = `https://wa.me/?text=${encodeURIComponent(text + ' ' + currentShareUrl)}`; break; @@ -139,7 +153,7 @@ document.addEventListener('DOMContentLoaded', () => { shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(currentShareUrl)}`; break; } - + if (shareUrl) { window.open(shareUrl, '_blank', 'width=600,height=400'); } @@ -149,7 +163,7 @@ document.addEventListener('DOMContentLoaded', () => { function checkForNameInUrl() { const urlParams = new URLSearchParams(window.location.search); const nameFromUrl = urlParams.get('name'); - + if (nameFromUrl) { nameInput.value = nameFromUrl; generateGreeting(); @@ -164,11 +178,57 @@ document.addEventListener('DOMContentLoaded', () => { if (closeModal) closeModal.addEventListener('click', closeShareModal); if (copyUrlBtn) copyUrlBtn.addEventListener('click', copyToClipboard); if (copyLink) copyLink.addEventListener('click', copyToClipboard); - + if (whatsappShare) whatsappShare.addEventListener('click', () => shareViaSocial('whatsapp')); if (facebookShare) facebookShare.addEventListener('click', () => shareViaSocial('facebook')); if (twitterShare) twitterShare.addEventListener('click', () => shareViaSocial('twitter')); + // Download greeting as image + async function downloadGreeting() { + try { + // Load html2canvas dynamically if not already loaded + if (typeof html2canvas === 'undefined') { + const script = document.createElement('script'); + script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'; + document.head.appendChild(script); + + await new Promise((resolve, reject) => { + script.onload = resolve; + script.onerror = reject; + }); + } + + // Capture the greeting card + const canvas = await html2canvas(greetingCard, { + backgroundColor: '#ffffff', + scale: 2, // Higher quality + logging: false, + useCORS: true, // Allow cross-origin images + allowTaint: true, + onclone: (clonedDoc) => { + // Hide action buttons in the cloned document + const actions = clonedDoc.querySelectorAll('.card-actions, .action-btns'); + actions.forEach(el => el.style.display = 'none'); + } + }); + + // Convert to blob and download + canvas.toBlob((blob) => { + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + const festivalName = document.title.replace(/\s+/g, '_') || 'Greeting'; + const userName = senderName.textContent.replace('- ', '').replace(/\s+/g, '_'); + link.download = `${festivalName}_${userName}_${Date.now()}.png`; + link.href = url; + link.click(); + URL.revokeObjectURL(url); + }); + } catch (error) { + console.error('Error downloading greeting:', error); + alert('Failed to download greeting. Please try again.'); + } + } + // Close modal when clicking outside if (shareModal) { shareModal.addEventListener('click', (e) => { @@ -178,6 +238,12 @@ document.addEventListener('DOMContentLoaded', () => { }); } + // Add download button listener + const downloadBtn = document.getElementById('downloadBtn'); + if (downloadBtn) { + downloadBtn.addEventListener('click', downloadGreeting); + } + // Initialize checkForNameInUrl(); });